/* First paint: floors hold their height before their frames arrive and the hero paints its
   drawn parts at once (design notes round one, note 1). */

/* The device choice, as runtime/quit/frame-boot.js and main.js make it (and
   tools/quit-site/renditions.mjs states it for srcset): phone below 768 px wide, on a tall
   tablet, or on a touch screen with a short viewport (a phone turned to landscape keeps the
   phone composition, note 8). Once frame-boot has chosen, the host carries the choice. */
:root{--quit-hero-s1:min(calc(71vh / 1060),calc((100vw - 300px) / 1890));--quit-column:480px}

/* 1. Every scene's box has its final height from the first paint, before its template is
   chosen and before any image: the host carries both compositions' proportions
   (tools/quit-site/render.mjs). A host whose scene was replaced (the arcade machines) takes
   its content's height. */
[data-quit-frame-host]:is(:empty,:has(>.frame-surface)){aspect-ratio:var(--host-aspect-desktop,auto)}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4),(pointer:coarse) and (max-height:500px){
 [data-quit-frame-host]:is(:empty,:has(>.frame-surface)){aspect-ratio:var(--host-aspect-phone,auto)}
}
[data-quit-frame-host][data-frame-choice="desktop"]:is(:empty,:has(>.frame-surface)){aspect-ratio:var(--host-aspect-desktop,auto)}
[data-quit-frame-host][data-frame-choice="phone"]:is(:empty,:has(>.frame-surface)){aspect-ratio:var(--host-aspect-phone,auto)}
/* The desktop SEND IT hero is its own size (runtime/quit/frames.css .q-hero): the monitor and
   deck at the stage's scale. 100vw stands in for the hero's container width before it exists. */
@media (min-width:768px) and (not ((max-width:1199px) and (max-aspect-ratio:3/4))) and (not ((pointer:coarse) and (max-height:500px))){
 [data-floor-section="game"]>[data-quit-frame-host]:empty{aspect-ratio:auto;min-height:calc(1412 * var(--quit-hero-s1))}
}
[data-floor-section="game"]>[data-quit-frame-host]:has(>.q-hero){aspect-ratio:auto;min-height:calc(1412 * var(--quit-hero-s1))}

/* The arcade's machines (runtime/arcade/cabinet) replace its scene and stand taller than the frame:
   the host reserves their mounted height from the first paint, so no floor below the arcade moves
   when they mount and the header's floor links land where they aim (DESIGN round two, A1).
   Measured on build ten: desktop 0.5733 w + 48 px (1280 to 2560 wide), phones 3.069 w + 475 px
   (360 to 430 wide); wider phones and tablets are re-aimed by main.js instead. */
[data-floor-section="arcade"]{container-type:inline-size}
html:not([data-device="phone"]) [data-floor-section="arcade"]>[data-quit-frame-host]{min-height:calc(57.33cqw + 48px)}
@media (max-width:480px){html[data-device="phone"] [data-floor-section="arcade"]>[data-quit-frame-host]{min-height:calc(306.9cqw + 475px)}}

/* Floors below the first screen are laid out, painted and given their lazy art only as they come
   near: their boxes keep the height above, so nothing moves when they do. */
[data-floor-section]:not([data-floor-section="game"])>[data-quit-frame-host]:has(>.frame-surface){content-visibility:auto}

/* 2. The phone composition in landscape (note 8): centred at a phone's width rather than
   stretched across the screen. tools/quit-site/renditions.mjs sizes its images to match. */
@media (orientation:landscape) and (max-width:767px),(pointer:coarse) and (max-height:500px){
 html:not([data-device="desktop"]) [data-quit-frame-host]{width:min(100%,var(--quit-column));margin-inline:auto}
}
@media (orientation:landscape){
 html[data-device="phone"] [data-quit-frame-host]{width:min(100%,var(--quit-column));margin-inline:auto}
 /* The community block between the floors keeps to the same column, stacked as on the phone. */
 html[data-device="phone"] .q-community{max-width:var(--quit-column);grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}
}

/* 2b. The remaining loading picture is a subdued hint of the floor. Multiplying by
   dark green keeps a tiny stretched thumbnail from looking like the finished art. */
[data-quit-frame-host]{background-color:#28372e;background-blend-mode:multiply;background-repeat:no-repeat;background-image:var(--lqip-desktop,none);background-size:var(--lqip-size-desktop,100% 100%);background-position:var(--lqip-pos-desktop,0 0)}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4),(pointer:coarse) and (max-height:500px){
 [data-quit-frame-host]{background-image:var(--lqip-phone,none);background-size:var(--lqip-size-phone,100% 100%);background-position:var(--lqip-pos-phone,0 0)}
}
[data-quit-frame-host][data-frame-choice="desktop"]{background-image:var(--lqip-desktop,none);background-size:var(--lqip-size-desktop,100% 100%);background-position:var(--lqip-pos-desktop,0 0)}
[data-quit-frame-host][data-frame-choice="phone"]{background-image:var(--lqip-phone,none);background-size:var(--lqip-size-phone,100% 100%);background-position:var(--lqip-pos-phone,0 0)}

/* 3. Plates show immediately after decoding. Each layer fades in independently. */
[data-quit-frame-host] .frame-surface{background:#0a0d0b}
[data-quit-frame-host]:not([data-quit-scene="shown"]) .frame-surface{opacity:0!important}
[data-quit-frame-host] .frame-surface :is(.frame-layer img:where(:not([data-show-mount] *)),.frame-cutout__art){transition:opacity .18s ease-out}
[data-quit-frame-host] .frame-surface :is(.frame-layer img:where(:not([data-show-mount] *)),.frame-cutout__art)[data-quit-decoded="pending"]{opacity:0!important}
/* The SEND IT hero keeps its drawn parts on screen while its art arrives: only the art waits. */
[data-floor-section="game"]>[data-quit-frame-host]:not([data-quit-scene="shown"]) .frame-surface{opacity:1!important}
[data-floor-section="game"]>[data-quit-frame-host] .frame-image[data-quit-decoded="pending"]{opacity:0!important}

/* 4. The hero's drawn parts, painted from the stylesheet in the first frame and covered by
   the art when it fades in (they sit under the plate). Frame pixels are in the surface's
   container units: 100cqw is the frame's width (2736 desktop, 1536 phone). */
[data-floor-section="game"] .frame-surface::before,[data-floor-section="game"] .frame-surface::after{content:"";position:absolute;z-index:-1;pointer-events:none}
/* Desktop monitor and deck: the bezel, the deck plate and its ALL TIME HIGH screen. */
[data-floor-section="game"] .frame-surface[data-frame="desktop-game"][data-hero-part="left"]::before{left:.731cqw;top:.146cqw;width:68.567cqw;height:51.1cqw;border-radius:1.2cqw;
 background:linear-gradient(#06100d,#06100d) 2.303cqw 42.215cqw/19.882cqw 6.724cqw no-repeat,linear-gradient(#152a1d,#152a1d) 2.193cqw 42.105cqw/20.102cqw 6.944cqw no-repeat,
  linear-gradient(#262b27,#262b27) .146cqw 40.863cqw/68.421cqw .15cqw no-repeat,linear-gradient(#141715,#101311) .146cqw 40.863cqw/68.421cqw 10.088cqw no-repeat,
  linear-gradient(#1a1d1b,#121513) 0 0/100% 40.716cqw no-repeat;box-shadow:inset 0 0 0 .11cqw #2c312d}
/* The LIVE BUYS column: its panel, and the drawn title until the lettering arrives. */
[data-floor-section="game"] .frame-surface[data-frame="desktop-game"][data-hero-part="feed"]::before{left:69.883cqw;top:.219cqw;width:29.678cqw;height:51.17cqw;border-radius:.6cqw;background:#070f0c;box-shadow:inset 0 0 0 .11cqw #232924}
[data-floor-section="game"] .frame-surface[data-frame="desktop-game"][data-hero-part="feed"]::after{content:"LIVE BUYS"/"";left:70.906cqw;top:1.974cqw;width:16.447cqw;height:2.997cqw;display:flex;align-items:center;font:700 2.45cqw/1 var(--t-font-display,"Silkscreen",monospace);letter-spacing:.05em;color:#ee5614;text-shadow:.1cqw .1cqw 0 #3a1003;white-space:nowrap}
/* Phone: the deck plate with its ALL TIME HIGH screen, the LIVE BUYS panel and its title. */
[data-floor-section="game"] .frame-surface[data-frame="phone-game"]::before{left:1.823cqw;top:73.828cqw;width:96.354cqw;height:94.27cqw;
 background:linear-gradient(#070f0c,#070f0c) .2cqw 38.09cqw/calc(100% - .4cqw) 55.98cqw no-repeat,linear-gradient(#232924,#232924) 0 37.89cqw/100% 56.38cqw no-repeat,
  linear-gradient(#06100d,#06100d) 1.953cqw 2.213cqw/92.448cqw 9.245cqw no-repeat,linear-gradient(#152a1d,#152a1d) 1.823cqw 2.083cqw/92.708cqw 9.505cqw no-repeat,
  linear-gradient(#141715,#101311) 0 0/100% 37.89cqw no-repeat;border-radius:.8cqw}
[data-floor-section="game"] .frame-surface[data-frame="phone-game"]::after{content:"LIVE BUYS"/"";left:3.906cqw;top:113.281cqw;width:30.99cqw;height:5.208cqw;display:flex;align-items:center;font:700 4.3cqw/1 var(--t-font-display,"Silkscreen",monospace);letter-spacing:.05em;color:#ee5614;text-shadow:.15cqw .15cqw 0 #3a1003;white-space:nowrap}
/* The stage screen: dark glass behind the labelled WARM-UP line (the multiplier slot's label
   and the caption are live text above it). It fades as the stage art fades in. */
[data-floor-section="game"] .q-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:2.4% / 3.6%;
 background:radial-gradient(120% 95% at 50% 38%,#11211a 0%,#09140f 55%,#040907 100%);box-shadow:inset 0 0 0 .18cqw #1d2823,inset 0 0 4cqw #000;transition:opacity .45s ease-out}
[data-floor-section="game"]>[data-quit-frame-host][data-quit-scene="shown"] .q-stage::before{opacity:0}
/* BUY, EJECT and CHEER as drawn plates, under their cut-out art. Their names stay on the
   cut-out's own label for assistive technology (the drawn lettering has empty alt text). */
[data-floor-section="game"] .frame-cutout:is([data-region="game.buy"],[data-region="game.eject"],[data-region="game.cheer"])::before{position:absolute;z-index:-1;pointer-events:none;display:flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;font-family:var(--t-font-display,"Silkscreen",monospace);font-weight:700;letter-spacing:0}
[data-floor-section="game"] .frame-cutout[data-region="game.buy"]::before{content:"BUY $QUIT"/"";left:3%;right:3.5%;top:9%;bottom:24%;border-radius:.55cqw;background:linear-gradient(#ff7a2a,#ec520e 55%,#d9470a);box-shadow:0 .55cqw 0 #8a2704,inset 0 .1cqw 0 #ffb27a;font-size:2.7cqw;color:#170a03}
[data-floor-section="game"] .frame-cutout:is([data-region="game.eject"],[data-region="game.cheer"])::before{left:16%;top:5%;width:68%;height:66%;border-radius:50%;font-size:1.05cqw}
[data-floor-section="game"] .frame-cutout[data-region="game.eject"]::before{content:"EJECT"/"";background:radial-gradient(circle at 42% 34%,#ff5a45,#d71c16 58%,#a3120c);box-shadow:0 .62cqw 0 #6e0c07,0 .62cqw 0 .42cqw #1c1e1c;color:#3d0604}
[data-floor-section="game"] .frame-cutout[data-region="game.cheer"]::before{content:"CHEER"/"";background:radial-gradient(circle at 42% 34%,#4fe373,#12a83a 58%,#0b7a28);box-shadow:0 .62cqw 0 #075219,0 .62cqw 0 .42cqw #1c1e1c;color:#062e12}
[data-floor-section="game"] .frame-surface[data-frame="phone-game"] .frame-cutout[data-region="game.buy"]::before{left:1%;right:1%;top:3%;bottom:16%;border-radius:1cqw;box-shadow:0 1.2cqw 0 #8a2704,inset 0 .2cqw 0 #ffb27a;font-size:5.6cqw}
[data-floor-section="game"] .frame-surface[data-frame="phone-game"] .frame-cutout:is([data-region="game.eject"],[data-region="game.cheer"])::before{left:12%;top:2%;width:76%;height:72%;font-size:2.4cqw;box-shadow:0 1.1cqw 0 #3a0b07,0 1.1cqw 0 .8cqw #1c1e1c}
[data-floor-section="game"]>[data-quit-frame-host][data-quit-scene="shown"] .frame-cutout::before{visibility:hidden;transition:visibility 0s .45s}
/* LIVE BUYS: seven rows in the drawn row style, empty until data. The rule under each row
   stays for a row without a buy; the faint placeholders show only until the page is ready. */
[data-quit-trade-row]:empty{background:linear-gradient(#0d4521,#0d4521) 0 93%/100% 1.8% no-repeat}
[data-device="phone"] [data-quit-trade-row]:empty{background:linear-gradient(#0a582d,#0a582d) 0 99%/100% 2.2% no-repeat}
html:not([data-quit-ready]) [data-quit-trade-row]:empty{background:linear-gradient(#0d4521,#0d4521) 0 93%/100% 1.8% no-repeat,
 radial-gradient(closest-side,#0f2a1c 86%,transparent 100%) 7.4% 40.9%/12% 56% no-repeat,
 linear-gradient(#0c2217,#0c2217) 31.6% 17.9%/21% 22% no-repeat,linear-gradient(#0c2217,#0c2217) 29.8% 59%/16% 22% no-repeat,
 linear-gradient(#0c2217,#0c2217) 64.4% 17.9%/10% 22% no-repeat,linear-gradient(#0c2217,#0c2217) 85.3% 59%/32% 22% no-repeat}
html[data-device="phone"]:not([data-quit-ready]) [data-quit-trade-row]:empty{background:linear-gradient(#0a582d,#0a582d) 0 99%/100% 2.2% no-repeat,
 radial-gradient(closest-side,#0f2a1c 86%,transparent 100%) 3.3% 50%/8% 70% no-repeat,
 linear-gradient(#0c2217,#0c2217) 20.5% 25.7%/23% 25% no-repeat,linear-gradient(#0c2217,#0c2217) 20.2% 73.3%/16% 25% no-repeat,
 linear-gradient(#0c2217,#0c2217) 52.2% 50%/9% 30% no-repeat,linear-gradient(#0c2217,#0c2217) 87.8% 50%/26% 30% no-repeat}

/* 5. The show takes the stage only once it has drawn (note 1: never black once a scene has
   been painted). Until main.js marks the mount data-quit-show-painted, the show's box stays
   invisible and the drawn stage art stays (frames.css hides that art once the stage is
   mounted); the drawn characters sit above the stage, so they fade out only once the show has
   faded in under them. */
/* (The painted layers' rules never reach into the show itself: on the phone the show mounts inside the painted stage
   layer, and its overlay's pictures, a cameo's inset and the mouth shapes, were hidden with the painted art: an empty
   black inset, FINAL10 for QA8 F1.) */
[data-show-mount]>.show{transition:opacity .4s ease-out}
[data-show-mount]:not([data-quit-show-painted])>.show{opacity:0;pointer-events:none}
.frame-surface:has([data-show="mounted"]:not([data-quit-show-painted])) [data-show-art] img:where(:not([data-show-mount] *)){visibility:visible}
.frame-surface:has([data-quit-show-painted]) [data-show-art] img:where(:not([data-show-mount] *)){opacity:0!important;transition:opacity .25s ease-out .4s,visibility 0s .65s}

/* Content that arrives above the reader (the community block, the arcade machines) does not push
   what they are reading: scroll anchoring, which the shared theme turns off, is on for the QUIT
   pages that hold scenes. */
html:has([data-quit-frame-host]){overflow-anchor:auto}

/* 6. The community below SEND IT mounts beside ready (runtime/quit/main.js). Until main.js
   says it mounted or never will (data-quit-community), the part of its box the first screen
   shows is held, so nothing in view moves when it arrives (display overrides the components'
   [hidden] rule, which is important; the block stays invisible and out of the reading order). */
html:not([data-quit-community]) .q-community[hidden]{display:block!important;visibility:hidden;padding:0;min-height:max(0px,calc(100vh - var(--t-header-desktop,70px) - 1412 * var(--quit-hero-s1)))}
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4),(pointer:coarse) and (max-height:500px){
 html:not([data-quit-community]) .q-community[hidden]{min-height:max(0px,calc(100vh - var(--t-header-phone,62px) - 100vw * 2600 / 1536))}
}

@media (prefers-reduced-motion:reduce){
 [data-quit-frame-host] .frame-surface,[data-quit-frame-host] .frame-surface :is(.frame-image,.frame-layer img:where(:not([data-show-mount] *)),.frame-cutout__art),[data-floor-section="game"] .q-stage::before,[data-show-mount]>.show,.frame-surface:has([data-quit-show-painted]) [data-show-art] img:where(:not([data-show-mount] *)){transition:none}
}

/* The cabinet room supplies its own first plate, so hidden fallback layers wait for a mount failure. */
[data-quit-frame-host][data-quit-scene="held"]>.frame-surface{display:none}