/* playground.css — simulatorul de reguli (pagina /playground, FAZA 2).
   Mobile-first; responsive 375/768/1280/2560. Grid 1->2->3 coloane, fără scroll orizontal.
   Fără scroll orizontal: canvas + tabelle scalează, codul pre are overflow-x:auto. */

.playground { width: 100%; }

/* Grid principal: 1 coloană pe telefon, 2 pe tabletă, 3 pe desktop. */
.pg-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.pg-col { min-width: 0; width: 100%; }
.pg-col h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
/* Coloanele din grilă nu trebuie să o depășească pe grilă (min-width:0 previne blowout). */
.pg-rules { min-width: 0; }
.pg-sim { min-width: 0; align-self: start; }
.pg-cmds { min-width: 0; }

/* Comutatoare de reguli */
.pg-switches { display: grid; gap: var(--sp-1); }
.pg-switch { align-items: flex-start; gap: var(--sp-2); margin: 0;
  padding: var(--sp-2); border: var(--border-soft);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pg-switch:hover { border-color: var(--accent-line); }
.pg-switch input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.pg-switch:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Canvas simulare */
.pg-canvas { width: 100%; height: clamp(200px, 34vh, 340px); display: block;
  background: #04060c; border-radius: var(--radius-sm); }
.pg-log { list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  max-height: 120px; overflow: hidden; font-size: var(--fs-xs); color: var(--ink-dim); }
.pg-log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Contoare pe regulă */
.pg-counters { width: 100%; }
.pg-counters .num { text-align: right; font-family: var(--font-mono); }
.pg-counters .c-drop { color: var(--alert); }
.pg-counters .c-allow { color: var(--accent-2); }

/* Comenzi generate */
.pg-cmds-block { max-height: 360px; overflow: auto; }

/* Responsive */
/* Telefon ≤600 (inclusiv 375). */
@media (max-width: 600px) {
  .pg-grid { grid-template-columns: 1fr; }
  .pg-canvas { height: clamp(180px, 50vw, 240px); }
}

/* Tabletă 601–1024 (inclusiv 768): 2 coloane (reguli + simulare sus, comenzi dedesubt). */
@media (min-width: 601px) and (max-width: 1024px) {
  .pg-grid { grid-template-columns: 1fr 1fr; }
  .pg-cmds { grid-column: 1 / -1; }
}

/* Laptop/desktop 1025–1920 (inclusiv 1280): 3 coloane alăturate (reguli | simulare | comenzi). */
@media (min-width: 1025px) and (max-width: 1920px) {
  .pg-grid { grid-template-columns: 1fr 1.2fr 1fr; }
}

/* Ecran lat ≥1921 (inclusiv 2560): 3 coloane, lățime max. conținut. */
@media (min-width: 1921px) {
  .pg-grid { grid-template-columns: 1fr 1.3fr 1fr; max-width: 1400px; }
}

/* Reduced motion: fără glow intens. */
@media (prefers-reduced-motion: reduce) {
  .pg-canvas { opacity: 0.95; }
}