/* The navigation car has a readable scrolling floor panel at every size. */
[data-skin="arcade"] .c-header[data-quit-navigation]{display:flex;gap:14px;padding-inline:20px;align-items:center}
.c-header[data-quit-navigation] .c-header__brand{margin-right:auto;flex-shrink:0}
.c-header[data-quit-navigation] .c-header__brand img{width:150px;height:auto;max-width:calc(298px / var(--quit-dpr,1))}
.c-header[data-quit-navigation] .q-elevator-call{order:1;flex:0 0 110px;width:110px;min-width:110px;height:48px;padding:0;margin:0;background:none;border:0;cursor:pointer}
.c-header[data-quit-navigation] .q-elevator-call>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:filter .12s,transform .12s}
.c-header[data-quit-navigation] .q-elevator-call:hover>img,.c-header[data-quit-navigation] .q-elevator-call[aria-expanded="true"]>img{filter:brightness(1.35)}
.c-header[data-quit-navigation] .q-elevator-call:active>img{transform:translateY(2px)}
.c-header[data-quit-navigation] .q-elevator-call:focus-visible{outline:3px solid #ffe36b;outline-offset:2px}
.c-header[data-quit-navigation]>.c-sound{order:2}
.c-header[data-quit-navigation]>.c-header__buy{order:3;min-width:180px;min-height:48px}
.q-elevator{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:24px;background:#020503df;color:#efebce;overflow:hidden;overscroll-behavior:contain;box-sizing:border-box}
.q-elevator::backdrop{background:transparent}
.q-elevator[open]{display:grid;place-items:center}
.q-menu-car{position:relative;display:flex;flex-direction:column;width:min(1120px,100%);height:min(900px,100%);min-height:0;overflow:hidden;background:#222620 url('/runtime/quit/elevator-art/steel.png') repeat;border:7px solid #31372d;border-radius:20px;box-shadow:0 0 0 3px #060908,inset 0 0 0 3px #8b8970,0 18px 50px #000}
.q-menu-bar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;flex:none;padding:20px}
.q-menu-indicator{display:flex;flex:1;min-width:0;min-height:54px;align-items:center;justify-content:center;padding:10px 20px;background:none;border:8px solid transparent;border-image:url('/runtime/quit/elevator-art/plate.png') 110 130 fill / 8px 12px / 0 stretch;color:#25dc71;font:400 clamp(15px,2.1vw,24px)/1.1 var(--t-font-display);text-align:center}
.q-menu-close{flex:0 0 98px;min-height:48px;border:0;padding:8px;background:none;border:8px solid transparent;border-image:url('/runtime/quit/elevator-art/plate.png') 110 130 fill / 8px 12px / 0 stretch;color:#25dc71;font:400 15px/1 var(--t-font-display);cursor:pointer}
.q-menu-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;flex:1;min-height:0;padding:0 18px}
.q-menu-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-content:start;min-width:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#b3a67a #10150e;padding:5px 8px 14px 5px;scroll-padding:8px}
.q-menu-floor{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;min-height:62px;border:0;padding:10px 12px;color:#e8dfbb;font:400 17px/1.05 "VT323",monospace;text-align:left;background:none;border:8px solid transparent;border-image:url('/runtime/quit/elevator-art/plate.png') 110 130 fill / 8px 12px / 0 stretch;cursor:pointer;transition:filter .12s,transform .12s}
.q-menu-floor{font-size:22px}
.q-menu-number{display:flex;flex:0 0 40px;align-items:center;justify-content:center;min-height:40px;border-radius:50%;color:#100e08;background:#c6bb85;box-shadow:0 0 0 3px #090e0a,0 0 0 5px #696a54;font-weight:700;font-size:17px}
.q-menu-name{overflow-wrap:anywhere;line-height:1.08}
.q-menu-floor:hover{filter:brightness(1.25);transform:translateY(-1px)}
.q-menu-floor:active{transform:translateY(2px)}
.q-menu-floor:focus-visible,.q-menu-close:focus-visible{outline:3px solid #ffe36b;outline-offset:1px}
.q-menu-floor[data-elevator-current]{filter:brightness(1.22) drop-shadow(0 0 3px #25dc71);box-shadow:inset 0 0 0 2px #25dc71;border-radius:8px}
.q-menu-floor[data-elevator-current] .q-menu-number{background:#25dc71;box-shadow:0 0 0 3px #090e0a,0 0 10px #25dc71}
.q-menu-floor[data-elevator-selected]{filter:brightness(1.3) drop-shadow(0 0 4px #ff9b32)}
.q-menu-floor[data-elevator-refused]{filter:drop-shadow(0 0 4px #ff4f37)}
.q-menu-scene{min-width:0;min-height:0;overflow:hidden;border:4px solid #0b0f0a;border-radius:12px;background:#151911}
.q-menu-scene>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.q-menu-note{flex:none;text-align:center;margin:0;padding:14px 16px;font:400 17px/1.1 "VT323",monospace;color:#ddd4ac}
.q-menu-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.q-menu-doors{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:12px}
.q-menu-leaf{position:absolute;inset:0;width:50.2%;background:#44483d url('/runtime/quit/elevator-art/steel.png') repeat;box-shadow:inset -4px 0 0 #090d08,inset -8px 0 0 #a09975;transform:translateX(-102%)}
.q-menu-leaf[data-side="right"]{left:auto;right:0;transform:translateX(102%);box-shadow:inset 4px 0 0 #090d08,inset 8px 0 0 #a09975}
.q-menu-car[data-landing]{background:none;border-color:transparent;box-shadow:none}
/* X and TELEGRAM (BC02, launch audit 19 Oct 2026): the site's own accounts, a row under the indicator on the plate CLOSE uses.
 They are Button components (c-btn) bound by owner-links.js, not floors, and never ride. Owner order 19 Oct 2026 ("more
 pronounced", "add the logos"): 56 px, a bigger label, the selected floor's green ring and a green glow drawn as box-shadow
 (no filter, so the official marks keep their published colours), each mark left of its label. */
.q-menu-join{display:flex;flex:none;justify-content:flex-end;gap:14px;padding:0 20px 14px}
.q-elevator .q-menu-join .c-btn[data-variant]{flex:0 0 auto;gap:10px;min-width:150px;min-height:56px;margin:0;padding:8px 22px;border:8px solid transparent;border-radius:8px;border-image:url('/runtime/quit/elevator-art/plate.png') 110 130 fill / 8px 12px / 0 stretch;background:none;box-shadow:inset 0 0 0 2px #25dc71,0 0 12px rgba(37,220,113,.6);color:#25dc71;font:400 19px/1 var(--t-font-display);letter-spacing:.02em;text-shadow:none;transition:box-shadow .12s,transform .12s}
.q-elevator .q-menu-join .c-btn[data-variant]:hover:not([aria-disabled="true"]){box-shadow:inset 0 0 0 2px #25dc71,0 0 18px rgba(37,220,113,.85);transform:translateY(-1px)}
.q-elevator .q-menu-join .c-btn[data-variant]:active:not([aria-disabled="true"]){transform:translateY(2px)}
.q-elevator .q-menu-join .c-btn[aria-disabled="true"]{color:#7d8c7f;box-shadow:none;filter:none;opacity:1}
.q-elevator .q-menu-join .c-btn:focus-visible{outline:3px solid #ffe36b;outline-offset:1px}
/* The official marks (owner-marks.js), never stretched: X in white on the dark plate (X allows its mark only in black or
 white), Telegram in its own blue disc with the white plane. */
.q-owner-mark{flex:none;display:block;width:24px;height:24px}
.q-elevator .q-menu-join [data-owner-mark="x"]{color:#fff}
/* The join call to action outside the MENU (the guide row, the Break Room box): the site's bright green, filled, dark label
 (about 10:1), the arcade hard shadow and a green glow; X in black on the green, Telegram as published. */
:root .q-join-cta.c-btn[data-variant]{--c-fill:#25dc71;--c-text:#04130a;gap:12px;min-width:220px;min-height:60px;padding:10px 26px;border:3px solid #04130a;border-radius:10px;background:#25dc71;color:#04130a;box-shadow:0 5px 0 #0b5a2c,0 0 18px rgba(37,220,113,.45);font:400 21px/1 var(--t-font-display);letter-spacing:.02em;text-shadow:none}
:root .q-join-cta.c-btn[data-variant]:hover:not([aria-disabled="true"]){background:#4bf08e;transform:translateY(-2px)}
:root .q-join-cta.c-btn[data-variant]:active:not([aria-disabled="true"]){transform:translateY(3px);box-shadow:0 2px 0 #0b5a2c,0 0 12px rgba(37,220,113,.45)}
:root .q-join-cta.c-btn[aria-disabled="true"]{background:#2f4a38;color:#c9d6cb;box-shadow:none;filter:none;opacity:1}
:root .q-join-cta.c-btn:focus-visible{outline:3px solid #ffe36b;outline-offset:3px}
.q-join-cta .q-owner-mark{width:28px;height:28px}
.q-join-cta [data-owner-mark="x"]{color:#000}
/* The Break Room box's TELEGRAM (community.js, BC02): the same Button outside the MENU. Kept here, not in community.css,
 while another lane holds that file on launch day; it can move there after T0. */
.q-community-soon .q-community-soon__telegram{margin-top:14px}
@media(max-width:767px){
 [data-skin="arcade"] .c-header[data-quit-navigation]{gap:5px;padding-inline:8px}
 .c-header[data-quit-navigation] .c-header__brand img{width:82px}
 .c-header[data-quit-navigation] .q-elevator-call{flex-basis:74px;width:74px;min-width:74px;height:44px}
 .c-header[data-quit-navigation]>.c-header__buy{min-width:108px;min-height:44px;font-size:13px}
 .q-elevator{padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
 .q-menu-car{width:100%;height:100%;border-width:5px;border-radius:13px}
 .q-menu-bar{padding:8px;gap:6px}
 .q-menu-indicator{min-height:48px;padding:8px;font-size:13px}
 .q-menu-close{flex-basis:68px;min-height:44px;font-size:12px}
 .q-menu-body{display:flex;flex-direction:column-reverse;gap:8px;padding:0 7px}
 .q-menu-scene{flex:0 0 130px;border-width:2px}
 .q-menu-scene>img{object-position:50% 20%}
 .q-menu-panel{grid-template-columns:minmax(0,1fr);flex:1;gap:6px;padding:4px 8px 12px 4px}
 .q-menu-floor{min-height:60px;font-size:21px;max-width:370px;justify-self:center}
 .q-menu-floor{font-size:21px;padding:8px 12px}
 .q-menu-note{padding:9px 7px;font-size:14px}
 .q-menu-join{gap:8px;padding:0 8px 8px}
 .q-elevator .q-menu-join .c-btn[data-variant]{flex:1 1 0;min-width:0;min-height:52px;padding:6px 8px;gap:8px;font-size:15px}
 .q-elevator .q-menu-join .q-owner-mark{width:22px;height:22px}
}
@media(max-width:359px){
 [data-skin="arcade"] .c-header[data-quit-navigation]{padding-inline:5px;gap:4px}
 .c-header[data-quit-navigation] .c-header__brand img{width:66px}
 .c-header[data-quit-navigation] .q-elevator-call{width:66px;min-width:66px;flex-basis:66px}
 .c-header[data-quit-navigation]>.c-header__buy{min-width:106px;font-size:12px}
 .q-menu-scene{flex-basis:92px}
 .q-menu-floor{font-size:18px}
}
@media(max-height:500px){.q-elevator{padding:8px}.q-menu-bar{padding:6px 10px}.q-menu-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.q-menu-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.q-menu-scene{display:block}.q-menu-note{padding:6px}.q-menu-floor{min-height:54px}.q-menu-floor:not([data-drawn]){font-size:16px;padding:10px}.q-menu-number{flex-basis:24px;font-size:16px;min-height:24px}}
@media(max-height:500px){.q-menu-join{padding:0 10px 6px}.q-elevator .q-menu-join .c-btn[data-variant]{flex:0 0 auto;min-width:130px;min-height:48px}}
@media(prefers-reduced-motion:reduce){.q-menu-floor,.q-elevator-call>img,.q-elevator .q-menu-join .c-btn[data-variant],:root .q-join-cta.c-btn[data-variant]{transition:none}.q-menu-floor:hover,.q-menu-floor:active,.q-elevator .q-menu-join .c-btn[data-variant]:hover,.q-elevator .q-menu-join .c-btn[data-variant]:active,:root .q-join-cta.c-btn[data-variant]:hover,:root .q-join-cta.c-btn[data-variant]:active{transform:none}}
/* Phones get one stream entry. There runtime/quit/stream-links.js sends WATCH THE STREAM to /broadcast/vertical, so
   WATCH VERTICAL would open the same page twice (audit-a5 G11, owner order AUD-D15). Same query as STREAM_PHONE. */
@media (max-width: 767px), (max-width: 1199px) and (max-aspect-ratio: 3/4){.q-menu-floor[data-floor="broadcast-vertical"]{display:none}}
