@import url("../quit/altitude.css");
/* The broadcast frame (SHOW-Q amendment 1, item 1) in the approved $QUIT look
   (send-it-r2-quit r3/game-cubicle-v2 and the house tokens of
   coins/quit/ui/theme.json): a 90s arcade cabinet, charcoal bezels with
   bevelled metal edges and corner screws, CRT screens with scanlines, the
   Silkscreen display face with hard offset shadows, the IBM Plex Mono body face,
   phosphor green, safety orange, warm white and a little signal red. Every
   box is placed by runtime/broadcast/layout.js; this file only dresses them.
   No page chrome, no cursor, no scrollbars. */
:root {
  --b-black: var(--t-black, #030805);
  --b-ink: var(--t-ink, #f4e7cb);
  --b-orange: var(--t-orange, #ff610b);
  --b-green: var(--t-green, #25dc71);
  --b-red: var(--t-red, #ff6860);
  --b-metal: var(--t-metal, #333a32);
  --b-metal-light: var(--t-metal-light, #656853);
  --b-screen: var(--t-screen, #040c09);
  --b-panel: var(--t-paper, #08110e);
  --b-charcoal: #1a1f1a;
  --b-shadow: #020504;
  --b-orange-shadow: #4a2010;
  --b-gold: #f6b82f;
  --b-display: "Silkscreen", "QuitPixel", monospace;
  --b-body: var(--t-font-body);
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--b-black); cursor: none; }
html { scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
* { box-sizing: border-box; cursor: none !important; }
.b-frame { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; background: var(--b-black); color: var(--b-ink); font-family: var(--b-body); user-select: none; -webkit-font-smoothing: none; }
.b-frame img { image-rendering: pixelated; }

/* ---------------------------------------------------------------- cabinet */
.b-program { background: #050b08; }
/* the phone line: a strip low in the screen, left of the ladder; empty while the line is closed */
.b-callin { z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
.b-callin .q-callin-line { background: rgba(4, 9, 7, 0.88); border: 2px solid var(--b-green); }
.b-bezel {
  background: var(--b-charcoal);
  border: 3px solid var(--b-metal);
  border-top-color: var(--b-metal-light);
  border-left-color: var(--b-metal-light);
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px var(--b-black), inset 0 0 0 6px #232722, 4px 6px 0 var(--b-shadow);
}
.b-screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--b-metal-light); border: 2px solid #232722; }
.b-screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 2px; background: #232722; transform: rotate(45deg); }
.b-screw--tl { left: 4px; top: 4px; }
.b-screw--tr { right: 4px; top: 4px; }
.b-screw--bl { left: 4px; bottom: 4px; }
.b-screw--br { right: 4px; bottom: 4px; }

/* ---------------------------------------------------------------- the screen */
.b-screen { overflow: hidden; border-radius: 22px; background: var(--b-screen); border: 2px solid var(--b-metal); isolation: isolate; }
.b-stage { position: absolute; inset: 0; z-index: 1; }
.b-stage .show { width: 100%; height: 100%; aspect-ratio: auto; }
/* no vote on the broadcast (the owner's order of 23 Oct 2026 took WHAT HAPPENS NEXT off it): the stage's own poll strip stays off */
.b-stage .show-poll { display: none !important; }
.b-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.b-crt { position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: 20px;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.14) 3px, rgba(0, 0, 0, 0.14) 4px);
  box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.04); }

/* the multiple since launch, the caption strip, the WARM-UP label */
.b-mult { display: flex; align-items: flex-start; }
.b-mult__x { font: 700 128px/1 var(--b-display); color: var(--b-orange); letter-spacing: -2px; white-space: nowrap;
  text-shadow: 3px 3px 0 #9c3c08, 6px 6px 0 #6a2606, 9px 9px 0 #3a1404, 11px 11px 0 #1a0b04; }
.b-mult[data-len="6"] .b-mult__x { font-size: 112px; }
.b-mult[data-len="7"] .b-mult__x { font-size: 96px; }
.b-mult[data-len="8"] .b-mult__x, .b-mult[data-len="9"] .b-mult__x { font-size: 80px; }
.b-caption, .b-warmup { display: flex; align-items: flex-start; }
.b-caption__text { display: inline-block; max-width: 100%; padding: 8px 14px 9px; background: var(--b-black); color: var(--b-ink); font: 700 22px/1.25 var(--b-display); white-space: nowrap; overflow: hidden; text-overflow: clip; box-shadow: 3px 4px 0 var(--b-shadow); }
.b-caption__text:empty { display: none; }
.b-warmup__text { display: inline-block; padding: 6px 12px 7px; background: var(--b-orange); color: var(--b-black); font: 700 20px/1.2 var(--b-display); box-shadow: 3px 4px 0 var(--b-shadow); }
/* a playing film's picture under a HUD box (hud.js, data-show-film): the box hides at once until the film ends */
.b-mult[data-film="1"], .b-caption[data-film="1"], .b-warmup[data-film="1"], .b-moments[data-film="1"] { opacity: 0; transition: none; }

/* The cut-art instrument is shared with the game via quit/altitude.css. */

/* power-up, boost and event cards */
.b-moments { display: flex; justify-content: flex-end; align-items: flex-start; }
.b-frame[data-layout="vertical"] .b-moments { justify-content: flex-start; }
.b-moment { max-width: 100%; padding: 10px 16px 12px; background: var(--b-black); border: 3px solid var(--b-orange); border-radius: 8px; box-shadow: 4px 6px 0 var(--b-shadow); opacity: 0; transform: translateY(-12px); transition: opacity 160ms steps(4), transform 160ms steps(4); }
.b-moment[data-on="1"] { opacity: 1; transform: none; }
.b-moment.is-in { animation: b-moment-in 360ms steps(6) both; }
@keyframes b-moment-in { 0% { transform: translateY(-14px) scale(0.92); } 60% { transform: translateY(0) scale(1.04); } 100% { transform: none; } }
.b-moment__kicker { font: 700 16px/1.1 var(--b-display); color: var(--b-green); }
.b-moment__title { margin-top: 4px; font: 700 40px/1 var(--b-display); color: var(--b-orange); text-shadow: 3px 4px 0 var(--b-orange-shadow); white-space: nowrap; }
.b-moment__line { margin-top: 6px; font: 400 26px/1 var(--b-body); color: var(--b-ink); }
.b-moment__sol { margin-top: 4px; font: 700 16px/1 var(--b-display); color: var(--b-green); }
.b-moment__sol:empty { display: none; }
.b-moment[data-kind="promotion"] { border-color: var(--b-gold); }
.b-moment[data-kind="promotion"] .b-moment__title { color: var(--b-gold); }
.b-moment[data-kind="paper_hands"] { border-color: var(--b-red); }
.b-moment[data-kind="paper_hands"] .b-moment__title { color: var(--b-red); text-shadow: 3px 4px 0 #3a0d0a; }
.b-moment[data-kind="afterburner"] { border-color: var(--b-orange); animation: b-burn 280ms steps(2) infinite; }
.b-moment[data-kind="the_president"], .b-moment[data-kind="elon_orbit"], .b-moment[data-kind="mars_landing"] { border-color: var(--b-green); }
@keyframes b-burn { 50% { border-color: var(--b-gold); } }

/* ---------------------------------------------------------------- the tape (layout.js tape)
   LAST BUYS along the foot of the show, outside the screen: the owner's order of 23 Oct 2026 took the deck's modules and
   the Break Room off the broadcast and kept the live buys. The tape is one deck module in THE FLIGHT's dress (S1, 22 Oct
   2026), in exactly the box the deck took: the screen-dark panel, its metal edge and inner shade, the deck's drop shadow,
   LAST BUYS in the module title's face, then the three newest buys. Each buy is its buyer at the left and its amount at
   the right with its comic tag under them. Row (landscape): the buys in three equal columns, a metal rule between them.
   Stack (vertical, a phone's page): the buys one under another, a metal rule between them. No word under 22 px. */
.b-tape { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--b-screen); border: 2px solid var(--b-metal); border-radius: 10px; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 4px 6px 0 var(--b-shadow); overflow: hidden; color: var(--b-green); z-index: 2; }
.b-tape::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.16) 3px, rgba(0, 0, 0, 0.16) 4px); }
.b-tape__title { flex: none; display: flex; align-items: center; min-height: 30px; margin: 0; font: 700 26px/1.1 var(--b-display); color: var(--b-orange); text-shadow: 2px 3px 0 var(--b-orange-shadow); white-space: nowrap; }
.b-tape__buys { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.b-buy { display: grid; grid-template-columns: 36px minmax(0, max-content) minmax(16px, 1fr) max-content; grid-template-areas: "tier who . sol" ". tag tag tag"; align-items: center; align-content: center; column-gap: 12px; row-gap: 10px; min-width: 0; padding: 0 24px; font: 400 34px/1 var(--b-body); color: var(--b-green); }
.b-buy:first-child { padding-left: 0; }
.b-buy:last-child { padding-right: 0; }
.b-buy + .b-buy { border-left: 2px solid var(--b-metal); }
.b-buy .b-tier { grid-area: tier; width: 36px; height: 24px; }
.b-buy__who { grid-area: who; }
.b-buy__sol { grid-area: sol; color: var(--b-ink); text-align: right; }
.b-buy__tag { grid-area: tag; font-size: 28px; color: var(--b-ink); opacity: 0.8; }
/* A buyer label never wraps (a wrapped label overprinted the next row), and the comic tag ends in an ellipsis instead
   of squeezing the label (hud.js cuts it at a whole word first). */
.b-buy > * { min-width: 0; }
.b-buy__who, .b-buy__sol, .b-buy__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-buy[data-tier="whale"] { color: var(--b-orange); }
.b-buy[data-tier="sell"] { color: var(--b-red); }
.b-tape__none { grid-column: 1 / -1; align-self: center; font: 400 34px/1 var(--b-body); color: var(--b-green); opacity: 0.8; }
.b-tape[data-arrange="stack"] { gap: 12px; }
.b-tape[data-arrange="stack"] .b-tape__title { font-size: 30px; }
.b-tape[data-arrange="stack"] .b-tape__buys { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
.b-tape[data-arrange="stack"] .b-buy { grid-template-columns: 42px minmax(0, max-content) minmax(16px, 1fr) max-content; padding: 0; font-size: 40px; }
.b-tape[data-arrange="stack"] .b-buy + .b-buy { border-left: 0; border-top: 2px solid var(--b-metal); }
.b-tape[data-arrange="stack"] .b-buy .b-tier { width: 42px; height: 28px; }
.b-tape[data-arrange="stack"] .b-buy__tag { font-size: 32px; }
.b-tape[data-arrange="stack"] .b-tape__none { font-size: 40px; }

/* ---------------------------------------------------------------- the stream's capture (?stream=1, html data-stream 1)
   stream-connect F9 (20 Oct): the picture reaches pump.fun as 4 Mbps H.264 and most viewers see it scaled down. The 3 to
   4 px scanlines over the whole frame are the hardest detail an encoder meets. The stream draws no scanlines; visitors'
   previews keep the CRT dress. */
html[data-stream="1"] .b-crt, html[data-stream="1"] .b-tape::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .b-moment, .b-moment.is-in { animation: none !important; transition: none !important; }
}

.b-back{position:fixed;left:12px;top:max(12px,env(safe-area-inset-top));z-index:1000;padding:10px 14px;border:2px solid #25dc71;background:#030805;color:#f4e7cb;font:18px var(--t-font-body);cursor:pointer!important;text-decoration:none}.b-back:focus-visible{outline:3px solid #ff610b;outline-offset:3px}
/* the stream's capture (?stream=1, main.js data-stream): no return link over the stage; viewers cannot click it */
html[data-stream="1"] .b-back{display:none}
/* the site's skip link (runtime/quit/frames.css), a visitor's first Tab (navigation.js, audit SWEEP-12); never in the stream's capture */
.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:1001;top:0;left:0;padding:12px;background:#fff;color:#000;font:18px var(--t-font-body)}
html[data-stream="1"] .q-skip{display:none}

/* ---------------------------------------------------------------- a visitor's page (main.js visitorPage, audit 22 Oct
   2026; none of it in the stream's capture). BACK TO $QUIT and SOUND keep a band above the frame, never over the show
   (COMM-13); SOUND is the header's toggle in the return link's dress (COMM-07). While the show loads, the stage holds the
   page's share picture and LOADING (SWEEP-15). On a phone (html data-visitor-fit phone) the page scrolls: the tape
   follows the stage at up to twice its size (layout.js visitorFit) and the two controls scroll away with the page. */
.b-sound { position: fixed; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); z-index: 1000; padding: 10px 14px; border: 2px solid #25dc71; border-radius: 0; background: #030805; color: #f4e7cb; font: 18px var(--t-font-body); cursor: pointer !important; }
.b-sound[hidden] { display: none; }
.b-sound:focus-visible { outline: 3px solid #ff610b; outline-offset: 3px; }
html[data-stream="1"] .b-sound { display: none; }
html[data-visitor-fit="phone"] { overflow-x: hidden; overflow-y: auto; }
html[data-visitor-fit="phone"] body { height: auto; overflow: visible; }
html[data-visitor-fit="phone"] .b-back, html[data-visitor-fit="phone"] .b-sound { position: absolute; }
.b-poster { position: absolute; inset: 0; z-index: 2; background: var(--b-screen); pointer-events: none; }
.b-frame .b-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; image-rendering: auto; }
.b-frame[data-layout="vertical"] .b-poster img { object-fit: contain; object-position: 50% 50%; }
.b-loading { position: absolute; left: 50%; bottom: 28px; margin: 0; transform: translateX(-50%); padding: 6px 12px 7px; background: var(--b-black); border: 2px solid var(--b-green); border-radius: 4px; color: var(--b-green); font: 700 20px/1.2 var(--b-display); white-space: nowrap; box-shadow: 3px 4px 0 var(--b-shadow); }

/* stream-connect F10 (integrator, 20 Oct) hid the show's quitter picture-in-picture box on the stream until it took the
   dock tile; it still fetched and decoded the whole reel there. The reel now plays only on the caller's own card, as a
   light rendition (owner order, 23 Oct 2026, 17:10). */