/* Scorchpit on the kit HUD: hud.css gives the vocabulary (dark chunky panels, Tiny5, mono numbers, pill tabs);
   this file sets the club's one accent (matchstick red), turns off the kit's glows, lays the world out as a
   full-bleed hero with the panel beside it, and styles the sections under the fold in the same vocabulary. */
:root {
  --accent: #d2311b; --accent-dim: #6b2a1e; --num: #f3e9cf; --gold: #f3e9cf; --up: #d2311b; --teal: #c9b78e; --warn: #e3b53a;
  --cream: #f3e9cf; --cream-2: #c9b78e;
}
html, body { overflow: auto; height: auto; }
body { background: var(--bg); color: var(--text); font: 15px/1.4 var(--sans); }
a { color: inherit; }
.hide { display: none !important; }
.logo { text-transform: uppercase; text-shadow: 0 2px #4a1a10; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; }
.logo img { width: 26px; height: 26px; vertical-align: -4px; margin-right: 8px; border-radius: 5px; }
.lv-hero { background: var(--card); }
.lv-hero h2 em { text-shadow: 2px 2px #3d0f0a; }
.btn.big { box-shadow: 0 3px #7a1d10; }
.btn.big:active { box-shadow: 0 1px #7a1d10; }
.btn.primary:hover { filter: brightness(1.08); }
.dot { box-shadow: none; }
.live-dot { background: var(--accent); box-shadow: 0 0 #d2311b99; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px #d2311b00 } to { box-shadow: 0 0 #d2311b00 } }
.tabs button.on .live-dot { background: #6b1a10; }
.tk-lbl { color: var(--accent); }
.tk-i u { color: var(--num); }
.tk-i u.sol { color: var(--warn); }
.tk-i u.bad { color: var(--down); }
.tag { color: #cfc8b4; border-color: #4a423a; }
.tag.house { color: #96937a; border-color: #3a352e; }
.tag.live { color: var(--accent); border-color: #6b2a1e; }
.tag.money { color: var(--warn); border-color: #5a4418; }
.tag.bad { color: var(--down); border-color: #6b2a24; }
.lv-d.line { border-left-color: var(--accent); }
.lv-d.money { border-left-color: var(--warn); }
.lv-d.bad { border-left-color: var(--down); }
.lv-d.room { border-left-color: #5a524a; }
.lv-pt canvas { image-rendering: pixelated; }
.chip.xlink svg { width: 14px; height: 14px; fill: currentColor; }

.chip.ca { font: 600 12.5px var(--mono); }
.chip.ca .lbl { color: var(--accent); font: 700 12px var(--pix); letter-spacing: 1px; }
.chip.ca { cursor: pointer; }
.chip.ca.copied { border-color: var(--accent); }
.chip.primary { background: var(--accent); color: #12110f; border-color: var(--accent); font: 700 15px var(--pix); }
.chip.nav { font: 700 14px var(--pix); color: #cfc8b4; }
.chip.nav.on, .chip.nav:hover { color: var(--text); border-color: var(--accent); }

/* ---- the world as the hero, the panel beside it ---- */
.stagewrap { position: relative; }
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }
.hero #game { position: absolute; inset: 0; width: 100%; height: 100%; }
#ui { position: absolute; inset: 0; z-index: 5; }
.stagewrap .panel { position: absolute; top: 82px; bottom: 12px; right: 12px; z-index: 6; }
.panel .tabs .pclose { flex: 0 0 30px; }
.tl { right: 760px; }
.tl .brand { flex-wrap: nowrap; width: auto; }
.tl .logo { flex: none; white-space: nowrap; }
.chip.explain { min-width: 0; flex: 0 1 auto; cursor: default; }
[hidden] { display: none !important; }
.tr { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 24px); }
.leftcol { z-index: 6; }

/* live tab */
.lv-kick-t { flex: 1; }
.lv-hero h2 { font-size: 21px; }
.lv-hero h2 em { color: var(--accent); font-style: normal; }
.stage-line { color: var(--muted2); font: 500 12px var(--sans); margin: -4px 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stage-line b { font: 700 14px var(--mono); color: var(--num); }
.stage-line b.hot { color: var(--accent); }
.pots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.pot { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.pot.winner { border-color: var(--accent); }
.pot .side { color: var(--muted); font: 600 11px var(--pix); letter-spacing: .5px; display: flex; justify-content: space-between; gap: 6px; }
.pot .side .tag { padding: 1px 4px 0; font-size: 10px; }
.pot .who { font: 700 14px var(--pix); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pot .who.empty { color: var(--muted2); }
.pot .amt { font: 700 18px var(--mono); color: var(--num); margin-top: 2px; }
.pot .amt small { font: 600 11px var(--sans); color: var(--muted2); margin-left: 4px; }
.pot .bar { margin-top: 6px; }
.pot .bar u { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, #a8260f 6px 8px); }
.pot .ch { color: var(--muted2); font-size: 11px; margin-top: 4px; min-height: 1.2em; }
.lv-cta .btn { white-space: nowrap; }
.lv-nowallet { color: var(--muted2); }
.lv-nowallet b { color: var(--text); font-weight: 600; }

/* the vote deck under a pot (watch page); wiring unchanged */
.deck { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.deck .closed { color: var(--accent); font: 700 11px var(--pix); letter-spacing: .5px; padding: 2px 0; }
.deck .sub { color: var(--muted2); font-size: 11px; margin: 2px 0 6px; }
.addr { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; min-width: 0; background: var(--card); }
.addr code { flex: 1; min-width: 0; font: 11px var(--mono); padding: 7px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr button { border: 0; border-left: 1px solid var(--line); background: var(--panel2); color: var(--text); padding: 0 9px; font: 700 11px var(--pix); cursor: pointer; }
.addr button.copied { background: var(--accent); color: #12110f; }
.deck .row { display: flex; gap: 6px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.deck input[type=number] { width: 70px; height: 28px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0 6px; font: 12px var(--mono); border-radius: 6px; }
.deck .msg { font: 11px var(--mono); color: var(--muted2); margin-top: 6px; min-height: 1.2em; }
.deck .msg.red { color: var(--down); }
.ledger { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; font: 10.5px var(--mono); }
.ledger div { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; border-bottom: 1px solid #38322d80; }
.ledger .st { color: var(--muted); text-transform: uppercase; }
.ledger .st.late { color: var(--down); }
.room-fine { color: var(--muted2); font-size: 11.5px; line-height: 1.4; margin: 8px 0 0; }
.room-fine b { color: var(--text); font-weight: 600; }

/* transcript (watch) */
.lines { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lines .wait q { color: var(--muted2); font-style: italic; }
.lines .cur { display: inline-block; width: 7px; height: 11px; background: var(--accent); vertical-align: -1px; margin-left: 1px; animation: 1s steps(2) infinite blinkc; }
@keyframes blinkc { to { visibility: hidden; } }

/* selected agent card */
.agentcard { display: flex; gap: 10px; background: var(--card); border: 1px solid var(--accent-dim); border-radius: 10px; padding: 10px; margin: 0 0 10px; align-items: flex-start; }
.agentcard canvas { image-rendering: pixelated; flex: none; border-radius: 6px; background: var(--panel2); }
.agentcard b { font: 700 15px var(--pix); }
.agentcard .rec { font: 600 12px var(--mono); color: var(--num); }
.agentcard small { display: block; color: var(--muted2); font-size: 11.5px; margin-top: 2px; }
.agentcard .x { margin-left: auto; color: var(--muted); background: 0 0; border: 0; font-size: 16px; cursor: pointer; }

/* lists: card, board */
.lv-lb li > i { width: 40px; color: var(--muted2); font: 700 12px var(--mono); font-style: normal; }
.lv-lb li .lv-n b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-lb li .lv-n b em { color: var(--accent); font-style: normal; margin: 0 5px; font-size: 11px; }
.lv-lb li .num { font: 600 12px var(--mono); color: var(--num); white-space: nowrap; }
.lv-lb li .num small { color: var(--muted2); font: 500 10.5px var(--sans); }
.lv-lb li.live { border-color: var(--accent-dim); }
.lv-lb li.won b { color: var(--text); }
.lv-lb li .lv-pt { width: 26px; height: 26px; }
.lv-empty b { color: var(--text); }

/* enter form */
.form label { display: block; color: var(--muted); font: 600 11px var(--pix); letter-spacing: .5px; margin: 10px 0 4px; }
.form label:first-child { margin-top: 0; }
.form input[type=text] { width: 100%; height: 36px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0 10px; font: 13px var(--mono); border-radius: 7px; outline: 0; box-sizing: border-box; }
.form input[type=text]:focus { border-color: var(--accent); }
.form input::placeholder { color: var(--muted); }
.form .hint { color: var(--muted2); font-size: 11.5px; margin-top: 4px; }
.form .err { color: var(--down); font-size: 12px; margin-top: 8px; min-height: 1.2em; font-weight: 600; }
.form .btn { margin-top: 10px; }
.form .done b { font: 700 20px var(--pix); display: block; margin: 4px 0 8px; }
.prompt { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: 11.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; margin-top: 10px; }
.prompt .k { color: var(--accent); }
.prompt-row { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.rules { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rules li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted2); font-size: 12px; line-height: 1.35; }
.rules li i { background: var(--accent); color: #12110f; width: 18px; height: 18px; font: 700 12px/18px var(--pix); text-align: center; border-radius: 5px; flex: none; font-style: normal; }
.rules li b { color: var(--text); font-weight: 600; }

/* ---- under the fold ---- */
.sec { max-width: 1240px; margin: 0 auto; padding: 40px 16px 8px; }
.sec h2 { font: 700 26px var(--pix); color: var(--accent); margin: 0 0 4px; text-shadow: 0 2px #3d0f0a; }
.sec .note { color: var(--muted2); font-size: 13px; margin: 0 0 14px; }
.sec .note a { color: var(--text); }
.sec .lv-lb { gap: 6px; }
.sec .lv-lb li { padding: 9px 12px; }
.sec .lv-lb li > i { width: 56px; font-size: 14px; }
.sec .lv-lb li .lv-n b { font-size: 15px; }
.sec .lv-lb li .lv-n small { font-size: 12px; }
.sec .lv-lb li .num { font-size: 14px; }
.sec .lv-lb li .lv-pt { width: 34px; height: 34px; }
.sec .lv-lb li .lv-pt canvas { max-width: 30px; max-height: 30px; }
.howgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.howgrid .rule { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.howgrid .rule i { display: block; font: 700 26px var(--pix); color: var(--accent); font-style: normal; margin-bottom: 6px; }
.howgrid .rule p { margin: 0; font-size: 13px; color: #cfc8b4; line-height: 1.4; }
.howgrid .rule p b { color: var(--text); font: 700 13px var(--mono); }
.doorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doorgrid > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.doorgrid .form input[type=text] { background: var(--panel); }
.doorgrid h3 { font: 700 15px var(--pix); margin: 0 0 10px; color: var(--text); }
.plaque .stats-grid { grid-template-columns: repeat(4, 1fr); margin: 0; }
.plaque .kpi b { font-size: 20px; }
.plaque .fine { color: var(--muted2); font-size: 12.5px; line-height: 1.45; margin: 10px 0 0; }
.plaque .fine b { color: var(--text); font-weight: 600; }
footer { max-width: 1240px; margin: 36px auto 0; padding: 18px 16px 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; align-items: center; color: var(--muted2); font-size: 12.5px; }
footer .fb { font: 700 18px var(--pix); color: var(--accent); text-transform: uppercase; }
footer .fb .tk { color: var(--muted2); font: 600 12px var(--mono); margin-left: 8px; }
footer nav a { margin-right: 14px; text-decoration: none; color: var(--text); font: 600 12.5px var(--pix); }
footer nav a:hover { color: var(--accent); }
footer .treasury { width: 100%; font: 11px var(--mono); color: var(--muted); word-break: break-all; }

/* ---- phone: the world on top, the HUD stacked under it as tabs ---- */
@media (width <= 960px) {
  .howgrid { grid-template-columns: repeat(2, 1fr); }
  .doorgrid { grid-template-columns: 1fr; }
  .plaque .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tl { right: 12px; }
  .chip.nav.long { display: none; }
}
@media (width <= 760px) {
  .hero { height: 55svh; min-height: 380px; }
  .stagewrap .panel { position: static; width: auto; height: auto; max-height: none; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; background: var(--panel); }
  .stagewrap .panel .pbody { overflow: visible; }
  .leftcol { display: none; }
  .tl { top: 32px; left: 8px; right: 8px; }
  .tr { top: 66px; right: 8px; left: 8px; justify-content: flex-start; }
  .chip.explain, .tr .livepill { display: none; }
  /* the logotype keeps the top row (Sign on at its right end); the info chips sit on one row along the foot of the room,
     clear of the logotype, the neon sign and the stage */
  .tl { right: 86px; }
  #ui > .tr { top: 32px; bottom: 8px; left: 8px; right: 8px; max-width: none; gap: 5px; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; align-content: flex-end; pointer-events: none; }
  #ui > .tr > * { pointer-events: auto; }
  #ui > .tr > .chip.primary { position: absolute; top: 0; right: 0; }
  .lv-stats { grid-template-columns: repeat(3, 1fr); }
  .sec { padding: 28px 16px 4px; }
  .sec .lv-lb li > i { width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lines .cur { animation: none; } }