/* Serão: one stylesheet for the TV (body.tv, sized to the screen) and the phones
   (body.phone). A party at night: deep indigo lit pink, yellow and cyan, white type, hot
   pink to act on, a colour of its own for each game. */

:root {
  --bg: #1a0f3d; --panel: #2c1d63; --line: #4b3a92; --ink: #fffaf2; --mute: #c6baf2;
  --accent: #ff3d8b; --accent2: #ffd23f; --cyan: #2fd8ff; --paper: #fffaf0; --paper-ink: #1d1238; --good: #4ee88a;
  --go: linear-gradient(135deg, #ff3d8b, #d97534);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", "Noto Sans Devanagari", "Noto Sans Bengali",
    "Noto Sans Arabic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { -webkit-tap-highlight-color: transparent;
  background: radial-gradient(60vmax 50vmax at 8% 0%, rgba(255, 61, 139, .28), transparent 70%),
    radial-gradient(55vmax 45vmax at 100% 100%, rgba(47, 216, 255, .22), transparent 70%),
    radial-gradient(40vmax 35vmax at 95% 5%, rgba(255, 210, 63, .14), transparent 70%), var(--bg);
  background-attachment: fixed; }
/* textarea too: it kept the browser's black text on the dark panel */
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
.hidden { display: none !important; }
.mute { color: var(--mute); }
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--c, var(--mute)); flex: none; }
.blank { display: inline-block; width: 4em; border-bottom: .12em solid var(--accent); margin: 0 .15em; transform: translateY(-.2em); }

/* ===================== TV ===================== */

body.tv { overflow: hidden; font-size: 2.1vh; }
.tv .screen { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; }
.tv header { display: flex; align-items: center; justify-content: space-between; padding: 2.2vh 3.5vw; }
.tv .brand { font-weight: 800; font-size: 3.4vh; letter-spacing: .02em; }
.tv .brand b { color: var(--accent2); }
.tv .room { display: flex; align-items: center; gap: 1.4vw; font-size: 2.2vh; color: var(--mute); }
.tv .room .codeTag { font-weight: 800; color: var(--ink); font-size: 3.4vh; letter-spacing: .18em; }
.tv .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6vw; min-height: 0; }
.tv footer { display: flex; align-items: center; gap: 1.2vw; padding: 2vh 3.5vw 3vh; min-height: 9vh; }
.tv .chips { display: flex; flex-wrap: wrap; gap: .8vw; flex: 1; }
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 999px; background: var(--panel);
  font-weight: 700; border: 2px solid transparent; transition: border-color .2s, opacity .2s; }
.chip.done { border-color: var(--good); }
.chip.done::after { content: "✓"; color: var(--good); }
.chip.off { opacity: .4; }
.chip.vip::before { content: "★"; color: var(--accent2); }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 4.5vh; min-width: 3ch; text-align: right; }
.timer.low { color: var(--accent2); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .7; } }   /* never dimmer than readable */

.tv h1 { font-size: 6.5vh; line-height: 1.12; margin: 0 0 3vh; text-align: center; font-weight: 800; max-width: 80vw; }
.tv h2 { font-size: 3vh; margin: 0 0 1.5vh; color: var(--mute); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.tv .big { font-size: 9vh; font-weight: 900; text-align: center; margin: 0; }
.tv .sub { font-size: 3vh; color: var(--mute); text-align: center; }
.pop { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.rise { animation: rise .5s ease-out both; }
@keyframes rise { from { transform: translateY(3vh); opacity: 0; } }

/* the TV's start: pick a language, open a room */
.tv .start { display: flex; flex-direction: column; align-items: center; gap: 4vh; }
.tv .start .logo { font-size: 16vh; font-weight: 900; margin: 0; line-height: 1; }
.tv .start .logo b { color: var(--accent2); }
/* the apostrophe in Pand'ga: small, upright, close to its letters */
.logo .ap, .brand .ap { display: inline-block; font-size: .55em; line-height: 0; vertical-align: .66em; margin: 0 .03em; }
.seg { display: inline-flex; background: var(--panel); border-radius: 999px; padding: .35em; gap: .3em; }
.seg button { background: none; padding: .55em 1.3em; border-radius: 999px; font-weight: 700; color: var(--mute); }
.seg button.on { background: var(--cyan); color: var(--paper-ink); }
.btn { background: var(--go); color: #fff; font-weight: 800; padding: .8em 2em; border-radius: 999px; font-size: 1.15em;
  box-shadow: 0 .4em 1.2em rgba(255, 61, 139, .35); }
.btn.ghost { background: var(--panel); color: var(--ink); box-shadow: none; }
/* not yet: readable, just quieter (faded white on faded pink could not be read) */
.btn:disabled { background: var(--line); color: var(--mute); box-shadow: none; cursor: default; }
.tv .btn { font-size: 3vh; }

/* lobby */
.lobby { display: grid; grid-template-columns: auto 1fr; gap: 6vw; align-items: center; width: 100%; max-width: 150vh; }
.joinCard { background: var(--panel); box-shadow: 0 0 0 .4vh var(--cyan), 0 2vh 6vh rgba(0, 0, 0, .35); border-radius: 3vh; padding: 3.5vh; text-align: center; }
.joinCard .qr { width: 30vh; height: 30vh; border-radius: 1.5vh; overflow: hidden; margin: 0 auto 2.5vh; }
.joinCard .qr svg { width: 100%; height: 100%; display: block; }
.joinCard .url { font-size: 2.6vh; color: var(--mute); }
.joinCard .url b { color: var(--ink); }
.joinCard .bigCode { font-size: 9vh; font-weight: 900; letter-spacing: .2em; margin: .5vh 0 0 .2em; color: var(--accent2); }
.games { display: flex; flex-direction: column; gap: 2vh; }
.game { display: flex; align-items: center; gap: 2.5vw; background: var(--panel); border-radius: 2.5vh; padding: 2.5vh 3vw;
  border: .4vh solid transparent; text-align: left; transition: border-color .2s, transform .2s; }
.game.on { border-color: var(--g, var(--accent)); transform: scale(1.02); box-shadow: 0 0 3vh color-mix(in srgb, var(--g, var(--accent)) 45%, transparent); }
.game .gname { font-size: 4.2vh; font-weight: 800; }
.game .gtag { font-size: 2.4vh; color: var(--mute); }
.game .gicon { width: 8vh; height: 8vh; flex: none; }
.lobbyNote { margin-top: 2vh; font-size: 2.6vh; color: var(--mute); text-align: center; }
.lobbyNote b { color: var(--ink); }

/* answers and choices */
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3vw; align-items: stretch; width: 100%; max-width: 160vh; }
.vs { align-self: center; font-weight: 900; font-size: 4vh; color: var(--accent2); }
.card { background: var(--paper); color: var(--paper-ink); border-radius: 2.5vh; padding: 4vh 3vw; font-size: 4.6vh; font-weight: 800;
  text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2vh; position: relative; min-height: 22vh; }
.card.win { box-shadow: 0 0 0 .6vh var(--accent); }
.card .by { font-size: 2.6vh; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: .5em; }
.card .meta { font-size: 2.2vh; color: #6a5f8f; font-weight: 700; }
.card .pts { position: absolute; top: -2.2vh; right: -1vw; background: var(--go); color: #fff; font-size: 2.8vh; padding: .3em .8em; border-radius: 999px; }
.voters { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; }
/* a Punchline result: who wrote it, then (under a rule) who voted for it, each labelled */
.card .lbl { font-size: .72em; font-weight: 800; color: color-mix(in srgb, currentColor 60%, transparent); text-transform: uppercase; letter-spacing: .06em; margin-right: .3em; }
.card .votedBy { display: flex; flex-direction: column; align-items: center; gap: .8vh; margin-top: 1.6vh; padding-top: 1.6vh; border-top: .25vh solid color-mix(in srgb, currentColor 15%, transparent); width: 100%; }
.card .votedBy .lbl { font-size: 1.8vh; margin: 0; }
.card .votedBy .voters { font-size: 2.4vh; }
.voters .chip { font-size: 2vh; background: #ece6fb; color: var(--paper-ink); }
.flag { font-size: 2.2vh; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: .15em; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(38vh, 1fr)); gap: 2.2vh; width: 100%; max-width: 170vh; }
.grid .card { font-size: 3.4vh; min-height: 14vh; padding: 2.5vh 2vw; }
.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8vh 2vw; width: 100%; max-width: 150vh; }
.options .opt { background: var(--panel); border: .3vh solid var(--line); border-radius: 2vh; padding: 2.2vh 2.5vw; font-size: 3.6vh; font-weight: 800; text-align: center; }
.fact { font-size: 5.6vh; line-height: 1.2; font-weight: 800; text-align: center; max-width: 85vw; margin: 0 0 4vh; }

/* the reveal: one card at a time */
.reveal { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; }
.reveal .card { min-width: 60vh; max-width: 120vh; font-size: 6vh; }
.reveal .verdict { font-size: 3.4vh; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.reveal .verdict.truth { color: var(--good); }
.reveal .verdict.lie { color: var(--accent); }
.reveal .who { display: flex; gap: .6em; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 2.8vh; }

/* drawings */
.drawing { background: var(--paper); border-radius: 2.5vh; width: 56vh; height: 56vh; display: block; }
.sketchStage { display: grid; grid-template-columns: auto 1fr; gap: 4vw; align-items: center; width: 100%; max-width: 170vh; }
.sketchStage .options { grid-template-columns: 1fr; }
.sketchStage .side { display: flex; flex-direction: column; align-items: stretch; }
.sketchStage .reveal .card { min-width: 0; font-size: 4.8vh; }

/* scores */
.board { display: flex; flex-direction: column; gap: 1.4vh; width: 100%; max-width: 90vh; }
.row { display: grid; grid-template-columns: 4vh auto 1fr auto; align-items: center; gap: 2vw; background: var(--panel);
  border-radius: 1.8vh; padding: 1.6vh 2.5vw; font-size: 3.6vh; font-weight: 800; }
.row .bar { height: 1.2vh; border-radius: 999px; background: var(--c); opacity: .85; transition: width .8s ease-out; }
.row .n { color: var(--mute); }
.row.first { box-shadow: 0 0 0 .5vh var(--accent); }
.tv .controls { display: flex; gap: 1vw; }
.tv .controls .btn { font-size: 2vh; padding: .6em 1.4em; }
.tv .toggle { background: var(--panel); color: var(--mute); border-radius: 999px; padding: .5em 1em; font-size: 1.9vh; font-weight: 700; }
.tv .toggle.on { color: var(--ink); box-shadow: inset 0 0 0 2px var(--cyan); }

/* ===================== phone ===================== */

body.phone { font-size: 17px; min-height: 100%; }
.phone main { max-width: 480px; margin: 0 auto; padding: 16px 18px 40px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 16px; }
.phone .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.phone .me { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.phone .top .timer { font-size: 22px; min-width: 0; }
.phone .brand { font-weight: 900; font-size: 22px; }
.phone .brand b { color: var(--accent2); }
.phone h1 { font-size: 24px; line-height: 1.2; margin: 0; font-weight: 800; }
.phone h2 { font-size: 13px; margin: 0; color: var(--mute); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.phone .center { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; }
.phone .center .big { font-size: 40px; font-weight: 900; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--mute); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.field input, textarea { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 20px; font-weight: 700; width: 100%; outline: none; }
.field input:focus, textarea:focus { border-color: var(--accent); }
.field input.code { text-transform: uppercase; letter-spacing: .3em; font-size: 28px; font-weight: 900; }
.phone .btn { width: 100%; padding: 16px; font-size: 19px; }
.phone .row2 { display: flex; gap: 10px; }
.phone .row2 > * { flex: 1; }
.choice { display: block; width: 100%; background: var(--paper); color: var(--paper-ink); border-radius: 16px; padding: 18px; font-size: 19px; font-weight: 800; text-align: center; }
.choice.on { box-shadow: 0 0 0 4px var(--accent); }
.choices { display: flex; flex-direction: column; gap: 10px; }
.msg { color: var(--accent); font-weight: 800; min-height: 1.3em; text-align: center; }
.list { display: flex; flex-direction: column; gap: 8px; }
.list .item { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.list .item .grow { flex: 1; }
.list .item button { background: none; color: var(--mute); font-size: 14px; }
.gamePick { display: flex; flex-direction: column; gap: 10px; }
.gamePick button { background: var(--panel); border-radius: 14px; padding: 14px 16px; text-align: left; border: 3px solid transparent; }
.gamePick button.on { border-color: var(--accent); }
.gamePick b { display: block; font-size: 19px; }
.gamePick span { color: var(--mute); font-size: 14px; }
.gained { font-size: 48px; font-weight: 900; color: var(--accent); }
.prompt { background: var(--paper); color: var(--paper-ink); border-radius: 16px; padding: 18px; font-size: 21px; font-weight: 800; line-height: 1.25; }

/* the drawing pad */
.pad { width: 100%; aspect-ratio: 1; background: var(--paper); border-radius: 16px; touch-action: none; display: block; }
.tools { display: flex; gap: 8px; align-items: center; }
.tools button { background: var(--panel); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 15px; }
.tools .ink { width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 3px solid var(--panel); }
.tools .ink.on { border-color: var(--ink); }
.tools .w { width: 40px; height: 40px; display: grid; place-items: center; }
.tools .w.on { outline: 3px solid var(--ink); }
.tools .w i { display: block; background: var(--ink); border-radius: 50%; }
.tools .spacer { flex: 1; }

/* ===================== Glitch, the host ===================== */

.gaspar { position: fixed; right: 2.5vw; bottom: 11vh; width: 15vh; z-index: 5; pointer-events: none;
  animation: hover 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.gaspar svg { width: 100%; display: block; overflow: visible; }
.gaspar .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.gaspar .mouth { transform-box: fill-box; transform-origin: center; }
.gaspar.away, .gaspar.away * { animation-play-state: paused !important; }   /* wholly out of the frame (tv.js): nothing seen stops */
/* Pixel floats: his rotors spin (a blade seen edge-on and flat in turn) and his thruster glows */
.gaspar .blade { transform-box: fill-box; transform-origin: center; animation: rotor .14s linear infinite alternate; }
.gaspar .thrust { transform-box: fill-box; transform-origin: 50% 0; animation: thrust .35s ease-in-out infinite alternate; }
@keyframes rotor { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes thrust { from { opacity: .55; transform: scaleY(.85); } to { opacity: 1; transform: scaleY(1.1); } }
.gaspar.talk { animation-duration: .9s; }
.gaspar.cheer { animation: cheer .5s ease-in-out 4; }
@keyframes bob { 50% { transform: translateY(-.8vh) rotate(-1.5deg); } }
@keyframes hover { 50% { transform: translateY(-1.6vh) rotate(-2deg); } }
@keyframes cheer { 50% { transform: translateY(-3vh) rotate(4deg) scale(1.05); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.bubble { position: fixed; right: calc(2.5vw + 19.5vh); bottom: 17vh; max-width: 46vw; z-index: 5; background: var(--paper);
  color: var(--paper-ink); font-weight: 700; font-size: 2.6vh; line-height: 1.3; padding: 1.4vh 1.6vw; border-radius: 3vh;
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, .35); opacity: 0; transform: translateY(1vh) scale(.96); transition: opacity .2s, transform .2s; }
.bubble { pointer-events: none; }
.bubble.on { opacity: 1; transform: none; }
/* its tail, pointing down and right at Pixel */
.bubble::after { content: ""; position: absolute; right: -2.6vh; bottom: 1.2vh; width: 3.4vh; height: 3.4vh; background: inherit;
  clip-path: polygon(0 15%, 100% 50%, 0 85%); }
.soundHint { position: fixed; left: 50%; top: 2.2vh; transform: translateX(-50%); z-index: 6; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 4; }

/* the stage changing: the old fades, the new slides in */
.stage.enter > * { animation: stageIn .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(2.5vh) scale(.985); } }

/* likes, audience, the question menu, awards */
.heart { color: var(--accent); font-weight: 800; }
.crowdBar { display: flex; align-items: center; gap: .6em; font-size: 2.1vh; font-weight: 800; color: #6a5f8f; justify-content: center; }
.crowdBar i { display: block; height: 1vh; border-radius: 999px; background: var(--accent); min-width: .6vh; }
.reveal .crowdBar { color: var(--mute); font-size: 2.6vh; }
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(30vh, 1fr)); gap: 2vh; width: 100%; max-width: 160vh; }
.menu .card { font-size: 3.6vh; min-height: 13vh; }
.titleTag { display: inline-block; background: var(--go); color: #fff; padding: .3em .9em; border-radius: 999px; font-weight: 800;
  font-size: 2.4vh; margin-bottom: 2vh; }
.awards { margin-top: 3vh; font-size: 3vh; font-weight: 800; display: flex; gap: 1em; align-items: center; }
.chip.crowd { background: none; color: var(--mute); }
.voters .chip .x { color: #6a5f8f; font-weight: 800; }

/* phone: hearts beside the choices, votes to give */
.choiceRow { display: flex; gap: 8px; align-items: stretch; }
.choiceRow .choice { flex: 1; position: relative; }
.choiceRow .choice .n { position: absolute; top: 6px; right: 10px; background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 13px; padding: 2px 8px; }
.like { width: 54px; flex: none; border-radius: 16px; background: var(--panel); color: var(--mute); font-size: 22px; }
.like.on { color: var(--accent); background: #4a1d55; }
.choice:disabled { opacity: .55; }
.left { text-align: center; color: var(--mute); font-weight: 800; }
.role { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); font-weight: 800; }

/* ===================== the four newer games ===================== */

.games { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1.2vw; }
/* each game its colour: the tile's tint, its icon, its border when picked */
[data-g=quips] { --g: #ff3d8b; } [data-g=bluff] { --g: #ffd23f; } [data-g=sketch] { --g: #2fd8ff; }
[data-g=impostor] { --g: #ff8a3d; } [data-g=split] { --g: #b48cff; } [data-g=likely] { --g: #4ee88a; } [data-g=trivia] { --g: #ff5e5e; }
.game, .gamePick button { background: linear-gradient(135deg, color-mix(in srgb, var(--g) 32%, var(--panel)), var(--panel) 75%) border-box; }
.game .gicon { color: var(--g); }
.gamePick button.on { border-color: var(--g, var(--accent)); }
.game { padding: 1.8vh 1.6vw; gap: 1.4vw; }
.game .gname { font-size: 3.2vh; }
.game .gtag { font-size: 1.9vh; }
.game .gicon { width: 6vh; height: 6vh; }
.chip.ghost { opacity: .55; }
.chip.ghost::after { content: " 👻"; }
.clueGrid .card { font-size: 3.6vh; gap: 1vh; min-height: 0; }
.clueGrid .card .by { font-size: 2.2vh; }
.splitSide { gap: 2vh; }
.splitN { font-size: 3.4vh; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.splitN b { color: var(--accent); }
.opt .letter { color: var(--accent); margin-right: .5em; }
.opt.right { background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 .5vh var(--good); }
.opt.dim { opacity: .45; }
.track { display: flex; flex-direction: column; gap: 1vh; width: 100%; max-width: 140vh; margin-top: 3vh; }
.lane { display: grid; grid-template-columns: 26vh 1fr; align-items: center; gap: 1.5vw; }
.lane .chip { font-size: 2vh; }
.ghostLane { opacity: .6; }
.cells { display: flex; gap: .6vh; align-items: center; }
.cells i { flex: 1; height: 2.6vh; border-radius: .8vh; background: var(--panel); }
.cells i.on { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.cells b { font-size: 1.8vh; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; margin-left: .6vw; }
.cups { display: flex; gap: 3vw; justify-content: center; margin: 3vh 0; }
.cup { display: flex; flex-direction: column; align-items: center; gap: 1vh; color: var(--ink); font-size: 3vh; font-weight: 900; min-width: 10vh; }
.cup svg { width: 9vh; }
.cup.bad { color: var(--accent); }
.phone .bigChoice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone .bigChoice .choice { padding: 34px 10px; font-size: 24px; }
.phone .role-card { background: var(--panel); border-radius: 16px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.phone .role-card b { font-size: 30px; }
.phone .role-card.imp b { color: var(--accent); }
.phone .ghostTag { color: var(--mute); font-weight: 800; text-align: center; }

/* the kiosk by the TV: no pointer to show */
body.kiosk, body.kiosk * { cursor: none !important; }

/* the VIP's switches for the TV's sound */
.tvSwitches { display: flex; gap: 8px; }
.tvSwitches button { flex: 1; background: var(--panel); color: var(--mute); border-radius: 12px; padding: 10px 6px; font-weight: 800; font-size: 14px; }
.tvSwitches button.on { color: var(--ink); box-shadow: inset 0 0 0 2px var(--cyan); }

/* ===================== faces, the crowd of them, pokes ===================== */

/* a face: the drawn portrait, the bot, or a disc in the player's colour with an initial */
.av { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--c, var(--mute)); box-shadow: 0 0 0 .12em var(--c, var(--mute)); vertical-align: middle; }
.av.none { color: var(--paper-ink); font-weight: 900; font-size: 1em; }
.av.bot { font-size: 1em; line-height: 1; }
.chip .av { width: 1.6em; height: 1.6em; margin-left: -.35em; }
.card .by .av { width: 1.5em; height: 1.5em; }
.row .who { display: inline-flex; align-items: center; gap: .5em; }
.row .who .av { width: 1.3em; height: 1.3em; }
.phone .me .av { width: 30px; height: 30px; }
.phone .list .av { width: 34px; height: 34px; }

/* the row of faces while the phones are busy (and in the lobby: who's in) */
.crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4vw; margin-top: 5vh; max-width: 150vh; }
.mate { display: flex; flex-direction: column; align-items: center; gap: 1vh; position: relative; animation: bob 2.2s ease-in-out infinite; }
.mate .av.big { width: 13vh; height: 13vh; font-size: 6vh; box-shadow: 0 0 0 .5vh var(--c), 0 1.5vh 3vh rgba(0, 0, 0, .35); }
.mate .nm { font-weight: 800; font-size: 2.4vh; }
.mate .think { position: absolute; top: -1.5vh; right: -2.2vh; background: var(--paper); border-radius: 999px; padding: .7vh 1vh;
  display: flex; gap: .5vh; box-shadow: 0 .6vh 1.5vh rgba(0, 0, 0, .3); }
.mate .think i { width: 1vh; height: 1vh; border-radius: 50%; background: var(--paper-ink); animation: dots 1.2s infinite; }
.mate .think i:nth-child(2) { animation-delay: .2s; } .mate .think i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-.7vh); opacity: 1; } }
.mate.done { animation: none; }
.mate.done .think { display: none; }
.mate.done::after { content: "✓"; position: absolute; top: -1.2vh; right: -1.2vh; width: 5vh; height: 5vh; border-radius: 50%;
  background: var(--good); color: var(--paper-ink); font-weight: 900; font-size: 3vh; display: grid; place-items: center;
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.mate:not(.done) .av.big { animation: ponder 3.4s ease-in-out infinite; }
@keyframes ponder { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.lobbyCrew { margin-top: 3vh; gap: 1.6vw; }
.lobbyCrew .mate .av.big { width: 9vh; height: 9vh; font-size: 4vh; }
.lobbyCrew .mate .nm { font-size: 2vh; }

.jump { animation: jump .7s cubic-bezier(.3, 1.6, .5, 1) !important; }
@keyframes jump { 30% { transform: translateY(-4vh) scale(1.12) rotate(-6deg); } 60% { transform: translateY(0) scale(.95); } }
.wobble { animation: wobble .6s ease-in-out !important; }
@keyframes wobble { 20% { transform: rotate(-14deg) scale(1.1); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.floaty { position: fixed; bottom: 8vh; z-index: 7; pointer-events: none; display: flex; align-items: center; gap: .3em; font-size: 7vh;
  animation: floatUp 2.6s ease-out forwards; }
.floaty .av { width: 6vh; height: 6vh; font-size: 3vh; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { transform: translateY(-6vh) scale(1.1); opacity: 1; }
  100% { transform: translateY(-60vh) rotate(-12deg); opacity: 0; } }

/* phone: drawing yourself, and the toys while waiting */
.needRow, .startRow { display: flex; align-items: center; gap: 10px; }
.needRow > span { flex: 1; font-weight: 700; color: var(--mute); }
.needRow .btn, .startRow .btn.ghost { width: auto; flex: none; margin: 0; padding: .7em 1.1em; font-size: 1em; white-space: nowrap; }
.startRow #start { flex: 1; }
.facePad { border-radius: 24px; max-width: 360px; align-self: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.phone .tools { flex-wrap: wrap; }
.toys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-top: 8px; }
.toys button { font-size: 40px; padding: 18px 0; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line);
  transition: transform .1s; }
.toys button:active, .toys button.hit { transform: scale(.88); background: var(--accent); }
.toys button:disabled:not(.hit) { opacity: .5; }
.bounce { animation: jump 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; color: var(--good); }
.list .item button[data-redraw] { color: var(--cyan); }
/* the lobby, with the faces in it, still fits the screen */
.lobbyCrew { margin-top: 2vh; }
.lobbyCrew .mate .av.big { width: 7vh; height: 7vh; font-size: 3.2vh; box-shadow: 0 0 0 .4vh var(--c), 0 1vh 2vh rgba(0, 0, 0, .3); }
.lobbyCrew .mate .nm { font-size: 1.8vh; }
.lobby .lobbyNote { margin-top: 1vh; }
.lobby .game { padding: 1.4vh 1.6vw; }
.lobby .btn { font-size: 2.6vh; padding: .6em 1.6em; }

/* ===================== light mode (html[data-theme=light]) ===================== */
/* The same party by day: lavender paper lit pink, yellow and cyan, dark ink. Pink and
   yellow words go darker so they read on white; cards get a shadow to stand off it. */
:root[data-theme=light] {
  --bg: #f1e9ff; --panel: #ffffff; --line: #ddd0f7; --ink: #1d1238; --mute: #5b4f86;
  --hot: #c8155f; --accent2: #825600; --cyan: #077391; --paper: #fffbec; --paper-ink: #1d1238; --good: #0f703b;
}
:root[data-theme=light] body {
  background: radial-gradient(60vmax 50vmax at 8% 0%, rgba(255, 61, 139, .18), transparent 70%),
    radial-gradient(55vmax 45vmax at 100% 100%, rgba(47, 216, 255, .22), transparent 70%),
    radial-gradient(40vmax 35vmax at 95% 5%, rgba(255, 210, 63, .28), transparent 70%), var(--bg);
  background-attachment: fixed;
}
:root[data-theme=light] .card, :root[data-theme=light] .prompt, :root[data-theme=light] .choice,
:root[data-theme=light] .joinCard, :root[data-theme=light] .game, :root[data-theme=light] .chip,
:root[data-theme=light] .row, :root[data-theme=light] .options .opt, :root[data-theme=light] .list .item,
:root[data-theme=light] .gamePick button, :root[data-theme=light] .bubble { box-shadow: 0 .4vh 1.6vh rgba(60, 30, 120, .12); }
:root[data-theme=light] .joinCard { box-shadow: 0 0 0 .4vh var(--cyan), 0 2vh 6vh rgba(60, 30, 120, .18); }
:root[data-theme=light] .game.on { box-shadow: 0 0 3vh color-mix(in srgb, var(--g, var(--accent)) 45%, transparent); }
:root[data-theme=light] .game, :root[data-theme=light] .gamePick button {
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 22%, #fff), #fff 75%) border-box; }
:root[data-theme=light] .game .gicon { color: color-mix(in srgb, var(--g) 75%, #000); }
:root[data-theme=light] .like.on { background: #ffe0ee; }
:root[data-theme=light] .mate .av.big { box-shadow: 0 0 0 .5vh var(--c), 0 1.5vh 3vh rgba(60, 30, 120, .2); }
:root[data-theme=light] .card .meta, :root[data-theme=light] .crowdBar { color: #5b4f86; }
.themeBtn { background: var(--panel); border-radius: 999px; padding: 6px 10px; font-size: 18px; line-height: 1; box-shadow: inset 0 0 0 2px var(--line); }

/* unhinged mode: the switch (red when on) and the devil by the room code */
.btn.unhinged { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.btn.unhinged span { font-size: 13px; font-weight: 700; color: var(--mute); }
.btn.unhinged.on, .tv #unhinged.on { background: linear-gradient(135deg, #e0123d, #8a0f3d); color: #fff; box-shadow: 0 .4em 1.2em rgba(224, 18, 61, .4); }
.btn.unhinged.on span { color: #ffd6df; }
.tv .room .devil { font-size: 3.4vh; animation: wobble 2.4s ease-in-out infinite; }

/* waiting for "Next": the VIP's button, and the TV's hint */
.phone .btn.next { animation: nextPulse 1.6s ease-in-out infinite; }   /* a glow and a grow, not a fade: the text stays fully legible */
@keyframes nextPulse { 50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(255, 255, 255, .28), 0 0 24px rgba(255, 255, 255, .25); } }
.tv .nextHint { align-self: center; font-weight: 800; font-size: 2vh; color: var(--accent2); animation: pulse 1.6s infinite; margin-right: .6vw; }

/* the VIP's phone gone: take charge */
.phone .claim { display: flex; flex-direction: column; gap: 8px; text-align: center; font-weight: 800; color: var(--accent2); }

/* the TV's bottom bar: the room's QR in a game, language, unhinged, icon switches */
.tv .miniJoin { display: flex; align-items: center; gap: .8vw; }
.tv .miniJoin:empty { display: none; }
.tv .miniJoin .mq { width: 8.5vh; height: 8.5vh; border-radius: 1vh; overflow: hidden; }
.tv .miniJoin .mq svg { width: 100%; height: 100%; display: block; }
.tv .miniJoin b { font-size: 3.2vh; font-weight: 900; letter-spacing: .15em; color: var(--accent2); }
.tv .controls { align-items: center; }
.tv .toggle.icon { min-width: 2.6em; text-align: center; }
.tv .toggle.icon.off { opacity: .45; text-decoration: line-through; }
.tv .toggle.devilOn { background: linear-gradient(135deg, #e0123d, #8a0f3d); color: #fff; box-shadow: none; }
.seg.mini { padding: .2em; }
.seg.mini button { padding: .35em .8em; font-size: 1.8vh; }
.seg.locked { opacity: .5; pointer-events: none; }

/* the TV lobby, tidied: two columns, the faces under the join card, the buttons in a row
   under the games; the bar's switches in groups */
.lobby { grid-template-columns: 34vh 1fr; gap: 5vw; align-items: start; max-width: 160vh; }
.lobbyLeft { display: flex; flex-direction: column; align-items: center; gap: 2.5vh; }
.lobbyLeft .joinCard { padding: 3vh; width: 100%; }
.lobbyLeft .joinCard .qr { width: 24vh; height: 24vh; margin-bottom: 2vh; }
.lobbyLeft .joinCard .bigCode { font-size: 7.5vh; }
.lobbyLeft .lobbyCrew { margin: 0; gap: 1.4vw 1vw; max-width: 100%; }
.lobbyRight { display: flex; flex-direction: column; gap: 3vh; }
.lobby .games { gap: 1.8vh 1.4vw; }
.lobby .game { padding: 1.8vh 1.6vw; }
.lobbyActions { display: flex; align-items: center; justify-content: flex-end; gap: 1.6vw; padding-right: 18vh; }
.lobbyActions .lobbyNote { margin: 0 auto 0 0; text-align: left; font-size: 2.4vh; }
.tv .controls { gap: 1.4vw; }
.tv .controls .group { display: flex; align-items: center; gap: .5vw; }
/* the buttons on the left, clear of Glitch's bubble; the code fits its card */
.lobbyActions { justify-content: flex-start; padding-right: 0; }
.lobbyActions .lobbyNote { margin: 0 0 0 1vw; }
.lobbyLeft .joinCard .bigCode { font-size: 6.6vh; letter-spacing: .14em; margin-left: .14em; }

/* the players along the top, beside the name; in the lobby their faces a size up */
.tv header { gap: 2vw; }
.tv header .chips { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .8vw; }
.tv header .chips .chip { font-size: 2vh; }
body.tv:not(.ingame) header .chips .chip { font-size: 2.4vh; padding: .4em 1em .4em .5em; }
.tv footer .spacer { flex: 1; }
.tv .miniJoin > div { display: flex; flex-direction: column; line-height: 1.15; }
.tv .miniJoin span { font-size: 1.7vh; color: var(--mute); font-weight: 700; }
/* the players in the top right corner */
.tv header .chips { justify-content: flex-end; }
/* the players on the same line as the name */
.tv header { align-items: center; }
.tv header .brand { line-height: 1; }
.tv header .chips { align-items: center; align-self: center; }
.tv header .room:empty { display: none; }
.lobbyActions .lobbyNote { margin: 0; font-size: 2.8vh; }

/* calmer TV: in a game the players at the top are a face and a score; the switches fold
   behind ⚙; a little room under the top bar */
body.tv.ingame header .chips .nm { display: none; }
body.tv.ingame header .chips .chip { padding: .3em .8em .3em .4em; gap: .4em; font-size: 2vh; }
.tv header { padding-bottom: 3vh; }
.tv .controls .tray { display: none; gap: 1.4vw; align-items: center; }
.tv .controls .tray.open { display: flex; }
.tv .controls .gear { font-size: 2.2vh; opacity: .7; }
.tv .nextHint { font-size: 2.2vh; }

/* phone: why the points */
.phone .why { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 340px; }
.phone .why > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; text-align: left;
  background: var(--panel); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.phone .why b { color: var(--accent2); text-align: right; }

/* ===================== how to play (the explainer before a game) ===================== */
.howto { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; position: relative; }
.howHead { display: flex; flex-direction: column; align-items: center; gap: 1.4vh; }
.howHead h2 { margin: 0; }
.howSteps { display: flex; gap: .8vh; }
.howSteps i { width: 5vh; height: .8vh; border-radius: 999px; background: var(--panel); }
.howSteps i.done { background: var(--accent2); }
.howSteps i.on { background: linear-gradient(90deg, var(--accent2), var(--accent)); animation: pulse 1.4s infinite; }
.howBody { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; min-height: 50vh; justify-content: center; }
.howPaused { position: absolute; inset: -4vh -6vw; display: grid; place-items: center; font-size: 8vh; font-weight: 900;
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--accent2); border-radius: 3vh; }
.exPrompt { max-width: 110vh; font-size: 5vh; }
.exRow { display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 170vh; }
.exRow .card { min-width: 36vh; max-width: 60vh; font-size: 3.8vh; }
.exWho { display: inline-flex; align-items: center; gap: .5em; font-size: 2.4vh; }
.exVotes { display: flex; gap: .8vh; justify-content: center; min-height: 3vh; }
.exVotes i { width: 3vh; height: 3vh; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3vh var(--paper); }
.exWin { animation: rise .5s ease-out both, exGlow 1s 2.6s ease-out both; }
@keyframes exGlow { to { box-shadow: 0 0 0 .6vh var(--good), 0 0 4vh color-mix(in srgb, var(--good) 60%, transparent); } }
.exPts { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; font-weight: 800; }
.exPts b { font-size: 6vh; color: var(--accent2); }
.exPts span { font-size: 2.6vh; color: var(--mute); }
.opt { position: relative; }
.opt .stamp { position: absolute; right: 1.4vw; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: 2.2vh; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em; padding: .25em .7em; border-radius: .6em; background: var(--accent); color: #fff;
  animation: stampIn .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.opt .stamp.yes { background: var(--good); color: var(--paper-ink); }
@keyframes stampIn { from { transform: translateY(-50%) rotate(-8deg) scale(2.4); opacity: 0; } }
.exDoodle { width: 52vh; height: 48vh; background: var(--paper); border-radius: 2.5vh; }
.exDoodle path { fill: none; stroke: var(--paper-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: doodle .5s ease-out forwards; }
@keyframes doodle { to { stroke-dashoffset: 0; } }
.exOdd { animation: rise .5s ease-out both, wobble .7s 3.6s ease-in-out 2; box-shadow: 0 0 0 .5vh var(--accent); }
.exSplit { display: flex; flex-direction: column; gap: 1.6vh; width: 80vh; }
.exSplit > div { display: grid; grid-template-columns: 10vh 1fr 4vh; align-items: center; gap: 1.5vw; font-size: 3vh; font-weight: 800; }
.exSplit i { display: block; height: 3vh; border-radius: 999px; width: 0; animation: grow 1.4s .8s ease-out forwards; }
.exSplit .yes i { background: var(--good); } .exSplit .no i { background: var(--accent); }
@keyframes grow { to { width: calc(var(--n) * 25%); } }
.cup.exPoison b { color: var(--hot, var(--accent)); font-size: 4vh; }

/* phone: while the TV explains */
.phone .howPhone { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.exPts .av.big { width: 12vh; height: 12vh; font-size: 5vh; box-shadow: 0 0 0 .5vh var(--c), 0 1.5vh 3vh rgba(0, 0, 0, .35); }
.howPaused { position: fixed; inset: 0; z-index: 3; border-radius: 0; }

/* phone: ⚙ the settings */
.phone .gearBtn { font-size: 20px; }
.phone .settings { display: flex; flex-direction: column; gap: 10px; }
.phone .settings h2 { margin-top: 10px; }
.phone .setRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: var(--panel);
  border-radius: 14px; padding: 14px 16px; font-weight: 800; font-size: 17px; text-align: left; }
.phone .setRow small { display: block; font-size: 13px; color: var(--mute); font-weight: 700; }
.phone .setRow i { font-style: normal; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px;
  background: var(--line); color: var(--mute); }
.phone .setRow.on i { background: var(--good); color: var(--paper-ink); }
.phone .setLang { align-self: stretch; display: flex; }
.phone .setLang button { flex: 1; }

/* the crown on the VIP; the lobby's big "waiting for…"; the TV's pause menu */
/* the VIP's crown is a picture, not an emoji: a TV's browser may have no emoji font, and it looked broken there */
.chip.vip::before { content: ""; display: inline-block; flex: none; width: 1.15em; height: .85em; margin-right: .4em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path d='M2 14L1 3l6 5 5-7 5 7 6-5-1 11z' fill='%23ffd23f' stroke='%23c9961a' stroke-width='1' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.crownIcon { display: inline-block; width: 1.1em; height: .8em; vertical-align: -.05em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path d='M2 14L1 3l6 5 5-7 5 7 6-5-1 11z' fill='%23ffd23f' stroke='%23c9961a' stroke-width='1' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.lobbyActions .lobbyNote { font-size: 3.6vh; font-weight: 800; color: var(--ink); animation: pulse 2.4s infinite; }
.pauseMenu { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px); }
.pauseMenu.hidden { display: none; }
.pmBox { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; background: var(--panel); border-radius: 3vh; padding: 4vh 5vw;
  box-shadow: 0 0 0 .4vh var(--cyan), 0 3vh 8vh rgba(0, 0, 0, .45); min-width: 60vh; }
.pmBox .big { font-size: 7vh; color: var(--accent2); }
.pmRows { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vh 1.2vw; width: 100%; }
.tv .setRow { display: flex; align-items: center; justify-content: space-between; gap: 2vw; background: var(--bg); border-radius: 1.6vh;
  padding: 1.6vh 1.6vw; font-weight: 800; font-size: 2.6vh; }
.tv .setRow i { font-style: normal; font-size: 1.8vh; text-transform: uppercase; letter-spacing: .08em; padding: .3em .8em; border-radius: 999px;
  background: var(--line); color: var(--mute); }
.tv .setRow.on i { background: var(--good); color: var(--paper-ink); }
/* the lobby's "waiting for… to start a game", in the bar at the bottom */
.tv .footNote { text-align: center; font-size: 3.4vh; font-weight: 800; color: var(--ink); animation: pulse 2.4s infinite; }
.tv .footNote span { display: block; font-size: 2vh; color: var(--mute); font-weight: 700; }
/* the waiting line in the middle of the screen's width */
.tv footer { position: relative; }
.tv .footNote { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }

/* ===================== Hangman ===================== */
[data-g=hangman] { --g: #ff6bd6; }
[data-g=whosaid] { --g: #7fa8ff; }
.saidCard { max-width: 70vw; margin: 2vh auto; gap: 1.4vh; }
.saidCard .by { font-size: 3.6vh; margin-top: 1vh; }
.hangStage { display: flex; align-items: center; gap: 5vw; margin: 2vh 0; }
.gallows { width: 30vh; height: 32vh; }
.gallows path, .gallows circle { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.gallows .frame { stroke: var(--mute); }
.gallows .part { stroke: var(--accent); }
.gallows .pop { transform-box: fill-box; transform-origin: center; }
.hangSide { display: flex; flex-direction: column; gap: 3vh; }
.hangWord { display: flex; flex-wrap: wrap; gap: .8vh; justify-content: center; max-width: 100%; }
.hangWord i { font-style: normal; width: 1.4em; height: 1.7em; display: grid; place-items: center; border-bottom: .18em solid var(--line);
  font-weight: 900; text-transform: uppercase; }
.hangWord i.on { border-color: var(--good); }
.hangWord i.gap { width: .8em; border: 0; }
.hangWord i.mark { border: 0; }
.hangWord.big { font-size: 6vh; max-width: 110vh; }
.tried { display: flex; gap: .8vh; flex-wrap: wrap; font-size: 3vh; font-weight: 900; }
.tried span { padding: .2em .55em; border-radius: .5em; background: var(--panel); }
.tried .ok { color: var(--good); }
.tried .no { color: var(--hot, var(--accent)); text-decoration: line-through; }
.bigLetter { font-size: 9vh; font-weight: 900; line-height: 1; }
.bigLetter.ok { color: var(--good); } .bigLetter.no { color: var(--hot, var(--accent)); }
/* phone */
.phone .hangWord { font-size: 26px; }
.phone .keys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.phone .keys button { background: var(--panel); border-radius: 10px; padding: 12px 0; font-weight: 900; font-size: 18px; }
.phone .keys button.ok { background: color-mix(in srgb, var(--good) 35%, var(--panel)); }
.phone .keys button.no { opacity: .35; text-decoration: line-through; }
.phone .keys button.mine { background: var(--accent); color: #fff; }
.phone .solve { display: flex; gap: 8px; }
.phone .solve input { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.phone .solve .btn { width: auto; padding: 12px 20px; }

/* ===================== Stop! ===================== */
[data-g=stop] { --g: #6c8cff; }
.stopLetter { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: .3em; background: var(--go); color: #fff;
  font-weight: 900; font-size: 14vh; line-height: 1; }
.stopCats { display: flex; flex-wrap: wrap; gap: 1.4vh; justify-content: center; max-width: 150vh; margin: 2vh 0; }
.stopCats .card { min-height: 0; padding: 1.6vh 2.4vw; font-size: 3.4vh; }
.stopCall { font-size: 5vh; font-weight: 900; color: var(--hot, var(--accent)); min-height: 1.3em; margin: 1vh 0; }
.stopHead { display: flex; align-items: center; gap: 3vw; margin-bottom: 3vh; }
.stopHead .stopLetter { font-size: 8vh; }
.stopHead h1 { margin: 0; }
.stopGrid { display: flex; flex-wrap: wrap; gap: 3vh 2vw; justify-content: center; max-width: 170vh; }
.stopGrid .card { min-height: 0; min-width: 22vh; padding: 3vh 2.4vw; }
.stopGrid .card.dim { opacity: .5; }
.stopGrid .card.struck .stopWord { text-decoration: line-through; text-decoration-thickness: .12em; text-decoration-color: var(--hot, var(--accent)); }
.stopVeto { font-size: 3vh; min-height: 1.2em; }
/* phone */
.phone .stopLetter { font-size: 26px; vertical-align: middle; }
.phone .stopFields { display: flex; flex-direction: column; gap: 10px; }
.phone .stopFields span { font-size: 13px; color: var(--mute); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.phone .stopFields input { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 19px; font-weight: 700; width: 100%; outline: none; }
.phone .stopFields input:focus { border-color: var(--accent); }
.phone .stopCall { font-size: 20px; text-align: center; }
.phone .stopBtn { font-size: 1.5em; letter-spacing: .08em; }
.phone .like.veto.on { background: var(--hot, var(--accent)); color: #fff; }
.card .by .chip { color: var(--ink); }
.phone .setTime { display: grid; grid-template-columns: repeat(4, 1fr); align-self: stretch; }
.phone .setTime button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 13px; }
.phone .setTime small { font-size: 11px; opacity: .7; }

/* ===================== themes (html[data-season]) ===================== */
/* Halloween, Christmas, Easter: their colours (the dark look; in light mode only the
   accents change), things floating behind everything, and Glitch's hat */
:root[data-season=halloween] { --accent: #ff7a1a; --accent2: #b6ff3b; --cyan: #b48cff; --go: linear-gradient(135deg, #e36d17, #e0123d); }
:root[data-season=halloween]:not([data-theme=light]) { --bg: #140a1c; --panel: #2a1636; --line: #4a2a5e; --hot: #ffa060; }
:root[data-season=halloween]:not([data-theme=light]) body {
  background: radial-gradient(60vmax 50vmax at 10% 100%, rgba(255, 122, 26, .28), transparent 70%),
    radial-gradient(50vmax 40vmax at 90% 0%, rgba(182, 255, 59, .12), transparent 70%), var(--bg); background-attachment: fixed; }
:root[data-season=christmas] { --accent: #e3263b; --accent2: #ffd34d; --cyan: #9be7ff; --go: linear-gradient(135deg, #e3263b, #d97534); }
:root[data-season=christmas]:not([data-theme=light]) { --bg: #0b1d18; --panel: #163a30; --line: #2a5a4a; --hot: #ff8a96; }
:root[data-season=christmas]:not([data-theme=light]) body {
  background: radial-gradient(60vmax 50vmax at 10% 0%, rgba(227, 38, 59, .25), transparent 70%),
    radial-gradient(55vmax 45vmax at 100% 100%, rgba(255, 211, 77, .14), transparent 70%), var(--bg); background-attachment: fixed; }
:root[data-season=easter] { --accent: #ff6fb5; --accent2: #ffe26b; --cyan: #8ff0c9; --go: linear-gradient(135deg, #ff6fb5, #ffb86b); }
:root[data-season=easter]:not([data-theme=light]) { --bg: #1d2142; --panel: #2e3768; --line: #4a548f; --hot: #ffb3d6; }
:root[data-season=easter]:not([data-theme=light]) body {
  background: radial-gradient(60vmax 50vmax at 0% 0%, rgba(255, 111, 181, .25), transparent 70%),
    radial-gradient(55vmax 45vmax at 100% 100%, rgba(143, 240, 201, .2), transparent 70%), var(--bg); background-attachment: fixed; }

.decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.decor span { position: absolute; opacity: .35; animation-iteration-count: infinite; animation-timing-function: linear; }
.decor.fall span { top: -8vh; animation-name: decorFall; color: #fff; opacity: .5; }
.decor.rise span { bottom: -8vh; animation-name: decorRise; }
.decor.drift span { top: 0; animation-name: decorDrift; }
@keyframes decorFall { to { transform: translate(6vw, 116vh) rotate(240deg); } }
@keyframes decorRise { 0% { transform: translateY(0) rotate(-8deg); } 50% { transform: translate(3vw, -60vh) rotate(8deg); } 100% { transform: translate(-2vw, -118vh) rotate(-8deg); } }
@keyframes decorDrift { 0% { transform: translate(-10vw, 70vh); } 25% { transform: translate(20vw, 30vh); } 50% { transform: translate(50vw, 60vh); }
  75% { transform: translate(80vw, 20vh); } 100% { transform: translate(115vw, 50vh); } }
.tv .screen { z-index: 1; }
.phone main { position: relative; z-index: 1; }
body.phone .decor span { opacity: .22; }

.gaspar .hat { display: none; }
:root[data-season=halloween] .gaspar .hat.witch, :root[data-season=christmas] .gaspar .hat.santa,
:root[data-season=easter] .gaspar .hat.ears { display: inline; }
:root[data-season=easter] .gaspar .ant, :root[data-season=halloween] .gaspar .ant, :root[data-season=christmas] .gaspar .ant { display: none; }

/* phone: the theme picker */
.phone .setSeason { display: grid; grid-template-columns: repeat(5, 1fr); align-self: stretch; }
.phone .setSeason button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 20px; }
.phone .setSeason small { font-size: 10px; }

/* ---- themes, stronger: the scene, the top, the cards, Glitch's costume ---- */
.decor .scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30vh; }
body.phone .decor .scene { height: 16vh; opacity: .8; }
.decor .moon { position: absolute; right: 8vw; top: 12vh; width: 16vh; height: 16vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe9a8 55%, #e8c46a); box-shadow: 0 0 8vh 2vh rgba(255, 233, 168, .35); opacity: .85; }
.decor .web { position: absolute; top: 0; width: 22vh; height: 22vh; fill: none; stroke: rgba(230, 220, 255, .28); stroke-width: 1.5; }
.decor .web.left { left: 0; } .decor .web.right { right: 0; transform: scaleX(-1); }
.decor .fog { animation: fog 26s ease-in-out infinite alternate; } .decor .fog.two { animation-duration: 34s; }
@keyframes fog { to { transform: translateX(220px); } }
.decor .pumpkin { animation: glow 2.6s ease-in-out infinite alternate; }
@keyframes glow { from { filter: drop-shadow(0 0 4px #ff7a1a); } to { filter: drop-shadow(0 0 16px #ffb14d); } }
.decor .flash { position: absolute; inset: 0; background: #e8e0ff; opacity: 0; }
.decor .flash.on { animation: flash 1.1s ease-out; }
@keyframes flash { 0%, 20%, 45% { opacity: 0; } 8% { opacity: .55; } 30% { opacity: .35; } }
.decor .lights { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 9vh; }
.decor .bulb { animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); } 50% { opacity: .35; } }
.decor .star { animation: blink 2.4s ease-in-out infinite; filter: drop-shadow(0 0 10px #ffd34d); }
.decor .sun { position: absolute; left: 6vw; top: 9vh; width: 14vh; height: 14vh; border-radius: 50%; background: #ffe26b;
  box-shadow: 0 0 6vh 2vh rgba(255, 226, 107, .4); }
.decor .sun::before { content: ""; position: absolute; inset: -6vh; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 107, .35) 0 8deg, transparent 8deg 24deg); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.decor .bunting { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 7vh; }
body.phone .decor .moon, body.phone .decor .sun { transform: scale(.6); transform-origin: top right; }
body.phone .decor .lights, body.phone .decor .bunting { height: 4vh; }
.tv header { position: relative; z-index: 2; }

/* the cards and tiles */
:root[data-season=halloween] .card, :root[data-season=halloween] .game, :root[data-season=halloween] .joinCard,
:root[data-season=halloween] .options .opt, :root[data-season=halloween] .chip { box-shadow: 0 0 2.4vh rgba(255, 122, 26, .28), inset 0 0 0 .25vh rgba(255, 122, 26, .45); }
:root[data-season=halloween] .joinCard { box-shadow: 0 0 0 .4vh #ff7a1a, 0 0 6vh rgba(255, 122, 26, .5); }
:root[data-season=christmas] .joinCard, :root[data-season=christmas] .game.on, :root[data-season=christmas] .card.win {
  border: .7vh solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box,
  repeating-linear-gradient(45deg, #e3263b 0 1.2vh, #fff 1.2vh 2.4vh) border-box; box-shadow: none; }
:root[data-season=christmas] .card { box-shadow: inset 0 0 0 .3vh #ffd34d; }
:root[data-season=easter] .card, :root[data-season=easter] .game, :root[data-season=easter] .joinCard, :root[data-season=easter] .options .opt {
  outline: .35vh dashed color-mix(in srgb, var(--accent2) 70%, transparent); outline-offset: -1.1vh; border-radius: 3.4vh; }
:root[data-season=halloween] .brand b, :root[data-season=halloween] .bigCode { text-shadow: 0 0 2vh #b6ff3b; }
:root[data-season=christmas] .brand b, :root[data-season=christmas] .bigCode { text-shadow: 0 0 2vh rgba(255, 211, 77, .7); }

/* Glitch's costumes: vampire (cape, fangs, witch's hat), Santa (hat, beard), bunny (ears, bow tie) */
.gaspar .cost { display: none; }
:root[data-season=halloween] .gaspar .cost.vamp, :root[data-season=christmas] .gaspar .cost.santa, :root[data-season=easter] .gaspar .cost.bunny { display: inline; }
/* the bottom bar readable over the scene (snow, grass, fog) */
:root[data-season=halloween] .tv footer, :root[data-season=christmas] .tv footer, :root[data-season=easter] .tv footer {
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent) 55%, transparent); }
:root[data-season] .tv .footNote, :root[data-season] .tv .timer, :root[data-season] .tv .miniJoin b { text-shadow: 0 .3vh 1.2vh rgba(0, 0, 0, .7); }

/* ---- Halloween, scary: the dark, blood red, flicker, blood running, eyes, a figure ---- */
:root[data-season=halloween] { --accent: #c4121f; --accent2: #ff7a1a; --cyan: #8a1a2a; --hot: #ff4d4d; --go: linear-gradient(135deg, #8a0a12, #c4121f); }
:root[data-season=halloween]:not([data-theme=light]) { --bg: #060306; --panel: #140910; --line: #331320; --mute: #a8909a; --ink: #f0e6e6; }
:root[data-season=halloween]:not([data-theme=light]) body { background: radial-gradient(70vmax 50vmax at 50% 110%, rgba(110, 7, 16, .35), transparent 70%), var(--bg); }
:root[data-season=halloween] .decor .moon { background: radial-gradient(circle at 40% 35%, #ffd9c2, #d9583a 60%, #7a1a10); box-shadow: 0 0 10vh 3vh rgba(196, 18, 31, .35); opacity: .9; }
:root[data-season=halloween] .decor span { filter: brightness(0); opacity: .75; }
:root[data-season=halloween] .decor .pumpkin { animation: glow 0.9s steps(3) infinite alternate; }
.decor .drips { position: absolute; top: 0; left: 0; width: 100%; height: 10vh; animation: drip 18s ease-in infinite alternate; transform-origin: top; }
@keyframes drip { from { transform: scaleY(1); } to { transform: scaleY(1.6); } }
.decor .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .85) 100%);
  animation: flicker 7s infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; } 44% { opacity: .7; } 45% { opacity: 1; }
  77% { opacity: 1; } 78% { opacity: .6; } 79% { opacity: 1; } }
.decor .eyes { position: absolute; display: flex; gap: 1.6vh; opacity: 0; animation: eyes 22s infinite; }
.decor .eyes i { width: 1.4vh; height: .9vh; border-radius: 50%; background: #ffdf3a; box-shadow: 0 0 1.4vh #ff3a1a; }
@keyframes eyes { 0%, 60%, 100% { opacity: 0; transform: scaleY(1); } 63%, 74%, 79%, 90% { opacity: .85; transform: scaleY(1); }
  76% { opacity: .85; transform: scaleY(.1); } 92% { opacity: 0; } }
.decor .apparition { position: absolute; top: 30vh; left: -20vw; width: 18vh; height: 34vh; border-radius: 9vh 9vh 2vh 2vh;
  background: radial-gradient(ellipse at 50% 30%, rgba(220, 220, 255, .22), transparent 70%); filter: blur(4px);
  animation: apparition 47s linear infinite; }
@keyframes apparition { 0%, 70% { transform: translateX(0); opacity: 0; } 75% { opacity: .9; } 95% { opacity: .6; } 100% { transform: translateX(140vw); opacity: 0; } }
:root[data-season=halloween] .gaspar .eye { fill: #ff1a1a; filter: drop-shadow(0 0 4px #ff1a1a); }
:root[data-season=halloween] .card, :root[data-season=halloween] .game, :root[data-season=halloween] .joinCard,
:root[data-season=halloween] .options .opt, :root[data-season=halloween] .chip { box-shadow: 0 0 2.4vh rgba(196, 18, 31, .25), inset 0 0 0 .2vh rgba(196, 18, 31, .5); }
:root[data-season=halloween] .joinCard { box-shadow: 0 0 0 .4vh #6e0710, 0 0 6vh rgba(196, 18, 31, .45); }
:root[data-season=halloween] .brand b, :root[data-season=halloween] .bigCode { text-shadow: 0 0 2vh #c4121f; color: #ff4d4d; }
:root[data-season=halloween] .tv h1, :root[data-season=halloween] .tv .big { text-shadow: 0 0 3vh rgba(196, 18, 31, .6); letter-spacing: .02em; }
:root[data-season=halloween] .decor .web { stroke: rgba(200, 190, 210, .22); }

/* ---- Christmas, cosy: warm reds and gold, firelight, a window of snow, a jumper knit ---- */
:root[data-season=christmas] { --accent: #d8383a; --accent2: #ffcf6b; --cyan: #f0b27a; --hot: #ff9a8a; --go: linear-gradient(135deg, #b8282a, #e8913a); }
:root[data-season=christmas]:not([data-theme=light]) { --bg: #1c0d09; --panel: #3a1c14; --line: #5a2e20; --mute: #e2c8b0; --ink: #fff4e6; }
:root[data-season=christmas]:not([data-theme=light]) body { background: radial-gradient(80vmax 50vmax at 30% 110%, rgba(255, 140, 50, .3), transparent 70%),
  radial-gradient(50vmax 40vmax at 90% 100%, rgba(255, 207, 107, .15), transparent 70%), var(--bg); }
.decor .window { position: absolute; right: 6vw; top: 12vh; width: 30vh; height: 36vh; border: 1.4vh solid #4a2a18; border-radius: 1vh;
  background: linear-gradient(#0b1a3a, #1a2f5a); box-shadow: inset 0 0 4vh rgba(0, 0, 0, .5), 0 0 6vh rgba(255, 180, 90, .12); overflow: hidden; opacity: .9; }
.decor .window::before, .decor .window::after { content: ""; position: absolute; background: #4a2a18; z-index: 1; }
.decor .window::before { left: 50%; top: 0; bottom: 0; width: 1vh; transform: translateX(-50%); }
.decor .window::after { top: 50%; left: 0; right: 0; height: 1vh; transform: translateY(-50%); }
.decor .snowfall i { position: absolute; top: -5%; width: .7vh; height: .7vh; border-radius: 50%; background: #fff; opacity: .85; animation: snow linear infinite; }
@keyframes snow { to { transform: translate(2vh, 40vh); } }
.decor .flames { transform-origin: 140px 290px; animation: flames .35s ease-in-out infinite alternate; }
@keyframes flames { from { transform: scale(1, 1) skewX(0); } to { transform: scale(1.05, 1.12) skewX(-3deg); } }
.decor .firelight { position: absolute; inset: 0; background: radial-gradient(60vmax 40vmax at 15% 100%, rgba(255, 130, 40, .22), transparent 70%);
  animation: firelight 2.2s ease-in-out infinite alternate; }
@keyframes firelight { from { opacity: .7; } 40% { opacity: 1; } 70% { opacity: .8; } to { opacity: .95; } }
.decor .garland { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 9vh; }
.decor .bulb.warm { fill: #ffe7b0; animation: warm 2.6s ease-in-out infinite; }
@keyframes warm { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #ffcf6b); } 50% { opacity: .55; filter: none; } }
:root[data-season=christmas] .joinCard, :root[data-season=christmas] .game.on, :root[data-season=christmas] .card.win {
  border: .5vh solid #ffcf6b; background: linear-gradient(var(--panel), var(--panel)); box-shadow: 0 0 4vh rgba(255, 180, 90, .25); }
:root[data-season=christmas] .card, :root[data-season=christmas] .joinCard, :root[data-season=christmas] .options .opt {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1vh, transparent 1vh 2vh),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1vh, transparent 1vh 2vh); }
:root[data-season=christmas] .card { background-color: var(--paper); box-shadow: inset 0 0 0 .3vh #d8a050; }
:root[data-season=christmas] .brand b, :root[data-season=christmas] .bigCode { text-shadow: 0 0 2vh rgba(255, 207, 107, .6); }
body.phone .decor .window { transform: scale(.45); transform-origin: top right; }

/* ===================== themes, settled: calm, solid, one palette each ===================== */
/* No transparency and no glow: solid background, solid cards and tiles. Each theme keeps to
   its own colours: the games' own colours (and the pink of their icons, Glitch's purple)
   are the default theme's only. */
:root[data-season=halloween] { --bg: #000; --panel: #120a0c; --line: #2c1216; --ink: #f2e6e6; --mute: #b0646a; --paper: #e6d8c8; --paper-ink: #140a0c;
  --accent: #b3121c; --accent2: #e8661a; --cyan: #b3121c; --hot: #e8661a; --good: #e8661a; --go: #b3121c; }
:root[data-season=christmas] { --bg: #1c0d09; --panel: #33170f; --line: #4e2618; --ink: #fff4e6; --mute: #e0bfa0; --paper: #fff4e6; --paper-ink: #2a120c;
  --accent: #c8302f; --accent2: #f2bd57; --cyan: #f2bd57; --hot: #f2bd57; --good: #6fae6a; --go: #c8302f; }
:root[data-season=easter] { --bg: #20264a; --panel: #2f3770; --line: #46509a; --ink: #fffaf2; --mute: #cfd3f5; --paper: #fffaf0; --paper-ink: #20264a;
  --accent: #f07bb4; --accent2: #f7d85e; --cyan: #86e3c0; --hot: #f07bb4; --good: #86e3c0; --go: #f07bb4; }
:root[data-season=halloween] body, :root[data-season=christmas] body, :root[data-season=easter] body { background: var(--bg) !important; }

/* one palette: the tiles, their icons, buttons, Glitch */
:root[data-season=halloween] [data-g], :root[data-season=christmas] [data-g], :root[data-season=easter] [data-g] { --g: var(--accent); }
:root[data-season=halloween] .game, :root[data-season=christmas] .game, :root[data-season=easter] .game,
:root[data-season=halloween] .gamePick button, :root[data-season=christmas] .gamePick button, :root[data-season=easter] .gamePick button {
  background: var(--panel) !important; border: .3vh solid var(--line); }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .game.on, :root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .gamePick button.on { border-color: var(--accent); box-shadow: none !important; transform: none; }
:root[data-season=halloween] .gicon, :root[data-season=christmas] .gicon, :root[data-season=easter] .gicon { color: var(--accent2) !important; }
:root[data-season=halloween] .gicon [fill="#ff3d8b"], :root[data-season=christmas] .gicon [fill="#ff3d8b"], :root[data-season=easter] .gicon [fill="#ff3d8b"] { fill: var(--accent); }
:root[data-season=halloween] .gicon [stroke="#ff3d8b"], :root[data-season=christmas] .gicon [stroke="#ff3d8b"], :root[data-season=easter] .gicon [stroke="#ff3d8b"] { stroke: var(--accent); }
:root[data-season=halloween] .gaspar .body, :root[data-season=christmas] .gaspar .body, :root[data-season=easter] .gaspar .body { fill: var(--panel); }
:root[data-season=halloween] .gaspar circle[fill="#ff3d8b"], :root[data-season=christmas] .gaspar circle[fill="#ff3d8b"], :root[data-season=easter] .gaspar circle[fill="#ff3d8b"] { fill: var(--accent); }
:root[data-season=halloween] .gaspar .mouth, :root[data-season=christmas] .gaspar .mouth, :root[data-season=easter] .gaspar .mouth { fill: var(--accent); }

/* solid cards: no glows, shadows, knit or dotted edges */
:root[data-season=halloween] :is(.card, .joinCard, .options .opt, .chip, .row, .list .item, .setRow, .pmBox, .bubble, .toggle, .btn),
:root[data-season=christmas] :is(.card, .joinCard, .options .opt, .chip, .row, .list .item, .setRow, .pmBox, .bubble, .toggle, .btn),
:root[data-season=easter] :is(.card, .joinCard, .options .opt, .chip, .row, .list .item, .setRow, .pmBox, .bubble, .toggle, .btn) {
  box-shadow: none !important; outline: none !important; background-image: none !important; text-shadow: none; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .joinCard { border: .4vh solid var(--accent) !important; background: var(--panel) !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .card.win { box-shadow: 0 0 0 .5vh var(--accent2) !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .brand b, :root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .bigCode { text-shadow: none !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .tv h1, :root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .tv .big { text-shadow: none !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .chip.done { border-color: var(--good); }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .pauseMenu { background: var(--bg); backdrop-filter: none; }
:root[data-season=halloween] .tv footer, :root[data-season=christmas] .tv footer, :root[data-season=easter] .tv footer { background: var(--bg) !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .tv .footNote, :root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .tv .timer, :root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .tv .miniJoin b { text-shadow: none !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .footNote { animation: none !important; }

/* the scene: still, solid */
.decor span, .decor .fog, .decor .eyes, .decor .apparition, .decor .vignette, .decor .flash, .decor .firelight, .decor .web { display: none !important; }
.decor .bulb, .decor .bulb.warm, .decor .star, .decor .pumpkin, .decor .drips { animation: none !important; filter: none !important; opacity: 1 !important; }
.decor .moon { background: #c9a98a !important; box-shadow: none !important; opacity: 1 !important; }
:root[data-season=halloween] .decor .moon { background: #8a1a14 !important; }
.decor .sun { box-shadow: none !important; } .decor .sun::before { display: none; }
.decor .window { box-shadow: none !important; opacity: 1 !important; }
.decor .snowfall i { opacity: 1 !important; }
:root[data-season=halloween] .gaspar .eye { filter: none !important; }
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) :is(.game, .gamePick button, .mate .av.big, .exPts .av.big) { box-shadow: none !important; }
:root[data-season=halloween] .gaspar .witch :is(path, ellipse) { stroke: var(--accent2); }
:root[data-season=halloween] .gaspar .witch path[stroke="#ff7a1a"] { stroke: var(--accent); }

/* ===================== the themes' palettes, as asked ===================== */
/* Halloween: black and light grey, nothing else */
:root[data-season=halloween]:not([data-x]):not([data-y]) { --bg: #000; --panel: #121212; --line: #333; --ink: #f2f2f2; --mute: #a8a8a8; --paper: #e6e6e6; --paper-ink: #000;
  --accent: #cfcfcf; --accent2: #ffffff; --cyan: #cfcfcf; --hot: #cfcfcf; --good: #cfcfcf; --go: #cfcfcf; }
:root[data-season=halloween] :is(.btn:not(.ghost):not(:disabled), .titleTag, .card .pts, .stamp, .toys button.hit) { color: #000 !important; }
:root[data-season=halloween] .decor .moon { background: #d6d6d6 !important; }
.decor .cobweb { position: absolute; top: 0; width: 22vh; height: 22vh; fill: none; stroke: #8a8a8a; stroke-width: 1.6; }
.decor .cobweb.left { left: 0; } .decor .cobweb.right { right: 0; transform: scaleX(-1); }
:root[data-season=halloween] .gaspar .eye { fill: #1d1238 !important; filter: none !important; }
:root[data-season=halloween] .gaspar .cost.vamp[fill="#1a0a14"] { fill: #0d0d0d; stroke: #8a8a8a; }
:root[data-season=halloween] .gaspar .cost.vamp[fill="#7a1a2a"], :root[data-season=halloween] .gaspar .cost.vamp[fill="#6e0a14"] { fill: #4a4a4a; }
:root[data-season=halloween] .gaspar .witch :is(path, ellipse) { fill: #0d0d0d; stroke: #cfcfcf; }
:root[data-season=halloween] .gaspar .witch path[stroke="#ff7a1a"], :root[data-season=halloween] .gaspar .witch path[stroke="#b3121c"] { stroke: #8a8a8a; fill: none; }

/* Christmas: dark green and dark red, cream; no brown */
:root[data-season=christmas]:not([data-x]):not([data-y]) { --bg: #0b2a1d; --panel: #123d2b; --line: #1f5a40; --ink: #f6f3ea; --mute: #bcd6c6; --paper: #f6f3ea; --paper-ink: #0b2a1d;
  --accent: #a3161f; --accent2: #f1e7cf; --cyan: #a3161f; --hot: #e05a62; --good: #7cc47f; --go: #a3161f; }
:root[data-season=christmas] .decor .window { border-color: #6e1218 !important; }
:root[data-season=christmas] .decor .window::before, :root[data-season=christmas] .decor .window::after { background: #6e1218; }
:root[data-season=christmas] .card { box-shadow: none !important; }

/* Easter: daylight: a pale sky, white cards, dark text, pink and yellow */
:root[data-season=easter]:not([data-x]):not([data-y]) { --bg: #e6f3ff; --panel: #ffffff; --line: #cddcf0; --ink: #26204a; --mute: #5d6690; --paper: #fff8e8; --paper-ink: #26204a;
  --accent: #e8609f; --accent2: #c99400; --cyan: #2fae86; --hot: #e8609f; --good: #2fae86; --go: #e8609f; }
:root[data-season=easter] :is(.card, .game, .joinCard, .options .opt, .gamePick button) { outline: none !important; }
:root[data-season=easter] .gaspar .body { fill: var(--accent); }
:root[data-season=easter] .gaspar [stroke="#f6efe6"] { stroke: var(--ink); }
:root[data-season=easter] .tv .toggle, :root[data-season=easter] .chip { color: var(--ink); }
:root[data-season=easter] .decor .sun { background: #ffd84a !important; }
:root[data-season=halloween] :is(.brand b, .bigCode, .tv .room .codeTag, .miniJoin b) { color: #f2f2f2 !important; }

/* the themed QR code: the figure drawn around a plain, scannable square */
/* the wrap is exactly the code's square and the card centres it (the card is wider: its join
   line): the figure's percentages are then the code's own units, and the figure sits on the
   code at every size (stretched to the card, the figure was centred in it and the code was not) */
.qrWrap { position: relative; width: fit-content; }
.lobbyLeft .joinCard { display: flex; flex-direction: column; align-items: center; }
.qrWrap .qrDeco { position: absolute; overflow: visible; pointer-events: none; }
.qrWrap .qr { position: relative; }
:root:is([data-season=christmas], [data-season=halloween], [data-season=easter]) .lobby { grid-template-columns: auto 1fr; }
:root:is([data-season=christmas], [data-season=halloween], [data-season=easter]) .lobbyLeft .joinCard { width: auto; padding: 3vh 4vh; }
:root:is([data-season=christmas], [data-season=halloween], [data-season=easter]) .lobbyLeft .joinCard .qr { width: 20vh; height: 20vh; margin: 0; border-radius: 0; }
:root[data-season=christmas] .lobbyLeft .qrWrap { margin: 16vh 9vh 6.5vh; }
:root[data-season=halloween] .lobbyLeft .qrWrap { margin: 16vh 8vh 4.5vh; }
:root[data-season=easter] .lobbyLeft .qrWrap { margin: 23vh 7vh 6vh; }

/* the scene a strip along the very bottom; the bar, Glitch and his bubble just above it */
.decor .scene { height: 11vh !important; }
body.phone .decor .scene { height: 7vh !important; }
:root:is([data-season=halloween], [data-season=easter]) .tv .screen { bottom: 11vh; }
:root:is([data-season=halloween], [data-season=easter]) .gaspar { bottom: 22vh; }
:root:is([data-season=halloween], [data-season=easter]) .bubble { bottom: 28vh; }
:root:is([data-season=halloween], [data-season=easter]) .tv footer { background: none !important; }

/* Christmas: more red and gold: dark red tiles and cards on the green, gold edges and icons */
:root[data-season=christmas]:not([data-x]):not([data-y]):not([data-z]) { --panel: #6e1218; --line: #b8892e; --mute: #f2d8c6;
  --accent: #e8b83a; --accent2: #f2c94c; --cyan: #e8b83a; --hot: #f2c94c; --go: #c8302f; --good: #7cc47f; }
:root[data-season=christmas] .btn:not(.ghost):not(:disabled) { color: #fff; }
:root[data-season=christmas] .gaspar .body { fill: #a3161f; }
:root[data-season=christmas] .chip, :root[data-season=christmas] .tv .toggle { border: .2vh solid var(--line); }

/* Christmas: the whole background dark red; green tiles with gold; a deep red card for the tree */
:root[data-season=christmas]:not([data-x]):not([data-y]):not([data-z]):not([data-w]) { --bg: #4a0a10; --panel: #123d2b; --line: #b8892e;
  --mute: #f2d8c6; --accent: #e8b83a; --accent2: #f2c94c; --go: #e8b83a; }
:root[data-season=christmas] .btn:not(.ghost):not(:disabled) { color: #2a0608 !important; }
:root[data-season=christmas] .joinCard { background: #2e060a !important; }
:root[data-season=christmas] .gaspar .body { fill: #1f6a43; }

/* ===== Christmas, settled: red and cream. A dark red room; cream tiles and cards with dark
   red type; gold for what's chosen, the code and the buttons; green only in the tree and
   the garland ===== */
:root[data-season=christmas]:not([data-x]):not([data-y]):not([data-z]):not([data-w]):not([data-v]) {
  --bg: #6a0f18; --panel: #4a0910; --line: #8f2a33; --ink: #fbf3e6; --mute: #f0cabf; --paper: #fbf3e6; --paper-ink: #5a0c13;
  --accent: #e8b83a; --accent2: #f2c94c; --cyan: #e8b83a; --hot: #f2c94c; --go: #e8b83a; --good: #7cc47f; }
:root[data-season=christmas] :is(.lobby .game, .phone .gamePick button, .options .opt) {
  background: var(--paper) !important; color: var(--paper-ink) !important; border: .35vh solid var(--paper) !important; }
:root[data-season=christmas] :is(.lobby .game .gtag, .phone .gamePick span) { color: #80363c !important; }
:root[data-season=christmas] .lobby .game .gicon { color: var(--paper-ink) !important; }
:root[data-season=christmas] .lobby .game .gicon :is([fill="#ff3d8b"]) { fill: #c8302f; }
:root[data-season=christmas] :is(.lobby .game.on, .phone .gamePick button.on) { background: var(--accent) !important; border-color: var(--accent) !important; }
:root[data-season=christmas] .joinCard { background: var(--paper) !important; border: .5vh solid var(--accent) !important; }
:root[data-season=christmas] .joinCard .url { color: #80363c; } :root[data-season=christmas] .joinCard .url b { color: var(--paper-ink); }
:root[data-season=christmas] .joinCard .bigCode { color: var(--paper-ink) !important; }
:root[data-season=christmas] .btn:not(.ghost):not(:disabled) { color: var(--paper-ink) !important; }
:root[data-season=christmas] .gaspar .body { fill: #e8b83a; }
/* the garland clear of the name and the players */
:root[data-season=christmas] .decor .garland { height: 5vh; }
:root[data-season=christmas] .tv header { margin-top: 3.4vh; }
body.phone .decor .garland { height: 2.6vh !important; }
:root[data-season=christmas] .phone main { padding-top: 3.4vh; }
/* Halloween's cobwebs smaller, clear of the name and the players */
.decor .cobweb { width: 13vh; height: 13vh; }
body.phone .decor .cobweb { width: 8vh; height: 8vh; }
/* the round QR badge (default look) */
.joinCard .qr.badge { border-radius: 50%; overflow: visible; width: 30vh; height: 30vh; }
.lobbyLeft .joinCard .qr.badge { width: 26vh; height: 26vh; }

/* ===== the themed bar: everything stays at the bottom; the bar is the theme's ground (the
   graveyard's earth, the Easter grass, a red band for Christmas) and what grows on it
   stands on its top edge ===== */
:root:is([data-season=halloween], [data-season=easter]) .tv .screen { bottom: 0; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer {
  min-height: 13vh; padding-top: 1.2vh; padding-bottom: 1.6vh; align-items: center; }
:root[data-season=halloween] .tv footer { background: #1a1a1a !important; }
:root[data-season=easter] .tv footer { background: #4fae6a !important; }
:root[data-season=christmas] .tv footer { background: #4a0910 !important; border-top: .45vh solid #e8b83a; }
body.tv .decor .scene { bottom: 12.6vh; height: 8vh !important; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .gaspar { bottom: 13.4vh; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .bubble { bottom: 19.5vh; }
/* on the grass and the earth: white type, light buttons */
:root[data-season=easter] .tv footer :is(.footNote, .timer, .miniJoin b, .miniJoin span, .nextHint) { color: #fff !important; }
:root[data-season=easter] .tv footer .toggle { background: #fff !important; color: #26204a !important; }
:root[data-season=halloween] .tv footer .toggle { background: #000 !important; color: #f2f2f2 !important; border: .2vh solid #555; }
:root[data-season=christmas] .tv footer .toggle { background: #6a0f18 !important; color: #fbf3e6 !important; border: .2vh solid #e8b83a; }
:root[data-season=christmas] .tv footer :is(.miniJoin b, .timer) { color: #f2c94c !important; }

/* the pause menu: how to join, beside the title */
.pmTop { display: flex; align-items: center; gap: 3vw; }
.pmJoin { display: flex; align-items: center; gap: 1.6vw; background: var(--bg); border-radius: 2vh; padding: 1.6vh; }
.pmJoin .qr { width: 18vh; height: 18vh; border-radius: 1vh; overflow: hidden; }
.pmJoin .qr svg { width: 100%; height: 100%; display: block; }
.pmJoin > div:last-child { display: flex; flex-direction: column; gap: .6vh; font-size: 2.2vh; color: var(--mute); }
.pmJoin b { color: var(--ink); }
.pmJoin .pmCode { font-size: 6vh; font-weight: 900; letter-spacing: .15em; color: var(--accent2); }

/* the countdown: big and round, in the middle of the bottom, a ring draining (--f, 1 to 0) */
.tv footer .timer { position: absolute; left: 50%; bottom: 2.2vh; transform: translateX(-50%); width: 13vh; height: 13vh; min-width: 0;
  border-radius: 50%; display: grid; place-items: center; font-size: 6.4vh; font-weight: 900; color: var(--ink); z-index: 3;
  background: radial-gradient(closest-side, var(--panel) 80%, transparent 81%),
    conic-gradient(var(--accent2) calc(var(--f, 1) * 360deg), var(--line) 0); text-align: center; }
.tv footer .timer:empty { display: none; }
.tv footer .timer.low { color: #fff; animation: pulse .9s infinite;
  background: radial-gradient(closest-side, #e0123d 80%, transparent 81%), conic-gradient(#ff8a96 calc(var(--f, 1) * 360deg), #5a0a14 0); }
.tv .footNote:not(:empty) ~ .timer { display: none; }
.tv footer .timer.low { animation: beat .5s ease-out infinite alternate; }
@keyframes beat { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.12); } }

/* Glitch at the bar's level, in the corner: up when he speaks (or cheers), down out of sight
   when not; his bubble above the countdown */
.gaspar, :root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .gaspar {
  bottom: 1.2vh; translate: 60% 125%; rotate: 25deg; transition: translate .45s cubic-bezier(.3, 1.3, .5, 1), rotate .45s; }
.gaspar.up { translate: 0 0; rotate: 0deg; }
.bubble, :root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .bubble { bottom: 16.5vh; }
:root[data-season=easter] .tv footer .timer:not(.low) { color: var(--ink) !important; }

/* ===== the waiting line above the bar's graves and flowers; the badge in its frame;
   Easter grown up: ivory, sage, ochre, a touch of blush ===== */
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 21.5vh; }
:root[data-season=christmas] .tv .footNote { bottom: 15vh; }
:root:is([data-season=christmas], [data-season=easter]) .lobbyLeft .qrWrap { margin: 5vh 4.5vh 4vh; }
:root:is([data-season=christmas], [data-season=easter]) .lobbyLeft .joinCard .qr.badge { width: 23vh; height: 23vh; border-radius: 50%; }
:root[data-season=easter]:not([data-x]):not([data-y]):not([data-z]) { --bg: #f4efe4; --panel: #fffdf7; --line: #ddd4c0; --ink: #2f3a2a;
  --mute: #4f5447; --paper: #fffdf7; --paper-ink: #2f3a2a; --accent: #546b47; --accent2: #9c7431; --cyan: #546b47; --hot: #c47a72;
  --go: #546b47; --good: #546b47; }
:root[data-season=easter] .tv footer { background: #7c9a6a !important; }
:root[data-season=easter] .tv footer .toggle { background: #fffdf7 !important; color: #2f3a2a !important; }
:root[data-season=easter] .btn:not(.ghost):not(:disabled) { color: #fff !important; }
:root[data-season=easter] .gaspar :is(.hat.ears, .cost.bunny) { display: none !important; }
:root[data-season=easter] .gaspar .ant { display: inline !important; }
:root[data-season=easter] .joinCard { border-color: var(--accent) !important; }
:root[data-season=easter] .joinCard .bigCode { color: var(--accent2) !important; }
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 18.5vh; }
:root[data-season=easter] .tv footer .footNote { color: var(--ink) !important; }
:root[data-season=christmas] .lobbyLeft .qrWrap { margin-bottom: 6.5vh; }
:root[data-season=easter] .tv #footNote { color: var(--ink) !important; }
:root[data-season=easter] .lobbyLeft .qrWrap { margin: 3.5vh 3.5vh 2.5vh; }
/* in the themes the lobby sits from the top (centred, a shorter card pushed the tiles down
   onto the waiting line) */
:root:is([data-season=halloween], [data-season=christmas], [data-season=easter]) .tv .stage > .lobby { margin: 5vh 0 auto; }

/* ===== the themed bars low and slim: space matters ===== */
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer { min-height: 6.5vh; padding-top: .6vh; padding-bottom: .8vh; }
body.tv .decor .scene { bottom: 6vh; height: 4.5vh !important; }
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 9.5vh; }
:root[data-season=christmas] .tv .footNote { bottom: 7.5vh; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv .footNote { font-size: 3vh; }
/* Easter: the cartoon bunny round the code again */
:root[data-season=easter] .lobbyLeft .qrWrap { margin: 23vh 7vh 6vh; }
:root[data-season=easter] .lobbyLeft .joinCard .qr { width: 20vh; height: 20vh; border-radius: 0; margin: 0; }
body.tv .decor .scene { bottom: 5vh; height: 11.25vh !important; }
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 10.5vh; }

/* ===== the themed bars: thin (half again), the scene on them small ===== */
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer {
  min-height: 3.4vh; padding-top: .3vh; padding-bottom: .3vh; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer .toggle { font-size: 1.6vh; padding: .3em .9em; }
body.tv .decor .scene { bottom: 2.6vh; height: 6vh !important; }
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 5.4vh; }
:root[data-season=christmas] .tv .footNote { bottom: 4.4vh; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer .timer { bottom: .8vh; }
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 6.6vh; }

/* ===== the themed bar: just the ground, a thin strip ===== */
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer { min-height: 1.8vh; padding: 0 3.5vw; }
body.tv .decor .scene { bottom: .9vh; height: 6vh !important; }
:root:is([data-season=halloween], [data-season=easter]) .tv .footNote { bottom: 4.6vh; }
:root[data-season=christmas] .tv .footNote { bottom: 2.6vh; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer .timer { bottom: 1.4vh; }
:root:is([data-season=halloween], [data-season=easter], [data-season=christmas]) .tv footer .controls { position: absolute; right: 22vh; bottom: 2.6vh; }
/* Christmas: Santa round the code (the code in his beard) */
:root[data-season=christmas] .lobbyLeft .qrWrap { margin: 21vh 7vh 6vh; }
:root[data-season=christmas] .lobbyLeft .qrWrap { margin-bottom: 8vh; }
:root[data-season=christmas] .tv .footNote { bottom: 4.6vh; }
/* the full-body Santa: room round the code for his hat, face, arms and boots */
:root[data-season=christmas] .lobbyLeft .qrWrap { margin: 24vh 8.5vh 11vh; }
:root[data-season=christmas] .lobbyLeft .joinCard .qr { width: 18vh; height: 18vh; }
:root[data-season=christmas] .lobbyLeft .qrWrap { margin: 20vh 7vh 9vh; }
:root[data-season=christmas] .lobbyLeft .joinCard .qr { width: 16vh; height: 16vh; }
/* Christmas: no garland at the top, so the header sits where it does in the other looks */
:root[data-season=christmas] .tv header { margin-top: 0; }
:root[data-season=christmas] .phone main { padding-top: 16px; }

/* Santa's "Ho ho ho!" bubble over his hat, shown while he says it */
.qrDeco .santaSay { opacity: 0; transition: opacity .25s; font-family: inherit; }
.qrDeco .santaSay.on { opacity: 1; }
/* the stage is the box what's on it is fitted into (tv.js, fitStage) */
.tv .stage { position: relative; transform-origin: 50% 50%; }
/* ...and up when he talks: the themes' placing of him (:root:is(...) .gaspar) outweighed
   .gaspar.up, so at Christmas he never came up at all */
:root[data-season=christmas] .gaspar.up { translate: 0 0; rotate: 0deg; }

/* ===== the bottom bar: one solid band that always says what the room has to do now, the
   time as a track along it pulled by the theme's figure, decorations only at its two ends.
   It is in the page's flow, so the stage ends above it; nothing is drawn over it. ===== */
body.tv { --barH: 9vh; }
body.tv .decor .scene { display: none !important; }
#bar { position: relative; display: grid !important; grid-template-columns: 1fr minmax(0, 3.2fr) 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 1.5vw;
  height: var(--barH); min-height: 0 !important; padding: 0 2vw !important; background: var(--panel) !important; border-top: .45vh solid var(--accent2);
  z-index: 6; }
:root[data-season=christmas] #bar { background: #4a0910 !important; border-top-color: #e8b83a; }
:root[data-season=easter] #bar { background: #7c9a6a !important; border-top-color: #fffdf7; }
:root[data-season=halloween] #bar { background: #1a1a1a !important; border-top-color: #ff7a1a; }
#bar .barEnd { height: 100%; min-height: 0; display: flex; align-items: flex-end; padding: 1.4vh 0 .5vh; box-sizing: border-box; overflow: hidden; }
#bar #barR { justify-content: flex-end; }
#bar .barEnd svg { height: 100%; width: auto; max-width: 100%; }
/* the line: alone in the middle of the bar, big */
#bar .barMid { position: static; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; }
#bar #footNote { position: static !important; transform: none !important; animation: none !important; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: 4.2vh !important; font-weight: 800; color: #fffaf0 !important; text-shadow: none !important; line-height: 1.2; max-width: 100%; }
:root[data-season=easter] #bar #footNote { color: #fff !important; }
:root:not([data-season]) #bar #footNote, :root[data-season=party] #bar #footNote { color: var(--ink) !important; }
#bar #footNote br { display: none; }
#bar #footNote span { display: inline; margin-left: .8em; font-size: .6em; color: inherit; opacity: .75; }
/* the VIP's cue to move on is an action like the others, at their size (not a side note) */
#bar #footNote .nextHint { margin: 0; font-size: 1em; opacity: 1; animation: none; }
#bar #footNote:empty { display: none; }
#bar .nextHint { font: inherit; color: inherit; }
#bar .controls { display: none !important; }
/* the time: a track along the bar's top edge, the theme's figure riding on it pulling the fill,
   the seconds beside the figure; the stage keeps clear of the figure while it runs */
#bar .track { position: fixed; left: 0; right: 0; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; bottom: calc(var(--barH) - .45vh); height: .9vh; background: rgba(0, 0, 0, .45); z-index: 7; }
#bar .track:not(:has(.timer:not(:empty))) { display: none; }
body.tv .screen:has(#timer:not(:empty)) .stage { padding-bottom: 5vh; }
/* the time gone: drawn exactly as a bar of that width, but moved, not resized (resizing it five times
   a second made a slow TV lay out and redraw the bar on every frame): the fill is a window as long as
   the line, and a strip of the same shape slides into it from the left */
#bar .track .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; overflow: hidden; --fill: var(--accent2); }
#bar .track .fill::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--fill); border-radius: inherit;
  transform: translateX(calc((var(--done, 0) - 1) * 100%)); transition: transform .2s linear; }
:root[data-season=christmas] #bar .track .fill { --fill: #1f8a4a; }
:root[data-season=easter] #bar .track .fill { --fill: #ffb3d1; }
:root[data-season=halloween] #bar .track .fill { --fill: #ff7a1a; }
#bar .track .lead { position: absolute; left: 0; width: 100%; bottom: .5vh; height: 4.2vh; display: flex; align-items: flex-end; gap: .6vh; pointer-events: none;
  transform: translateX(calc(var(--done, 0) * 100% - 1.5vh)); transition: transform .2s linear; }   /* as long as the line, so 100% of its own width is the line's: the same place, moved not re-laid-out */
#bar .track .lead svg { height: 100%; width: auto; display: block; }
#bar .track .lead:not(:has(svg))::before { content: ""; width: 2vh; height: 2vh; border-radius: 50%; background: var(--accent2); margin: 0 0 -1.05vh .5vh; }   /* centred on the line and on the time gone */
#bar .track .timer { position: static !important; transform: none !important; width: auto !important; height: auto !important; min-width: 0; background: none !important;
  font-size: 2.6vh !important; font-weight: 900; line-height: 1; color: #fffaf0 !important; text-shadow: 0 .2vh .6vh rgba(0, 0, 0, .7) !important; animation: none; display: block !important; }
:root:not([data-season]) #bar .track .timer, :root[data-season=party] #bar .track .timer, :root[data-season=easter] #bar .track .timer { color: var(--ink) !important; text-shadow: none !important; }
/* the last five seconds: the number jumps out — big, red, throbbing — so the room can't miss it */
#bar .track .timer.low { color: #ff5a3d !important; font-size: 5vh !important; text-shadow: 0 .2vh 1.2vh rgba(0, 0, 0, .6) !important; animation: lowPulse .5s ease-in-out infinite; transform-origin: center bottom; }
@keyframes lowPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
:root[data-season=easter] #bar .track .timer.low, :root[data-season=party] #bar .track .timer.low, :root:not([data-season]) #bar .track .timer.low { color: #e23b2a !important; }
/* Glitch and his bubble stand on the bar */
body.tv .gaspar, :root:is([data-season]) body.tv .gaspar { bottom: calc(var(--barH) + .5vh) !important; }
:root[data-season] body.tv .gaspar.up { translate: 0 0; rotate: 0deg; }
body.tv .gaspar:not(.up), :root[data-season] body.tv .gaspar:not(.up) { translate: 60% calc(170% + var(--barH)); rotate: 25deg; }   /* the start screen has no season yet: he peeked out of the corner there */
body.tv .bubble, :root:is([data-season]) body.tv .bubble { bottom: calc(var(--barH) + 7vh) !important; }

/* Christmas: snow falling behind everything (net.js, setSeason) */
.decor .snow { position: absolute; inset: 0; }
.decor .snow i { position: absolute; top: -2vh; border-radius: 50%; background: #fff; display: block !important;
  animation: snowFall linear infinite; will-change: transform; }
@keyframes snowFall { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * .5 + 1.5vw), 55vh); } 100% { transform: translate(var(--dx), 108vh); } }
body.phone .decor .snow i { opacity: .35 !important; }
/* the line in the bar blinks while something is waiting on the room: fades out and back in */
#bar #footNote.act { animation: barBlink 1.8s ease-in-out infinite !important; }
@keyframes barBlink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* the language choice: as many as there are, wrapping onto more rows */
.seg.langs { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 1.6em; max-width: 100%; }
body.phone .seg.langs { display: grid; grid-template-columns: 1fr 1fr; }
/* no band: the bar's line and time sit straight on the page's background (a solid band was
   heavy on the screen); a soft shadow keeps the line readable over the snow */
#bar, :root[data-season] #bar { background: none !important; border-top: 0 !important; }
#bar #footNote { text-shadow: 0 .2vh 1vh rgba(0, 0, 0, .55) !important; }
:root[data-season=easter] #bar #footNote, :root[data-season=party] #bar #footNote, :root:not([data-season]) #bar #footNote { color: var(--ink) !important; text-shadow: none !important; }
:root[data-season=party] #bar #footNote { color: #fffaf0 !important; text-shadow: 0 .2vh 1vh rgba(0, 0, 0, .5) !important; }
#bar .track { background: rgba(255, 255, 255, .14); border-radius: 1vh; left: 3vw; right: 3vw; }
:root[data-season=easter] #bar .track { background: rgba(47, 58, 42, .15); }
#bar .track .fill { border-radius: 1vh; }
/* the corner scenes taller than the line, standing up into the empty corners above it */
#bar .barEnd { height: 14vh !important; align-self: end; overflow: visible !important; padding: 0 0 .6vh !important; pointer-events: none; }
body.tv .gaspar { z-index: 7; }
#bar .barEnd { padding: 0 !important; }
#bar .barEnd svg { display: block; height: 100%; width: 100%; max-width: none; }
#bar #barL { margin-left: -2vw; } #bar #barR { margin-right: -2vw; }

/* Urdu in Nastaliq, which climbs and falls along the line: more room between lines */
:root[lang=ur] { --font: "Noto Nastaliq Urdu", "Noto Sans Arabic", system-ui, sans-serif; }
:root[lang=ur] body { line-height: 1.9; }

/* ===== the tournament ===== */
.tourPlan h2 { font-size: 4.4vh; margin: 0 0 2vh; }
.tourPlan ol, .tourList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4vh; counter-reset: tg; }
.tourPlan li, .tourList li { counter-increment: tg; display: grid; grid-template-columns: 5vh 6vh auto 1fr; align-items: center; gap: 1.6vw;
  background: var(--panel); border-radius: 2vh; padding: 1.6vh 2vw; font-size: 3.6vh; }
.tourPlan li::before, .tourList li::before { content: counter(tg); font-weight: 900; color: var(--accent2); font-size: 4vh; }
.tourPlan li .gicon, .tourList li .gicon { width: 6vh; height: 6vh; }
.tourPlan li span { font-size: 2.3vh; color: var(--mute); }
.tourIntro { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; width: 100%; max-width: 110vh; }
.tourIntro h2 { margin: 0; } .tourIntro .big { margin: 0; }
.tourList { width: 100%; max-width: 70vh; }
.tourList li { grid-template-columns: 5vh 6vh 1fr; }
.tourHow { margin: 1vh 0 0; padding: 0; list-style: none; text-align: center; font-size: 2.8vh; color: var(--mute); display: flex; flex-direction: column; gap: .8vh; }
.tourRow { grid-template-columns: 4vh 1fr auto auto; }
.tourRow .gain { color: var(--good); font-size: .8em; }
.tourRow .num { min-width: 3em; text-align: right; }
.tourEnd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; width: 100%; max-width: 160vh; align-items: start; margin-top: 3vh; }
.tourEnd .board { max-width: none; }
.tourTitles { display: flex; flex-direction: column; gap: 1.4vh; }
.tourTitles h3 { margin: 0 0 .6vh; font-size: 3.2vh; color: var(--accent2); }
.tourTitle { display: flex; align-items: center; justify-content: space-between; gap: 2vw; padding: 1.6vh 2vw; font-size: 2.8vh; font-weight: 800; text-align: left; }
.tourTitle .chip { font-size: 2.6vh; }
.phone .tourPick { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--panel); }
.phone .tourLen { align-self: center; }
.phone .tourMini { margin: 0 0 10px; padding-left: 1.4em; font-size: 1.1em; font-weight: 700; }
.tourPlan .tourHead { font-size: 3.4vh; font-weight: 900; color: var(--accent2); margin-bottom: 2vh; letter-spacing: .04em; }
.tourPlan li { grid-template-columns: 5vh 6vh 1fr; padding: 1.4vh 2vw; }
.tourPlan li div { display: flex; flex-direction: column; min-width: 0; }
.tourPlan li div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tourTitle { flex-direction: row !important; min-height: 0 !important; height: auto !important; }
.tourTitle .tourWho { display: inline-flex; align-items: center; gap: .6vw; font-size: 3vh; white-space: nowrap; }
.tourTitle .tourWho .face { width: 4.4vh; height: 4.4vh; }

/* ===================== the lobby with fifteen games: three columns, a kind of evening each ===================== */

.lobby { grid-template-columns: 30vh 1fr; gap: 3.5vw; max-width: 175vh; }
.lobbyLeft .joinCard .qr { width: 22vh; height: 22vh; }
.lobby .games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; align-items: start; }
.gcol { display: flex; flex-direction: column; gap: 1.2vh; min-width: 0; }
.gcol h3 { margin: 0 0 .4vh .4vw; font-size: 2vh; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.lobby .gcol .game { padding: 1.1vh 1vw; gap: 1vw; border-radius: 1.8vh; border-width: .3vh; min-width: 0; }
.lobby .gcol .game > div { min-width: 0; }
.lobby .gcol .game .gicon { width: 4.8vh; height: 4.8vh; }
.lobby .gcol .game .gname { font-size: 2.5vh; line-height: 1.15; }
.lobby .gcol .game .gtag { font-size: 1.6vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby .gcol .game.on { transform: scale(1.03); }
/* four kinds (Get moving joined): a size smaller, so the names still fit at 1280 x 720 */
.lobby .games[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1vw; }
.lobby .games[data-cols="4"] .gcol h3 { font-size: 1.8vh; }
.lobby .games[data-cols="4"] .game { padding: .9vh .7vw; gap: .7vw; }
.lobby .games[data-cols="4"] .game .gicon { width: 4vh; height: 4vh; }
.lobby .games[data-cols="4"] .game .gname { font-size: 2.2vh; overflow-wrap: break-word; hyphens: auto; }
.lobby .games[data-cols="4"] .game .gtag { font-size: 1.45vh; }

/* the phone's list: the same three kinds, two games a row */
.gamePick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gamePick h3 { grid-column: 1 / -1; margin: 10px 2px 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.gamePick h3:first-child { margin-top: 0; }
.gamePick button { padding: 10px 12px; border-radius: 12px; }
.gamePick b { font-size: 16px; line-height: 1.2; }
.gamePick span { font-size: 12px; line-height: 1.25; display: block; margin-top: 2px; }
/* ===================== Telephone ===================== */
[data-g=telephone] { --g: #c6f04f; }
.telChain { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.4vh 1.6vw; width: 100%; max-width: 170vh; margin-top: 1vh; }
/* each step waits its turn (in its place, so the row doesn't jump) */
.telStep { width: 34vh; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; position: relative; visibility: hidden; }
.telStep.on { visibility: visible; }
.telStep .card { width: 100%; box-sizing: border-box; min-height: 34vh; display: flex; align-items: center; justify-content: center; padding: 3vh 1.6vw; font-size: 3.4vh; }
.telStep .drawing { width: 34vh; height: 34vh; }
.telStep .by { font-size: 2.4vh; display: flex; align-items: center; gap: .5em; }
.telNote { position: absolute; top: 15vh; left: 0; right: 0; text-align: center; color: #6a5f8f; font-size: 2.6vh; font-weight: 800; }
.telSeen { width: 100%; aspect-ratio: 1; background: var(--paper); border-radius: 16px; display: block; }
.telItem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.telItem .av { width: 22px; height: 22px; vertical-align: middle; }

/* ===================== Two Truths and a Lie ===================== */
[data-g=truths] { --g: #ff9f6b; }
.truthsWho { display: flex; flex-direction: column; align-items: center; gap: 1vh; font-size: 4.4vh; margin-bottom: 1vh; }
.truthsList { grid-template-columns: 1fr; max-width: 110vh; }
.truthsList .opt { font-size: 4.2vh; text-align: left; padding-right: 14vh; }
.truthsList .opt .voters { justify-content: flex-start; margin-top: 1vh; min-height: 0; }
.truthsList .truthsLie { box-shadow: 0 0 0 .5vh var(--accent); animation: rise .5s ease-out both; }
.phone .truthsForm { display: flex; flex-direction: column; gap: 10px; }
.phone .truthsRow { display: flex; gap: 8px; align-items: stretch; }
.phone .truthsRow textarea { flex: 1; font-size: 17px; padding: 10px 12px; }
.phone .truthsMark { flex: none; width: 84px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); color: var(--mute); font-weight: 800; font-size: 14px; }
.phone .truthsMark.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.phone .truthsIdeas { display: flex; flex-wrap: wrap; gap: 6px; }
.phone .truthsIdeas button { background: var(--panel); border: 2px dashed var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 700; }
.phone .truthsSaid { text-align: left; }
.phone .truthsSaid.lie { box-shadow: 0 0 0 3px var(--accent); }
.phone .truthsSaid b { color: var(--accent); text-transform: uppercase; font-size: .8em; margin-left: .4em; }

/* ===================== Wavelength ===================== */
[data-g=wave] { --g: #4dd6c4; }
.tv .big.waveClue { font-size: 7vh; }
/* the dial: an SVG half circle, the faces laid over it in % of its box (2:1, like the SVG) */
.dial { position: relative; width: min(100vh, 76vw); aspect-ratio: 2 / 1; margin: 2vh auto 0; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial .dialBack { fill: var(--panel); }
.dial .dialRim { fill: none; stroke: url(#dialInk); stroke-width: 3; stroke-linecap: round; }
.dial .dialHub { fill: var(--ink); }
.dial .needle { stroke-width: 1.6; stroke-linecap: round; animation: rise .5s ease-out both; }
.dial .crowdDot { fill: var(--mute); opacity: .7; }
.dialZone { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--rot)); animation: zoneIn 1.6s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes zoneIn { from { transform: rotate(-90deg); opacity: 0; } }
.dialZone .z1 { fill: color-mix(in srgb, var(--accent2) 30%, transparent); }
.dialZone .z2 { fill: color-mix(in srgb, var(--accent2) 60%, transparent); }
.dialZone .z3 { fill: var(--accent2); }
.dialFace { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .4vh; }
.dialFace .av { width: 6vh; height: 6vh; font-size: 2.8vh; box-shadow: 0 0 0 .4vh var(--c), 0 1vh 2vh rgba(0, 0, 0, .35); }
.dialFace b { font-size: 2.6vh; font-weight: 900; color: var(--accent2); background: var(--bg); padding: .1em .5em; border-radius: 999px; }
.dialFace b.miss { color: var(--mute); }
.dialEnds { display: flex; justify-content: space-between; gap: 4vw; width: min(100vh, 76vw); margin: 1.4vh auto 0; font-size: 3.4vh; font-weight: 900; }
.dialEnds span:first-child { color: var(--cyan); } .dialEnds span:last-child { color: var(--accent); text-align: right; }
/* phone: the scale as a bar (the psychic sees the zone on it), and the slider to guess with */
.phone .waveScale { display: flex; flex-direction: column; gap: 8px; }
.phone .waveEnds { display: flex; justify-content: space-between; gap: 12px; font-weight: 900; font-size: 17px; }
.phone .waveEnds span:first-child { color: var(--cyan); } .phone .waveEnds span:last-child { color: var(--accent); text-align: right; }
.phone .waveBar { position: relative; height: 28px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, var(--cyan), var(--accent)); opacity: .95; }
.phone .waveBar i { position: absolute; top: 0; bottom: 0; }
.phone .waveBar .z1 { background: color-mix(in srgb, var(--accent2) 45%, transparent); }
.phone .waveBar .z2 { background: color-mix(in srgb, var(--accent2) 75%, transparent); }
.phone .waveBar .z3 { background: var(--accent2); }
.phone .waveBar b { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-ink); transform: translate(-50%, -50%); }
.phone .prompt.waveClue { font-size: 28px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.phone .prompt.waveClue .mute { font-size: 14px; color: #6a5f8f; }
.phone .waveDial { -webkit-appearance: none; appearance: none; width: 100%; height: 72px; margin: 6px 0; background: transparent; touch-action: none; }
.phone .waveDial::-webkit-slider-runnable-track { height: 20px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--accent)); }
.phone .waveDial::-moz-range-track { height: 20px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--accent)); }
.phone .waveDial::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 60px; margin-top: -20px; border-radius: 50%;
  background: var(--paper); border: 6px solid var(--paper-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.phone .waveDial::-moz-range-thumb { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 6px solid var(--paper-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.phone .waveDial:disabled { opacity: .55; }

/* ===================== Survey Says ===================== */
[data-g=survey] { --g: #5c8bff; }
/* the board: two columns of answers face down, each turned over in its turn */
.svBoard { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; gap: 1.6vh 1.6vw; width: 100%; max-width: 150vh; margin: 2vh 0; }
.svBoard.one { grid-template-columns: 1fr; max-width: 75vh; }
.svSlot { display: grid; grid-template-columns: 5vh 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .6vh 1.2vw;
  min-height: 11vh; padding: 1.4vh 1.6vw; border-radius: 1.6vh; background: var(--panel); border: .3vh solid var(--line); font-size: 4vh; font-weight: 900; }
.svSlot .svN { grid-row: 1 / 3; display: grid; place-items: center; width: 5vh; height: 5vh; border-radius: 50%; background: var(--line); font-size: 3vh; }
.svSlot.open { background: var(--paper); color: var(--paper-ink); border-color: #5c8bff; animation: svFlip .5s ease-out; }
.svSlot.open .svN { background: #5c8bff; color: #fff; }
.svSlot .svText { overflow-wrap: anywhere; }
.svSlot .svCount { font-size: 5vh; color: #3a5fd0; }
.svSlot .voters { grid-column: 2 / 4; justify-content: flex-start; }
.svSlot .voters .av { width: 3.6vh; height: 3.6vh; }
@keyframes svFlip { from { transform: perspective(80vh) rotateX(90deg); } }
.svOnly { width: 100%; max-width: 150vh; text-align: center; }
.svOnly h3 { color: var(--mute); font-size: 2.6vh; margin: 1vh 0; }
.svLonely { display: flex; flex-wrap: wrap; gap: .8vh; justify-content: center; font-size: 2.2vh; }
/* phone */
.phone .svIns { display: flex; flex-direction: column; gap: 10px; }
.phone .svIns input { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 20px; font-weight: 700; width: 100%; outline: none; }
.phone .svIns input:focus { border-color: var(--accent); }

/* ===================== Closest Guess ===================== */
[data-g=closest] { --g: #c6f432; }
/* the number line: guesses stand on it in lanes (a stem down to their spot), the answer
   drops onto it from above with its number under the line */
.numLine { position: relative; width: 150vh; max-width: 94%; height: 38vh; margin: 4vh auto 0; }
.nlAxis { position: absolute; left: -2%; right: -2%; bottom: 8vh; height: .8vh; border-radius: 999px; background: var(--line); }
.nlGuess { position: absolute; bottom: calc(9vh + var(--lane) * 8.5vh); width: 0; display: flex; justify-content: center; }
.nlGuess > div { display: flex; flex-direction: column; align-items: center; gap: .3vh; font-size: 2.3vh; font-weight: 900; white-space: nowrap; position: relative; }
.nlGuess .av.big { width: 4.6vh; height: 4.6vh; }
.nlGuess::after { content: ""; position: absolute; top: 100%; width: .35vh; height: calc(var(--lane) * 8.5vh + 1vh); background: var(--c); opacity: .55; }
.nlGuess.first span { color: var(--good); }
.nlPts { position: absolute; bottom: 100%; margin-bottom: .4vh; font-size: 2.6vh; color: var(--accent2); }
.nlAnswer { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; }
.nlDrop { position: absolute; inset: 0; animation: nlDrop .7s cubic-bezier(.3, 1.3, .5, 1) both; }
.nlDrop i { position: absolute; left: -.45vh; top: 0; bottom: 7.4vh; width: .9vh; border-radius: 999px; background: var(--good); box-shadow: 0 0 2vh var(--good); }
.nlDrop b { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); font-size: 4.4vh; font-weight: 900; color: var(--good); white-space: nowrap; }
@keyframes nlDrop { from { transform: translateY(-45vh); opacity: 0; } 60% { opacity: 1; } }
.phone .guessBox { display: flex; align-items: center; gap: 10px; }
.phone .guessBox input { flex: 1; min-width: 0; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 16px; font-size: 36px; font-weight: 900; text-align: center; }
.phone .guessBox span { font-weight: 800; color: var(--mute); }

/* ===================== Hot Potato ===================== */
[data-g=potato] { --g: #ff7a3d; }
/* the ring: faces round an oval in % of its box, the bomb flying between them */
.ptRing { position: relative; width: min(130vh, 88vw); height: 62vh; margin-top: 4vh; }
.ptSeat { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .5vh; font-weight: 900; font-size: 2.6vh; transition: opacity .3s, filter .3s; }
.ptSeat .av.big { width: 10vh; height: 10vh; font-size: 4.6vh; box-shadow: 0 0 0 .5vh var(--c), 0 1vh 2.4vh rgba(0, 0, 0, .35); }
.ptSeat .ptLives { color: var(--accent); font-size: 3vh; letter-spacing: .1em; }
.ptSeat.hold .av { animation: ptShake .18s linear infinite; box-shadow: 0 0 0 .7vh var(--accent2), 0 0 5vh var(--accent); }
.ptSeat.hold .nm { color: var(--accent2); }
.ptSeat.out { opacity: .35; filter: grayscale(1); }
@keyframes ptShake { 25% { transform: translate(-.5vh, .2vh) rotate(-5deg); } 75% { transform: translate(.5vh, -.2vh) rotate(5deg); } }
.ptMid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 50%; text-align: center; }
.ptHas { font-size: 4.6vh; font-weight: 900; color: var(--accent2); }
.ptBang { font-size: 13vh; font-weight: 900; color: var(--accent2); text-shadow: 0 0 4vh var(--accent); margin: 0; }
.ptBomb { position: absolute; width: 11vh; height: 11vh; translate: -50% -50%; z-index: 2;
  transition: left .4s cubic-bezier(.3, .7, .4, 1), top .4s cubic-bezier(.3, .7, .4, 1); }
.ptBomb svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1vh 1.6vh rgba(0, 0, 0, .45)); }
.ptBomb.fly svg { animation: ptFly .4s ease-out; }
@keyframes ptFly { 50% { transform: scale(1.35) rotate(200deg); } to { transform: rotate(360deg); } }
.ptSpark { transform-box: fill-box; transform-origin: center; animation: ptSpark .22s ease-in-out infinite alternate; }
.ptBomb.hurry .ptSpark { animation-duration: .09s; }
.ptBomb.hurry svg { filter: drop-shadow(0 0 2.4vh #ff5e3d); }
@keyframes ptSpark { from { transform: scale(.7) rotate(0); opacity: .8; } to { transform: scale(1.3) rotate(25deg); opacity: 1; } }
.ptBlast { display: block; font-size: 16vh; line-height: 1; translate: 0 -2.5vh; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.ptFlash { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: #fff6d0; animation: ptFlash .8s ease-out forwards; }
@keyframes ptFlash { from { opacity: .9; } to { opacity: 0; } }
.ptRing.ptQuake { animation: ptQuake .6s linear; }
@keyframes ptQuake { 10%, 50%, 90% { transform: translate(-1.4vh, .8vh); } 30%, 70% { transform: translate(1.4vh, -.8vh); } }
/* phone: the shapes to tap, the pad, the faces to throw at */
.phone .ptSeq { display: flex; justify-content: center; gap: 10px; }
.phone .ptSeq .ptShape { width: 58px; height: 58px; font-size: 34px; border-radius: 14px; background: var(--panel); border: 3px solid var(--c); }
.phone .ptSeq .ptShape.done { background: var(--c); color: var(--paper-ink); opacity: .55; }
.phone .ptShape { display: inline-grid; place-items: center; color: var(--c); font-weight: 900; line-height: 1; }
.phone .ptPad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phone .ptPad.n5, .phone .ptPad.n6 { grid-template-columns: 1fr 1fr 1fr; }
.phone .ptPad button { aspect-ratio: 1; border-radius: 18px; background: var(--panel); border: 2px solid var(--line); font-size: 54px; touch-action: manipulation; }
.phone .ptPad button:active { transform: scale(.94); }
.phone .ptMsg { min-height: 1.3em; margin: 0; text-align: center; font-weight: 800; color: var(--accent2); }
.phone .ptTargets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone .ptTargets .choice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; font-size: 20px; }
.phone .ptTargets .av.big { width: 64px; height: 64px; font-size: 28px; }
.phone .ptHolder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.phone .ptHolder .av.big { width: 96px; height: 96px; font-size: 44px; }
.phone .ptHolder b { font-size: 44px; font-weight: 900; color: var(--accent2); line-height: 1.1; overflow-wrap: anywhere; }
.phone .ptLives { color: var(--accent); font-size: 30px; letter-spacing: .12em; margin: 0; text-align: center; }

/* ===================== Draw It Live ===================== */
[data-g=pictionary] { --g: #ff9ad5; }
/* the word's blanks beside the drawing, the guessers' faces under them (a tick once they have it) */
.sketchStage .hangWord.big { font-size: 5.4vh; justify-content: flex-start; }
.pictGot { display: flex; flex-wrap: wrap; gap: 2.4vh 2vw; margin-top: 4vh; }
.pictGot .mate { animation: none; }
.pictGot .mate .av.big { width: 8vh; height: 8vh; font-size: 3.6vh; }
.pictGot .mate .nm { font-size: 2vh; }
.pictPts { color: var(--accent2); font-size: 2.4vh; font-weight: 900; }
/* the phone: the guess box, and what you guessed under it, newest first */
.phone .hangWord + .guessBox { margin-top: 6px; }
.phone .pictGuesses { display: flex; flex-direction: column; gap: 4px; width: 100%; max-height: 30vh; overflow: auto; color: var(--mute); font-weight: 700; }
.phone .pictGuesses .close { color: var(--accent2); }
.phone .pictGuesses .right { color: var(--good); }

/* ===================== Bumper Sumo ===================== */
[data-g=sumo] { --g: #ff9f1c; }
/* the island on one canvas the size of the stage, the sea round it fading into the page */
.tv .stage > .sumoArena { position: absolute; inset: 0; animation: none; }
.sumoArena canvas { display: block; width: 100%; height: 100%;
  background: radial-gradient(closest-side, #2f8ad8 0%, #1d63b0 62%, color-mix(in srgb, #1d63b0 40%, transparent) 85%, transparent 100%); }
.sumoWinners { display: flex; gap: 2vw; justify-content: center; margin: 2vh 0; }
.sumoWinners .av.big { width: 16vh; height: 16vh; font-size: 8vh; }
.sumoKos { display: flex; flex-wrap: wrap; gap: 1.4vh 2vw; justify-content: center; font-size: 3vh; max-width: 150vh; }
.sumoKos span { display: inline-flex; align-items: center; gap: .8vw; }
.sumoKos b { color: var(--accent2); font-weight: 900; }
/* phone: DASH above, the stick pad below; nothing scrolls or zooms */
body.noScroll { overflow: hidden; overscroll-behavior: none; touch-action: none; }
.phone .sumoCtl { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.phone .sumoState { margin: 0; text-align: center; font-size: 22px; font-weight: 900; }
.phone .sumoDash { position: relative; overflow: hidden; flex: 0 0 24vh; border: 0; border-radius: 28px; background: var(--accent); color: #fff;
  font: inherit; font-size: 44px; font-weight: 900; letter-spacing: .08em; touch-action: none; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.phone .sumoDash:active { transform: translateY(3px); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.phone .sumoDash.cool::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); transform-origin: right; animation: sumoCool 2s linear forwards; }
@keyframes sumoCool { to { transform: scaleX(0); } }
.phone .sumoJoy { position: relative; flex: 1; min-height: 42vh; border-radius: 28px; background: var(--panel); border: 2px dashed var(--line);
  touch-action: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.phone .sumoJoy .mute { pointer-events: none; font-size: 14px; }
.phone .sumoRing { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  border: 3px solid var(--line); background: color-mix(in srgb, var(--ink) 6%, transparent); pointer-events: none; }
.phone .sumoRing.on { border-color: var(--accent2); }
.phone .sumoRing i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--accent2); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }

/* ---- the lobby (TV): every game, six to a page, big; the kind of game is the colour of the tile's edge ---- */
.game[data-kind=funny] { --cg: #ff3d8b; } .game[data-kind=draw] { --cg: #2fd8ff; } .game[data-kind=bluff] { --cg: #b48cff; }
.game[data-kind=brain] { --cg: #4ee88a; } .game[data-kind=fast] { --cg: #ff8a3d; }
/* the kind as text (the tags): the edge colours are too pale to read as small text, so a shade
   that clears 4.5:1 — lighter on the dark tiles, darker on Christmas's and Easter's light ones */
.game[data-kind=funny] { --ct: #ff7db1; } .game[data-kind=bluff] { --ct: #b994ff; }
:root:is([data-season=christmas], [data-season=easter]) .game[data-kind=funny] { --ct: #8f224e; }
:root:is([data-season=christmas], [data-season=easter]) .game[data-kind=draw] { --ct: #125463; }
:root:is([data-season=christmas], [data-season=easter]) .game[data-kind=bluff] { --ct: #56437a; }
:root:is([data-season=christmas], [data-season=easter]) .game[data-kind=brain] { --ct: #1e5834; }
:root:is([data-season=christmas], [data-season=easter]) .game[data-kind=fast] { --ct: #753f1c; }
.glist .game .gkind { font-size: 1.9vh; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cg, var(--mute)); margin-bottom: .4vh; }
.lobby .games.catMode { display: block; }
.glist .game { padding: 1.5vh 1.4vw; gap: 1.2vw; min-width: 0; border-left: .9vh solid var(--cg, var(--line)); }
.glist .game .gname { font-size: 3.2vh; }
.glist .game .gtag { font-size: 2.3vh; white-space: normal; }
.glist .game .gicon { width: 6.5vh; height: 6.5vh; }
.gpager { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; flex: none; }
.gpager i { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--line); }
.gpager i.on { background: var(--accent2); }
.gpager .pg { width: 5vh; height: 5vh; border-radius: 50%; background: var(--panel); color: var(--ink); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gpager .pg svg { width: 2.6vh; height: 2.6vh; display: block; }

.gpager i { transition: background .3s, transform .3s; } .gpager i.on { transform: scale(1.3); }

/* ===== the lobby one size in every look and on every page =====
   The games: one column of tiles, two across, all one height, every name the same size; a window
   three rows tall on it, the column sliding up a page at a time (tv.js --page), the dots and
   arrows in a column on its right. The join card exactly as tall as that window, its contents
   centred, one width in every look. The code one size in every look; the figure round it (the
   tree and presents, the ghost, the bunny) is drawn in the code's own units, so the room kept
   for it is too, with the same gap between each figure and the link under it (2vh). 15vh: the most the tree allows in the card's height. */
body.tv .lobby { --tileH: 18vh; --tileGap: 1.8vh; --gamesH: calc(var(--tileH) * 3 + var(--tileGap) * 2); }
body.tv .lobby, :root[data-season] body.tv .lobby { grid-template-columns: auto 1fr; }
body.tv .stage > .lobby, :root[data-season] body.tv .stage > .lobby { margin: auto 0; }   /* centred top to bottom */
body.tv .lobby .games.catMode { display: flex; flex-direction: row; align-items: center; gap: 1.6vw; }
/* the window: a little room round the tiles for the highlighted one's glow, less than the gap
   between rows, so the next page never shows */
body.tv .lobby .gview { flex: 1; min-width: 0; height: calc(var(--gamesH) + 3vh); margin: -1.5vh; padding: 1.5vh; overflow: hidden; }
body.tv .lobby .glist { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: var(--tileH); gap: var(--tileGap) 1.4vw;
  transform: translateY(calc((var(--gamesH) + var(--tileGap)) * var(--page, 0) * -1)); transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
body.tv .lobby .glist .game { height: var(--tileH); overflow: hidden; border-top-width: .3vh; border-right-width: .3vh; border-bottom-width: .3vh; position: relative; }
body.tv .lobby .glist .game > div { min-width: 0; }
/* the whole text block — kind, name, description, players — sits its natural height, vertically
   centred in the card (the icon centred with it); the description caps at two lines */
body.tv .lobby .glist .game .gname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tv .lobby .glist .game .gtag { line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* under the description, a row of small tags: the kind of game (in its colour), the players, the age */
body.tv .lobby .glist .game .gtags { display: flex; flex-wrap: wrap; gap: .5vw; margin-top: 1vh; }
body.tv .lobby .glist .game .tg { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border: .15vh solid currentColor; border-radius: 999px;
  font-size: 1.6vh; font-weight: 800; line-height: 1.2; color: var(--mute); white-space: nowrap; }
body.tv .lobby .glist .game .tg.kind { color: var(--ct, var(--cg, var(--mute))); text-transform: uppercase; letter-spacing: .08em; }
body.tv .lobby .glist .game .tg svg { width: 2vh; height: 1.3vh; display: block; }
:root[data-season=christmas] body.tv .lobby .glist .game .tg:not(.kind) { color: #80363c; }
body.tv .lobby .glist .game .gname { line-height: 1.15; }
body.tv .lobbyLeft { --qr: 15vh; }
body.tv .lobbyLeft .joinCard, :root[data-season] body.tv .lobbyLeft .joinCard { width: 42vh; height: var(--gamesH); padding: 2.5vh 2vh; justify-content: center; }
body.tv .lobbyLeft .joinCard .qr, body.tv .lobbyLeft .joinCard .qr.badge,
:root[data-season] body.tv .lobbyLeft .joinCard .qr, :root[data-season] body.tv .lobbyLeft .joinCard .qr.badge { width: var(--qr) !important; height: var(--qr) !important; }
:root[data-season=christmas] body.tv .lobbyLeft .qrWrap { margin: calc(var(--qr) * 1.15) calc(var(--qr) * .4375) calc(var(--qr) * .645) !important; }   /* Santa: hat and face above, arms, boots below */
:root[data-season=halloween] body.tv .lobbyLeft .qrWrap { margin: calc(var(--qr) * .8) calc(var(--qr) * .4) calc(var(--qr) * .325) !important; }
:root[data-season=easter] body.tv .lobbyLeft .qrWrap { margin: calc(var(--qr) * 1.15) calc(var(--qr) * .35) calc(var(--qr) * .435) !important; }
/* the default look has no figure round the code: the code takes the room instead */
:root[data-season=party] body.tv .lobbyLeft { --qr: 26vh; }
/* Santa is the tallest figure: his code a touch smaller so he has room in the card */
:root[data-season=christmas] body.tv .lobbyLeft { --qr: 14vh; }

/* the phone's account screen: a row of stats and a short game history */
.phone .statRow { display: flex; gap: 10px; }
.phone .statCell { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; }
.phone .statCell b { display: block; font-size: 28px; font-weight: 900; }
.phone .statCell span { font-size: 12px; color: var(--mute); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.phone .histList { display: flex; flex-direction: column; gap: 8px; }
.phone .histRow { display: flex; justify-content: space-between; gap: 10px; background: var(--panel); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.phone .histRow .mute { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }


/* the lobby player count: grey while short of the chosen game's minimum, green once enough to start */
.phone h2 .pcount { font-size: .92em; font-weight: 900; color: var(--mute); font-variant-numeric: tabular-nums; }
.phone h2 .pcount.ok { color: var(--good); }

/* ===== Halloween's touch on the logo (top left, clear of the players' names on the right): a spider
   on its thread beside "Serão", its web in the corner (net.js). Sized in em, so it follows the logo. ===== */
:root[data-season=halloween] .brand { position: relative; }
:root[data-season=halloween] .brand::after { content: ""; position: absolute; pointer-events: none; background: no-repeat top center / contain; }
:root[data-season=halloween] .brand::after { left: calc(100% + .1em); top: -2.75em; width: 1.3em; height: 4.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100'><path d='M15 0 V68' stroke='%23d8dbe8' stroke-width='.7' opacity='.85'/><path d='M12.0 72.0 L5.0 66.0 L1.0 72.0 M11.0 75.0 L3.0 73.0 L0.0 80.0 M11.0 78.0 L4.0 81.0 L2.0 88.0 M12.0 81.0 L7.0 87.0 L6.0 94.0 M18.0 72.0 L25.0 66.0 L29.0 72.0 M19.0 75.0 L27.0 73.0 L30.0 80.0 M19.0 78.0 L26.0 81.0 L28.0 88.0 M18.0 81.0 L23.0 87.0 L24.0 94.0' fill='none' stroke='%239a9a9a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/><ellipse cx='15' cy='79' rx='5.2' ry='6.6' fill='%232b2b2b' stroke='%239a9a9a' stroke-width='1'/><circle cx='15' cy='70.5' r='3.3' fill='%232b2b2b' stroke='%239a9a9a' stroke-width='1'/><circle cx='13.7' cy='70' r='.8' fill='%23ff4a3a'/><circle cx='16.3' cy='70' r='.8' fill='%23ff4a3a'/></svg>"); animation: spiderBob 3.4s ease-in-out infinite alternate; }
@keyframes spiderBob { from { transform: translateY(0); } to { transform: translateY(.35em); } }
/* the web, top left only, small: a corner behind the logo */
.decor .cobweb { width: 14vh; height: 14vh; }
body.phone .decor .cobweb { width: 8vh; height: 8vh; }


/* the Serão Pass: games in it, locked until someone in the room has it; the note after paying */
.phone .gamePick button.locked { opacity: .6; }
.phone .passNote { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 50; padding: 12px 14px; border-radius: 12px;
  background: var(--ink, #222); color: var(--bg, #fff); font-weight: 700; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
body.tv .game.locked { opacity: .55; }