/* ============================================================================
 *  animacions.css — El traçador de codi de la teoria (animacions.js).
 *  Codi a l'esquerra, escenari a la dreta, nota davall, botons al peu.
 *  Tot amb els tokens de themes.css, així que funciona als 4 temes.
 * ==========================================================================*/

/* Contenidor dins de cada apartat de la teoria */
.concept-anim-inline{
  margin:1.4rem 0 .4rem;padding:1.1rem 1.2rem 1rem;border-radius:var(--radius-sm,10px);
  background:var(--bg-elev);border:1px solid var(--border);
}
.concept-anim-label{
  display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;
  color:var(--text-dim);margin-bottom:.7rem;letter-spacing:.01em;
}
.concept-anim-inline hr.anim-divider{border:0;border-top:1px dashed var(--border);margin:1.3rem 0}

.tr-titol{font-weight:700;font-size:1rem;margin:0 0 .7rem;color:var(--text)}

/* Pestanyes de variants («edat = 20» / «edat = 15») */
.tr-variants{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.tr-var-btn{
  min-height:40px;padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:600;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;
  font-family:var(--mono);
}
.tr-var-btn:hover{color:var(--text);border-color:var(--accent)}
.tr-var-btn.tr-sel{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Graella: codi | escenari */
.tr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:start}
@media (max-width:760px){ .tr-grid{grid-template-columns:1fr} }
.tr-left,.tr-right{display:flex;flex-direction:column;gap:.7rem;min-width:0}

/* Codi amb la línia actual ressaltada */
.tr-code{margin:0;max-height:22rem;overflow:auto;scroll-behavior:smooth;font-size:.86rem}
.tr-code code{display:block}
.tr-l{transition:background .15s,opacity .2s;border-radius:4px}
.tr-l.tr-cur{background:color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.tr-l.tr-cur::before{color:var(--accent) !important;opacity:1 !important}
.tr-l.tr-skip{opacity:.32;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 70%,transparent)}
.tr-l.tr-crida{background:color-mix(in srgb,var(--accent2) 20%,transparent);box-shadow:inset 3px 0 0 var(--accent2)}
.tr-l.tr-cur.tr-skip{opacity:1;text-decoration:none}

/* La nota: què fa esta línia */
.tr-nota{
  min-height:3.2em;padding:.7rem .9rem;border-radius:10px;font-size:.95rem;line-height:1.5;
  background:var(--info-bg);border:1px solid var(--border);color:var(--text);
}
.tr-nota code{font-size:.9em}
.tr-nota small{display:block;margin-top:.35rem;color:var(--text-dim);font-size:.85em}
.tr-true{color:#16a34a}
.tr-false{color:#e11d48}
body[data-theme="dark"] .tr-true,body[data-theme="ocean"] .tr-true,body[data-theme="terminal"] .tr-true{color:#4ade80}
body[data-theme="dark"] .tr-false,body[data-theme="ocean"] .tr-false,body[data-theme="terminal"] .tr-false{color:#fb7185}

/* Panells de la dreta */
.tr-panel{border:1px solid var(--border);border-radius:10px;background:var(--bg-card);overflow:hidden}
.tr-ph{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);padding:.4rem .7rem;border-bottom:1px solid var(--border);
}

/* Shell */
.tr-out{
  margin:0;padding:.6rem .8rem;min-height:3.6em;max-height:11rem;overflow:auto;
  background:var(--code-block-bg);color:var(--code-block-fg);font-family:var(--mono);font-size:.84rem;
  white-space:pre-wrap;word-break:break-word;
}
.tr-out .tr-err{color:#fb7185}
.tr-out .tr-user,.tr-out .tr-typed{color:#fde047;font-weight:700}
.tr-caret{animation:tr-parpelleja 1s steps(1) infinite;color:#fde047}
@keyframes tr-parpelleja{50%{opacity:0}}

/* Variables: capses amb nom */
.tr-vbox{display:flex;flex-direction:column;gap:.35rem;padding:.6rem .7rem}
.tr-buit{color:var(--text-muted);font-size:.85rem;font-style:italic}
.tr-var{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.86rem;flex-wrap:wrap}
.tr-vn{color:var(--text-dim);min-width:5.5em}
.tr-vv{
  padding:.2rem .55rem;border-radius:6px;background:var(--bg-elev);border:1.5px solid var(--border);
  color:var(--accent);font-weight:700;min-width:2.4em;text-align:center;
}
.tr-vt{font-size:.72rem;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:.05rem .45rem}
.tr-var.tr-flash .tr-vv{animation:tr-flash .6s}
@keyframes tr-flash{0%{border-color:var(--accent2);transform:scale(1.12)}100%{transform:scale(1)}}
/* Llistes: cel·les amb la posició davall */
.tr-var .tr-vv:has(.tr-list){padding:.2rem;background:none;border:0}
.tr-list{display:inline-flex;flex-wrap:wrap;gap:.25rem}
.tr-cell{
  display:inline-flex;flex-direction:column;align-items:center;padding:.15rem .4rem;border-radius:6px;
  background:var(--bg-elev);border:1.5px solid var(--border);transition:.15s;
}
.tr-cell b{font-weight:700;color:var(--accent);font-size:.8rem}
.tr-cell i{font-style:normal;font-size:.68rem;color:var(--text-muted)}
.tr-cell.tr-ptr{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 18%,transparent);transform:translateY(-2px)}
.tr-cell.tr-ptr i{color:var(--accent2);font-weight:700}

/* Finestra de la tortuga (coordenades de turtle, y cap amunt) */
.tr-turtle svg{display:block;width:100%;max-height:17rem;background:var(--bg)}
.tr-turtle line{stroke-linecap:round;vector-effect:non-scaling-stroke}
.tr-turtle line.tr-ghost{stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:4 5;opacity:.7}
.tr-tortuga{fill:var(--accent);stroke:var(--bg);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill-opacity .2s}
.tr-tortuga.tr-alcat{fill-opacity:0;stroke:var(--accent);stroke-width:2}
.tr-eixos line{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}
.tr-eixos text{fill:var(--text-muted);font-size:9px;font-family:var(--mono)}

/* Finestra de joc (coordenades de Pygame Zero, y cap avall) */
.tr-game svg{display:block;width:100%;max-height:17rem;aspect-ratio:4/3}
.tr-fons{fill:#0c0f18}
.tr-gtext{fill:#fff;font-family:var(--mono);font-weight:700}
.tr-gcoord{fill:#fde047;font-family:var(--mono);font-size:28px}
.tr-gover{fill:#ef4444;font-size:90px}
.tr-gline{stroke:#fde047;stroke-width:2.5;vector-effect:non-scaling-stroke}
.tr-gaux{stroke:#94a3b8;stroke-dasharray:4 4}
.tr-gradi{stroke:#38bdf8}
.tr-bbox{fill:none;stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.tr-bbox.tr-xoc{stroke:#ef4444;stroke-width:2.5}
.tr-ticks{display:flex;justify-content:center;align-items:center;gap:.6rem;padding:.5rem;flex-wrap:wrap}
.tr-ticks span[data-tick]{
  font-family:var(--mono);font-size:.78rem;padding:.25rem .65rem;border-radius:999px;
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text-muted);transition:.1s;
}
.tr-ticks span.tr-on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.tr-frame{font-family:var(--mono);font-size:.78rem;color:var(--text-dim)}

/* Teclat */
.tr-keys{display:flex;justify-content:center;gap:.45rem;padding:.6rem;flex-wrap:wrap}
.tr-key{
  min-width:42px;height:42px;padding:0 .6rem;border-radius:8px;display:grid;place-items:center;
  background:var(--bg-elev);border:1px solid var(--border);border-bottom-width:3px;
  color:var(--text-dim);font-weight:700;font-size:.9rem;transition:.1s;
}
.tr-key.tr-pressed{background:var(--accent);color:var(--on-accent);border-color:var(--accent);transform:translateY(2px);border-bottom-width:1px}

/* Controls: grans per a l'ORBYS (≥ 44 px) */
.tr-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.9rem}
.tr-btn{
  min-height:44px;padding:.5rem 1.05rem;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text);
}
.tr-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.tr-btn:disabled{opacity:.45;cursor:not-allowed}
.tr-play{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tr-play:hover:not(:disabled){color:var(--on-accent);filter:brightness(1.08)}
.tr-reset{min-width:44px;padding:.5rem .8rem}
.tr-count{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
  .tr-var.tr-flash .tr-vv,.tr-caret{animation:none}
  .tr-code{scroll-behavior:auto}
}

/* ─── Afegits de PI Grau Bàsic: passos en prosa, diagrames i taules ───── */
.tr-prosa .tr-code{font-family:inherit;font-size:.95rem}
.tr-prosa .tr-l{white-space:pre-wrap}
.tr-diagrama svg{aspect-ratio:auto;max-height:19rem}
.tr-diagrama .tr-fons{fill:var(--bg)}
.tr-caixa rect{fill:var(--bg-card);stroke:var(--border);stroke-width:2;vector-effect:non-scaling-stroke;transition:fill .2s,stroke .2s}
.tr-caixa text{fill:var(--text);font-family:inherit;font-weight:600}
.tr-caixa.tr-on rect{stroke:var(--accent);fill:var(--accent-soft);stroke-width:3}
.tr-caixa.tr-ok rect{stroke:#16a34a;fill:rgba(22,163,74,.16);stroke-width:3}
.tr-caixa.tr-ko rect{stroke:#e11d48;fill:rgba(225,29,72,.14);stroke-width:3}
.tr-caixa.tr-off{opacity:.35}
.tr-garrow{stroke:var(--text-dim);stroke-width:2.5;vector-effect:non-scaling-stroke}
.tr-garrow-ko{stroke:#e11d48;stroke-dasharray:7 5}
.tr-punta{fill:var(--text-dim)}
.tr-punta-ko{fill:#e11d48}
.tr-taula table{width:100%;border-collapse:collapse;font-size:.86rem}
.tr-taula th{text-align:left;padding:.4rem .55rem;color:var(--text-muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.tr-taula td{padding:.45rem .55rem;border-bottom:1px solid var(--border);vertical-align:top}
.tr-taula td.tr-flash{animation:tr-flash .6s}
.tr-taula tr.tr-fila-on td{background:var(--accent-soft)}
.tr-taula tr.tr-total td{font-weight:800;border-top:2px solid var(--text-dim)}

/* Els passos numerats. PI no té la regla .cl del Taller (no hi ha codi
 * amb números de línia), així que el traçador porta la seua. */
.tr-code code{counter-reset:trl;display:block;padding:.8rem .9rem;line-height:1.65}
.tr-l{counter-increment:trl;display:block;position:relative;padding:.12rem .4rem .12rem 2.4em}
.tr-l::before{
  content:counter(trl);position:absolute;left:.3em;width:1.5em;text-align:right;
  color:var(--text-muted);font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none;
}
.tr-prosa .tr-l{margin-bottom:.15rem}