/* Arcade layout: a play stage that fills the screen, HUD overlays, touch controls, pause, CRT overlay. */
.play { padding: 0; position: relative; height: 100dvh; min-height: 0; overflow: hidden; background: var(--bg); }
.play .hud { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--s-2); padding: max(8px, env(safe-area-inset-top)) 10px 6px; pointer-events: none; }
.play .hud > * { pointer-events: auto; }
.stage { position: absolute; inset: 0; display: grid; place-items: center; }
.stage-canvas { display: block; image-rendering: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 4px; }
.stage[data-layered] .stage-canvas { position: absolute; }
.play-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 10px max(10px, env(safe-area-inset-bottom)); pointer-events: none; }
.play-bottom > * { pointer-events: auto; }
/* touch controls */
hg-touch-controls { display: none; gap: 10px; align-items: end; justify-content: space-between; --tc: 62px; }
@media (pointer: coarse) { hg-touch-controls { display: flex; } }
hg-touch-controls[force] { display: flex; } hg-touch-controls[hidden] { display: none; }
.tc-btn { width: var(--tc); height: var(--tc); border-radius: 50%; background: color-mix(in oklab, var(--surface) 70%, transparent); border: 2px solid color-mix(in oklab, var(--ink) 25%, transparent); color: var(--ink); font-weight: 800; font-size: 1.3rem; display: grid; place-items: center; backdrop-filter: blur(6px); touch-action: none; transition: transform var(--t-fast), background var(--t-fast); }
.tc-btn.on { transform: scale(.92); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
hg-touch-controls[data-layout="dpad"] { display: none; }
@media (pointer: coarse) { hg-touch-controls[data-layout="dpad"][show] { display: grid; grid-template-columns: repeat(3, var(--tc)); grid-template-rows: repeat(3, var(--tc)); gap: 4px; width: max-content; margin-inline: auto; } }
hg-touch-controls[data-layout="dpad"] [data-action="up"] { grid-area: 1 / 2; } hg-touch-controls[data-layout="dpad"] [data-action="left"] { grid-area: 2 / 1; } hg-touch-controls[data-layout="dpad"] [data-action="right"] { grid-area: 2 / 3; } hg-touch-controls[data-layout="dpad"] [data-action="down"] { grid-area: 3 / 2; }
hg-touch-controls[data-layout="lr-ab"] [data-action="a"], hg-touch-controls[data-layout="lr-ab"] [data-action="b"], hg-touch-controls[data-layout="ab"] .tc-btn { border-radius: 50%; }
hg-touch-controls[data-layout="lr-ab"] [data-action="right"] { margin-right: auto; }
/* overlays on the stage */
.overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(4px); animation: fade var(--t-base); text-align: center; padding: var(--gutter); }
.overlay h2 { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: .04em; text-transform: uppercase; }
.overlay .stack { align-items: center; }
.sound-hint { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--ink-2); background: color-mix(in oklab, var(--surface) 80%, transparent); padding: 6px 12px; border-radius: var(--r-pill); pointer-events: none; z-index: 5; }
/* CRT */
:root[data-crt="1"] .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / .45) 100%); mix-blend-mode: multiply; }
:root[data-crt="1"] .stage-canvas { filter: saturate(1.15) contrast(1.05); }
/* home hero */
.arcade-home { justify-content: center; gap: var(--s-5); }
.title-wrap { text-align: center; }
.title { font-family: var(--font-display); font-size: clamp(2.6rem, 13vw, 5rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 40px color-mix(in oklab, var(--accent) 35%, transparent); }
.tagline { color: var(--ink-2); margin-top: 8px; }
.modes { display: grid; gap: 8px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); border: 2px solid transparent; text-align: left; min-height: 56px; transition: border-color var(--t-fast), transform var(--t-fast); }
.mode b { font-size: 1.05rem; } .mode span { font-size: .82rem; color: var(--ink-2); }
.mode[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in oklab, var(--accent) 35%, transparent); }
.mode:active { transform: scale(.98); }
.seg-line { display: flex; gap: 6px; }
.seg-line [role="radio"] { flex: 1; height: 44px; border-radius: var(--r-pill); background: var(--surface-2); font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.seg-line [aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.home-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.cta { font-size: 1.15rem; height: 56px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 45%, transparent); }
.topbar { display: flex; align-items: center; gap: 6px; }
.best-line { display: flex; justify-content: center; gap: 18px; color: var(--ink-2); font-size: .9rem; }
.best-line b { color: var(--ink); }
.hud-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--surface) 75%, transparent); backdrop-filter: blur(6px); font-weight: 700; font-size: .95rem; letter-spacing: .04em; }
.hud-pill small { font-weight: 600; color: var(--ink-2); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
@container screen (min-width: 640px) { .arcade-home { max-width: 520px; margin-inline: auto; width: 100%; } }