@import url("./altitude.css");
@import url("./raids.css");
[data-quit-picture]{display:contents}
html{background:#030805;color:#e8e8c8;font-family:var(--t-font-body);--forge-font-body:var(--t-font-body);--forge-font-display:var(--t-font-display);--forge-bg:#030805}
body{margin:0}*{box-sizing:border-box}button,input,textarea,select{font:inherit}a{color:var(--t-green)}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--t-focus);outline-offset:2px}
.q-visually-hidden,.q-skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-skip:focus{position:fixed;z-index:2000;top:0;left:0;padding:12px;background:#fff;color:#000}
body.forge>.c-header{position:fixed;top:0;left:0;width:100%;z-index:1000}
.c-header__directory{display:none}.c-header__menu[open] .c-header__directory{display:contents}
@media(min-width:1101px){.c-header__nav .c-header__directory{display:none!important}}
.frame-main{min-height:calc(100dvh - 140px)}
/* A frame surface keeps its approved proportions at any width; everything inside it is placed in
   container units of the surface, so a scene can sit full width, inside the elevator or in the hero. */
.frame-surface{width:100%;height:auto;aspect-ratio:var(--frame-aspect);overflow:clip!important;container-type:inline-size}
/* The art scales with its own surface too (the shared stylesheet scales by the window, which is
   wrong in the hero's two sizes and off by the scrollbar on desktops that show one). */
.frame-surface .frame-image{transform:translate(var(--raster-x,0px),var(--raster-y,0px)) scale(calc(100cqw / var(--frame-width)))}
/* Paint moving art at its displayed size. A nested scale inside a 3D motion layer
   causes the GPU compositor to reuse a visibly undersampled raster on phones. */
.frame-surface .frame-layer img:where(:not([data-show-mount] *)){display:block;position:absolute;inset:0 auto auto 0;width:100%;height:100%;max-width:none;transform-origin:top left;pointer-events:none;user-select:none;transform:translate(var(--raster-x,0px),var(--raster-y,0px))}
.frame-surface .frame-extra{--t-outline:.12cqw;--t-outline-heavy:.2cqw;font-size:1.5cqw}
.frame-layer{pointer-events:none}.frame-layer[data-lift],.frame-layer[data-tilt],.frame-layer:has(.q-art-control){pointer-events:auto}
.frame-component.c-btn{line-height:1.06;font-weight:700;letter-spacing:0;padding:0 .15em!important;min-height:0;min-width:0;text-align:center;white-space:normal;pointer-events:auto}
.frame-component.c-btn[data-variant="ghost"]{border-width:var(--t-outline);border-radius:var(--t-radius-pill)}
.q-live,.q-frame-input{background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none;margin:0;padding:0;color:var(--t-green)}
.q-live{display:flex;align-items:center;line-height:1.06;z-index:200;overflow:hidden}
.q-live>div,.q-live>output{max-width:100%;width:100%}.q-live>span,.q-live>strong{max-width:100%}.q-live p{margin:0}
.q-live[hidden],.frame-component[hidden],.frame-field[hidden]{display:none!important}
.q-frame-input{position:absolute;pointer-events:auto;z-index:201;resize:none;padding:.1em .3em;outline-offset:2px}
.q-frame-input:focus-visible{outline:2px solid var(--t-focus)}.q-frame-input::placeholder{color:var(--t-green);opacity:.8}
[data-device="phone"] .q-frame-input{font-size:16px!important;line-height:1.1}
.q-metric{height:100%;width:100%;container-type:size;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-family:var(--t-font-display);gap:.1em}
/* The page's multiplier in the frame's own lettering (design notes 9 and 19): heavy pixel digits in the
   approved orange on a dark extruded shadow, the x smaller than the digits. Silkscreen Bold fills the
   counter of its 4 and breaks its x at these sizes; Silkscreen Regular, emboldened by the browser, renders
   every digit whole. The size fits the slot's width for the number's length. */
@font-face{font-family:"QuitMultiple";src:url(/theme/fonts/display-1.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
.q-metric strong{font-family:"QuitMultiple","Silkscreen",monospace;font-weight:700;font-synthesis:weight;font-size:min(86cqh,calc(128cqw / var(--multiple-length,4)));line-height:.9;letter-spacing:.03em;white-space:nowrap;color:#ee4a0e;text-shadow:-.025em -.025em 0 #1c0a03,.025em -.025em 0 #1c0a03,-.025em .025em 0 #1c0a03,.025em .025em 0 #1c0a03,.05em .05em 0 #1c0a03,.075em .075em 0 #1c0a03,.1em .1em 0 #120602}
.q-metric strong::first-letter{font-size:.7em}
.q-metric .q-warmup{font-size:min(16cqh,8cqw);font-family:var(--t-font-body)}
/* WARM-UP is a small green tag. On desktop it moves beside the band caption (the real label stays for
   assistive technology, the caption carries its picture); on the phone it sits above the multiplier at
   12 px. */
.frame-surface[data-frame="desktop-game"] .q-metric .q-warmup{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-device="phone"] .q-metric .q-warmup{flex:none;padding:2px 4px 1px;background:#25dc71;color:#030805;font:400 12px/1 "Silkscreen",monospace}
[data-device="phone"] .q-metric{gap:2px}[data-device="phone"] .q-metric strong{font-size:min(calc((100cqh - 17px) / .9),calc(128cqw / var(--multiple-length,4)))}
/* The band caption as the frame paints it: paper lettering on an ink plate, one line, under the
   multiplier, with the WARM-UP tag beside it while the warm-up runs. */
.q-live[data-region="game.caption"]{overflow:hidden;align-items:center;white-space:normal;line-height:1.12;z-index:201}
.q-metric{font-family:"QuitMultiple","Silkscreen",monospace}
.q-live>[data-quit-caption]{display:inline-flex;flex:1;min-width:0;width:100%;max-width:100%;align-items:center;gap:.5em;padding:.2em .45em .16em;background:#0b0f0c;color:#f4e7cb;font:400 clamp(11px,.85cqw,18px)/1.12 "Silkscreen",monospace;letter-spacing:0;white-space:normal;box-shadow:.12em .12em 0 #030805}
.frame-surface[data-frame="phone-game"] .q-band-caption>[data-quit-caption]{font-size:clamp(8px,2.05cqw,9.5px);padding:.2em .35em}
.frame-surface[data-frame="phone-game"]:has(.show[data-journey-transition="1"]) .q-band-caption{visibility:hidden}
.frame-surface[data-frame="desktop-game"]:has(.show[data-cutscene-playing="1"]) [data-region="game.caption"]{visibility:hidden}
/* lw-films (the lead, 02:46 Dubai): the desktop multiplier steps aside while a film is drawn, as the stream multiple does (the stage marks the drawn film picture on its canvas, data-show-film) */
.frame-surface[data-frame="desktop-game"]:has(.show canvas[data-show-film]) [data-region="game.multiplier"]{visibility:hidden}
[data-quit-caption]:empty{display:none}
/* LIVEWATCH (16 Oct): the WARM-UP label waits for main.js to know the mode (data-quit-mode-known), so a live page never flashes it at boot */
[data-quit-warmup-label]:not([data-quit-mode-known]){visibility:hidden}
.frame-surface[data-frame="desktop-game"]:has([data-quit-warmup-label][data-quit-mode-known]:not([hidden])) [data-quit-caption]::before{content:"WARM-UP"/"";flex:none;margin-left:-.25em;padding:.18em .3em .12em;background:#25dc71;color:#030805;font-size:.72em;line-height:1}
.q-live>[data-quit-altitude],.q-live>[data-quit-flight-plan]{height:100%;width:100%}
.q-live .c-altitude{height:100%;padding:0;gap:0;font-size:inherit;justify-content:space-between}
.q-live .c-altitude li{padding:0 0 0 .5em;font-size:.8em;gap:.15em;line-height:1;min-height:0;flex-direction:column}
.q-live .c-altitude[data-layout="strip"]{flex-direction:row;gap:0;align-items:center;flex-wrap:nowrap}
.q-live .c-altitude[data-layout="strip"] li{border:0;flex:1;padding:.15em;min-width:0;font-size:.85em}
.q-stage{z-index:45;overflow:hidden;pointer-events:auto}.q-stage>[data-show-mount]{position:absolute;inset:0;width:100%;height:100%}
.q-stage .show[data-mode="stage"]{height:100%;aspect-ratio:auto}
.frame-surface:has([data-show="mounted"]) [data-show-art] img:where(:not([data-show-mount] *)){visibility:hidden}
.frame-layer[data-stage-safe]{z-index:210!important}
.q-live:has([data-quit-chat-log]),.q-live:has([data-quit-board-slot]),.q-meme-display{pointer-events:auto;align-items:stretch}
[data-quit-chat-log]{overflow-y:auto;scrollbar-width:thin;font-size:inherit;padding:.1em .3em}
[data-quit-chat-log] p{padding:.2em 0;margin:0 0 .4em;background:transparent;border:0;box-shadow:none;white-space:pre-wrap;overflow-wrap:anywhere}
[data-quit-chat-log] [data-role="user"]{color:#eee4bd}
[data-quit-chat-log] a{font-size:inherit;min-height:0;padding:.2em}
[data-quit-board-slot]{overflow:auto;font-size:inherit;color:var(--t-green)}
[data-quit-board-slot] label{display:flex;align-items:center;gap:.5em}
[data-quit-board-slot] select{background:transparent;border:0;border-bottom:1px solid currentColor;color:inherit;min-width:0;width:100%;font:inherit}
[data-quit-board-slot] option{background:#07160c}
[data-quit-board-slot] .c-leaderboard{padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
[data-quit-board-slot] .c-leaderboard::before,[data-quit-board-slot] .c-leaderboard::after,[data-quit-board-slot] h2{display:none}
[data-quit-board-slot] .c-actions{margin:.3em 0;gap:.3em}[data-quit-board-slot] .c-btn{font:inherit;min-height:0;padding:.2em .35em}
[data-quit-board-slot] table{font:inherit}[data-quit-board-slot] td{padding:.2em}[data-quit-board-slot] th{font:inherit;padding:0}
[data-quit-board-slot] p{font:inherit;margin:.2em 0;padding:0}
/* LIVE BUYS rows in the frame's layout (design notes 9 and 19): the drawn size icon (32 px at 1440),
   the handle in paper with its SOL in green beneath, then the age and the green tag, all at 16 px at 1440
   (frame units, so the column scales with the hero). Before the mint the handle's stand-in reads WARM-UP in
   the handle's own paper colour, never red; a sell is told by the paper-hands icon and a red tag only. The
   phone keeps the frame's four columns (icon, handle over SOL, age, tag) at 15 px. The newest row carries
   the approved orange highlight in dark lettering. */
[data-quit-trade-row]{display:grid;grid-template-columns:25% 33.5% 41.5%;grid-template-rows:minmax(0,1fr);gap:0;font-size:1.56cqw;line-height:1.08;align-items:center;width:100%;height:100%;padding:0 .3em;box-sizing:border-box;color:var(--t-green,#25dc71)}
[data-quit-trade-row] .q-trade-icon{display:flex;align-items:center;justify-content:center;height:100%;padding:.15em .6em .15em .1em;box-sizing:border-box;color:#ff7900}
[data-quit-trade-row][data-tier="dolphin"] .q-trade-icon{color:#75bccd}[data-quit-trade-row][data-tier="whale"] .q-trade-icon{color:#92b8bd}
.q-trade-icon .c-trade-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:transparent;box-shadow:none}.q-trade-icon svg{width:100%;height:auto;max-height:2em}
.q-trade-icon img{display:block;width:auto;height:2em;max-width:100%;object-fit:contain}
[data-quit-trade-row][data-tier="sell"] .q-trade-icon img{image-rendering:pixelated}
.q-trade-who,.q-trade-meta{display:flex;flex-direction:column;gap:.12em;min-width:0}.q-trade-who strong,.q-trade-meta strong{font:inherit}
.q-trade-who>*,.q-trade-meta>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-trade-who>span{color:#f4e7cb}.q-trade-who>strong,.q-trade-meta>span,.q-trade-meta>strong{color:var(--t-green,#25dc71)}
[data-quit-trade-row][data-side="sell"] .q-trade-meta>strong{color:#ff6860}
[data-quit-trade-row] .q-trade-tag{grid-column:1/-1}
/* LIVEWATCH (16 Oct, live at 1440x900: "FROM THE TOILET...", "PAPER HANDS..."): a buy note too long for one line wraps
   between words onto two, at the size frame-controls.js fitTradeTag fits to its cell and row (data-wrap), never cut. */
[data-quit-trade-row] .q-trade-meta>strong[data-wrap]{white-space:normal;text-overflow:clip;overflow-wrap:normal;word-break:normal}
/* ...on the phone at .9, not the row's .86, where the pixel face's apostrophe would reach over its line box's top */
[data-device="phone"] [data-quit-trade-row] .q-trade-meta>strong[data-wrap]{line-height:.9}
[data-quit-trade-row="0"][data-tier]{background:#ff6b1a}[data-quit-trade-row="0"][data-tier] :is(.q-trade-who,.q-trade-meta)>:is(span,strong){color:#0b1410}
[data-device="phone"] [data-quit-trade-row]{grid-template-columns:16.9% 28.2% 18.3% 36.6%;font-size:3.85cqw;line-height:.86;padding:0 .2em}[data-device="phone"] .q-trade-who{gap:0}
[data-device="phone"] .q-trade-icon img{height:1.6em}
[data-device="phone"] [data-quit-trade-row] .q-trade-meta{display:contents}
/* A value slot's words fill its drawn box (the measured fallback size suits long copy, not a
   figure or its AT LAUNCH label); a long address still fits the box's width. */
.q-live:has(>output:is([data-quit-value]:not([data-quit-value="ath"],[data-quit-value="watching"],[data-quit-value="chart-note"]),[data-quit-escaped-value],[data-quit-share-value],[data-quit-contract],[data-quit-unknown])){container-type:size}
.q-live>output:is([data-quit-value]:not([data-quit-value="ath"],[data-quit-value="watching"],[data-quit-value="chart-note"]),[data-quit-escaped-value],[data-quit-share-value],[data-quit-contract],[data-quit-unknown]){font-size:max(1em,min(48cqh,5.6cqw));line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-live>output[data-quit-board-note]{font-size:1.7em;line-height:1.2}
/* THE DEV. in the crew cards' own caption face: the drawn captions beside it are a narrow pixel
   face, centred on the card (VT323 at their size, lightly emboldened). */
[data-device] [data-region="the-crew.intern-caption"]{font-family:"VT323",monospace;font-weight:400;letter-spacing:0;justify-content:center;text-align:center;line-height:1;text-shadow:.035em 0 0 currentColor}
[data-device="desktop"] [data-region="the-crew.intern-caption"]{font-size:1.62cqw}[data-device="phone"] [data-region="the-crew.intern-caption"]{font-size:3.2cqw}
/* The waitlist field as drawn: a grey-ruled box with a grey prompt. */
.q-frame-input:is([data-region$=".waitlist-input"],[data-region$=".waitlist_input"]){border:2px solid #7d847a!important;border-radius:2px;background:#050b08!important;color:#efe9d2;font-family:"VT323",monospace;padding:0 .5em;box-sizing:border-box}
.q-frame-input:is([data-region$=".waitlist-input"],[data-region$=".waitlist_input"])::placeholder{color:#b3b8a8;opacity:1}
[data-device="desktop"] .q-frame-input[data-region$=".waitlist-input"]{font-size:1.65cqw}
/* The eject headline in the approved display lettering: orange, centred, a dark drop. */
[data-device] [data-region="eject-and-share.headline"]{font-family:"Silkscreen",monospace;font-weight:700;color:#ff610b;justify-content:center;text-align:center;line-height:1;letter-spacing:-.06em;text-shadow:.05em .06em 0 #2a0d03}
[data-device="desktop"] [data-region="eject-and-share.headline"]{font-size:3.1cqw;white-space:nowrap}[data-device="phone"] [data-region="eject-and-share.headline"]{font-size:4.6cqw;white-space:nowrap}
/* QA7: the longest headline (PRESS EJECT TO STAMP YOUR CARD.) ran past the screen's right edge at every size. It keeps
   its size where it fits and shrinks to its region where it does not (materials.js sets --headline-length; Silkscreen
   Bold at this tracking is under .78 em a letter). */
[data-device] [data-region="eject-and-share.headline"]{container-type:inline-size}
[data-quit-eject-headline]{font-size:min(1em,calc(100cqw / (var(--headline-length,22) * .78)))}
/* The deck's ALL TIME HIGH and WATCHING at the drawn lettering's size (VT323 at 61 frame px on
   desktop, 66 on phone, where the approved lines are centred). */
[data-device="desktop"] :is([data-region="game.ath"],[data-region="game.watching"]){font-size:2.23cqw;line-height:1}
[data-device="phone"] :is([data-region="game.ath"],[data-region="game.watching"]){font-size:max(16px,4.3cqw);line-height:1;text-align:center}
.q-live[data-region="game.ath"]{container-type:size}
.q-live[data-region="game.ath"]>output{font-size:min(1em,calc(230cqw / var(--ath-length,20)));line-height:1;white-space:nowrap}
.q-art-control{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;background:transparent;border:0;border-radius:0;color:transparent;z-index:150}
.q-art-control:focus-visible{outline:2px solid var(--t-focus);outline-offset:-3px}.q-art-control[aria-pressed="true"]{outline:2px solid #ff7b11;outline-offset:-3px}
.q-meme-display{z-index:180}.q-meme-display>[data-quit-meme-preview]{position:absolute;inset:0}
[data-quit-meme-preview] img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
[data-quit-meme-preview] .q-meme__sticker{position:absolute;transform:translate(-50%,-50%);padding:0;background:transparent;border:0;cursor:move;touch-action:none}
[data-quit-meme-preview] .q-meme__sticker[aria-pressed="true"]{outline:2px solid var(--t-green);outline-offset:3px}
[data-quit-meme-preview] .q-meme__sticker img{display:block;height:auto;object-fit:contain}
[data-quit-preview-text]{font-family:var(--t-font-display);color:#fff3da;text-align:center;width:100%;white-space:pre-wrap}
.q-frame-feedback{margin:0;text-align:center;font-size:22px;min-height:0;padding:0}.q-frame-feedback:not(:empty){padding:8px}
.q-footer{padding:18px 24px;text-align:center;color:#b9c5ad;font-size:18px;line-height:1.35}.q-footer p{margin:8px 0}.q-footer nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.q-footer a:hover,.q-launch-kit a:hover{color:var(--t-ink);text-decoration-thickness:2px}.q-footer a:active,.q-launch-kit a:active{color:var(--t-orange)}
.q-arcade-extra,.q-launch-kit{padding:24px;display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}.q-arcade-extra p{flex-basis:100%;text-align:center}
.q-app-promise{text-align:center;font-size:22px}.q-community{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;max-width:1440px;margin:0 auto;padding:24px}.q-community[hidden],.q-collection[hidden]{display:none}.q-community__panel,.q-community__room{min-width:0}.q-collection{max-width:1440px;margin:0 auto;padding:24px}@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4){.q-community{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}.q-collection{padding:16px}}.q-cabinet-full.arcade-root{height:calc(100dvh - var(--t-header-desktop));min-height:320px;position:relative}
.q-cabinet-full .arcade-stage{flex:none}
@media(max-width:767px){.q-cabinet-full.arcade-root{height:calc(100dvh - var(--t-header-phone))}.q-live .c-altitude{font-size:inherit}.q-live .c-altitude li{font-size:.82em}.q-footer{font-size:16px;padding:12px}}
@media(max-height:500px) and (orientation:landscape){body:has(.q-cabinet-full) .c-header{--c-header-height:48px;height:48px;padding-inline:12px;gap:10px}body:has(.q-cabinet-full) .c-header__brand{font-size:25px;min-width:90px}body:has(.q-cabinet-full) .c-header__buy{min-height:40px;font-size:13px}body:has(.q-cabinet-full) .c-header>.c-sound,body:has(.q-cabinet-full) .c-header__menu>summary{min-height:40px;font-size:18px}.frame-main:has(.q-cabinet-full){padding-top:48px}.q-cabinet-full.arcade-root{height:calc(100dvh - 48px);min-height:0}}
@media(prefers-reduced-motion:reduce){.q-art-control{transition:none}}
.q-chat-log-content{overflow:auto;max-height:100%;font:inherit}
/* Chat lines as the approved desk draws them: the visitor's on the right, the desk's answers on the left in caps. */
.q-chat-log-content{display:flex;flex-direction:column;gap:.3em;padding:.25em .6em .4em}
[data-quit-chat-log] .c-chat__mode{margin:.2em .6em 0;font-size:.62em;opacity:.8}
/* The desk's message field as drawn: a green-ruled box with the prompt in the body face. */
.q-frame-input:is([data-region$=".message-input"],[data-region$=".message_input"]){border:2px solid #1d8a4a!important;border-radius:.35em;background:#04130c!important;font-family:"VT323",monospace;font-size:2cqw;line-height:1.25;padding:.5em .45em 0;box-sizing:border-box}
.q-chat-log-content>p[data-role]{margin:0;max-width:80%;padding:.3em .65em;border:2px solid #1d8a4a;border-radius:.4em;background:#04130c;color:#36d974;line-height:1.15;white-space:pre-wrap;overflow-wrap:anywhere}
.q-chat-log-content>p[data-role="user"]{align-self:flex-end;color:#6fe89a}.q-chat-log-content>p[data-role="assistant"]{align-self:flex-start;text-transform:uppercase}
.q-chat-log-content>p[data-role="assistant"]:empty{display:none}.q-chat-log-content:focus-visible{outline:2px solid var(--t-focus)}
.q-meme-canvas{position:relative;width:100%;height:100%;overflow:hidden;container-type:inline-size}
[data-quit-meme-preview] .q-meme-canvas>img{object-fit:cover}
.q-meme-canvas>[data-caption]{position:absolute;left:5%;width:90%;font:700 5cqw/1.25 var(--t-font-display);color:#f4e7cb;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-text-stroke:.035em #030805;paint-order:stroke fill;pointer-events:none;z-index:2}
.q-meme-canvas>[data-caption="top"]{top:5%}.q-meme-canvas>[data-caption="bottom"]{bottom:5%}
.q-meme-canvas[data-fx="deep-fry"]>img{filter:contrast(1.8) saturate(2.3)}
.q-meme-canvas[data-fx="scanlines"]::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#0003 3px,#0003 5px)}
.q-meme-canvas[data-fx="crt"]::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 3em #000b}
.q-local-laugh{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto}.q-local-laugh:focus-visible{outline:2px solid var(--t-focus)}
.c-header__brand img{display:block;width:145px;height:50px;object-fit:contain}
@media(max-width:600px){.c-header__brand img{width:100px;height:34px}}
.q-cabinet-inline.arcade-root{width:100%;height:min(75vw,650px);min-height:360px;position:relative}
.q-accounting-stage{z-index:180;pointer-events:auto}
/* The 404's drawn crosshair is the start control: it sits above the embedded game until play hides it. */
.frame-cutout[data-quit-accounting-aim]{z-index:190}.q-accounting-stage>[data-quit-arcade]{width:100%;height:100%;min-height:0}
.q-accounting-stage .arcade-stage{flex:none}.q-accounting-stage .arcade-root{min-height:0;height:100%;width:100%}
.q-accounting-stage .arcade-root,.q-accounting-stage .arcade-stage{background:transparent!important}.q-accounting-stage canvas{background:transparent!important}
.q-live:has(.q-accounting-meter){overflow:visible}
.q-live>.q-accounting-meter{display:flex;position:relative;width:100%;height:100%;container-type:size;align-items:center;justify-content:space-between;line-height:1;white-space:nowrap}
.q-accounting-meter output{font-family:var(--t-font-body);font-weight:400}
.q-live>.q-accounting-score{flex-direction:column;align-items:flex-start;justify-content:center}
.q-accounting-score .q-accounting-label{font-size:50cqh;line-height:.7}.q-accounting-score output{font-size:70cqh;line-height:.9}
.q-accounting-health .q-accounting-label{font-size:130cqh}
[data-quit-accounting-health]{width:78%;height:55%;display:flex;gap:2%}
[data-quit-accounting-health] i{height:100%;flex:1;border:1px solid currentColor;opacity:.2}
[data-quit-accounting-health] i[data-full="true"]{background:currentColor;opacity:1}
.q-accounting-declined .q-accounting-label{font-size:80cqh}.q-accounting-declined output{font-size:95cqh}
[data-device="phone"] .q-accounting-score output{font-size:100cqh}
[data-device="phone"] .q-accounting-score .q-accounting-label{position:absolute;left:0;bottom:100%;font-size:90cqh}
[data-device="phone"] .q-accounting-health .q-accounting-label{position:absolute;right:103%;font-size:130cqh}
[data-device="phone"] [data-quit-accounting-health]{width:100%}
[data-device="phone"] .q-accounting-declined .q-accounting-label{position:absolute;right:106%;font-size:66cqh}
[data-device="phone"] .q-accounting-declined output{font-size:110cqh}
[data-device="phone"] .frame-surface:has([data-frame-embedded]) .q-accounting-label{visibility:hidden}
.frame-surface:has([data-frame-embedded]:not([data-scene="title"])) [data-accounting-art]:not([data-layer="stage"]) img{visibility:hidden}
[data-quit-accounting-aim]{line-height:1!important;background:transparent!important;color:#25dc71!important;border:0!important;box-shadow:none!important;padding:0!important}
[data-quit-accounting-aim] .c-btn__label{width:100%;height:100%;display:block}
.q-inline-aim{width:100%;height:100%;pointer-events:auto}
.q-reticle{display:block;position:relative;width:100%;height:100%}
.q-reticle::after{content:'';position:absolute;left:47%;top:47%;width:6%;height:6%;background:currentColor}
.q-reticle i{position:absolute;width:22%;height:22%;border:clamp(2px,.2vw,6px) solid currentColor}
.q-reticle i:nth-child(1){left:8%;top:8%;border-right:0;border-bottom:0}
.q-reticle i:nth-child(2){right:8%;top:8%;border-left:0;border-bottom:0}
.q-reticle i:nth-child(3){left:8%;bottom:8%;border-right:0;border-top:0}
.q-reticle i:nth-child(4){right:8%;bottom:8%;border-left:0;border-top:0}
.frame-surface:has([data-frame-embedded]:not([data-scene="title"])) [data-quit-accounting-aim]{visibility:hidden}
select{appearance:none;-webkit-appearance:none}
.q-meme-library{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.q-content-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:16px;max-height:65dvh;overflow:auto}.q-content-choice{background:transparent;color:var(--t-ink);border:0;cursor:pointer;padding:0;font:inherit}.q-content-choice img{width:100%;height:100px;object-fit:contain;image-rendering:pixelated}.q-content-choice span{display:block}.q-content-choice:focus-visible{outline:2px solid var(--t-focus)}

@media(max-width:600px) and (orientation:portrait){.q-cabinet-inline.arcade-root{height:640px;min-height:640px}}
[data-quit-meme-font]{text-transform:none}[data-quit-meme-font="0"]{font-family:var(--t-font-display)!important}[data-quit-meme-font="1"]{font-family:var(--t-font-body)!important}[data-quit-meme-font="2"]{font-family:monospace!important}
.frame-component[data-quit-meme-sort="picks"],.frame-component[data-quit-meme-sort="picks"] .c-btn__label{color:#030805}
[data-skin="arcade"] .frame-component.c-btn[data-quit-faq]{color:#ff741b;text-align:left;justify-content:flex-start;background:transparent;border:0;box-shadow:none;padding:0!important}
[data-skin="arcade"] .frame-component.c-btn[data-faq-composite]{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.18em;line-height:1.04}
.q-faq-label{font-family:var(--t-font-display);font-size:1em;color:#ff741b}
[data-quit-faq-answer]{font-family:var(--t-font-body);font-weight:400;color:#25dc71;text-align:left;line-height:1.06;white-space:normal}
[data-faq-composite] [data-quit-faq-answer]{font-size:1.1em;text-transform:none}
.q-native-footer{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;gap:.35em;pointer-events:auto}
[data-skin="arcade"] .q-native-footer .c-btn{font:inherit;color:#25dc71;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;letter-spacing:0}
.q-arcade-framed-stage{container-type:inline-size}
.q-arcade-framed-stage[data-frame-active]>.arcade-overlay{pointer-events:auto}
.q-arcade-framed-stage[data-frame-active]>canvas{visibility:hidden}
.q-arcade-frame{position:absolute;inset:0;--t-font-display:"Silkscreen",monospace;--t-font-body:"VT323",monospace}
.q-arcade-frame .frame-image{transform:translate(var(--raster-x,0px),var(--raster-y,0px)) scale(calc(100cqw / var(--frame-width)))}
.q-arcade-frame .frame-layer img{width:100%;height:100%;transform:translate(var(--raster-x,0px),var(--raster-y,0px))}
.q-arcade-slot{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;background:transparent;border:0;box-shadow:none;line-height:1}
.q-arcade-slot>output{font:inherit;color:inherit;line-height:inherit;background:transparent;border:0;box-shadow:none}
.q-arcade-slot .q-arcade-frame-control{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;padding:0 .1em!important;font-size:inherit;line-height:1.05;letter-spacing:0;white-space:normal;pointer-events:auto}
.q-arcade-slot .q-arcade-frame-name{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;font:inherit;text-align:center;color:#ffedc8;background:#030b06;border:2px solid #00ac4e;box-sizing:border-box;box-shadow:none;pointer-events:auto;text-transform:uppercase}
.q-arcade-frame [data-selected="true"]{outline:2px solid #27da68;outline-offset:-2px}
.q-arcade-outcome{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 3cqw/1.2 var(--t-font-display);color:#ff741b;text-align:center}
.q-arcade-utility{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font:18px/1.3 var(--t-font-body);padding:8px}
.q-arcade-utility:empty{display:none}.q-arcade-utility{flex:none}.q-arcade-utility .c-btn{font:inherit;width:auto!important;height:auto!important;min-height:40px;flex:0 0 auto;padding:6px 14px}.q-arcade-result-status{margin:0;color:#25dc71}
.frame-layer>.motion-lift-shadow{display:none}
html[data-production="true"] .arcade-stage:has(.ar2-dialog:not([hidden]),.arcade-modal-shade:not([hidden]))>canvas{opacity:.14}
html[data-production="true"] .arcade-modal-shade{background:transparent}
html[data-production="true"] :is(.arcade-panel,.ar2-dialog,.fire-title,.fire-results){background:transparent;border:0;box-shadow:none;color:#f6e7c3}
html[data-production="true"] :is(.arcade-panel,.ar2-dialog){font-family:var(--forge-font-body);font-size:clamp(20px,2.2vw,30px);line-height:1.2}
html[data-production="true"] :is(.arcade-panel,.ar2-dialog,.fire-title,.fire-results) input{background:transparent;border:0;box-shadow:none;color:#f6e7c3;font:inherit;min-height:44px}
/* The LOCAL BOARD rows kept the panel's 13 px default under 20 to 30 px panel type and sat on the dimmed
   results labels; they read at the panel's size on their own dark board (ARC8-REVIEW). */
html[data-production="true"] .arcade-board{font-size:max(16px,.8em);background:#06110d}
/* At that size the numbered AR2 board (Fire the Overlords, Accounting 404) cut its ranks to ".." in a 28 px gutter. */
html[data-production="true"] .ar2-board{list-style-position:inside;padding-left:0}
@media(max-width:767px){.q-live .c-altitude{font-size:3.3cqw}}
/* Phone type floor (design note 10): 12 px for any visible live text, 14 px for what is read (the help desk's
   chat, as the phone frame paints its bubbles); live labels take the painted size of what they replace. */
[data-device="phone"] [data-quit-chat-log]{font-size:14px}[data-device="phone"] [data-quit-chat-log] .c-chat__mode{font-size:12px;opacity:1}
[data-device="phone"] [data-region="game.ladder"] .c-altitude li{font-size:max(12px,.82em)}
[data-device="phone"] .q-live .c-altitude[data-layout="strip"] li{padding:.15em 0;font-size:12px;letter-spacing:-.02em}
[data-device="phone"] .q-local-laugh{font-size:max(12px,1em)}
[data-device="phone"] [data-quit-tv-progress]{font-size:12px;white-space:nowrap}
[data-device="phone"][data-skin="arcade"] .q-native-footer .c-btn{font-size:12px}

html[data-production="true"] .fire-missions li{border:0;box-shadow:none}
/* The FIRE EXIT title and results plates paint their whole menu. The live menu repaints only the
   interior of the painted panel, measured inside its green border, with the panel's own fill: no
   painted lettering shows through the live text and nothing leaves the painted frame. */
html[data-production="true"] .fire-title,html[data-production="true"] .fire-results{background:#000f08;overflow:hidden}
html[data-production="true"] .fire-title{inset:27.5% 2.8% 9.2% 58.8%}
html[data-production="true"] .fire-results{inset:7.8% 3.4% 7.8% 52.2%}
html[data-production="true"] .arcade-root[data-game="fire-exit"][data-portrait="true"] .fire-title{inset:53.6% 5.3% 5.2% 5.6%}
html[data-production="true"] .arcade-root[data-game="fire-exit"][data-portrait="true"] .fire-results{inset:41.9% 4.7% 4.8% 5.3%}

/* Site amendment 4. SEND IT first and big: on desktop the monitor and deck scale so the stage is at
   least 70 percent of the viewport height (and the deck stays in the first screen); the LIVE BUYS
   column takes the remaining width at its own scale. The plate split falls in the dark gap. */
.q-hero{container-type:inline-size;display:flex;align-items:flex-start;justify-content:center;width:100%;--hero-s1:min(calc(71vh / 1060),calc((100cqw - 300px) / 1890))}
.q-hero__part{position:relative;overflow:hidden;flex:none}
.q-hero__left{width:calc(1890 * var(--hero-s1));height:calc(1412 * var(--hero-s1))}
.q-hero__left>.frame-surface{width:calc(2736 * var(--hero-s1))}
.q-hero__feed{--hero-s2:calc((100cqw - 1890 * var(--hero-s1)) / 846);width:calc(846 * var(--hero-s2))}
.q-hero__feed>.frame-surface{width:calc(2736 * var(--hero-s2));margin-left:calc(-1890 * var(--hero-s2))}
.q-hero__aside:empty{display:none}
/* The Break Room's message list scrolls; keyboard users can focus it to scroll. */
.c-breakroom__log:focus-visible{outline:2px solid var(--t-focus,#ffe36b);outline-offset:2px}
/* The community's labels are pills, not the frame-site's absolutely placed tags. */
:is(.c-community,.c-king,.c-billboard,.c-claim,.c-crowd,.c-poll,.c-breakroom,.c-break-room) .c-tag{position:static;display:inline-flex;z-index:auto;padding:.12em .45em .08em;border:0;background:var(--t-yellow);color:var(--t-black);font-size:var(--t-font-s,14px);line-height:1.05}
.q-hero__aside{padding:calc(24 * var(--hero-s2)) calc(36 * var(--hero-s2)) 0}
/* CORNER OFFICE under LIVE BUYS (design note 19): it stays in the first screen when the room left under
   the feed holds it (about 150 px); otherwise it drops to start exactly at the fold instead of being cut
   by it (1920 x 1080). */
.q-hero__feed{--hero-fold-room:calc(100vh - var(--t-header-desktop,70px) - 1412 * var(--hero-s2))}
.q-hero__aside{margin-top:clamp(0px,(150px - var(--hero-fold-room)) * 1000,var(--hero-fold-room))}
/* LIVE BUYS before the first buy (FINAL9, owner, 12 Oct: nothing on the page is an empty box). Until a buy
   arrives (frame-controls.js sets data-quit-buys="some" and keeps it) the painted panel is not shown: on the
   desktop one line in the panel's own frame stands in for it and CORNER OFFICE moves up under it; the phone
   scene ends at the console's lower bezel under the BUY row (frame row 1712 of 2600), so the page goes
   straight on to the next floor. The column under the cards is the hero's own black, not the loading tint. */
.q-hero__nobuys{display:none}
html:not([data-quit-buys="some"]) .q-hero__feed>.frame-surface{display:none}
html:not([data-quit-buys="some"]) .q-hero__aside{margin-top:0}
html:not([data-quit-buys="some"]) .q-hero__nobuys{display:grid;gap:4px;margin:calc(24 * var(--hero-s2)) calc(36 * var(--hero-s2)) 0;padding:6px 12px 8px;border:solid transparent;border-width:calc(32 * var(--hero-s2)) calc(28 * var(--hero-s2));border-image:url("community-art/panel.webp") 60 / calc(60 * var(--hero-s2)) stretch;border-radius:calc(16 * var(--hero-s2));background:radial-gradient(130% 100% at 50% 40%,transparent 58%,rgb(0 0 0 / .55) 100%),repeating-linear-gradient(to bottom,rgb(255 255 255 / .028) 0 1px,transparent 1px 3px),#08100d;color:#a9c2ae;font:400 17px/1.15 var(--t-font-body)}
.q-hero__nobuys-title{color:#ff610b;font:700 21px/1 var(--t-font-display);letter-spacing:-.03em;text-shadow:2px 2px 0 #020504}
/* LIVEWATCH (16 Oct, live at 1440x900): LIVE BUYS goes on under its painted panel while nothing else holds the column
   (frame-controls.js mountMoreBuys), in the panel's own frame as CORNER OFFICE wears it (note 19), at the column's scale
   (one frame px is --hero-s2): its rows lie on the painted rows' lines (frame x 48 to 802 of the column's 846, 164 tall,
   the type 1.56 % of the 2736 px plate), its frame about on the painted panel's (x 22 to 834). Only rows that hold a buy
   show; with none there is no box. */
.q-hero__more{display:grid;margin:calc(24 * var(--hero-s2)) calc(16 * var(--hero-s2)) 0 calc(20 * var(--hero-s2));padding:calc(6 * var(--hero-s2)) 0;border:solid transparent;border-width:calc(32 * var(--hero-s2)) calc(28 * var(--hero-s2));border-image:url("community-art/panel.webp") 60 / calc(60 * var(--hero-s2)) stretch;border-radius:calc(16 * var(--hero-s2));background:radial-gradient(130% 100% at 50% 40%,transparent 58%,rgb(0 0 0 / .55) 100%),repeating-linear-gradient(to bottom,rgb(255 255 255 / .028) 0 1px,transparent 1px 3px),#08100d}
.q-hero__more>[data-quit-trade-row]{height:calc(164 * var(--hero-s2));font-size:calc(42.68 * var(--hero-s2))}
.q-hero__more:not(:has(>[data-quit-trade-row]:not(:empty))),.q-hero__more>[data-quit-trade-row]:empty{display:none}
[data-floor-section="game"]>[data-quit-frame-host]:has(>.q-hero){background:#030805}
/* FINAL10 (owner: nothing on the first screen reads as empty; the stage cannot take the width without pushing its deck
   below the fold). Until the first buy THE BREAK ROOM fills the column under CORNER OFFICE down to the deck
   (runtime/quit/community.js placeBreakRoom; community.css draws its TV at the column's scale); from the first buy it
   goes back beside WHAT HAPPENS NEXT and LIVE BUYS takes the column. */
.q-hero__room:empty{display:none}
.q-hero__feed:has(>.q-hero__room:not(:empty)){display:flex;flex-direction:column;height:calc(1412 * var(--hero-s1))}
.q-hero__room{display:flex;flex:1 1 0;min-height:0;margin:calc(24 * var(--hero-s2)) calc(36 * var(--hero-s2)) 0}
.q-hero__room>.c-breakroom{flex:1 1 auto;min-width:0}
/* FINAL10 follow-up (QA8 checks the rehearsal form too): with LIVE BUYS open the column under CORNER OFFICE is not left
   bare either. Where it holds the room's short form (about 150 px and more, the WARM-UP only) THE BREAK ROOM's newest
   lines fill it (community.js placeBreakRoom, data-short); where it is shorter CORNER OFFICE grows to the deck (data-fill).
   LIVE BUYS and the card keep their own heights in the column. */
.q-hero__feed:is([data-fill],:has(>.q-hero__room:not(:empty)))>:is(.frame-surface,.q-hero__nobuys){flex:none}
.q-hero__feed:has(>.q-hero__room:not(:empty))>.q-hero__aside{flex:none}
.q-hero__feed[data-fill]{display:flex;flex-direction:column;height:calc(1412 * var(--hero-s1))}
.q-hero__feed[data-fill]>.q-hero__aside{flex:1 1 auto;display:flex;flex-direction:column;margin-top:0;padding-bottom:calc(24 * var(--hero-s2))}
.q-hero__feed[data-fill]>.q-hero__aside>.c-king{flex:1 1 auto;align-content:center}
html:not([data-quit-buys="some"]) .frame-surface[data-frame="phone-game"]{aspect-ratio:1536/1712}
html:not([data-quit-buys="some"]) [data-floor-section="game"]>[data-quit-frame-host]{--host-aspect-phone:1536/1712!important}
/* The deck's WATCHING line fits its display like the ALL TIME HIGH line does. */
.q-live[data-region="game.watching"]{container-type:size}
.q-live[data-region="game.watching"]>output{font-size:min(1em,calc(230cqw / var(--watch-length,20)));line-height:1;white-space:nowrap}
/* Every floor of the one page: its scene, then the way into its full page. */
.q-floor{position:relative;scroll-margin-top:var(--t-header-desktop,72px)}html[data-device="phone"] .q-floor{scroll-margin-top:var(--t-header-phone,62px)}
.q-arcade-framed-stage{scroll-margin-top:var(--t-header-desktop,72px)}html[data-device="phone"] .q-arcade-framed-stage{scroll-margin-top:var(--t-header-phone,62px)}
.q-floor__more{margin:0;padding:clamp(10px,1.1vw,18px) 16px clamp(22px,2.4vw,40px);text-align:center;font:400 clamp(18px,1.5vw,26px)/1.2 var(--t-font-display);letter-spacing:.04em}
.q-floor__more a{color:var(--t-green,#45df7b);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em}
.q-floor__more a:hover{color:var(--t-ink,#f6e7c3)}.q-floor__more a:active{color:var(--t-orange,#ff7900)}
/* Drawn controls are cut-out controls: the art is the face. Hover lifts and brightens it, press pushes
   it onto its drawn shadow, focus outlines its shape, disabled keeps its hue. Transform and filter only.
   The focus ring is four hard drop shadows of the art itself: a 3 px solid edge in the focus yellow
   that follows the cut-out's alpha (design note 18). */
.frame-cutout{position:absolute;display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;line-height:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out;--cut-ring:drop-shadow(3px 0 0 #ffe36b) drop-shadow(-3px 0 0 #ffe36b) drop-shadow(0 3px 0 #ffe36b) drop-shadow(0 -3px 0 #ffe36b)}
.frame-cutout .frame-cutout__art{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:filter .12s ease-out}
/* Floor buttons take the elevator's own face states (runtime/quit/elevator.css). */
.frame-cutout:not([data-floor],[data-elevator-face]):hover{transform:translateY(-2px)}.frame-cutout:not([data-floor],[data-elevator-face]):hover .frame-cutout__art{filter:brightness(1.12)}
.frame-cutout:not([data-floor],[data-elevator-face]):active{transform:translateY(2px);transition-duration:.04s}.frame-cutout:not([data-floor],[data-elevator-face]):active .frame-cutout__art{filter:brightness(.94)}
.frame-cutout[aria-pressed="true"] .frame-cutout__art{filter:brightness(1.16)}
/* Locked before the mint (design note 3): the same orange one step darker with its drawn bevel, never
   grey or brown, so it still reads as orange from across the room. It explains itself on hover and focus
   (the launch tooltip) and keeps the not-allowed cursor. */
.frame-cutout[aria-disabled="true"]{cursor:not-allowed}.frame-cutout[aria-disabled="true"]:is(:hover,:active){transform:none}
.frame-cutout[aria-disabled="true"] .frame-cutout__art,.frame-cutout[aria-disabled="true"]:is(:hover,:active) .frame-cutout__art{filter:brightness(.8)}
/* Focus shows at once in every state: no fade, so the ring is there the moment focus lands. */
.frame-cutout:focus-visible{outline:none}.frame-cutout:focus-visible .frame-cutout__art{filter:var(--cut-ring);transition:none}
.frame-cutout:not([data-floor],[data-elevator-face]):focus-visible:hover .frame-cutout__art{filter:brightness(1.12) var(--cut-ring)}
.frame-cutout:not([data-floor],[data-elevator-face]):focus-visible:active .frame-cutout__art{filter:brightness(.94) var(--cut-ring)}
.frame-cutout[aria-pressed="true"]:focus-visible .frame-cutout__art{filter:brightness(1.16) var(--cut-ring)}
.frame-cutout[aria-disabled="true"]:focus-visible .frame-cutout__art,.frame-cutout[aria-disabled="true"]:focus-visible:is(:hover,:active) .frame-cutout__art{filter:brightness(.8) var(--cut-ring)}
/* A locked plate carries a small drawn AT LAUNCH tag on its top-right corner. On a low plate the tag
   sits above the corner so it never covers the plate's lettering; a plate smaller than the tag carries
   none, nor do the footer's text links or the phone directory's stacked rows (a tag there would cover the
   next row's words). The plate is its own size container for that choice. */
.frame-cutout[aria-disabled="true"]:not([data-floor],[data-elevator-face]){container:q-cut/size}
.frame-cutout[aria-disabled="true"]:not([data-floor],[data-elevator-face],[data-region="game.buy"],[data-region="game.eject"])::after{content:"AT LAUNCH"/"";position:absolute;z-index:2;top:0;right:0;translate:10% -58%;padding:4px;border:2px solid #030805;background:#25dc71;color:#030805;font:400 12px/1 "Silkscreen",monospace;letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:2px 2px 0 #030805;pointer-events:none}
[data-device="phone"] .frame-cutout[aria-disabled="true"]:not([data-floor],[data-elevator-face],[data-region="game.buy"],[data-region="game.eject"])::after{font-size:12px}
@container q-cut (max-height:48px){.frame-cutout[aria-disabled="true"]:not([data-floor],[data-elevator-face],[data-region="game.buy"],[data-region="game.eject"])::after{translate:6% -92%}}
@container q-cut (max-width:70px) or (max-height:22px){.frame-cutout[aria-disabled="true"]:not([data-floor],[data-elevator-face],[data-region="game.buy"],[data-region="game.eject"])::after{display:none}}
.frame-cutout[aria-disabled="true"][data-region^="faq.footer"]::after,[data-device="phone"] .frame-cutout[aria-disabled="true"][data-region^="directory."]::after{display:none}
/* The badges MINT plate says on its face when it opens (the collection date, a live button since SHOP-04), so it carries no AT LAUNCH tag (QA). */
.frame-cutout[aria-disabled="true"][data-region="badges.mint"]::after{display:none}
/* Once a mint is set, the share card's POST plate waits for the visitor's own eject, not for the launch (audit-a5
   home-phone-06): materials.js gives it its lock reason then, so its tag says EJECT FIRST instead of AT LAUNCH. */
.frame-cutout[aria-disabled="true"][data-quit-frame-share][data-lock-reason]::after{content:"EJECT FIRST"/""}
/* BUY and EJECT on the stage deck get the better version: a strip of the lobby's penthouse tape across
   the plate's lower half (cut from its art the way the penthouse tape is cut) with NOT AVAILABLE
   written on it; the plate's own lettering stays readable above the tape. */
.frame-cutout:is([data-region="game.buy"],[data-region="game.eject"])[aria-disabled="true"]::after{content:"NOT AVAILABLE"/"";position:absolute;z-index:2;left:50%;top:77%;translate:-50% -50%;rotate:-3deg;box-sizing:border-box;width:max-content;min-width:min(74cqw,30em);max-width:88cqw;padding:.42em 1.7em .36em;border:0 solid transparent;border-image:url(art/launch-tape.webp) 0 40 fill/0 1.5em/0 stretch;color:#17130f;font:700 clamp(12px,min(12.5cqh,6cqw),22px)/1.05 "Silkscreen",monospace;letter-spacing:.02em;text-align:center;text-transform:none;white-space:normal;text-wrap:balance;pointer-events:none}
/* EJECT is a round button: its tape is set in the button's own units (centred, about 12 degrees, overhanging
   each side by a tenth), so it sits the same at every width (DESIGN round two, B3). */
.frame-cutout[data-region="game.eject"][aria-disabled="true"]::after{top:64%;left:50%;translate:-50% -50%;rotate:-12deg;width:120cqw;min-width:0;max-width:none;padding:.35em .3em .3em;font-size:max(12px,10cqw);line-height:1.05;white-space:normal;text-wrap:balance}
/* The phone header already labels BUY as AT LAUNCH. Duplicate tags on the
   compact game buttons covered the deck and LIVE BUYS. Keep those buttons
   visibly disabled and retain their launch tooltips, without floating tags. */
[data-device="phone"] .frame-cutout:is([data-region="game.buy"],[data-region="game.eject"])[aria-disabled="true"]::after{content:none;display:none}
@media (prefers-reduced-motion:reduce){.frame-cutout,.frame-cutout .frame-cutout__art{transition:none}.frame-cutout:hover,.frame-cutout:active{transform:none}}
/* The crew's cards take turns at a 2 px idle hover (design note 17): one card at a time, each a 6 s rise
   and settle, then the next card; none under reduced motion or in a pose capture. The motion runtime owns
   the cards' transform (reveal, tilt), so the hover moves the separate translate property. */
@keyframes q-crew-hover{0%,9.09%,100%{translate:0 0}4.545%{translate:0 -2px}}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(2 of [data-layer-kind="cast"]){--q-turn:1}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(3 of [data-layer-kind="cast"]){--q-turn:2}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(4 of [data-layer-kind="cast"]){--q-turn:3}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(5 of [data-layer-kind="cast"]){--q-turn:4}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(6 of [data-layer-kind="cast"]){--q-turn:5}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(7 of [data-layer-kind="cast"]){--q-turn:6}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(8 of [data-layer-kind="cast"]){--q-turn:7}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(9 of [data-layer-kind="cast"]){--q-turn:8}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(10 of [data-layer-kind="cast"]){--q-turn:9}
:is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer:nth-child(11 of [data-layer-kind="cast"]){--q-turn:10}
@media (prefers-reduced-motion:no-preference){
 :root:not([data-reduced-motion="true"],[data-forge-pose]) :is([data-frame="desktop-the-crew"],[data-frame="phone-the-crew"])>.frame-layer[data-layer-kind="cast"]{animation:q-crew-hover 66s ease-in-out calc(var(--q-turn,0) * 6s) infinite both}
}
/* The header (design note 13). One grey rule under the bar, at the top and after scrolling. Desktop: SOUND
   and BUY in the frame's proportions on one row height (SOUND 36 px, BUY 44 px). Phone: the wordmark at
   100 px, SOUND as a 44 px drawn speaker (its accessible name stays "Sound"), BUY at 14 px, even 8 px gaps
   with room for the 44 px elevator call plate left of SOUND. Disabled c-btns keep their hue (note 3). */
[data-skin="arcade"] .c-header,[data-skin="arcade"] .c-header[data-compact="true"]{border-bottom-color:var(--t-metal,#333a32)}
[data-skin="arcade"] .c-btn[aria-disabled="true"]{filter:brightness(.8);opacity:1}
.c-header__buy[aria-disabled="true"]::after{content:"AT LAUNCH"/"";flex:none;padding:3px 4px;border:2px solid #030805;background:#25dc71;color:#030805;font:400 12px/1 "Silkscreen",monospace;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none}
@media (min-width:1101px){
 [data-skin="arcade"] .c-header>.c-sound{min-height:36px;height:36px;padding:0 .55em;font-size:20px;line-height:1}
 [data-skin="arcade"] .c-header__buy{min-width:0;min-height:44px;height:44px;padding:0 12px 0 14px;font-size:17px;gap:10px}
}
/* Narrow desktops have no room for the tag inside BUY: it rides the plate's top-right corner instead. */
@media (min-width:1101px) and (max-width:1339px){
 [data-skin="arcade"] .c-header{gap:12px;--q-call-margin:8px}
 [data-skin="arcade"] .c-header__nav .c-nav-link{font-size:clamp(17px,1.64vw,22px)}
 .c-header__buy[aria-disabled="true"]::after{position:absolute;top:0;right:-6px;translate:0 -60%}
}
@media (max-width:767px){
 [data-skin="arcade"] .c-header{gap:8px;padding-inline:8px;--q-call-margin:0px}
 [data-skin="arcade"] .c-header>.c-sound{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;box-sizing:border-box;padding:0 0 0 40px;overflow:hidden;white-space:nowrap;justify-content:flex-start}
 [data-skin="arcade"] .c-header>.c-sound::before{content:"";position:absolute;inset:0;margin:auto;width:28px;height:24px;background:currentColor;-webkit-mask:var(--q-speaker-off) center/contain no-repeat;mask:var(--q-speaker-off) center/contain no-repeat}
 [data-skin="arcade"] .c-header>.c-sound[aria-pressed="true"]::before{-webkit-mask-image:var(--q-speaker-on);mask-image:var(--q-speaker-on)}
 [data-skin="arcade"] .c-header__buy{flex:0 1 auto;min-width:0;height:44px;min-height:44px;padding:0 6px;font-size:14px;letter-spacing:0;flex-direction:column;justify-content:center;gap:2px}
 .c-header__buy[aria-disabled="true"]::after{font-size:12px;padding:1px 3px}
}
/* Phones narrower than 375 px: the same row with 6 px gaps, the 96 px wordmark and BUY at the 12 px floor. */
@media (max-width:374px){
 [data-skin="arcade"] .c-header{gap:6px}
 .c-header__brand img{width:96px}
 [data-skin="arcade"] .c-header__buy{padding:0 3px;font-size:12px}
}
/* The speaker the phone SOUND button draws: off (crossed) and on (two waves), on a 14 x 12 pixel grid. */
.c-header>.c-sound{--q-speaker-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 4h3v4H1zM4 3h1v6H4zM5 2h1v8H5zM6 1h1v10H6zM9 4h1v1H9zM10 5h1v1h-1zM11 6h1v1h-1zM12 7h1v1h-1zM12 4h1v1h-1zM11 5h1v1h-1zM10 6h1v1h-1zM9 7h1v1H9z'/%3E%3C/svg%3E");--q-speaker-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 4h3v4H1zM4 3h1v6H4zM5 2h1v8H5zM6 1h1v10H6zM8 4h1v1H8zM9 5h1v2H9zM8 7h1v1H8zM10 2h1v1h-1zM11 3h1v1h-1zM12 4h1v4h-1zM11 8h1v1h-1zM10 9h1v1h-1z'/%3E%3C/svg%3E")}
/* The phone menu (design note 14): two groups on one screen with no scroll. The eight words at 22 px, then
   THE DIRECTORY and its 22 floors in two columns at 16 px on 36 px rows. All 30 links stay in the drawer. */
@media (max-width:1100px){
 .c-header__menu[open]>.c-header__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 14px}
 [data-skin="arcade"] .c-header__nav>.c-nav-link{min-height:40px;padding:0 4px;font-size:22px;justify-content:flex-start}
 .c-header__menu[open] .c-header__directory{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:8px;padding-top:10px;border-top:2px solid var(--t-metal,#333a32)}
 .c-header__directory::before{content:"THE DIRECTORY";grid-column:1/-1;padding:0 4px 6px;font:400 14px/1 "Silkscreen",monospace;letter-spacing:.06em;color:var(--t-orange,#ff610b)}
 [data-skin="arcade"] .c-header__directory>.c-nav-link{min-height:36px;padding:2px 4px;font-size:16px;line-height:1;white-space:normal;text-align:left;justify-content:flex-start}
}

/* The stage poll's winning option on its cream card: the show's accent reads 3.6:1 there, so the page
   darkens it to 4.9:1 until GAME-VIS takes the change in show/src/overlay/overlay.css (sync ask). */
[data-show-mount] .show-poll__opt.is-winner .show-poll__label{color:#b23c00}
/* The stage's canvas never spills past its screen: rounding to device pixels made it up to a pixel larger than its mount
   on the phone (GAME-VIS sizes the canvas; this only caps it at its mount's box). */
[data-show-mount] canvas{max-width:100%;max-height:100%}
/* On the phone the underclass page's GET IN A CHAIR sits right under THE COUNTER PLAN panel, which covered the top half
   of its overhanging tag (a cut-out is its own stacking context): the tag sits inside the plate's top-right corner. */
[data-device="phone"] .frame-cutout:is([data-region="escape-the-underclass.buy"],[data-region="chart.buy"],[data-region^="badges.mint"])[aria-disabled="true"]::after{top:3px;right:0;translate:0 0;padding:3px;letter-spacing:-.02em}
/* The phone roadmap's small social plates have no room for a tag inside, above (the title) or below (the frame's
   edge): they keep the locked look and the unavailable title without it. */
[data-device="phone"] .frame-cutout:is([data-region="roadmap.x"],[data-region="roadmap.telegram"],[data-region="roadmap.discord"])[aria-disabled="true"]::after{display:none}

/* Small feed symbols use their intentional pixel grid at phone DPR. */
.q-trade-icon img{image-rendering:pixelated}

/* Meme selections follow their live state; the first cutout has a painted orange border. */
[data-skin="arcade"] .frame-cutout:is([data-quit-meme-font],[data-quit-meme-fx]):not([aria-pressed="true"]) .frame-cutout__art{filter:grayscale(1) brightness(.8)}
[data-skin="arcade"] .frame-cutout:is([data-quit-meme-font],[data-quit-meme-fx])[aria-pressed="true"]{outline:2px solid #ff7b11;outline-offset:-3px}
[data-skin="arcade"] .frame-cutout:is([data-quit-meme-font],[data-quit-meme-fx])[aria-pressed="true"] .frame-cutout__art{filter:brightness(1.16)}
[data-skin="arcade"] .frame-cutout:is([data-quit-meme-font],[data-quit-meme-fx]):focus-visible{outline:2px solid var(--t-focus);outline-offset:2px}
/* FAQ (owner, 15 Oct 2026): the answers are painted into the panels. The HTML answer stays in the page for screen
   readers and the SEO text layer, visually hidden (not display:none). Hovering a question lifts and brightens its panel. */
:is([data-page="/faq"],[data-floor-section="faq"]) .frame-live[data-region^="faq.answer"]{clip-path:inset(50%);overflow:hidden;white-space:nowrap;color:transparent}
[data-page="/faq"] .frame-layer:is([data-layer^="faq-window"],[data-layer^="panel-"]){transition:transform .15s ease-out,filter .15s ease-out}
[data-page="/faq"] .frame-layer:is([data-layer^="faq-window"],[data-layer^="panel-"]):has(.frame-cutout:hover,.frame-cutout:focus-visible){transform:translateY(-3px);filter:brightness(1.1)}
@media (prefers-reduced-motion:reduce){[data-page="/faq"] .frame-layer:is([data-layer^="faq-window"],[data-layer^="panel-"]){transition:none}[data-page="/faq"] .frame-layer:is([data-layer^="faq-window"],[data-layer^="panel-"]):has(.frame-cutout:hover,.frame-cutout:focus-visible){transform:none}}

.frame-cutout[data-meme-post="save"]{background:#fb5f17;border:2px solid #140b04;color:#140b04}
.frame-cutout[data-meme-post="save"] :is([data-quit-picture],.frame-cutout__art){visibility:hidden}
.frame-cutout[data-meme-post="save"] .c-btn__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(12px,1.6cqw,28px)/1 var(--t-font-display)}
html[data-device="phone"] .frame-cutout[data-meme-post="save"] .c-btn__label{font-size:3.5cqw}
.q-arcade-slot .q-arcade-long-label { display:flex;flex-direction:column;white-space:nowrap;line-height:1.15; }