/* View „Spielmodi: Ketten, Parallel, Eigenes“ (src/views/chain.ts, src/views/parallel/*, src/views/custom.ts).
   Nur View-spezifische Regeln; Bausteine (Feedback-Kopf, Ergebniszeile, Zurück-Link, Tastenfeld) kommen aus components.css. */
@layer views {
  /* ---------- Gemeinsam: Texte ---------- */
  .play-intro { font-size:var(--text-sm); line-height:1.5; color:var(--muted); }
  .play-caption { font-size:var(--text-sm); line-height:1.4; color:var(--muted); }
  .play-note {
    display:flex; align-items:flex-start; gap:var(--space-2); min-width:0;
    font-size:var(--text-sm); line-height:1.45; color:var(--muted);
  }
  .play-note > .icon { margin-top:1px; color:var(--accent-text); }

  /* ---------- Kettenrechnen: Schritt in Display-Größe ---------- */
  .play-step {
    min-height:1.1em; max-width:100%;
    font-size:var(--text-display); font-weight:var(--weight-semibold); line-height:1.1; letter-spacing:-0.02em;
    white-space:nowrap; text-shadow:var(--text-glow);
  }
  .play-step > span, .play-card-main > span { display:inline-block; }

  /* ---------- Antwortfeld (Eingabe, richtig, Korrektur, übersprungen) ---------- */
  .play-answer {
    display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2);
    width:min(100%, 240px); min-width:0; height:64px; margin:0; padding:0 18px;
    border:2px solid var(--accent); border-radius:var(--radius-md);
    background:var(--surface); color:var(--text); box-shadow:none;
    font-size:var(--text-num); font-weight:var(--weight-semibold); line-height:1; text-align:end;
    transition:border-color var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out);
  }
  input.play-answer { display:block; -webkit-appearance:none; appearance:none; }
  input.play-answer::placeholder { color:var(--muted); opacity:1; }
  .play-answer.is-good { border-color:var(--good); background:var(--good-soft); box-shadow:var(--glow-good); }
  .play-answer.is-bad { border-color:var(--bad); background:var(--bad-soft); }
  .play-answer.is-skip { border-color:var(--border); color:var(--muted); }
  .play-answer-check { display:flex; flex:none; color:var(--good); }
  /* Kompakt in der Ketten-Liste (Parallel) */
  .play-answer.is-compact {
    width:128px; height:var(--hit-min); padding:0 14px; border-radius:var(--radius-key); font-size:var(--text-lg);
  }
  /* Beim Fokussieren nicht unter dem Dock landen (--play-dock-h setzt parallel/input.ts) */
  .play-fields .play-answer { scroll-margin-bottom:calc(var(--play-dock-h, 0px) + var(--space-3)); }

  .play-correction { display:flex; align-items:baseline; gap:var(--space-2); }
  .play-correction-label { font-size:var(--text-sm); color:var(--muted); }
  .play-correction-num { font-size:var(--text-num); font-weight:var(--weight-semibold); line-height:1.1; }

  /* ---------- Dock ---------- */
  .play-dock-top { display:flex; align-items:center; justify-content:flex-end; min-height:var(--hit-min); }
  .play-dock-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2); }
  .play-dock-row.is-split { grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); }
  .play-dock-row > .btn { width:100%; }

  /* ---------- Parallel · Stream: Restzeit, Ketten-Karten mit Tokens ---------- */
  .play-time { flex:none; min-width:4ch; font-size:var(--text-sm); color:var(--muted); text-align:end; }
  .stage.play-stream { padding-inline:var(--gutter); }
  /* Platz für 2 × 2 Karten von Anfang an: neue Ketten verschieben nichts */
  .play-cards {
    --play-card-h:136px;
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:var(--play-card-h);
    align-content:start; gap:var(--space-3);
    width:100%; max-width:440px; min-height:calc(2 * var(--play-card-h) + var(--space-3));
  }
  .play-card {
    display:flex; flex-direction:column; gap:var(--space-2); min-width:0; padding:var(--space-3);
    border:1px solid transparent; border-radius:var(--radius-md);
    background:var(--surface); box-shadow:var(--shadow-1); text-align:start;
    transition:background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out);
  }
  /* Aufleuchten nur als Farbübergang (200 ms), kein Puls */
  .play-card.is-pulse { border-color:var(--accent); background:var(--accent-soft); }
  .play-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:24px; }
  .play-card-id { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--muted); }
  .play-badge {
    padding:2px var(--space-2); border-radius:var(--radius-pill);
    background:var(--accent-soft); color:var(--accent-text);
    font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:1.4;
  }
  .play-card-main {
    flex:1; display:flex; align-items:center; justify-content:center; min-height:0;
    font-size:var(--text-num); font-weight:var(--weight-semibold); line-height:1.1; white-space:nowrap;
    transition:color var(--dur-state) var(--ease-out);
  }
  .play-card-main.is-op { color:var(--accent-text); }
  .play-card-main.is-idle { color:var(--muted); }
  /* Rechtsbündig: läuft die Zeile über, verschwindet links der älteste Schritt */
  .play-tokens { display:flex; justify-content:flex-end; gap:var(--space-1); min-height:24px; overflow:hidden; }
  .play-token {
    flex:none; padding:2px var(--space-2); border-radius:var(--radius-pill);
    background:var(--surface-2); color:var(--muted);
    font-size:var(--text-xs); line-height:1.5; white-space:nowrap;
  }
  .play-token.is-last { color:var(--text); }
  .play-paused { font-size:var(--text-sm); color:var(--muted); }

  /* ---------- Parallel · Eingabe: ein Feld je Kette ---------- */
  .play-fields { width:100%; max-width:360px; }
  .play-field {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    min-height:56px; padding:6px var(--space-4);
    transition:background-color var(--dur-state) var(--ease-out);
  }
  .play-field.is-active { background:var(--accent-soft); }
  .play-field-label { min-width:0; font-size:var(--text-md); overflow-wrap:anywhere; }
  .play-field.is-active .play-field-label { color:var(--accent-text); font-weight:var(--weight-semibold); }
  .play-field-value {
    min-width:4ch; padding-right:16px;
    font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--muted); text-align:end;
  }
  .play-field.is-done .play-field-value { color:var(--text); }

  /* ---------- Parallel · Ergebnis ---------- */
  /* Ohne Fokus-Kopf: Abstand nach oben inkl. Safe Area (Artboard Ergebnis: 64 px) */
  .play-result-head {
    display:flex; flex-direction:column; gap:var(--space-1);
    padding-top:calc(env(safe-area-inset-top, 0px) + var(--space-6));
  }
  .play-result-sub { font-size:var(--text-sm); color:var(--muted); }
  .play-result-title {
    font-size:var(--text-num); font-weight:var(--weight-bold); line-height:1.15; letter-spacing:-0.02em;
    text-shadow:var(--text-glow); overflow-wrap:anywhere;
  }
  .play-result-title:focus, .play-result-title:focus-visible { outline:none; }
  .play-result-meta { font-size:var(--text-md); color:var(--muted); }

  /* ---------- Eigenes (Tab Heute; Zurück-Link = kit.backLink) ---------- */
  .play-range-inputs { display:flex; align-items:center; gap:var(--space-1); flex:none; }
  .play-range-dash { color:var(--muted); }
  .play-range-input {
    width:64px; height:var(--hit-min); margin:0; padding:0 var(--space-2);
    border:1px solid var(--border); border-radius:var(--radius-key);
    background:var(--surface-2); color:var(--text);
    font-size:var(--text-md); text-align:center;
    -moz-appearance:textfield; appearance:textfield;
    transition:border-color var(--dur-state) var(--ease-out);
  }
  .play-range-input::-webkit-inner-spin-button,
  .play-range-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  .play-range-input[aria-invalid="true"] { border-color:var(--warn); }
  .play-hint {
    display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-1) var(--space-1) 0;
    font-size:var(--text-sm); line-height:1.45; color:var(--text);
  }
  .play-hint > .icon { margin-top:1px; color:var(--warn); }
}