.arcade-root { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 320px; background: #070b09; color: #07cf62; font-family: ui-monospace, monospace; }
.arcade-stage { position: relative; flex: none; overflow: hidden; }
.arcade-stage canvas { display: block; image-rendering: pixelated; touch-action: none; outline: none; }
.arcade-stage canvas:focus-visible { outline: 2px solid #fff1cf; outline-offset: -3px; }
.arcade-overlay { position: absolute; inset: 0; pointer-events: none; }
.arcade-overlay button, .arcade-overlay input, .arcade-overlay a, .arcade-overlay select { pointer-events: auto; }
.arcade-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@font-face { font-family: QuitPixel; src: url('./assets/quit-pixel.woff2') format('woff2'); font-display: swap; }
.arcade-root, .arcade-toolbar {
  --t-font-body: QuitPixel, ui-monospace, monospace; --t-font-display: QuitPixel, ui-monospace, monospace;
  --t-ink: #08130e; --t-paper: #00ce5a; --t-yellow: #ff6800; --t-accent: #ff6800;
  --t-focus: #ffedc8; --t-focus-width: 2px; --t-outline: 2px; --t-radius-pill: 3px;
  --t-shadow-hard: 0 3px 0 #3e210c; --t-shadow-small: 0 2px 0 #08130e;
  --t-shadow-lift: 0 5px 0 #13271c; --t-shadow-pressed: 0 1px 0 #08130e;
  --t-dur-fast: 110ms; --t-ease-pop: ease-out; --t-dur-spin: 1s;
  --t-font-s: 11px; --t-font-m: 15px;
}
.arcade-screen, .arcade-results, .arcade-play-controls { position: absolute; inset: 0; }
.arcade-root .c-btn { box-sizing: border-box; }
.arcade-root .c-btn[data-fit] { padding: 3px; line-height: 1.35; }
.arcade-root .c-btn[aria-pressed="false"][data-difficulty] { --c-fill: #06110d; --c-text:#00d45b; box-shadow: none; }
.arcade-root .arcade-art-control { --c-fill: transparent; --c-text: #fff0cb; --t-ink: transparent; --t-shadow-hard: none; --t-shadow-lift:none; --t-shadow-pressed:none; color: transparent; border:0; touch-action:none; }
.arcade-root .arcade-art-control:focus-visible { color: #ffedc8; background:#06110dbb; }
.arcade-play-controls .c-btn { touch-action: none; }
.arcade-root .arcade-art-control:hover { transform:none; }
.arcade-modal-shade { position:absolute; inset:0; display:grid; place-items:center; background:#050b09cf; pointer-events:auto; }
.arcade-panel { box-sizing: border-box; width: min(90%, 650px); max-height:94%; overflow:auto; overscroll-behavior:contain; padding:20px; border:3px solid #00b750; box-shadow:6px 7px 0 #020704; background:#06110d; color:#ffedc8; font:13px/1.65 QuitPixel,monospace; pointer-events:auto; }
.arcade-panel h2 { color:#ff6800; font-size:18px; margin:0 0 15px; line-height:1.45; }
.arcade-panel p { margin:10px 0; }
.arcade-panel .c-btn { min-height:44px; margin:6px 8px 6px 0; font-size:12px; }
.arcade-button-row { display:flex; flex-wrap:wrap; gap:6px; }
.arcade-button-row a { color:#ffedc8; padding:10px; border:2px solid #00d45b; font-size:11px; }
.arcade-board { width:100%; border-collapse:collapse; color:#00d45b; font-size:13px; }
.arcade-board td, .arcade-board th { border-bottom:1px solid #155b32; padding:7px 4px; text-align:left; font-weight:normal; }
.arcade-board td:last-child { text-align:right; color:#ffedc8; }
.arcade-share-card { display:block; width:100%; height:auto; image-rendering:pixelated; margin:12px 0; }
.arcade-stat-block { display:flex; gap:5%; font:calc(10px * var(--arcade-scale)) / 1.5 QuitPixel,monospace; }
.arcade-stats { display:grid; grid-template-columns:1fr auto; flex:1; align-content:space-around; gap:0 4px; margin:0; height:100%; }
.arcade-stats dt, .arcade-stats dd { border-bottom:1px solid #114c28; margin:0; min-width:0; align-self:center; padding:3px 0; white-space:nowrap; }
.arcade-stats dt { color:#00d45b; }
.arcade-stats dd { color:#ffedc8; text-align:right; }
.arcade-grade { display:grid; place-items:center; font:calc(63px * var(--arcade-scale))/1 QuitPixel,monospace; color:#ff6500; border:2px solid #ff6500; width:36%; }
.arcade-record { box-sizing:border-box; display:grid;place-items:center; margin:0; color:#ff6500; border:1px solid #ff6500; font:calc(10px * var(--arcade-scale))/1.2 QuitPixel,monospace; }
.arcade-name-form { display:flex; flex-direction:column; font:12px/1.5 QuitPixel,monospace; gap:6px; }
.arcade-name-form label { display:flex; flex-direction:column; gap:7px; color:#00d45b; }
.arcade-name-form input { box-sizing:border-box; background:#030b06; color:#ffedc8; border:2px solid #00ac4e; width:100%; padding:10px; border-radius:2px; font:16px/1.3 QuitPixel,monospace; text-transform:uppercase; }
.arcade-result-entry .arcade-name-form { font-size:calc(10px * var(--arcade-scale)); gap:0; }
.arcade-result-entry .arcade-name-form label { gap:5px; text-align:center; }
.arcade-result-entry .arcade-name-form input { min-height:28px; font-size:calc(12px * var(--arcade-scale)); padding:4px; }
.arcade-result-entry .arcade-name-form p { margin:3px 0; font-size:calc(6px * var(--arcade-scale)); text-align:center; color:#cce9bf; }
.arcade-incomplete { display:grid;place-items:center; padding:8px;box-sizing:border-box; background:#06110d; color:#ff6500; font:calc(18px * var(--arcade-scale))/1.5 QuitPixel,monospace; text-align:center; }
.arcade-start-error { position:absolute; inset:auto 8% 5%; background:#06110d; color:#ffedc8; padding:12px; }
.arcade-root[data-portrait="true"] .arcade-stat-block { font-size:10px; }
.arcade-root[data-portrait="true"] .arcade-stats dt, .arcade-root[data-portrait="true"] .arcade-stats dd { padding:0; }
.arcade-root[data-portrait="true"] .arcade-panel { padding:14px; font-size:11px; }
.arcade-root[data-portrait="true"] .arcade-panel h2 { font-size:16px; }
.arcade-root[data-portrait="true"] .arcade-panel .c-btn { font-size:10px; }
.arcade-root[data-portrait="true"] .arcade-grade { font-size:70px; }
.arcade-root[data-portrait="true"] .arcade-result-entry .arcade-name-form label { font-size:10px;gap:3px; }
.arcade-root[data-portrait="true"] .arcade-result-entry .arcade-name-form { line-height:1.2; }
.arcade-root[data-portrait="true"] .arcade-result-entry .arcade-name-form input { font-size:16px; line-height:1; min-height:31px; }
.arcade-root[data-portrait="true"] .arcade-incomplete { font-size:19px; }
.arcade-root input:focus-visible { outline:2px solid #ffedc8;outline-offset:3px; }
.arcade-page { margin:0; background:#050a07; color:#00d45b; display:flex; flex-direction:column; min-height:100dvh; }
.arcade-page main { height:calc(100dvh - 58px); min-height:0; }
.arcade-page main .arcade-root { min-height:0; }
.arcade-toolbar { box-sizing:border-box; display:flex;align-items:center;gap:12px; height:58px; padding:8px 16px; max-width:1440px; margin:0 auto; width:100%; font:10px/1.5 QuitPixel,monospace; }
.arcade-toolbar a { color:#00d45b; text-decoration:none; padding:6px 0; }
.arcade-toolbar [data-sound] { margin-left:auto; }
.arcade-toolbar [data-audio-status] { font:10px/1.3 ui-monospace,monospace; max-width:250px; }
@media (prefers-reduced-motion:reduce) { .arcade-root *, .arcade-toolbar * { animation:none!important;transition:none!important; } }
.arcade-root .c-btn[data-variant="ghost"], .arcade-toolbar .c-sound { --t-paper:#06110d; --t-ink:#00d45b; }
.arcade-results .c-btn[data-variant="ghost"] { --t-paper:#00d45b; --t-ink:#06110d; }
.arcade-root .arcade-art-control { --t-paper:transparent; --t-ink:transparent; }
/* STAPLER STORM's one line how-to (ARCADE8): the controls this device has, on a dark plate, keys in orange. */
.arcade-howto { box-sizing:border-box; display:block; margin:0; padding:2px 8px; background:#06110de6; border:1px solid #00b750; color:#ffedc8; font:calc(8px * var(--arcade-scale, 1))/1.3 QuitPixel,monospace; text-align:center; pointer-events:none; }
.arcade-howto b { color:#ff6800; font-weight:inherit; }
.q-arcade-frame .q-arcade-howto { position:absolute; z-index:210; font-size:1.25cqw; }
.arcade-root[data-portrait="true"] .q-arcade-frame .q-arcade-howto { font-size:max(12px,3.4cqw); line-height:1; padding:0 6px; }
.q-arcade-frame[data-section="stapler-storm-3-results"] .q-arcade-outcome { font-size:clamp(12px,1.9cqw,28px); line-height:1.15; }
html[data-tg-miniapp="true"], html[data-tg-miniapp="true"] body.arcade-page { width:100vw; height:100dvh; max-height:100dvh; overflow:hidden; margin:0; padding:0; }
html[data-tg-miniapp="true"] .arcade-page main, html[data-tg-miniapp="true"] .fire-exit-page main { width:100vw!important; height:100dvh!important; min-height:0!important; max-height:100dvh!important; margin:0!important; padding:0!important; }
html[data-tg-miniapp="true"] .arcade-root, html[data-tg-miniapp="true"] .arcade-stage, html[data-tg-miniapp="true"] .arcade-stage > canvas { width:100%!important; height:100%!important; min-height:0!important; }
html[data-tg-miniapp="true"] .arcade-toolbar { position:fixed; top:0; left:0; right:0; height:24px!important; min-height:24px!important; max-width:none!important; padding:2px 8px!important; background:rgba(5,10,7,0.55)!important; z-index:40; pointer-events:none; font-size:9px!important; }
html[data-tg-miniapp="true"] .arcade-toolbar a, html[data-tg-miniapp="true"] .arcade-toolbar button { pointer-events:auto; padding:2px 4px!important; }
html[data-tg-miniapp="true"] .arcade-toolbar [data-audio-status] { display:none!important; }
html[data-tg-miniapp="true"] .arcade-toolbar .c-btn { min-height:18px!important; font-size:8px!important; padding:1px 6px!important; }

/* Design pass (22 Oct). Phone play screens: PAUSE is a 44 px target with 12 px type at every stage size, and FIRE THE
   OVERLORDS' PAUSE grows up from where it stood so it stays clear of DODGE. */
.arcade-root[data-portrait="true"] .arcade-play-controls > .c-btn:not(.arcade-art-control):not([data-arcade-action]),
.arcade-root[data-portrait="true"][data-touch="true"] .ar2-controls .ar2-pause { min-width:44px; min-height:44px; }
.arcade-root[data-portrait="true"] .arcade-play-controls > .c-btn:not(.arcade-art-control):not([data-arcade-action]) > .c-btn__label,
.arcade-root[data-portrait="true"][data-touch="true"] .ar2-controls .ar2-pause > .c-btn__label { font-size:max(12px, 1em); }
.arcade-root[data-portrait="true"][data-touch="true"] .ar2-controls .ar2-pause { top:-52px; }
/* Phone title plates on a small stage: the drawn plate keeps its measured size and its touch target reaches 44 px. Only
   plates with room around them (the frame's own slots and STAPLER STORM's row of levels); a stacked menu keeps its own. */
.arcade-root[data-portrait="true"] .q-arcade-frame:is([data-section$="-title"],[data-section$="-select"]) > .q-arcade-slot > .q-arcade-frame-control::before,
.arcade-root[data-portrait="true"] .q-arcade-frame [data-layer="difficulty-panel"] .q-arcade-frame-control::before {
  content:""; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); }
/* ESCAPE THE STANDUP's phone title: on a stage under 342 px its how-to line wraps to two lines at the 12 px floor and
   the caption above it rises by the second line (runtime/quit/arcade-frames.js, TITLE_HOWTO lift). */
@container (width < 342px) { .q-arcade-frame[data-section^="escape-the-standup-1"] { --q-howto-lift:calc(29px - 4.1cqw); } }
/* The 404 page before its game loads: the meters already read as a fresh run, and a touch screen already reads the tap
   wording over the painted MOVE TO AIM. CLICK TO DECLINE. The line keeps its place once the game is up. */
[data-quit-accounting-value="score"]:empty::before { content:"0000"; }
[data-quit-accounting-value="declined"]:empty::before { content:"0"; }
[data-quit-accounting-health]:not([aria-valuenow]) > i { background:currentColor; opacity:1; }
@media (any-pointer:coarse) {
  .frame-surface[data-section="404"] [data-layer="instructions"]::after { content:"TAP WHAT BRENDA THROWS BEFORE IT HITS GARY."; position:absolute; inset:16% 4%; z-index:2;
    display:grid; place-items:center; padding:0 2%; background:#0a120d; color:#f4e6c8; font:400 clamp(14px,4.4vw,26px)/1.02 var(--t-font-body); letter-spacing:.02em;
    text-align:center; text-wrap:balance; pointer-events:none; }
  .frame-surface[data-section="404"] [data-layer="instructions"] .acc-frame-how { display:none; }
}
/* /arcade: the room of machines (runtime/arcade/cabinet) takes the floor's host after the page paints. The host holds the
   room's mounted height from the first paint, as the home page's arcade floor does (runtime/quit/loading.css), so the
   release dates under it no longer paint at the top and drop below the fold (site audit SWEEP-04: layout shift 0.12 on
   a desktop to 0.50 on a small phone). Measured on /arcade, 22 Oct 2026: 0.5733 w + 48 px from 1280 to 1920 wide,
   3.00 w + 436 px from 320 to 430, the phone room at most 474 px wide on a tablet or a phone held sideways. */
html[data-page="/arcade"] main>[data-quit-frame-host]:not(.quit-cabinets) { min-height:calc(57.33vw + 48px); }
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4),(pointer:coarse) and (max-height:500px) {
  html[data-page="/arcade"] main>[data-quit-frame-host]:not(.quit-cabinets) { min-height:calc(3 * min(100vw, 474px) + 436px); }
}