/* The styles of stage.html, in a file of their own so the page stays small (tools/page-assets.js). */
@font-face { font-family: "Hacked"; src: url("/fonts/HACKED.woff2?v=c2b61b1d67") format("woff2"), url("/fonts/HACKED.ttf?v=db3080d82f") format("truetype"); font-display: swap; }
:root {
  --bg: #050006; --ink: #fff; --dim: rgba(255,255,255,.68); --ghost: rgba(255,255,255,.45); --dead: rgba(255,255,255,.22);
  --pink: #ff2492; --hot: #ff67bd; --green: #7dff2b; --mint: #caffab; --cyan: #00ffd5; --violet: #9a3cff; --gold: #fffd78;
  --panel: rgba(18,5,28,.86); --line: rgba(255,36,146,.28); --toxic: #39ff14;
  --cut-sm: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Hacked", Impact, "Arial Black", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
/* scrollbars in the casino's colours, never the browser's white */
* { scrollbar-width: thin; scrollbar-color: rgba(255,36,146,.4) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,36,146,.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,36,146,.6); }
::-webkit-scrollbar-button { display: none; height: 0; }
/* Nothing on the page scrolls as a whole: a phone's web view scrolled it to show the chat's input once the keyboard
   was up, and it jumped back a frame later, the flicker Linus saw (2026-10-26); clip, unlike hidden, cannot be
   scrolled at all */
html, body { margin: 0; height: 100%; overflow: clip; }
.in-discord .site-header { display: none; }
body {
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% 20%, rgba(154,60,255,.25), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255,36,146,.18), transparent 55%), var(--bg);
  color: var(--ink); font-family: var(--sans);
}
button, input { font: inherit; color: inherit; }
/* A tap is a tap at once: no waiting to see whether it is a double tap that zooms */
button, input, textarea, label, a { touch-action: manipulation; }
/* Phones (Linus, 2026-10-26: "it feels very unresponsive"): a blur behind something that moves, her sprite, is
   drawn again every frame, and a glowing shadow that pulses repaints its whole box every frame; on a phone they
   cost the taps their speed and, on iPhones, leave white tiles where the memory ran out. Plain panels instead. */
@media (pointer: coarse) {
  .scene .up .soft { display: none !important; }
  .sprite .panel, .site-header, .tut { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sprite .panel { background: rgba(16,4,24,.86); }
  body.talk-here .chatpanel, body.talk-here .chatslot:not(.open), .qbeg { animation: none !important; }
}

/* the page: [chat | game | side] on monitors, the game alone on phones */
.page { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.wide .panel { max-width: 420px; }
.stagebox { position: relative; flex: 0 0 auto; }
.panel { display: none; flex: 1 1 0; min-width: 0; flex-direction: column; background: var(--panel); border: 1px solid var(--line); }
.wide .panel { display: flex; }
.wide .panel.side.hidden { display: none; }
.panel h2 { margin: 0; padding: 12px 14px; font: 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--hot); border-bottom: 1px solid var(--line); }

/* the game screen, scaled to fit (fit() sets --k and its size) */
.screen {
  position: absolute; left: 0; top: 0; overflow: hidden; transform: scale(var(--k, 1)); transform-origin: 0 0;
  background: #0a0310; user-select: none; -webkit-user-select: none;
}
.tall .screen { width: 540px; height: 960px; }
.wide .screen { width: 960px; height: 540px; }
/* The game reaches the page's bottom on a window taller than it (Linus, 2026-10-30: "expand the game area so more
   thing can fit"). fit() sets --xh, the height it gained: a panel that can use the room grows by it, a block of a
   fixed size moves down by half of it and stays in the middle of the table */
.screen { --xh: 0px; --xm: calc(var(--xh) / 2); }

.vyevid { position: absolute; object-fit: cover; }
.tall .vyevid { left: 0; top: 0; width: 540px; height: 405px; }
.wide .vyevid { left: 240px; top: 0; width: 480px; height: 360px; }
.vye-fade { position: absolute; pointer-events: none; background: linear-gradient(to bottom, transparent, #12051c 92%); }
.tall .vye-fade { left: 0; top: 250px; width: 540px; height: 160px; }
.wide .vye-fade { left: 240px; top: 240px; width: 480px; height: 125px; }
.wide .vye-side { position: absolute; top: 0; width: 240px; height: 360px; background: radial-gradient(ellipse at 50% 30%, #2a0d3d, #12051c 75%); }
.tall .vye-side { display: none; }

.say {
  position: absolute; max-width: 300px; padding: 10px 14px; border-radius: 14px 14px 14px 4px;
  background: rgba(10,3,16,.82); border: 1px solid rgba(255,36,146,.55); font-size: 17px; line-height: 1.35;
  box-shadow: 0 0 24px rgba(255,36,146,.25);
}
.tall .say { left: 18px; top: 18px; }
.wide .say { left: 18px; top: 22px; max-width: 210px; border-radius: 14px 14px 4px 14px; }
.say b { display: block; font: 700 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hot); margin-bottom: 3px; }
.say.pop { animation: pop .35s ease-out; }

.felt { position: absolute; background: radial-gradient(ellipse at 50% 0%, #2a0d3d, #12051c 70%); }
.tall .felt { left: 0; top: 405px; width: 540px; bottom: 0; }
.wide .felt { left: 0; top: 360px; width: 960px; height: 180px; }
.rule { position: absolute; text-align: center; font: 700 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--dead); }
.tall .rule { left: 0; right: 0; top: 509px; }
.wide .rule { left: 0; width: 240px; top: 300px; padding: 0 16px; line-height: 1.8; }

.hand { position: absolute; display: flex; justify-content: center; align-items: center; height: 120px; }
.tall .hand.dealer { left: 0; right: 0; top: 318px; }
.tall .hand.player { left: 0; right: 0; top: 548px; }
.wide .hand.dealer { left: 240px; width: 480px; top: 236px; }
.wide .hand.player { left: 60px; width: 420px; top: calc(392px + var(--xm)); }
.total {
  position: absolute; min-width: 46px; padding: 3px 10px; border-radius: 999px; transform: translateX(-50%);
  font: 800 15px var(--mono); text-align: center; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2);
}
.tall .total.dealer { left: 50%; top: 444px; }
.tall .total.player { left: 50%; top: 674px; }
.wide .total.dealer { left: 480px; top: 334px; }
.wide .total.player { left: 270px; top: calc(508px + var(--xm)); }
.total.bust { border-color: #ff4d6d; color: #ff8fa3; }
.total.jack { border-color: var(--gold); color: var(--gold); }
.label { position: absolute; font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ghost); }
.tall .label.player { left: 0; right: 0; text-align: center; top: 526px; }
.wide .label.player { left: 60px; width: 420px; text-align: center; top: calc(374px + var(--xm)); }

.card {
  position: relative; width: 78px; height: 112px; margin: 0 -10px; border-radius: 9px; background: #fbf6ff;
  box-shadow: 0 6px 18px rgba(0,0,0,.55); color: #1a1020; font-family: var(--sans);
}
.card.red { color: #e0115f; }
.card .r { position: absolute; left: 7px; top: 5px; font-weight: 800; font-size: 20px; line-height: 1; text-align: center; }
.card .r small { display: block; font-size: 15px; }
.card .s { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.card.back {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 5px, transparent 5px 10px),
    radial-gradient(circle at 50% 50%, var(--pink), #5b0a3a 75%);
  border: 3px solid #fbf6ff;
}
.card.back::after { content: "V"; position: absolute; inset: 0; display: grid; place-items: center; font: 32px var(--display); color: rgba(255,255,255,.85); }
.card.in { animation: deal .45s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--d, 0s); }
.card.flip { animation: flip .5s ease-in-out both; }

.status { position: absolute; text-align: center; font: 22px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tall .status { left: 0; right: 0; top: 704px; }
.wide .status { left: 520px; width: 400px; top: calc(392px + var(--xm)); }
.status.win { color: var(--green); text-shadow: 0 0 18px rgba(125,255,43,.6); }
.status.lose { color: var(--hot); text-shadow: 0 0 18px rgba(255,36,146,.6); }
.timer { position: absolute; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.tall .timer { left: 60px; right: 60px; top: 740px; }
.wide .timer { left: 560px; width: 320px; top: calc(428px + var(--xm)); }
.timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--violet)); }

.buttons { position: absolute; display: flex; justify-content: center; gap: 18px; }
.tall .buttons { left: 0; right: 0; top: 756px; }
.wide .buttons { left: 520px; width: 400px; top: calc(446px + var(--xm)); }
.btn {
  --btn-line: rgba(125,255,43,.64); --btn-bg: rgba(125,255,43,.12);
  position: relative; width: 190px; height: 70px; border: 1px solid var(--btn-line); color: var(--mint);
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 48%), var(--btn-bg);
  clip-path: var(--cut-sm); cursor: pointer; font: 22px var(--display); letter-spacing: .16em; text-transform: uppercase;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s;
}
.btn.stand { --btn-line: rgba(255,36,146,.72); --btn-bg: rgba(255,36,146,.15); color: #ffd1ee; }
/* three calls since the second deck: Hit A, Hit B, Stand */
.buttons .btn { width: 124px; font-size: 19px; letter-spacing: .1em; }
.tall .buttons .btn { width: 154px; }
.buttons .btn small { display: block; font: 10px var(--mono); letter-spacing: .06em; opacity: .7; }
.voters { position: absolute; text-align: center; font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wide .voters { left: 520px; width: 400px; top: calc(522px + var(--xm)); }
.tall .voters { left: 20px; right: 20px; top: 832px; }
.voters b { color: var(--ink); font-weight: 600; }
.tall.phase-playing .score { display: none; }
/* her whispers: only you read them */
.chat-tabs button.wh { border-color: rgba(57,255,20,.45); color: #b9ffa6; }
.chat-tabs button.wh.on { border-color: var(--toxic); color: var(--toxic); }
.chat-tabs button i { font-style: normal; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--toxic); color: #031; font-size: 10px; }
.chat-tabs button i:empty { display: none; }
.whispering .lines { background: repeating-linear-gradient(0deg, rgba(57,255,20,.035) 0 1px, transparent 1px 3px); }
/* unread whispers: the tab pulses toxic, and on phones the strip's head does too */
.chat-tabs button.wh.hot { color: #031; background: var(--toxic); border-color: var(--toxic); font-weight: 700; animation: infected .7s ease-in-out infinite alternate; }
.chat-tabs button.wh.hot i { background: #031; color: var(--toxic); font-size: 12px; padding: 0 6px; }
.chatslot.hot:not(.open) { border: 1px solid var(--toxic); animation: infected .7s ease-in-out infinite alternate; }
/* the toast over the game when she whispers to you; a tap opens the whispers */
.wtoast { position: absolute; left: 50%; top: 12%; z-index: 5; width: min(92%, 460px); transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--toxic); background: rgba(3,20,6,.94); color: #d6ffcc; cursor: pointer;
  font: 14px/1.35 var(--mono); box-shadow: 0 0 18px rgba(57,255,20,.45), 0 10px 30px rgba(0,0,0,.6); animation: whisperin .25s ease-out; }
.wtoast[hidden] { display: none; }
.wtoast.out { opacity: 0; transform: translate(-50%, -10px); transition: opacity .35s, transform .35s; }
.wtoast .sn { font-size: 22px; line-height: 1; }
.wtoast b { display: block; color: var(--toxic); font: 12px var(--display); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; text-shadow: 0 0 8px rgba(57,255,20,.7); }
.wtoast span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wtoast small { display: block; margin-top: 4px; color: rgba(185,255,166,.6); font-size: 11px; }
.wtoast .x { position: absolute; right: 6px; top: 4px; width: 22px; height: 22px; border: 0; background: none; color: rgba(185,255,166,.7); font-size: 16px; cursor: pointer; }
/* how long it stays, drawn along its bottom edge */
.wtoast .life { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(57,255,20,.6); transform-origin: left; }
.msg.wv .who { color: var(--toxic); }
.msg.wv .tx { color: #d6ffcc; }
.typing { color: var(--toxic); font: 12px var(--mono); opacity: .8; }
.btn .n { position: absolute; right: 12px; top: 6px; font: 800 13px var(--mono); letter-spacing: 0; opacity: .85; }
.btn.mine { box-shadow: inset 0 0 0 2px currentColor; background-color: rgba(255,255,255,.08); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .3; cursor: default; }

.score { position: absolute; display: flex; justify-content: center; gap: 22px; font: 12px var(--mono); color: var(--dim); }
.tall .score { left: 0; right: 0; top: 836px; }
.wide .score { display: none; }
.score b { color: var(--ink); }
/* V-Bits on a raffle with prizes: a pill at the top left, its panel under it */
/* The V-Bits and the chances sit at the bottom left of her picture, just above the table, and grow upwards:
   at the top they ran into her speech bubble, which grows left from her mouth (Linus 2026-10-23) */
.hud { position: absolute; left: 12px; z-index: 6; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; pointer-events: none; }
.wide .hud { bottom: calc(194px + var(--xh)); }
.tall .hud { bottom: 572px; }
.hud > * { pointer-events: auto; }
.wallet { position: relative; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.wallet[hidden] { display: none; }
/* While bets are open the button glows and says so (Linus: "not clear where people can spend vbits") */
.wallet.call .wl-pill { border-color: var(--gold); animation: wlGlow 1.6s ease-in-out infinite; }
@keyframes wlGlow { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 10px rgba(255,216,77,.35); }
  50% { box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 22px rgba(255,216,77,.95), 0 0 40px rgba(255,216,77,.45); } }
.wl-call { position: absolute; left: calc(100% + 10px); top: 3px; white-space: nowrap; padding: 4px 10px; border-radius: 8px;
  background: var(--gold); color: #1a1000; font: 800 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,0,0,.6); animation: wlCall .5s cubic-bezier(.2,1.4,.4,1) both, wlBob 1.6s ease-in-out .5s infinite; pointer-events: none; }
.wl-call::before { content: ""; position: absolute; left: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 0; border-right-color: var(--gold); }
.wl-call[hidden] { display: none; }
@keyframes wlCall { from { transform: translateX(-8px) scale(.6); opacity: 0; } }
@keyframes wlBob { 50% { transform: translateX(3px); } }
/* Her chance and everybody's own roll, as custodia works them out */
.odds { min-width: 150px; max-width: 210px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255,79,163,.3);
  background: rgba(16,6,22,.82); box-shadow: 0 4px 14px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 3px; }
.odds[hidden] { display: none; }
.odds.lean .od-sub, .odds.lean [data-od-rows] { display: none; }
/* Riders (theatrum riders.go, Linus 2026-10-27): who joined without a seat at her table, and a way in while it plays */
.od-ride { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 9px var(--mono); letter-spacing: .08em; color: var(--gold); }
.od-ride[hidden] { display: none; }
.od-ride button { padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255,253,120,.6); background: rgba(255,253,120,.1);
  color: var(--gold); font: 700 10px var(--mono); cursor: pointer; white-space: nowrap; }
.od-ride button[hidden] { display: none; }
.od-her { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 9px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hot); }
.od-her b { font: 20px var(--display); letter-spacing: .03em; color: var(--ink); text-shadow: 0 0 10px rgba(255,36,146,.45); }
.od-sub { font: 700 8px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ghost); margin-top: 2px; }
.od-row { display: flex; justify-content: space-between; gap: 10px; font: 11px var(--mono); color: var(--dim); }
.od-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-row b { font-weight: 700; color: var(--ink); }
.od-row.me span, .od-row.me b { color: var(--gold); }
.od-row.none b { color: var(--ghost); font-weight: 400; }
.od-row i { margin-left: auto; font: 700 10px var(--mono); font-style: normal; color: var(--gold); white-space: nowrap; }
/* In the big view her chance and the V-Bits sit in the right panel, every player and the wallet open (Linus,
   2026-10-24: "we have a lot of space on the right side"); on phones and narrow windows they stay on the table */
.side-hud { display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.side-hud:empty, .side-hud:not(:has(> :not([hidden]))) { display: none; }
.side-hud .odds { min-width: 0; max-width: none; padding: 0; border: 0; background: none; box-shadow: none; gap: 4px; }
.side-hud .od-her b { font-size: 26px; }
.side-hud .od-row { font-size: 12px; }
.side-hud .wallet { align-items: stretch; flex-direction: column; }
.side-hud .wl-pill, .side-hud .wl-call { display: none !important; }
.side-hud .wl-panel, .side-hud .wl-panel[hidden] { display: flex; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.chair .pc { font: 700 10px var(--mono); color: var(--gold); line-height: 1; min-height: 10px; }
.wl-pill { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,216,77,.55); background: rgba(20,8,26,.82); color: var(--ink); font: 700 12px var(--mono); letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 12px rgba(255,216,77,.18); }
.wl-pill i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2, var(--gold) 55%, #9a6b00);
  box-shadow: 0 0 8px rgba(255,216,77,.6); }
.wl-pill .wl-hot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); animation: wlPulse 1.4s ease-in-out infinite; }
@keyframes wlPulse { 50% { opacity: .35; } }
.wl-panel { width: 262px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,216,77,.35);
  background: linear-gradient(180deg, rgba(26,10,34,.96), rgba(12,4,18,.96)); box-shadow: 0 10px 30px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 7px; font: 12px var(--sans); color: var(--ink); }
.wl-panel[hidden] { display: none; }
.wl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 11px var(--mono); color: var(--dim); }
.wl-row b { font: 700 14px var(--mono); color: var(--gold); }
.wl-mine { font: 11px var(--mono); color: var(--ink); }
.wl-head { font: 700 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hot); margin-top: 2px; }
.wl-head small { color: var(--dim); letter-spacing: .04em; text-transform: none; font-weight: 400; }
.wl-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.wl-btns button { flex: 1 1 auto; min-width: 46px; padding: 5px 6px; border-radius: 7px; cursor: pointer; font: 700 11px var(--mono);
  border: 1px solid rgba(255,216,77,.45); background: rgba(255,216,77,.1); color: #ffe9a3; }
.wl-btns button:hover:not(:disabled) { background: rgba(255,216,77,.24); }
.wl-btns button:disabled { opacity: .45; cursor: default; }
.wl-btns.bet button { border-color: rgba(255,79,163,.5); background: rgba(255,79,163,.12); color: #ffd1ee; }
.wl-btns.bet button:hover:not(:disabled) { background: rgba(255,79,163,.26); }
.wl-other { display: flex; gap: 5px; }
.wl-other input { flex: 1 1 auto; min-width: 0; padding: 4px 7px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35); color: var(--ink); font: 12px var(--mono); }
.wl-why { font: 10px/1.4 var(--sans); color: var(--ghost); }
.wl-closed { font: 11px/1.4 var(--sans); color: var(--dim); }
.wl-msg { font: 11px var(--mono); color: var(--hot); min-height: 1em; }
.wl-msg.ok { color: #7dffb0; }
.live { position: absolute; right: 12px; top: 12px; font: 10px var(--mono); color: var(--ghost); letter-spacing: .08em;
  background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 999px; z-index: 2; }
/* her music: on or off and how loud, under the live pill */
.music { position: absolute; right: 12px; top: 40px; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px; border-radius: 999px; background: rgba(0,0,0,.45); }
.music button.outfit { width: auto; padding: 0 8px; border-radius: 999px; font: 10px var(--mono); letter-spacing: .06em; white-space: nowrap; }
.music button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,36,146,.18);
  color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.music.off button { background: rgba(0,0,0,.4); color: var(--ghost); }
.music input { width: 70px; accent-color: var(--pink); }
.music.off input { opacity: .4; }
.live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #666; margin-right: 6px; vertical-align: middle; }
.live.on i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.live.poll i { background: #ffd84d; }

/* the chat: in the left panel on monitors, a strip at the bottom of the screen on phones that opens
   over the table */
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: default; }
.chat-head b { font: 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--hot); }
.chat-head span { font: 11px var(--mono); color: var(--ghost); }
.lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 14px; line-height: 1.35; }
.msg .av { width: 26px; height: 26px; border-radius: 50%; background: #3a1550; display: grid; place-items: center; font: 700 12px var(--sans); overflow: hidden; }
.msg .av img { width: 100%; height: 100%; object-fit: cover; }
.msg .who { font-weight: 700; color: #ffd1ee; margin-right: 6px; }
.msg .who.dc::after { content: "discord"; margin-left: 6px; font: 9px var(--mono); letter-spacing: .1em; color: #8ea1ff; text-transform: uppercase; }
.msg .who.dc[data-srv]::after { content: "· " attr(data-srv); letter-spacing: .04em; text-transform: none; }
.msg .tx { overflow-wrap: anywhere; color: var(--dim); }
.msg .who.vye { color: var(--pink); }
.send { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
/* While she can be begged for a raffle the chat is where she answers: it glows and says so */
body.talk-here .chatpanel, body.talk-here .chatslot:not(.open) { box-shadow: inset 0 0 0 1px rgba(255,216,77,.7), 0 0 24px rgba(255,216,77,.3);
  animation: talkGlow 2.4s ease-in-out infinite; }
@keyframes talkGlow { 50% { box-shadow: inset 0 0 0 1px rgba(255,216,77,.95), 0 0 38px rgba(255,216,77,.55); } }
.chat-here { display: none; font: 10px var(--mono); letter-spacing: .08em; color: var(--gold); white-space: nowrap; }
body.talk-here .chat-here { display: inline; }
@media (prefers-reduced-motion: reduce) { body.talk-here .chatpanel, body.talk-here .chatslot { animation: none; } }
.send input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.4); outline: none; }
.send input:focus { border-color: var(--hot); }
.send button, .signin { padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,36,146,.6); background: rgba(255,36,146,.18); cursor: pointer; font-weight: 700; }
.signin { width: 100%; height: 42px; }
.chat-empty { color: var(--dead); font: 12px var(--mono); text-align: center; padding: 18px 0; }

.chatslot { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 96px; border-radius: 12px; overflow: clip;
  background: var(--panel); border: 1px solid var(--line); display: flex; z-index: 3; transition: height .25s ease; }
.wide .chatslot { display: none; }
.chatslot .lines { padding: 4px 10px; gap: 4px; }
.chatslot .msg { font-size: 13px; grid-template-columns: 20px 1fr; }
.chatslot .msg .av { width: 20px; height: 20px; font-size: 10px; }
.chatslot .chat-head { padding: 6px 12px; cursor: pointer; }
.chatslot .send { padding: 6px 10px; }
.chatslot .send input { padding: 7px 10px; }
.chatslot:not(.open) .send { display: none; }
.chatslot.open { height: 540px; background: #12051c; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
/* Open, the strip is a layer of its own and paints once: a beg window lighting up under it made a phone's web view
   draw it again, half-done for a frame or two (seen in Discord, 2026-10-26) */
.chatslot.open { will-change: transform; contain: layout paint; }

/* the side panel */
.side .block { padding: 12px 14px; border-bottom: 1px solid var(--line); font: 13px var(--mono); color: var(--dim); }
.side .block b { color: var(--ink); }
.side .big { display: flex; gap: 18px; font: 14px var(--mono); }
.side .big div { display: flex; flex-direction: column; gap: 2px; }
.side .big b { font: 26px var(--display); }
.side .legal { margin-top: auto; border-bottom: none; font-size: 11px; }
.side .legal a { color: var(--ghost); }
.hist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hist span { padding: 2px 8px; border-radius: 999px; font: 11px var(--mono); border: 1px solid rgba(255,255,255,.18); }
.hist .w { color: var(--green); border-color: rgba(125,255,43,.5); }
.hist .l { color: var(--hot); border-color: rgba(255,36,146,.5); }

/* the lobby: seats, joining, the private volunteer toggle and offer; the table's parts hide meanwhile */
.phase-open .tableonly, .phase-over .tableonly, .phase-quiet .tableonly { display: none; }
.lobbyonly, .quietonly { display: none; }
.phase-open .lobbyonly, .phase-quiet .quietonly { display: flex; }
/* The crown raffle (theatrum crown.go): the felt shows its board while it runs */
.crownonly { display: none; }
.phase-crown .crownonly { display: flex; }
.phase-crown .tableonly, .phase-crown .lobbyonly, .phase-crown .quietonly { display: none; }

/* A team raffle (theatrum teams.go): both rosters at the sides, the game played on the felt, her verdict over her */
.teamsonly { display: none; }
.phase-teams .teamsonly { display: flex; }
.phase-teams .tableonly, .phase-teams .lobbyonly, .phase-teams .quietonly, .phase-teams .crownonly { display: none; }

/* SurVyeVers (theatrum salem.go, Linus 2026-10-29): a social deduction game with her, laid out like Town of Salem: the players
   with their buttons on the left, your role card on the right, the day, its clock and her devotion meter on top,
   what you can do now on the felt. By day the felt is the Town chat, with what you can do in a strip above it
   (Linus: "have the chat become the main UI on the table to make it clear that players need to chat to win") */
.salemonly { display: none; }
.phase-survyevers .salemonly { display: flex; }
.phase-survyevers .tableonly, .phase-survyevers .lobbyonly, .phase-survyevers .quietonly, .phase-survyevers .crownonly,
.phase-survyevers .teamsonly, .phase-survyevers .wallet, .phase-survyevers .odds { display: none !important; }
.sv-box { position: absolute; flex-direction: column; gap: 1px; padding: 8px 11px; box-sizing: border-box; border-radius: 12px; overflow: auto;
  background: rgba(12,4,18,.86); border: 1px solid rgba(255,36,146,.35); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.sv-top { position: absolute; align-items: center; gap: 12px; padding: 3px 12px; box-sizing: border-box; border-radius: 10px;
  background: rgba(12,4,18,.82); border: 1px solid rgba(255,253,120,.35); }
/* Day, clock and meter sit in the left column above the players: anywhere top centre covers her face
   (Linus: "why is the devotion meter still over vyes face") */
.wide .sv-top { left: 14px; top: 44px; width: 232px; flex-wrap: wrap; row-gap: 1px; padding: 3px 10px; }
.wide .sv-meter { flex: 1 0 100%; }
.tall .sv-top { left: 14px; right: 14px; top: 348px; }
.sv-phase { flex: 0 0 auto; font: 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sv-phase i { font-style: normal; color: var(--gold); margin-left: 8px; font-variant-numeric: tabular-nums; }
.sv-meter { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font: 700 10px var(--mono); letter-spacing: .1em; color: var(--hot); }
.sv-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.sv-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a8227a, var(--hot)); transition: width .4s; }
/* Both side boxes end above the table's rim, which runs at about 300 at the sides (Linus: "the ui is clumped to all hell") */
.wide .sv-list { left: 14px; top: 86px; width: 232px; height: 210px; }
.wide .sv-role { right: 14px; top: 86px; width: 232px; height: 210px; }
.tall .sv-list { left: 14px; top: 412px; width: 258px; height: 196px; }
.tall .sv-role { left: 280px; right: 14px; top: 412px; height: 196px; }
.tall .sv-row { min-height: 19px; }
.sv-h { font: 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.sv-row { display: flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 5px; box-sizing: border-box; border: 0;
  border-radius: 6px; font: 600 12px var(--sans); color: var(--ink); }
/* A row you can pick is itself the button: the action shows on hover and on the pick */
.sv-row.pick { width: 100%; margin: 0; flex: 0 0 auto; background: none; text-align: left; cursor: pointer; }
.sv-row.pick:hover { box-shadow: inset 0 0 0 1px rgba(255,253,120,.35); background: rgba(255,253,120,.06); }
.sv-row.pick.on { box-shadow: inset 0 0 0 1px var(--gold); background: rgba(255,253,120,.14); }
.sv-row .pk { margin-left: auto; flex: 0 0 auto; font: 700 10px var(--mono); color: var(--gold); opacity: 0; }
.sv-row.pick:hover .pk, .sv-row.pick.on .pk, .sv-row .pk.n { opacity: 1; }
.sv-row .num { flex: 0 0 16px; font: 700 10px var(--mono); color: var(--dim); }
.sv-row .nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-row .tag { flex: 0 0 auto; font: 700 10px var(--mono); color: var(--dim); white-space: nowrap; }
.sv-row.me .nm { color: var(--gold); }
.sv-row.out .nm { text-decoration: line-through; opacity: .5; }
.sv-row.trial .nm { color: var(--hot); }
.sv-row button, .sv-act button { margin-left: auto; flex: 0 0 auto; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--gold);
  background: rgba(255,253,120,.08); color: var(--gold); font: 700 10px var(--mono); cursor: pointer; }
.sv-row button.on, .sv-act button.on { background: var(--gold); color: #1a1000; }
.sv-act button:disabled { opacity: .45; cursor: default; }
.sv-rn { font: 20px var(--display); letter-spacing: .06em; color: #74c6ff; }
.sv-rn.vye { color: var(--green); }
.sv-p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--dim); }
.sv-goal:not(.open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; }
.sv-more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--gold); font: 700 10px var(--mono); cursor: pointer; }
.sv-box .sv-h:not(:first-child) { margin-top: 6px; }
.sv-p b { color: var(--ink); }
.sv-res { font: 11px/1.4 var(--mono); color: var(--ink); }
.sv-act { position: absolute; flex-direction: column; gap: 6px; padding: 10px 14px; box-sizing: border-box; border-radius: 14px; overflow: auto;
  border: 1px solid rgba(255,36,146,.35); background: linear-gradient(180deg, rgba(26,10,34,.9), rgba(12,4,18,.86)); }
.wide .sv-act { left: 22px; right: 22px; top: 330px; height: calc(204px + var(--xh)); }
/* Only the day chat needs the full height; the night panel ends below its last line (Linus: "why you keep so much space at the bottom") */
.wide .sv-act:not(.talk) { height: auto; max-height: calc(204px + var(--xh)); }
/* On a phone the closed chat bar covers the stage's last 70 or so: the felt ends above it */
.tall .sv-act { left: 14px; right: 14px; top: 616px; max-height: 270px; }
.tall .sv-act.talk { height: 270px; }
.sv-strip { display: flex; flex-direction: column; gap: 6px; }
.sv-act.talk { gap: 5px; padding: 7px 10px 8px; overflow: hidden; }
.sv-act.talk .sv-strip { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; max-height: 66px; overflow: auto; }
.sv-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 12px var(--sans); color: var(--dim); }
.sv-chip b { color: var(--ink); }
.sv-chip.hot, .sv-chip.hot b { color: var(--hot); }
.sv-chip.ok b { color: var(--green); }
.sv-act .sv-chip button { margin-left: 0; padding: 3px 9px; font-size: 11px; }
.sv-act .sv-chip input { flex: 0 1 190px; padding: 3px 7px; font-size: 11px; }
.sv-lines, .sv-say { display: none; }
.sv-act.talk .sv-lines { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px;
  border-radius: 9px; background: rgba(0,0,0,.28); }
.sv-lines .msg { grid-template-columns: 18px 1fr; gap: 6px; font-size: 12px; line-height: 1.3; }
.sv-lines .msg .av { width: 18px; height: 18px; font-size: 9px; }
.sv-lines .chat-empty { margin: auto; font-size: 12px; color: var(--dim); }
.sv-act.talk .sv-say { display: flex; gap: 6px; flex: 0 0 auto; }
.sv-act .sv-say input { flex: 1 1 auto; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.sv-act .sv-say input:focus { outline: none; border-color: var(--hot); }
.sv-act .sv-say button { margin-left: 0; padding: 0 14px; border-radius: 8px; border-color: rgba(255,36,146,.6); background: rgba(255,36,146,.18);
  color: var(--ink); font: 700 12px var(--sans); }
.sv-act .t { font: 16px var(--display); letter-spacing: .06em; color: var(--ink); }
.sv-act:not(.talk) { padding-top: 8px; padding-bottom: 8px; }
.sv-act .sv-h { margin-top: 4px; }
.sv-act .row select { flex: 0 0 200px; }
.sv-act .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv-act .row button { margin-left: 0; padding: 6px 12px; font-size: 12px; }
.sv-act input, .sv-act select { flex: 1 1 160px; min-width: 0; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35); color: var(--ink); font: 12px var(--sans); }
.sv-note { font: 11px var(--mono); color: var(--hot); }
.sv-p b.sv-none { color: var(--hot); }
.sv-note:empty { display: none; }
.qsv { flex: 0 0 auto; padding: 6px 16px; border-radius: 10px; border: 1px solid var(--hot); background: rgba(255,36,146,.12); color: var(--hot);
  font: 14px var(--display); letter-spacing: .06em; cursor: pointer; }
.qsv.on { background: var(--hot); color: #fff; }
.quiet.has-last .qsv { padding: 3px 12px; font-size: 12px; }
/* Her beg button and the SurVyeVers toggle side by side: stacked, they pushed her small line under them off the
   stage's bottom */
.qbtns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
.quiet.has-last .qbtns { order: 2; }
.msg .svs { margin-left: 6px; font: 700 10px var(--mono); color: var(--hot); }
.msg .svc { margin-left: 6px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--gold); background: none; color: var(--gold);
  font: 700 10px var(--mono); cursor: pointer; }
.msg .svc.on { background: var(--gold); color: #1a1000; }
.tm-side { position: absolute; flex-direction: column; gap: 4px; padding: 9px 11px; box-sizing: border-box; border-radius: 12px; max-height: 236px; overflow: auto;
  background: rgba(12,4,18,.84); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.tm-red { border: 1px solid rgba(255,77,94,.55); }
.tm-blue { border: 1px solid rgba(77,163,255,.55); }
.wide .tm-red { left: 14px; top: 118px; width: 214px; }
.wide .tm-blue { right: 14px; top: 118px; width: 214px; }
.tall .tm-side { top: 412px; height: 150px; }
.tall .tm-red { left: 14px; width: 250px; }
.tall .tm-blue { left: 276px; right: 14px; }
.tm-h { display: flex; align-items: baseline; justify-content: space-between; font: 15px var(--display); letter-spacing: .06em; }
.tm-red .tm-h { color: #ff8a95; } .tm-blue .tm-h { color: #8cc4ff; }
.tm-h i { font-style: normal; font-size: 20px; color: var(--ink); }
.tm-roster { display: flex; flex-direction: column; gap: 2px; }
.tm-p { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 12px var(--sans); color: var(--ink); }
.tm-p .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tm-p .tag { margin-left: auto; flex: 0 0 auto; font: 700 10px var(--mono); color: var(--dim); }
.tm-p.me .nm { color: var(--gold); }
.tm-p.out { opacity: .4; text-decoration: line-through; }
.tm-p .tag.roll { color: var(--green); }
.tm-empty { font: 11px var(--mono); color: var(--ghost); }
.tm { position: absolute; flex-direction: column; gap: 6px; padding: 9px 14px; box-sizing: border-box; border-radius: 14px;
  border: 1px solid rgba(255,36,146,.35); background: linear-gradient(180deg, rgba(26,10,34,.9), rgba(12,4,18,.86)); box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.wide .tm { left: 22px; right: 22px; top: 334px; height: calc(204px + var(--xh)); }
.tall .tm { left: 14px; right: 14px; top: 572px; max-height: 372px; }
.tm-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-title { font: 17px var(--display); letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.tm-score { font: 700 12px var(--mono); color: var(--dim); white-space: nowrap; }
.tm-score .r { color: #ff8a95; } .tm-score .b { color: #8cc4ff; }
.tm-left { margin-left: auto; font: 700 11px var(--mono); color: var(--dim); white-space: nowrap; }
.tm-left b { color: var(--ink); font-size: 14px; }
.tm-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; font: 13px var(--sans); color: var(--ink); }
.tm-text { margin: 0; font: 12px/1.45 var(--sans); color: var(--dim); }
.tm-text b { color: var(--ink); }
.tm-btn { align-self: flex-start; padding: 6px 14px; border-radius: 9px; cursor: pointer; font: 800 12px var(--mono); letter-spacing: .08em;
  border: 1px solid var(--gold); background: rgba(255,216,77,.12); color: var(--gold); }
.tm-btn:hover { background: rgba(255,216,77,.24); }
.tm-btn.red { border-color: #ff4d5e; color: #ffb3ba; background: rgba(255,77,94,.14); }
.tm-sent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 5px; padding: 5px 8px; border-radius: 8px; font: 14px/1.35 var(--sans); }
.tm-sent.r { background: rgba(255,77,94,.1); border-left: 3px solid #ff4d5e; }
.tm-sent.b { background: rgba(77,163,255,.1); border-left: 3px solid #4da3ff; }
.tm-sent .st { color: var(--dim); font-style: italic; }
.tm-sent .w { font-weight: 700; }
.tm-sent .w.ow::before { content: "🔁"; font-size: 11px; margin-right: 2px; }
.tm-sent .bl { color: var(--ghost); letter-spacing: .1em; }
.tm-sent .who { margin-left: auto; font: 700 10px var(--mono); color: var(--dim); }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tm-prompt { font: 16px/1.3 var(--sans); font-weight: 700; color: var(--ink); }
.tm-prompt .blank { color: var(--gold); }
.tm-hand { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-card { position: relative; padding: 4px 8px; max-width: 172px; border-radius: 8px; cursor: pointer; text-align: left; font: 600 11px/1.2 var(--sans);
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: var(--ink); }
.tm-card:hover:not(:disabled) { border-color: var(--gold); }
.tm-card.mine { border-color: var(--green); background: rgba(125,255,43,.12); }
.tm-card.blank { border-style: dashed; color: var(--gold); }
.tm-card:disabled { opacity: .35; cursor: default; }
.tm-card i { font-style: normal; margin-left: 6px; font: 700 10px var(--mono); color: var(--green); }
.tm-ans { padding: 5px 8px; border-radius: 8px; font: 13px/1.35 var(--sans); }
.tm-ans.r { background: rgba(255,77,94,.1); } .tm-ans.b { background: rgba(77,163,255,.1); }
.tm-ans.won { outline: 2px solid var(--gold); }
.tm-ans b { color: var(--gold); }
.tm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tall .tm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-tile { padding: 2px 5px; border-radius: 7px; cursor: pointer; font: 700 11px/1.3 var(--sans); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: var(--ink); }
.tm-tile small { margin-left: 5px; font: 700 9px var(--mono); color: var(--dim); }
.tm-tile.o1 { border-color: #ff4d5e; background: rgba(255,77,94,.2); }
.tm-tile.o2 { border-color: #4da3ff; background: rgba(77,163,255,.2); }
.tm-tile:disabled { cursor: default; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-chip { padding: 2px 7px; border-radius: 6px; font: 700 11.5px var(--sans); background: rgba(255,255,255,.08); color: var(--ink); }
.tm-chip.mine { background: rgba(255,216,77,.2); color: var(--gold); }
.tm-chip.free { color: var(--dim); }
.tm-act { display: flex; align-items: center; gap: 8px; }
.tm-act[hidden] { display: none; }
.tm-act input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--gold); background: rgba(0,0,0,.45); color: var(--ink); font: 14px var(--sans); }
.tm-act button { flex: 0 0 auto; padding: 7px 14px; border-radius: 9px; cursor: pointer; font: 800 12px var(--mono); border: 1px solid var(--gold); background: var(--gold); color: #1b0b00; }
.tm-note { font: 11px var(--mono); color: var(--hot); }
.tm-note:empty { display: none; }
.tm-res { display: flex; flex-direction: column; gap: 3px; }
.tm-res .t { font: 18px var(--display); letter-spacing: .05em; }
.tm-res .t.r { color: #ff8a95; } .tm-res .t.b { color: #8cc4ff; }
.tm-res .why { font: italic 13px/1.35 var(--sans); color: var(--ink); }
.tm-res .ln { font: 12.5px/1.35 var(--sans); color: var(--dim); }
.tm-res .ln.won { color: var(--ink); }
.tm-res .ln b { color: var(--gold); }
/* The auction's points left, the sentence strip words are dragged or tapped into, the team's vote */
.tm-pts { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 9px; background: rgba(255,216,77,.16); border: 1px solid var(--gold);
  font: 800 12px var(--mono); color: var(--gold); white-space: nowrap; }
.tm-pts b { font: 20px/1 var(--display); color: var(--gold); }
.tm-pts.none { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--dim); }
.tm-pts.none b { color: var(--dim); }
.tm-build { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; padding: 4px 6px; box-sizing: border-box; border-radius: 9px;
  border: 1px dashed var(--gold); background: rgba(0,0,0,.35); }
/* drop, not over: .over is the game-over box, and the strip took its place while a word hovered */
.tm-build.drop { background: rgba(255,216,77,.14); }
.tm-build .ph { font: 12px var(--sans); color: var(--ghost); }
.tm-tok { padding: 2px 7px; border-radius: 6px; border: 0; cursor: grab; touch-action: none; font: 700 12.5px var(--sans); background: rgba(255,216,77,.24); color: var(--ink); }
button.tm-chip { border: 0; cursor: grab; touch-action: none; }
.tm-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg); box-shadow: 0 6px 16px rgba(0,0,0,.6); outline: 1px solid var(--gold); }
.tm-one { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tall .tm-one { white-space: normal; }
button.tm-chip:hover, .tm-tok:hover { outline: 1px solid var(--gold); }
.tm-btn:disabled { opacity: .4; cursor: default; }
.tm-vote { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; cursor: pointer; text-align: left; font: 13px/1.35 var(--sans); color: var(--ink);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.tm-vote:hover { border-color: var(--gold); }
.tm-vote.mine { border-color: var(--green); background: rgba(125,255,43,.1); }
.tm-vote small { margin-left: auto; flex: 0 0 auto; font: 700 10px var(--mono); color: var(--dim); }
/* Her verdict, one by one: a team's sentence, its score and her line, the other's, then her pick */
.tm-vd { display: flex; flex-direction: column; gap: 5px; }
.tm-vd .s { padding: 5px 9px; border-radius: 8px; font: 14px/1.35 var(--sans); color: var(--ink); }
.tm-vd .s.r { background: rgba(255,77,94,.1); border-left: 3px solid #ff4d5e; }
.tm-vd .s.b { background: rgba(77,163,255,.1); border-left: 3px solid #4da3ff; }
.tm-vd .s.won { outline: 2px solid var(--gold); }
.tm-vd .sc { display: inline-block; margin-left: 8px; font: 20px/1 var(--display); color: var(--gold); }
.tm-vd .nt { display: block; font: italic 12.5px/1.35 var(--sans); color: var(--dim); }
.tm-vd .t { font: 19px var(--display); letter-spacing: .05em; }
.tm-vd .t.r { color: #ff8a95; } .tm-vd .t.b { color: #8cc4ff; }
.tm-vd .nw { animation: rwRoll .5s cubic-bezier(.2,1.5,.4,1) both; }
/* The ready check before a raffle starts (theatrum presence.go): a big Ready, the minute, how many are ready */
.rc { position: absolute; z-index: 6; display: none; flex-direction: column; align-items: center; gap: 9px; padding: 18px 20px; border-radius: 16px; text-align: center;
  background: #1a0626; border: 2px solid var(--gold); box-shadow: 0 0 46px rgba(255,216,77,.45); }
.rc.on { display: flex; }
.tall .rc { left: 40px; right: 40px; top: 250px; }
.wide .rc { left: 280px; width: 400px; top: 104px; }
.rc b { font: 26px var(--display); letter-spacing: .06em; color: var(--gold); }
.rc p { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.4; }
.rc .left { font: 700 24px var(--mono); color: var(--ink); }
.rc button { width: 100%; height: 58px; border-radius: 12px; cursor: pointer; font: 800 22px var(--mono); letter-spacing: .16em; border: 1px solid var(--gold);
  background: var(--gold); color: #1b0b00; animation: rcPulse 1.1s ease-in-out infinite; }
.rc button:disabled { animation: none; background: rgba(125,255,43,.16); border-color: var(--green); color: var(--green); cursor: default; }
@keyframes rcPulse { 50% { box-shadow: 0 0 24px rgba(255,216,77,.85); } }
.crownbox { position: absolute; gap: 16px; padding: 10px 14px; box-sizing: border-box; border-radius: 14px;
  border: 1px solid rgba(255,216,77,.35); background: linear-gradient(180deg, rgba(26,10,34,.88), rgba(12,4,18,.82)); box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.wide .crownbox { left: 24px; right: 24px; top: 334px; height: calc(198px + var(--xh)); }
.tall .crownbox { left: 18px; right: 18px; top: 420px; height: 470px; flex-direction: column; }
.cr-prize { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cr-prize img { width: 92px; aspect-ratio: 240 / 340; object-fit: cover; border-radius: 9% / 6.4%; box-shadow: 0 6px 18px rgba(0,0,0,.6), 0 0 18px var(--rc, var(--gold)); }
.tall .cr-prize { flex-direction: row; gap: 12px; }
.tall .cr-prize img { width: 84px; }
.tall .cr-info { flex: 0 0 auto; }
.tall .crownbox { height: auto; max-height: 470px; }
/* The info column keeps its width: the task's long text beside it squeezed it to a word a line (Linus, 2026-10-25) */
.cr-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 0 230px; }
.cr-title { font: 22px var(--display); letter-spacing: .08em; color: var(--gold); text-shadow: 0 0 14px rgba(255,216,77,.45); }
.cr-what { font: 700 12px var(--mono); color: var(--ink); }
.cr-what small { display: block; font-weight: 400; color: var(--dim); margin-top: 2px; }
.cr-left { font: 700 11px var(--mono); letter-spacing: .06em; color: var(--dim); }
.cr-left b { color: var(--ink); font-size: 14px; }
.cr-blind { font: 700 11px var(--mono); color: var(--hot); letter-spacing: .06em; }
.cr-join { align-self: flex-start; margin-top: 2px; padding: 6px 14px; border-radius: 9px; cursor: pointer; font: 800 12px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--gold); background: rgba(255,216,77,.16); color: #ffe9a3; }
.cr-join[hidden] { display: none; }
.cr-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cr-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,.04); font: 12px var(--mono); color: var(--dim); }
.cr-row.top { background: rgba(255,216,77,.12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,216,77,.4); }
.cr-row.me .cr-nm { color: var(--gold); }
.cr-row .cr-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cr-row .cr-v { text-align: right; }
.cr-row .cr-pc { text-align: right; font-weight: 700; color: var(--ink); min-width: 46px; }
.cr-row .cr-mark { text-align: center; }
.cr-empty { font: 12px var(--mono); color: var(--ghost); }
/* The crown's time worn, its bonus, what was kept, and task wins, as small badges */
.cr-badges { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.cr-badge { font: 700 9px var(--mono); letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--dim); }
.cr-badge.crown { background: rgba(255,216,77,.18); color: #ffe9a3; }
.cr-badge.wait { background: rgba(255,216,77,.08); color: var(--ghost); }
.cr-badge.task { background: rgba(255,79,163,.18); color: #ffd1ee; }
/* Her verdict on a task: the entries laid out, a light hopping over them, landing on the winner */
.tkrev { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; box-sizing: border-box; background: rgba(6,1,10,.88); backdrop-filter: blur(3px); cursor: pointer; animation: fIn .35s ease-out; }
.tkrev[hidden] { display: none; }
.tk-kick { font: 700 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--hot); }
.tk-task { max-width: 720px; font: 600 14px/1.4 var(--sans); color: var(--dim); text-align: center; }
.tk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; width: 100%; max-width: 900px; }
.tk-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; min-height: 90px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); transition: transform .25s ease, box-shadow .25s ease, opacity .4s ease, border-color .25s; }
.tk-card b { font: 800 12px var(--mono); letter-spacing: .06em; color: var(--ink); }
.tk-card p { margin: 0; font: 13px/1.4 var(--sans); color: var(--dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.tk-card.lit { border-color: var(--gold); box-shadow: 0 0 22px rgba(255,216,77,.55); transform: translateY(-3px); }
.tk-card.win { border-color: var(--gold); background: rgba(255,216,77,.12); box-shadow: 0 0 34px rgba(255,216,77,.75); transform: scale(1.05); }
.tk-card.win p { color: var(--ink); }
.tk-card.lost { opacity: .35; }
.tk-card.fail { border-color: var(--hot); box-shadow: 0 0 22px rgba(255,36,146,.5); }
.tk-stamp { position: absolute; top: -12px; right: 10px; padding: 3px 10px; border-radius: 8px; font: 800 13px var(--mono); letter-spacing: .06em;
  background: var(--gold); color: #1a1000; box-shadow: 0 4px 14px rgba(0,0,0,.6); animation: tkStamp .45s cubic-bezier(.2,1.6,.4,1) both; }
.tk-stamp.no { background: var(--hot); color: #fff; }
@keyframes tkStamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } }
.tk-say { max-width: 680px; min-height: 1.4em; font: 600 15px/1.45 var(--sans); color: var(--ink); text-align: center; }
.tk-reading { animation: tkPulse 1.2s ease-in-out infinite; }
@keyframes tkPulse { 50% { opacity: .45; } }
.tkrev .fclose { font: 10px var(--mono); color: var(--ghost); letter-spacing: .1em; }
@media (prefers-reduced-motion: reduce) { .tk-card, .tk-stamp { animation: none !important; transition: none !important; } }
/* Her task, in place of the standings while it runs */
.wide .crownbox.tasking .cr-rows { flex: 0 0 330px; }
.wide .crownbox.tasking .cr-row .cr-v { display: none; }
.wide .crownbox.tasking .cr-info { flex-basis: 180px; }
.cr-task { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255,79,163,.4); background: rgba(255,79,163,.08); }
.cr-task[hidden] { display: none; }
.crownbox:not(.tasking) .cr-task { display: none; }
.cr-tk-kick { font: 700 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hot); }
.cr-tk-words { font: 600 13px/1.35 var(--sans); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cr-tk-row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.cr-tk-row span { flex: 1 1 auto; font: 11px var(--mono); color: var(--dim); }
.cr-tk-row button { padding: 6px 14px; border-radius: 9px; cursor: pointer; font: 800 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--pink); background: rgba(255,79,163,.18); color: #ffd1ee; }
.cr-tk-row button.on { border-color: #7dffb0; background: rgba(125,255,176,.14); color: #c9ffe0; }
.cr-tk-row button[hidden] { display: none; }
.rw-tag.place { background: var(--gold); color: #1a1000; opacity: 1; }
.lw-card .rw-tag.place { top: -6px; opacity: 1; font-size: 8px; padding: 0 4px; background: var(--gold); color: #1a1000; }

.quiet { position: absolute; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.wide .quiet { left: 24px; right: 24px; top: 372px; height: calc(156px + var(--xh)); }
.tall .quiet { left: 24px; right: 24px; top: 440px; height: 360px; }
.quiet b { font: 26px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); text-shadow: 0 0 18px rgba(255,36,146,.5); }
.quiet p { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--dim); }
.quiet small { font: 11px var(--mono); color: var(--ghost); letter-spacing: .08em; }
/* The last raffle's ends while the casino is quiet: the quiet words shrink to one line over a board of one
   table at a time, its winners as small reward cards */
.quiet.has-last { justify-content: flex-start; gap: 6px; }
.quiet.has-last > b, .quiet.has-last > p, .quiet.has-last > small { display: none; }
.quiet .lw-ask { display: none; font: 10px var(--mono); color: var(--ghost); letter-spacing: .08em; }
/* Begging her for a raffle while the casino is quiet (Linus, 2026-10-25: "a beg button should exist that lets you
   write to vye begging her to start a raffle"): the plea goes in the lobby chat, which she reads in the raffle
   channel, and she decides */
.qbeg { flex: 0 0 auto; padding: 8px 22px; border-radius: 12px; border: 1px solid var(--gold); cursor: pointer; font: 18px var(--display);
  letter-spacing: .08em; text-transform: uppercase; color: #1a1000; background: linear-gradient(180deg, #ffe58a, var(--gold));
  box-shadow: 0 0 22px rgba(255,216,77,.45); animation: qbegGlow 2.2s ease-in-out infinite; }
.qbeg:hover { filter: brightness(1.08); }
@keyframes qbegGlow { 50% { box-shadow: 0 0 34px rgba(255,216,77,.8); } }
.quiet.has-last .qbeg { padding: 4px 16px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .qbeg { animation: none; } }
/* ---------- the tutorial: a ? while people wait, slides for what comes next (Linus, 2026-10-25) ---------- */
.tut-q { position: absolute; left: 12px; top: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold);
  background: rgba(20,4,30,.85); color: var(--gold); font: 700 17px var(--sans); cursor: pointer; box-shadow: 0 0 12px rgba(255,253,120,.35); }
.tut-q[hidden] { display: none; }
.tut-q:hover { background: rgba(255,253,120,.18); }
.tut-q.nudge { animation: tutBob .9s ease-in-out 3; }
@keyframes tutBob { 50% { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 22px rgba(255,253,120,.8); } }
.tut-nudge { position: absolute; left: 38px; top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; background: var(--gold); color: #1a0526; font: 700 11px var(--mono); letter-spacing: .04em;
  box-shadow: 0 2px 12px rgba(0,0,0,.6); transition: opacity .3s, transform .3s; }
.tut-nudge::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--gold); }
.tut-q.nudge .tut-nudge { opacity: 1; transform: translate(0, -50%); }
.tut { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5,0,10,.72); backdrop-filter: blur(3px); }
.tut[hidden] { display: none; }
.tut-box { position: relative; width: min(540px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 14px; border-radius: 16px; background: #14051f; border: 1px solid rgba(255,253,120,.45); box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 30px rgba(255,36,146,.2); }
.tut-x { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border: 0; background: none; color: var(--dim); font-size: 20px; cursor: pointer; }
.tut-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 30px; }
.tut-tabs button { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: none; color: var(--dim); font: 11px var(--mono); cursor: pointer; }
.tut-tabs button.on { border-color: var(--gold); color: var(--gold); background: rgba(255,253,120,.1); }
.tut-tabs button.up-next::after { content: " · next"; color: var(--hot); }
.tut-pic { height: 150px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(255,36,146,.18), rgba(0,0,0,.5)); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.tut-box h3 { margin: 0; font: 22px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.tut-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dim); min-height: 63px; }
.tut-box p b { color: var(--ink); }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tut-nav button { min-width: 84px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: none; color: var(--ink); font-weight: 700; cursor: pointer; }
.tut-nav button.go { border-color: var(--gold); background: rgba(255,253,120,.15); color: var(--gold); }
.tut-nav button:disabled { opacity: .3; cursor: default; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tut-dots i.on { background: var(--gold); }
/* the slides' little pictures of the real controls */
.tp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 10px; font: 700 13px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: rgba(255,36,146,.25); border: 1px solid var(--pink); box-shadow: 0 0 12px rgba(255,36,146,.4); white-space: nowrap; }
.tp-btn.big { padding: 14px 30px; font-size: 18px; background: rgba(125,255,43,.12); border-color: var(--green); color: var(--mint); box-shadow: 0 0 16px rgba(125,255,43,.35); }
.tp-btn.gold { background: rgba(255,253,120,.15); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(255,253,120,.35); }
.tp-btn.dim { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: var(--dim); box-shadow: none; }
.tp-btn.red { background: rgba(255,60,60,.2); border-color: #ff5a5a; box-shadow: 0 0 12px rgba(255,60,60,.4); }
.tp-btn.blue { background: rgba(70,140,255,.2); border-color: #5c9dff; box-shadow: 0 0 12px rgba(70,140,255,.4); }
.tp-note { font: 11px var(--mono); color: var(--ghost); width: 100%; text-align: center; }
.tp-meter { position: relative; width: 86%; height: 18px; border-radius: 999px; background: rgba(0,0,0,.65); border: 1px solid rgba(255,36,146,.45); overflow: hidden; }
.tp-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #7a0b4d, var(--pink) 60%, var(--hot)); }
.tp-meter s { position: absolute; top: 0; bottom: 0; right: 0; border-left: 2px dashed rgba(255,255,255,.85);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 4px, transparent 4px 9px); }
.tp-meter u { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold); }
.tp-card { width: 46px; height: 66px; border-radius: 6px; background: #fff; color: #111; display: grid; place-items: center; font: 700 18px var(--sans); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.tp-card.red { color: #d0103a; }
.tp-card.back { background: repeating-linear-gradient(45deg, #5a0f3e 0 6px, #3a0828 6px 12px); border: 2px solid #fff; }
.tp-vs { font: 14px var(--display); color: var(--hot); margin: 0 6px; }
.tp-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 96%; }
.tp-w { padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.08); color: var(--ink); font-size: 14px; }
.tp-w.her { color: var(--hot); border: 1px solid rgba(255,103,189,.5); }
.tp-w.gap { min-width: 54px; border: 1px dashed rgba(255,255,255,.4); background: none; color: var(--ghost); text-align: center; }
.tp-w.ch::before { content: "✂️ "; }
.tp-input { width: 200px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); color: var(--dim);
  font-size: 13px; display: flex; align-items: center; padding: 0 10px; }
.tp-case { width: 52px; height: 42px; border-radius: 7px; background: linear-gradient(#c9a14a, #8a6a24); border: 2px solid #f5d27a; display: grid; place-items: center;
  font: 700 15px var(--mono); color: #2a1a00; }
.tp-case.picked { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); }
.tp-rows { width: 80%; display: flex; flex-direction: column; gap: 4px; }
.tp-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 13px; color: var(--ink); }
.tp-row b { margin-left: auto; font: 700 12px var(--mono); }
.tp-row.top { border: 1px solid var(--gold); background: rgba(255,253,120,.1); }
.tp-row small { font: 700 9px var(--mono); padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.1); color: var(--dim); }
.tp-big { font: 34px var(--display); color: var(--gold); text-shadow: 0 0 16px rgba(255,253,120,.6); }
.tp-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--ink); }
.tp-flow span { padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.08); }
.tp-flow i { color: var(--ghost); font-style: normal; }
.tp-spy { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(125,255,43,.55);
  background: rgba(10,40,10,.6); color: var(--mint); font-size: 12px; max-width: 46%; }
.tp-spy b { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.tp-exe { font: 26px var(--display); letter-spacing: .08em; color: var(--green); text-shadow: 0 0 14px rgba(125,255,43,.7); }
.tp-whisper { padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: rgba(125,255,43,.12); border: 1px solid rgba(125,255,43,.45); color: var(--mint); font-size: 13px; }
.tp-whisper small { display: block; font: 9px var(--mono); color: var(--green); letter-spacing: .08em; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .tut-q.nudge { animation: none; } }

.lw { display: none; width: 100%; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 6px; padding: 8px 12px 6px; box-sizing: border-box;
  border: 1px solid rgba(255,79,163,.22); border-radius: 12px; background: linear-gradient(180deg, rgba(20,6,30,.82), rgba(10,3,16,.7));
  box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.quiet.has-last .lw { display: flex; }
.lw-top { display: flex; align-items: center; gap: 10px; font: 700 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lw-top .lw-quiet { color: var(--hot); }
.lw-top .lw-when { color: var(--ghost); letter-spacing: .08em; font-weight: 400; text-transform: none; }
.lw-top .lw-fun { color: var(--hot); letter-spacing: .08em; }
.lw-pager { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lw-pager button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--ink);
  font: 700 13px/1 var(--sans); cursor: pointer; padding: 0; }
.lw-pager button:hover { background: rgba(255,79,163,.25); border-color: var(--pink); }
.lw-dots { display: flex; gap: 5px; }
.lw-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; }
.lw-dots i.on { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.lw-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 16px; text-align: left; }
.lw-info { flex: 0 0 236px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lw-info .lw-table { font: 22px var(--display); letter-spacing: .06em; color: var(--ink); text-shadow: 0 2px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-info .lw-won { font: 700 12px var(--mono); letter-spacing: .04em; white-space: nowrap; }
.lw-won.room { color: #7dffb0; } .lw-won.hers { color: var(--hot); }
.lw-info .lw-named { font: 11px var(--mono); color: var(--dim); }
.lw-named.right { color: var(--gold); }
.lw-cards { flex: 1 1 auto; min-width: 0; height: 100%; display: grid; grid-template-columns: repeat(var(--cols, 1), var(--lw, 60px)); align-content: center;
  justify-content: center; justify-items: center; gap: 14px 10px; }
.lw-card { --rc: #cfd6e6; position: relative; width: var(--lw); display: flex; flex-direction: column; align-items: center; gap: 3px;
  animation: lwIn .45s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes lwIn { from { transform: translateY(14px) rotateY(90deg) scale(.8); opacity: 0; } }
.lw-card img.lw-face { width: 100%; aspect-ratio: 240 / 340; border-radius: 9% / 6.4%; box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 12px var(--rc); }
.lw-card img.lw-face.opened { object-fit: cover; }
.lw-card .lw-what { max-width: calc(var(--lw) + 8px); font: 700 9px var(--mono); color: var(--rc); text-align: center; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.lw-card .lw-who { display: flex; align-items: center; gap: 3px; max-width: calc(var(--lw) + 8px); font: 600 10px var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; }
.lw-who .av { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.12); font: 700 8px var(--mono); }
.lw-who .av img { width: 100%; height: 100%; object-fit: cover; }
.lw-who .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-card .rw-tag.hers { top: -5px; opacity: 1; font-size: 7px; }
.lw-none { font: 18px var(--display); letter-spacing: .06em; color: var(--hot); text-shadow: 0 0 14px rgba(255,36,146,.5); }
.wide .quiet.has-last { top: 334px; height: calc(200px + var(--xh)); gap: 4px; }
.tall .quiet.has-last { height: 380px; }
.tall .lw-body { flex-direction: column; align-items: stretch; text-align: center; }
.tall .lw-info { flex: 0 0 auto; align-items: center; }
.tall .lw-cards { flex: 1 1 0; height: auto; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .lw-card { animation: none; } }
.barleft { position: absolute; font: 11px var(--mono); color: var(--ghost); }
.wide .barleft { left: 732px; width: 216px; top: 338px; text-align: center; }
.tall .barleft { right: 28px; top: 476px; }
.overonly { display: none; }
.phase-over .overonly { display: flex; }
.screen [hidden] { display: none !important; }

/* the beg meter, across the bottom of her picture */
.meter { position: absolute; z-index: 2; align-items: center; gap: 10px; }
.tall .meter { left: 24px; right: 24px; top: 356px; }
.wide .meter { left: 256px; width: 448px; top: 318px; }
.meter small { font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--hot); white-space: nowrap; }
.meter .bar { position: relative; flex: 1 1 auto; height: 16px; border-radius: 999px; background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,36,146,.45); overflow: hidden; }
.meter .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #7a0b4d, var(--pink) 60%, var(--hot)); box-shadow: 0 0 14px rgba(255,36,146,.8); }
.meter .bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px var(--mono); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px #000; }
.meter.pulse .bar { animation: pulse .35s ease-out; }
/* Until enough have joined, a dashed wall stands at their share of the meter and begging stops there (theatrum begCap) */
.meter .bar .wall { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--wall, 1) * 100%); border-left: 2px dashed rgba(255,255,255,.85);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 4px, transparent 4px 9px); pointer-events: none; }
.meter .bar .wall[hidden] { display: none; }
.meter .bar .wall:not([hidden]) ~ b { text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 10px #000; }
.meter.full .bar { border-color: var(--gold); animation: glow 1s ease-in-out infinite alternate; }
.meter.spam .bar { border-color: var(--hot); animation: glow .35s ease-in-out infinite alternate; }
.meter.full .bar i { background: linear-gradient(90deg, var(--pink), var(--gold)); }

/* the next game and its countdown */
.next { position: absolute; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px;
  background: rgba(10,3,16,.72); border: 1px solid var(--line); }
.wide .next { left: 732px; width: 216px; top: 40px; }
.tall .next { left: 24px; right: 24px; top: 400px; height: 92px; flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px; }
.next small { font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ghost); }
.next .game { font: 26px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.next ul { margin: 0; padding: 0 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.tall .next ul { display: none; }
.next .what { display: flex; flex-direction: column; gap: 2px; }
.tall .next .what { flex: 1 1 auto; }
.next .facts { font: 11px var(--mono); color: var(--dim); }
.wide .next .facts { display: none; }
.ring { position: relative; flex: 0 0 auto; width: 92px; height: 92px; align-self: center; margin-top: 4px; }
.tall .ring { width: 72px; height: 72px; margin: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .track { stroke: rgba(255,255,255,.1); }
.ring .arc { stroke: var(--pink); stroke-linecap: round; transition: stroke-dashoffset .3s linear; filter: drop-shadow(0 0 4px rgba(255,36,146,.8)); }
.ring.go .arc { stroke: var(--gold); }
.ring div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring b { font: 22px var(--display); line-height: 1; }
.tall .ring b { font-size: 17px; }
.ring span { font: 9px var(--mono); color: var(--ghost); letter-spacing: .06em; max-width: 70px; line-height: 1.2; margin-top: 3px; }
.tall .ring span { font-size: 8px; }

/* her note (volunteering) for those in, how it works for everybody else */
/* her note: black and toxic green, glitching like something that should not be on the screen */
.note { position: absolute; flex-direction: column; gap: 8px; padding: 12px 14px; color: #b9ffa6; font-family: var(--mono);
  background: repeating-linear-gradient(0deg, rgba(57,255,20,.05) 0 1px, transparent 1px 3px), #020502;
  border: 1px solid var(--toxic); box-shadow: 0 0 14px rgba(57,255,20,.35), inset 0 0 22px rgba(57,255,20,.1); }
.wide .note { left: 20px; width: 200px; top: 170px; }
.tall .note { left: 24px; right: 24px; top: 664px; flex-direction: row; align-items: center; gap: 12px; }
.note b { position: relative; font: 16px var(--display); letter-spacing: .08em; color: var(--toxic); text-shadow: 0 0 8px rgba(57,255,20,.8); }
.note b::before, .note b::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.note b::before { color: #ff2bd6; text-shadow: none; animation: glitch-a 2.6s infinite steps(1); }
.note b::after { color: #00ffd5; text-shadow: none; animation: glitch-b 3.1s infinite steps(1); }
.note p { margin: 0; font-size: 11px; line-height: 1.4; color: rgba(185,255,166,.75); }
.tall .note .txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.note label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed rgba(57,255,20,.5);
  font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.note input { width: 16px; height: 16px; accent-color: var(--toxic); }
.note.on { animation: infected 1.6s ease-in-out infinite alternate; }
.note.on label { border-style: solid; background: rgba(57,255,20,.14); color: #eaffe0; }
.howto { position: absolute; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--dim); }
.wide .howto { left: 20px; width: 200px; top: 170px; }
.tall .howto { left: 24px; right: 24px; top: 664px; }
.howto b { font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--hot); }
.howto ol { margin: 0; padding-left: 18px; }

/* the felt: a table drawn in CSS with chairs that fill as people join */
.lobtable { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #3b0f4f, #1c0628 70%);
  border: 3px solid rgba(255,253,120,.35); box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 0 30px rgba(154,60,255,.25); }
.wide .lobtable { left: 24px; width: 610px; top: 404px; height: 124px; }
.tall .lobtable { left: 24px; right: 24px; top: 528px; height: 128px; }
.lobtable::after { content: "Vye's table"; position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font: 10px var(--display); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,253,120,.25); }
.lob-head { position: absolute; justify-content: space-between; align-items: baseline; gap: 12px; }
.wide .lob-head { left: 28px; width: 602px; top: 372px; }
.tall .lob-head { left: 28px; right: 28px; top: 500px; flex-wrap: wrap; row-gap: 4px; }
.tall .lob-head > * { white-space: nowrap; }
.lob-head b { font: 18px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.lob-head span { font: 12px var(--mono); color: var(--dim); }
/* the banner the raffle is for: every prize comes from its cards (theatrum banner.go) */
span.bnr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 1px 9px 1px 1px; border: 1px solid rgba(255,216,77,.45);
  border-radius: 999px; background: rgba(255,216,77,.08); font: 700 10px/14px var(--mono); color: var(--gold); white-space: nowrap; }
span.bnr[hidden] { display: none; }
.bnr img { flex: 0 0 auto; height: 14px; aspect-ratio: 7 / 2; border-radius: 999px; object-fit: cover; }
.lob-head .bnr { align-self: center; flex: 0 1 auto; }
.bnr img[hidden] { display: none; }
.bnr em { overflow: hidden; font-style: normal; text-overflow: ellipsis; }
.bnr:not(:has(img:not([hidden]))) { padding-left: 10px; }
.cr-info .bnr { align-self: flex-start; }
/* safe: a second row of chairs that does not fit overflows down, never up onto the beg-o-meter */
.seats { position: absolute; justify-content: center; align-items: center; align-content: safe center; flex-wrap: wrap; gap: 4px 6px; }
.wide .seats { left: 60px; width: 538px; top: 404px; height: 106px; }
.tall .seats { left: 48px; right: 48px; top: 528px; height: auto; min-height: 60px; }
.chair { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; }
.chair .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: #3a1550; border: 2px solid rgba(255,255,255,.25); font: 700 17px var(--sans); }
.chair .av img { width: 100%; height: 100%; object-fit: cover; }
.chair .nm { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dim); }
.chair.empty .av { background: rgba(0,0,0,.25); border: 2px dashed rgba(255,255,255,.18); }
.chair.empty .nm { color: var(--dead); }
.chair.me .av { border-color: var(--hot); box-shadow: 0 0 12px rgba(255,36,146,.7); }
.chair.me .nm { color: var(--hot); }
.chair.new { animation: sit .5s cubic-bezier(.2,.9,.3,1.3) both; }
.seats.many .chair { width: 50px; }
.seats.many .chair .av { width: 34px; height: 34px; font-size: 13px; }
.seats.many .chair .nm { max-width: 50px; font-size: 10px; }
/* A tall enough table takes its chairs in two rows, as big as the two rows fit (a name and a chance under each) */
.wide.roomy .seats { --seat: min(96px, calc((var(--xh) + 124px) / 2 - 32px)); }
.wide.roomy .chair { width: 102px; }
.wide.roomy .chair .av { width: var(--seat); height: var(--seat); font-size: calc(var(--seat) * .36); }
.wide.roomy .chair .nm { max-width: 102px; font-size: 12px; }
.wide.roomy .seats.many .chair { width: 72px; }
.wide.roomy .seats.many .chair .av { width: 52px; height: 52px; font-size: 19px; }
.wide.roomy .seats.many .chair .nm { max-width: 72px; font-size: 11px; }

/* begging and joining */
.lob-actions { position: absolute; flex-direction: column; align-items: stretch; gap: 8px; }
.wide .lob-actions { left: 656px; width: 284px; top: 368px; }
.tall .lob-actions { left: 28px; right: 28px; top: 746px; flex-direction: row; flex-wrap: wrap; gap: 6px 8px; }
.btn.beg { --btn-line: rgba(255,36,146,.85); --btn-bg: rgba(255,36,146,.28); width: auto; height: 84px; color: #fff; font-size: 34px;
  text-shadow: 0 0 16px rgba(255,36,146,.9); overflow: hidden; }
.tall .btn.beg { flex: 1 1 60%; height: 72px; }
/* the beg games (2026-10-22, Linus's picks): Beg works only when she lets them, in a mash that pops up
   at random, or from the spam zone up; whoever offered writes her a plea now and then, which she
   scores for everybody to see */
.btn.beg.idle { --btn-line: rgba(255,255,255,.18); --btn-bg: rgba(0,0,0,.45); color: var(--ghost); text-shadow: none; font-size: 26px; }
.btn.beg.hot { --btn-line: var(--gold); --btn-bg: rgba(255,36,146,.5); font-size: 40px; animation: begHot .45s ease-in-out infinite alternate; }
.btn.beg.hot.tap { animation: tap .2s ease-out; }
.btn.beg .left { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
@keyframes begHot { from { filter: drop-shadow(0 0 3px rgba(255,36,146,.6)); transform: scale(1); } to { filter: drop-shadow(0 0 18px rgba(255,216,77,.95)); transform: scale(1.04); } }
.pleaopt { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; border: 1px dashed rgba(255,36,146,.5);
  font: 11px var(--mono); color: #ffc1dc; cursor: pointer; }
.pleaopt[hidden] { display: none; }
/* Start now: a join time runs 20 minutes unless most of four or more vote to start sooner (theatrum VoteStart) */
.startvote { padding: 7px 12px; border-radius: 8px; border: 1px dashed rgba(255,253,120,.6); background: rgba(255,253,120,.06);
  color: var(--gold); font: 700 12px var(--mono); letter-spacing: .04em; cursor: pointer; }
.startvote[hidden] { display: none; }
.startvote.on { border-style: solid; background: rgba(255,253,120,.18); }
.startvote:disabled { opacity: .55; cursor: default; }
.tall .startvote { flex: 1 1 auto; order: 4; }
.stack-tight .note .txt p, .stack-tight [data-barleft] { display: none; }
.stack-tight .chair .av { width: 34px; height: 34px; }
.pleaopt.on { border-style: solid; background: rgba(255,36,146,.16); color: #fff; }
.pleaopt input { width: 15px; height: 15px; margin: 0; accent-color: var(--hot); }
.tall .pleaopt { flex: 1 1 45%; justify-content: center; order: 3; }
.begnow { position: absolute; z-index: 5; left: 0; right: 0; justify-content: center; pointer-events: none; opacity: 0;
  font: 66px var(--display); letter-spacing: .08em; color: #fff; text-shadow: 0 0 20px var(--pink), 0 0 44px var(--gold); }
.wide .begnow { top: 130px; } .tall .begnow { top: 160px; }
.begnow.on { animation: begNow 1.5s ease-out forwards; }
@keyframes begNow { 0% { opacity: 0; transform: scale(2.2); } 18% { opacity: 1; transform: scale(.95); } 28% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
.pleabox { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px;
  background: #1a0626; border: 1px solid var(--gold); box-shadow: 0 0 40px rgba(255,216,77,.35); animation: pop .3s ease-out; }
.pleabox[hidden] { display: none; }
.wide .pleabox { left: 250px; width: 460px; top: 80px; }
.tall .pleabox { left: 30px; right: 30px; top: 140px; }
.pleabox b { font: 20px var(--display); letter-spacing: .06em; color: var(--gold); }
.pleabox p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--dim); }
.pleabox textarea { height: 72px; resize: none; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,216,77,.5); background: rgba(0,0,0,.5);
  color: var(--ink); font: 15px/1.4 var(--sans); outline: none; }
.pleabox textarea:focus { border-color: var(--gold); }
.pleabox .row { display: flex; align-items: center; gap: 10px; }
.pleabox .row span { flex: 1 1 auto; font: 11px var(--mono); color: var(--ghost); }
.pleabox .row button { flex: 0 0 auto; white-space: nowrap; }
.pleabox button { height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(255,216,77,.18); color: #ffe9a6; font-weight: 700; cursor: pointer; }
.pleabox .ptimer { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.pleabox .ptimer i { display: block; height: 100%; width: 100%; background: var(--gold); }
.pleacard { position: absolute; z-index: 3; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 14px; text-align: center;
  background: rgba(10,3,16,.9); border: 1px solid rgba(255,36,146,.55); box-shadow: 0 0 24px rgba(255,36,146,.25); animation: pop .3s ease-out; }
.pleacard[hidden] { display: none !important; }
.wide .pleacard { left: 270px; width: 420px; top: 160px; }
.tall .pleacard { left: 30px; right: 30px; top: 200px; }
.pleacard small { font: 700 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hot); }
.pleacard q { font: italic 16px/1.4 var(--sans); color: var(--ink); }
.pleacard .pscore { display: flex; align-items: center; gap: 10px; align-self: stretch; font: 700 13px var(--mono); color: var(--gold); }
.pleacard .pscore .bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.pleacard .pscore .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.pleacard .line { font: 14px/1.4 var(--sans); color: var(--pink); }
.pleacard .wait { font: 12px var(--mono); color: var(--dim); }
/* the rhythm beg (Linus's pick A): a ring closes on the target on every beat, with a tick; press Beg (or
   Space) as it lands. A run of beats in a row counts more, up to ×4 */
.beatring { position: absolute; z-index: 4; width: 180px; height: 180px; align-items: center; justify-content: center; pointer-events: none; }
.beatring[hidden] { display: none !important; }
.wide .beatring { left: 390px; top: 110px; }
.tall .beatring { left: 180px; top: 140px; }
.beatring .target { position: absolute; left: 45px; top: 45px; width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--gold);
  background: rgba(10,3,16,.65); box-shadow: 0 0 18px rgba(255,216,77,.7), inset 0 0 18px rgba(255,216,77,.35); }
.beatring .target.pulse { animation: beatPulse .22s ease-out; }
.beatring .target.hit { border-color: #fff; box-shadow: 0 0 34px rgba(255,216,77,1), inset 0 0 26px rgba(255,216,77,.6); }
.beatring .target.miss { border-color: #ff2452; box-shadow: 0 0 22px rgba(255,36,82,.8); animation: beatMiss .25s ease-out; }
.beatring .approach { position: absolute; left: 45px; top: 45px; width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--hot);
  box-shadow: 0 0 10px rgba(255,36,146,.7); transform-origin: 50% 50%; }
.beatring b { position: relative; font: 30px var(--display); color: #fff; text-shadow: 0 0 10px var(--pink); }
.beatring .fb { position: absolute; left: -40px; right: -40px; top: 176px; text-align: center; font: 700 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.beatring .fb.hit { color: var(--gold); text-shadow: 0 0 10px rgba(255,216,77,.8); }
.beatring .fb.miss { color: #ff7ca0; }
@keyframes beatPulse { from { transform: scale(1.16); } to { transform: none; } }
@keyframes beatMiss { 0%, 100% { transform: none; } 30% { transform: translateX(-6px); } 70% { transform: translateX(6px); } }
.btn.beg::before { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--hot); }
.btn.beg.cool::before { animation: cool 2s linear both; }
.btn.beg.tap { animation: tap .25s ease-out; }
.btn.beg small { display: block; font: 10px var(--mono); letter-spacing: .14em; color: rgba(255,255,255,.7); text-shadow: none; }
.btn.join { width: auto; height: 92px; font-size: 26px; }
/* The right column grows with the table too: what Beg gets is what Leave, under it, does not need */
.wide .btn.beg { height: calc(84px + max(0px, (var(--xh) - 39px) * .7)); }
.wide .btn.join { height: calc(92px + var(--xh) / 2); }
.tall .btn.join { flex: 1 1 auto; height: 88px; }
.btn.leave { width: auto; height: 36px; font-size: 13px; letter-spacing: .2em; --btn-line: rgba(255,255,255,.25); --btn-bg: rgba(0,0,0,.35); color: var(--ghost); }
.tall .btn.leave { flex: 0 0 96px; height: 72px; }
/* A window with no height to spare: Beg, the plea and the join button still fit, Leave beside Start now */
.wide.low .lob-actions { flex-direction: row; flex-wrap: wrap; }
.wide.low .btn.beg, .wide.low .pleaopt, .wide.low .btn.join { flex: 1 1 100%; }
.wide.low .startvote { flex: 1 1 0; white-space: nowrap; }
.wide.low .btn.leave { flex: 0 0 96px; height: 33px; }
.plus { position: absolute; z-index: 5; pointer-events: none; font: 22px var(--display); color: var(--hot); text-shadow: 0 0 10px rgba(255,36,146,.9);
  animation: rise .9s ease-out forwards; }
.offer { position: absolute; z-index: 4; display: none; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px;
  background: #1a0626; border: 1px solid var(--pink); box-shadow: 0 0 40px rgba(255,36,146,.45); }
.offer.on { display: flex; }
.tall .offer { left: 40px; right: 40px; top: 300px; }
.wide .offer { left: 260px; width: 440px; top: 120px; }
.offer b { font: 20px var(--display); letter-spacing: .06em; color: var(--hot); }
.offer p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.4; }
.offer .row { display: flex; gap: 10px; }
.offer .row button { flex: 1; height: 44px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.offer .yes { border: 1px solid var(--pink); background: rgba(255,36,146,.25); color: #fff; }
.offer .no { border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: var(--dim); }
.tables { position: absolute; display: flex; gap: 6px; z-index: 2; }
.tall .tables { left: 50%; top: 12px; transform: translateX(-50%); }
.in-discord .tall .tables { top: 76px; }
/* On a phone her chance and the wallet fade while she speaks: her bubble lands where they are (Linus, 2026-10-26) */
.tall .hud { transition: opacity .25s; }
body.tall:has(.say.show) .hud { opacity: .08; }
body.tall:has(.say.show) .hud > * { pointer-events: none; }
.wide .tables { left: 250px; top: 12px; }
.tables button { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.55); font: 11px var(--mono); cursor: pointer; }
.tables button.on { border-color: var(--hot); color: var(--hot); }
.tables button.mine::after { content: " · you"; color: var(--mint); }
.peek { position: absolute; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.75); border: 1px solid var(--violet);
  font: 12px var(--mono); color: #d9b8ff; }
.tall .peek { left: 50%; transform: translateX(-50%); top: 296px; }
.wide .peek { left: 480px; transform: translateX(-50%); top: 214px; }
/* Finish the sentence (2026-10-19): her start and last word, the table's words with who wrote them,
   a blank for every word still possible and a mark where they may finish; blackjack's parts hide */
.game-sentence .bj, .game-deal .bj, .game-blackjack .sentonly, .game-deal .sentonly,
.game-blackjack .dealonly, .game-sentence .dealonly { display: none !important; }

/* Her cases (2026-10-22, Linus: "like on discord", every vote ending once all voted): the board on the
   left, the clues on the right with yours marked, six cases in the felt. A case is voted by clicking it,
   keep or open and the swap by buttons, her deal in a box over her; her traitor sees inside the cases. */
.game-cases .bj, .game-cases .sentonly, .game-cases .dealonly, body:not(.game-cases) .casesonly { display: none !important; }
.cs-side { position: absolute; display: flex; flex-direction: column; gap: 5px; font: 11px/1.35 var(--mono); z-index: 1; }
.wide .cs-side { width: 214px; }
.wide .cs-left { left: 14px; top: 118px; }
.wide .cs-right { right: 14px; top: 78px; }
.tall .cs-side { top: 728px; }
.tall .cs-left { left: 14px; width: 236px; }
.tall .cs-right { left: 262px; right: 14px; }
.cs-side .h { font: 700 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hot); }
.cs-board, .cs-clues { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 10px; background: rgba(10,3,16,.8); border: 1px solid rgba(255,36,146,.28); }
.cs-clues { gap: 5px; overflow-y: auto; }
.wide .cs-clues { max-height: 250px; }
.tall .cs-clues, .tall .cs-board { height: 106px; }
.tall .cs-board { gap: 1px; font-size: 10.5px; line-height: 1.3; }
.cs-board .row { display: grid; grid-template-columns: 18px 1fr auto; gap: 0 6px; align-items: baseline; }
.cs-board .row b { font-weight: 700; color: var(--ink); }
.cs-board .row em { grid-column: 2 / -1; margin-top: -2px; font-style: normal; font-size: 10px; color: var(--dim); }
.tall .cs-board .row em { display: none; }
.cs-board .her.up { color: #ff8fb2; } .cs-board .her.down { color: #9dffc0; }
.cs-board .row.gone { opacity: .35; text-decoration: line-through; }
.cs-clues .cl { position: relative; padding-left: 16px; color: var(--ink); }
.cs-clues .cl::before { content: "🧩"; position: absolute; left: -1px; font-size: 10px; }
.cs-clues .cl.none { padding-left: 0; color: var(--ghost); }
.cs-clues .cl.none::before { content: none; }
.cs-clues .cl.mine { padding: 5px 8px 5px 24px; border-radius: 8px; border: 1px solid var(--toxic); background: rgba(3,20,6,.9); color: #d6ffcc; }
.cs-clues .cl.mine::before { content: "🐍"; left: 6px; top: 5px; }
.cs-clues .cl.mine i { display: block; font: 700 9px var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--toxic); }
.cs { position: absolute; display: flex; flex-direction: column; gap: 6px; }
.wide .cs { left: 22px; right: 22px; top: calc(362px + var(--xm)); }
.tall .cs { left: 18px; right: 18px; top: 414px; gap: 8px; }
.cs-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 10px; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ghost); }
.tall .cs-head { grid-template-columns: 1fr auto; }
.cs-head b { color: var(--hot); font-weight: 700; }
.cs-head .st { font: 14px var(--display); letter-spacing: .05em; color: var(--ink); text-align: center; text-transform: none; }
.tall .cs-head .st { grid-column: 1 / -1; grid-row: 2; }
.cs-head .st.win { color: var(--green); } .cs-head .st.lose { color: var(--hot); } .cs-head .st.you { color: var(--toxic); }
.cs-head .chance { font: 14px var(--display); letter-spacing: .05em; color: var(--ink); text-transform: none; text-align: right; }
.cs-head .chance i { font-style: normal; color: var(--gold); }
.cs-timer { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.cs-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.cs-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tall .cs-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-case { position: relative; height: 92px; padding: 0; border-radius: 12px; border: 1px solid rgba(255,216,77,.5); color: var(--ink);
  background: linear-gradient(160deg, rgba(255,216,77,.16), rgba(120,60,10,.18)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; transition: transform .12s ease, box-shadow .15s; }
.tall .cs-case { height: 68px; }
.cs-case:disabled { cursor: default; }
.cs-case:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(255,216,77,.45); }
.cs-case .n { font: 700 26px var(--mono); color: #fff; }
.cs-case .lbl { font: 10px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .12em; max-width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-case .v { position: absolute; right: 7px; top: 5px; min-width: 18px; padding: 0 4px; border-radius: 6px; background: rgba(255,216,77,.2); font: 700 11px var(--mono); color: var(--gold); }
.cs-case .pk { position: absolute; left: 6px; top: 4px; font-size: 12px; padding: 0 4px; border-radius: 5px; background: rgba(3,20,6,.9); border: 1px solid var(--toxic); }
.cs-case.mine { box-shadow: inset 0 0 0 2px var(--gold); }
.cs-case.picked { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255,216,77,.55); }
.cs-case.kept { border-color: var(--toxic); background: linear-gradient(160deg, rgba(57,255,20,.14), rgba(10,40,6,.3)); }
.cs-case.kept .lbl { color: var(--toxic); }
.cs-case.kept.mine { box-shadow: inset 0 0 0 2px var(--toxic); }
.cs-case.opened { border-style: dashed; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); }
.cs-case.opened .n { font-size: 24px; }
.cs-foot { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.tall .cs-foot { flex-direction: column; gap: 6px; }
.cs-acts { display: flex; gap: 10px; flex: 0 0 auto; }
.cs-acts:empty { display: none; }
.cs-note { flex: 1 1 auto; min-width: 0; font: 11px/1.4 var(--mono); color: var(--dim); }
.tall .cs-note { text-align: center; }
.cs-note b { color: var(--ink); }
.cs-btn { height: 38px; padding: 0 16px; border-radius: 10px; font: 700 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  border: 1px solid #ff8fb2; background: rgba(255,36,146,.14); color: #ffc1dc; }
.cs-btn.keep { border-color: var(--toxic); background: rgba(57,255,20,.14); color: #b9ffa6; }
.cs-btn.take { border-color: var(--gold); background: rgba(255,216,77,.16); color: #ffe9a6; }
.cs-btn.nodeal { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: var(--ink); }
.cs-btn.on { box-shadow: inset 0 0 0 2px currentColor; }
.cs-btn:disabled { cursor: default; opacity: .7; }
.cs-offer { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 16px; text-align: center;
  background: rgba(10,3,16,.94); border: 1px solid var(--gold); box-shadow: 0 0 30px rgba(255,216,77,.35); animation: pop .3s ease-out; }
.cs-offer[hidden] { display: none; }
.wide .cs-offer { left: 270px; right: 270px; top: 60px; }
.tall .cs-offer { left: 50px; right: 50px; top: 110px; }
.cs-offer > b { font: 700 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.cs-offer .big { font: 40px var(--display); color: #fff; }
.cs-offer p { margin: 0 0 8px; font: 12px/1.45 var(--mono); color: var(--dim); }
.cs-offer p i { font-style: normal; color: var(--gold); }
.cs-offer .row { display: flex; justify-content: center; gap: 12px; }

/* A picked case opened or kept (2026-10-22, Linus's pick C): it shakes, then flips to show what it held,
   with a burst in that content's colour; a kept one gets a lock stamped on it. --el is how far in it is,
   so a redraw half-way carries on where it was */
.fx-gold { --fxc: #ffd84d; } .fx-green { --fxc: #39ff14; } .fx-trap { --fxc: #ff2452; } .fx-dust { --fxc: #c9b48f; }
.cs-case.a-open, .cs-case.a-keep { z-index: 2; }
.cs-case.a-open { animation: csOpen 1.3s ease-out calc(0ms - var(--el, 0ms)) both; }
.cs-case.a-open.fx-trap { animation-name: csOpenTrap; }
.cs-case.a-open .n, .cs-case.a-open .lbl { animation: csShow 1.3s ease-out calc(0ms - var(--el, 0ms)) both; }
@keyframes csOpen { 0% { transform: none; } 6% { transform: rotate(-5deg); } 12% { transform: rotate(5deg); } 18% { transform: rotate(-4deg); } 24% { transform: rotate(3deg); }
  32% { transform: perspective(400px) rotateY(90deg) scale(1.08); } 55% { transform: perspective(400px) rotateY(0) scale(1.16); box-shadow: 0 0 34px var(--fxc), inset 0 0 22px var(--fxc); border-color: var(--fxc); }
  100% { transform: none; } }
@keyframes csOpenTrap { 0% { transform: none; } 6% { transform: rotate(-5deg); } 12% { transform: rotate(5deg); } 18% { transform: rotate(-4deg); } 24% { transform: rotate(3deg); }
  32% { transform: perspective(400px) rotateY(90deg) scale(1.08); } 50% { transform: perspective(400px) rotateY(0) scale(1.16); box-shadow: 0 0 34px var(--fxc), inset 0 0 26px var(--fxc); border-color: var(--fxc); }
  58% { transform: translateX(-6px) scale(1.1); } 66% { transform: translateX(6px) scale(1.08); } 74% { transform: translateX(-5px); } 82% { transform: translateX(4px); box-shadow: 0 0 24px var(--fxc); } 100% { transform: none; } }
@keyframes csShow { 0%, 31% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: none; } }
.fxs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.fxs i { position: absolute; left: 0; top: 0; width: 16px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--fxc)); box-shadow: 0 0 8px var(--fxc);
  opacity: 0; animation: csSpark .8s cubic-bezier(.1,.7,.3,1) calc(var(--d, 0s) - var(--el, 0ms)) forwards; }
@keyframes csSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.4); } }
.cs-case.a-keep { animation: csKeep .95s ease-out calc(0ms - var(--el, 0ms)) both; }
@keyframes csKeep { 0% { transform: none; } 30% { transform: scale(1.12); box-shadow: 0 0 30px rgba(57,255,20,.85); } 100% { transform: none; } }
.cs-case .stamp { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; font-size: 34px; pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(57,255,20,.95)); animation: csStamp .95s ease-out calc(0ms - var(--el, 0ms)) both; }
@keyframes csStamp { 0% { opacity: 0; transform: scale(2.6) rotate(-20deg); } 30% { opacity: 1; transform: scale(.9) rotate(0); } 40% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

/* The end of her cases: your kept cases come to the middle and open one by one, the last held a beat
   longer, then the finale; a tap skips to it */
.cs-reveal { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; overflow: hidden; background: rgba(6,1,10,.93); backdrop-filter: blur(3px); cursor: pointer; animation: fIn .35s ease-out; }
.cs-reveal[hidden] { display: none; }
.rv-box { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(92%, 720px); text-align: center; }
.rv-box > small { font: 700 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ghost); }
.rv-title { font: 40px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.rv-cases { display: flex; justify-content: center; gap: 48px; }
.tall .rv-cases { gap: 24px; }
.rv-case { position: relative; width: 170px; height: 196px; opacity: 0; transform: translateY(60px) scale(.7); transition: opacity .4s, transform .55s cubic-bezier(.2,1.4,.4,1); }
.tall .rv-case { width: 150px; height: 180px; }
.rv-case.in { opacity: 1; transform: none; }
.rv-case .rays { position: absolute; left: 50%; top: 55%; width: 420px; height: 420px; margin: -210px 0 0 -210px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fxc) 55%, transparent) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, transparent 12%, #000 30%, transparent 64%); mask: radial-gradient(circle, transparent 12%, #000 30%, transparent 64%); }
.rv-case.open .rays { animation: fRays 1.2s ease-out forwards, fSpin 22s linear infinite; }
.rv-case .body { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; display: grid; place-items: center; border-radius: 14px; border: 2px solid #c4922c;
  background: linear-gradient(160deg, #7a5016, #2f1c06); box-shadow: 0 14px 30px rgba(0,0,0,.6), inset 0 0 0 6px rgba(0,0,0,.18); transition: border-color .3s, box-shadow .3s; }
.rv-case .body::before { content: ""; position: absolute; left: 50%; top: -30px; width: 54px; height: 24px; margin-left: -27px; border: 6px solid #c4922c; border-bottom: none; border-radius: 14px 14px 0 0; }
.rv-case .lid { position: absolute; left: -4px; right: -4px; top: 26%; height: 24%; border-radius: 12px 12px 4px 4px; border: 2px solid #e0ac40;
  background: linear-gradient(180deg, #a8711f, #6b430f); transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .45s; }
.rv-case .lid::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 22px; height: 14px; margin-left: -11px; border-radius: 4px; background: #ffd84d; box-shadow: 0 0 8px rgba(255,216,77,.7); }
.rv-case .num { margin-top: 34px; font: 50px var(--display); color: #ffe9a6; text-shadow: 0 2px 0 #3a2205; transition: opacity .2s, transform .2s; }
.rv-case .got { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; opacity: 0; transform: scale(.3); }
.rv-case .got b { font-size: 50px; line-height: 1.05; }
.rv-case .got span { font: 700 14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.rv-case .got em { font: 700 13px var(--mono); font-style: normal; }
.rv-case .got em.up { color: #ff8fb2; } .rv-case .got em.down { color: #9dffc0; }
.rv-case.shake .body, .rv-case.shake .lid { animation: rvShake .32s linear infinite; }
@keyframes rvShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) translateX(-2px); } 75% { transform: rotate(3deg) translateX(2px); } }
.rv-case.open .lid { transform: perspective(500px) rotateX(115deg) translateY(-10px); opacity: 0; }
.rv-case.open .num { opacity: 0; transform: scale(.5); }
.rv-case.open .got { animation: rvGot .6s cubic-bezier(.2,1.6,.4,1) .12s forwards; }
.rv-case.open .body { border-color: var(--fxc); box-shadow: 0 0 40px var(--fxc), inset 0 0 30px color-mix(in srgb, var(--fxc) 45%, transparent); }
.rv-case.open.fx-trap .body { animation: rvShake .12s linear .3s 6; }
@keyframes rvGot { to { opacity: 1; transform: none; } }
.rv-case .fxs i { width: 26px; height: 4px; }
.rv-sum { margin: 0; min-height: 1.5em; font: 13px/1.5 var(--mono); color: var(--dim); }
.rv-sum b { color: var(--ink); } .rv-sum i { font-style: normal; color: var(--gold); }

/* ---------- Vye as a cut-out behind the table (2026-10-22) ----------
   Her clip is an MP4 with her colour on top and her outline below (stack_alpha.py), drawn on a canvas, so
   every device plays her, iPhone too. She stands behind the felt, down to her hips; what covered her moves
   into the side columns (layout A, Linus's pick). Without WebGL the page keeps the old video. */
.backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 16%, #3d1253 0%, #1d0830 42%, #0e0418 78%); }
.backdrop::before { content: ""; position: absolute; inset: 0; filter: blur(7px);
  background: radial-gradient(circle at 17% 28%, rgba(255,36,146,.26) 0 3%, transparent 4.2%), radial-gradient(circle at 81% 21%, rgba(255,216,77,.2) 0 2.4%, transparent 3.6%),
    radial-gradient(circle at 69% 47%, rgba(154,60,255,.24) 0 4%, transparent 5.4%), radial-gradient(circle at 29% 58%, rgba(255,103,189,.16) 0 3%, transparent 4.2%),
    radial-gradient(circle at 89% 61%, rgba(255,36,146,.18) 0 2%, transparent 3.2%), radial-gradient(circle at 9% 71%, rgba(255,216,77,.14) 0 2%, transparent 3%),
    radial-gradient(circle at 56% 9%, rgba(255,103,189,.14) 0 2.6%, transparent 3.8%); }
.backdrop[hidden], .vyecv[hidden] { display: none; }
.sprite .vyevid, .sprite .vye-side, .sprite .vye-fade { display: none; }
/* The scene fills the page (Linus's pick A): the casino above and the table below run to the stage box's
   edges, top to bottom, behind the game, which keeps its size in the middle. --felt-y is where the table's
   edge is in the box; a rim runs along it, the counter she stands behind */
.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene[hidden] { display: none; }
.scene i { position: absolute; left: 0; right: 0; }
.scene .up { top: 0; height: calc(var(--felt-y) + 110px); background: radial-gradient(ellipse 70% 120% at 50% 30%, #3d1253 0%, #1d0830 45%, #0e0418 85%); }
.scene .up::before { content: ""; position: absolute; inset: 0; filter: blur(7px);
  background: radial-gradient(circle at 22% 24%, rgba(255,36,146,.26) 0 22px, transparent 30px), radial-gradient(circle at 77% 18%, rgba(255,216,77,.2) 0 16px, transparent 24px),
    radial-gradient(circle at 66% 52%, rgba(154,60,255,.24) 0 26px, transparent 36px), radial-gradient(circle at 31% 62%, rgba(255,103,189,.16) 0 20px, transparent 28px),
    radial-gradient(circle at 86% 64%, rgba(255,36,146,.18) 0 14px, transparent 22px), radial-gradient(circle at 12% 72%, rgba(255,216,77,.14) 0 14px, transparent 20px),
    radial-gradient(circle at 55% 10%, rgba(255,103,189,.14) 0 18px, transparent 26px), radial-gradient(circle at 93% 30%, rgba(154,60,255,.16) 0 18px, transparent 26px),
    radial-gradient(circle at 5% 40%, rgba(255,36,146,.14) 0 16px, transparent 24px); }
/* The Drain casino behind the whole page (Linus, 2026-10-22, his pick A): one picture behind the chat, the
   game and Vye's table, a little soft behind her ("soften it a little bit behind her"); the chat and Vye's
   table panels are frosted glass over it. Its floor meets the counter; the middle (the sign, the stairs)
   stays in view on any shape. */
/* clip, not hidden: the background bleeds 14px past the edges, and a focused box would scroll the page sideways into it */
.sprite .page { overflow: clip; }
.sprite .page::before { content: ""; position: absolute; inset: -14px; z-index: 0; pointer-events: none; will-change: transform;
  background: #1a0626 url(/media/stage/casino.webp?v=6577b959e8) 50% 62% / cover no-repeat; filter: blur(1.2px) brightness(.8); }
.sprite .page::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,4,24,.45) 0%, rgba(14,4,24,.05) 35%, rgba(14,4,24,.15) 75%, rgba(14,4,24,.6) 100%); }
.sprite .page > * { position: relative; z-index: 1; }
.sprite .panel { background: rgba(16,4,24,.52); border-color: rgba(255,36,146,.22);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
/* Over the game's own side columns, where its panels and text are, the picture goes softer and darker
   (Linus: "more sharp behind her and then less sharp on the other UI elements"); the middle stays clear */
.scene .up.photo { background: none; }
.scene .up.photo::before { content: none; }
.scene .up.photo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 85% at 50% 60%, transparent 0%, rgba(14,4,24,.18) 70%, rgba(14,4,24,.4) 100%); }
.scene .up .soft { display: none; position: absolute; inset: 0; -webkit-backdrop-filter: blur(2.5px) brightness(.8); backdrop-filter: blur(2.5px) brightness(.8);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 19%, transparent 34%, transparent 66%, #000 81%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 19%, transparent 34%, transparent 66%, #000 81%, #000 100%); }
.scene .up.photo .soft { display: block; }
/* small text straight on the picture gets a shadow to read by */
.sprite .rule, .sprite .barleft, .sprite .live { color: rgba(240,228,250,.7); text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.95); }
.sprite .recap, .sprite .voters, .sprite .label, .sprite .sentnote, .sprite .dnote, .sprite .cs-note, .sprite .lob-head { text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.95); }
/* Everything inside the table, centered where it can be (Linus, 2026-10-22). The table edge is at 300 (wide)
   and 345 (tall); her things in the left column move up; the house rule and the bar's time are printed on
   the felt like a real table's rules; the deal's results and her cases offer lie on the felt instead of over
   her; on phones the beg meter stands up beside her; the drawn oval goes */
.sprite .lobtable { display: none; }
.sprite.lay-a.wide .hand.dealer { top: 112px; }
.sprite.lay-a.wide .total.dealer { top: 198px; }
.sprite.lay-a.wide .peek { top: 226px; }
.sprite.wide .rule, .sprite.lay-a.wide .rule { left: 200px; right: 200px; width: auto; top: 328px; padding: 0; text-align: center;
  font: 700 9px/1.6 var(--mono); letter-spacing: .26em; color: rgba(232,187,85,.55); text-shadow: none; }
.sprite.wide .barleft { left: 220px; width: 520px; top: 332px; color: rgba(232,187,85,.7); text-shadow: none; }
.sprite.wide .next { top: 38px; }
.sprite.wide .next ul { display: none; }
.sprite.wide .next .facts { display: block; }
.sprite.wide .spy { top: 96px; max-height: 196px; overflow: auto; }
.sprite.wide .cs-clues { max-height: 180px; }
.sprite.wide .dres { top: calc(326px + var(--xm)); left: 110px; right: 110px; padding: 8px 12px; gap: 5px; }
/* during the results their header is the panel's; Ready and the note sit below it */
.sprite .deal.resulting .dhead, .sprite .deal.resulting .dtimer { display: none; }
.sprite.wide .deal.resulting { top: calc(500px + var(--xm)); }
.sprite.tall .deal.resulting { top: 700px; }
.sprite .rcard { padding-top: 8px; }
.sprite .rcard .big { font-size: 26px; margin-top: 0; }
.sprite .rcard .names { margin: 2px 0 4px; }
/* The votes fill the whole card from the bottom (Linus: a 26 px strip read as a tenth for half the table),
   slow enough to watch; the text sits over it */
.sprite .rcard > :not(.rmeter) { position: relative; z-index: 1; }
.sprite .rcard .rmeter { position: absolute; inset: 0; height: auto; margin: 0; border-top: 0; background: transparent; }
.sprite .rcard .fill, .sprite .rcard .sigline { transition-duration: 1.6s; }
/* the music sits beside "live" at the very top, clear of the next game's panel */
.sprite.wide .music { top: 3px; right: 12px; }
.sprite.wide .live { top: 34px; }
/* In Discord on a phone its own bar (the Activity's name, Leave) lies over the top of the page: what sits up there
   moves below it */
.in-discord .tall .tut-q, .in-discord .tall .live { top: 76px; }
.in-discord .tall .music { top: 104px; }
.sprite .rcard .lbl { display: none; }
.sprite.wide .cs-offer { top: 336px; left: 40px; right: 40px; bottom: 10px; justify-content: center; }
.sprite .cs-offer { background: #0d0314; }
.sprite.tall .rule { left: 56px; right: 56px; width: auto; top: 366px; letter-spacing: .14em; }
.sprite.tall .hand.dealer { top: 390px; }
.sprite.tall .total.dealer { top: 504px; }
.sprite.tall .dres { top: 380px; }
.sprite.tall .cs-offer { top: 430px; }
/* the written plea, its card and (on phones) the rhythm ring lie on the felt too, the plea box compacted */
.sprite .pleabox { gap: 7px; padding: 12px 14px; background: #0d0314; }
.sprite .pleabox p { display: none; }
.sprite .pleabox textarea { height: 50px; }
.sprite .pleabox button { height: 34px; }
.sprite.wide .pleabox { left: 196px; width: 440px; top: calc(338px + var(--xm)); }
.sprite.tall .pleabox { left: 40px; right: 40px; top: 384px; }
.sprite .pleacard { background: #0d0314; }
.sprite.wide .pleacard { left: 206px; width: 420px; top: 336px; }
.sprite.tall .pleacard { left: 40px; right: 40px; top: 150px; }
.sprite.tall .beatring { left: 180px; top: 150px; }
.sprite.tall .meter { left: 421px; width: 190px; top: 222px; transform: rotate(-90deg); }
/* A popup the player has to answer (her cases offer, a deal round's results, your turn to write a plea):
   everything else darkens and blurs a little; she, her bubbles and the popup stay sharp (Linus, pick A).
   The rewards at a game's end count as one.
   The deal keeps only its Ready button while results show, so it stays sharp too */
body.sprite:has(.pleabox:not([hidden]), .cs-offer:not([hidden]), .dres:not([hidden]), .rewards:not([hidden]), .accuse:not([hidden])) :is(.chatpanel, .side, .scene .up, .scene .down, .railcv,
  .screen > :not(.say, .wsay, .pleabox, .cs-offer, .dres, .deal.resulting, .rewards, .accuse, .spot, .rw-big, .rw-flash, .cs-reveal, .finale)) { filter: brightness(.55) blur(2px); animation: popDim .3s ease-out; }
body.sprite:has(.pleabox:not([hidden]), .cs-offer:not([hidden]), .dres:not([hidden]), .rewards:not([hidden]), .accuse:not([hidden])) .page::before { filter: blur(3px) brightness(.45); }
.sprite .page::before { transition: filter .3s ease; }
@keyframes popDim { from { filter: none; } }
/* buttons get a solid dark base under their colour, so the spiral does not show through them */
.sprite .btn { background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 48%), linear-gradient(var(--btn-bg), var(--btn-bg)), linear-gradient(rgba(16,4,22,.92), rgba(16,4,22,.92)); }
/* The table (Linus, 2026-10-22: like the casino's roulette table, "pink purple hypnotic"): a glossy plum
   rail with gold edges along its top, which she stands behind; under the game dark plum felt with a pink
   and violet spiral turning very slowly, darkened toward the edges and under its top band so the cards and
   buttons read */
/* The rail curves like the far edge of a round table seen from above (Linus): highest behind her, lower
   toward the sides. It is drawn (drawRail), so its shading follows the curve, and drawRail cuts the felt
   to the rail's inner edge */
.scene .down { top: var(--felt-y); bottom: 0; overflow: hidden; background: #1c0624; }
.sprite.wide .tables { top: 266px; }
.railcv { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; }
.scene .down::before { content: ""; position: absolute; left: 50%; top: 58%; width: 1700px; height: 1700px; margin: -850px 0 0 -850px;
  background: url(/media/stage/spiral-tone.svg?v=cb32c5f72b) center / contain no-repeat; }
/* What is drawn once stays on its own layer, so a change in the game does not paint the picture again */
.scene .down::before, .sprite .screen { will-change: transform; }
/* The cloth (Linus: "like a casino table cloth texture", from his felt photo greyscaled): the photo's fibres
   around mid-grey, blended over the felt and its spiral so they texture it without changing its colour */
.scene .down .cloth { position: absolute; inset: 0; background: url(/media/stage/cloth.webp?v=761bffb669) 0 0 / 1480px 988px repeat;
  mix-blend-mode: overlay; opacity: .6; will-change: transform; }
.scene .down::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 72% 95% at 50% 62%, transparent 0%, rgba(18,4,26,.3) 52%, rgba(14,3,20,.88) 100%),
    linear-gradient(180deg, rgba(14,3,20,.8) 0, rgba(14,3,20,.3) 64px, transparent 130px); }
@keyframes tableSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scene .down::before { animation: none; } }
.sprite .screen { background: transparent; }
/* Her speech bubble (Linus's pick A): beside her head, its tail at her mouth; it pops in on each line,
   stays a while by its length, and fades. Nothing shows while she is quiet */
.sprite .say { z-index: 5; max-width: 250px; padding: 11px 15px; border-radius: 20px; background: #fbf3ff; color: #1d0a29; border: 2px solid var(--pink);
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 18px rgba(255,36,146,.35); font: 600 16px/1.35 var(--sans); pointer-events: none;
  opacity: 0; transform: scale(.5); transform-origin: 100% 30px; transition: opacity .3s ease, transform .3s ease; }
.sprite .say { left: auto; }
.sprite.tall .say { font-size: 17px; }
/* Her whispers, green, on the other side of her head: only you see them; a tap opens the whispers */
.wsay { position: absolute; z-index: 5; padding: 10px 15px; border-radius: 20px; background: #eaffde; color: #0c2706; border: 2px solid var(--toxic);
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 18px rgba(57,255,20,.4); font: 600 15px/1.35 var(--sans); cursor: pointer;
  opacity: 0; transform: scale(.5); transform-origin: 0 30px; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.wsay[hidden] { display: none; }
.wsay small { display: block; font: 700 9px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #2f7a1a; margin-bottom: 2px; }
.wsay.show { opacity: 1; transform: none; pointer-events: auto; }
.wsay.show.pop { animation: bubblePop .45s cubic-bezier(.2,1.6,.4,1); }
.wsay.show.bump, .sprite .say.show.bump { animation: bubbleBump .3s ease-out; }
@keyframes bubbleBump { 0% { transform: scale(1.05); } 100% { transform: none; } }
.wsay::before, .wsay::after { content: ""; position: absolute; top: 22px; border-style: solid; }
.wsay::before { left: -21px; border-width: 11px 20px 11px 0; border-color: transparent var(--toxic) transparent transparent; }
.wsay::after { left: -16px; top: 24px; border-width: 9px 17px 9px 0; border-color: transparent #eaffde transparent transparent; }
.sprite .wtoast { display: none !important; }
.sprite .say b { display: none; }
.sprite .say.show { opacity: 1; transform: none; }
.sprite .say.show.pop { animation: bubblePop .45s cubic-bezier(.2,1.6,.4,1); }
.sprite .say::before, .sprite .say::after { content: ""; position: absolute; top: 22px; border-style: solid; }
.sprite .say::before { right: -21px; border-width: 11px 0 11px 20px; border-color: transparent transparent transparent var(--pink); }
.sprite .say::after { right: -16px; top: 24px; border-width: 9px 0 9px 17px; border-color: transparent transparent transparent #fbf3ff; }
@keyframes bubblePop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
.sprite .felt { background: none; }
/* She stands in the scene, scaled to the room above the counter; fit() sizes and places her */
.vyecv { position: absolute; pointer-events: none; clip-path: inset(0 0 1.2% 0); }
/* What covered her moves into the side columns (lay-a, the layout Linus picked) */
.lay-a.wide .hand.dealer { left: -29px; width: 300px; top: 152px; transform: scale(.7); transform-origin: 50% 0; }
.lay-a.wide .total.dealer { left: 121px; top: 240px; }
.lay-a.wide .peek { left: 121px; top: 266px; }
.lay-a.wide .rule { top: 294px; line-height: 1.55; }
.lay-a.wide .meter { left: 28px; width: 602px; top: 392px; }
.lay-a.wide .seats { top: 412px; height: calc(128px + var(--xh)); }
.lay-a.wide .lobtable { top: 414px; height: 118px; }
.lay-a.wide .pleacard { left: 726px; width: 222px; top: 64px; }
.lay-a.wide .beatring { left: 750px; top: 90px; }
.lay-a.rhythm-on .next { visibility: hidden; }
.lay-a.wide .tables { left: 14px; top: 326px; }

/* Deal with Vye (2026-10-21; its cards 2026-10-22, Linus's pick): three cards built alike, her change
   and yours side by side, two lines of what else happens, the rules behind a ?; under each a bar of
   how many signalled it (a full bar is every player), All in's need dashed on it, and − and + in the
   card's colour to signal it or take it back. After the round the bars show the real votes. */
.deal { position: absolute; display: flex; flex-direction: column; gap: 4px; }
.wide .deal { left: 22px; right: 22px; top: calc(349px + var(--xm)); }
.tall .deal { left: 18px; right: 18px; top: 414px; gap: 8px; }
.deal .dhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 10px; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ghost); }
.tall .deal .dhead { grid-template-columns: 1fr auto; }
.deal .dhead b { color: var(--hot); font-weight: 700; }
.deal .dhead .st { font: 14px var(--display); letter-spacing: .05em; color: var(--ink); text-align: center; }
.tall .deal .dhead .st { grid-column: 1 / -1; grid-row: 2; }
.deal .dhead .st.win { color: var(--green); } .deal .dhead .st.lose { color: var(--hot); } .deal .dhead .st.you { color: var(--toxic); }
.deal .dhead .chance { font: 14px var(--display); letter-spacing: .05em; color: var(--ink); text-transform: none; text-align: right; }
.deal .dhead .chance i { font-style: normal; color: var(--gold); }
.deal .dtimer { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.deal .dtimer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.deal .cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tall .deal .cards3 { grid-template-columns: 1fr; gap: 10px; }
.dopt { --i: #ffb07a; --l: #b4612e; --b: rgba(255,90,20,.10); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dopt.safe { --i: #a8d2ff; --l: #3d6ea3; --b: rgba(77,163,255,.10); }
.dopt.sell { --i: #b9ffa6; --l: #3f8a2a; --b: rgba(57,255,20,.07); }
.dcard { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 8px 5px; border-radius: 12px; border: 1px solid var(--l); background: var(--b);
  color: var(--ink); text-align: center; cursor: pointer; transition: transform .12s ease, box-shadow .15s; font: 11px var(--mono); }
.dcard:disabled { cursor: default; }
.dcard:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 0 16px color-mix(in srgb, var(--i) 45%, transparent); }
.dcard .t { font: 700 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--i); }
.dcard .q { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; border: 1px solid currentColor; font: 700 10px var(--mono); font-style: normal; opacity: .75; vertical-align: 2px; cursor: help; }
.dcard .nums { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 4px 0 3px; }
.dcard .nums > span + span { border-left: 1px solid rgba(255,255,255,.1); }
.dcard .nums b { display: block; font: 700 17px var(--mono); color: #fff; }
.dcard .nums small { font: 10px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.dcard .c, .dcard .c2 { font: 11px/1.35 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dcard .c em { font-style: normal; color: var(--ink); font-weight: 700; }
.dcard .c2.risk { color: #ff8fb2; } .dcard .c2.good { color: #9dffc0; }
/* the rules lie over the card, so it keeps its size and the three stay alike */
.dcard .help { display: none; position: absolute; left: 8px; right: 8px; top: 26px; bottom: 5px; overflow: hidden; font: 10.5px/1.35 var(--mono); color: var(--ink); }
.dcard.helping .nums, .dcard.helping .c, .dcard.helping .c2 { visibility: hidden; }
.dcard.helping .help { display: flex; align-items: center; justify-content: center; }
/* on phones each card is a row: what it is on the left, her change and yours as two columns on the right */
.tall .dcard { display: grid; grid-template-columns: 1fr 72px 72px; grid-template-rows: auto auto auto; align-items: center; column-gap: 8px; text-align: left; padding: 7px 10px; }
.tall .dcard .t { grid-column: 1; grid-row: 1; }
.tall .dcard .c { grid-column: 1; grid-row: 2; }
.tall .dcard .c2 { grid-column: 1; grid-row: 3; }
.tall .dcard .nums { display: contents; }
.tall .dcard .nums > span { grid-row: 1 / span 3; text-align: center; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.1); }
.tall .dcard .nums > span:first-child { grid-column: 2; }
.tall .dcard .nums > span + span { grid-column: 3; }
.tall .dcard .help { top: 5px; left: 10px; right: 10px; text-align: left; justify-content: flex-start; }
.tall .dcard.helping .t { visibility: hidden; }
.tall .deal .cards3 { gap: 8px; }
.dcard.mine { box-shadow: inset 0 0 0 2px var(--i); }
.dcard.won { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255,216,77,.55); }
.dcard.lost { opacity: .5; }
/* Signalling is one button; − and + only while her traitor rigs the bars */
.pm { display: grid; grid-template-columns: 1fr 30px 82px; gap: 6px; align-items: center; }
.pm [data-sig="minus"], .pm [data-sig="plus"] { display: none; }
.pm.rigging { grid-template-columns: 22px 1fr 22px 30px; }
.pm.rigging [data-sig="minus"], .pm.rigging [data-sig="plus"] { display: block; }
.pm.rigging .sigone { display: none; }
.pm .sigone { width: auto; height: 22px; border-radius: 7px; border: 1px dashed var(--i); background: none; color: var(--i); font: 700 10px var(--mono);
  letter-spacing: .08em; text-transform: uppercase; padding: 0 8px; cursor: pointer; white-space: nowrap; }
.pm .sigone.on { border-style: solid; background: color-mix(in srgb, var(--i) 22%, transparent); color: #fff; }

/* a round's results, big in the middle: each choice fills with the votes it got, the signals dashed on it */
.deal.resulting .cards3 { display: none; }
.dres { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px;
  background: rgba(10,3,16,.9); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: pop .3s ease-out; }
.dres[hidden] { display: none; }
.wide .dres { left: 150px; right: 150px; top: 28px; }
.tall .dres { left: 16px; right: 16px; top: 520px; }
.dres .rhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dres .rhead .st { font: 20px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.dres .rhead .st.win { color: var(--green); } .dres .rhead .st.lose { color: var(--hot); }
.dres .rhead .chance { font: 15px var(--display); color: var(--ink); white-space: nowrap; }
.dres .rhead .chance i { font-style: normal; color: var(--gold); }
.dres .rcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rcard { --i: #ffb07a; --l: #b4612e; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 12px 0 0; border-radius: 14px; border: 1px solid var(--l); background: rgba(255,255,255,.03); text-align: center; }
.rcard.safe { --i: #a8d2ff; --l: #3d6ea3; } .rcard.sell { --i: #b9ffa6; --l: #3f8a2a; }
/* the meter under the text: the votes fill it, a full meter is every player; the signals are the dashed line */
.rcard .rmeter { display: block; position: relative; align-self: stretch; height: 74px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); }
.rcard .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: color-mix(in srgb, var(--i) 34%, transparent);
  border-top: 2px solid var(--i); transition: height .9s cubic-bezier(.2,.8,.2,1); }
.rcard .sigline { position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px dashed #fff; transition: bottom .9s cubic-bezier(.2,.8,.2,1); }
.rcard .sigline span { position: absolute; right: 4px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: rgba(10,3,16,.85); font: 700 10px var(--mono); color: #fff; white-space: nowrap; }
.rcard .t { font: 700 15px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--i); }
.rcard .big { font: 42px/1.05 var(--display); color: #fff; margin-top: 8px; }
.rcard .lbl { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }
.rcard .names { font: 11px/1.4 var(--mono); color: var(--ink); margin: 4px 0 8px; padding: 0 6px; max-width: 100%; min-height: 15px; }
.rcard.won { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(255,216,77,.5); }
.rcard.won::after { content: "the table's move"; position: absolute; left: 0; right: 0; top: 0; padding: 2px 0; background: var(--gold); color: #1a0f00;
  font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.rcard.won .t { margin-top: 10px; }
.rcard.lost { opacity: .6; }
.pm button { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--i); background: color-mix(in srgb, var(--i) 12%, transparent);
  color: var(--i); font: 700 14px var(--mono); line-height: 1; padding: 0; cursor: pointer; }
.pm button:disabled { opacity: .3; cursor: default; }
.pm.rigging button { border-color: var(--toxic); color: var(--toxic); background: rgba(57,255,20,.12); }
.pm .track { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.pm .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--i); opacity: .85; transition: width .25s ease; }
.pm .track .need { position: absolute; top: -5px; bottom: -5px; border-left: 2px dashed #fff; }
.pm .track .need[hidden] { display: none; }
.pm b { font: 700 11px var(--mono); color: var(--ink); text-align: right; }
.pm.done button { visibility: hidden; }
.deal .dfoot { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.deal .dnote { flex: 1 1 auto; font: 11px/1.4 var(--mono); color: var(--dim); }
.deal .dnote b { color: var(--ink); }
.deal .dfoot .btn.ready { width: auto; height: auto; padding: 4px 14px; font-size: 13px; white-space: nowrap; line-height: 1.2; }
.deal .dfoot .btn.ready small { display: block; font: 9px var(--mono); letter-spacing: .04em; text-transform: none; opacity: .8; }
.spy { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--toxic);
  background: rgba(3,20,6,.9); color: #b9ffa6; font: 11px/1.4 var(--mono); box-shadow: 0 0 14px rgba(57,255,20,.35); z-index: 2; }
.spy[hidden] { display: none; }
.wide .spy { left: 14px; top: 118px; width: 214px; }
.tall .spy { left: 14px; right: 14px; top: 92px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.tall .spy > b, .tall .spy > .need, .tall .spy > .rigline, .tall .spy > .rigbtn { grid-column: 1 / -1; }
.spy .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spy .col > i { font-style: normal; color: var(--ghost); }
.spy b { color: var(--toxic); font: 12px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.spy .row { display: flex; justify-content: space-between; gap: 8px; }
/* The sentence's change of a word, for whoever works for her (theatrum sentence_change.go): the For your eyes box */
.tall .spy.sc:not([hidden]) { display: flex; }
.spy .sc-what { color: var(--ink); }
.spy .sc-what b { color: var(--gold); font: 700 13px var(--sans); letter-spacing: 0; text-transform: none; }
.spy .sc-form { display: flex; gap: 6px; margin-top: 4px; }
.spy .sc-form[hidden] { display: none; }
.spy .sc-form input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--toxic); background: rgba(0,0,0,.45);
  color: var(--ink); font: 13px var(--sans); }
.spy .sc-form button { flex: 0 0 auto; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--toxic); background: rgba(57,255,20,.2); color: var(--toxic);
  font: 700 11px var(--mono); cursor: pointer; }
.spy .sc-note { color: var(--dim); }
.spy .sc-note.bad { color: var(--hot); }
.sent .w.ch b::before { content: "✂️"; font-size: 12px; margin-right: 2px; }
.spy .rigbtn { margin-top: 4px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--toxic); background: rgba(57,255,20,.14); color: var(--toxic); font: 700 11px var(--mono); cursor: pointer; }
.spy .v-all_in { color: #ffb07a; } .spy .v-safe { color: #a8d2ff; } .spy .v-sell_out { color: var(--toxic); }
.sent { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px; border-radius: 14px;
  background: rgba(10,3,16,.78); border: 1px solid var(--line); }
.wide .sent { left: 24px; right: 24px; top: calc(368px + var(--xm)); min-height: 92px; }
.tall .sent { left: 18px; right: 18px; top: 418px; min-height: 196px; }
.sent .goal { display: flex; justify-content: space-between; gap: 12px; font: 700 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ghost); }
.sent .goal b { color: var(--hot); font-weight: 700; }
.sent .line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 9px; font-size: 21px; line-height: 1.25; }
.tall .sent .line { font-size: 23px; gap: 10px 10px; }
.sent .her { color: var(--pink); font-style: italic; text-shadow: 0 0 12px rgba(255,36,146,.45); }
.sent .w { display: inline-flex; flex-direction: column; align-items: center; }
.sent .w b { color: var(--ink); font-weight: 800; }
.sent .w small { font: 9px var(--mono); color: var(--ghost); letter-spacing: .04em; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent .gap { display: inline-block; width: 44px; height: 24px; border-bottom: 2px solid rgba(255,255,255,.3); }
.sent .gap.now { border-color: var(--toxic); box-shadow: 0 6px 10px -6px rgba(57,255,20,.8); animation: blink 1s steps(2, start) infinite; }
.sent .mark { color: var(--gold); font: 700 18px var(--mono); }
.sentstatus { position: absolute; font: 19px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.wide .sentstatus { left: 24px; width: 470px; top: calc(472px + var(--xm)); }
.tall .sentstatus { left: 0; right: 0; top: 632px; text-align: center; }
.sentstatus.win { color: var(--green); text-shadow: 0 0 18px rgba(125,255,43,.6); }
.sentstatus.lose { color: var(--hot); text-shadow: 0 0 18px rgba(255,36,146,.6); }
.sentstatus.you { color: var(--toxic); text-shadow: 0 0 14px rgba(57,255,20,.7); }
.senttimer { position: absolute; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.wide .senttimer { left: 24px; width: 470px; top: calc(502px + var(--xm)); }
.tall .senttimer { left: 60px; right: 60px; top: 668px; }
.senttimer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.sentctl { position: absolute; display: flex; gap: 10px; align-items: center; }
.wide .sentctl { left: 510px; right: 24px; top: calc(468px + var(--xm)); justify-content: flex-end; }
.tall .sentctl { left: 18px; right: 18px; top: 690px; justify-content: center; flex-wrap: wrap; }
.sentctl form { display: flex; gap: 8px; }
.sentctl form[hidden], .sentctl .btn[hidden] { display: none; }
.sentctl input { width: 190px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--toxic); background: rgba(0,0,0,.65);
  color: var(--ink); font: 18px var(--sans); outline: none; box-shadow: 0 0 14px rgba(57,255,20,.35); }
.tall .sentctl input { width: 300px; font-size: 20px; }
.sentctl .btn { width: auto; height: 46px; padding: 0 16px; font-size: 15px; letter-spacing: .1em; white-space: nowrap; }
.wide .sentctl input { width: 150px; }
.sentctl .btn small { display: block; font: 10px var(--mono); letter-spacing: .04em; opacity: .75; text-transform: none; }
.sentctl .btn.finish { --btn-line: rgba(255,216,77,.7); --btn-bg: rgba(255,216,77,.12); color: #ffe9a6;
  min-width: 176px; padding: 0 14px; font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
.sentctl .btn.finish small { letter-spacing: 0; }
/* lit as soon as anybody wants to finish, so the rest see it */
.sentctl .btn.finish.some { --btn-line: #ffd84d; --btn-bg: rgba(255,216,77,.26); color: #fff3c4; animation: finishGlow 1.1s ease-in-out infinite alternate; }
.sentctl .btn.finish.on { box-shadow: inset 0 0 0 2px currentColor; background-color: rgba(255,216,77,.3); }
@keyframes finishGlow { from { filter: drop-shadow(0 0 2px rgba(255,216,77,.4)); } to { filter: drop-shadow(0 0 12px rgba(255,216,77,.95)); } }
.sentctl.ping form { animation: glow .4s ease-in-out 4 alternate; }
/* her clue on the button it is about: a tip's range, or for her traitor the next card itself */
.btn small.clue { opacity: 1; color: #031; background: var(--toxic); border-radius: 4px; padding: 1px 6px; margin: 2px auto 0; width: max-content;
  font-weight: 700; box-shadow: 0 0 10px rgba(57,255,20,.8); text-transform: none; }
/* a hand's recap, where the voting was, while its result shows */
.recap { position: absolute; display: none; flex-direction: column; gap: 2px; font: 11px/1.35 var(--mono); color: var(--dim); }
/* the calls' history under a hand is not shown (Linus, 2026-10-23: "i dont think we need this history showing") */
.recap.on { display: none; }
.wide .recap { left: 520px; width: 400px; top: calc(426px + var(--xm)); text-align: center; }
.tall .recap { left: 20px; right: 20px; top: 738px; text-align: center; }
.recap b { color: var(--ink); font-weight: 600; }
.recap .drew { color: var(--gold); }
.wide .buttons.waiting { top: calc(484px + var(--xm)); }
.tall .buttons.waiting { top: 796px; }
.buttons.waiting .btn.ready { height: 46px; font-size: 16px; }

/* ---------- a raffle's break between games, and the vote on her traitor (theatrum session.go) ---------- */
.rbreak { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 18px; border-radius: 14px;
  background: rgba(13,3,20,.92); border: 1px solid rgba(255,216,77,.45); box-shadow: 0 10px 30px rgba(0,0,0,.6); text-align: center; pointer-events: none; }
.rbreak[hidden] { display: none; }
.wide .rbreak { left: 300px; right: 300px; top: calc(372px + var(--xm)); }
.tall .rbreak { left: 60px; right: 60px; top: 430px; }
.rbreak small { font: 700 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rbreak b { font: 22px var(--display); letter-spacing: .05em; color: var(--ink); }
.rbreak span { font: 12px var(--mono); color: var(--dim); }
.accuse { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 16px;
  background: #0d0314; border: 1px solid rgba(255,36,146,.5); box-shadow: 0 10px 34px rgba(0,0,0,.7); text-align: center; }
.accuse[hidden] { display: none; }
.wide .accuse { left: 150px; right: 150px; top: calc(322px + var(--xm)); }
.tall .accuse { left: 20px; right: 20px; top: 384px; }
.accuse small { font: 700 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hot); }
.accuse b { font: 24px var(--display); letter-spacing: .05em; color: var(--ink); }
.accuse p { margin: 0; font: 12px/1.4 var(--mono); color: var(--dim); }
.ac-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ac-row button { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: 17px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.ac-row button .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.12); font: 700 11px var(--mono); }
.ac-row button .av img { width: 100%; height: 100%; object-fit: cover; }
.ac-row button.on { border-color: var(--hot); background: rgba(255,36,146,.22); box-shadow: 0 0 14px rgba(255,36,146,.45); }
.ac-row button:disabled { cursor: default; opacity: .7; }
.ac-left { font: 12px var(--mono); color: var(--ghost); }
.rw-named { font: 700 11px var(--mono); letter-spacing: .08em; color: var(--dim); text-shadow: 0 1px 2px #000; }
.rw-named.right { color: var(--green); }
.meter.off { display: none !important; }
/* the mark where a bar's meter starts the countdown */
.meter .bar { position: relative; }
.meter.bar-phase .bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(var(--mark, .5) * 100%); width: 2px;
  background: var(--gold); box-shadow: 0 0 6px var(--gold); pointer-events: none; }

/* ---------- the vote's verdict (Linus's pick: a spotlight sweep) ---------- */
.spot { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 55%, rgba(14,3,22,.82) 0%, rgba(4,0,8,.95) 70%); animation: fIn .35s ease-out; pointer-events: none; }
.spot[hidden] { display: none; }
.sp-kick { font: 700 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--hot); }
.sp-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; max-width: 86%; padding: 18px 10px; }
.sp-chip { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; filter: brightness(.45); transition: filter .15s ease; }
.sp-chip .av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.25); font: 700 20px var(--mono); color: var(--ink); }
.sp-chip .av img { width: 100%; height: 100%; object-fit: cover; }
.sp-chip .nm { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px var(--sans); color: var(--ink); }
.sp-chip.lit { filter: none; }
.sp-light { position: absolute; z-index: 0; left: 0; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,250,232,.9) 0%, rgba(255,226,120,.45) 34%, rgba(255,216,77,.12) 56%, transparent 72%);
  box-shadow: 0 0 60px rgba(255,226,120,.35);
  transition: transform .2s cubic-bezier(.3,.8,.3,1), opacity .3s ease; }
.sp-light.on { opacity: 1; }
.sp-chip.traitor .av { border-color: #ff2452; box-shadow: 0 0 24px #ff2452, 0 0 60px rgba(255,36,82,.6); animation: spGlitch .45s steps(2) 3; }
.sp-chip.innocent .av { border-color: rgba(255,255,255,.5); }
.sp-chip .stamp { position: absolute; top: 14px; left: 50%; transform: translateX(-50%) rotate(-14deg) scale(2.4); opacity: 0; white-space: nowrap;
  padding: 2px 8px; border: 3px solid currentColor; border-radius: 6px; font: 18px var(--display); letter-spacing: .06em;
  animation: spStamp .35s cubic-bezier(.2,1.4,.4,1) forwards; }
.sp-chip.traitor .stamp { color: #ff2452; text-shadow: 0 0 10px #ff2452; }
.sp-chip.innocent .stamp { color: #e9e2f2; }
@keyframes spStamp { to { transform: translateX(-50%) rotate(-14deg) scale(1); opacity: 1; } }
@keyframes spGlitch { 0% { transform: translate(2px, -1px); filter: hue-rotate(40deg); } 50% { transform: translate(-3px, 1px); } 100% { transform: none; filter: none; } }
.sp-verdict { min-height: 1.1em; font: 40px var(--display); letter-spacing: .06em; color: var(--ink); text-shadow: 0 0 18px rgba(0,0,0,.9); }
.sp-verdict.right { color: #ff2452; text-shadow: 0 0 22px rgba(255,36,82,.9); animation: spGlitch .4s steps(2) 4; }
.sp-verdict.wrong { color: #e9e2f2; }
.sp-sub { min-height: 1.2em; font: 14px var(--mono); color: var(--dim); }
.sp-sub b { color: var(--gold); font-size: 18px; }
.tall .sp-verdict { font-size: 34px; }

/* ---------- a card opened in the middle (Linus's pick: like a pack) ---------- */
.rw-big { --cw: var(--bw); position: absolute; z-index: 8; left: 50%; top: 46%; width: var(--bw); aspect-ratio: 240 / 340; isolation: isolate;
  margin: calc(var(--bw) * -.708) 0 0 calc(var(--bw) * -.5); perspective: 900px; pointer-events: none;
  transition: transform .5s cubic-bezier(.2,.9,.25,1), opacity .25s ease; }
.wide .rw-big { --bw: 230px; }
.tall .rw-big { --bw: 290px; }
.rw-big[hidden] { display: none; }
.rw-big .rw-flip { width: 100%; height: 100%; }
.rw-big .rw-flip img { border-radius: 9% / 6.4%; box-shadow: 0 18px 50px rgba(0,0,0,.75); }
.rw-big .rw-flip .rw-face { box-shadow: 0 18px 50px rgba(0,0,0,.75), 0 0 40px var(--rc), 0 0 90px var(--rc); }
.rw-big.build .rw-flip { animation: rwBuild .09s linear infinite; }
.rw-big.build::before { content: ""; position: absolute; z-index: -1; inset: -40%; border-radius: 50%; background: radial-gradient(circle, var(--rc) 0%, transparent 62%);
  opacity: .75; animation: rwSwell .6s ease-in-out infinite alternate; }
.rw-big.open .rw-flip { transform: rotateY(180deg); }
.rw-big .rw-burst { top: 50%; width: calc(var(--bw) * 2); border-width: 5px; }
.rw-big .rw-rays { top: 50%; width: calc(var(--bw) * 3.4); }
@keyframes rwSwell { from { transform: scale(.9); opacity: .5; } to { transform: scale(1.15); opacity: .9; } }
.rw-spark { position: absolute; z-index: 3; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--rc);
  box-shadow: 0 0 8px var(--rc); animation: rwSpark var(--t, .9s) cubic-bezier(.1,.7,.3,1) forwards; pointer-events: none; }
@keyframes rwSpark { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.rw-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(circle at 50% 46%, var(--rc) 0%, transparent 70%);
  opacity: 0; animation: rwFlash .9s ease-out; }
.rw-flash[hidden] { display: none; }
@keyframes rwFlash { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
.rw-card.lifted { visibility: hidden; }

/* ---------- the rewards: the game's prizes as cards (Linus, 2026-10-22, his pick A) ----------
   After the finale every prize is dealt face down in a row on the felt, worst to best, and they open one
   by one, the best last: a rarer card shakes and glows first, then flips to its rarity's face (custodia's
   card art) with a burst in its colour, and its winner's name comes up under it. */
.rewards { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.rewards[hidden] { display: none; }
.wide .rewards { left: 30px; right: 30px; top: 312px; bottom: 6px; }
.tall .rewards { left: 12px; right: 12px; top: 372px; bottom: 92px; }
.rewards-on .over { visibility: hidden; }
.rw-kick { font: 700 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 2px #000, 0 0 8px #000; }
.rw-kick.test { color: var(--toxic); }
/* her roll, before the cards: her chance and who won */
.rw-roll { font: 20px/1.15 var(--display); letter-spacing: .05em; color: var(--ink); text-shadow: 0 2px 6px #000; animation: rwRoll .5s cubic-bezier(.2,1.5,.4,1) both; }
.rw-roll i { font-style: normal; color: var(--gold); }
.rw-roll.room { color: var(--green); } .rw-roll.hers { color: var(--hot); }
@keyframes rwRoll { from { transform: scale(.6); opacity: 0; } }
.rw-none { font: 34px var(--display); letter-spacing: .06em; color: var(--hot); text-shadow: 0 0 18px rgba(255,36,146,.6); animation: rwRoll .6s .9s cubic-bezier(.2,1.5,.4,1) both; }

.rw-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.rw-card { --rc: #cfd6e6; position: relative; isolation: isolate; width: var(--cw); display: flex; flex-direction: column; align-items: center; gap: 5px;
  perspective: 700px; animation: rwDeal .5s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(900ms + var(--i) * 110ms); }
@keyframes rwDeal { from { transform: translate(var(--fx, 0), var(--fy, -120px)) rotate(-14deg) scale(.55); opacity: 0; } }
.rw-card::before { content: ""; position: absolute; z-index: -1; left: -45%; right: -45%; top: calc(var(--cw) * .708 - var(--cw) * .95); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, var(--rc) 0%, transparent 62%); opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.rw-card.build::before { opacity: .6; }
.rw-card.open::before { opacity: .3; }
.rw-card.open.r-common::before { opacity: 0; }
.rw-flip { position: relative; width: 100%; aspect-ratio: 240 / 340; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.35,.5,1); }
.rw-flip img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 9% / 6.4%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.65); }
.rw-flip .rw-face { transform: rotateY(180deg); box-shadow: 0 6px 16px rgba(0,0,0,.65), 0 0 16px var(--rc); }
.rw-card.build .rw-flip { animation: rwBuild .11s linear infinite; }
.rw-card.open .rw-flip { transform: rotateY(180deg); }
@keyframes rwBuild { 0%, 100% { transform: none; } 25% { transform: translateX(-2px) rotate(-1.6deg); } 75% { transform: translateX(2px) rotate(1.6deg); } }
.rw-burst { position: absolute; z-index: 2; left: 50%; top: calc(var(--cw) * .708); width: calc(var(--cw) * 1.5); aspect-ratio: 1; border: 3px solid var(--rc);
  border-radius: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 1; pointer-events: none; animation: rwBurst .7s ease-out forwards;
  box-shadow: 0 0 18px var(--rc), inset 0 0 18px var(--rc); }
@keyframes rwBurst { to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.rw-rays { position: absolute; z-index: -2; left: 50%; top: calc(var(--cw) * .708); width: calc(var(--cw) * 2.6); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 6deg, transparent 6deg 22deg); opacity: 0;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%); mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  transform: translate(-50%, -50%); animation: rwRays 6s linear infinite, rwRaysIn .6s ease-out forwards; }
@keyframes rwRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rwRaysIn { to { opacity: .45; } }
.rw-who { display: flex; align-items: center; gap: 4px; width: calc(var(--cw) + 8px); min-width: 0; justify-content: center; opacity: 0; transform: translateY(-6px);
  transition: opacity .35s ease .25s, transform .35s ease .25s; font: 600 12px var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; }
.rw-card.open .rw-who { opacity: 1; transform: none; }
.rw-who .av { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.12); font: 700 10px var(--mono); }
.rw-who .av img { width: 100%; height: 100%; object-fit: cover; }
.rw-who .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "you" and "for her" are a badge on the card's top edge, so the name has the whole line; "for her" shows
   once the card is open */
.rw-tag { position: absolute; z-index: 3; top: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 700 8px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #1a0010; background: var(--pink); padding: 0 4px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rw-tag.hers { background: var(--toxic); color: #062000; opacity: 0; transition: opacity .3s ease .3s; }
.rw-card.open .rw-tag.hers { opacity: 1; }
.rw-tag + .rw-tag { top: 8px; }
.rw-card.mine .rw-flip img { outline: 2px solid var(--pink); outline-offset: 2px; }
.rw-sum { margin: 0; min-height: 1.4em; font: 12px var(--mono); color: var(--dim); text-align: center; text-shadow: 0 1px 2px #000, 0 0 8px #000;
  opacity: 0; transition: opacity .4s ease; }
.rw-sum b { color: var(--ink); }
.rewards.done .rw-sum { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rw-card, .rw-card *, .rw-card::before { animation: none !important; transition: none !important; } }

/* ---------- the finale: a game's end, the vault's way (shiny when it went well, corrupted when not) ---------- */
.finale-on .over { visibility: hidden; }
.finale { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; overflow: hidden; background: rgba(6,1,10,.93);
  backdrop-filter: blur(3px); cursor: pointer; animation: fIn .35s ease-out; }
.finale[hidden] { display: none; }
@keyframes fIn { from { opacity: 0; } to { opacity: 1; } }
.finale .fx { position: absolute; inset: 0; pointer-events: none; }
.fbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(86%, 640px); text-align: center; --fc: var(--violet); }
.fbox small { font: 700 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ghost); }
.ftitle { position: relative; font: 46px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; line-height: 1.05; }
.tall .ftitle { font-size: 40px; }
.fbar { position: relative; width: 100%; height: 30px; border-radius: 999px; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.22); overflow: hidden; }
.fbar[hidden], .fscore[hidden] { display: none; }
.fbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; transition: width .42s cubic-bezier(.4,0,.2,1), background .3s;
  background: linear-gradient(90deg, #7a0b4d, var(--pink) 50%, var(--gold)); box-shadow: 0 0 18px rgba(255,36,146,.7); }
.fbar b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 16px var(--mono); color: #fff; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.fbar .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.35); }
.fscore { font: 30px var(--display); letter-spacing: .08em; color: var(--ink); }
.fsent { margin: 0; font: italic 19px/1.4 var(--sans); color: var(--ink); max-width: 100%; }
.fwhy { margin: 0; font: 12px/1.5 var(--mono); color: var(--dim); }
.fwhy b { color: var(--ink); }
.fclose { font: 10px var(--mono); color: var(--ghost); letter-spacing: .12em; text-transform: uppercase; }
/* it went well: gold rays turning, a ring going out, sparks and glitter, the title in a moving sheen */
.finale.good .fbox { --fc: #ffd84d; }
.finale.good .ftitle { background: linear-gradient(90deg, #fff, #ffd84d, #fff, #ff67bd, #fff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 0 18px rgba(255,216,77,.75)); animation: fSheen 2.6s linear infinite, fPop .5s cubic-bezier(.2,1.6,.4,1); }
.finale.good .fbar i { background: linear-gradient(90deg, #ffb347, #ffd84d 60%, #fff6c0); box-shadow: 0 0 26px rgba(255,216,77,.95); }
.finale.good .fbar { border-color: #ffd84d; box-shadow: 0 0 22px rgba(255,216,77,.6); }
.f-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,216,77,.5) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 26%, transparent 66%); mask: radial-gradient(circle, transparent 8%, #000 26%, transparent 66%);
  animation: fRays 1.5s ease-out forwards, fSpin 26s linear infinite; opacity: 0; }
.f-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border: 3px solid #ffd84d; border-radius: 50%;
  box-shadow: 0 0 46px rgba(255,216,77,.8), inset 0 0 46px rgba(255,216,77,.4); opacity: 0; animation: fRing 1.1s cubic-bezier(.12,.76,.28,1) forwards; }
.f-spark { position: absolute; left: 50%; top: 50%; width: 28px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sc)); box-shadow: 0 0 10px var(--sc);
  opacity: 0; animation: fSpark var(--t) var(--d) cubic-bezier(.08,.72,.3,1) forwards; }
.f-glit { position: absolute; top: -20px; width: 5px; height: 9px; background: var(--sc); box-shadow: 0 0 8px var(--sc); opacity: 0; animation: fFall var(--t) var(--d) linear forwards; }
@keyframes fRays { 0% { opacity: 0; transform: scale(.4); } 26% { opacity: .7; } 100% { opacity: .3; transform: scale(1); } }
@keyframes fSpin { to { rotate: 360deg; } }
@keyframes fRing { 0% { opacity: .95; transform: scale(.12); } 70% { opacity: .4; } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes fSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(40px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.3); } }
@keyframes fFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8% { opacity: .95; } 100% { opacity: 0; transform: translateY(1050px) rotate(var(--sp)); } }
@keyframes fSheen { to { background-position: 300% 0; } }
@keyframes fPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* it went badly: the screen corrupts, static over it, the title split and slicing, the bar sick green */
.finale.bad .fbox { --fc: var(--toxic); animation: fGlitch .12s steps(2) 6; }
.finale.bad .ftitle { color: #fff; text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); animation: fFlicker 1.3s steps(1) both; }
.finale.bad .ftitle::before, .finale.bad .ftitle::after { content: attr(data-text); position: absolute; inset: 0; }
.finale.bad .ftitle::before { color: var(--pink); transform: translateX(-4px); animation: fSlice 1.6s steps(2) infinite; }
.finale.bad .ftitle::after { color: var(--cyan); transform: translateX(4px); animation: fSlice 1.1s steps(2) infinite reverse; }
.finale.bad .fbar i { background: repeating-linear-gradient(90deg, #39ff14 0 6px, #0b3d02 6px 9px); box-shadow: 0 0 20px rgba(57,255,20,.8); animation: fFlicker 1.4s steps(1) both; }
.finale.bad .fbar { border-color: var(--toxic); }
.f-static { position: absolute; inset: 0; opacity: .7; background: repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,36,146,.07) 0 2px, transparent 2px 5px);
  animation: fStatic .09s steps(3) infinite; }
.f-shard { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); background: var(--sc); opacity: .85; mix-blend-mode: screen; animation: fShard .9s var(--d) cubic-bezier(.15,.6,.3,1) forwards; }
@keyframes fGlitch { 0% { transform: none; clip-path: inset(0); } 25% { transform: translate(-7px, 2px) skewX(8deg); clip-path: inset(10% 0 45% 0); }
  50% { transform: translate(6px, -3px) skewX(-6deg); clip-path: inset(52% 0 6% 0); } 75% { transform: translate(-3px, 5px); clip-path: inset(28% 0 28% 0); } 100% { transform: none; clip-path: inset(0); } }
@keyframes fStatic { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 -36px, 14px 0; } }
@keyframes fShard { 0% { transform: none; opacity: .9; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@keyframes fSlice { 0% { clip-path: inset(0 0 80% 0); } 25% { clip-path: inset(40% 0 35% 0); } 50% { clip-path: inset(75% 0 5% 0); } 75% { clip-path: inset(15% 0 60% 0); } 100% { clip-path: inset(55% 0 20% 0); } }
@keyframes fFlicker { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: .15; } 20% { opacity: 1; } 34% { opacity: .35; } 38% { opacity: 1; } 100% { opacity: 1; } }
/* in between: it settles grey, no fireworks */
.finale.mid .ftitle { color: var(--dim); animation: fPop .5s ease-out; }

/* Ready: a wait ends once everybody at the table pressed it */
.btn.ready { --btn-line: rgba(255,216,77,.75); --btn-bg: rgba(255,216,77,.14); color: #ffe9a6; }
.btn.ready.on { box-shadow: inset 0 0 0 2px currentColor; opacity: .8; }
.btn.ready[hidden] { display: none; }
.buttons.waiting .btn:not(.ready) { display: none; }
.buttons .btn.ready { width: 220px; }
.sentnote { position: absolute; font: 12px/1.45 var(--mono); color: var(--dim); }
.wide .sentnote { left: 24px; right: 24px; top: calc(512px + var(--xm)); }
.tall .sentnote { left: 20px; right: 20px; top: 770px; text-align: center; }
.sentnote b { color: var(--ink); }
@keyframes blink { to { border-color: transparent; } }
.over { position: absolute; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.tall .over { left: 24px; right: 24px; top: 440px; height: 380px; }
.wide .over { left: 24px; right: 24px; top: 370px; height: calc(160px + var(--xh)); }
.over b { font: 26px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.over div { font: 14px var(--mono); color: var(--dim); line-height: 1.6; }
.over .sent-said { color: var(--ink); font: italic 17px var(--sans); }
.over small { font-size: 12px; color: var(--ghost); }
.chat-tabs { display: flex; gap: 6px; }
.chat-tabs button { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: none; font: 11px var(--mono); color: var(--ghost); cursor: pointer; }
.chat-tabs button.on { border-color: var(--hot); color: var(--hot); }
.chat-tabs button[hidden] { display: none; }

/* the name everybody picks once */
.namebox { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(5,0,6,.72); padding: 16px; }
.namebox[hidden] { display: none; }
.namebox form { width: min(100%, 360px); display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 16px;
  background: #12051c; border: 1px solid rgba(255,36,146,.55); box-shadow: 0 0 40px rgba(255,36,146,.25); }
.namebox b { font: 20px var(--display); letter-spacing: .06em; color: var(--hot); }
.namebox p { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.4; }
.namebox p.err { color: #ff8fa3; min-height: 1.4em; }
.namebox input { padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); outline: none; font-size: 16px; }
.namebox input:focus { border-color: var(--hot); }
.namebox button { height: 44px; border-radius: 10px; border: 1px solid rgba(125,255,43,.64); background: rgba(125,255,43,.14); color: var(--mint); font-weight: 700; cursor: pointer; }
.msg .tx img.emoji { height: 1.4em; vertical-align: -0.35em; }

@keyframes deal { from { transform: translate(40px, -260px) rotate(-25deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sit { from { transform: translateY(40px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.35); } 100% { transform: scaleY(1); } }
@keyframes glow { from { box-shadow: 0 0 6px rgba(255,253,120,.4); } to { box-shadow: 0 0 22px rgba(255,253,120,.9); } }
@keyframes cool { from { width: 100%; } to { width: 0; } }
@keyframes tap { 0% { transform: scale(1); } 40% { transform: scale(.94) rotate(-1.5deg); } 100% { transform: scale(1); } }
@keyframes glitch-a { 0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 87% { clip-path: inset(10% 0 55% 0); transform: translate(-3px, 0); }
  90% { clip-path: inset(60% 0 8% 0); transform: translate(3px, 0); } 93% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); } }
@keyframes glitch-b { 0%, 80%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 81% { clip-path: inset(50% 0 20% 0); transform: translate(3px, 0); }
  85% { clip-path: inset(5% 0 70% 0); transform: translate(-3px, 0); } }
@keyframes infected { from { box-shadow: 0 0 10px rgba(57,255,20,.4), inset 0 0 18px rgba(57,255,20,.12); }
  to { box-shadow: 0 0 28px rgba(57,255,20,.85), inset 0 0 30px rgba(57,255,20,.3); } }
@keyframes whisperin { from { opacity: 0; transform: translate(-50%, -14px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .beatring *, .btn.beg.hot, .begnow.on, .pleabox, .pleacard, .cs-case, .cs-case *, .cs-reveal, .rv-case, .rv-case *, .cs-offer, .dcard, .finale *, .finale .fbox, .sentctl .btn.finish.some, .sent .gap.now, .sentctl.ping form, .card.in, .card.flip, .say.pop, .chair.new, .meter .bar, .btn.beg, .plus, .note.on, .note b::before, .note b::after, .chat-tabs button.wh.hot, .chatslot.hot, .wtoast { animation: none; } }