/* The playable 320 × 480 display sits inside the photographed cabinet. */
#gridlock-story-ui[data-story-screen="arcade"] .story-main{padding:0;overflow:hidden;position:relative}
#gridlock-story-ui .story-arcade{position:relative;width:100%;height:100%;overflow:hidden;background:#080d13;color:#e8f8d3}
#gridlock-story-ui .story-arcade-cabinet{position:absolute;left:50%;top:50%;width:min(100%,calc((100vh - 80px)*var(--arcade-aspect,1.5)));transform:translate(-50%,-50%) scale(var(--arcade-zoom,1));transform-origin:50% 43.55%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#gridlock-story-ui .story-arcade-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#gridlock-story-ui .story-arcade-screen{position:absolute;background:#050d18;overflow:hidden;border-radius:2%;box-shadow:0 0 18px #77cecf20}
#gridlock-story-ui .story-arcade-screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;object-fit:contain}
#gridlock-story-ui .story-arcade-screen canvas:focus-visible{outline:2px solid #a2dfaa;outline-offset:-2px}
#gridlock-story-ui .story-arcade-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 4px);box-shadow:inset 0 0 15px #0006;opacity:.42}
#gridlock-story-ui .story-arcade-message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;background:#05101cc9;font:700 clamp(8px,1.1vw,17px)/1.45 monospace;pointer-events:none;text-shadow:2px 2px #142239;padding:12px}
#gridlock-story-ui .story-arcade-message[hidden]{display:none}
#gridlock-story-ui .story-arcade-message strong{font:900 clamp(14px,2.3vw,33px)/1.05 monospace;letter-spacing:.04em;color:#a4ed95}
#gridlock-story-ui .story-arcade-message p{margin:0;font:inherit;color:#e7ecd8}
#gridlock-story-ui .story-arcade-message span{color:#ffd073;font-size:.85em}
#gridlock-story-ui .story-arcade-message small{font-size:.8em;color:#92bbb5}
#gridlock-story-ui .story-arcade-actions{position:absolute;right:18px;bottom:18px;display:flex;gap:8px;z-index:2}
#gridlock-story-ui .story-arcade-actions button{padding:9px 15px;border:1px solid #80afa56b;border-radius:6px;color:#d8eadb;background:#102624ef;font:750 13px "Avenir Next",sans-serif;box-shadow:0 2px 8px #0005;min-height:38px}
#gridlock-story-ui .story-arcade-actions button:hover{background:#234139}
#gridlock-story-ui .story-arcade-instructions{position:absolute;left:18px;bottom:18px;padding:9px 13px;margin:0;background:#09171ce3;border-radius:5px;font:12px monospace;color:#b3cec2;pointer-events:none}
@media(max-width:700px){#gridlock-story-ui .story-arcade-actions{right:10px;bottom:10px}#gridlock-story-ui .story-arcade-actions button{font-size:11px;padding:7px 10px;min-height:32px}#gridlock-story-ui .story-arcade-instructions{left:10px;bottom:55px;font-size:9px;padding:7px}#gridlock-story-ui .story-arcade-message{gap:7px;padding:6px}}
@media(prefers-reduced-motion:reduce){#gridlock-story-ui .story-arcade-scanlines{opacity:.2}}

#gridlock-story-ui .story-arcade:not([data-phase="ready"]) .story-arcade-cabinet{--arcade-zoom:1.25}
#gridlock-story-ui .story-arcade[data-reduced-motion="true"] .story-arcade-cabinet{--arcade-zoom:1.25;transition:none}
@media(prefers-reduced-motion:reduce){#gridlock-story-ui .story-arcade-cabinet{--arcade-zoom:1.25;transition:none}}

/* Real, verified scores live on the CRT rather than in the room UI. */
#gridlock-story-ui .story-arcade[data-phase="crashed"] .story-arcade-message{padding:5%;background:#06101cf5;pointer-events:auto;text-shadow:none;gap:0;font-size:clamp(9px,1.02vw,15px)}
#gridlock-story-ui .story-arcade-results{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;min-height:0;gap:5px}
#gridlock-story-ui .story-arcade-results .story-arcade-result-title{font-size:1.65em;line-height:1.1;color:#a4ed95;letter-spacing:.08em}
#gridlock-story-ui .story-arcade-results .story-arcade-result-score{color:#ffdc87;font-size:1em}
#gridlock-story-ui .story-arcade-results .story-arcade-rank-note{font-size:.73em;line-height:1.35;color:#bbd6cd;min-height:2.6em}
#gridlock-story-ui .story-arcade-ranks{list-style:none;margin:0;padding:0 3px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#78a797 #10241f;border-block:1px solid #71b19a60;text-align:left}
#gridlock-story-ui .story-arcade-ranks li{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto;align-items:baseline;gap:.3em;padding:.38em 0;border-bottom:1px solid #71b19a21;font-size:.84em}
#gridlock-story-ui .story-arcade-ranks li>b{color:#89c1b2;font-weight:500}
#gridlock-story-ui .story-arcade-ranks li>span{font-size:1em;color:#ecf4dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gridlock-story-ui .story-arcade-ranks li>strong{font-size:1em;letter-spacing:0;color:#ffdc87}
#gridlock-story-ui .story-arcade-results .story-arcade-empty{flex:1;display:grid;place-content:center;color:#abc6bd;font-size:.9em;line-height:1.6}
#gridlock-story-ui .story-arcade-result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:3px}
#gridlock-story-ui .story-arcade-result-actions button{font:700 .77em/1.2 monospace;color:#f4ebcb;border:1px solid #8aceb88c;padding:.55em .7em;background:#173a31;border-radius:2px;cursor:pointer;min-height:0;box-shadow:none}
#gridlock-story-ui .story-arcade-result-actions button:hover{background:#275640}
#gridlock-story-ui .story-arcade-result-actions button:focus-visible{outline:2px solid #ffda88;outline-offset:1px}
#gridlock-story-ui .story-arcade-actions button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){#gridlock-story-ui .story-arcade[data-phase="crashed"] .story-arcade-cabinet{--arcade-zoom:2}#gridlock-story-ui .story-arcade[data-phase="crashed"] .story-arcade-message{font-size:8px;padding:3%}#gridlock-story-ui .story-arcade-results{gap:3px}}

#gridlock-story-ui .story-arcade-ranks:focus-visible{outline:1px solid #ffda88;outline-offset:1px}