/* The shell owns viewport space; the stage owns presentation, not prompt geometry. */
@layer components {
  .app-shell { display:flex; flex-direction:column; min-height:100dvh; padding:12px 0; gap:12px; }
  .app-header { flex:none; min-height:64px; padding:12px 16px; }
  .app-header h1 { font-size:1.5rem; }
  .app-header .status-chip { font-size:.75rem; min-height:28px; }
  .game-main { flex:1; min-width:0; display:grid; align-items:center; padding:4px 0; }
  .game-stage { position:relative; isolation:isolate; width:100%; max-width:1100px; margin-inline:auto; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--gameplay-background); box-shadow:var(--shadow); }
  /* A separate presentation plane can later receive image/gradient backgrounds or overlays. */
  .game-stage::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(135deg,color-mix(in srgb,var(--control-accent) 7%,transparent),transparent 65%); }
  .stage-content { position:relative; padding:16px; }
  .now-playing { min-width:0; margin-bottom:12px; }
  .now-playing-row { display:flex; align-items:center; gap:20px; padding-bottom:10px; }
  .track-viewport { flex:1; min-width:0; overflow:hidden; }
  .track-line { display:inline-block; white-space:nowrap; font-size:.9rem; }
  .track-line span { color:var(--text-muted); }
  .playback-time { flex:none; white-space:nowrap; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--text-muted); }
  .song-progress { height:3px; overflow:hidden; background:var(--border); }
  .setup-band { display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows 180ms ease,opacity 150ms ease; }
  .setup-clip { overflow:hidden; min-height:0; }
  .gameplay-setup { margin:0; padding:3px 3px 12px; align-items:center; gap:12px; transition:transform 180ms ease; }
  .run-active .setup-band { grid-template-rows:0fr; opacity:0; }
  .run-active .gameplay-setup { transform:translateY(-8px); }
  .gameplay-setup .field { min-width:0; margin-left:auto; display:flex; align-items:center; gap:8px; font-size:.75rem; }
  .gameplay-setup [data-slide-options] { margin-left:0; }
  .gameplay-setup select { min-height:36px; }
  .mode-selector { display:flex; border:0; margin:0; padding:0; gap:4px; min-width:0; }
  .mode-selector label { position:relative; cursor:pointer; }
  .mode-selector input,.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  .mode-selector span { display:block; border:1px solid var(--border); border-radius:6px; padding:10px 16px; background:var(--surface-secondary); color:var(--text-muted); font-size:.8rem; font-weight:800; text-transform:uppercase; }
  .mode-selector input:checked+span { color:var(--accent-text); background:var(--accent); border-color:var(--accent); }
  .mode-selector input:focus-visible+span { outline:3px solid var(--control-accent); outline-offset:2px; }
  .hud-strip { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; gap:8px; }
  .hud-strip div { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:.75rem; }
  .hud-strip strong { font-size:.9rem; margin:0; }
  .game-panel { gap:10px; }
  .game-panel .steppin-stage { height:480px; } /* Existing compact lane width and minimum travel field are preserved. */
  .game-panel .empty-stage { height:320px; min-height:320px; }
  .player-transport { justify-content:center; padding:0; gap:8px; }
  .player-transport small { font-size:.7rem; }
  .player-transport h3,.player-results h3,.player-results>small { display:none; }
  .player-results { padding:10px 0 0; margin-top:10px; }
  .player-results .stats-grid { margin:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .player-results .stats-grid div { padding:6px 10px; }
  .player-results .stats-grid span { font-size:.7rem; }
  .player-results .stats-grid strong { font-size:1rem; }
  .utility-footer { flex:none; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
  .utility-footer[hidden] { display:none; }
  .analysis-footer>summary { cursor:pointer; padding:10px 16px; font-size:.8rem; color:var(--text-muted); }
  .utility-content { max-height:38dvh; overflow:auto; padding:0 12px 12px; overscroll-behavior:contain; display:grid; gap:10px; }
  .music-drawer .song-setup { padding:0 0 16px; }
  .music-drawer .song-row { display:block; }
  .music-drawer .dropzone { min-width:0; }
  @media(max-width:600px) {
    .app-header { gap:10px; }
    .stage-content { padding:10px; }
    .gameplay-setup { gap:8px; }
    .gameplay-setup .field { flex:none; }
    .mode-selector span { padding:10px; font-size:.72rem; }
    .hud-strip div { flex-wrap:wrap; gap:4px; }
    .now-playing-row { gap:10px; }
    .player-transport small { text-align:center; }
    .game-panel .steppin-stage { min-height:480px; }
  }
  @media(prefers-reduced-motion:reduce) { .setup-band,.gameplay-setup { transition:none; } }
}