@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 VT323 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: "VT323", monospace;
}
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; }
.b-chatzone { background: #040907; }
.b-bezel, .b-chat, .b-deck {
  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-deck { border-radius: 12px; }
.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; }
/* the deck draws WHAT HAPPENS NEXT for stream viewers; the stage's own poll strip would repeat it */
.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 deck */
.b-mod { 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); overflow: hidden; color: var(--b-green); z-index: 2; }
.b-mod::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-mod__head { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.b-mod__title { min-width: 0; margin: 0; font: 700 18px/1.1 var(--b-display); color: var(--b-orange); text-shadow: 2px 3px 0 var(--b-orange-shadow); white-space: normal; overflow: visible; }
.b-mod__icon { width: 48px; height: 48px; margin: -8px 0 -8px -4px; flex: none; }
.b-mod__foot { position: absolute; left: 14px; right: 14px; bottom: 10px; font: 700 16px/1 var(--b-display); color: var(--b-ink); white-space: nowrap; overflow: hidden; }
.b-chip { margin-left: auto; flex: none; padding: 4px 7px 5px; border: 2px solid currentColor; border-radius: 4px; font: 700 14px/1 var(--b-display); color: var(--b-green); }
.b-chip[data-state="warmup"] { color: var(--b-orange); }
.b-chip[data-state="stale"] { color: var(--b-red); }
.b-chip[data-state="live"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--b-red); animation: b-blink 1s steps(1) infinite; }
.b-chip[hidden] { display: none; }
@keyframes b-blink { 50% { opacity: 0; } }

/* THE FLIGHT */
.b-flight__band { margin-top: 8px; font: 400 26px/1 var(--b-body); color: var(--b-ink); white-space: nowrap; }
.b-flight__ath { margin-top: 4px; font: 700 18px/1 var(--b-display); color: var(--b-green); white-space: nowrap; }
.b-flight__buys-title { margin-top: 8px; font: 700 14px/1 var(--b-display); color: var(--b-orange); }
.b-flight__buys { list-style: none; margin: 4px 0 0; padding: 0; }
.b-buy { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; font: 400 22px/1 var(--b-body); color: var(--b-green); height: 22px; }
.b-buy .b-tier { width: 24px; height: 16px; }
.b-buy__sol { text-align: right; color: var(--b-ink); }
/* A row is one 22 px line: the buyer label never wraps (a wrapped label overprinted the next row), and in the vertical
   layout the comic tag takes what is left and ends in an ellipsis instead of squeezing the label. */
.b-buy > * { min-width: 0; }
.b-buy__who, .b-buy__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-buy__tag { display: none; }
.b-buy[data-tier="whale"] { color: var(--b-orange); }
.b-buy[data-tier="sell"] { color: var(--b-red); }
.b-flight__none { font: 400 22px/1 var(--b-body); color: var(--b-green); opacity: 0.8; }

/* CORNER OFFICE and the billboard */
.b-office__name { margin-top: 10px; font: 700 26px/1.1 var(--b-display); color: var(--b-ink); white-space: nowrap; overflow: hidden; }
.b-office__name:empty { display: none; }
.b-office__meta { margin-top: 4px; font: 400 24px/1 var(--b-body); color: var(--b-green); white-space: nowrap; overflow: hidden; }
.b-office__meta-row { display:flex; align-items:center; gap:8px; margin-top:4px; min-height:27px; }
.b-office__meta-row .b-office__meta { margin-top:0; min-width:0; }
.b-office__billboard { margin-top: 8px; display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.b-office__billboard-label { font: 700 14px/1 var(--b-display); color: var(--b-orange); flex: none; }
.b-office__billboard-who { font: 400 24px/1 var(--b-body); color: var(--b-ink); overflow: hidden; }
.b-office__billboard[data-state="none"] .b-office__billboard-label { display: none; }

/* WHAT HAPPENS NEXT */
.b-poll__votes { margin-left: auto; font: 400 22px/1 var(--b-body); color: var(--b-green); white-space: nowrap; }
/* one line: the countdown wraps out of sight when the site's address leaves it no room, never half shown */
.b-poll__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 10px; height: 28px; }
.b-poll__foot .b-chip { margin-left:0; }
.b-poll__foot > :empty { display:none; }
.b-poll__time { font: 400 22px/1 var(--b-body); color: var(--b-green); white-space: nowrap; }
/* landscape: every deck footer one 14 px line whole inside its module (QA8 F2: "CHEER AT QUITYOURJOB.FU" lost its last
   letter at 16 px); community-hud.js shrinks a footer on that still does not fit, and in WHAT HAPPENS NEXT stands the
   countdown, then the vote count, down (data-fit="out") when the site's address and the chip leave them no room */
.b-frame[data-layout="landscape"] .b-mod__foot { font-size: 14px; }
.b-poll__foot > [data-fit="out"] { display: none; }
.b-frame .b-poll__list { margin-top: 4px; gap: 2px; }
.b-frame[data-layout="landscape"] .b-poll__list { margin-top: 2px; gap: 0; }
.b-poll__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.b-poll__opt { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font: 400 22px/1 var(--b-body); color: var(--b-ink); }
.b-poll__label { white-space: nowrap; overflow: hidden; }
.b-poll__pct { color: var(--b-green); }
.b-poll__bar { grid-column: 1 / -1; height: 6px; margin-top: 2px; background: #10261b; position: relative; }
.b-poll__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pct, 0) * 1%); background: var(--b-green); }
.b-poll__opt[data-winner="1"] { color: var(--b-orange); }
.b-poll__opt[data-winner="1"] .b-poll__bar::after { background: var(--b-orange); }
.b-poll__note { margin-top: 8px; font: 400 24px/1 var(--b-body); color: var(--b-green); white-space: nowrap; overflow: hidden; }

/* OFFICE MORALE */
.b-morale__meter { display: flex; gap: 3px; height: 30px; margin-top: 12px; padding: 3px; border: 2px solid var(--b-metal); background: #06120c; }
.b-morale__seg { flex: 1; background: #10261b; }
.b-morale__seg[data-on="1"] { background: var(--b-green); }
.b-morale__meter[data-state="surge"] .b-morale__seg[data-on="1"] { background: var(--b-orange); animation: b-burn-seg 240ms steps(2) infinite; }
.b-morale__meter[data-state="unknown"] { opacity: 0.6; }
@keyframes b-burn-seg { 50% { background: var(--b-gold); } }
.b-morale__state { margin-top: 8px; font: 400 24px/1 var(--b-body); color: var(--b-green); white-space: nowrap; overflow: hidden; }
.b-morale__meter[data-state="surge"] + .b-morale__state { font: 700 18px/1 var(--b-display); color: var(--b-orange); }
.b-morale__state[data-state="warmup"] { font: 700 18px/1 var(--b-display); color: var(--b-orange); }

/* ---------------------------------------------------------------- THE BREAK ROOM */
.b-chat { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; z-index: 2; }
.b-chat__head { display: flex; align-items: center; gap: 10px; }
.b-chat__title { margin: 0; font: 700 20px/1 var(--b-display); color: var(--b-orange); text-shadow: 2px 3px 0 var(--b-orange-shadow); white-space: nowrap; }
.b-chat__screen { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 12px 10px; background: var(--b-screen); border: 2px solid var(--b-metal); border-radius: 14px; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55); overflow: hidden; }
.b-chat__screen::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-chat__list { list-style: none; margin: 0; padding: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; overflow: hidden; }
.b-chat__note { margin: 10px 0 0; font: 400 24px/1.1 var(--b-body); color: var(--b-orange); text-align: center; }
.b-chat__note:empty { display: none; }
.b-msg { flex: none; }
.b-msg.is-new { animation: b-msg-in 280ms steps(5) both; }
@keyframes b-msg-in { from { transform: translateX(-18px); opacity: 0; } }
.b-msg__who { display: flex; align-items: center; gap: 5px; min-height: 24px; white-space: nowrap; overflow: hidden; }
.b-emblem { width: 24px; height: 24px; flex: none; }
.b-msg__name { font: 700 16px/1 var(--b-display); color: var(--b-orange); overflow: hidden; text-overflow: clip; }
.b-msg__ranks { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; margin-top: 3px; }
.b-msg__rank, .b-msg__title { font: 400 14px/1 var(--b-display); color: var(--b-green); white-space: nowrap; }
.b-msg__title { color: var(--b-ink); opacity: 0.85; }
.b-frame[data-layout="vertical"] .b-msg { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.b-frame[data-layout="vertical"] .b-msg__ranks { margin-top: 0; }
.b-frame[data-layout="vertical"] .b-msg__text, .b-frame[data-layout="vertical"] .b-msg__meme { grid-column: 1 / -1; }
.b-msg[data-cast="1"] .b-msg__name { color: var(--b-green); }
.b-msg__text { margin: 3px 0 0; font: 400 26px/1.05 var(--b-body); color: var(--b-ink); overflow-wrap: anywhere; }
.b-msg__meme { margin: 6px 0 0; }
.b-msg__meme img { display: block; max-width: 100%; max-height: 180px; border: 3px solid var(--b-ink); border-radius: 6px; image-rendering: auto; }
.b-msg__meme figcaption { margin-top: 4px; font: 400 22px/1 var(--b-body); color: var(--b-ink); }
.b-chat__join { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.b-chat__qr { flex: none; line-height: 0; border-radius: 4px; overflow: hidden; }
.b-chat__join-text { margin: 0; min-width: 0; font: 700 16px/1.3 var(--b-display); color: var(--b-ink); }

/* the office ranks legend while the chat has no lines */
.b-legend { margin-bottom: auto; display: grid; gap: 10px; }
.b-legend[hidden] { display: none; }
.b-legend__title { margin: 8px 0 0; font: 700 18px/1 var(--b-display); color: var(--b-orange); }
.b-legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.b-legend__row { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 10px; row-gap: 2px; }
.b-legend__name { font: 700 16px/1 var(--b-display); color: var(--b-ink); white-space: nowrap; overflow: hidden; }
.b-legend__how { grid-column: 2; font: 400 24px/1 var(--b-body); color: var(--b-green); }
.b-legend__how:empty { display: none; }
.b-legend__note { margin: 4px 0 0; font: 400 22px/1.1 var(--b-body); color: var(--b-ink); opacity: 0.85; }
.b-legend__group { display: grid; gap: 9px; align-content: start; }
/* landscape: the full legend (7 ranks with their holdings, 4 titles, the note) and a chat note fit the screen */
.b-frame[data-layout="landscape"] .b-legend { gap: 8px; }
.b-frame[data-layout="landscape"] .b-legend__list, .b-frame[data-layout="landscape"] .b-legend__group { gap: 5px; }
.b-frame[data-layout="landscape"] .b-legend__row { row-gap: 1px; }
.b-frame[data-layout="landscape"] .b-legend__how { font-size: 21px; }
.b-frame[data-layout="landscape"] .b-legend__note { font-size: 20px; }
.b-frame[data-layout="vertical"] .b-legend { gap: 8px; }
.b-frame[data-layout="vertical"] .b-legend__group { gap: 6px; }
.b-frame[data-layout="vertical"] .b-legend__title { margin-top: 0; font-size: 16px; }
.b-frame[data-layout="vertical"] .b-legend__list { column-gap: 10px; row-gap: 6px; }
.b-frame[data-layout="vertical"] .b-legend__group--ranks .b-legend__list { grid-template-columns: repeat(4, 1fr); }
.b-frame[data-layout="vertical"] .b-legend__group--titles .b-legend__list { grid-template-columns: repeat(2, 1fr); }
.b-frame[data-layout="vertical"] .b-legend__name { font-size: 14px; }
.b-frame[data-layout="vertical"] .b-legend__how { font-size: 22px; }
.b-frame[data-layout="vertical"] .b-legend__group--ranks .b-legend__how { display: none; }
.b-frame[data-layout="vertical"] .b-legend__note { font-size: 20px; }

/* ---------------------------------------------------------------- vertical: chat across the bottom fifth */
.b-frame[data-layout="vertical"] .b-chat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 10px; }
.b-frame[data-layout="vertical"] .b-chat__head { grid-column: 1; grid-row: 1; }
.b-frame[data-layout="vertical"] .b-chat__screen { grid-column: 1; grid-row: 2; }
.b-frame[data-layout="vertical"] .b-chat__join { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; justify-content: center; max-width: 180px; text-align: center; }
.b-frame[data-layout="vertical"] .b-mod__title { font-size: 22px; }
.b-frame[data-layout="vertical"] .b-buy__tag { display: block; color: var(--b-ink); opacity: 0.8; }
.b-frame[data-layout="vertical"] .b-buy { grid-template-columns: 28px minmax(max-content, 1fr) auto minmax(0, max-content); }
.b-frame[data-layout="vertical"] .b-msg__meme img { max-height: 120px; }

@media (prefers-reduced-motion: reduce) {
  .b-moment, .b-moment.is-in, .b-msg.is-new, .b-chip::before, .b-morale__seg { 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 "VT323",monospace;cursor:pointer!important;text-decoration:none}.b-back:focus-visible{outline:3px solid #ff610b;outline-offset:3px}