/* The shell owns viewport space; the stage owns presentation, not prompt geometry. */
@layer components {
  /* Canvas, app-hosted drawers and body-hosted scrim/Help share one plane. */
  body { isolation:isolate; }
  .procedural-background { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
  .procedural-background[hidden] { display:none; }
  [data-background-intensity],[data-game-stage-opacity],[data-judgment-edge-intensity] { width:100%; }
  .app-shell { display:flex; flex-direction:column; min-height:100dvh; padding:12px 0; gap:12px; }
  .app-header { display:grid; grid-template-rows:auto auto; justify-content:stretch; align-self:center; width:var(--header-card-width,100%); gap:10px; flex:none; min-height:64px; padding:12px 16px; position:relative; max-height:var(--header-expanded-height,none); overflow:hidden; transition:transform 180ms ease,max-height 180ms ease,padding 180ms ease,min-height 180ms ease; }
  .play-header-hidden .app-header { transform:translateY(-100%); max-height:0; min-height:0; padding-block:0; border-block-width:0; overflow:hidden; pointer-events:none; }
  html[data-reduced-motion=true] .app-header { transition:none; }
  .header-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:12px; min-width:0; }
  .header-summary .status-chip { justify-self:end; max-width:100%; text-align:right; overflow-wrap:anywhere; }
  .app-header .header-actions { display:grid; grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr); align-items:center; gap:8px; min-width:0; width:100%; }
  .header-start,.header-end { display:flex; align-items:center; gap:8px; }
  .header-end { justify-content:flex-end; }
  .app-header .card-navigation { width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
  .app-header .card-navigation > *, .app-header .appearance-actions > * { flex:none; }
  .app-header .card-navigation button { white-space:nowrap; }
  .app-header .card-navigation > button,.app-header .appearance-actions > button { padding-inline:22px; }
  .app-header .card-navigation > [data-header-randomize] { padding-inline:12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .app-header .card-navigation > [data-header-randomize][hidden] { display:none; }
  @media(max-width:600px) { .app-header [data-header-randomize] span { display:none; } }
  .drawer-backdrop { top:0; }
  .secondary-drawer { top:0; bottom:0; height:auto; z-index:102; }
  .app-identity { min-width:0; }
  .app-identity-name { font-size:calc(1.5rem * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .app-identity-tagline { margin:4px 0 0; font-size:calc(var(--text-helper) * var(--type-scale,1) * var(--card-text-compensation,1)); color:var(--green); }
  .app-header .status-chip { font-size:calc(var(--text-label) * var(--type-scale,1) * var(--card-text-compensation,1)); min-height:28px; }
  .game-main { flex:1; min-width:0; display:grid; align-items:center; padding:4px 0; }
  /* In Normal, the wrapper generates no box: the original grid layout is unchanged. */
  .game-stage-frame { display:contents; }
  .game-fit { grid-template-columns:minmax(0,1fr); }
  .game-fit .game-stage-frame { display:block; position:relative; justify-self:center; width:var(--scaled-card-width); height:var(--scaled-card-height); }
  .game-stage { position:relative; isolation:isolate; width:100%; max-width:1100px; margin-inline:auto; overflow:hidden; }
  /* 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; z-index:1; }
  .now-playing { min-width:0; }
  .now-playing-row { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding-bottom:10px; }
  .track-viewport { flex:1 1 180px; min-width:0; overflow:hidden; }
  .track-line { display:inline-block; white-space:nowrap; font-size:calc(var(--text-track-title) * .9 * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .track-line span { color:var(--text-muted); }
  .playback-time { flex:none; white-space:nowrap; font-size:calc(var(--text-stat-label) * var(--type-scale,1) * var(--card-text-compensation,1)); font-variant-numeric:tabular-nums; color:var(--text-muted); }
  .song-progress-wrap { position:relative; overflow:visible; }
  .song-progress { height:10px; overflow:hidden; background:var(--border); border-radius:5px; }
  .song-progress i { display:block; height:100%; width:100%; background:var(--yellow); transform:scaleX(0); transform-origin:left; }
  .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; align-items:center; gap:var(--card-gap); transition:transform 180ms ease; }
  .run-active .setup-band { grid-template-rows:0fr; opacity:0; }
  .run-active .gameplay-setup { transform:translateY(-8px); }
  .mode-selector { display:flex; flex-wrap:nowrap; width:max-content; border:0; margin:0; padding:0; gap:4px; min-width:0; }
  .mode-selector label { flex:none; 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 .mode-button { --mode-button-space:calc(var(--control-height,42px) * .19047619); display:grid; gap:var(--mode-button-space); justify-items:stretch; border:1px solid var(--border); border-radius:calc(var(--radius-surface,8px) * .75); padding:var(--mode-button-space); min-width:112px; align-content:center; line-height:var(--control-line-height); background:var(--surface-secondary); color:var(--text-muted); font-size:calc(var(--text-primary-control) * .9 * var(--type-scale,1) * var(--card-text-compensation,1)); font-weight:800; text-transform:uppercase; }
  /* The viewport alone occupies button layout; one transform fits the whole stage. */
  .mode-prompt-preview { --mode-lane-ink:color-mix(in srgb,currentColor 32%,transparent); --mode-target-ink:color-mix(in srgb,currentColor 75%,transparent); position:relative; justify-self:center; width:calc(var(--mode-preview-count,2) * 36px + 8px); max-width:100%; min-width:0; height:44px; overflow:hidden; background:var(--gameplay-background); color:var(--gameplay-target); pointer-events:none; }
  .mode-preview-canvas { position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; min-height:80px; padding:8px; box-sizing:border-box; transform:translate(-50%,-50%) scale(var(--mode-preview-scale,.5)); transform-origin:center; }
  /* Only inner vertical separators: no outside end borders. */
  .mode-prompt-preview[data-travel-axis=y] > .mode-preview-canvas > .prompt-specimen + .prompt-specimen::before { content:""; position:absolute; inset-block:0; left:-4px; border-left:1px solid var(--mode-lane-ink); }
  /* Horizontal travel follows the track between its upper/lower boundaries. */
  .mode-prompt-preview[data-travel-axis=x] > .mode-preview-canvas { border-block:1px solid var(--mode-lane-ink); }
  .mode-prompt-preview[data-target-edge=top] > .mode-preview-canvas { border-top:3px solid var(--mode-target-ink); }
  .mode-prompt-preview[data-target-edge=bottom] > .mode-preview-canvas { border-bottom:3px solid var(--mode-target-ink); }
  .mode-prompt-preview[data-target-edge=left] > .mode-preview-canvas { border-left:3px solid var(--mode-target-ink); }
  .mode-prompt-preview[data-target-edge=right] > .mode-preview-canvas { border-right:3px solid var(--mode-target-ink); }
  .mode-name { white-space:nowrap; text-align:center; text-box-trim:trim-both; text-box-edge:cap alphabetic; }
  .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(4,minmax(0,1fr)); gap:var(--card-gap); }
  .hud-strip div { display:flex; align-items:center; gap:var(--card-space-2); padding:0; border:0; border-radius:0; background:none; font-size:calc(var(--text-stat-label) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .hud-strip strong { font-size:calc(var(--text-stat-value) * var(--type-scale,1) * var(--card-text-compensation,1)); margin:0; }
  .game-panel { gap:var(--card-gap); }
  .game-root { position:relative; }
  /* Results need room for their focal tiers even in the compact Wayfarer field. */
  .has-run-results { min-height:480px; }
  .has-run-results > :not(.run-results) { visibility:hidden; }
  .run-results { container:result-stage / inline-size; position:absolute; inset:0; display:grid; place-items:center; padding:16px; overflow:auto; color:var(--text); background:var(--gameplay-background); border:1px solid var(--border); border-radius:var(--radius-surface,8px); outline:none; }
  .results-summary { width:min(100%,640px);container-type:inline-size; text-align:center; display:grid; gap:8px; font-variant-numeric:tabular-nums; }
  .result-history { margin:0; color:var(--text-muted); font-size:calc(var(--text-label) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.5; }
  .results-summary h2 { margin:0; font-size:calc(var(--text-major-heading) * var(--type-scale,1) * var(--card-text-compensation,1)); letter-spacing:.12em; }
  .result-counts { display:grid; gap:10px; }
  .result-count { display:grid; grid-template-columns:minmax(0,auto) 1fr auto; align-items:baseline; gap:clamp(8px,2vw,24px); font-size:calc(clamp(1rem,calc(5cqi * var(--text-scale,1)),var(--text-result-count)) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .result-count>span:first-child { text-align:left; color:var(--text-muted); }
  .result-count>strong { text-align:right; font-size:calc(clamp(1.125rem,calc(6cqi * var(--text-scale,1)),var(--text-stat-prominent)) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .result-score,.result-achievements { display:grid; gap:6px; }
  .result-score strong { font-size:calc(var(--text-display) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .result-score>span,.result-combo>span { color:var(--text-muted); font-size:calc(var(--text-result-detail) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .result-breakdown { display:flex; flex-wrap:wrap; justify-content:center; gap:2px 10px; min-width:0; color:var(--text-muted); font-size:calc(var(--text-result-detail) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .result-breakdown>span { white-space:nowrap; }
  .result-combo { display:flex; align-items:baseline; justify-content:center; gap:20px; }
  .result-combo strong { font-size:calc(var(--text-stat-prominent) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .result-achievements { font-size:calc(var(--text-achievement) * var(--type-scale,1) * var(--card-text-compensation,1)); color:var(--accent); letter-spacing:.06em; }
  .result-achievements:empty { display:none; }
  .game-stage:has(.run-results) .player-results { display:none; }
  .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; font-size:calc(var(--text-stat-label) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .game-panel .empty-stage strong { font-size:calc(var(--text-section-heading) * 1.2 * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .player-transport { justify-content:center; gap:var(--card-gap); }
  .player-transport button { padding:calc(var(--control-padding-block) * .9) 12.6px; font-size:calc(var(--text-primary-control) * .9 * var(--type-scale,1) * var(--card-text-compensation,1)); min-height:calc(var(--control-height,42px) * 1.142857 * .9); }
  .player-transport small { font-size:calc(var(--text-game-helper) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .player-transport h3,.player-results h3,.player-results>small { display:none; }
  .player-results .stats-grid { margin:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .player-results .stats-grid div { padding:0; border:0; border-radius:0; background:none; }
  .player-results .stats-grid span { font-size:calc(var(--text-stat-label) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .player-results .stats-grid strong { font-size:calc(var(--text-stat-value) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .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; }
    .gameplay-setup { gap:8px; }
      .mode-selector .mode-button { min-width:100px; font-size:calc(var(--text-primary-control) * .9 * var(--type-scale,1) * var(--card-text-compensation,1)); }
    .hud-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hud-strip div { flex-wrap:wrap; gap:4px; }
    .now-playing-row { gap:10px; }
    .player-transport small { text-align:center; }
    .player-results .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .game-panel .steppin-stage { min-height:480px; }
  }
  html[data-reduced-motion=true] :is(.setup-band,.gameplay-setup) { transition:none; }
}

/* Surface alpha only: never apply opacity to gameplay containers/children. */
.game-stage .empty-stage, .game-stage .steppin-stage, .game-stage .wayfarer-stage, .game-stage .slide-stage {
  background-color:color-mix(in srgb,var(--gameplay-background) calc(var(--game-stage-opacity,.75) * 100%),transparent);
}
.game-stage::before { opacity:var(--game-stage-opacity,.75); }

/* Shares the decorative viewport plane; no foreground opacity or geometry changes. */
.gameplay-video-layer {position:fixed;inset:0;z-index:-1;overflow:hidden;isolation:isolate;pointer-events:none;}
.gameplay-video-layer > .gameplay-video {position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;}
/* Above stage/background fills and below the independently stacked gameplay content. */
.judgment-edge-layer {position:absolute;inset:0;z-index:0;pointer-events:none;}
.judgment-edge-pulse {position:absolute;inset:0;pointer-events:none;opacity:0;color:var(--gameplay-target);
  background:linear-gradient(to right,currentColor,transparent var(--judgment-edge-width,28%)),linear-gradient(to left,currentColor,transparent var(--judgment-edge-width,28%));
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);}
.judgment-edge-pulse[data-tone=perfect] {color:var(--judgment-perfect);}
.judgment-edge-pulse[data-tone=miss] {color:var(--judgment-miss);}
.judgment-edge-pulse[data-response=perfect] {--judgment-edge-width:34%;}
.judgment-edge-pulse[data-response=good] {--judgment-edge-width:22%;}
.judgment-edge-pulse[data-response=miss] {--judgment-edge-width:30%;}
html[data-reduced-motion=true] .judgment-edge-pulse {display:none;}

/* Unlayered to match appearance.css specimen layout; canonical heads stay untouched. */
.mode-preview-canvas > .prompt-specimen { width:max-content; height:max-content; min-width:64px; min-height:64px; }

@layer components {
  .mode-navigation { display:flex; justify-content:center; min-width:0; }
  .mode-window { flex:0 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; padding:4px; }
  .mode-navigation>button { flex:none; width:calc(var(--control-height,42px) * 1.4); padding-inline:4px; }
  .hud-strip { display:grid; grid-template-columns:minmax(0,1fr); }
  .hud-strip .contextual-content { grid-area:1 / 1; display:flex; flex-wrap:nowrap; gap:8px 20px; min-width:0; align-items:center; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; white-space:nowrap; }
  .hud-strip .contextual-content[hidden] { display:none; }
  .hud-strip { container:live-hud / inline-size; }
  .hud-strip [data-live-status] { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); align-items:center; }
  .hud-strip [data-live-status]>div { min-width:0; align-items:baseline; flex-wrap:nowrap; text-align:left; }
  .hud-strip [data-live-status]>div>span { flex:none; }
  .hud-strip [data-live-status]>div>strong { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .hud-strip [data-run-configuration] { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; overflow:hidden; }
  .hud-strip .configuration-window { grid-column:2; display:flex; flex-wrap:nowrap; gap:20px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; min-width:0; white-space:nowrap; }
  .hud-strip .configuration-window[data-expanded=true] { overflow-x:hidden; }
  .configuration-group[data-collapsed=false] legend { max-width:45%; }
  .hud-strip .configuration-scroll { min-height:0; padding:4px 8px; align-self:stretch; }
  .configuration-group { display:flex; flex:0 0 auto; align-items:center; gap:8px; border:0; padding:0; margin:0; min-width:max-content; }
  .configuration-group[data-collapsed=false] { flex-basis:100%; min-width:0; max-width:100%; }
  .configuration-group[data-front=true] { order:-1; }
  .configuration-group legend { float:left; color:var(--text-muted); padding:0; margin-right:8px; }
  .configuration-group .configuration-toggle { display:inline-flex; align-items:center; gap:4px; padding:4px 0; min-height:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; line-height:inherit; box-shadow:none; white-space:nowrap; max-width:100%; overflow:hidden; }
  .configuration-toggle::after { content:'‹'; font-size:1em; }
  .configuration-toggle[aria-expanded=false]::after { content:'›'; }
  .configuration-toggle:hover { color:var(--text); }
  .configuration-toggle:focus-visible { outline:3px solid var(--control-accent); outline-offset:-2px; }
  .hud-strip .configuration-group>div { display:flex; flex:1; min-width:0; flex-wrap:nowrap; gap:4px 8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; white-space:nowrap; }
  .configuration-group label { flex:none; }
  .configuration-group[data-collapsed=true] label[data-selected=false] { display:none; }
  .configuration-group label { position:relative; cursor:pointer; }
  .configuration-group input { position:absolute; width:1px; height:1px; opacity:0; }
  .configuration-group label span { display:inline-block; padding:4px 2px; color:var(--text-muted); border-bottom:2px solid transparent; }
  .configuration-group input:checked+span { color:var(--text); font-weight:800; border-bottom-color:currentColor; }
  .configuration-group label:hover span { color:var(--text); text-decoration:underline; }
  .configuration-group input:focus-visible+span { outline:3px solid var(--control-accent); outline-offset:-2px; }
  .configuration-group[hidden] { display:none; }
  .result-mode-count { justify-self:center; max-width:90%; margin:0; text-align:center; }
}

@layer components {
  .app-shell:has(.secondary-drawer:not([hidden])) .app-header {z-index:101;}
}

/* Header navigation stays on row two above the unlayered appearance defaults. */
.app-header .card-navigation { flex-wrap:nowrap; }

/* Gameless mode hides the app shell, keeping background and console visible. */
.gameless-mode .app-shell { display:none; }