.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; }