/* Colours live in tokens: dark by default, light under [data-theme="light"]. A script in each page's head sets
   data-theme from the saved choice or the system setting before anything is drawn.
   Two typefaces, served from this site: Onest for reading, Unbounded for names, numbers and codes. */
@font-face { font-family: Onest; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Onest; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bar-h: 61px;
  /* One rhythm for every screen in a room: the edge of the screen to the first card, and the space between cards. */
  --pad: 12px; --gap: 12px;
  --font: Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Unbounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Each kind of game has its own colour (the icons, the filters). */
  --k-word: #3355ff; --k-drawing: #ff5a3c; --k-party: #ffc83d; --k-deception: #7c3aed; --k-trivia: #4db6ff;
  --k-puzzle: #a8e05f; --k-strategy: #2ed3a0; --k-cards: #ff8fc7; --k-reflex: #ff9f1c;
  --wr-green: #2e8540; --wr-yellow: #e0b13a;
}
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121318; --panel: #1c1e25; --panel2: #262932; --line: #343844; --soft: #2a2d36; --rule: #2c2f38; --text: #f2f3f5; --dim: #a3a7b3; --lead: #c9ccd4;
  --btn: #f2f3f5; --on-btn: #121318; --btn2: #2a2d36; --raise: #2a2d36; --seg-on: #3a3e4a; --seg-shadow: none;
  --accent: #8c9eff; --sel: #8c9eff; --sel-bg: #23284a; --on-sel: #121318;
  --green: #2e8540; --yellow: #e0b13a; --gray: #3a3d46; --key: #5a5f6d; --keytext: #f2f3f5; --key-off: #1f2128; --key-offtext: #6b6f7c; --tile-empty: #343844; --tile-filled: #7d8190;
  --red: #d92d20; --ok: #6fd08c; --bad: #ff8a7a; --gold: #ffc83d; --goldtext: #ffc83d; --redteam: #e5534b; --blueteam: #4a8fe7;
  --input: #16171d; --field: #737889; --bar: #121318; --chatbg: #1c1e25; --feed: #16171d;
  --sel-blue: #23284a; --tint-blue: #1f2a3d; --me: #23284a; --tint-green: #18291f; --tint-gold: #2e2814;
  --right-bg: #173a24; --wrong-bg: #3f1d1c; --watch: #23284a; --banner: #1c1e25; --banner-line: #2c2f38;
  --red-bg: #3a1716; --red-line: #6b2b2b; --blue-bg: #15253d; --blue-line: #2f4566; --redtext: #ff8a84; --bluetext: #8ab8ff;
  --imp: #ff6b6b; --inside: #b6e3b4; --felt: #173322; --felt-line: #285a3a; --shade: rgb(8 9 12 / .66);
  --shadow: none; --lift: 0 18px 30px rgb(0 0 0 / .45); --pop: 0 24px 60px rgb(0 0 0 / .5);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3; --panel: #ffffff; --panel2: #f2f3f6; --line: #dcdfe5; --soft: #e6e8ec; --rule: #e6e8ec; --text: #15161a; --dim: #5c6070; --lead: #4e5260;
  --btn: #15161a; --on-btn: #ffffff; --btn2: #e3e6ec; --raise: #ffffff; --seg-on: #ffffff; --seg-shadow: 0 1px 3px rgb(21 22 26 / .12);
  --accent: #2443e0; --sel: #3355ff; --sel-bg: #eef1ff; --on-sel: #ffffff;
  --green: #2e8540; --yellow: #e0b13a; --gray: #7c808c; --key: #dcdfe5; --keytext: #15161a; --key-off: #8a8e99; --key-offtext: #e9ebef; --tile-empty: #d3d6dd; --tile-filled: #8a8e9a;
  --red: #c4320a; --ok: #1b7f3b; --bad: #c4320a; --gold: #e0a400; --goldtext: #946c00; --redteam: #e5534b; --blueteam: #3d82e0;
  --input: #ffffff; --field: #7c808c; --bar: #eef0f3; --chatbg: #ffffff; --feed: #f2f3f6;
  --sel-blue: #eef1ff; --tint-blue: #e7f1fd; --me: #eef1ff; --tint-green: #e6f4e4; --tint-gold: #fdf3d6;
  --right-bg: #e3f4e1; --wrong-bg: #fde5e3; --watch: #eef1ff; --banner: #ffffff; --banner-line: #e6e8ec;
  --red-bg: #fde8e7; --red-line: #f0b8b4; --blue-bg: #e5eefc; --blue-line: #b7cdf3; --redtext: #c92a2a; --bluetext: #1c5fb8;
  --imp: #c92a2a; --inside: #2b8a3e; --felt: #2e7d4f; --felt-line: #25663f; --shade: rgb(10 11 14 / .55);
  --shadow: 0 1px 2px rgb(21 22 26 / .06), 0 12px 32px rgb(21 22 26 / .06); --lift: 0 18px 30px rgb(21 22 26 / .16); --pop: 0 24px 60px rgb(0 0 0 / .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 1rem/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body { overscroll-behavior-y: none; }
/* Chrome takes pull-to-refresh from the root: in a room a pull down never reloads the page mid-game. */
html:has(body[data-view="room"]) { overscroll-behavior-y: none; }
#app { display: flex; flex-direction: column; }
body[data-view="room"] #app { min-height: 100dvh; }
html:has(body[data-view="room"]), body[data-view="room"] { overflow-x: clip; }
body[data-view="room"] #about, body[data-view="room"] .foot, body[data-view="tv"] #about, body[data-view="tv"] .foot { display: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Buttons are pills: ink (white in dark mode) for the main one, grey for the rest. A grey button on a card is --btn2;
   one on the page itself is --raise (the same grey in dark mode, white on the grey page in light mode). */
button { cursor: pointer; border: 0; border-radius: 999px; padding: 0 18px; min-height: 44px; background: var(--btn2); color: var(--text); font-weight: 700; touch-action: manipulation; }
button:hover:not(:disabled) { filter: brightness(1.06); }
:root[data-theme="light"] button:hover:not(:disabled) { filter: brightness(.96); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A button with an icon: the icon on the line of its words, both in the middle (an icon on a line of its own was
   the "Plan and start" fault). Zero specificity, so a button that lays itself out (a card, a key) still does. */
button:where(:has(> .ico, > svg)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button.primary { background: var(--btn); color: var(--on-btn); }
:root[data-theme="light"] button.primary:hover:not(:disabled) { filter: brightness(1.35); }
button.danger { background: var(--red); color: #fff; }
button.big { min-height: 56px; padding: 0 24px; font-size: 1.0625rem; }
button.link { background: none; padding: 0 8px; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-weight: 700; }
button.icon { background: none; padding: 0; width: 44px; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; font-size: 1.125rem; line-height: 1; border-radius: 22px; flex: none; }
button.icon:hover { background: var(--soft); }
button.icon.small { font-size: 0.9375rem; }
button.icon svg { width: 20px; height: 20px; display: block; }
.modal button.icon { background: var(--btn2); }
button:disabled, button[aria-disabled="true"] { opacity: .45; cursor: default; }
button[aria-disabled="true"]:hover { filter: none; }
/* A button that is not ready yet sinks into the page (quiet fill, dim words) instead of turning a muddy grey or near
   black: the main button, and the tinted and page-level ones, all look the same when they wait. */
button.primary:disabled, button.primary.empty[aria-disabled="true"], button.tint:disabled, button.ghost-btn:disabled { opacity: 1; background: var(--soft); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); }
/* Field outlines use --field, which stands out 3:1 from every surface (WCAG 1.4.11). */
input, select, textarea { background: var(--input); border: 2px solid var(--field); border-radius: 24px; padding: 0 16px; min-height: 48px; width: 100%; min-width: 0; font-size: 1rem; }
textarea { padding: 12px 16px; border-radius: 18px; }
select { appearance: none; padding-right: 40px; font-weight: 600; cursor: pointer;
  background: var(--input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8e9a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
select:disabled, input:disabled, textarea:disabled { opacity: .6; cursor: default; }
/* A guest's view of the game settings: a tap anywhere on them reaches the box, which says only the host can change them. */
.opts.locked :disabled { pointer-events: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
/* From the keyboard, a ring as well as the border colour, so the box in use is plain to see. */
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: .85; }
/* A one-line box (LineBox in ui.js): a text area so a phone's Enter always reaches the page, kept to one line and
   the size of an input. --h is its height, --bw its border; the text sits in the middle. */
textarea.line { --h: 48px; --bw: 2px; height: var(--h); min-height: var(--h); line-height: 1.25; padding: calc((var(--h) - 2 * var(--bw) - 1.25em) / 2) 16px;
  border-radius: calc(var(--h) / 2); resize: none; overflow: hidden; white-space: pre; overflow-wrap: normal; scrollbar-width: none; }
textarea.line::-webkit-scrollbar { display: none; }
label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--dim); margin: 0 0 6px; }
h1 { font-family: var(--display); font-weight: 800; font-size: 1.75rem; margin: 0 0 6px; line-height: 1.12; letter-spacing: -.03em; }
h2 { font-family: var(--display); font-weight: 800; font-size: 1.1875rem; margin: 0 0 10px; line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: 1rem; margin: 0 0 6px; }
p { margin: 6px 0; }
a { color: var(--accent); }
.dim { color: var(--dim); }
.small { font-size: 0.8125rem; }
.center { text-align: center; }
.nomargin { margin: 0; }
.up { text-transform: uppercase; }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.plus { color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 460px; }
.card { background: var(--panel); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .grow, .grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.center-row { justify-content: center; }
.wrapgap { gap: 10px; }
.wide { width: 100%; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A column of pieces one even step apart. Their own margins go, so a heading or a paragraph never adds its own
   space on top of the step (which made some gaps 0 and others 18). */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack > * { margin-top: 0; margin-bottom: 0; }
.pill { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--btn2); white-space: nowrap; }
.pill.warn { background: #b45309; color: #fff; } .pill.hot { background: #c2410c; color: #fff; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 3px 0; }
/* A first-time tag (guide.js): one at a time, pointing at what it is about. Taps go through it to the page. */
.gtag { position: fixed; z-index: 16; display: flex; align-items: flex-start; gap: 6px; max-width: min(300px, calc(100vw - 24px)); padding: 10px 6px 10px 14px; border-radius: 16px;
  background: var(--btn); color: var(--on-btn); font-size: 0.875rem; font-weight: 650; line-height: 1.4; box-shadow: var(--pop); pointer-events: none; animation: gtag-in .22s ease-out both; }
.gtag::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 7px); top: -6px; width: 14px; height: 14px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.gtag.up::before { top: auto; bottom: -6px; }
.gtag > span { position: relative; padding-top: 2px; }
.gtag-x { position: relative; pointer-events: auto; flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; opacity: .7; display: grid; place-items: center; }
.gtag-x:hover { opacity: 1; }
.gtag.out { opacity: 0; transition: opacity .18s; }
@keyframes gtag-in { from { opacity: 0; transform: translateY(4px); } }
.gtag.up { animation-name: gtag-in-up; }
@keyframes gtag-in-up { from { opacity: 0; transform: translateY(-4px); } }
/* A hover label (guide.js), for a mouse only. */
.htip { position: fixed; z-index: 70; max-width: 260px; padding: 6px 10px; border-radius: 10px; background: var(--btn); color: var(--on-btn); font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
  box-shadow: var(--pop); pointer-events: none; opacity: 0; transition: opacity .12s; }
.htip.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gtag, .gtag.up { animation: none; } }
/* Box ads (ads.js): a label and a fixed-size box, never wider than the screen. Empty until filled; gone if not. */
.ad { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px auto; max-width: 100%; }
.ad-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); line-height: 1; }
.ad-box { max-width: 100%; overflow: hidden; border-radius: 12px; background: var(--panel2); }
.ad.is-empty { display: none; }
.ad-preview { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dim); font-size: 0.8125rem;
  background: repeating-linear-gradient(-45deg, var(--panel2) 0 14px, var(--soft) 14px 28px); border: 1px dashed var(--line); border-radius: 12px; box-sizing: border-box; }
.ad-preview b { font-size: 1rem; color: var(--text); letter-spacing: .1em; text-transform: uppercase; }
/* The side box: beside the column, at its top, only where the screen leaves room for it (ads.js RAIL_MQ). */
.doc:has(> .ad-rail), .results:has(> .ad-rail) { position: relative; }
.ad-rail { position: absolute; top: 0; left: calc(100% + 48px); margin: 0; }
@media not all and (min-width: 1500px) and (min-height: 760px) { .ad-rail { display: none; } }
/* Columns too wide to leave room beside them never get one. */
.home-doc > .ad-rail, .wide-doc > .ad-rail { display: none; }
/* Where the room's boxes sit. The lobby has two, one shown per screen: under the room code in the side column, and on
   a phone (one column) under the game's Start button, above the list of games. */
.lobby-ad-main { display: none; }
@media (max-width: 759px) { .lobby .lobby-ad-side { display: none; } .lobby .lobby-ad-main { display: flex; margin: 16px auto 4px; } }
.lobby-side .lobby-ad { margin: 16px auto 4px; }
.pause-ad { margin-top: 18px; }
.pause-cover { overflow-y: auto; }
.tv-row { flex: 1; display: flex; min-height: 0; }
.tv-row > .tv-main { flex: 1; min-width: 0; }
.tv-ad { align-self: center; margin: 0 28px 0 8px; flex: none; }
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: var(--btn); color: var(--on-btn); font-weight: 700; padding: 12px 18px; border-radius: 99px; z-index: 50; max-width: 90vw; box-shadow: var(--pop); }
.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #15161a; font-weight: 800; flex: none; }
.av-face { overflow: hidden; }
.av-face svg { width: 100%; height: 100%; display: block; }
.av-face.off svg { opacity: .45; filter: grayscale(1); }
/* Picking a face. */
.face-btn { flex: none; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: var(--k-party); box-shadow: 0 3px 0 var(--key); position: relative; }
.face-btn svg { width: 100%; height: 100%; display: block; }
.face-btn .face-edit { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--btn); color: var(--on-btn); display: grid; place-items: center; }
.face-btn .face-edit .mk { width: 13px; height: 13px; }
.face-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.face-grid button { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 50%; background: var(--soft); border: 3px solid transparent; }
.face-grid button svg { width: 100%; height: 100%; display: block; }
.face-grid button[aria-pressed="true"] { border-color: var(--text); background: var(--k-party); }
.name-line { display: flex; align-items: flex-end; gap: 12px; }
.name-line .name-row { flex: 1; min-width: 0; }
.av-me { padding: 0; border-radius: 50%; background: none; box-shadow: none; position: relative; }
.av-me::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--btn); border: 2px solid var(--panel); }
.nm { font-weight: 700; color: var(--c); }
:root[data-theme="light"] .nm { color: var(--cd); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chipbtn { background: var(--raise); padding: 0 16px; min-height: 44px; border-radius: 99px; font-weight: 600; font-size: 0.875rem; white-space: nowrap; box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 8px; }
.chipbtn.sel { background: var(--btn); color: var(--on-btn); }
.chipbtn .kdot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); flex: none; }
.chipbtn.sel .kdot { background: var(--on-btn); }
/* A row of chips that scrolls sideways on a phone instead of wrapping into a wall. */
.chips.scroller { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.chips.scroller::-webkit-scrollbar { display: none; }
.chips.scroller > * { flex: none; }
.code { font-family: var(--display); font-weight: 700; letter-spacing: .06em; }
/* Segmented control: a pill track with the chosen option lifted out of it. */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 26px; background: var(--panel2); }
.seg > button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; background: transparent; font-weight: 500; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg > button.on { background: var(--seg-on); box-shadow: var(--seg-shadow); font-weight: 700; }
.seg > button:disabled { opacity: 1; } .seg > button:disabled:not(.on) { opacity: .55; }
.seg > button:hover:not(:disabled) { filter: none; background: color-mix(in srgb, var(--seg-on) 55%, transparent); }
.seg > button.on:hover:not(:disabled) { background: var(--seg-on); }
/* A collapsible row inside a card, with a chevron that turns. */
.fold { border-bottom: 1px solid var(--rule); padding: 0; }
.fold:last-child { border-bottom: 0; }
.fold > summary { list-style: none; min-height: 52px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.9375rem; font-weight: 600; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ''; width: 18px; height: 18px; flex: none; transition: transform .2s; background: var(--dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > :not(summary) { margin-top: 0; }
.fold[open] > summary + * { margin-top: 0; }
.fold[open] { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .fold > summary::after { transition: none; } }

/* Home */
.home { max-width: 1200px; padding-top: 0; }
.hero { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 8px 48px; padding: clamp(20px, 5vw, 64px) 0 28px; }
.hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { margin: 0; font-size: clamp(1.75rem, 4.6vw, 3.625rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.lead { font-size: 1.0625rem; line-height: 1.5; color: var(--lead); text-wrap: pretty; }
.hero .lead { margin: 0; max-width: 520px; }
:root { --brand-red: #ff5a3c; --edge: #000000; --kicker: #ffc83d; }
:root[data-theme="light"] { --brand-red: #c9361b; --edge: #15161a; --kicker: #b4321f; }
.hero .kicker { margin: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--kicker); }
.hero h1 .chaos { color: var(--brand-red); }
/* The home page's start box looks like a sticker: a thick edge and a hard shadow. */
.hero-card.start { border: 3px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); }
.hero-card.start .start-night { background: #ffc83d; color: #121318; box-shadow: inset 0 0 0 3px #121318; }
.hero-card.start .start-night:hover:not(:disabled) { background: #ffd666; }

/* The home page's backdrop (app.js HomeScene): four tails from the edges and a few stickers, behind everything. Each
   layer drifts with the mouse at its own speed; on phones only the tails show, fainter. */
.hs { position: absolute; z-index: -1; top: 76px; left: 0; width: 100%; height: clamp(640px, 100vh - 76px, 800px); overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 74%, transparent 96%); mask: linear-gradient(#000 0 74%, transparent 96%); }
.hs-mid { position: absolute; left: -60px; top: -60px; width: calc(100% + 120px); height: calc(100% + 120px); fill: none; stroke-linecap: round; stroke-linejoin: round;
  transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -15px), 0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.hs-edge { stroke: var(--edge); }
.hs-front { position: absolute; inset: 0; transform: translate3d(calc(var(--px, 0) * -44px), calc(var(--py, 0) * -30px), 0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.hs-st { position: absolute; height: auto; stroke: #000000; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; animation: hs-bob 5s ease-in-out infinite; }
.st-chilli { width: 92px; left: 52%; top: 12%; }
.st-ask { width: 96px; right: 10%; top: 7%; animation-delay: -3s; }
.st-card { width: 88px; right: 3%; top: 70%; animation-delay: -1.6s; }
.st-clock { width: 90px; left: 70%; top: 82%; animation-delay: -2.2s; }
.st-soda { width: 70px; right: .5%; top: 40%; animation-delay: -.8s; }
.st-die { width: 66px; left: 2%; top: 88%; animation-delay: -4s; }
@keyframes hs-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .hs-st { animation: none; } .hs-mid, .hs-front { transition: none; } }
@media (max-width: 760px) { .hs-front { display: none; } .hs-mid { opacity: .5; } .hs { top: 64px; height: 700px; } }
.hero-card { margin-top: 6px; max-width: 460px; padding: 16px; border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
/* The start box: what to do first, then the way in for someone who already has a code. */
.hero-card.start { padding: 20px; gap: 12px; margin-top: 10px; }
.start-head h2 { margin: 0 0 4px; font-size: 1.25rem; }
.start-head p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--lead); }
.or { display: flex; align-items: center; gap: 12px; margin: 4px 2px 0; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.or span { flex: none; }
.start-facts { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.start-facts li { display: inline-flex; align-items: center; gap: 6px; }
.start-facts li::before { content: ''; width: 14px; height: 14px; flex: none; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-lead { margin: 6px 0 0; font-size: 0.9375rem; color: var(--lead); }
.name-row { margin: 0; height: 56px; border-radius: 18px; background: var(--panel2); display: flex; align-items: center; padding: 0 16px; cursor: text; }
/* "Your name" steps aside once there is a name in the box and comes back when it is emptied. It stays the box's
   label for screen readers either way. */
.name-row > span { font-size: 0.8125rem; font-weight: 600; color: var(--dim); white-space: nowrap; overflow: hidden; max-width: 10em; margin-right: 12px;
  transition: max-width .3s cubic-bezier(.4, 0, .2, 1), margin-right .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
.name-row:has(.line:not(:placeholder-shown)) > span { max-width: 0; margin-right: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .name-row > span { transition: none; } }
.name-row .line { --h: 52px; --bw: 0px; flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; padding-inline: 0; font-size: 1.0625rem; font-weight: 600; color: var(--text); }

.name-row { box-shadow: inset 0 0 0 1.5px var(--field); }
.name-row:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.name-row .line:focus-visible { box-shadow: none; } /* the row shows the focus */
.join-row { display: flex; gap: 8px; }
.field-err { margin: -4px 0 0; padding: 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--bad); text-align: left; }
.gate-title { margin: 14px 0 0; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.gate-title .code { white-space: nowrap; }
.gate-art.missing span { font: 800 3rem/1 var(--display); }
.join-row .line { --h: 52px; flex: 1; padding-inline: 18px; font-weight: 600; }
.code-in { text-transform: uppercase; letter-spacing: .12em; }
.code-in::placeholder { text-transform: none; letter-spacing: 0; }
button.tint { min-height: 52px; padding: 0 22px; background: #e6e9ff; color: #2443e0; }
:root:not([data-theme="light"]) button.tint { background: rgb(112 134 255 / .18); color: #b3c0ff; }
:root:not([data-theme="light"]) button.tint:disabled { background: var(--soft); color: var(--dim); }
.hero-art { flex: 1 1 340px; min-width: 0; position: relative; height: 260px; }
/* Three game cards fanned out beside the welcome like a hand of cards, each on top of the one to its left, turning
   through every game: a new one rises from behind on the left, the others move one place right and the right one
   slides off. Only transform and opacity move, and the stacking never changes mid-move, so it stays smooth. */
.home { overflow-x: clip; }
.kcard { position: absolute; width: 148px; height: 200px; box-sizing: border-box; border-radius: 24px; padding: 14px; background: var(--k); color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--lift); }
.kcard > small { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.kcard > b { font-family: var(--display); font-size: 0.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.kcard .gicon { width: 102px; height: 102px; margin: -10px auto; }
.kcard .gicon svg { filter: none; }
.hero-art .kcard { left: calc(50% - 74px); top: 12px; will-change: transform, opacity; transition: transform .7s cubic-bezier(.3, 1.35, .5, 1), opacity .4s ease; }
.hero-art .kcard.s-left { transform: translate(-120px, 30px) rotate(-11deg) scale(.946); }
.hero-art .kcard.s-right { transform: translate(120px, 30px) rotate(11deg) scale(.946); }
.hero-art .kcard.s-in { opacity: 0; transform: translate(-144px, 52px) rotate(-17deg) scale(.86); }
.hero-art .kcard.s-out { opacity: 0; transform: translate(156px, 40px) rotate(19deg) scale(.9); }
@media (prefers-reduced-motion: reduce) { .hero-art .kcard { transition: none; } }
/* The cards are a way in: a sideways swipe flips them (the page still scrolls up and down), a click or tap opens one.
   The card under the mouse lifts with `translate`, which adds to its slot's transform instead of replacing it. */
.hero-art { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.hero-art .kcard:is(.s-left, .s-mid, .s-right) { cursor: pointer; }
.hero-art .kcard:is(.s-in, .s-out) { pointer-events: none; }
.hero-hint { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--dim);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-art .kcard { transition: transform .7s cubic-bezier(.3, 1.35, .5, 1), opacity .4s ease, translate .25s ease, box-shadow .25s ease; }
  .hero-art .kcard:is(.s-left, .s-mid, .s-right):hover { translate: 0 -10px; box-shadow: 0 22px 44px rgb(0 0 0 / .22); }
  .hero-hint { display: block; }
  .hero-art:hover .hero-hint { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .hero-art .kcard { transition: none; } }


@media (max-width: 420px) { .hero-art { height: 228px; transform: scale(.88); transform-origin: 50% 40%; margin: -6px 0 6px; } }
/* Short phones (360×640): smaller cards, so Create a room is on the first screen. */
/* A short phone (360 × 640): the cards are smaller and the start card's long line goes, so the code box for a friend's
   room is on the first screen. */
@media (max-width: 420px) and (max-height: 700px) {
  .hero-art { height: 124px; transform: scale(.52); transform-origin: 50% 12%; margin: -6px 0 6px; }
  .home .start-head p { display: none; }
}
/* A phone on its side: words and the start box on the left, smaller cards beside them, all on the first screen.
   "On its side" means at least 3:2 wide, not just wider than tall: an upright Android phone with its keyboard open
   (360 × 340 left) is wider than tall too, and must keep its upright layout while someone types. */
@media (min-aspect-ratio: 3/2) and (max-height: 520px) {
  .hero { flex-wrap: nowrap; align-items: flex-start; gap: 16px; padding-top: 14px; }
  .hero-text { flex: 1 1 0; gap: 10px; }
  .hero h1 { font-size: 1.625rem; }
  .hero-card.start { padding: 14px 16px; gap: 10px; margin-top: 4px; }
  .start-head p { display: none; }
  .hero-art { flex: 0 0 280px; height: 220px; transform: scale(.7); transform-origin: 50% 24%; margin: 0; }
}
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.sec-head a { font-size: 0.9375rem; font-weight: 600; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.games-sec { padding-top: 12px; }
.games-sec .chips { padding-top: 12px; }
.lib { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.lib > li { display: flex; }
.gcard { flex: 1; min-width: 0; text-align: left; padding: 14px; border-radius: 22px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; font-weight: 400; }
.gcard:hover:not(:disabled) { filter: none; transform: translateY(-2px); box-shadow: var(--lift); }
.gcard { transition: transform .15s, box-shadow .15s; }
.gc-top { display: flex; gap: 10px; align-items: flex-start; }
.gc-top > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gc-name { font-family: var(--display); font-size: 0.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.gc-meta { font-size: 0.75rem; font-weight: 600; color: var(--dim); }
/* Two to a row on a phone, a card is about 145 px inside: one long word (Connections, Mastermind) would run past its
   edge at 14 px. A narrow card gets a smaller icon and a name sized to the card. */
.gcard { container-type: inline-size; }
@container (max-width: 160px) {
  .gc-top { gap: 8px; }
  .gc-top .gicon { width: 34px; height: 34px; }
  .gc-name { font-size: clamp(12px, 8.6cqi, 14px); }
}
.gc-blurb { font-size: 0.8125rem; line-height: 1.4; color: var(--lead); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gcard { transition: none; } .gcard:hover:not(:disabled) { transform: none; } }
/* Game icons: a tile in the colour of the game's kind. */
.gicon { display: inline-flex; flex: none; width: 44px; height: 44px; vertical-align: middle; }
.gicon svg { width: 100%; height: 100%; display: block; }
.gicon.big { width: 64px; height: 64px; }
.gicon.mid { width: 36px; height: 36px; }
.gicon.small { width: 1.4em; height: 1.4em; vertical-align: -.35em; }
.with-icon { display: flex; align-items: center; gap: 10px; }

/* Room frame: the top bar holds Back, the game (tap for its rules), the room code (tap to invite), chat and a menu. */
.room { display: flex; flex-direction: column; min-height: 100dvh; }
.bar { display: flex; align-items: center; gap: 6px; padding: 8px; min-height: var(--bar-h); border-bottom: 1px solid var(--rule); background: var(--bar); position: sticky; top: 0; z-index: 10; }
.ico { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.fillico { fill: currentColor; stroke: none; }
.bar .bar-btn { background: var(--raise); box-shadow: var(--shadow); }
.bar .bar-btn:hover { background: var(--raise); }
.bar-game { flex: 0 1 auto; margin-right: auto; min-width: 0; height: 44px; background: transparent; padding: 0 10px 0 6px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; font-size: 0.9375rem; font-weight: 700; border-radius: 22px; }
.bar-game:hover:not(:disabled) { filter: none; background: var(--soft); }
.bar-game .ico { width: 16px; height: 16px; color: var(--dim); }
/* Long names (Dictionary Bluff, Stop the Clock) take two short lines on a phone instead of losing their end. */
.bar-game > span.ell { white-space: normal; line-height: 1.12; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 420px) { .bar-game { font-size: 0.875rem; padding-right: 6px; gap: 7px; } }
.bar-game.hint { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel); }
.bar-here { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 0.875rem; font-weight: 600; color: var(--dim); }
.bar-code { flex: none; height: 44px; padding: 0 10px 0 12px; gap: 6px; background: var(--raise); box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; }
.bar-code .code { font-size: 0.875rem; }
.bar-code .ico { width: 16px; height: 16px; }
.gicon.tiny { width: 28px; height: 28px; }
.chat-btn { position: relative; }
.chat-btn i { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff5a3c; color: #15161a; font-size: 0.6875rem; font-weight: 800; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bar); }
@media (max-width: 420px) { .bar { gap: 4px; padding: 8px 6px; } .bar-code .code { letter-spacing: .03em; } }
@media (max-width: 370px) { .bar-code { padding: 0 10px; } .bar-code .ico { display: none; } }
/* A small phone in a game (with the host's pause button too): the game's name keeps the room, on one line. */
@media (max-width: 400px) {
  .bar-game .gicon { display: none; }
  .bar-game { padding-left: 10px; }
  .bar-game > span.ell { font-size: 0.8125rem; }
  .bar-code { padding: 0 10px; } .bar-code .ico { display: none; }
}
/* The menu behind the dots. */
.menu-shade { position: fixed; inset: var(--bar-h) 0 0 0; background: rgb(10 11 14 / .28); z-index: 32; }
.room-menu { position: fixed; top: calc(var(--bar-h) + 5px); right: 8px; width: min(300px, calc(100% - 16px)); z-index: 33; border-radius: 24px; background: var(--panel); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 20px 50px rgb(0 0 0 / .3), 0 0 0 1px var(--rule); animation: menu-in .14s ease-out; transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.room-menu hr { border: 0; height: 1px; margin: 2px 10px; background: var(--rule); }
.menu-look { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.menu-look > span { font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.menu-look .seg > button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.menu-look .ico { width: 16px; height: 16px; }
.menu-item { min-height: 48px; border-radius: 16px; background: transparent; padding: 0 10px; font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; }
.menu-item:hover:not(:disabled) { filter: none; background: var(--panel2); }
.menu-item > span { display: flex; flex-direction: column; gap: 1px; }
.menu-item small { font-size: 0.75rem; font-weight: 500; color: var(--dim); }
a.menu-item { color: var(--text); text-decoration: none; }

/* The contact page. */
.contact-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; margin-top: 8px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cf-field > span { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.cf-field small { font-weight: 500; color: var(--dim); }
.cf-field select, .cf-field input, .cf-field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--panel2); border: 0; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1.5px var(--field); }
.cf-field select, .cf-field input { min-height: 50px; }
.cf-attach { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.4; cursor: pointer; }
.cf-attach input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.cf-field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.cf-field :focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.cf-err { margin: 0; font-weight: 600; color: var(--bad); }
.contact-form .primary { align-self: flex-start; min-width: 160px; }
.cf-done { padding: 20px; margin-top: 8px; } .cf-done h2 { margin-top: 0; }
.danger-text { color: var(--bad); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .room-menu { animation: none; } }
.room-body { flex: 1; display: flex; min-height: 0; }
.room-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* Paused: the game stays where it was under a veil, and the card stays in view however far down the game goes. */
/* Above the games' own overlays (up to 30); the room menu and dialogs stay above it. */
.pause-cover { position: absolute; inset: 0; z-index: 30; display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: pause-in .2s ease-out both; }
.pause-card { position: sticky; top: calc(var(--bar-h) + 32px); width: min(380px, 100%); align-items: center; text-align: center; gap: 12px; padding: 24px 20px 20px; border-radius: 28px; box-shadow: var(--pop), 0 0 0 1px var(--rule); }
.pause-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); }
.pause-ico .ico { width: 24px; height: 24px; }
.pause-left { font-size: 0.9375rem; }
.pause-left b { font-family: var(--display); font-size: 1.375rem; font-variant-numeric: tabular-nums; margin-left: 4px; }
.pause-for { width: 100%; text-align: left; }
.pause-card > .primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pause-card > .primary .ico { width: 16px; height: 16px; }
@keyframes pause-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pause-cover { animation: none; } }
/* Chat: a panel from the right. */
.chat { width: 340px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; background: var(--chatbg); position: sticky; top: var(--bar-h); height: calc(100dvh - var(--bar-h)); }
.chat-head { min-height: 56px; padding: 6px 6px 6px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.chat .icon { background: var(--panel2); }
.chat-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-list > :first-child { margin-top: auto; }
.msg { display: flex; gap: 10px; align-items: flex-start; word-wrap: break-word; }
.msg > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 0.9375rem; line-height: 1.4; }
.msg .nm { font-size: 0.8125rem; }
.chat .answer { padding: 10px; border-top: 1px solid var(--rule); }
/* Sheets and cards over the room. */
.modal { position: fixed; inset: 0; background: var(--shade); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.modal-card { max-width: 520px; width: 100%; max-height: 85dvh; overflow: auto; border-radius: 28px; padding: 20px; box-shadow: var(--pop); }
/* A row that keeps its pieces on one line (the words inside still wrap); a cell or label that never breaks. */
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap > * { min-width: 0; }
.rules-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rules-head h2 { font-size: 1.375rem; }
.rules-gist { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
.rules-more summary { font-weight: 700; cursor: pointer; }
.rules-more .rules { margin-top: 10px; }
.gicon.rule { width: 56px; height: 56px; }
ol.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ol.rules li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; color: var(--lead); margin: 0; }
ol.rules li > span { flex: none; width: 24px; height: 24px; border-radius: 12px; background: var(--panel2); color: var(--text); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; margin-top: 1px; }

/* Our dialogs (public/js/dialog.js), in place of the browser's confirm() */
.modal.dialog { z-index: 60; animation: dlg-shade .16s ease-out; }
.dialog-card { max-width: 400px; padding: 24px 20px 18px; animation: dlg-in .18s ease-out; }
.dialog-card h2 { font-size: 1.25rem; line-height: 1.25; }
.dlg-body { color: var(--dim); line-height: 1.5; font-size: 0.9375rem; }
.dialog-btns { display: flex; gap: 8px; margin-top: 6px !important; }
.dialog-btns button { min-height: 52px; flex: 1; min-width: 0; font-size: 1rem; }
@keyframes dlg-in { from { transform: translateY(10px) scale(.97); opacity: 0; } }
@keyframes dlg-shade { from { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .modal.dialog, .dialog-card { animation: none; } }

/* The rules before each game */
.modal.intro { transition: background-color .35s ease; cursor: pointer; }
.modal.intro.leaving { background-color: transparent; pointer-events: none; }
.intro-card { cursor: default; transform-origin: center; animation: intro-in .28s ease-out; }
@keyframes intro-in { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.intro-time { height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.intro-time i { display: block; height: 100%; border-radius: 3px; background: var(--sel); transition: width .25s linear; }
/* A reveal missed while reconnecting, shown again: the game's own screen, read-only, under a short heading. */
.missed-card { max-width: 760px; gap: 14px; }
.missed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.missed-head > div { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.missed-view { pointer-events: none; border-radius: 20px; background: var(--bg); padding: 12px; }
.missed-view .play2 { min-height: 0; }
.missed-view .clock { display: none; }
.intro-time i.drain { width: 100%; transition: none; animation: drain linear forwards; }
@keyframes drain { to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .intro-time i.drain { animation: none; } }
.intro-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.intro-foot > span { flex: 1 1 220px; line-height: 1.45; }
.intro-foot .big { min-height: 52px; padding: 0 28px; }
/* On a phone the line wraps above the button, and the button takes the whole width under it. */
@media (max-width: 520px) { .intro-foot .big { flex: 1 1 100%; } }
.intro-wait { padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.intro-top { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intro-top h2 { font-size: 1.5rem; } .intro-top h1 { font-size: 1.625rem; margin-top: 12px !important; }
.intro-wait .gicon.huge { margin: 0; }
.kcard.solo { position: relative; width: 120px; height: 162px; padding: 12px; border-radius: 20px; }
.kcard.solo .gicon { width: 84px; height: 84px; margin: -8px auto; }
b.ink { color: var(--text); }
.ready-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ready-list li { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 8px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); color: var(--dim); font-weight: 700; }
.ready-list li .small { font-weight: 700; }
.ready-list li.ok { color: var(--text); }
.ready-list li.ok .small { color: var(--ok); }
.watch { background: var(--watch); text-align: center; padding: 8px; font-size: 0.875rem; font-weight: 600; }

/* Joining by link, and a room that is gone */
.gate { flex: 1; width: 100%; max-width: 460px; margin: 0 auto; padding: 40px 16px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; min-height: calc(100dvh - 72px); }
.gate .lead { margin: 10px 0 0; max-width: 320px; text-wrap: balance; }
.gate > button { margin-top: 22px; min-width: 220px; }
.gate-art { position: relative; width: 220px; height: 128px; flex: none; }
.gate-art i { position: absolute; top: 22px; width: 72px; height: 98px; border-radius: 14px; }
.gate-art i:first-child { left: 32px; background: #ffc83d; transform: rotate(-14deg); }
.gate-art i:nth-child(2) { left: 116px; background: #ff5a3c; transform: rotate(14deg); }
.gate-art span { position: absolute; left: 70px; top: 6px; width: 80px; height: 108px; border-radius: 16px; background: #3355ff; color: #fff; box-shadow: var(--lift); display: grid; place-items: center; }
.gate-art .ico { width: 34px; height: 34px; }
.gate-title { margin: 26px 0 0; font-size: 2rem; font-weight: 800; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.gate .hero-card { width: 100%; margin-top: 24px; max-width: none; }
.gate-foot { margin: auto 0 0; padding-top: 32px; font-size: 0.8125rem; line-height: 1.5; color: var(--dim); }
.gate-foot a { font-weight: 600; }
.gate-who { margin: 8px 0 0; font-weight: 600; color: var(--dim); }
.gate-who .code { color: var(--text); letter-spacing: .06em; }
.gate-warn { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--soft); font-size: 0.875rem; font-weight: 600; text-wrap: balance; }
.gate-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; min-width: 240px; }
.gate-art.wait span { gap: 6px; }
.field-note { margin: -4px 0 0; padding: 0 6px; font-size: 0.8125rem; color: var(--dim); text-align: left; }

/* Feedback after a game */
.fb { padding: 10px 10px 10px 18px; }
.stars { display: inline-flex; }
.stars button { background: none; padding: 0; width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--dim); }
.stars button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.stars button.on { color: #e0a400; } .stars button.on svg { fill: #ffc83d; stroke: #e0a400; }
@media (prefers-reduced-motion: reduce) { .intro-card { animation: none; } }
.chipbtn.sunk { background: var(--btn2); box-shadow: none; }
.chipbtn.sunk.sel { background: var(--btn); }

/* Lobby: the room's code and players on one side, the games on the other (stacked on a phone). */
.lobby { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); padding: var(--pad) var(--pad) 32px; max-width: 1200px; width: 100%; margin: 0 auto; }
.lobby-side { flex: 1 1 300px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lobby-main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) { .lobby-side { position: sticky; top: calc(var(--bar-h) + 14px); max-width: 360px; } }
/* A sticky column is a layer of its own: a sheet opened from it (Our words) would sit under the game cards beside it,
   so while one is open the column comes up over them. */
.lobby-side:has(.modal) { z-index: 41; }
/* A phone shows one column: the invite, who is here, then the game; the room's switches come after it. */
@media (max-width: 759px) {
  .lobby { padding-bottom: 104px; }
  .lobby-side { display: contents; }
  .lobby > *, .lobby-side > * { flex: 1 1 100%; min-width: 0; }
  .lobby .code-card { order: 1; } .lobby .players-card { order: 2; } .lobby-main { order: 3; } .lobby .switch-row, .lobby .watch-note { order: 4; } .lobby .folds { order: 5; }
  /* Tighter on a phone, so the games come up sooner: the code, the invite buttons and who is here. */
  .code-card { padding: 14px 16px; }
  .code-card .big-code { font-size: 1.875rem; }
  .code-card .invite-btns { margin-top: 8px; }
  .code-card .invite-btns button { min-height: 44px; }
  .plist li { min-height: 48px; }
  button.lobby-chat { min-height: 46px; margin-top: 8px; }
}
/* In the lobby after Back from the results, while the room is still on them. */
.res-link { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 24px; }
.rl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.res-link .primary { flex: none; }
.lobby > .res-link { flex: 1 1 100%; order: 0; }
.start-bar { display: none; }
@media (max-width: 759px) {
  .start-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; align-items: center; gap: 10px; padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: var(--bar); border-top: 1px solid var(--rule); box-shadow: 0 -10px 28px rgb(0 0 0 / .2); transition: transform .22s ease, opacity .22s ease; }
  .start-bar.off { transform: translateY(105%); opacity: 0; pointer-events: none; }
  .sb-game { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; box-shadow: none; padding: 0; min-height: 52px; text-align: left; color: var(--text); }
  .sb-game > .ell { display: flex; flex-direction: column; min-width: 0; font-size: 0.9375rem; }
  .sb-art { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--btn2); }
  .sb-game > .ell > * { overflow: hidden; text-overflow: ellipsis; }
  .start-bar .start-btn { flex: none; min-height: 52px; padding: 0 24px; font-size: 1rem; }
  .sb-wait { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--lead); max-width: 48%; }
  /* Out of the keyboard's way while typing (a picked night card focuses its radio, which is not typing). */
  body:has(input:not([type=radio]):not([type=checkbox]):focus, textarea:focus) .start-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .start-bar { transition: none; } }
.guest-games { padding: 0 16px; }
.guest-games > summary > span { display: flex; flex-direction: column; gap: 2px; }
.guest-games > summary .small { font-weight: 400; }
.code-card { padding: 16px 18px; border-radius: 24px; display: flex; flex-direction: column; gap: 2px; }
.code-card .big-code { font-size: 2.125rem; line-height: 1.15; }
.code-card .invite-btns { margin-top: 10px; }
.big-code { font-size: 2.5rem; font-weight: 800; letter-spacing: .05em; line-height: 1; }
.players-card { border-radius: 24px; padding: 12px 8px 8px 16px; }
.plain-h { margin: 0; font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.plain-h .dim, .strong { font-weight: 600; }
.players-card > div > .row { padding-right: 8px; }
.plist { list-style: none; padding: 0; margin: 6px 0 0; }
.plist li { min-height: 52px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--rule); position: relative; padding-right: 8px; }
.plist li:first-child { border-top: 0; }
/* Someone away is faded, all but the word "away", which has to stay readable. */
.plist li.off > :not(.pdots):not(.pmenu):not(.pname), .plist li.off .pname > :not(.away-tag) { opacity: .6; }
.av.off { background: transparent; border: 2px dashed var(--dim); color: var(--text); }
.pname { display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; }
.pname > .ell { min-width: 0; }
.host { display: inline-flex; flex: none; }
.crown-ico { width: 16px; height: 16px; fill: #ffc83d; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; display: block; }
:root:not([data-theme="light"]) .crown-ico { stroke: #ffc83d; }
.wins { display: flex; align-items: center; gap: 3px; font-size: 0.8125rem; font-weight: 700; color: var(--dim); }
.wins .ico { width: 14px; height: 14px; stroke-width: 2; }
.ppts { min-width: 30px; text-align: right; font-family: var(--display); font-size: 0.9375rem; font-weight: 700; }
.plist .pdots { color: var(--dim); margin-right: -8px; }
.pmenu { position: absolute; right: 0; top: calc(100% - 4px); background: var(--panel); border-radius: 18px; z-index: 5; display: flex; flex-direction: column; padding: 6px; box-shadow: var(--pop), 0 0 0 1px var(--rule); }
.pmenu button { background: none; text-align: left; border-radius: 12px; }
.pmenu button:hover { background: var(--panel2); filter: none; }
/* People the host banned, with a way to let each back in. */
.bans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ban-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--panel2); font-weight: 600; }
.ban-chip .ell { min-width: 0; }
.ban-chip button.link { min-height: 36px; padding: 0 12px; border-radius: 999px; }
.watch-note { margin: 0 4px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; cursor: pointer; padding: 10px 8px 10px 16px; border-radius: 20px; }
.switch-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--text); font-size: 0.9375rem; }
.switch-row .small { line-height: 1.4; font-weight: 400; }
button.switch { position: relative; flex: none; width: 56px; min-height: 44px; height: 44px; padding: 0; background: none; border-radius: 99px; }
button.switch::before { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; bottom: 7px; border-radius: 99px; background: var(--btn2); transition: background-color .18s; }
button.switch.on::before { background: var(--btn); }
/* Off: an outlined track and a grey knob, both clear of the card behind them. */
button.switch:not(.on)::before { background: transparent; box-shadow: inset 0 0 0 2px var(--field); }
button.switch:not(.on) i { background: var(--field); box-shadow: none; }
button.switch i { position: absolute; top: 10px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .18s ease; }
button.switch.on i { transform: translateX(20px); background: var(--on-btn); }
button.switch:hover:not(:disabled) { filter: none; }
@media (prefers-reduced-motion: reduce) { button.switch i, button.switch::before { transition: none; } }
.folds { padding: 0 16px; border-radius: 20px; }
.fold.hist ul { padding: 0; }
.fold.hist li { gap: 8px; padding: 4px 0; }
.points-help p { margin: 6px 0; }
.points-help table { margin: 6px 0; }
.points-help td:first-child, .points-help th:first-child { width: 72px; }
.tabs { max-width: 420px; border-radius: 26px; background: var(--btn2); }
.tabs > button { font-size: 0.9375rem; font-weight: 700; }
/* The game being picked, its settings and Start. */
.detail { border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.detail > * { margin: 0; }
.detail h2 { font-size: 1.375rem; }
.detail-head { display: flex; align-items: flex-start; gap: 14px; }
.detail-head .grow { display: flex; flex-direction: column; gap: 4px; }
.detail-head .link { flex: none; margin-right: -8px; }
@media (max-width: 420px) {
  .detail { padding: 16px; }
  .detail-head { gap: 12px; }
  .detail-head .gicon.big { width: 52px; height: 52px; }
  .detail h2 { font-size: 1.1875rem; }
  .detail-head .link { font-size: 0.875rem; padding: 0 6px; margin-right: -6px; }
}
.detail-blurb { font-size: 0.9375rem; line-height: 1.5; color: var(--lead); margin: 0; }
.dna { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; max-width: 640px; }
.dna > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dna .dots { gap: 3px; }
.dna .dots i { width: 12px; height: 6px; border-radius: 3px; }
.opts { display: flex; flex-direction: column; gap: 12px; }
.opt { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.opt > span:first-child { font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.num { display: flex; gap: 8px; align-items: center; }
.num input { width: 110px; }
.start-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.start-btn .ico { width: 16px; height: 16px; }

/* The host's vote on the next game: at the top of the lobby, across both columns. */
.poll-card { display: flex; flex-direction: column; gap: 12px; animation: poll-in .28s ease-out; scroll-margin-top: calc(var(--bar-h) + 12px); }
.lobby > .poll-card { flex: 1 1 100%; order: 0; }
@keyframes poll-in { from { opacity: 0; transform: translateY(-6px); } }
.poll-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.poll-opts > li { display: flex; }
button.poll-opt { position: relative; overflow: hidden; flex: 1; min-width: 0; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 20px; background: var(--panel2); text-align: left; font-weight: 400; isolation: isolate; }
.po-bar { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--soft); z-index: -1; transition: width .35s ease; }
button.poll-opt.lead .po-bar { background: var(--tint-gold); }
button.poll-opt.mine { box-shadow: inset 0 0 0 2px var(--sel); }
.po-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.po-name b { font-family: var(--display); font-size: 0.8125rem; line-height: 1.2; }
.po-who { display: inline-flex; align-items: center; }
.po-who .av { box-shadow: 0 0 0 2px var(--panel2); }
.po-who .av + .av { margin-left: -6px; }
.po-n { font-family: var(--display); font-size: 1.25rem; min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
button.poll-opt.lead .po-n { color: var(--goldtext); }
.poll-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.poll-acts .primary { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.poll-wait { color: var(--lead); font-weight: 600; }
.poll-num { position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--sel); color: var(--on-sel); font-style: normal; font-weight: 800; font-size: 0.75rem; display: grid; place-items: center; }
/* The vote's way in: under Start on the game's card, beside Start in a phone's bottom bar, beside Play again. */
.detail-go { display: flex; flex-direction: column; gap: 8px; }
button.vote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.res-actions button.primary.big, .res-actions button.vote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.start-bar .sb-vote { flex: none; width: 48px; height: 48px; background: var(--btn2); }
.poll-maker { display: flex; flex-direction: column; gap: 12px; max-width: 640px; padding-bottom: 0; }
.poll-maker > .chipbtn { align-self: flex-start; }
.pm-list { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.pm-head { position: sticky; top: -20px; z-index: 2; margin: -20px -20px 0; padding: 20px 20px 10px; background: var(--panel); }
.pm-list button.pick { padding: 10px; gap: 8px; }
.pm-list button.pick:has(.poll-num) { padding-right: 36px; }
.pm-list .gicon.pick { width: 34px; height: 34px; }
.pm-foot .primary { white-space: nowrap; }
/* "I'm interested" and "Change the game" side by side, also on a phone. */
/* Side by side while both fit on one line each; on a narrow phone each takes the whole row instead of wrapping its words. */
.res-choice { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.res-choice > button { flex: 1 1 auto; min-width: 0; padding: 0 16px; white-space: nowrap; }
.pm-list button.pick { background: var(--panel2); position: relative; }
.pm-list button.pick.sel { background: var(--sel-bg); }
.pm-foot { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 0 16px; background: var(--panel); }
/* The chat, in the lobby where people wait. */
button.lobby-chat { width: 100%; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.lc-new { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 800; display: inline-grid; place-items: center; }
/* A tournament game's knock-outs. */
.ko-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ko-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .poll-card { animation: none; } .po-bar { transition: none; } }
.host-wait { min-height: 56px; border-radius: 28px; background: var(--panel2); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--lead); text-align: center; padding: 8px 16px; }
.wait-dots { display: inline-flex; gap: 4px; }
.wait-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--dim); animation: sw-pulse 1.2s infinite ease-in-out; }
.wait-dots i:nth-child(2) { animation-delay: .2s; } .wait-dots i:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .wait-dots i { animation: none; } .wait-dots i:nth-child(2) { opacity: .6; } .wait-dots i:nth-child(3) { opacity: .3; } }
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); gap: 12px; }
.picks > li { display: flex; }
button.pick { flex: 1; min-width: 0; text-align: left; padding: 12px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-weight: 400; }
button.pick > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
button.pick b { font-family: var(--display); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
button.pick .dim { font-size: 0.75rem; }
button.pick.sel { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel); }
button.pick[aria-disabled="true"] { opacity: .6; }
.gicon.pick { width: 40px; height: 40px; }
/* Game nights. Each kind of night is a card in a kind of game's colour, with its own pattern, a sticker and a fan of
   game icons tilted like the logo's two cards. --nk is the night's colour and --nkink the colour drawn on it. */
.nk-cocktail, .nk-for-cocktail { --nk: #ff3d7f; --nkink: #ffffff; }
.nk-quick, .nk-for-quick { --nk: #ff9f1c; --nkink: #15161a; }
.nk-standard, .nk-for-standard { --nk: #3355ff; --nkink: #ffffff; }
.nk-chaos, .nk-for-chaos { --nk: #ff5a3c; --nkink: #15161a; }
.nk-endless, .nk-for-endless { --nk: #2ed3a0; --nkink: #15161a; }
.nk-tournament, .nk-for-tournament { --nk: #ffc83d; --nkink: #15161a; }
.night-setup, .nights-sec { container-type: inline-size; container-name: nks; }
.nks { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container nks (min-width: 600px) {
  .nks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nks .nk-cocktail { grid-column: span 2; }
}
.nk { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; min-width: 0; margin: 0; padding: 14px 14px 16px;
  border-radius: 22px; border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--nkink);
  background-color: var(--nk); box-shadow: 0 4px 0 rgb(0 0 0 / .28); box-shadow: 0 4px 0 color-mix(in srgb, var(--nk) 55%, #000);
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s; font-size: 0.875rem; font-weight: 500; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
.nk-cocktail, .nk-tournament { grid-column: 1 / -1; }
/* The pattern sits under everything, away from the words. */
.nk::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nk-quick::before { background: repeating-linear-gradient(115deg, rgb(255 255 255 / .24) 0 9px, transparent 9px 22px);
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 90%); mask-image: linear-gradient(100deg, transparent 35%, #000 90%); }
.nk-standard::before { background: radial-gradient(rgb(255 255 255 / .3) 1.6px, transparent 2.2px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 95%); mask-image: linear-gradient(135deg, transparent 30%, #000 95%); }
.nk-chaos::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='3'%3E%3Crect x='70' y='8' width='26' height='36' rx='5' transform='rotate(-14 83 26)'/%3E%3Crect x='88' y='58' width='24' height='34' rx='5' transform='rotate(12 100 75)'/%3E%3Crect x='42' y='78' width='22' height='30' rx='5' transform='rotate(-8 53 93)'/%3E%3C/g%3E%3C/svg%3E") right -10px bottom -6px / 120px 120px no-repeat; }
.nk-endless::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20'%3E%3Cpath d='M0 10q12-10 24 0t24 0' fill='none' stroke='%23fff' stroke-opacity='.38' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 48px 20px;
  -webkit-mask-image: linear-gradient(160deg, transparent 40%, #000 95%); mask-image: linear-gradient(160deg, transparent 40%, #000 95%); }
.nk-tournament::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='110'%3E%3Cpath d='M8 10h30v24h30M8 58h30V34M8 64h30v24h30M8 110h30V88M68 34v27h40M68 88V61M108 61h34' fill='none' stroke='%2315161a' stroke-opacity='.16' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") right 56px top 8px / auto 62px no-repeat; }
/* Chaotic Cocktail: a dark glass with the colours of the games swirling in it, and bubbles. */
.nk-cocktail { background-color: #1b1520; box-shadow: 0 4px 0 #000; }
.nk-cocktail::before { background:
  radial-gradient(circle at 18% 30%, rgb(255 255 255 / .55) 0 2px, transparent 3px), radial-gradient(circle at 74% 70%, rgb(255 255 255 / .45) 0 2.5px, transparent 3.5px),
  radial-gradient(circle at 56% 22%, rgb(255 255 255 / .4) 0 1.5px, transparent 2.5px), radial-gradient(circle at 88% 38%, rgb(255 255 255 / .5) 0 2px, transparent 3px),
  radial-gradient(70% 90% at 100% 0%, rgb(255 61 127 / .75), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgb(46 211 160 / .45), transparent 70%),
  radial-gradient(45% 70% at 70% 110%, rgb(255 200 61 / .5), transparent 70%); }
.nk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 42px; margin-bottom: 6px; }
.nk-fan { display: flex; padding-left: 8px; }
.nk-ic { width: 34px; height: 34px; margin-left: -9px; border-radius: 11px; box-shadow: 0 0 0 2px rgb(255 255 255 / .75), 0 3px 0 rgb(0 0 0 / .22); }
.nk-ic .gicon { width: 34px; height: 34px; }
.nk-ic:nth-child(1) { transform: rotate(-12deg); } .nk-ic:nth-child(2) { transform: rotate(3deg) translateY(-3px); } .nk-ic:nth-child(3) { transform: rotate(14deg); } .nk-ic:nth-child(4) { transform: rotate(-6deg) translateY(2px); }
.nk-stk { flex: none; transform: rotate(9deg); filter: drop-shadow(0 2px 0 rgb(0 0 0 / .22)); }
.nk-stk .sticker { display: block; }
.nk-name { font-family: var(--display); font-weight: 800; font-size: 1.1875rem; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.nk-cocktail .nk-name { font-size: 1.5rem; }
.nk-what { font-size: 0.8438rem; opacity: .92; max-width: 46ch; }
.nk-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; padding-right: 30px; }
.nk-facts i { font-style: normal; font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; background: rgb(0 0 0 / .14); background: color-mix(in srgb, var(--nkink) 16%, transparent); }
.nk-check { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--nkink); color: var(--nk);
  transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.nk-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.nk-cocktail .nk-check { color: #ff3d7f; }
.nk.sel, .nk:has(input:checked) { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--text), 0 12px 22px rgb(0 0 0 / .25); }
.nk.sel .nk-check, .nk:has(input:checked) .nk-check { transform: scale(1); }
.nk.sel .nk-stk { animation: nk-wiggle .55s ease-out; }
.nk:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 5px; }
.nk.locked { cursor: default; }
@media (hover: hover) and (pointer: fine) { .nk:not(.sel):not(.locked):hover { transform: translateY(-2px); } }
@container (max-width: 150px) { .nk-name { font-size: 1rem; } .nk-what { font-size: 0.7813rem; } .nk-ic { width: 28px; height: 28px; } .nk-ic .gicon { width: 28px; height: 28px; } .nk-stk .sticker { width: 34px; height: 34px; } }
@keyframes nk-wiggle { 30% { transform: rotate(-10deg) scale(1.15); } 65% { transform: rotate(16deg) scale(1.08); } }
@media (forced-colors: active) { .nk { border-color: CanvasText; } .nk.sel { outline: 4px solid Highlight; outline-offset: 2px; } .nk-check { background: Highlight; color: HighlightText; } }
@media (prefers-reduced-motion: reduce) { .nk, .nk-check { transition: none; } .nk.sel .nk-stk { animation: none; } }
.nks.sm .nk { padding: 12px 12px 14px; }

.ns-head { display: flex; flex-direction: column; gap: 6px; }
/* Room above and below the cards for a picked card's ring and lift. */
.night-setup { gap: 18px; }
.night-opts { display: flex; flex-direction: column; gap: 14px; background: color-mix(in srgb, var(--nk) 9%, var(--panel)); }
.ck-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: h; }
.ck-how li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 0.9063rem; line-height: 1.4; color: var(--lead); counter-increment: h; }
.ck-how li::before { content: counter(h); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--nk); color: var(--nkink); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; }
.ck-how b { color: var(--text); }
button.night-go, button.plan-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pill.x2 { background: var(--gold); color: #15161a; }
.night-wait .host-wait { margin-top: 4px; }
/* Play now: a first-time host's one button. */
.quick-start { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 20px 18px; background: color-mix(in srgb, var(--k-party) 12%, var(--panel)); }
.quick-start h2 { font-size: 1.5rem; text-wrap: balance; }
.quick-start p { max-width: 34ch; text-wrap: pretty; }
.quick-start .night-go { margin-top: 6px; max-width: 360px; }
.qs-art { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); box-shadow: var(--lift); }
.lobby .switch-row.night-x2 { order: 0; padding: 4px 0; } /* not the lobby's own switch, which goes last */
.night-add { padding-bottom: 20px; }
.chipbtn[aria-disabled="true"].sel { opacity: 1; }

/* The night's plan: number, icon, name with its time (and a tournament's cut), then "…" for the rest. Wide enough,
   the arrows to move a game show in the row as well. */
.plan-card { container-type: inline-size; }
.plan-head { display: flex; flex-direction: column; gap: 6px; }
.plan-head h2 { text-wrap: balance; }
.plan-sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-moved { margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--tint-gold); color: var(--text); font-weight: 600; }
.plan { list-style: none; margin: 0; padding: 0; }
.plan-item { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--rule); }
.plan-item:first-child { border-top: 0; }
.plan-item.played > :not(.pi-played) { opacity: .55; }
.pi-played { padding: 0 6px; }
.pi-num { font-family: var(--display); font-size: 0.8125rem; font-weight: 800; color: var(--dim); text-align: center; }
.pi-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pi-name { font-family: var(--display); font-size: 0.875rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 0.7813rem; color: var(--dim); }
.pi-meta > span { white-space: nowrap; }
.pi-move { display: none; gap: 4px; }
.pi-move button.icon, button.pi-more { background: var(--btn2); }
.pi-move button.icon:disabled { opacity: .3; }
.pi-move .ico, .pi-more .ico { width: 18px; height: 18px; }
@container (min-width: 520px) { .plan-item { grid-template-columns: 22px 36px minmax(0, 1fr) auto auto; } .pi-move { display: flex; } }
.plan-go { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plan-go .link { color: var(--dim); font-weight: 600; }
/* One game of the plan, from "…": a sheet from the bottom on a phone, a card in the middle on a wide screen. */
.sheet-modal { align-items: flex-end; padding: 0; }
.plan-sheet { display: flex; flex-direction: column; gap: 14px; border-radius: 28px 28px 0 0; max-height: 88dvh; padding-bottom: max(20px, env(safe-area-inset-bottom)); animation: sheet-up .26s cubic-bezier(.2, .9, .3, 1); }
@media (min-width: 640px) { .sheet-modal { align-items: center; padding: 16px; } .plan-sheet { border-radius: 28px; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.ps-head { display: flex; align-items: center; gap: 12px; }
.ps-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ps-acts button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; background: var(--btn2); }
.ps-acts .ico { width: 18px; height: 18px; }
.ps-blurb { margin: 0; color: var(--lead); line-height: 1.45; }
.ps-fold { border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .plan-sheet { animation: none; } }

.host-away { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--banner); border-bottom: 1px solid var(--banner-line); font-size: 0.875rem; }
.host-away p { margin: 0; flex: 1 1 220px; line-height: 1.4; }
.host-away button { min-height: 40px; padding: 0 16px; }

/* Above each game of a night: its name, where it is, where you stand, and a line of stops, one per game. */
.nb { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 9px; background: var(--banner); border-bottom: 1px solid var(--banner-line); }
.nb-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 0.875rem; }
.nb-name { font-family: var(--display); font-size: 0.8125rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nb-at { color: var(--dim); white-space: nowrap; }
.nb-me { margin-left: auto; white-space: nowrap; font-weight: 600; }
.nb-me b { font-family: var(--display); }
.nb-stops { list-style: none; margin: 0; padding: 4px 4px 2px; display: flex; align-items: center; gap: 14px; overflow-x: auto; scrollbar-width: none; min-height: 42px; }
.nb-stops::-webkit-scrollbar { display: none; }
.nb-stops li { position: relative; flex: none; display: grid; place-items: center; }
.nb-stops li + li::before { content: ''; position: absolute; right: calc(100% + 2px); top: 50%; width: 10px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--line); }
.nb-stops li.past + li::before { background: var(--nk); }
.nb-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; color: var(--dim); }
.nb-ic .gicon.small { width: 24px; height: 24px; vertical-align: 0; }
.nb-stops .past .nb-ic { filter: grayscale(.7); opacity: .55; }
.nb-stops .now .nb-ic { width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 0 0 2px var(--banner), 0 0 0 4px var(--nk); }
.nb-stops .now .gicon.small { width: 32px; height: 32px; }
.nb-x2 { position: absolute; top: -7px; right: -11px; font-style: normal; font-size: 0.625rem; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 6px; background: var(--gold); color: #15161a; }
@media (prefers-reduced-motion: no-preference) { .nb-stops .now .nb-ic { animation: nb-now 2.4s ease-in-out infinite; } }
@keyframes nb-now { 50% { box-shadow: 0 0 0 2px var(--banner), 0 0 0 6px var(--nk); } }

/* The ×2 stamp over everything before a final that counts double. */
.x2-stamp { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgb(10 10 14 / .74); cursor: pointer; animation: x2-shade 2.6s ease both; }
.x2-in { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; text-align: center; padding: 16px; }
.x2-in b { font-family: var(--display); font-weight: 900; font-size: min(40vw, 13.125rem); line-height: .9; color: #ffc83d; -webkit-text-stroke: 5px #15161a; paint-order: stroke fill;
  text-shadow: 0 10px 0 #15161a; transform: rotate(-8deg); animation: x2-slam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.x2-in span { font-family: var(--display); font-weight: 800; font-size: clamp(1.0625rem, 4.6vw, 1.625rem); animation: res-in .4s .45s both; }
@keyframes x2-slam { from { transform: scale(3) rotate(-30deg); opacity: 0; } }
@keyframes x2-shade { 0% { opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .x2-stamp, .x2-in b, .x2-in span { animation: none; } }

/* The night's next game on the results, for everyone. */
.next-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: var(--panel); background: color-mix(in srgb, var(--nk, var(--panel)) 9%, var(--panel)); }
.nc-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-kicker { font-size: 0.8125rem; font-weight: 700; color: var(--dim); }
.nc-name { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.nc-name .pill { font-family: Onest, sans-serif; vertical-align: 3px; }
.nc-blurb { font-size: 0.875rem; color: var(--lead); line-height: 1.4; }
.nc-more { border-radius: 16px; background: var(--panel2); display: grid; place-items: center; font-family: var(--display); font-size: 1.75rem; color: var(--dim); }
.res-out { flex: 1 1 100%; text-align: center; padding: 8px 0; }

/* The night's table: place, player (and how far they moved in the last game), total, and the last game's points. */
.night-card { display: flex; flex-direction: column; gap: 10px; }
.ns-key { white-space: nowrap; flex: none; }
.ns-list { list-style: none; margin: 0; padding: 0; }
.ns-row { display: grid; grid-template-columns: 26px 30px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 54px; border-top: 1px solid var(--rule); }
.ns-row:first-child { border-top: 0; }
.ns-place { font-family: var(--display); font-size: 1.0625rem; text-align: center; color: var(--dim); }
.ns-row.lead .ns-place { color: var(--goldtext); }
.ns-row.lead .av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--gold); }
.ns-row.me { background: var(--sel-bg); margin: 0 -10px; padding: 0 10px; border-radius: 14px; border-top-color: transparent; }
.ns-row.me + .ns-row { border-top-color: transparent; }
.ns-name { min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
.ns-name .small { font-weight: 500; }
.ns-nl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ns-move { flex: none; font-size: 0.75rem; font-weight: 800; padding: 1px 6px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.ns-move.up { color: var(--ok); background: var(--right-bg); } .ns-move.down { color: var(--bad); background: var(--wrong-bg); }
.ns-pts { display: flex; flex-direction: column; align-items: flex-end; min-width: 44px; }
.ns-total { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ns-last { font-size: 0.75rem; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.ns-last.up { color: var(--ok); }
.ns-row.out { opacity: .6; }
.ns-cut { padding: 14px 0 6px; font-size: 0.75rem; font-weight: 700; color: var(--dim); border-top: 2px dashed var(--line); }
.ns-danger { list-style: none; margin: 10px 0 4px; border-top: 2px dashed var(--bad); height: 0; }
.ns-danger span { position: relative; top: -10px; display: inline-block; max-width: calc(100% - 40px); margin-left: 36px; padding: 0 8px; background: var(--panel); color: var(--bad); font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.ns-games summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
.ns-scroll { overflow-x: auto; margin: 4px -16px 0; padding: 0 16px; }
.ns-scroll .night-tbl { width: max-content; min-width: 100%; }
.night-tbl .ns-who { position: sticky; left: -16px; z-index: 1; background: var(--panel); max-width: 120px; overflow-wrap: anywhere; box-shadow: 6px 0 8px -6px rgb(0 0 0 / .3); }
.night-tbl tr.me .ns-who { background: var(--sel-bg); }
.night-tbl th .x2-mark { display: block; font-size: 0.75rem; font-weight: 800; color: var(--goldtext); }
.night-tbl tr.out td { opacity: .6; }
@media (prefers-reduced-motion: no-preference) { .ns-row { animation: res-in .35s calc(.2s + var(--i, 0) * .05s) ease-out both; } }

/* Results: a personal headline, a podium that rises 3rd, 2nd, 1st, then the moments; actions stay in reach. */
.results { max-width: 820px; padding: var(--pad) var(--pad) 32px; display: flex; flex-direction: column; gap: var(--gap); }
.results.stack > * + * { margin-top: 0; }
.res-hero { text-align: center; overflow: hidden; position: relative; padding: 18px 16px 16px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.res-game { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.res-game .gicon.tiny { width: 22px; height: 22px; }
.res-big { margin: 4px 0 0; font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.1; animation: res-pop .55s cubic-bezier(.2,.9,.3,1.3) both; }
.res-sub { margin: 0; font-size: 1rem; color: var(--lead); animation: res-in .5s .15s ease-out both; }
.podium { width: 100%; max-width: 460px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 14px 0 0; min-height: 210px; }
.pod { flex: var(--n, 1) 1 0; max-width: calc(var(--n, 1) * 170px); min-width: 0; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.pod-names { animation: res-in .45s ease-out both; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; column-gap: 6px; }
.pod-names > div { flex: 0 1 auto; min-width: 0; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; position: relative; }
.pod.tied .pod-names > div { margin-top: 26px; }
.pod.tied .pod-names:not(:has(> div:nth-child(6))) { flex-wrap: nowrap; }
.pod.tied .pod-names:not(:has(> div:nth-child(6))) > div { flex: 0 1 auto; min-width: 0; }
.pod-names > div.me .av { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--sel); }
.pod-name { max-width: 100%; font-size: 0.8125rem; }
.pod-score { font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.pod .crown { position: static; animation: res-crown .6s 1.45s cubic-bezier(.3,1.5,.5,1) both; }
.pod .crown .crown-ico { width: 22px; height: 22px; }
.pod-block { border-radius: 16px 16px 6px 6px; font-family: var(--display); font-weight: 800; font-size: 1.625rem; display: flex; align-items: center; justify-content: center; color: var(--text); background: var(--soft);
  transform-origin: bottom; animation: res-rise .55s cubic-bezier(.2,.8,.3,1.15) both; }
.p1 .pod-block { height: 116px; background: #ffc83d; color: #15161a; font-size: 2.125rem; }
.podium.blank .p1 .pod-block { height: 60px; background: var(--soft); color: var(--dim); }
.p2 .pod-block { height: 84px; }
.p3 .pod-block { height: 60px; font-size: 1.375rem; }
.p3 .pod-block { animation-delay: .2s; } .p3 .pod-names { animation-delay: .45s; }
.p2 .pod-block { animation-delay: .55s; } .p2 .pod-names { animation-delay: .8s; }
.p1 .pod-block { animation-delay: .9s; } .p1 .pod-names { animation-delay: 1.15s; }
.pod.empty { visibility: hidden; }
.moments { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.moments li { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; line-height: 1.35; border-radius: 18px; background: var(--panel2); font-size: 0.875rem; font-weight: 600;
  animation: res-in .4s calc(1.7s + var(--i) * .15s) ease-out both; }
.mk { width: 16px; height: 16px; flex: none; }
.mk.flame { fill: #ff5a3c; } .mk.star { fill: #ffc83d; stroke: #e0a400; stroke-width: 1.4; stroke-linejoin: round; }
.mk.crown { fill: #ffc83d; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; }
:root:not([data-theme="light"]) .mk.crown { stroke: #ffc83d; }
.mk.line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.res-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad) max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 22%); }
.res-actions .grow { min-width: 0; flex: 1 1 200px; }
.res-actions button { min-height: 48px; }
.res-actions button.big { min-height: 56px; }
/* On a phone the main action gets the whole row and the quieter ones share the next, side by side. */
@media (max-width: 560px) { .res-actions .grow { flex-basis: 100%; } .res-actions .ghost-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; } }
.ghost-btn { background: var(--raise); box-shadow: var(--shadow); white-space: nowrap; }
.res-opts { padding: 0 16px; }
.res-opts[open] { padding-bottom: 16px; }
/* A main button with a second line (the night's next game). */
.btn-2l { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; min-width: 0; }
.btn-2l small { font-size: 0.75rem; font-weight: 600; opacity: .75; }
button.in .btn-2l, .res-choice .btn-2l { align-items: center; text-align: center; }
.more-moments { margin-top: 2px; font-size: 0.875rem; }
.lbl-short { display: none; }
.results > .res-ad { margin: 26px auto 6px; }
/* A page's box never sits right under its Play buttons. */
.doc .cta + .ad { margin-top: 36px; }
/* The results' box is on screen as they open: on a phone the card is kept short (a smaller podium, the first moment
   with the rest a tap away), the two choices sit side by side and the smaller buttons share one row. */
@media (min-width: 561px) { .more-moments { display: none; } }
/* From tablet width the card is two columns: the words on the left, the podium on the right. */
@media (min-width: 761px) {
  .res-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "game pod" "big pod" "sub pod" "mom pod" "key pod";
    align-content: center; justify-items: start; text-align: left; column-gap: 28px; row-gap: 6px; padding: 22px 28px; }
  .res-hero > .res-game { grid-area: game; } .res-hero > .res-big { grid-area: big; } .res-hero > .res-sub { grid-area: sub; }
  .res-hero > .moments { grid-area: mom; justify-content: flex-start; margin-top: 8px; } .res-hero > .pod-key { grid-area: key; text-align: left; }
  .res-hero > .podium { grid-area: pod; align-self: end; margin: 0; min-height: 0; }
  .res-hero .p1 .pod-block { height: 92px; } .res-hero .p2 .pod-block { height: 66px; } .res-hero .p3 .pod-block { height: 46px; }
}
@media (max-width: 560px) {
  .res-hero { padding: 14px 12px 12px; gap: 4px; }
  .res-big { font-size: 1.6875rem; }
  .res-sub { font-size: 0.9375rem; }
  .podium { min-height: 0; margin-top: 20px; }
  .p1 .pod-block { height: 56px; font-size: 1.5rem; } .p2 .pod-block { height: 40px; font-size: 1.1875rem; } .p3 .pod-block { height: 28px; font-size: 1.0625rem; }
  .podium.blank .p1 .pod-block { height: 32px; }
  .pod-names > div { gap: 1px; margin-bottom: 4px; }
  .pod .crown { position: absolute; top: -20px; left: calc(50% - 11px); line-height: 0; }
  /* Room points are in the table under the box. */
  .res-hero .pod-gain, .res-hero .pod-key { display: none; }
  .moments { margin-top: 8px; }
  .moments:not(.open) li:nth-child(n+2) { display: none; }
  .res-actions .res-choice > button.grow { flex: 1 1 0; white-space: normal; line-height: 1.2; padding: 0 10px; font-size: 0.9375rem; }
  .res-more { flex-wrap: nowrap; }
  .res-more:has(.in-list) { flex-wrap: wrap; }
  .lbl-long { display: none; } .lbl-short { display: inline; }
}
button.in { background: var(--right-bg); color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); }
.in-list { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; }
.in-list .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); } .in-list .av:first-child { margin-left: 0; }
.in-list .small { margin-left: 6px; color: var(--ok); font-weight: 700; }
.res-table tr { animation: res-in .35s calc(1.3s + var(--i) * .06s) ease-out both; }
.res-table tr.sat td { opacity: .7; }
/* A long name wraps rather than pushing the score and room points off a phone's screen. */
.res-table td:nth-child(2), .night-tbl td:nth-child(2) { overflow-wrap: anywhere; min-width: 96px; }
.res-pts-note { margin-top: 10px; }
.res-tie { display: block; }
.ptspill { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 8px; border-radius: 13px; font-size: 0.8125rem; background: var(--btn); color: var(--on-btn); }
.ptspill.zero { background: var(--panel2); color: var(--lead); }
.tbl .r { text-align: right; }
.champion { text-align: center; border-radius: 28px; background: #ffc83d; color: #15161a; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.champion h1 { margin: 6px 0 0; font-size: 1.75rem; line-height: 1.15; }
.champion p { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.champ-avs { display: flex; justify-content: center; margin-top: 4px; }
.champ-avs .av { box-shadow: 0 0 0 3px #ffc83d; }
.champ-avs .av + .av { margin-left: -8px; }
.awards { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; }
.awards li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: rgb(255 255 255 / .5); font-size: 0.875rem; text-align: left; }
.aw-avs { display: inline-flex; flex: none; }
.aw-avs .av + .av { margin-left: -6px; }
.trophy { width: 64px; height: 64px; border-radius: 32px; background: #15161a; color: #ffc83d; display: grid; place-items: center; }
.trophy .ico { width: 34px; height: 34px; stroke-width: 2; }
.night-tbl .num-c { text-align: center; } .night-tbl .total { text-align: right; font-family: var(--display); }
.night-tbl { min-width: 420px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; }
@keyframes res-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes res-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes res-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes res-crown { from { opacity: 0; transform: translateY(-30px) rotate(-25deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .res-big, .res-sub, .pod-names, .pod-block, .pod .crown, .moments li, .res-table tr { animation: none; }
}

/* Inviting: Share, Copy link and QR code */
.invite-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.invite-btns.two { grid-template-columns: 1fr 1fr; width: 100%; }
.invite-btns button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; font-size: 0.875rem; }
.invite-btns.two button { min-height: 52px; font-size: 1rem; }
.invite-btns .ico { width: 16px; height: 16px; }
.invite-card { max-width: 560px; }
.qr { width: 200px; aspect-ratio: 1; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.qr svg { display: block; width: 100%; height: 100%; }
.inv-body { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.inv-qr { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inv-qr.stack > * + * { margin-top: 0; }
.inv-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inv-info.stack > * + * { margin-top: 0; }
.inv-info .big-code { font-size: 2.5rem; margin-top: 6px; }
.link-line { background: none; padding: 0 6px; min-height: 44px; font-weight: 600; color: var(--accent); font-size: 0.875rem; word-break: break-all; }
table.tbl, .tbl { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.tbl th, .tbl td { padding: 10px 6px; border-bottom: 1px solid var(--rule); text-align: left; }
.tbl th { color: var(--dim); font-weight: 600; font-size: 0.8125rem; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; } .tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl tr.me td { background: var(--me); }
.tbl tr.me td:first-child { box-shadow: -8px 0 0 var(--me); } .tbl tr.me td:last-child { box-shadow: 8px 0 0 var(--me); }
.tbl tr.out td { opacity: .5; }
.scroll { overflow-x: auto; }
.scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Game area: the game on the left, the scores on the right (below on a phone). */
.game-area { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.play2 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); padding: var(--pad) var(--pad) 24px; max-width: 1100px; width: 100%; margin: 0 auto; }
.pmain { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.pside { flex: 1 1 260px; min-width: 0; background: var(--panel); border-radius: 22px; padding: 10px 14px 12px; box-shadow: var(--shadow); }
.pside > p { margin: 8px 0 0; line-height: 1.45; }
.ghead { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ghead > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.gtitle { font-weight: 800; font-size: 1.0625rem; }
/* The countdown: the number inside a ring that drains; in the last five seconds both turn hot and beat. */
.clock { --size: 48px; position: relative; flex: none; width: var(--size); height: var(--size); display: inline-grid; place-items: center; font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.0625rem; line-height: 1; }
.clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.clock .trk { fill: var(--panel); stroke: var(--soft); stroke-width: 3.5; }
.clock .arc { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .25s linear, stroke .3s; }
.clock b { position: relative; font-weight: inherit; }
.clock.long b { font-size: 0.7813rem; letter-spacing: -.02em; }
/* Ten minutes and more ("10:00"): a bigger ring, so the time sits inside it. */
.clock.xl, .status .clock.xl { --size: 58px; } .clock.xl b { font-size: 0.7188rem; letter-spacing: -.03em; }
.clock.low .arc { stroke: #ff5a3c; }
.clock.low b { color: #ff5a3c; }
:root[data-theme="light"] .clock.low b { color: #c4320a; }
:root[data-theme="light"] .clock.low .arc { stroke: #c4320a; }
.clock.low { animation: clock-beat 1s ease-in-out infinite; }
@keyframes clock-beat { 0%, 100% { transform: scale(1) } 12% { transform: scale(1.1) } 30% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .clock.low { animation: none; } .clock .arc { transition: none; } }
.scores { list-style: none; margin: 0; padding: 0; }
.scores li { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 6px; margin: 0 -6px; border-top: 1px solid var(--rule); }
.scores li:first-child, .scores li.me, .scores li.me + li { border-top-color: transparent; }
.scores li.me { background: var(--me); border-radius: 12px; }
.scores .pl { width: 16px; color: var(--dim); font-weight: 700; font-size: 0.8125rem; }
.scores .nm { color: var(--text) !important; font-size: 0.875rem; }
.scores .pts { font-weight: 800; font-size: 0.9375rem; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.scores .note { font-size: 0.75rem; font-weight: 600; color: var(--dim); }
.waiting { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.waiting .chip { display: inline-flex; align-items: center; gap: 2px; opacity: .45; font-size: 0.75rem; font-weight: 800; color: var(--ok); }
.waiting .chip.on { opacity: 1; }
.answer { display: flex; gap: 8px; }
.answer .line { --h: 52px; flex: 1; padding-inline: 18px; font-size: 1.0625rem; }
.answer button { min-height: 52px; padding: 0 22px; font-size: 1rem; }
/* The question or prompt of a round. Party games put it on their own yellow. */
.prompt { font-family: var(--display); font-size: clamp(1.1875rem, 3.6vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; text-align: center; padding: 24px 18px; background: var(--panel); border-radius: 24px; line-height: 1.3; box-shadow: var(--shadow); }
.prompt .small, .prompt .dim { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.prompt .unit { margin: 10px auto 0; width: fit-content; min-height: 28px; padding: 4px 12px; border-radius: 14px; background: var(--panel2); font-size: 0.8125rem; }
.g-mindmeld .prompt, .g-mostlikely .prompt { background: #ffc83d; color: #15161a; font-weight: 800; padding: 28px 16px; box-shadow: none; }
.g-mindmeld .prompt .dim, .g-mostlikely .prompt .dim { color: #15161a; opacity: .8; }
.word-big { font-family: var(--display); letter-spacing: .01em; font-size: clamp(1.625rem, 6vw, 2.5rem); color: var(--goldtext); }
.groups { display: grid; gap: 8px; }
.group { background: var(--panel); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); }
.group.match { background: var(--tint-green); box-shadow: inset 0 0 0 2px var(--ok); }
button.group { display: block; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }
.group.picked { box-shadow: inset 0 0 0 3px var(--accent); }
.mm-tip { margin: 4px 0 8px; }
.gtext { font-size: 1.125rem; font-weight: 700; text-transform: capitalize; }
.ids { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.875rem; margin-top: 4px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.who { min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--panel); border-radius: 20px; padding: 12px 6px; box-shadow: var(--shadow); font-size: 0.9375rem; }
.who .nm { color: var(--text) !important; }
.who.sel { background: var(--sel-bg); box-shadow: inset 0 0 0 3px var(--sel); }
.vrow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; background: var(--panel); border-radius: 16px; margin-top: 6px; box-shadow: var(--shadow); }
.vrow.top { box-shadow: inset 0 0 0 2px var(--gold); }
.bar-v { width: 90px; height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.bar-v i { display: block; height: 100%; background: var(--gold); }
.answer-reveal { text-align: center; }
.big-num { font-family: var(--display); font-size: clamp(1.625rem, 6vw, 2.5rem); font-weight: 800; color: var(--goldtext); line-height: 1.15; }
/* The unit beside a big number is small text: in the light theme the gold is darkened to read at 4.5:1. */
:root[data-theme="light"] .big-num > .small { color: #745600; }
/* Picking one of a few answers. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel); border-radius: 18px; padding: 10px 14px; font-size: 1.0625rem; font-weight: 700; min-height: 60px; flex-wrap: wrap; box-shadow: var(--shadow); }
.choice:disabled { opacity: 1; }
.choice .letter { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--panel2); border-radius: 10px; padding: 0; font-size: 0.875rem; font-weight: 800; }
.choice .letter:empty { display: none; }
.choice .dim.small { font-weight: 500; }
.choice.mine { background: var(--sel-bg); box-shadow: inset 0 0 0 3px var(--sel); }
.choice.mine .letter { background: var(--sel); color: var(--on-sel); }
.choice.right { background: var(--right-bg); box-shadow: inset 0 0 0 3px var(--ok); }
.choice.wrong { background: var(--wrong-bg); box-shadow: inset 0 0 0 3px var(--bad); }
/* Who picked an answer: a line of its own under the answer (under its text, past the letter), however many there are. */
.who-picked:empty { display: none; }
.who-picked { display: flex; gap: 4px 8px; font-size: 0.75rem; flex-wrap: wrap; flex: 1 0 100%; min-width: 0; margin-top: -4px; }
.choice:has(.letter:not(:empty)) .who-picked { margin-left: 44px; flex-basis: calc(100% - 44px); }
.defs { display: grid; gap: 8px; }
.def { text-align: left; background: var(--panel); border-radius: 18px; padding: 14px 16px; font-size: 1rem; font-weight: 500; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.def:disabled { opacity: 1; }
.def.mine { opacity: .6; }
.def.sel { background: var(--sel-bg); box-shadow: inset 0 0 0 3px var(--sel); }
.def.right { background: var(--right-bg); box-shadow: inset 0 0 0 3px var(--ok); }
.def-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Reaction */
.rx { color: #fff; height: min(52dvh, 440px); min-height: 280px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: clamp(1.625rem, 6vw, 2.125rem); font-weight: 800; letter-spacing: -.02em;
  user-select: none; position: relative; touch-action: manipulation; cursor: pointer; box-shadow: inset 0 -8px 0 rgb(0 0 0 / .18); text-align: center; padding: 16px; }
.rx-wait { background: #b42318; }
.rx:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rx-wait > span { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rx-wait > span::before { content: ''; width: 14px; height: 14px; border-radius: 7px; background: rgb(255 255 255 / .55); box-shadow: -24px 0 0 rgb(255 255 255 / .9), 24px 0 0 rgb(255 255 255 / .25); }
.rx-go { background: #1b7f3b; }
.rx-decoy { background: #3355ff; }
.rx-target { background: #15161a; }
.target { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #e03131 19% 45%, #fff 46% 60%, #e03131 61%); }

/* Word Race (Wordle) */
.wordle { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 8px 8px 0; max-width: 1100px; width: 100%; margin: 0 auto; }
.wordle .play { flex: 999 1 560px; display: flex; flex-direction: column; align-items: center; min-height: 0; min-width: 0; }
.wordle .side { flex: 1 1 280px; overflow: auto; padding: 4px 12px; align-self: start; border-radius: 20px; }
.status { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 4px 0 8px; flex-wrap: wrap; font-size: 0.9375rem; }
.status .pill { background: var(--panel); box-shadow: var(--shadow); }
.status .clock { --size: 42px; font-size: 0.9375rem; }
.board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; width: min(330px, 78vw, calc((100dvh - 350px) * 5 / 6)); min-width: 200px; aspect-ratio: 5 / 6; }
.brow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.tile { border: 2px solid var(--tile-empty); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.125rem, 6vw, 1.625rem); text-transform: uppercase; user-select: none; }
.tile.filled { border-color: var(--tile-filled); }
.t2 { background: var(--green); border-color: var(--green); color: #fff; }
.t1 { background: var(--yellow); border-color: var(--yellow); color: #15161a; }
.t0 { background: var(--gray); border-color: var(--gray); color: #fff; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.kb { width: 100%; max-width: 500px; margin: 10px auto 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); user-select: none; }
.kr { display: flex; gap: 5px; margin-bottom: 6px; justify-content: center; }
.k { flex: 1; height: 54px; min-height: 0; padding: 0; background: var(--key); color: var(--keytext); border-radius: 8px; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; min-width: 0; }
.k.wide { flex: 1.5; font-size: 0.75rem; }
.k.t2 { background: var(--green); color: #fff; } .k.t1 { background: var(--yellow); color: #15161a; } .k.t0 { background: var(--key-off); color: var(--key-offtext); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-height: 640px) { .k { height: 42px; } .kr { margin-bottom: 4px; } }
.stand { list-style: none; margin: 0; padding: 0; }
.stand li { padding: 7px 4px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 8px; align-items: center; font-size: 0.875rem; }
.stand li:first-child { border-top: 0; }
.stand .place { font-weight: 700; font-size: 0.8125rem; color: var(--dim); }
.stand .score { font-weight: 700; font-variant-numeric: tabular-nums; }
.stand .prog { grid-column: 2 / 4; display: flex; gap: 6px; align-items: center; font-size: 0.75rem; }
.mini { display: inline-grid; grid-template-columns: repeat(5, 7px); gap: 1px; }
.mini i { width: 7px; height: 7px; border-radius: 2px; background: var(--soft); }
.mini i.t2 { background: var(--green); } .mini i.t1 { background: var(--yellow); } .mini i.t0 { background: var(--gray); }
.overlay { position: fixed; inset: 0; background: var(--shade); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 16px; }
.huge { font-family: var(--display); font-size: 6rem; font-weight: 800; color: #fff; }
.overlay .center > .dim { color: #fff; opacity: .8; }
.reveal { min-width: min(360px, 90vw); border-radius: 28px; }
.reveal .word { font-family: var(--display); font-size: 2.5rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); }
.done-card { margin-top: 20px; width: 100%; max-width: 420px; border-radius: 24px; }

/* Word Grid */
.wg { align-items: center; }
.wg > .ghead { align-self: stretch; }
.wg-word { min-height: 44px; font-family: var(--display); font-size: 1.75rem; font-weight: 800; letter-spacing: .08em; text-align: center; display: grid; place-items: center; }
/* A refusal ("Not on the grid") is a sentence, not a word: smaller and unspaced, so it stays on one line. */
.wg-word .msg { font-family: var(--font); font-size: 1.0625rem; letter-spacing: 0; animation: wg-nope .32s; }
@keyframes wg-nope { 20%, 60% { transform: translateX(-5px) } 40%, 80% { transform: translateX(5px) } }
@media (prefers-reduced-motion: reduce) { .wg-word .msg { animation: none; } }
.wgrid { display: grid; gap: 8px; width: min(360px, 90vw, calc(100dvh - 330px)); min-width: 240px; aspect-ratio: 1; touch-action: none; user-select: none; }
.wgrid.s4 { grid-template-columns: repeat(4, 1fr); }
.wgrid.s5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wtile { background: var(--panel); color: var(--text); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.375rem, 6vw, 1.875rem); box-shadow: 0 3px 0 var(--key); }
:root:not([data-theme="light"]) .wtile { background: #2a2d36; box-shadow: 0 3px 0 #0b0c10; }
.s5 .wtile { font-size: clamp(1.125rem, 5vw, 1.625rem); }
.wtile.on, :root:not([data-theme="light"]) .wtile.on { background: #ffc83d; color: #15161a; box-shadow: 0 3px 0 #b88a00; }
.wtile.last { outline: 3px solid var(--text); outline-offset: -3px; }
.results .wgrid { width: 180px; min-width: 180px; gap: 4px; }
.results .wtile { font-size: 1.125rem; border-radius: 6px; }
.words { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wchip { background: var(--panel2); border-radius: 10px; min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; }
.wchip i { font-style: normal; color: var(--ok); font-size: 0.75rem; }
.wchip.shared { text-decoration: line-through; opacity: .55; }
.wg-res { margin-bottom: 10px; }

/* Imposter */
.secret { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #7c3aed; color: #fff; border-radius: 24px; padding: 18px 16px; width: 100%; font-weight: 400; box-shadow: 0 10px 24px rgb(124 58 237 / .25); }
.secret .dim, .secret .small { color: #fff; opacity: .88; }
.secret b { font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.secret.imp { background: #15161a; color: #fff; box-shadow: 0 10px 24px rgb(0 0 0 / .25), inset 0 0 0 3px #ff5a3c; }
:root:not([data-theme="light"]) .secret.imp { background: #2a1214; }
.secret.imp b { color: #ff8a7a; }
.clues { display: grid; gap: 6px; }
.clue-row { min-height: 52px; display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 16px; padding: 6px 12px 6px 8px; box-shadow: var(--shadow); }
.clue-row.turn { box-shadow: inset 0 0 0 2px var(--gold); }
.clue-row .nm { color: var(--text) !important; }
/* A block (not a flex row), so a long name ends in "…" instead of being cut mid-letter. */
.cname { width: 110px; flex: none; display: block; font-size: 0.875rem; }
.cl { display: flex; gap: 6px; flex-wrap: wrap; }
.clue { background: var(--panel2); min-height: 28px; padding: 0 12px; border-radius: 14px; font-weight: 700; font-size: 0.875rem; display: inline-flex; align-items: center; }
.imp-name { font-family: var(--display); font-size: 1.625rem; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
.imp-wait { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* The imposter was caught and had a last guess: their guess drops in a letter at a time, the real word flips over
   under it, and a stamp says if it was right. --d is each tile's moment, --v the verdict's, --t the result line's. */
.imp-off { margin: 10px 0 12px; display: grid; gap: 6px; }
.imp-lbl { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); animation: res-in .3s var(--d, 0s) both; }
.imp-lbl:not(:first-child) { margin-top: 8px; }
.imp-guess { position: relative; }
.imp-tiles { container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; position: relative; }
.imp-tw { display: flex; gap: 4px; position: relative; }
.imp-tiles i { --s: min(40px, calc((100cqi - (var(--n) - 1) * 4px) / var(--n))); width: var(--s); height: calc(var(--s) * 1.15); display: grid; place-items: center; border-radius: 8px;
  font-style: normal; font-family: var(--display); font-weight: 800; font-size: calc(var(--s) * .56); text-transform: uppercase; background: var(--panel2); color: var(--text); }
.imp-tiles.g i { animation: imp-drop .38s var(--d) cubic-bezier(.2, 1.6, .4, 1) both; }
.imp-tiles.w i { background: #15161a; color: #fff; animation: imp-flip .45s var(--d) ease-out both; }
.imp-none { font-weight: 700; color: var(--dim); min-height: 44px; display: grid; place-items: center; animation: res-in .3s .25s both; }
/* Right: both words go green and jump. Wrong: the guess shakes, greys out and is struck through; the word stays. */
.imp-off.right .imp-tiles.g i { animation-name: imp-drop, imp-green; animation-duration: .38s, .3s; animation-delay: var(--d), var(--v); animation-fill-mode: both; }
.imp-off.right .imp-tiles.w i { animation-name: imp-flip, imp-green; animation-duration: .45s, .3s; animation-delay: var(--d), var(--v); animation-fill-mode: both; }
.imp-off.right .imp-tiles { animation: imp-jump .5s var(--v) ease-out both; }
.imp-off.wrong .imp-tiles.g { animation: shake .45s var(--v) both; }
.imp-off.wrong .imp-tiles.g i { animation-name: imp-drop, imp-grey; animation-duration: .38s, .3s; animation-delay: var(--d), var(--v); animation-fill-mode: both; }
.imp-off.wrong .imp-tiles.g .imp-tw::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--red);
  transform-origin: left; animation: imp-strike .3s var(--v) ease-in both; }
.imp-off.wrong .imp-none { animation: res-in .3s .25s both, shake .45s var(--v) both; }
.imp-stamp { position: absolute; z-index: 1; left: 50%; top: 50%; margin: -22px 0 0 -70px; width: 140px; height: 44px; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--display); font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; background: var(--panel); border: 4px solid currentColor;
  box-shadow: 0 8px 20px rgb(0 0 0 / .25); transform: rotate(-9deg); pointer-events: none; animation: imp-stamp .45s var(--v) cubic-bezier(.2, 1.6, .4, 1) both; }
.imp-off.right .imp-stamp { color: var(--green); }
.imp-off.wrong .imp-stamp { color: var(--red); }
.reveal-imp .imp-after { animation: res-in .4s var(--t, 0s) both; }
@keyframes imp-drop { from { transform: translateY(-22px) scale(.5); opacity: 0; } }
@keyframes imp-flip { 0% { transform: perspective(300px) rotateX(90deg); opacity: 0; } 60% { transform: perspective(300px) rotateX(-14deg); opacity: 1; filter: brightness(1.8); } 100% { transform: none; } }
@keyframes imp-green { to { background: var(--green); color: #fff; } }
@keyframes imp-grey { to { background: var(--panel2); color: var(--dim); opacity: .55; } }
@keyframes imp-jump { 40% { transform: translateY(-8px) scale(1.06); } }
@keyframes imp-strike { from { transform: scaleX(0); } }
@keyframes imp-stamp { from { transform: scale(2.6) rotate(-30deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* No movement: everything lands at once in its end state. */
  .imp-off *, .imp-off *::after, .reveal-imp .imp-after { animation-delay: 0s !important; animation-duration: 1ms !important; }
}

/* Wallpapers. Every game, the lobby and the home page have faint drawings behind everything: one tile of twelve
   things from that game (public/img/wall/<id>.svg), used as a mask in the game's colours. app.js setWall puts the
   game's id on body[data-wall] and its kind on body[data-kind]; the lobby and home page use 'mix'. A game's kind tints
   the page (--bg). The drawings are painted, so they can never be dragged, picked or selected, and they sit under
   everything (z-index -1 on the root), so the body lets them show through. On the home page and in the lobby they
   drift a little with the mouse (--px, --py, set by app.js). */
:root { --wall-tile: 340px; }
@media (min-width: 900px) { :root { --wall-tile: 420px; } }
:root:has(body[data-wall]) { --wall-a: .12; --wall-ink: #ffffff; }
:root[data-theme="light"]:has(body[data-wall]) { --wall-a: .18; --wall-ink: #15161a; }
:root:has(body[data-wall="mix"]) { --wall-a: .08; --wall-ink: #c9ccd4; }
:root[data-theme="light"]:has(body[data-wall="mix"]) { --wall-a: .1; --wall-ink: #4e5260; }
:root:has(body[data-kind="Word"]) { --bg: #111524; --wall-ink: #9fb2ff; }
:root:has(body[data-kind="Drawing"]) { --bg: #1c1315; --wall-ink: #ffb3a3; }
:root:has(body[data-kind="Party"]) { --bg: #1c1912; --wall-ink: #ffe29a; }
:root:has(body[data-kind="Deception"]) { --bg: #141120; --wall-ink: #c9b0ff; }
:root:has(body[data-kind="Trivia"]) { --bg: #0f1822; --wall-ink: #a6dbff; }
:root:has(body[data-kind="Puzzle"]) { --bg: #141913; --wall-ink: #cdef9f; }
:root:has(body[data-kind="Strategy"]) { --bg: #0f191a; --wall-ink: #93ecd0; }
:root:has(body[data-kind="Cards"]) { --bg: #1c121b; --wall-ink: #ffc2e0; }
:root:has(body[data-kind="Reflex"]) { --bg: #1c1611; --wall-ink: #ffcf8a; }
:root:has(body[data-kind="Mix"]) { --bg: #191214; --wall-ink: #ffb199; }
:root[data-theme="light"]:has(body[data-kind="Word"]) { --bg: #edf1ff; --wall-ink: #1f3fd1; }
:root[data-theme="light"]:has(body[data-kind="Drawing"]) { --bg: #fff1ec; --wall-ink: #b4321f; }
:root[data-theme="light"]:has(body[data-kind="Party"]) { --bg: #fff7e0; --wall-ink: #8a6500; }
:root[data-theme="light"]:has(body[data-kind="Deception"]) { --bg: #f3eeff; --wall-ink: #5b21b6; }
:root[data-theme="light"]:has(body[data-kind="Trivia"]) { --bg: #eaf6ff; --wall-ink: #0b6aa8; }
:root[data-theme="light"]:has(body[data-kind="Puzzle"]) { --bg: #f2f9e7; --wall-ink: #4d7a12; }
:root[data-theme="light"]:has(body[data-kind="Strategy"]) { --bg: #e8f9f3; --wall-ink: #0f7a5a; }
:root[data-theme="light"]:has(body[data-kind="Cards"]) { --bg: #fff0f7; --wall-ink: #b0336f; }
:root[data-theme="light"]:has(body[data-kind="Reflex"]) { --bg: #fff4e4; --wall-ink: #a35a00; }
:root[data-theme="light"]:has(body[data-kind="Mix"]) { --bg: #fff1ec; --wall-ink: #c0392b; }
/* Code Words keeps its spy's desk: deep navy, or old paper in light mode. */
:root:has(body[data-wall="codewords"]) { --bg: #0c1322; --wall-ink: #9fbfff; }
:root[data-theme="light"]:has(body[data-wall="codewords"]) { --bg: #e9dbbb; --wall-ink: #6b4a1a; }
html:has(body[data-wall="codewords"]) { background: radial-gradient(ellipse 120% 80% at 50% 25%, #1b2c48, #0c1322 70%) fixed #0c1322; }
html[data-theme="light"]:has(body[data-wall="codewords"]) { background: radial-gradient(ellipse 120% 80% at 50% 25%, #f8f0dc, #e4d4b0 75%) fixed #e9dbbb; }
body[data-wall] { background: transparent; }
body[data-wall]::before { content: ''; position: fixed; inset: -60px; z-index: -1; pointer-events: none; user-select: none;
  background: var(--wall-ink); opacity: var(--wall-a);
  -webkit-mask: var(--wall) 0 0 / var(--wall-tile) repeat; mask: var(--wall) 0 0 / var(--wall-tile) repeat;
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { body[data-wall]::before { transition: none; } }
body[data-wall] .site-nav { background: transparent; }
:root:has(body[data-wall]) .bar { background: color-mix(in srgb, var(--bar) 82%, transparent); backdrop-filter: blur(8px); }
body[data-wall="mix"] { --wall: url(/img/wall/mix.svg); } body[data-wall="draw"] { --wall: url(/img/wall/draw.svg); }
body[data-wall="imposter"] { --wall: url(/img/wall/imposter.svg); } body[data-wall="codewords"] { --wall: url(/img/wall/codewords.svg); }
body[data-wall="wordle"] { --wall: url(/img/wall/wordle.svg); } body[data-wall="telephone"] { --wall: url(/img/wall/telephone.svg); }
body[data-wall="bluff"] { --wall: url(/img/wall/bluff.svg); } body[data-wall="mindmeld"] { --wall: url(/img/wall/mindmeld.svg); }
body[data-wall="mostlikely"] { --wall: url(/img/wall/mostlikely.svg); } body[data-wall="trivia"] { --wall: url(/img/wall/trivia.svg); }
body[data-wall="wordgrid"] { --wall: url(/img/wall/wordgrid.svg); } body[data-wall="lastcard"] { --wall: url(/img/wall/lastcard.svg); }
body[data-wall="reaction"] { --wall: url(/img/wall/reaction.svg); } body[data-wall="closest"] { --wall: url(/img/wall/closest.svg); }
body[data-wall="stopwatch"] { --wall: url(/img/wall/stopwatch.svg); } body[data-wall="connections"] { --wall: url(/img/wall/connections.svg); }
body[data-wall="geoguess"] { --wall: url(/img/wall/geoguess.svg); } body[data-wall="musicguess"] { --wall: url(/img/wall/musicguess.svg); }
body[data-wall="movieguess"] { --wall: url(/img/wall/movieguess.svg); } body[data-wall="mastermind"] { --wall: url(/img/wall/mastermind.svg); }
body[data-wall="territory"] { --wall: url(/img/wall/territory.svg); } body[data-wall="auction"] { --wall: url(/img/wall/auction.svg); }
body[data-wall="make24"] { --wall: url(/img/wall/make24.svg); } body[data-wall="order"] { --wall: url(/img/wall/order.svg); }
body[data-wall="photofinish"] { --wall: url(/img/wall/photofinish.svg); } body[data-wall="constraints"] { --wall: url(/img/wall/constraints.svg); }
body[data-wall="cocktail"] { --wall: url(/img/wall/cocktail.svg); }

/* Code Words */

.cw { padding: 10px 12px; max-width: 980px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.cw-top { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 2px 4px 0; }
.cw-status { min-width: 0; }
b.red, .cw-teams .red { color: var(--redtext); } b.blue, .cw-teams .blue { color: var(--bluetext); }

/* Agents left per team; the team on turn's tile is lifted and ringed. */
.cw-score { width: 54px; height: 58px; border-radius: 12px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 3px 0 #0003, inset 0 1px 0 #fff4; transition: transform .3s, box-shadow .3s; flex: none; }
.cw-score b { font-size: 1.75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cw-score small { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; opacity: .85; margin-top: 2px; }
.cw-score.red { background: linear-gradient(#ef6a62, #c8423b); } .cw-score.blue { background: linear-gradient(#64a2f0, #3474cc); }
.cw-score.on { transform: translateY(-2px) scale(1.06); }
.cw-score.on.red { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--redteam), 0 6px 16px #0005; }
.cw-score.on.blue { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--blueteam), 0 6px 16px #0005; }

/* The clue on turn: a paper tag with the word and a team-coloured number. */
.cw-clue { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.cw-clue-main { display: inline-flex; align-items: stretch; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 0 #0003, 0 6px 14px #0003; animation: cw-tag .5s cubic-bezier(.2, 1.5, .4, 1) both; max-width: 100%; }
.cw-clue-word { background: #fbf6e8; color: #1a1a1a; font-size: 1.375rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 5px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cw-clue-n { color: #fff; font-size: 1.375rem; font-weight: 900; padding: 5px 12px; display: flex; align-items: center; }
.cw-clue.red .cw-clue-n { background: var(--redteam); } .cw-clue.blue .cw-clue-n { background: var(--blueteam); }
.cw-clue-left { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--dim); font-weight: 600; }
.cw-clue-left i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cw-clue.red .cw-clue-left i { color: var(--redteam); } .cw-clue.blue .cw-clue-left i { color: var(--blueteam); }
.cw-clue-left span { margin-left: 4px; }
@keyframes cw-tag { from { transform: translateY(-14px) rotate(-6deg) scale(.8); opacity: 0; } }

/* The board: 25 paper cards on the desk. */
.cw-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; perspective: 900px; container-type: inline-size; }
.cwc { --paper: linear-gradient(#f8f3e6, #e7dfca); background: var(--paper); color: #1a1a1a; border-radius: 9px; min-height: 64px; padding: 6px 4px 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: relative; font-weight: 800; overflow: hidden; box-shadow: 0 2px 0 #0000002e, 0 4px 10px #0000002a, inset 0 0 0 1px #ffffff90; transition: transform .15s, box-shadow .15s, outline-color .15s; }
.cwc::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 4px; border-radius: 3px; background: transparent; }
.cwc:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 0 #0000002e, 0 8px 16px #00000033, inset 0 0 0 1px #fff; }
.cwc:not(:disabled):active { transform: translateY(1px); }
.cwc:disabled { opacity: 1; cursor: default; }
/* Long words shrink to fit the card instead of breaking (--n is the word length): a card is a fifth of the board less
   the gaps and its own padding, and the widest bold capitals (WOOD, MOON) are about .78 of the type size wide. */
.cw-word { position: relative; font-size: max(7.5px, min(clamp(11px, 2.4vw, 16px), calc(((100cqi - 28px) / 5 - 8px) / (var(--n, 6) * .8)))); hyphens: manual; text-transform: uppercase; letter-spacing: .3px; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
/* The smallest phones (320 px): a little more room in each card, so an eight-letter word stays on one line. */
@media (max-width: 359px) { .cwc { padding-inline: 2px; } .cw-word { letter-spacing: 0; } }
/* What the spymasters (and everyone at the end) see on closed cards. */
.cwc.key-red { --paper: linear-gradient(#fbe9e6, #f0cfca); } .cwc.key-red::after { background: var(--redteam); }
.cwc.key-blue { --paper: linear-gradient(#e7f0fc, #cadcf4); } .cwc.key-blue::after { background: var(--blueteam); }
.cwc.key-neutral::after { background: #c9b98f; }
.cwc.key-assassin { --paper: linear-gradient(#4a4a4a, #262626); color: #f2f2f2; } .cwc.key-assassin::after { background: #000; box-shadow: 0 0 0 1px #fff3; }
/* Turned over: the card shows who it was. */
.cwc.open { box-shadow: 0 1px 0 #0003, inset 0 0 0 1px #ffffff30; }
.cwc.open.red { --paper: linear-gradient(#ec625a, #c43e37); color: #fff; } .cwc.open.blue { --paper: linear-gradient(#5d9cee, #3070c8); color: #fff; }
.cwc.open.neutral { --paper: linear-gradient(#a39a85, #857c68); color: #f6f2e8; } .cwc.open.assassin { --paper: linear-gradient(#242424, #0b0b0b); color: #ff6b6b; }
.cwc.open .cw-word { opacity: .9; text-shadow: 0 1px 2px #0004; }
.cw-ico { position: absolute; inset: 0; display: grid; place-items: center; opacity: .22; pointer-events: none; }
.cw-ico svg { width: 70%; height: 82%; }
.cwc.open.assassin .cw-ico { opacity: .4; }
.cwc.just { animation: cw-flip .7s cubic-bezier(.3, 1.4, .5, 1) both; z-index: 1; }
@keyframes cw-flip { 0% { transform: rotateY(90deg) scale(1.15); filter: brightness(1.8); } 55% { transform: rotateY(-12deg) scale(1.12); } 100% { transform: none; } }
.cwc.marked { outline: 3px solid var(--gold); outline-offset: -1px; transform: translateY(-2px) rotate(-1.2deg); }
.cwc.eyed { outline: 2px dashed var(--gold); outline-offset: -2px; }
.cw-marks { display: flex; gap: 2px; position: absolute; top: 3px; right: 4px; }
.cw-marks i { font-style: normal; font-size: 0.625rem; background: #1a1a1a; color: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.cw .cw-board { padding: 6px; margin: -6px; border-radius: 14px; transition: box-shadow .4s, background-color .4s; }
.cw.turn-red .cw-board { box-shadow: 0 0 0 3px var(--redteam), 0 0 28px #e5534b55; } .cw.turn-blue .cw-board { box-shadow: 0 0 0 3px var(--blueteam), 0 0 28px #4a8fe755; }

.cw-bottom { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cw-bottom > p { margin: 0; }
/* Words this player marked, each with its own Reveal: kept in reach at the bottom of a phone screen while the board scrolls. */
.cw-reveal { position: sticky; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.cw-rv { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--lift); animation: cw-rv-in .22s ease-out; }
.cw-rv .primary { border-radius: 999px; }
.cw-rv .primary b { text-transform: uppercase; letter-spacing: .02em; }
.cw-unmark { width: 40px; height: 40px; }
@keyframes cw-rv-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .cw-rv { animation: none; } }
.clue-form { display: flex; gap: 8px; width: 100%; max-width: 520px; }
.clue-form .line { flex: 1; min-width: 0; }
.clue-form select { width: 70px; }
.cw-teams { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* Clues so far, as tags: the clue in the team's colour, then the words it found coloured by what they were. */
.cw-log { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
.cw-logchip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 9px 4px 4px; border-radius: 8px; background: var(--panel); font-size: 0.8125rem; box-shadow: 0 1px 0 #0002; }
.cw-logchip > b { color: #fff; padding: 1px 7px; border-radius: 5px; text-transform: uppercase; font-size: 0.75rem; letter-spacing: .4px; }
.cw-logchip.red > b { background: var(--redteam); } .cw-logchip.blue > b { background: var(--blueteam); }
.cw-dotw { display: inline-flex; align-items: center; gap: 3px; color: var(--dim); }
.cw-dotw::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #c9b98f; }
.cw-dotw.red::before { background: var(--redteam); } .cw-dotw.blue::before { background: var(--blueteam); } .cw-dotw.assassin::before { background: #000; box-shadow: 0 0 0 1px var(--dim); }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-col { border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 14px #0003; }
.team-col h3 { margin: 0; display: flex; justify-content: space-between; align-items: center; }
.team-col.red { background: var(--red-bg); border: 1px solid var(--red-line); border-top: 5px solid var(--redteam); } .team-col.blue { background: var(--blue-bg); border: 1px solid var(--blue-line); border-top: 5px solid var(--blueteam); }
.cw-count { font-size: 0.875rem; min-width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; color: #fff; }
.team-col.red .cw-count { background: var(--redteam); } .team-col.blue .cw-count { background: var(--blueteam); }
.cw-spy-pill { background: #1a1a1a; color: #fff; }
.small-board .cwc { min-height: 44px; }
.cw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #111; box-shadow: 0 0 0 1px var(--dim); vertical-align: -1px; }

/* The team on turn: a bar in its colour that drains with the timer. */
.cw-timer { position: relative; overflow: hidden; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px;
  color: #fff; font-weight: 800; text-shadow: 0 1px 2px #0004; transition: background-color .4s; box-shadow: 0 3px 10px #0003; }
.cw-timer.red { background: #8f2f2a; } .cw-timer.blue { background: #2a5596; }
.cw-timer-fill { position: absolute; inset: 0 auto 0 0; transition: width .25s linear, background-color .4s; }
.cw-timer.red .cw-timer-fill { background: var(--redteam); } .cw-timer.blue .cw-timer-fill { background: var(--blueteam); }
.cw-timer > span, .cw-timer > b { position: relative; }
.cw-timer > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cw-timer > b { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.cw-timer.low > b { animation: cw-throb 1s ease-in-out infinite; }
@keyframes cw-throb { 50% { transform: scale(1.18); } }

/* Turn change: the whole screen in the new team's colour for a moment. --age keeps it in step when it mounts late. */
.cw-splash { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px 16px;
  color: #fff; text-align: center; cursor: pointer; animation: cw-splash 2.4s ease both; animation-delay: var(--age); }
.cw-splash.red { background: radial-gradient(circle at 50% 45%, #f0736b, var(--redteam) 45%, #a82f29); }
.cw-splash.blue { background: radial-gradient(circle at 50% 45%, #6fa8f0, var(--blueteam) 45%, #2a5fae); }
.cw-splash-why { font-size: 1.0625rem; font-weight: 700; opacity: .92; animation: res-in .4s .15s both; }
.cw-splash-team { font-size: clamp(5.25rem, 28vw, 13.75rem); font-weight: 900; line-height: .9; letter-spacing: -2px; text-transform: uppercase; text-shadow: 0 6px 0 #0003; animation: cw-slam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.cw-splash-turn { font-size: clamp(1.5rem, 7vw, 2.75rem); font-weight: 900; text-transform: uppercase; letter-spacing: 3px; animation: res-in .4s .25s both; }
.cw-splash-you { margin-top: 18px; padding: 8px 16px; border-radius: 99px; background: #0003; color: #fff; font-weight: 800; font-size: 1.0625rem; animation: res-in .4s .4s both; }
.cw-splash-you.mine { background: #fff; color: #1a1a1a; animation: res-in .4s .4s both, cw-throb 1s .9s ease-in-out 2; }
.cw-chip { display: inline-block; padding: 1px 9px; border-radius: 6px; font-weight: 900; text-transform: uppercase; background: #e9e4d4; color: #1a1a1a; border: 2px solid #fff; }
.cw-chip.red { background: var(--redteam); color: #fff; } .cw-chip.blue { background: var(--blueteam); color: #fff; } .cw-chip.neutral { background: #8c8471; color: #f2f2f2; }
@keyframes cw-splash { 0% { clip-path: circle(0% at 50% 50%); } 18% { clip-path: circle(75% at 50% 50%); } 85% { opacity: 1; } 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } }
@keyframes cw-slam { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cw-fade { 85% { opacity: 1; } to { opacity: 0; } }

/* A clue given: the spymaster's card drops onto everyone's screen. */
.cw-cluesplash { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; cursor: pointer;
  background: #0b1020b8; backdrop-filter: blur(3px); animation: cw-fade 2.6s ease both; }
.cw-cluecard { position: relative; width: min(340px, 86vw); background: linear-gradient(#fdf8ea, #efe5cc); color: #1a1a1a; border-radius: 14px; padding: 0 18px 22px; text-align: center;
  box-shadow: 0 18px 50px #0008, inset 0 0 0 1px #fff; animation: cw-drop .6s cubic-bezier(.2, 1.4, .4, 1) both; transform: rotate(-2.5deg); }
.cw-cluecard-from { margin: 0 -18px 16px; padding: 9px 12px; border-radius: 14px 14px 0 0; color: #fff; font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1.5px; }
.cw-cluesplash.red .cw-cluecard-from { background: var(--redteam); } .cw-cluesplash.blue .cw-cluecard-from { background: var(--blueteam); }
.cw-cluecard-word { font-size: min(56px, calc(min(300px, 78vw) / (var(--n, 6) * .72))); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; word-break: break-word; }
.cw-cluecard-n { position: absolute; top: -20px; right: -18px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 2rem; font-weight: 900;
  border: 4px solid #fff; box-shadow: 0 6px 16px #0006; animation: cw-stamp .45s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.cw-cluesplash.red .cw-cluecard-n { background: var(--redteam); } .cw-cluesplash.blue .cw-cluecard-n { background: var(--blueteam); }
.cw-cluesplash .cw-splash-you { margin-top: 14px; }
@keyframes cw-drop { from { transform: translateY(-60vh) rotate(-18deg); } }
@keyframes cw-stamp { from { transform: scale(2.6) rotate(-30deg); opacity: 0; } }

/* The end: the deciding card, then the winners, before the results. */
.cw.finale-black .cw-board { animation: cw-quake .55s .3s both; }
@keyframes cw-quake { 15%, 55% { transform: translate(-7px, 3px) rotate(-.6deg); } 35%, 75% { transform: translate(7px, -3px) rotate(.6deg); } }
.cw-finale { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px 16px; color: #fff; text-align: center; overflow: hidden; }
.cw-finale::before { content: ''; position: absolute; inset: 0; z-index: -1; animation: cw-sweep .7s .9s cubic-bezier(.5, 0, .2, 1) both; }
.cw-finale.red::before { background: radial-gradient(circle at 50% 42%, #f47c74, var(--redteam) 42%, #8f2721); }
.cw-finale.blue::before { background: radial-gradient(circle at 50% 42%, #78b0f4, var(--blueteam) 42%, #214f94); }
.cw-finale.black::before { background: radial-gradient(circle at 50% 40%, #4a1210, #120404 55%, #000); }
.cw-finale.black::after { content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none; animation: cw-flash .5s .85s both; }
.cw-finale-card { position: relative; width: min(220px, 60vw); padding: 26px 14px; border-radius: 14px; font-size: 1.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; overflow: hidden; word-break: break-word;
  box-shadow: 0 20px 50px #0009, inset 0 0 0 2px #ffffff55; animation: cw-cardin .7s 1.05s cubic-bezier(.2, 1.4, .4, 1) both; transform: rotate(-4deg); }
.cw-finale-card span:last-child { position: relative; }
.cw-finale-card.red { background: linear-gradient(#ec625a, #c43e37); } .cw-finale-card.blue { background: linear-gradient(#5d9cee, #3070c8); }
.cw-finale-card.assassin { background: linear-gradient(#262626, #050505); color: #ff6b6b; box-shadow: 0 0 0 3px #ff6b6b66, 0 0 60px #ff3b3088, 0 20px 50px #000; }
.cw-finale-card .cw-ico { opacity: .3; }
.cw-finale-boom { font-size: clamp(3.5rem, 18vw, 7.5rem); font-weight: 900; line-height: 1; color: #ffd43b; text-transform: uppercase; letter-spacing: -1px; margin-top: -18px;
  text-shadow: 0 0 0 #000, 4px 4px 0 #e8590c, 8px 8px 0 #0008; animation: cw-boom .6s 1.35s cubic-bezier(.2, 1.8, .4, 1) both; transform: rotate(-7deg); }
.cw-finale-why { margin-top: 14px; font-size: 1.125rem; font-weight: 800; opacity: .95; animation: res-in .4s 1.6s both; }
.cw-finale-team { font-size: clamp(4.75rem, 25vw, 12.5rem); font-weight: 900; line-height: .9; letter-spacing: -2px; text-transform: uppercase; text-shadow: 0 6px 0 #0003; animation: cw-slam .6s 1.9s cubic-bezier(.2, 1.6, .4, 1) both; }
.cw-finale.black .cw-finale-team { color: var(--team); }
.cw-finale.black.red { --team: #ff6f66; } .cw-finale.black.blue { --team: #79b0ff; }
.cw-finale-wins { font-size: clamp(1.75rem, 8vw, 3.25rem); font-weight: 900; text-transform: uppercase; letter-spacing: 4px; animation: res-in .4s 2.2s both; }
.cw-finale .cw-splash-you { animation: res-in .4s 2.5s both; }
.cw-finale.black .cw-splash-you:not(.mine) { background: #ffffff24; }
.cw-finale .cw-splash-you.mine { animation: res-in .4s 2.5s both, cw-throb 1s 3s ease-in-out 2; }
@keyframes cw-sweep { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes cw-flash { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cw-cardin { from { transform: translateY(40vh) rotate(-30deg) scale(.4); opacity: 0; } }
@keyframes cw-boom { from { transform: scale(3) rotate(-25deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cw-splash, .cw-cluesplash { animation-name: cw-fade; }
  .cw-splash > *, .cw-cluesplash *, .cw-finale *, .cw-finale::before, .cw-finale::after, .cwc.just, .cw.finale-black .cw-board, .cw-clue-main { animation: none !important; }
  .cw-finale.black::after { display: none; }
  .cw-timer.low > b { animation: none; }
}
@media (min-aspect-ratio: 3/2) and (max-height: 500px) {
  .cw-splash-team, .cw-finale-team { font-size: 26vh; } .cw-splash-you { margin-top: 8px; }
  .cw-finale-card { padding: 12px; font-size: 1.25rem; } .cw-finale-boom { font-size: 16vh; margin-top: -8px; } .cw-finale-why { margin-top: 4px; }
  /* Phone on its side: scores, timer and the clue box on the left, the whole board on the right without scrolling. */
  .cw:has(> .cw-board) { display: grid; grid-template-columns: minmax(190px, 32%) 1fr; grid-template-rows: auto auto 1fr; align-items: start; column-gap: 14px; }
  .cw:has(> .cw-board) > .cw-top { grid-area: 1 / 1; flex-wrap: wrap; justify-content: space-between; }
  .cw:has(> .cw-board) > .cw-top > .grow { order: 3; flex-basis: 100%; font-size: 0.9375rem; }
  .cw:has(> .cw-board) > .cw-timer { grid-area: 2 / 1; }
  .cw:has(> .cw-board) > .cw-bottom { grid-area: 3 / 1; }
  .cw:has(> .cw-board) > .cw-board { grid-area: 1 / 2 / 4 / 3; margin: 0; }
  .cw:has(> .cw-board) .cwc { min-height: max(44px, calc((var(--vvh, 100dvh) - var(--bar-h) - 58px) / 5)); }
  .cw .clue-form { flex-wrap: wrap; } .cw .clue-form .line { flex: 1 1 100%; }
  .cw:has(> .cw-board) .cw-word { font-size: min(0.9375rem, 1.7vw); }
}

/* Draw & Guess */
.draw-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); padding: var(--pad) var(--pad) 24px; max-width: 1200px; width: 100%; margin: 0 auto; }
.draw-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.draw-side { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border-radius: 22px; padding: 12px; max-height: calc(100dvh - 80px); position: sticky; top: 72px; box-shadow: var(--shadow); }
.hint { text-align: center; min-height: 40px; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hint b { font-family: var(--display); font-weight: 800; letter-spacing: .04em; }
/* While a word is being picked there is nothing to show yet: no empty row above the drawing. */
.hint:empty { display: none; }
@media (max-width: 860px) { .draw-side .feed { min-height: 96px; } }
.letters { display: inline-flex; gap: 6px; }
.letters i { font-style: normal; width: 22px; border-bottom: 3px solid var(--text); font-family: var(--display); font-weight: 800; text-transform: uppercase; display: inline-block; text-align: center; line-height: 1.3; }
.letters i.sp { border: 0; }
.choose { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.canvas { display: flex; flex-direction: column; gap: 10px; }
/* On a wide screen the drawing, its colours and its pens all fit under the top bar without scrolling (a laptop's
   720 px lost the pens below the edge). The drawer's tools take about 90 px more than a guesser's box. */
.canvas canvas { width: 100%; max-height: calc(100dvh - 300px); aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 16px; touch-action: none; display: block; margin: 0 auto; max-width: calc((100dvh - 300px) * 4 / 3); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
@media (min-width: 861px) and (min-height: 501px) { .canvas:has(.tools) canvas { max-height: calc(100dvh - 330px); max-width: calc((100dvh - 330px) * 4 / 3); } }
.canvas canvas.edit { cursor: crosshair; }
.canvas canvas.edit.bucket { cursor: cell; }
.canvas.small canvas { max-height: 300px; max-width: 400px; }
.tools { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tools > .row { justify-content: center; }
.inks { display: grid; grid-template-columns: repeat(16, 1fr); gap: 6px; width: 100%; max-width: 560px; }
.ink { aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 10px; border: 2px solid var(--line); min-width: 0; }
.ink.sel { border-color: var(--text); transform: scale(1.12); }
.pen { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; background: var(--panel); box-shadow: var(--shadow); }
.pen i { background: var(--text); border-radius: 50%; display: block; }
.pen.sel { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel); }
.turn-pts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-weight: 700; }
.feed { flex: 1; overflow-y: auto; min-height: 150px; font-size: 0.875rem; line-height: 1.4; background: var(--panel2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.feed > :first-child { margin-top: auto; }
.fl { word-wrap: break-word; }
.fl.got { color: var(--ok); font-weight: 700; }
.fl.close { color: var(--goldtext); font-weight: 600; }
.fl.inside { color: var(--inside); }
.draw-side .answer .line { --h: 48px; font-size: 1rem; }
.draw-side .answer button { min-height: 48px; padding: 0 18px; font-size: 0.9375rem; }

/* Telephone */
.tele { padding: 12px 14px 24px; max-width: 860px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tele .prompt { font-size: clamp(1.125rem, 3.4vw, 1.625rem); font-weight: 800; padding: 16px; border-radius: 20px; }
.book { display: flex; flex-direction: column; gap: 14px; }
.entry { background: var(--panel); border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: var(--shadow); }
.entry-by { align-self: flex-start; display: flex; align-items: center; gap: 8px; }
.entry-text { font-family: var(--display); font-size: 1.375rem; font-weight: 700; text-align: center; line-height: 1.3; }
.like { align-self: flex-end; background: var(--panel2); }
.like.on { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel); }

/* Phones */
@media (max-width: 860px) {
  .play2, .draw-wrap { grid-template-columns: 1fr; padding: 8px 10px; }
  .pside { order: 2; }
  .draw-side { position: static; max-height: none; }
  .draw-side .scores { display: none; }
  .feed { max-height: 22dvh; }
  .chat { position: fixed; inset: var(--bar-h) 0 0 auto; width: min(360px, 92vw); height: auto; z-index: 20; box-shadow: -16px 0 40px rgb(0 0 0 / .22); }
  .dna { grid-template-columns: repeat(2, 1fr); }
  .wordle { grid-template-columns: 1fr; padding: 4px 8px 0; gap: 4px; }
  .wordle .side { order: -1; max-height: 17dvh; padding: 2px 10px; }
  .stand li { padding: 3px 2px; grid-template-columns: 22px 1fr auto auto; }
  .stand .prog { grid-column: auto; }
  .board { width: min(330px, 78vw, calc((100dvh - 450px) * 5 / 6)); min-width: 170px; gap: 4px; }
  .brow { gap: 4px; }
  .k { height: 50px; }
  .choices { grid-template-columns: 1fr; }
  .choices .choice { min-height: 52px; padding: 10px 12px; }
  .canvas canvas { max-height: none; max-width: 100%; }
  .inks { grid-template-columns: repeat(8, 1fr); }
  .cname { width: 80px; }
  .cwc { min-height: 54px; }
}
/* Typing a guess under a drawing on a phone: the drawing shrinks to fit above the keyboard with the hint, two lines
   of guesses and the box; the top bar scrolls away instead of covering it. */
@media (max-width: 860px) {
  .room:has(.game-area .canvas):has(.answer .line:focus) .bar { position: static; }
  .game-area:has(.answer .line:focus) .canvas canvas { max-height: calc(var(--vvh, 100dvh) - 176px); max-width: min(100%, calc((var(--vvh, 100dvh) - 176px) * 4 / 3)); width: auto; }
  .game-area:has(.answer .line:focus) .feed { max-height: 2.9em; min-height: 0; }
  .game-area:has(.answer .line:focus) .hint { min-height: 0; font-size: 1.0625rem; }
  .game-area:has(.answer .line:focus) .draw-main, .game-area:has(.answer .line:focus) .draw-wrap { gap: 6px; }
}
@media (max-width: 420px) {
  .teams { grid-template-columns: 1fr; }
  .wgrid { gap: 6px; }
}

/* The top bar of the site's pages, and the footer */
.site-nav { background: var(--bg); }
.sn { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 44px; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
/* The mark: a c and a t whose foot curls into a tail (the same drawing as the icons). */
.mark { width: 30px; height: 30px; display: block; flex: none; fill: none; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }
.mark .mk-c { stroke: var(--text); }
.mark .mk-t { stroke: var(--brand-red); }
.brand .wm { font-weight: 500; }
.brand .wm b { font-weight: 800; color: var(--brand-red); }
.site-nav nav { display: flex; align-items: center; gap: 4px; }
.site-nav nav a { height: 44px; padding: 0 12px; display: flex; align-items: center; border-radius: 22px; color: var(--text); text-decoration: none; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.site-nav nav a:hover { background: var(--soft); }
.site-nav nav a[aria-current="page"] { background: var(--panel); box-shadow: var(--shadow); }
/* Light/dark switch: the icon shows the mode it switches to. */
@media (max-width: 360px) { .sn { padding: 12px; gap: 6px; } .brand { font-size: 0.9375rem; gap: 8px; } .site-nav nav { gap: 6px; } .site-nav nav a { padding: 0 8px; } }
.theme-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 22px; background: var(--raise); color: var(--text); display: inline-grid; place-items: center; flex: none; box-shadow: var(--shadow); }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; }
.theme-btn .sun, :root[data-theme="light"] .theme-btn .moon { display: block; }
.theme-btn .moon, :root[data-theme="light"] .theme-btn .sun { display: none; }
.foot { background: var(--bg); color: var(--dim); }
.foot-in { max-width: 1200px; margin: 40px auto 0; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--line); }
.foot-games { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.foot-games a { min-height: 44px; padding: 0 14px; display: flex; align-items: center; border-radius: 22px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 0.8125rem; font-weight: 600; }
.foot-games a:hover { background: var(--soft); }
.foot p { margin: 0; font-size: 0.8125rem; line-height: 1.6; max-width: 820px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.875rem; font-weight: 600; }
.foot-links a { color: var(--text); min-height: 44px; display: flex; align-items: center; }

/* Guide pages, and the home page's guide */
.doc { width: 100%; max-width: 860px; margin: 0 auto; padding: 4px 16px 8px; font-size: 1.0625rem; line-height: 1.65; }
.doc.wide-doc { max-width: 1200px; }
.doc > * { margin-top: 0; }
.crumbs { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.4; color: var(--dim); }
.crumbs a { color: var(--dim); display: inline-block; padding: 6px 0; }
.doc h1 { font-size: clamp(1.625rem, 4.4vw, 2.625rem); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 14px; text-wrap: balance; }
.doc.wide-doc h1 { font-size: clamp(1.75rem, 4.4vw, 2.875rem); line-height: 1.08; }
.doc h2 { font-size: 1.375rem; line-height: 1.25; margin: 36px 0 12px; }
.doc h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.doc .lead { font-size: 1.125rem; margin: 0 0 16px; max-width: 680px; }
.doc p, .doc li { color: var(--lead); }
.doc p b, .doc li b { color: var(--text); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc table { font-size: 0.9375rem; line-height: 1.45; border-collapse: separate; border-spacing: 0; width: 100%; background: var(--panel); border-radius: 20px; box-shadow: var(--shadow); }
.doc .scroll { border-radius: 20px; }
.doc .scroll table { min-width: 520px; }
.doc td, .doc th { white-space: normal; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: left; color: var(--lead); }
.doc th { color: var(--dim); font-weight: 600; }
.doc tr:last-child td { border-bottom: 0; }
.doc td:first-child { color: var(--text); font-weight: 700; }
.doc code { background: var(--panel2); padding: 1px 6px; border-radius: 6px; font-size: 0.875rem; color: var(--text); }
.doc-title { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.doc-title h1 { margin: 0; min-width: 0; font-size: clamp(1.5rem, 4.2vw, 2.5rem); }
/* Numbered steps as cards. */
.doc ol.steps, .doc .how, .how { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: st; }
.doc ol.steps > li { counter-increment: st; position: relative; margin: 0; padding: 14px 16px 14px 60px; min-height: 58px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); font-size: 1rem; line-height: 1.55; color: var(--text); }
.doc ol.steps > li::before { position: absolute; left: 16px; top: 14px; }
.doc ol.steps > li::before, .how > li::before { content: counter(st); flex: none; width: 30px; height: 30px; border-radius: 15px; background: var(--btn); color: var(--on-btn); display: grid; place-items: center; font-family: var(--display); font-size: 0.8125rem; font-weight: 800; line-height: 1; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.how > li { counter-increment: st; margin: 0; padding: 18px 20px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.how > li::before { width: 32px; height: 32px; font-size: 0.875rem; margin-bottom: 4px; }
.how b { font-size: 1.0625rem; color: var(--text); }
.how span { font-size: 0.9375rem; line-height: 1.5; color: var(--lead); }
.how-more { margin: 14px 2px 0; font-size: 0.9375rem; color: var(--lead); }
.doc #faq .faq-intro p { max-width: none; }
.home-doc { max-width: 1200px; padding-top: 36px; }
.home-doc h2 { font-size: 1.5rem; letter-spacing: -.03em; margin: 12px 0 14px; }
.home-doc section + section { margin-top: 36px; max-width: 820px; }
/* Questions: a heading with a line of help beside (above, on a phone) a list of cards that open one answer each.
   The round button turns its plus into a cross and fills in when the answer is open. */
.faq-sec { display: grid; gap: 4px 56px; }
.faq-intro p { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.55; color: var(--lead); max-width: 34ch; }
@media (min-width: 900px) {
  .home-doc section.faq-sec { max-width: none; grid-template-columns: minmax(240px, 320px) 1fr; }
  .faq-intro { position: sticky; top: 24px; align-self: start; }
}
.faq-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
details.faq { border: 0; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); padding: 0; margin: 0; transition: box-shadow .2s; }
details.faq[open] { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); }
details.faq summary { list-style: none; cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 20px; border-radius: 20px;
  font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--text); -webkit-tap-highlight-color: transparent; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), background-color .2s;
  background: linear-gradient(var(--text), var(--text)) center / 12px 2px no-repeat, linear-gradient(var(--text), var(--text)) center / 2px 12px no-repeat, var(--soft); }
details.faq summary:hover::after { background-color: var(--line); }
details.faq[open] summary::after { transform: rotate(135deg);
  background: linear-gradient(var(--on-btn), var(--on-btn)) center / 12px 2px no-repeat, linear-gradient(var(--on-btn), var(--on-btn)) center / 2px 12px no-repeat, var(--btn); }
details.faq p { margin: 0; padding: 0 64px 20px 20px; font-size: 0.9688rem; line-height: 1.6; color: var(--lead); max-width: 72ch; animation: faq-in .28s ease-out; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) { details.faq summary { font-size: 0.9688rem; padding-left: 16px; } details.faq p { padding: 0 16px 18px; } }
@media (prefers-reduced-motion: reduce) { details.faq summary::after, details.faq { transition: none; } details.faq p { animation: none; } }
.doc .facts, .facts { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.facts > li { margin: 0; padding: 14px 16px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.facts b { font-family: var(--display); font-size: 1.125rem; font-weight: 800; color: var(--text); }
.facts span { color: var(--dim); font-size: 0.8125rem; }
@media (max-width: 560px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.settings { border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); padding: 4px 16px; }
.settings > div { padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-bottom: 1px solid var(--rule); line-height: 1.35; }
.settings > div:last-child { border-bottom: 0; }
.settings b { flex: 0 0 160px; font-size: 0.9375rem; }
.settings > div > span { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 6px; }
.settings i { font-style: normal; min-height: 32px; padding: 4px 12px; border-radius: 16px; background: var(--panel2); color: var(--text); font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; }
.settings i.on { background: var(--btn); color: var(--on-btn); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dna-doc { border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); padding: 8px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); column-gap: 32px; margin: 12px 0; }
.dna-doc > div { min-height: 44px; display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; }
.dna-doc > div > span:first-child { flex: 1; font-weight: 600; color: var(--text); }
.dna-doc b { width: 30px; text-align: right; font-size: 0.875rem; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 18px; height: 8px; border-radius: 4px; background: var(--soft); }
.dots i.on { background: var(--sel); }
/* Games as link cards. */
.doc .glist, .glist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.glist > li { display: flex; margin: 0; }
a.gl { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); text-decoration: none; display: flex; gap: 14px; align-items: flex-start; transition: transform .15s, box-shadow .15s; }
a.gl:hover { transform: translateY(-2px); box-shadow: var(--lift); }
a.gl .gicon { width: 48px; height: 48px; }
.gl-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.gl-text b { font-family: var(--display); font-size: 0.9375rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.gl-text > span { font-size: 0.875rem; color: var(--lead); }
.gl-text .gl-facts { font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { a.gl { transition: none; } a.gl:hover { transform: none; } }
h2.kind { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 32px 0 12px; }
h2.kind::before { content: ''; width: 14px; height: 18px; border-radius: 4px; background: var(--k); flex: none; }
.cta { margin: 20px 0 8px; display: flex; gap: 10px; flex-wrap: wrap; }
a.button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 26px; background: var(--btn); color: var(--on-btn); text-decoration: none; font-size: 1rem; font-weight: 700; line-height: 1.2; }
a.button.alt { background: var(--raise); color: var(--text); box-shadow: var(--shadow); padding: 0 22px; }
a.button:hover { filter: brightness(1.1); }
:root[data-theme="light"] a.button.alt:hover { filter: brightness(.97); }
.steps li { margin: 8px 0; }
details { border-bottom: 1px solid var(--rule); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; padding: 11px 0; }
details p { margin: 8px 0 2px; color: var(--lead); }
.ex { display: flex; gap: 6px; margin: 10px 0; }
.ex span { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.375rem; color: #fff; }
.ex .t2 { background: var(--green); } .ex .t1 { background: var(--yellow); color: #15161a; } .ex .t0 { background: var(--gray); }
b.g { color: var(--ok); } b.y { color: var(--goldtext); }
.more { display: flex; gap: 10px 18px; flex-wrap: wrap; margin: 28px 0 8px; }
/* Page not found */
.doc.lost { max-width: 560px; padding-top: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.doc.lost .cta { justify-content: center; }
.lost-art { position: relative; width: 180px; height: 170px; }
.lost-art i { position: absolute; border-radius: 18px; box-shadow: var(--shadow); }
.lost-art i:first-child { left: 22px; top: 18px; width: 100px; height: 136px; background: var(--panel); transform: rotate(-12deg); }
.lost-art i:last-child { left: 58px; top: 8px; width: 104px; height: 142px; background: var(--btn); transform: rotate(8deg); color: var(--on-btn); font-style: normal; font-family: var(--display); font-size: 2.75rem; font-weight: 800;
  display: grid; place-items: center; outline: 2px dashed color-mix(in srgb, var(--on-btn) 40%, transparent); outline-offset: -16px; }

.tele .canvas canvas { max-height: calc(100dvh - 340px); max-width: calc((100dvh - 340px) * 4 / 3); }
/* Drawing in Telephone: the prompt above and Done below as well. */
@media (min-width: 861px) and (min-height: 501px) { .tele .canvas:has(.tools) canvas { max-height: max(220px, calc(100dvh - 430px)); max-width: calc(max(220px, calc(100dvh - 430px)) * 4 / 3); } }
@media (max-width: 860px) { .tele .canvas canvas { max-height: none; max-width: 100%; } }

/* Stop the Clock */
.sw-target { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sw-target .small { font-size: 0.875rem; }
.sw-target b { font-family: var(--display); font-size: clamp(1.5rem, 5vw, 1.875rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.sw-face { min-height: clamp(180px, 26vw, 240px); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: clamp(3.5rem, 16vw, 7rem); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--panel); border-radius: 28px; padding: 10px; line-height: 1.1; box-shadow: var(--shadow); }
.sw-face.shown { color: var(--goldtext); }
.sw-count { color: var(--goldtext); }
.sw-hidden { display: inline-flex; align-items: center; gap: 18px; }
.sw-dots { display: inline-flex; gap: 10px; }
.sw-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--text); animation: sw-pulse 1.2s infinite ease-in-out; }
.sw-dots i:nth-child(2) { animation-delay: .2s; } .sw-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes sw-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sw-dots i { animation: none; } .sw-dots i:nth-child(2) { opacity: .55; } .sw-dots i:nth-child(3) { opacity: .25; } }
.sw-off { font-size: 1.125rem; }
.sw-btn { width: 100%; min-height: 104px; padding: 0 16px; font-family: var(--display); font-size: 1.875rem; font-weight: 800; background: var(--btn); color: var(--on-btn); border-radius: 28px; letter-spacing: .06em; touch-action: manipulation; user-select: none; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .2); }
.sw-btn.stop { background: #e5383b; color: #fff; }
.sw-btn:disabled { background: var(--btn2); color: var(--dim); opacity: 1; letter-spacing: 0; font-size: 1.25rem; box-shadow: none; }
.sw-res td { vertical-align: middle; }

/* 24 Game */
.m24 { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.m24-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding-top: 10px; }
.m24-card { width: 96px; height: 128px; min-height: 0; border-radius: 20px; background: var(--panel); box-shadow: 0 4px 0 var(--key); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; transition: transform .15s; }
:root:not([data-theme="light"]) .m24-card { box-shadow: 0 4px 0 #0b0c10; }
.m24-card.made { background: var(--tint-blue); }
.m24-card.sel, :root:not([data-theme="light"]) .m24-card.sel { box-shadow: inset 0 0 0 3px var(--sel), 0 8px 18px rgb(51 85 255 / .25); transform: translateY(-6px); }
.m24-n { font-family: var(--display); font-size: 2.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.m24-from { font-size: 0.75rem; color: var(--dim); text-align: center; font-weight: 600; }
.m24-ops { display: flex; gap: 10px; }
.m24-op { width: 60px; height: 60px; min-height: 0; padding: 0; font-family: var(--display); font-size: 1.625rem; font-weight: 700; border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }
.m24-op.sel { background: var(--sel); color: var(--on-sel); }
@media (prefers-reduced-motion: reduce) { .m24-card { transition: none; } }

/* Mastermind */
.mm-board { display: flex; flex-direction: column; gap: 8px; align-items: center; background: var(--panel); border-radius: 24px; padding: 16px 12px; box-shadow: var(--shadow); }
.mm-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.mm-row.cur { padding: 8px 10px; border-radius: 22px; background: var(--panel2); }
.mm-peg { width: 44px; height: 44px; min-height: 0; border-radius: 50%; border: 0; color: #fff; font-weight: 800; font-size: 0.875rem; padding: 0; text-shadow: 0 1px 1px rgb(0 0 0 / .5); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22); }
.mm-peg.sm { width: 32px; height: 32px; font-size: 0.6875rem; }
.mm-peg.empty { background: var(--btn2); border: 2px dashed var(--line); box-shadow: none; }
.mm-peg:disabled { opacity: 1; cursor: default; }
.mm-palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mm-palette .mm-peg { width: 48px; height: 48px; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .22); }
.mm-marks { display: grid; grid-template-columns: repeat(var(--cols, 2), 10px); gap: 3px; }
.mm-marks i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); }
.mm-marks i.x { background: var(--text); border-color: var(--text); }
.mm-marks i.n { border-color: var(--text); }
.mm-says { min-width: 60px; }
.mm-build { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 6px; }
.mm-build .primary { min-height: 44px; }

/* Territory: the map fits the screen while its squares stay big enough to tap (32 px); a bigger map scrolls sideways. */
.tt-frame { width: min(100%, 560px); margin: 0 auto; padding: 6px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); overflow-x: auto; overscroll-behavior-x: contain; }
/* Squares shrink to fit the screen's width (an 18 × 18 map fits a 360 px phone); only a narrower screen scrolls. */
.tt-grid { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: 2px; width: max(100%, calc(var(--w) * 16px + (var(--w) - 1) * 2px)); aspect-ratio: 1; }
.tt-cell { padding: 0; min-height: 0; border-radius: 4px; background: var(--soft); border: 0; min-width: 0; font-size: 0.75rem; font-weight: 900; color: #c92a2a; }
.tt-cell.rock { background: repeating-linear-gradient(45deg, var(--line) 0 3px, var(--panel2) 3px 6px); }
.tt-cell.owned { background: var(--c); }
.tt-cell.owned.me { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6); }
.tt-cell.can { background: var(--soft); box-shadow: inset 0 0 0 2px var(--text); cursor: pointer; animation: tt-glow 1.6s ease-in-out infinite; }
.tt-cell.can:hover { background: var(--panel2); }
@keyframes tt-glow { 50% { box-shadow: inset 0 0 0 2px var(--dim); } }
@media (prefers-reduced-motion: reduce) { .tt-cell.can { animation: none; } }
.tt-cell.picked { background: var(--text); box-shadow: none; animation: none; }
.tt-cell.new { animation: tt-pop .5s ease-out; }
.tt-cell.walled { animation: tt-pop .8s ease-out; }
.tt-cell.clash { outline: 3px solid #ffc83d; outline-offset: -3px; position: relative; z-index: 1; }
.tt-cell:disabled { opacity: 1; cursor: default; }
@keyframes tt-pop { from { transform: scale(.6); filter: brightness(1.6); } }
.tt-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); vertical-align: middle; }

/* Auction */
.au-lot { background: var(--panel); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; box-shadow: var(--shadow); font-size: 0.875rem; }
.au-lot .chip { min-height: 22px; padding: 0 10px; border-radius: 11px; background: var(--panel2); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; }
.au-lot.big { border-radius: 24px; padding: 20px 18px; align-items: center; text-align: center; gap: 8px; box-shadow: inset 0 0 0 2px var(--gold), var(--shadow); font-size: 1rem; }
.au-lot.big .chip { min-height: 26px; font-size: 0.8125rem; padding: 0 12px; border-radius: 13px; }
.au-name { font-weight: 800; line-height: 1.3; }
.au-lot.big .au-name { font-family: var(--display); font-size: clamp(1.1875rem, 4vw, 1.625rem); font-weight: 700; letter-spacing: -.01em; }
.au-pts { color: var(--dim); }
.au-pts b { font-family: var(--display); font-size: 1.25rem; color: var(--goldtext); }
.au-bid { display: flex; text-align: center; gap: 10px; }
.au-bid > div { flex: 1; border-radius: 20px; background: var(--panel); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--shadow); }
.au-bid > .au-wallet { background: var(--panel2); box-shadow: none; }
.au-bid .big-num { color: var(--text); font-size: 1.875rem; }
.au-bid .big-num .small { font-family: var(--font); font-size: 0.875rem; font-weight: 600; }
.au-raise { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.au-raise > button { min-width: 72px; min-height: 52px; font-family: var(--display); font-size: 1.0625rem; }
.au-custom { display: flex; gap: 6px; }
.au-custom .line { --h: 52px; width: 96px; }
.au-custom button { min-height: 52px; }
.au-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; text-align: center; }
.au-log li:nth-child(2) { opacity: .75; } .au-log li:nth-child(n+3) { opacity: .5; }
.au-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.au-coll { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 0.8125rem; }
.au-rules { border: 0; padding: 0; }
.au-rules summary { min-height: 44px; padding: 0; display: flex; align-items: center; color: var(--dim); font-size: 0.8125rem; }

/* Connections */
.cn { display: flex; flex-direction: column; gap: 8px; }
.cn-grid { --len: 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; container-type: inline-size; }
.cn-word { min-height: clamp(64px, 9vw, 84px); padding: 6px; border-radius: 16px; background: var(--panel); box-shadow: 0 3px 0 var(--key); font-family: var(--display); font-weight: 700; font-size: clamp(0.625rem, 2.6vw, 0.9375rem); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
/* A long word gets smaller letters rather than breaking in the middle (SHINCHA-N). --fit is a tile's width less its
   padding, over how wide a capital of this type is (.92 of its size): the type size that fits one letter. The whole
   word (--whole letters) on one line when that is at least 10.5px; otherwise the word takes its soft breaks
   (connections.js) and is sized by its longest piece (--len), up to 10.5px. */
.cn-word { hyphens: manual; }
@supports (width: 1cqi) {
  .cn-word { --fit: calc(((100cqi - 24px) / 4 - 14px) / .92); font-size: clamp(8px, max(calc(var(--fit) / var(--whole, 6)), min(10.5px, calc(var(--fit) / var(--len, 6)))), 15px); overflow-wrap: normal; word-break: keep-all; }
}
.unit-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; }
:root:not([data-theme="light"]) .cn-word { background: #2a2d36; box-shadow: 0 3px 0 #0b0c10; }
.cn-word.sel, :root:not([data-theme="light"]) .cn-word.sel { background: var(--text); color: var(--bg); box-shadow: none; }
.cn-word:disabled { opacity: 1; }
.cn-group { border-radius: 16px; min-height: 64px; padding: 8px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: #15161a; }
.cn-group b { font-size: 0.9375rem; font-weight: 800; }
.cn-group span { text-transform: uppercase; font-size: 0.8125rem; font-weight: 600; letter-spacing: .02em; }
.cn-group.l1 { background: #f9df6d; } .cn-group.l2 { background: #a0c35a; } .cn-group.l3 { background: #b0c4ef; } .cn-group.l4 { background: #ba81c5; }
.cn-lives { display: inline-flex; gap: 5px; align-items: center; font-size: 0.875rem; color: var(--dim); margin-right: 4px; }
/* On a phone the mistakes left take their own line, so Shuffle, Clear and Submit stay together on the next. */
@media (max-width: 560px) { .cn-lives { flex-basis: 100%; justify-content: center; margin: 0; } }
.cn-lives i { width: 12px; height: 12px; border-radius: 50%; background: var(--soft); }
.cn-lives i.on { background: var(--text); }

/* Movie Guess */
.mv-card { background: var(--panel); border-radius: 24px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: var(--shadow); text-align: center; }
.mv-emoji { font-size: clamp(2.75rem, 9vw, 4rem); text-align: center; letter-spacing: .08em; line-height: 1.1; }
.mv-story { font-size: 1.0625rem; line-height: 1.5; text-align: center; margin: 0; max-width: 460px; }
.mv-line { font-family: var(--display); font-size: 1.1875rem; font-weight: 700; text-align: center; margin: 0; color: var(--goldtext); }
.mv-letters { font: 800 1.5rem var(--display); letter-spacing: .14em; text-align: center; margin: 0; }
.mv-feed { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.875rem; min-height: 20px; }
.mv-feed .dim { font-weight: 500; }

/* No guesses yet: it takes no room (it stays in the page so the first guess is still read out). */
.pmain > .mv-feed:empty { min-height: 0; margin-top: calc(-1 * var(--gap)); }

/* Order Order!: five cards tapped into order, the ends of the line named above and below them. */
.oo-q { font-size: clamp(1.125rem, 3.2vw, 1.5rem); padding: 16px 14px; }
.oo-list { display: flex; flex-direction: column; gap: 8px; }
.oo-end { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.oo-end span { font-size: 0.75rem; }
.oo-card { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; background: var(--panel); border-radius: 16px; text-align: left; font-size: 1rem; font-weight: 700; box-shadow: var(--shadow); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.oo-card:disabled { opacity: 1; }
.oo-card .grow { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.oo-card.placed { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel); }
/* Dragging: the card follows the finger and a dashed gap shows where it lands. The cards themselves take the finger
   (no page scroll from a swipe that starts on one) so a drag is a drag. */
.oo-list .oo-card:not(:disabled) { touch-action: none; }
.oo-card.hole { background: none; box-shadow: inset 0 0 0 2px var(--rule); border: 0; }
.oo-card.hole > * { visibility: hidden; }
.oo-ghost { position: fixed; z-index: 50; pointer-events: none; margin: 0; transform: scale(1.02); box-shadow: 0 12px 30px rgb(0 0 0 / .25), inset 0 0 0 2px var(--sel); }
.oo-list.dragging { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .oo-ghost { transform: none; } }
.oo-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sel); color: var(--on-sel); font-size: 0.875rem; font-weight: 800; }
.oo-n.empty { background: none; box-shadow: inset 0 0 0 2px var(--rule); }
.oo-x { font-size: 1.375rem; line-height: 1; opacity: .55; padding: 0 2px; }
.oo-gap { text-align: center; font-size: 0.8125rem; font-weight: 700; color: var(--dim); min-height: 18px; }
.oo-acts { display: flex; gap: 10px; }
.oo-acts .primary { flex: 1; }
.oo-answer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oo-answer li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.oo-answer li .grow { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.oo-answer .oo-n { background: var(--panel2); color: var(--text); }
.oo-answer li.ok { background: var(--right-bg); }
.oo-answer li.ok .oo-n { background: var(--ok); color: #fff; }
.oo-answer li.near { background: color-mix(in srgb, #ffc83d 22%, var(--panel)); }
.oo-answer li.off { background: var(--wrong-bg); }
.oo-val { font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.oo-you { flex: none; font-size: 0.8125rem; font-weight: 800; }
.oo-slip { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--panel); border-left: 5px solid #ffc83d; line-height: 1.4; }
.oo-src { margin: 0; }
/* Short phones: the five, the ends and Lock in all fit without scrolling. */
@media (max-height: 760px) and (max-width: 600px) {
  .oo-q { padding: 10px 12px; font-size: 1.125rem; }
  .oo-q .unit { margin-top: 6px; }
  .oo-list { gap: 6px; }
  .oo-card { min-height: 46px; padding: 6px 12px; }
  .oo-end { font-size: 0.75rem; }
}
/* Very short phones: the question line already says which end is which, so the end labels go. */
@media (max-height: 620px) and (max-width: 600px) {
  .g-order .ghead { margin-bottom: -4px; }
  .oo-q { padding: 8px 10px; font-size: 1rem; }
  .oo-end { display: none; }
  .oo-card { min-height: 44px; }
  .oo-list { gap: 5px; }
}

/* Photo Finish: a square picture, sharp only as far as the clock has got; the steps along its bottom. */
.pf-frame { position: relative; width: min(100%, 440px, max(180px, calc(var(--vvh, 100dvh) - var(--bar-h, 56px) - 230px))); aspect-ratio: 1; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--panel2); box-shadow: var(--shadow); }
.pf-frame img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pf-px { display: block; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pf-frame.full img { animation: pf-in .5s ease-out; }
@keyframes pf-in { from { filter: blur(10px); transform: scale(1.03); } to { filter: none; transform: none; } }
.pf-steps { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 4px; padding: 5px; border-radius: 9px; background: rgba(0, 0, 0, .5); }
.pf-steps i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.pf-steps i.on { background: #fff; }
.pf-hint { margin: 0; text-align: center; font-weight: 800; }
.pf-credit { margin: 0; text-align: center; font-size: 0.75rem; color: var(--dim); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .pf-frame.full img { animation: none; } }

.credit-list { columns: 2 260px; column-gap: 28px; padding-left: 18px; font-size: 0.875rem; line-height: 1.45; }
.credit-list li { break-inside: avoid; margin-bottom: 4px; overflow-wrap: anywhere; }

/* The daily: a strip on the home page, and its own page. */
.daily-strip { display: flex; align-items: center; gap: 14px; margin: 4px 0 26px; padding: 14px 16px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.daily-strip:hover { filter: brightness(1.04); }
.ds-icons { display: flex; flex: none; }
.ds-icons .gicon { width: 40px; height: 40px; }
.ds-icons .gicon + .gicon { margin-left: -10px; }
.ds-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-text span { color: var(--dim); font-size: 0.875rem; line-height: 1.35; }
.ds-go { flex: none; margin-left: auto; padding: 10px 18px; border-radius: 999px; background: var(--btn); color: var(--on-btn); font-weight: 800; }
@media (max-width: 420px) { .ds-icons { display: none; } .ds-go { padding: 9px 14px; } }
.daily-page { max-width: 560px; }
.dl-hub { display: flex; flex-direction: column; gap: 16px; }
/* The daily's top: its number as a kicker, the date big. */
.dl-hero { display: flex; flex-direction: column; gap: 4px; }
.dl-hero h1 { margin: 0; }
.dl-no { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--sel-bg); color: var(--sel); font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dl-date { margin: 2px 0 0; font-family: var(--display); font-size: 1.25rem; letter-spacing: -.02em; }
.dl-sub { margin: 0; color: var(--dim); }
/* The day's two games: a tile each, in the colour of its kind, the score and grid once done. */
.dl-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.dl-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; padding: 18px; border-radius: 24px; text-align: left; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k) 55%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--k) 92%, #000 8%), color-mix(in srgb, var(--k) 70%, #000 30%));
  color: var(--kink); box-shadow: 0 10px 28px color-mix(in srgb, var(--k) 30%, transparent), inset 0 1px 0 rgb(255 255 255 / .18); transition: transform .15s ease; }
.dl-card:hover:not(:disabled) { filter: none; transform: translateY(-2px); }
.dl-card::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgb(255 255 255 / .1); pointer-events: none; }
.dl-card-top { display: flex; align-items: center; gap: 12px; }
.dl-card .gicon { width: 52px; height: 52px; flex: none; box-shadow: 0 0 0 3px rgb(255 255 255 / .28); border-radius: 16px; }
.dl-card-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-card-name b { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; }
.dl-card-name span { font-size: 0.875rem; font-weight: 600; opacity: .85; }
.dl-card-res { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dl-card-score { font-weight: 700; } .dl-card-score b { font-family: var(--display); font-size: 1.75rem; }
.dl-card .dl-grid { font-size: 0.875rem; letter-spacing: 1px; }
.dl-card-go { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; padding: 12px 16px; border-radius: 999px; background: rgb(255 255 255 / .94); color: #15161a; font-weight: 800; }
.dl-card:not(.is-done) .dl-card-go { justify-content: center; }
.dl-solved { display: inline-flex; align-items: center; gap: 6px; color: #13803d; }
.dl-solved svg, .dl-all svg, .dc-tag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dl-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 20px; background: color-mix(in srgb, var(--ok) 14%, var(--panel)); }
.dl-all b { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-size: 1.0625rem; }
.dl-emoji { font-size: clamp(2.75rem, 12vw, 4rem); text-align: center; line-height: 1.2; letter-spacing: 4px; padding: 14px 8px; border-radius: 22px; background: var(--panel2); }
.dl-clue { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--panel2); font-size: 1rem; line-height: 1.45; }
.dl-letters { font-family: var(--display); letter-spacing: .18em; text-align: center; font-size: 1.25rem; }
.dl-word { align-items: center; }
.dl-word .dl-steps { align-self: stretch; }
.dl-done .dl-no { align-self: center; }
/* Today's daily as a card: the home page (a link) and the lobby (opens the sheet). */
.daily-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); color: inherit; text-decoration: none; text-align: left; min-height: 0; width: 100%;
  background-image: linear-gradient(120deg, rgb(255 140 50 / .14), transparent 55%); }
a.daily-card:hover, button.daily-card:hover:not(:disabled) { filter: brightness(1.04); }
.daily-card.is-done { background-image: linear-gradient(120deg, color-mix(in srgb, var(--ok) 16%, transparent), transparent 60%); }
.dc-icons { display: flex; flex: none; }
.dc-icons .gicon { width: 40px; height: 40px; box-shadow: 0 0 0 3px var(--panel); border-radius: 13px; }
.dc-icons .gicon + .gicon { margin-left: -12px; transform: rotate(8deg) translateY(2px); }
.dc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dc-text b { font-size: 1rem; }
.dc-text span { color: var(--dim); font-size: 0.875rem; line-height: 1.35; }
.dc-side { display: flex; align-items: center; gap: 8px; flex: none; }
.dc-streak { display: inline-flex; align-items: center; gap: 2px; font-family: var(--display); font-size: 1.0625rem; color: #ff7a26; }
.dc-streak .st-flame { width: 18px; height: 23px; }
.dc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 800; white-space: nowrap; }
.dc-tag.go { background: var(--btn); color: var(--on-btn); }
.dc-tag.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.home-daily { margin: 4px 0 26px; }
.dc-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Narrow: the lobby's side column, and small phones. */
.lobby-side .daily-card { padding: 12px 14px; gap: 12px; }
.lobby-side .dc-icons .gicon { width: 32px; height: 32px; border-radius: 11px; }
@media (max-width: 420px) { .daily-card { gap: 12px; padding: 12px 14px; } .dc-icons .gicon { width: 32px; height: 32px; border-radius: 11px; } }
@media (max-width: 759px) { .lobby .lobby-daily { order: 4; } }
/* The daily in a room: a sheet over the lobby. */
.daily-sheet { max-width: 600px; max-height: 90dvh; padding: 16px 18px 20px; }
.daily-sheet-head { position: sticky; top: -16px; z-index: 2; margin: -16px -18px 12px; padding: 14px 18px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.daily-sheet-head b { font-family: var(--display); font-size: 1.125rem; }
.dl-top h1 { margin: 0 0 4px; }
.dl-top p { margin: 0; }
.dl-game { display: flex; flex-direction: column; gap: 12px; }
.dl-head { display: flex; align-items: center; gap: 12px; }
.dl-head h2 { margin: 0; font-size: 1.375rem; }
.dl-head .gicon { width: 52px; height: 52px; }
.dl-score { margin: 0; font-family: var(--display); }
.dl-score b { font-size: 2.125rem; }
.dl-score span { margin-left: 6px; color: var(--dim); }
.dl-grid { margin: 0; font-family: inherit; font-size: 1.125rem; line-height: 1.3; letter-spacing: 2px; white-space: pre; overflow-x: auto; }
.dl-grid.big { font-size: 1.625rem; }
.dl-stats { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 6px 16px; margin: 0; color: var(--dim); font-size: 0.875rem; font-weight: 700; }
/* The daily's streak. */
.streak { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: var(--panel2); text-align: left; align-self: stretch; }
.streak.lit { background: linear-gradient(135deg, rgb(255 120 40 / .16), rgb(255 200 60 / .06) 60%), var(--panel2); }
.st-main { display: flex; align-items: center; gap: 12px; }
.st-flame { width: 44px; height: 55px; flex: none; display: grid; place-items: end center; }
.st-flame svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.streak:not(.lit) .st-flame svg { filter: grayscale(1); opacity: .35; }
.streak.lit .st-flame svg { filter: drop-shadow(0 4px 10px rgb(255 110 30 / .45)); animation: st-flicker 2.6s ease-in-out infinite; }
.streak.lit .st-inner { transform-origin: 50% 90%; animation: st-core 1.7s ease-in-out infinite; }
@keyframes st-flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.97, 1.04) skewX(-1.5deg); } 60% { transform: scale(1.02, .98) skewX(1.2deg); } }
@keyframes st-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(.88, 1.08); } }
.st-count { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-count b { font-family: var(--display); font-size: 2.125rem; line-height: 1; font-variant-numeric: tabular-nums; }
.streak.lit .st-count b { background: linear-gradient(180deg, #ffc23d, #ff6a26); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-count span, .st-top span { font-size: 0.8125rem; font-weight: 700; color: var(--dim); }
.st-top { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 14px; background: var(--panel); }
.st-top b { font-family: var(--display); font-size: 1.125rem; line-height: 1.1; }
.st-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.st-week li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.st-week i { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; }
.st-week li.on i { background: linear-gradient(180deg, #ffb238, #ff6a26); box-shadow: 0 2px 8px rgb(255 110 30 / .35); }
.st-week li.today:not(.on) i { background: transparent; box-shadow: inset 0 0 0 2px var(--dim); }
.st-week svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.st-week span { font-size: 0.75rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
.st-week li.today span { color: var(--text); }
.st-next { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--lead); }
/* Just grew: the flame flares up, the count bumps and today's day fills in. */
.streak.fresh .st-flame svg { animation: st-flare .9s cubic-bezier(.2, 1.4, .4, 1) both, st-flicker 2.6s ease-in-out .9s infinite; }
.streak.fresh .st-count b { animation: st-bump .6s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.streak.fresh .st-week li.today i { animation: st-dot .5s .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes st-flare { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
@keyframes st-bump { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes st-dot { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .streak .st-flame svg, .streak .st-inner, .streak .st-count b, .streak .st-week i { animation: none !important; } }
.dl-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-acts .primary { flex: 1 1 200px; }
.dl-more { margin: 0; font-size: 0.875rem; color: var(--dim); }
.dl-more a { display: inline-block; padding: 12px 2px; }
.dl-play { display: flex; flex-direction: column; gap: 12px; }
.dl-steps { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.dl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-name .gicon { width: 28px; height: 28px; }
.dl-steps > b { margin-left: auto; }
.dl-dots { display: flex; gap: 6px; }
.dl-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--rule); }
.dl-dots i.done { background: var(--ok); box-shadow: none; }
.dl-dots i.on { background: var(--sel); box-shadow: none; }
.dl-got { margin: 0; text-align: center; font-size: 1.125rem; }
.dl-got b { color: var(--ok); font-size: 1.375rem; }
.dl-done { align-items: center; text-align: center; }
.dl-done .gicon.big { width: 72px; height: 72px; }
.dl-done a.button { justify-content: center; }
.dl-done h1 .dim { font-size: .6em; }
@media (max-width: 380px) { .dl-name span:not(.gicon) { display: none; } }

/* Music Guess */
.mg-player { display: flex; gap: 14px; align-items: center; background: var(--panel); border-radius: 24px; padding: 14px; box-shadow: var(--shadow); }
.mg-player > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mg-play { width: 64px; height: 64px; min-height: 0; border-radius: 50%; font-size: 1.5rem; padding: 0; flex: none; background: #e0457b; color: #fff; }
.g-musicguess .choice { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.g-musicguess .choice .grow { flex: 0 1 auto; display: flex; flex-direction: column; gap: 2px; }
.g-musicguess .choice .who-picked { flex: none; margin: 4px 0 0 !important; }
.g-musicguess .choice.mine ~ .choice:not(.right):not(.wrong) { opacity: .6; }

/* GeoGuess */
.geo-ask { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.geo-ask b { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.375rem, 5vw, 1.875rem); }
.geo-map { position: relative; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); background: var(--geo-sea);
  --geo-sea: #183247; --geo-land: #557548; --geo-edge: #1f2d1b; --geo-grid: rgba(255,255,255,.05); --geo-hit: #f5c542; --geo-hit-edge: #fff3c4; }
:root[data-theme="light"] .geo-map { --geo-sea: #b9d7ec; --geo-land: #efe9d6; --geo-edge: #9a9480; --geo-grid: rgba(20,60,100,.07); --geo-hit: #f2c230; --geo-hit-edge: #6b4f00; }
.geo-map canvas { display: block; width: 100%; height: min(64vh, 620px); height: min(64svh, 620px); min-height: 300px; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.geo-map canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.geo-map canvas.grab { cursor: grabbing; }
.geo-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* GeoGuess: the place's name is the header, and the map takes the rest of the screen. What to do next sits on the
   map's bottom edge (see PinDock), so Lock in is always in view and never shrinks the map. */
.geo-name { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 5.6vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* --geo-top is where the map starts on the page (measured: the last round's line or a night's banner push it down). */
.g-geoguess .geo-map canvas { height: clamp(280px, calc(var(--vvh, 100svh) - var(--geo-top, 160px) - 12px), 760px); min-height: 0; }
.g-geoguess .geo-reveal .geo-map canvas { height: clamp(240px, calc((var(--vvh, 100svh) - var(--bar-h)) * .56), 600px); }
.geo-dock { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.geo-chip, .geo-tip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border-radius: 99px; background: rgb(18 19 24 / .8); color: #fff; font-weight: 700; text-align: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgb(0 0 0 / .22); }
.geo-chip { min-height: 40px; padding: 0 16px; font-size: 0.875rem; animation: geo-up .3s ease-out both; }
.geo-chip .ico { width: 18px; height: 18px; }
.geo-chip.ok { background: #1b7f3b; }
.geo-n { margin-left: 2px; padding: 1px 8px; border-radius: 99px; background: rgb(255 255 255 / .2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.geo-tip { padding: 5px 12px; font-size: 0.75rem; animation: geo-tip 3.2s ease both; }
button.geo-lock { pointer-events: auto; min-height: 56px; padding: 0 30px; font-size: 1.0625rem; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 28px rgb(0 0 0 / .35); animation: geo-up .35s cubic-bezier(.2, .9, .3, 1.25) both, geo-ring 1.6s ease-out .45s 2; }
button.geo-lock .ico { width: 20px; height: 20px; }
@keyframes geo-up { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes geo-tip { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes geo-ring { from { box-shadow: 0 10px 28px rgb(0 0 0 / .35), 0 0 0 0 color-mix(in srgb, var(--btn) 55%, transparent); } to { box-shadow: 0 10px 28px rgb(0 0 0 / .35), 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) { .geo-chip, .geo-tip, button.geo-lock { animation: none; } .geo-tip { display: none; } }
.geo-zoom button { width: 44px; height: 44px; padding: 0; font-size: 1.375rem; line-height: 1; border-radius: 22px; background: var(--raise); color: var(--text); box-shadow: 0 2px 8px rgb(0 0 0 / .25); display: grid; place-items: center; }
@media (max-width: 640px) {
  .geo-map canvas { height: min(58vh, 520px); height: min(58svh, 520px); }
  .cn-word { min-height: 56px; }
  .m24-card { width: 74px; height: 100px; }
  .m24-n { font-size: 1.875rem; }
}

/* Last Card */
.lcg2 { padding: 10px 12px 16px; max-width: 1000px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lcg2.shook { animation: lc-shake .5s; }
#lc-fly { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
#lc-fly .flying { position: fixed; margin: 0; transform-origin: 50% 50%; }
.lc-conf { position: fixed; width: 9px; height: 14px; border-radius: 2px; }

/* The cards. --cw is the card width; everything inside scales with it. */
.lc { --w: var(--cw, 74px); width: var(--w); height: calc(var(--w) * 1.48); font-size: calc(var(--w) * .2); border-radius: calc(var(--w) * .13);
  background: #fff; border: 0; padding: 0; position: relative; flex: none; display: block; color: #fff;
  box-shadow: 0 2px 6px #0006, 0 0 0 1px #0002; }
.lc:disabled { opacity: 1; cursor: default; }
.lc-face { position: absolute; inset: calc(var(--w) * .055); border-radius: calc(var(--w) * .09); background: var(--k); overflow: hidden; display: block; }
.lc.wild .lc-face { background: #1b1b1f; }
.lc.chosen { box-shadow: 0 0 0 3px var(--k), 0 0 18px var(--k), 0 4px 10px #0007; }
.lc-oval { position: absolute; left: 15%; top: 2%; width: 70%; height: 96%; border-radius: 50%; background: #fff; transform: rotate(32deg); }
.lc.wild .lc-oval { background: conic-gradient(from 32deg, #e5383b 0 25%, #1f6fe0 0 50%, #2fa84f 0 75%, #f5b700 0); box-shadow: 0 0 0 .18em #fff; }
.lc-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--k); }
.lc-num { font: italic 900 3.4em/1 system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-stroke: .07em #111; paint-order: stroke fill; text-shadow: .07em .07em 0 #111; }
.lc-num.u { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .06em; }
.lc-sym svg { width: 3.1em; height: 3.1em; display: block; filter: drop-shadow(.06em .06em 0 #111); }
.lc.wild.chosen .lc-mid { color: var(--k); }
.lc-corner { position: absolute; font: italic 900 1.05em/1 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; -webkit-text-stroke: .05em #111; paint-order: stroke fill; }
.lc-corner svg { width: 1.25em; height: 1.25em; display: block; }
.lc-corner.tl { top: .3em; left: .35em; }
.lc-corner.br { bottom: .3em; right: .35em; transform: rotate(180deg); }
.lc.sm { --w: 22px; display: inline-block; vertical-align: middle; margin: 0 2px; box-shadow: 0 1px 2px #0005; }
.lc.sm .lc-num { -webkit-text-stroke: 0; text-shadow: none; }
.lc.sm .lc-sym svg { filter: none; }
.lc.dimc { filter: saturate(.85) brightness(.86); }

.lc-back { display: block; position: relative; width: 74px; height: 110px; border-radius: 10px; border: 3px solid #fff; background: #17171c; box-shadow: 0 2px 5px #0006; overflow: hidden; }
.lc-back b { position: absolute; left: 12%; top: 16%; width: 76%; height: 68%; border-radius: 50%; background: #e5383b; transform: rotate(-28deg);
  display: flex; align-items: center; justify-content: center; text-align: center; color: #f5b700; font: italic 900 0.8125rem/1 system-ui, sans-serif; letter-spacing: .02em; text-shadow: 1px 1px 0 #111; }

/* Players around the table */
.lc-seats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lc-seat { position: relative; background: var(--panel); border: 2px solid var(--rule); border-radius: 16px; padding: 8px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 104px; max-width: 150px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.lc-seat.turn { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 6px 20px color-mix(in srgb, var(--gold) 35%, transparent); }
.lc-seat.won { border-color: var(--gold); animation: lc-bob .5s ease-in-out infinite alternate; }
.lc-av { position: relative; width: 50px; height: 50px; display: grid; place-items: center; }
.lc-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lc-ring circle { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; animation: lc-ring linear forwards; }
.lc-nm { max-width: 120px; }
.lc-minifan { position: relative; height: 36px; width: 96px; }
.lc-back.mini { position: absolute; bottom: 0; left: calc(50% - 11px); width: 22px; height: 32px; border-radius: 4px; border-width: 1.5px; transform: rotate(var(--a)); transform-origin: 50% 150%; transition: transform .3s; }
.lc-back.mini b { font-size: 0; }
.lc-count { position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--text); color: var(--bg); font-size: 0.8125rem; display: grid; place-items: center; z-index: 2; }
.lc-seat.one .lc-count { background: #e5383b; color: #fff; animation: lc-pulse 1s infinite; }
.lc-tag { font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: #e5383b; color: #fff; }
.lc-catch { background: #e5383b; color: #fff; font-weight: 900; padding: 6px 10px; border-radius: 10px; border: 0; animation: lc-wiggle .45s infinite; }

/* The table */
.lc-table { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: clamp(22px, 8vw, 70px); min-height: 230px; padding: 26px 16px 56px;
  border-radius: 140px; border: 8px solid #5c3b1e; background: radial-gradient(ellipse at 50% 38%, #2f9a5f, #155430 72%, #0f3d23);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cur) 75%, transparent), inset 0 0 70px color-mix(in srgb, var(--cur) 40%, transparent), 0 10px 30px #0005; transition: box-shadow .5s; color: #fff; }
.lc-dir { position: absolute; left: 50%; top: 42%; width: min(460px, 90%); height: 74%; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.lc-dir.flip { animation: lc-flip .6s ease-out; }
.lc-dir circle { fill: none; stroke: var(--cur); stroke-width: 2.5; stroke-dasharray: 3 8; opacity: .6; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.lc-dir path { fill: var(--cur); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill .5s; }
.lc-dir-spin { transform-origin: 100px 100px; animation: lc-spin 16s linear infinite; }
.lc-dir.ccw .lc-dir-spin { animation-direction: reverse; }

.lc-deck:disabled { opacity: 1; }
.lc-deck { position: relative; width: 74px; height: 110px; padding: 0; border: 0; background: none; z-index: 1; }
.lc-deck .lc-back { position: absolute; inset: 0; }
.lc-deck .lc-back.stacked { transform: translate(calc(var(--i) * -2px), calc(var(--i) * 2px)); filter: brightness(.75); }
.lc-deck.can { cursor: pointer; }
.lc-deck.can .lc-back.top { animation: lc-nudge 1.3s ease-in-out infinite; box-shadow: 0 0 0 3px var(--gold), 0 8px 18px #0008; }
.lc-deck.riffle .lc-back.top { animation: lc-riffle .7s; }
.lc-deck-n { position: absolute; left: 0; right: 0; top: -20px; text-align: center; font-size: 0.75rem; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000; }

.lc-discard { position: relative; --cw: 84px; width: 84px; height: calc(84px * 1.48); z-index: 1; }
.lc-discard .lc { position: absolute; inset: 0; transform: rotate(var(--t)); }
.lc-discard .lc.under { filter: brightness(.82); }
.lc-discard .lc.top { box-shadow: 0 10px 24px #0009, 0 0 0 1px #0002; }
.lc-discard .lc.top.chosen { box-shadow: 0 0 0 3px var(--k), 0 0 22px var(--k), 0 10px 24px #0009; }
.lc-discard .lc.land { animation: lc-land .35s cubic-bezier(.3, 1.6, .5, 1); }

.lc-now { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; align-items: center; z-index: 2; }
.lc-chip { padding: 3px 12px; border-radius: 99px; background: var(--k, #333); color: #fff; font-weight: 800; font-size: 0.8125rem; box-shadow: 0 0 0 2px #fff5; transition: background .4s; }
.lc-chip.owe { background: #111; color: #ffd43b; animation: lc-pulse 1s infinite; }
.lc-table .clock { color: #fff; }
.lc-table .clock .trk { fill: rgb(0 0 0 / .28); stroke: rgb(255 255 255 / .18); }
.lc-table .clock:not(.low) .arc { stroke: #fff; }

/* My hand */
.lc-me { background: var(--panel); border: 2px solid var(--rule); border-radius: 20px; padding: 10px 10px 8px; box-shadow: var(--shadow); transition: border-color .3s, box-shadow .3s; }
.lc-me.turn { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent), 0 10px 30px #0004; }
.lc-say { text-align: center; font-size: 1rem; min-height: 22px; }
.lc-me.turn .lc-say > b { color: var(--goldtext); }
.lc-handwrap { position: relative; }
.lc-hand { display: flex; justify-content: safe center; align-items: flex-end; padding: 36px 8px 30px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.lc-hand .lc { transform: translateY(var(--y)) rotate(var(--a)); transform-origin: 50% 130%; transition: transform .18s ease, filter .2s, box-shadow .2s;
  animation: lc-deal .45s var(--d) cubic-bezier(.2, .8, .3, 1.15) backwards; }
.lc-hand .lc.ok { transform: translateY(calc(var(--y) - 14px)) rotate(var(--a)); box-shadow: 0 8px 18px #0008, 0 0 0 3px var(--gold); cursor: pointer; }
.lc-hand .lc.ok:hover, .lc-hand .lc.ok.up, .lc-hand .lc.ok:focus-visible { transform: translateY(calc(var(--y) - 32px)) rotate(0deg) scale(1.08); z-index: 99 !important; outline: none; }
.lc-hand .lc.ok.up { box-shadow: 0 10px 22px #0009, 0 0 0 4px var(--gold); }
.lc-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.lc-call { background: linear-gradient(135deg, #e5383b, #f5b700); color: #fff; font-weight: 900; font-size: 1.0625rem; padding: 10px 20px; border-radius: 999px; border: 0; text-shadow: 0 1px 2px #0006; box-shadow: 0 4px 14px #e5383b66; animation: lc-pulse 1.2s infinite; }
.lc-call.urgent { animation: lc-wiggle .4s infinite; }
.lc-warn { text-align: center; color: var(--bad); margin: 6px 0 0; font-size: 0.875rem; }
.lc-tools { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.lc-tbtn { background: none; border: 1px solid var(--line); color: var(--dim); font-size: 0.8125rem; font-weight: 500; padding: 0 14px; min-height: 44px; border-radius: 99px; }
.lc-log { text-align: center; display: flex; flex-direction: column; gap: 2px; min-height: 54px; }

/* Wild colour picker */
.lc-pick { animation: lc-in .25s cubic-bezier(.3, 1.5, .5, 1); }
.lc-wheelpick { display: grid; grid-template-columns: 1fr 1fr; width: 224px; height: 224px; margin: 8px auto; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 6px 24px #0006; }
.lc-wheelpick button { background: var(--k); color: #fff; font-weight: 900; font-size: 1.0625rem; border: 0; border-radius: 0; text-shadow: 0 1px 2px #0007; transition: filter .15s; }
.lc-wheelpick button:hover, .lc-wheelpick button:focus-visible { filter: brightness(1.18); }
.lc-wheelpick .q-y { color: #1a1a1a; text-shadow: none; }

/* Moments: +2/+4, skips, calls, catches, reverses, wins */
.lc-pop { position: absolute; left: 50%; top: 50%; z-index: 20; pointer-events: none; white-space: nowrap; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); }
.lc-pop svg { width: 1.2em; height: 1.2em; flex: none; }
.lc-pop.hit { font-size: 2.625rem; color: #fff; -webkit-text-stroke: 2px #b00; paint-order: stroke fill; text-shadow: 0 4px 0 #0006; animation: lc-hit 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.lc-pop.plus { font-size: 1.375rem; color: var(--text); animation: lc-rise 1.2s ease-out forwards; }
.lc-pop.stamp { font-size: 1.0625rem; color: #fff; background: #111e; padding: 6px 12px; border-radius: 10px; border: 3px solid #fff; text-transform: uppercase; letter-spacing: .05em; animation: lc-stamp 1.5s ease-out forwards; }
.lc-pop.stamp.caught { background: #c92a2a; }
.lc-pop.shout { top: 0; font-size: 0.9375rem; background: #fff; color: #c92a2a; padding: 6px 12px; border-radius: 16px; box-shadow: 0 4px 14px #0005; animation: lc-shout 1.7s ease-out forwards; }
.lc-pop.shout::after { content: ''; position: absolute; left: 50%; bottom: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }
.lc-pop.banner { font-size: 1.625rem; color: #fff; background: #000b; padding: 8px 20px; border-radius: 14px; animation: lc-banner 1.4s ease-out forwards; }
.lc-pop.banner.hot { background: linear-gradient(135deg, #c92a2a, #e8590c); }
.lc-pop.banner.win { font-size: 1.875rem; background: linear-gradient(135deg, #f5b700, #e5383b); animation-duration: 2.6s; }
.lc-pop.ripple { width: 40px; height: 40px; border-radius: 50%; background: var(--cur); color: transparent; z-index: 0; animation: lc-ripple 1.1s ease-out forwards; }
.lc-pop.mini-pop { top: -12px; font-size: 0.75rem; color: #fff; animation: lc-rise 1s forwards; }

@keyframes lc-deal { from { transform: translateY(-160px) rotate(0deg) scale(.4); opacity: 0; } }
@keyframes lc-land { from { transform: rotate(var(--t)) scale(1.2); } }
@keyframes lc-ring { to { stroke-dashoffset: 100; } }
@keyframes lc-spin { to { transform: rotate(360deg); } }
@keyframes lc-flip { from { opacity: .15; transform: translate(-50%, -50%) scale(.8); } }
@keyframes lc-pulse { 50% { transform: scale(1.07); } }
@keyframes lc-wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes lc-bob { to { transform: translateY(-6px); } }
@keyframes lc-nudge { 50% { transform: translateY(-5px); } }
@keyframes lc-riffle { 30% { transform: translateX(-14px) rotate(-8deg); } 60% { transform: translateX(14px) rotate(8deg); } }
@keyframes lc-shake { 10%, 50%, 90% { transform: translateX(-6px); } 30%, 70% { transform: translateX(6px); } }
@keyframes lc-in { from { transform: scale(.7); opacity: 0; } }
@keyframes lc-hit { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-20deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.25) rotate(6deg); opacity: 1; }
  75% { transform: translate(-50%, -80%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -120%) scale(.9); opacity: 0; } }
@keyframes lc-rise { from { transform: translate(-50%, -30%); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-50%, -150%); opacity: 0; } }
@keyframes lc-stamp { 0% { transform: translate(-50%, -50%) scale(2.6) rotate(-14deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9) rotate(-8deg); opacity: 0; } }
@keyframes lc-shout { 0% { transform: translate(-50%, -100%) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.15); opacity: 1; }
  25% { transform: translate(-50%, -100%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -130%); opacity: 0; } }
@keyframes lc-banner { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes lc-ripple { from { transform: translate(-50%, -50%) scale(.2); opacity: .8; } to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

@media (max-width: 640px) {
  .lcg2 { padding: 8px 8px 14px; gap: 10px; }
  .lc-seats { gap: 6px; }
  .lc-seat { min-width: 86px; padding: 6px 6px 8px; }
  .lc-minifan { width: 80px; }
  .lc-table { min-height: 190px; padding: 18px 10px 50px; border-width: 5px; border-radius: 70px; }
  .lc-discard { --cw: 68px; width: 68px; height: calc(68px * 1.48); }
  .lc-deck, .lc-deck .lc-back { width: 62px; height: 92px; }
  .lc-back b { font-size: 0.6875rem; }
  .lc-pop.hit { font-size: 2.125rem; }
  .lc-pop.banner { font-size: 1.3125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lcg2, .lcg2 *, .lc-pick { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .lc-pop { animation: none !important; }
  .lc-ring { display: none; }
}

/* Phones held sideways: little height. In a game the top bar scrolls away, scores sit beside the game, and the games
   whose controls have to stay on screen (cards, keyboard, board, drawing) shrink to the height there is. */
@media (min-aspect-ratio: 3/2) and (max-height: 500px) {
  .room:has(.game-area) .bar { position: static; }
  .play2 { flex-wrap: nowrap; padding: 6px 10px; gap: 10px; }
  .draw-wrap { grid-template-columns: minmax(0, 1fr) 230px; padding: 6px 10px; gap: 10px; }
  .pmain { flex: 1 1 auto; }
  .pside { order: 0; flex: 0 0 230px; }
  .ghead .gtitle { font-size: 0.9375rem; }
  /* The drawing fits under the top bar, the round line and the letters; typing a guess (the box is beside it) scrolls
     the letters to the top, so then it gets nearly all the height left above the keyboard. */
  .canvas canvas { max-height: calc(var(--vvh, 100dvh) - var(--bar-h) - 100px); max-width: min(100%, calc((var(--vvh, 100dvh) - var(--bar-h) - 100px) * 4 / 3)); width: auto; }
  .game-area:has(.answer .line:focus) .canvas canvas { max-height: calc(var(--vvh, 100dvh) - 48px); max-width: min(100%, calc((var(--vvh, 100dvh) - 48px) * 4 / 3)); }
  .tt-frame { width: min(100%, calc(var(--vvh, 100dvh) - 70px)); }
  .geo-map canvas { height: calc(var(--vvh, 100dvh) - 150px); min-height: 200px; }
  /* The whole map under the top bar and the name, so Lock in on its bottom edge is on screen without scrolling. */
  .g-geoguess .geo-map canvas, .g-geoguess .geo-reveal .geo-map canvas { height: calc(var(--vvh, 100dvh) - var(--bar-h) - 78px); min-height: 180px; }
  .geo-dock { bottom: 10px; }
  button.geo-lock { min-height: 48px; }
  /* Photo Finish: the picture on the left, as tall as the screen allows under the top bar; the round line, the box and
     the guesses beside it. */
  .g-photofinish .pmain { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 8px; }
  .g-photofinish .pmain > :not(.pf-frame) { grid-column: 2; }
  .g-photofinish .pf-frame { grid-column: 1; grid-row: 1 / span 9; width: min(360px, calc(var(--vvh, 100dvh) - var(--bar-h, 56px) - 20px)); min-width: 150px; margin: 0; }
  /* Order Order!: the five cards beside the question and the buttons, and the scores under them, so the whole line
     fits the height of a phone held sideways. */
  .g-order .play2 { flex-wrap: wrap; }
  .g-order .pside { order: 2; flex: 1 1 100%; }
  .g-order .pmain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; column-gap: 14px; row-gap: 8px; }
  .g-order .pmain > * { grid-column: 1; }
  .g-order .pmain > .oo-list, .g-order .pmain > .oo-answer { grid-column: 2; grid-row: 1 / span 8; }
  .prompt.oo-q { padding: 10px 12px; font-size: 1.0625rem; }
  .oo-list { gap: 4px; }
  .oo-end { font-size: 0.75rem; }
  .oo-card { min-height: 44px; padding: 4px 10px; font-size: 0.9375rem; }
  .oo-n { width: 26px; height: 26px; font-size: 0.8125rem; }
  .oo-answer li { padding: 4px 10px; }
  /* The smallest phones on their side (320 px tall): a tighter question so Lock in stays on screen. */
  @media (max-height: 340px) {
    .prompt.oo-q { padding: 6px 10px; font-size: 0.9375rem; line-height: 1.2; }
    .prompt.oo-q .unit { margin-top: 4px; padding: 2px 10px; font-size: 0.75rem; }
    .g-order .ghead .gtitle { font-size: 0.875rem; }
  }

  /* Word Race: the board beside the keyboard. */
  .wordle .play { display: grid; grid-template-columns: auto minmax(0, 440px); grid-template-areas: "status status" "board kb"; align-items: center; justify-content: center; column-gap: 24px; }
  .wordle .status { grid-area: status; margin: 0 0 4px; }
  .wordle .board { grid-area: board; width: calc((var(--vvh, 100dvh) - 130px) * 5 / 6); min-width: 140px; }
  .wordle .kb { grid-area: kb; margin: 0; }
  .wordle .k { height: 44px; }
  .wordle .side { max-height: 64px; }

  /* Last Card: the other players and the table on the left, your hand on the right. */
  .lcg2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "seats me" "table me" "log me"; gap: 8px 12px; align-items: start; padding: 6px 10px 10px; }
  .lc-seats { grid-area: seats; gap: 6px; }
  .lc-seat { min-width: 0; padding: 4px 6px 6px; }
  .lc-av { width: 36px; height: 36px; }
  .lc-minifan { width: 64px; height: 28px; }
  .lc-table { grid-area: table; min-height: 150px; padding: 12px 10px 40px; border-width: 5px; border-radius: 70px; }
  .lc-discard { --cw: 58px; width: 58px; height: calc(58px * 1.48); }
  .lc-deck, .lc-deck .lc-back { width: 54px; height: 80px; }
  .lc-me { grid-area: me; }
  .lc-hand { padding: 26px 6px 18px; }
  .lc-log { grid-area: log; }

  /* The invite sheet: the QR code beside the code and the buttons. */
  .invite-card { max-width: 600px; }
  .inv-body { flex-direction: row; align-items: center; }
  .inv-qr { flex: none; } .inv-info { flex: 1; min-width: 0; }
  .qr { width: min(200px, calc(var(--vvh, 100dvh) - 150px)); }

  /* Answer games: the round line and its clock stay at the top while the answers scroll, the answers sit in two
     columns so all four fit, and the stickers come after the answers instead of over them. */
  .pmain > .ghead { position: sticky; top: 0; z-index: 8; background: var(--bg); margin: -6px -10px 0; padding: 6px 10px; }
  .prompt { padding: 10px 14px; font-size: 1.125rem; border-radius: 18px; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .choices .choice { min-height: 48px; padding: 6px 10px; font-size: 1rem; }
}

.team-col li.away { opacity: .62; }
.team-col li.away .dim { margin-left: auto; }
.cw-wait { margin: 4px 0 0; }

.cw-why { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 0.9375rem; text-align: center; }
.cw-go { align-items: stretch; }
/* The filter chips scroll edge to edge; their padding (room for the shadows) is taken back, so the chips sit one even
   step from the game's card above and the games below. */
.lobby .chips.scroller { margin: -4px -12px; padding: 4px 12px; }
.lobby .guest-games .chips.scroller { margin: -4px -16px; padding: 4px 16px; }
.plist .nm, .ready-list .nm, .msg .nm { color: var(--text) !important; }
.pod-name .nm, .res-table .nm, .night-tbl .nm, .ns-name .nm { color: var(--text) !important; }
@media (max-width: 420px) { .bar:has(.bar-game) .bar-code .ico, .bar-game > .ico { display: none; } .bar:has(.bar-game) .bar-code { padding: 0 12px; } }
.like { display: inline-flex; align-items: center; gap: 6px; }
.like .ico { width: 18px; height: 18px; }
.mk.watch { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.mk.watch .hand { stroke: #e5383b; }
.pill.hot { display: inline-flex; align-items: center; gap: 4px; background: #ff5a3c; color: #15161a; min-height: 30px; padding: 0 12px 0 8px; font-size: 0.8125rem; }
.pill.hot .mk.flame { fill: #15161a; width: 14px; height: 14px; }
.crowns { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.top-pick { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 1.125rem; font-weight: 700; }
.top-pick .mk.crown { width: 22px; height: 22px; }
.scores .mk { width: 14px; height: 14px; vertical-align: -2px; }
.detail h2 + p { margin-top: 4px !important; line-height: 1.45; }
.au-coll:not(:has(div)) { display: none; }

/* ---------- Round results, points and moving places (shared by every game) ---------- */
.plus-pill { flex: none; min-width: 40px; text-align: center; padding: 3px 8px; border-radius: 99px; font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.plus-pill.zero { color: var(--dim); background: var(--panel2); }
.scores .plus-pill { min-width: 0; padding: 2px 7px; font-size: 0.75rem; }
.scores .mv { flex: none; font-size: 0.75rem; font-weight: 800; padding: 1px 6px; border-radius: 99px; animation: mv-in .35s ease-out both; }
.scores .mv.up { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.scores .mv.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
@keyframes mv-in { from { opacity: 0; transform: translateY(4px); } }
/* Light theme: solid pills in darker inks, so they read at 4.5:1 on any row (yours is tinted). */
:root[data-theme="light"] .plus-pill { color: #12632d; background: #dcf1e2; }
:root[data-theme="light"] .plus-pill.zero { color: #4e5260; background: #eceef2; }
:root[data-theme="light"] .scores .mv.up { color: #12632d; background: #dcf1e2; }
:root[data-theme="light"] .scores .mv.down { color: #a3261a; background: #fde4e0; }

.rr { background: var(--panel); border-radius: 22px; padding: 14px 14px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.reveal-head { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 2px 8px; animation: rr-in .35s ease-out both; }
.reveal-head > b { font-family: var(--display); font-size: clamp(1.1875rem, 3.4vw, 1.5rem); letter-spacing: -.01em; line-height: 1.2; }
.reveal-head .rh-sub { font-size: 0.875rem; font-weight: 600; color: var(--dim); }
.reveal-head .rh-sub .ok { color: var(--ok); }
:root[data-theme="light"] .reveal-head .rh-sub .ok { color: #12632d; }
.reveal-head .top-pick { font: inherit; }
.rr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rr-rows li { display: flex; align-items: center; gap: 10px; padding: 8px 8px; margin: 0 -6px; border-radius: 14px; animation: rr-in .4s calc(var(--i) * 70ms) ease-out both; }
.rr-rows li + li { border-top: 1px solid var(--rule); }
.rr-rows li.me { background: var(--me); border-top-color: transparent; }
.rr-rows li.me + li { border-top-color: transparent; }
.rr-pl { width: 18px; flex: none; text-align: center; font-weight: 800; font-size: 0.8125rem; color: var(--dim); }
.rr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rr-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rr-line .nm { font-size: 0.9375rem; }
.rr-val { flex: none; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rr-bar { height: 8px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.rr-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--sel); animation: rr-grow .8s calc(.15s + var(--i) * 70ms) cubic-bezier(.2,.8,.2,1) both; }
.rr-note { font-size: 0.75rem; font-weight: 600; color: var(--dim); }
.rr-rows li.bad .rr-val { color: var(--bad); }
.rr-rows li:first-child:not(.bad) .rr-note { color: var(--ok); }
.rr-rows li:first-child:not(.bad) .rr-bar i { background: var(--gold); }
:root[data-theme="light"] .rr-rows li:first-child:not(.bad) .rr-note { color: #12632d; }
/* On phones the card stands in for the scoreboard while it is up: each row carries the total, the scoreboard folds. */
.rr-total { display: none; min-width: 30px; text-align: right; font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .rr-total { display: block; }
  .play2:has(.rr) > .pside { display: none; }
}
@keyframes rr-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes rr-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .rr-rows li, .rr-bar i, .scores .mv { animation: none; } }

/* Closest Wins: every guess on one line with the answer. */
.nline { position: relative; height: calc(52px + var(--rows) * 30px); margin: 4px 14px 0; }
.nl-track { position: absolute; left: 0; right: 0; bottom: 28px; height: 4px; border-radius: 2px; background: var(--panel2); }
.nl-dot { position: absolute; bottom: calc(36px + var(--row) * 28px); z-index: 1; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; color: #15161a; background: var(--c); box-shadow: 0 0 0 2px var(--panel); animation: rr-in .45s ease-out both; }
.nl-dot::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--row) * 28px + 4px); background: var(--c); transform: translateX(-50%); opacity: .55; }
.nl-dot.me { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
/* Off the scale: at the end of the line, ringed with a dashed edge. */
.nl-dot.far { outline: 2px dashed var(--dim); outline-offset: 2px; }
.nl-answer { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.nl-answer i { flex: 1; width: 3px; border-radius: 2px; background: var(--gold); opacity: .9; }
.nl-answer b { flex: none; margin-top: 2px; padding: 1px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; background: var(--gold); color: #2b2100; }

/* Auction: why you cannot bid. */
.au-why { margin: 0; font-size: 0.875rem; color: var(--dim); max-width: 46ch; align-self: center; }
/* Telephone: your drawing has gone. */
.tele-sent { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 18px; background: var(--right-bg); }
.tele-sent b { color: var(--ok); font-size: 1.0625rem; }
.tele-sent .link { padding: 0 6px; font-weight: 700; }
/* Draw & Guess: the newest guesses over the drawing, while a phone keyboard is up. */
.draw-stage { position: relative; }
.feed-peek { display: none; }
@media (max-width: 860px) {
  .game-area:has(.answer .line:focus) .feed { display: none; }
  .game-area:has(.answer .line:focus) .feed-peek { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 8px; right: 8px; bottom: 8px; pointer-events: none; }
  .feed-peek .fl { align-self: flex-start; max-width: 100%; padding: 3px 10px; border-radius: 12px; font-size: 0.8125rem; background: rgb(20 21 26 / .78); color: #fff; animation: rr-in .25s ease-out both; }
  .feed-peek .fl .nm { color: var(--c) !important; }
  .game-area:has(.answer .line:focus) .canvas canvas { max-height: calc(var(--vvh, 100dvh) - 150px); max-width: min(100%, calc((var(--vvh, 100dvh) - 150px) * 4 / 3)); }
}
/* Territory: your colour by the map, squares you can pick outlined in it, your own land striped. */
.tt-you { margin: -4px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.tt-sw.me, .tt-cell.owned.me { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .38) 0 3px, transparent 3px 8px); }
.tt-sw.me { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--text); }
.tt-frame .tt-cell.can { position: relative; z-index: 1; background: color-mix(in srgb, var(--mine, var(--text)) 30%, var(--soft)); box-shadow: inset 0 0 0 3px var(--mine, var(--text)); animation: tt-glow2 1.4s ease-in-out infinite; }
/* A square too small for a finger still takes a finger-sized tap. */
.tt-frame .tt-cell.can::after { content: ''; position: absolute; inset: -6px; }
@keyframes tt-glow2 { 50% { box-shadow: inset 0 0 0 3px var(--mine, var(--text)), 0 0 0 2px color-mix(in srgb, var(--mine, var(--text)) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tt-frame .tt-cell.can { animation: none; } }
.tt-frame .tt-cell.picked { background: var(--text); box-shadow: inset 0 0 0 3px var(--mine, var(--text)); }
/* Word Grid: a typed word's verdict, under the box. */
.wg-typed { margin: -4px 0 0; text-align: center; font-weight: 700; font-size: 0.9375rem; }
.wg-typed.ok { color: var(--ok); } .wg-typed.bad { color: var(--bad); animation: wg-nope .32s; }
/* Code Words: each team's players under its score, spymaster first. */
.cw-rosters { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; }
.cw-roster { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; flex: 1; }
.cw-roster.blue { justify-content: flex-end; }
.cw-who { display: inline-flex; align-items: center; gap: 5px; max-width: 120px; padding: 2px 8px 2px 2px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; background: rgb(255 255 255 / .55); }
:root:not([data-theme="light"]) .cw-who { background: rgb(0 0 0 / .25); }
.cw-who.spy { box-shadow: inset 0 0 0 2px var(--redteam); }
.cw-roster.blue .cw-who.spy { box-shadow: inset 0 0 0 2px var(--blueteam); }
.cw-av { position: relative; display: inline-flex; }
.cw-eye { position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: #15161a; color: #fff; }
.cw-eye svg { width: 10px; height: 10px; }
/* Desktop and tablet: answers in two big columns. */
@media (min-width: 861px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .choices .choice { min-height: 84px; font-size: 1.1875rem; padding: 14px 18px; }
  .choices .choice .letter { width: 38px; height: 38px; font-size: 1rem; }
}

/* ---------- The last round, reactions, the buzz switch ---------- */
.last-round { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); max-width: 1076px; margin: 8px auto 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--panel2); font-size: 0.875rem; animation: rr-in .35s ease-out both; }
.lr-k { flex: none; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.lr-t { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.lr-miss { flex: none; font-size: 0.75rem; font-weight: 700; color: var(--dim); padding-right: 6px; }
.menu-switch { justify-content: space-between; cursor: pointer; }
.sticker { display: block; overflow: visible; }


@media (max-width: 380px) { .react-btn { width: 42px; height: 42px; } }
.react-btn { flex: none; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; transition: transform .12s; }
.react-btn:hover { background: var(--panel2); filter: none; }
.react-btn:active { transform: scale(.86); }
.react-float { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.rf { position: absolute; bottom: -90px; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: rf-up 2.8s cubic-bezier(.2,.7,.3,1) forwards; }
.rf .sticker { transform: rotate(var(--tilt)); filter: drop-shadow(0 4px 8px rgb(0 0 0 / .28)); }
.rf i { font-style: normal; font-size: 0.75rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: rgb(20 21 26 / .82); color: #fff; white-space: nowrap; }
.react-float.big .rf i { font-size: 1.25rem; padding: 2px 12px; }
@keyframes rf-up { 0% { transform: translateY(0) scale(.5); opacity: 0; } 14% { opacity: 1; transform: translateY(-130px) scale(1.1); } 72% { opacity: 1; } 100% { transform: translateY(-60vh) scale(1); opacity: 0; } }
@keyframes rf-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rf { bottom: 120px; animation: rf-fade 2.6s forwards; }
  .last-round { animation: none; }
}

/* ---------- TV mode ---------- */
.tv-pill { background: var(--sel-bg); color: var(--sel); }
@media (max-width: 420px) { .tv-pill { display: none; } }
.tv-help .tv-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 1rem; }
.tv-gate { min-height: 100dvh; max-width: 640px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.tv-big-ico { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--panel); box-shadow: var(--shadow); }
.tv-big-ico .ico { width: 44px; height: 44px; }
.tv-code-in { width: min(440px, 100%); }
.tv { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.tv-bar { display: flex; align-items: center; gap: 18px; padding: calc(10px * var(--z)) calc(20px * var(--z)); font-size: calc(15px * var(--z)); border-bottom: 1px solid var(--rule); background: var(--bar); }
.tv-brand { font-family: var(--display); font-weight: 800; font-size: 1.2em; }
.tv-now { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.tv-join b.code { font-size: 1.35em; letter-spacing: .08em; margin-left: 4px; }
.tv-main { flex: 1; position: relative; zoom: var(--z); padding: 8px 0 16px; display: flex; flex-direction: column; justify-content: center; }
.tv-fit { width: 100%; }
.tv-qr-mini { width: calc(52px * var(--z)); flex: none; } .tv-qr-mini svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.tv-main .pause-card { top: 24px; }
.tv-lobby { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 28px; max-width: 1100px; margin: 0 auto; padding: 12px 20px; align-items: start; }
.tv-join-card { background: var(--panel); border-radius: 28px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; box-shadow: var(--shadow); }
.tv-qr { width: 240px; margin-bottom: 8px; } .tv-qr svg { width: 100%; height: auto; border-radius: 14px; display: block; }
.tv-url { font-weight: 800; font-size: 1.375rem; }
.tv-code { font-size: 3.75rem; font-weight: 800; letter-spacing: .08em; line-height: 1.05; }
.tv-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tv-side h2 { font-size: 1.75rem; }
.tv-people { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tv-people li { display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--panel); border-radius: 18px; padding: 8px 12px; font-size: 1.125rem; box-shadow: var(--shadow); animation: rr-in .4s ease-out both; }
.tv-people li.off { opacity: .55; }
.tv-people .nm { color: var(--text) !important; }
.tv-next { background: var(--panel); border-radius: 22px; padding: 16px 18px; box-shadow: var(--shadow); }
.tv-pick { display: flex; gap: 14px; align-items: center; margin-top: 8px; } .tv-pick b { font-size: 1.375rem; }
.tv-plan { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; }
.tv-plan > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.tv-plan .past { opacity: .45; }
.tv-intro { max-width: 900px; margin: 12px auto; font-size: 1.375rem; padding: 28px 32px; }
.tv-intro .rules li { font-size: 1.375rem; line-height: 1.45; }
.tv-intro .rules-head h2 { font-size: 2.5rem; }
.tv .results .fb, .tv .watch { display: none; }
@media (max-width: 760px) { .tv-lobby { grid-template-columns: 1fr; } }

/* ---------- Reactions: a sticker button in the top bar, the stickers dropping down under it ---------- */
/* There all through a game and on the results. On a phone the tray is one row of seven, sized to fit, never scrolling. */
.react-bar { position: relative; display: inline-flex; flex: none; }
.react-bar-btn .sticker { display: block; }
.react-bar-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--sel); }
.react-drop { position: fixed; top: calc(var(--bar-h) + 6px); right: 8px; z-index: 34; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: max-content; max-width: calc(100vw - 16px); padding: 6px; border-radius: 26px; background: var(--panel); box-shadow: var(--pop), 0 0 0 1px var(--rule); animation: drop-in .18s ease-out both; }
.react-drop .react-btn { width: 50px; height: 50px; }
/* A phone: one row of seven across the screen, each sticker as big as the width allows. */
@media (max-width: 440px) {
  .react-drop { left: 8px; right: 8px; width: auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px; border-radius: 22px; }
  .react-drop .react-btn { width: 100%; height: auto; aspect-ratio: 1; }
  .react-drop .react-btn .sticker { width: 78%; height: auto; }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .react-drop { animation: none; } }
/* On a phone mid-game the bar keeps the game's name; the room code (for inviting) is in the menu instead. */
.menu-invite { display: none; }
@media (max-width: 420px) { .room.in-game .bar-code { display: none; } .room.in-game .menu-invite { display: flex; } }
@media (max-width: 360px) { .room.ph-results .bar-code { display: none; } .room.ph-results .menu-invite { display: flex; } }

/* Auction results: each total split into lots, set bonus and coins kept. */
.au-btbl th small, .au-btbl td small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--dim); }
.au-btbl td.r, .au-btbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.au-btbl td:last-child b { font-size: 1.0625rem; }
.au-btbl tr.me td { background: var(--me); }
.au-break p { margin-top: 10px; }
@media (max-width: 400px) { .au-btbl th, .au-btbl td { padding-left: 6px; padding-right: 6px; } }

/* A dropped line: a thin strip under the top bar (in the bar it would push the game's name out on a small phone). */
.net-strip { position: relative; z-index: 9; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 12px; background: #b45309; color: #fff; font-size: 0.8125rem; font-weight: 700; text-align: center; }
.net-strip .wait-dots i { background: #fff; }

/* The smallest phones (320-360 px): slightly smaller bar buttons, so a game's name keeps two readable lines. */
@media (max-width: 360px) { .bar .bar-btn { width: 40px; height: 40px; min-width: 40px; } .bar { gap: 4px; } .bar-game { padding: 0 4px 0 8px; } }

.bh-short { display: none; }
@media (max-width: 420px) { .bh-long { display: none; } .bh-short { display: inline; } }

/* The end of a night: sun rays turn slowly behind a podium that comes up 3rd, 2nd, then the winner with a crown. */
.champion.fin { position: relative; isolation: isolate; overflow: hidden; padding: 26px 16px 20px; }
.champion.fin::before { content: ''; position: absolute; left: 50%; top: 32%; width: 160%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgb(255 255 255 / .2) 0 9deg, transparent 9deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
@media (prefers-reduced-motion: no-preference) { .champion.fin::before { animation: fin-rays 40s linear infinite; } }
@keyframes fin-rays { to { rotate: 360deg; } }
.fin-pod { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; max-width: 420px; min-height: 236px; margin-top: 18px; }
.fp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.fp.empty { visibility: hidden; }
.fp-who { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; animation: res-in .5s ease-out both; }
.fp-av { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.fp-name { max-width: 104px; font-weight: 800; font-size: 0.8125rem; }
.fp-pts { font-family: var(--display); font-size: 0.875rem; }
.fp1 .fp-name { font-size: 0.9375rem; }
.fp1 .av { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #15161a; }
.fp-crown { position: absolute; top: -30px; left: 50%; margin-left: -16px; animation: res-crown .6s 2.9s cubic-bezier(.3, 1.5, .5, 1) both; }
.fp-crown .crown-ico { width: 32px; height: 32px; fill: #fff; stroke: #15161a; stroke-width: 1.6; stroke-linejoin: round; }
.fp-block { width: 100%; border-radius: 14px 14px 4px 4px; background: rgb(21 22 26 / .16); font-family: var(--display); font-weight: 800; font-size: 1.625rem; display: grid; place-items: center;
  transform-origin: bottom; animation: res-rise .6s cubic-bezier(.2, .8, .3, 1.15) both; }
.fp1 .fp-block { height: 110px; background: #15161a; color: #ffc83d; font-size: 2.25rem; }
.fp2 .fp-block { height: 78px; } .fp3 .fp-block { height: 56px; }
.fp3 .fp-block { animation-delay: .3s; } .fp3 .fp-who { animation-delay: .7s; }
.fp2 .fp-block { animation-delay: 1.1s; } .fp2 .fp-who { animation-delay: 1.5s; }
.fp1 .fp-block { animation-delay: 2s; } .fp1 .fp-who { animation-delay: 2.5s; }
.fin h1 { text-wrap: balance; animation: res-pop .55s 3s cubic-bezier(.2, .9, .3, 1.3) both; }
.fin-sub { text-wrap: balance; animation: res-in .4s 3.2s ease-out both; }
.fin .awards li { animation: res-in .4s calc(3.4s + var(--i, 0) * .15s) ease-out both; }
.fin-mine { margin: 6px 0 0 !important; font-size: 0.8125rem !important; font-weight: 600; opacity: .85; animation: res-in .4s 3.8s ease-out both; }
@media (prefers-reduced-motion: reduce) { .fp-who, .fp-block, .fp-crown, .fin h1, .fin-sub, .fin .awards li, .fin-mine { animation: none; } }
/* On a phone the night's end is kept short, so the box under its buttons is on screen: a lower podium, two winners
   side by side, the first award only. */
@media (max-width: 560px) {
  .champion.fin { padding: 20px 14px 14px; gap: 4px; }
  .fin-pod { min-height: 0; margin-top: 30px; }
  .fp1 .fp-block { height: 62px; font-size: 1.75rem; } .fp2 .fp-block { height: 44px; font-size: 1.375rem; } .fp3 .fp-block { height: 30px; font-size: 1.1875rem; }
  .fp-who:not(:has(> :nth-child(3))) { flex-wrap: nowrap; }
  .fp-who:not(:has(> :nth-child(3))) .fp-crown { top: -26px; }
  .fin .awards { margin-top: 6px; }
  .fin .awards li:nth-child(n+2), .fin-mine { display: none; }
}

/* Under the results' main button: the quieter ones, not stuck to the bottom of the screen. */
.res-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.res-more:empty { display: none; }
.res-more .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.res-more .ghost-btn .ico { width: 16px; height: 16px; }
@media (max-width: 560px) { .res-more .ghost-btn { flex: 1 1 auto; } .res-more .in-list { flex: 1 1 100%; justify-content: center; } }

/* Home: a game night is the main way in. */
.hero-card .start-night { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.nights-sec { margin: 4px 0 26px; }
.nights-sec .sec-head { margin-bottom: 0; }
.nights-sec .nks { margin-top: 16px; }

/* ---------- Chaotic Cocktail ---------- */
.g-cocktail { background: radial-gradient(70% 40% at 100% 0%, rgb(255 61 127 / .2), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgb(46 211 160 / .14), transparent 70%), var(--bg); }
:root[data-theme="light"] .g-cocktail { background: radial-gradient(70% 40% at 100% 0%, rgb(255 61 127 / .12), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgb(46 211 160 / .12), transparent 70%), var(--bg); }
.ck { width: 100%; max-width: 760px; margin: 0 auto; padding: 10px 12px 28px; display: flex; flex-direction: column; gap: 12px; }
.ck-hud { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.ck-round, .ck-left { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.ck-left { align-items: flex-end; }
.ck-round b, .ck-left b { font-family: var(--display); font-size: 1.625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ck-k { font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.ck-heat { display: inline-flex; flex-direction: column; gap: 4px; }
.ck-bars { display: inline-flex; gap: 3px; align-items: flex-end; }
.ck-bars i { width: 7px; height: calc(6px + var(--i) * 2px); border-radius: 3px; background: var(--soft); }
.ck-bars i.on { background: hsl(calc(48 - var(--i) * 6) 96% 54%); }
.ck-heat-l { font-size: 0.75rem; font-weight: 800; color: var(--dim); white-space: nowrap; }
.ck-sudden { font-size: 0.75rem; font-weight: 800; color: #fff; background: #d92d20; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .ck-sudden { animation: ck-throb 1.4s ease-in-out infinite; } }
/* A glow, not a grow: the pill can be as wide as the screen, and growing would push it past the edge. */
@keyframes ck-throb { 50% { box-shadow: 0 0 0 4px rgb(217 45 32 / .35), 0 0 18px rgb(217 45 32 / .5); } }
.ck-field { display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 5px 4px; margin: 0 -4px; }
.ck-field::-webkit-scrollbar { display: none; }
.ck-alive, .ck-outs { display: flex; align-items: center; gap: 7px; flex: none; }
.ck-outs { padding-left: 10px; border-left: 2px dashed var(--line); gap: 4px; }
.ck-p { position: relative; display: inline-flex; flex: none; }
.ck-p .av { transition: box-shadow .25s, filter .25s, opacity .25s; }
.ck-p.me .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sel); }
.ck-p.done .av, .ck-p.ok .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); }
.ck-p.no .av { filter: grayscale(1); opacity: .55; }
.ck-tick { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg); }
.ck-p.out .av { filter: grayscale(1); opacity: .45; }
.ck-p.out.fresh { animation: ck-fall .7s .4s ease-in both; }
@keyframes ck-fall { 0% { transform: translateY(-14px) rotate(0); opacity: 0; } 60% { transform: translateY(2px) rotate(-12deg); opacity: 1; } }
.ck-more { font-size: 0.75rem; color: var(--dim); font-weight: 700; }

/* The shaker: a glass that shakes, a reel of games that lands on this round's, then its card turns over. */
.ck-pick { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 8px; }
.ck-glass { width: 64px; height: 64px; transform-origin: 50% 85%; }
.ck-glass svg { width: 100%; height: 100%; overflow: visible; }
.g-glass { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-liq { fill: #ff3d7f; } .g-l1 { fill: #ffc83d; } .g-l2 { fill: #2ed3a0; }
.g-straw { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.g-bub { fill: #fff; }
.ck-reel { width: 96px; height: 96px; overflow: hidden; border-radius: 28px; background: var(--panel); box-shadow: 0 0 0 4px var(--k), 0 12px 30px rgb(0 0 0 / .25); }
.ck-strip { display: flex; flex-direction: column; transform: translateY(calc((var(--n) - 1) * -96px)); }
.ck-cell { width: 96px; height: 96px; flex: none; display: grid; place-items: center; }
.ck-cell .gicon.big { width: 72px; height: 72px; }
.ck-card { width: min(100%, 440px); text-align: center; padding: 18px 18px 16px; border-radius: 26px; background: var(--k); color: var(--kink); box-shadow: 0 6px 0 rgb(0 0 0 / .25);
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ck-from { font-size: 0.75rem; font-weight: 700; opacity: .85; }
.ck-title { font-family: var(--display); font-size: clamp(1.625rem, 7.5vw, 2.25rem); margin: 0; line-height: 1.05; letter-spacing: -.02em; }
.ck-rule { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.ck-card .ck-bars i { background: rgb(0 0 0 / .18); }
.ck-card .ck-bars i.on { background: currentColor; }
.ck-card .ck-heat { align-items: center; margin-top: 4px; }
.ck-card .ck-heat-l { color: inherit; opacity: .85; }
.ck-warn { margin: 0; font-weight: 800; color: #fff; background: #d92d20; padding: 10px 14px; border-radius: 16px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .ck-glass { animation: ck-shake .45s ease-in-out 3; }
  .g-bub { animation: ck-bub 1.1s ease-in infinite; } .g-bub.b2 { animation-delay: .5s; }
  .ck-strip { animation: ck-spin 1.5s cubic-bezier(.15, .75, .25, 1) both; }
  .ck-card { animation: ck-flip .55s 1.45s cubic-bezier(.2, 1.3, .4, 1) both; }
  .ck-warn { animation: res-in .4s 2s ease-out both; }
}
@keyframes ck-shake { 25% { transform: rotate(-16deg) translateX(-4px); } 75% { transform: rotate(16deg) translateX(4px); } }
@keyframes ck-bub { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
@keyframes ck-spin { from { transform: translateY(0); filter: blur(2px); } 75% { filter: blur(0); } to { transform: translateY(calc((var(--n) - 1) * -96px)); } }
@keyframes ck-flip { from { opacity: 0; transform: perspective(600px) rotateX(75deg) translateY(16px) scale(.92); } }

/* A challenge being played. */
.ck-stage, .ck-reveal { display: flex; flex-direction: column; gap: 12px; }
.ck-stage { animation: res-in .3s ease-out both; }
.ck-chead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: var(--panel); background: color-mix(in srgb, var(--k) 16%, var(--panel)); }
.ck-ct { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ck-ct b { font-family: var(--display); font-size: 1rem; }
.ck-ct span { font-size: 0.8125rem; color: var(--lead); line-height: 1.35; }
.ck-watching { margin: 0; text-align: center; font-weight: 700; color: var(--lead); padding: 10px; border-radius: 14px; background: var(--panel2); }
.ck-locked { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 14px; border-radius: 18px; background: var(--panel); font-weight: 700; color: var(--lead); text-align: center; }
.ck-tol { font-size: 0.8125rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--tint-gold); color: var(--goldtext); white-space: nowrap; }
.ck-clock .sw-face { min-height: clamp(150px, 24vw, 210px); }
.ck-rx { position: relative; height: min(46dvh, 400px); }
.ck-limit { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font); font-size: 0.8125rem; font-weight: 700; background: rgb(0 0 0 / .28); padding: 4px 12px; border-radius: 99px; white-space: nowrap; }
.ck-bait { margin-top: 10px; font-size: clamp(1rem, 3.6vw, 1.25rem); }
.ck-bait b { color: var(--goldtext); }
.ck-choices .choice:disabled { cursor: default; }
.ck-hl .choice { justify-content: center; font-family: var(--display); font-size: 1.25rem; min-height: 72px; }
.ck-arr { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ck-hl .choice .grow { flex: 0 1 auto; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Two answers side by side (this or that): each one's words in the middle of its tile. */
.choices.two .choice { justify-content: center; text-align: center; }
.ck-compass { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ck-rose { width: 54px; height: 54px; transform: rotate(var(--r)); flex: none; }
.ck-rose circle { fill: none; stroke: var(--line); stroke-width: 2.5; }
.ck-rose path { fill: var(--dim); } .ck-rose path.n { fill: #ff3d7f; }
.ck-ask { font-family: var(--display); font-size: clamp(1.375rem, 6vw, 1.875rem); margin-top: 6px; }
.ck-says { display: block; font-size: 0.75rem; font-weight: 600; color: var(--dim); margin-top: 2px; font-family: var(--font); }
.choices.ck-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-tiles .choice { justify-content: center; text-align: center; font-family: var(--display); font-size: 0.9375rem; min-height: 64px; overflow-wrap: anywhere; }
.ck-tiles .choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .choices.ck-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ck-tiles .choice:last-child:nth-child(odd) { grid-column: auto; } }
.pf-frame.ck-photo { width: min(100%, 340px, max(160px, calc(var(--vvh, 100dvh) - 430px))); }
.ck-word { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ck-word .board { grid-template-rows: none; aspect-ratio: auto; width: min(290px, 72vw); }
.ck-word .tile { aspect-ratio: 1; }
.ck-word .kb { margin-top: 4px; }
.ck-jumble { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.ck-slots, .ck-letters { display: flex; gap: 8px; justify-content: center; }
.ck-slot { width: 52px; height: 60px; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; font-family: var(--display); font-size: 1.625rem; font-weight: 800; text-transform: uppercase; }
.ck-slot.on { border-style: solid; border-color: var(--k); background: var(--panel); animation: res-pop .2s ease-out both; }
.ck-slots.shake { animation: shake .4s; }
.ck-letter { width: 56px; height: 64px; min-height: 0; padding: 0; border-radius: 16px; background: var(--k); color: #15161a; font-family: var(--display); font-size: 1.75rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 4px 0 rgb(0 0 0 / .28); }
.ck-letter.used { opacity: .2; box-shadow: none; transform: translateY(4px); }
@media (max-width: 380px) { .ck-slot { width: 44px; height: 52px; font-size: 1.375rem; } .ck-letter { width: 48px; height: 58px; font-size: 1.5rem; } .ck-slots, .ck-letters { gap: 6px; } }
.ck-order { display: flex; flex-direction: column; gap: 10px; }
.ck-oq { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.ck-olist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ck-ocard { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 56px; padding: 8px 14px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); font-weight: 600; }
.ck-ocard:disabled { opacity: 1; }
.ck-ocard.on { box-shadow: inset 0 0 0 3px var(--k); }
.ck-on { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--panel2); font-family: var(--display); font-size: 0.8125rem; font-weight: 800; }
.ck-ocard.on .ck-on { background: var(--k); color: #15161a; }
.ck-olist:not(.pick) li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--panel); }
.ck-olist li.ok { box-shadow: inset 0 0 0 2px var(--ok); } .ck-olist li.no { box-shadow: inset 0 0 0 2px var(--bad); }
.ck-ends { display: flex; justify-content: space-between; margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.ck-emoji .ck-e { font-size: clamp(2.25rem, 10vw, 3.5rem); letter-spacing: .08em; line-height: 1.2; }
.ck-story { font-family: var(--font); font-size: 0.9375rem; font-weight: 600; color: var(--lead); margin: 10px 0 0; animation: res-in .4s ease-out both; }
.ck-meld { background: #ffc83d; color: #15161a; box-shadow: none; }
.ck-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ck-groups li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--panel); overflow-wrap: anywhere; }
.ck-groups li.ok { box-shadow: inset 0 0 0 2px var(--ok); } .ck-groups li.no { opacity: .7; }
.ck-gw, .ck-lout { display: inline-flex; flex: none; }
.ck-gw .av + .av, .ck-lout .av + .av { margin-left: -6px; }
.ck-match { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ck-top { display: flex; flex-direction: column; align-items: center; gap: 6px; --cw: 70px; }
.ck-hand { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; --cw: 56px; }
.ck-hand.hidden { visibility: hidden; }
.ck-hand .lc { transition: transform .2s; }
.ck-hand .lc.ck-chosen { transform: translateY(-10px); }
.ck-hand .lc.ck-fit { box-shadow: 0 0 0 3px var(--ok), 0 4px 10px #0006; }
.ck-hand .lc.ck-nofit { opacity: .4; }
@media (max-width: 360px) { .ck-hand { --cw: 50px; gap: 6px; } }
.ck-code-ans { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }

/* The reveal: a stamp for you, who went out, the answer, and everyone's result. */
.ck-stamp { align-self: center; margin-top: 4px; }
.ck-stamp span { display: inline-block; font-family: var(--display); font-weight: 900; font-size: clamp(2.125rem, 11vw, 3.375rem); line-height: 1; text-transform: uppercase; padding: 8px 22px;
  border: 5px solid currentColor; border-radius: 18px; transform: rotate(-6deg); }
.ck-stamp.in { color: var(--ok); } .ck-stamp.out { color: var(--bad); } .ck-stamp.saved { color: var(--goldtext); }
.ck-line { margin: 0; text-align: center; font-family: var(--display); font-size: clamp(1.0625rem, 4.6vw, 1.375rem); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.ck-answer { display: flex; flex-direction: column; gap: 12px; }
.ck-res { display: flex; flex-direction: column; gap: 6px; }
.ck-rows { list-style: none; margin: 0; padding: 0; }
.ck-rows li { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--rule); }
.ck-rows li:first-child { border-top: 0; }
.ck-rows li.me { background: var(--sel-bg); margin: 0 -10px; padding: 0 10px; border-radius: 14px; border-top-color: transparent; }
.ck-rows li.gone .av { filter: grayscale(1); }
.ck-rn { min-width: 0; display: flex; flex-direction: column; }
.ck-mark { width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative; }
.ck-mark.ok { background: var(--ok); }
.ck-mark.ok::after { content: ''; position: absolute; left: 8px; top: 6px; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.ck-mark.no { background: var(--soft); }
.ck-mark.no::before, .ck-mark.no::after { content: ''; position: absolute; left: 7px; top: 11.5px; width: 12px; height: 3px; border-radius: 2px; background: var(--dim); transform: rotate(45deg); }
.ck-mark.no::after { transform: rotate(-45deg); }
.ck-x { flex: none; font-family: var(--display); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; color: #fff; background: #d92d20; padding: 4px 10px; border-radius: 8px; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .ck-stamp span { animation: ck-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
  .ck-stamp.out span { animation: ck-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both, ck-quake .45s .5s; }
  .ck-line { animation: res-in .4s .35s ease-out both; }
  .ck-rows li { animation: res-in .35s calc(.5s + var(--i) * .07s) ease-out both; }
  .ck-x { animation: ck-stamp .4s calc(.9s + var(--i) * .07s) cubic-bezier(.2, 1.6, .4, 1) both; }
}
@keyframes ck-stamp { from { transform: scale(2.6) rotate(-24deg); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }
@keyframes ck-quake { 20%, 60% { translate: -6px 2px; } 40%, 80% { translate: 6px -2px; } }

/* Stop the Clock's answer: the window and everyone's stop on one line. */
.ck-line-chart { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: var(--panel); }
.ck-track { position: relative; height: 44px; margin: 12px 14px 0; border-radius: 22px; background: var(--panel2); }
.ck-wnd { position: absolute; top: 0; bottom: 0; border-radius: 22px; background: rgb(46 133 64 / .3); background: color-mix(in srgb, var(--ok) 30%, transparent); }
.ck-mid { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.ck-dot { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #15161a; font-size: 0.75rem; font-weight: 800; box-shadow: 0 0 0 2px var(--panel); }
.ck-dot.no { opacity: .55; }
.ck-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--dim); font-weight: 700; }
/* Reflex's answer: everyone's time against the limit. */
.ck-bars-chart { display: flex; flex-direction: column; gap: 6px; padding: 26px 14px 14px; border-radius: 20px; background: var(--panel); }
.ck-bc-in { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ck-limit-l { position: absolute; top: -18px; bottom: -4px; width: 2px; background: var(--bad); z-index: 1; }
.ck-limit-l span { position: absolute; top: -2px; left: 6px; font-size: 0.75rem; font-weight: 800; color: var(--bad); white-space: nowrap; }
.ck-bar { height: 30px; width: var(--w); min-width: 84px; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--panel2); transform-origin: left; }
.ck-bar.ok { background: var(--right-bg); }
.ck-bl { width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #15161a; font-size: 0.6875rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.ck-bar b { font-size: 0.75rem; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .ck-dot { animation: res-pop .4s calc(.6s + var(--i) * .08s) both; }
  .ck-bar { animation: ck-grow .5s calc(.5s + var(--i) * .08s) ease-out both; }
}
@keyframes ck-grow { from { transform: scaleX(0); } }

/* The last one standing. */
.ck-win { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 34px 0 10px; }
.ck-crowned { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.ck-wav { position: relative; display: inline-flex; }
.ck-wav .av { box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px #ffc83d, 0 20px 50px rgb(255 200 61 / .35); }
.ck-crown { position: absolute; top: -44px; left: 50%; width: 52px; margin-left: -26px; }
.ck-crown svg { width: 52px; height: 52px; fill: #ffc83d; stroke: #15161a; stroke-width: 1.4; stroke-linejoin: round; }
.ck-wname { font-size: clamp(1.875rem, 8vw, 2.75rem); margin: 14px 0 0; text-wrap: balance; }
.ck-wsub { margin: 0; color: var(--lead); font-weight: 600; }
.ck-fallen { list-style: none; margin: 8px 0 0; padding: 0; width: min(100%, 380px); display: flex; flex-direction: column; gap: 6px; }
.ck-fallen li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--panel); text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .ck-wav { animation: ck-rise .7s cubic-bezier(.2, 1.4, .4, 1) both; }
  .ck-crown { animation: res-crown .6s .6s cubic-bezier(.3, 1.5, .5, 1) both; }
  .ck-wname { animation: res-pop .5s .9s both; }
  .ck-wsub { animation: res-in .4s 1.1s ease-out both; }
  .ck-fallen li { animation: res-in .35s calc(1.3s + var(--i) * .1s) ease-out both; }
}
@keyframes ck-rise { from { transform: translateY(40px) scale(.6); opacity: 0; } }
/* After the cocktail: round by round. */
.ck-sum .ck-log { list-style: none; margin: 10px 0 0; padding: 0; }
.ck-log li { display: flex; align-items: center; gap: 10px; min-height: 46px; border-top: 1px solid var(--rule); }
.ck-log li:first-child { border-top: 0; }
.ck-log b { font-size: 0.875rem; }
.ck-choices .choice { position: relative; }
.ck-choices .who-picked { position: static; flex: 1 1 100%; margin: 4px 0 0 !important; display: inline-flex; justify-content: center; }
.ck-choices:not(.ck-tiles):not(.two) .who-picked { justify-content: flex-start; }
.ck-choices .who-picked .av + .av { margin-left: -5px; }
.ck-why { margin: 0; text-align: center; color: var(--lead); line-height: 1.45; }
.nb-row { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.nb-row .nb-stops { flex: 1 1 auto; min-width: 0; }
.nb-row .nb-me { flex: none; }
.mg-play { display: grid; place-items: center; }
.mg-play .ico { width: 28px; height: 28px; margin-left: 3px; }
/* Sudden death gets its own line under the round, so the clock never runs off a small phone. */
.ck-hud { flex-wrap: wrap; row-gap: 8px; }
.ck-sudden { order: 9; flex: 1 1 100%; text-align: center; padding: 6px 12px; font-size: 0.75rem; white-space: normal; }

/* ---------- Constraints ---------- */
.cs { --cs: #a8e05f; --cs-ink: #15161a; --cs-ok: var(--ok); --cs-no: var(--bad); }
.cs-pass { position: sticky; top: calc(var(--bar-h) + 6px); z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-radius: 24px;
  background: var(--panel); box-shadow: var(--shadow), 0 0 0 1px var(--rule); transition: box-shadow .3s ease; }
.cs-pass.ready { box-shadow: var(--lift), 0 0 0 2px var(--cs); animation: cs-glow 1.6s ease-in-out infinite; }
.cs-pass.locked { box-shadow: var(--shadow), 0 0 0 2px var(--gold); }
@keyframes cs-glow { 50% { box-shadow: var(--lift), 0 0 0 2px var(--cs), 0 0 26px color-mix(in srgb, var(--cs) 45%, transparent); } }
.cs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.cs-when { font-weight: 700; line-height: 1.3; }
.cs-top .clock { flex: none; }
.cs-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 8px; }
.cs-strip i { border-radius: 99px; background: var(--soft); transition: background-color .25s ease; }
.cs-strip i.no { background: var(--cs-no); opacity: .75; }
.cs-strip i.ok { background: var(--cs-ok); }
.cs-strip i.out { background: var(--cs); }
.cs-strip i.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.cs-input { width: 100%; min-height: 56px; max-height: 30vh; field-sizing: content; resize: none; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--input); color: var(--text);
  font: 600 1.25rem/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; word-break: break-all; }
.cs-input:focus { outline: none; border-color: var(--cs); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs) 25%, transparent); }
.cs-input[readonly] { opacity: .8; }
.cs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.875rem; }
.cs-count { color: var(--dim); }
.cs-count.bad { color: var(--bad); font-weight: 700; }
.cs-score { margin-left: auto; }
.cs-score b { font-size: 1.0625rem; }
.cs-place { padding: 2px 10px; border-radius: 99px; background: var(--panel2); font-weight: 700; }
.cs-status { margin: 0; font-weight: 600; color: var(--lead); }
.cs-act { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.cs-act p { margin: 0; }
.cs-act.ready .cs-status { color: var(--cs-ok); }
.cs-lock:disabled { opacity: .55; }
.cs-act.ready .cs-lock { background: var(--cs); color: var(--cs-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs) 30%, transparent); }

.cs-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-rule { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 18px;
  --edge: var(--cs-no); background: var(--panel); box-shadow: var(--shadow), inset 4px 0 0 var(--edge); transition: background-color .3s ease, box-shadow .3s ease; }
.cs-rule.ok { --edge: var(--cs-ok); background: color-mix(in srgb, var(--panel) 88%, var(--cs-ok)); }
.cs-rule.no { background: color-mix(in srgb, var(--panel) 92%, var(--cs-no)); }
.cs-rule.idle { --edge: var(--cs); }
.cs-rule.new { animation: cs-in .6s cubic-bezier(.2, .9, .3, 1.3) both, cs-flash 1.4s ease .2s 2; }
@keyframes cs-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes cs-flash { 50% { box-shadow: var(--shadow), inset 4px 0 0 var(--edge), 0 0 0 3px var(--gold); } }
.cs-num { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; background: var(--panel2); font: 800 0.875rem/1 var(--display); }
.cs-rule.ok .cs-num { background: var(--cs-ok); color: var(--bg); }
.cs-text { line-height: 1.45; padding-top: 4px; overflow-wrap: anywhere; }
.cs-text b { font-weight: 800; }
.cs-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.cs-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cs-rule.ok .cs-mark { color: var(--cs-ok); animation: cs-pop .35s ease; }
.cs-rule.no .cs-mark { color: var(--cs-no); }
@keyframes cs-pop { 40% { transform: scale(1.35); } }
.cs-new { position: absolute; top: -8px; right: 12px; padding: 2px 9px; border-radius: 99px; background: var(--gold); color: #15161a; font: 800 0.75rem/1.5 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.cs-list { margin-top: 2px; padding: 0; border: 0; font-size: 0.8125rem; }
.cs-list summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.cs-list p { margin: 4px 0 0; color: var(--dim); }

.cs-h { margin: 4px 0 8px; font-size: 1rem; }
.cs-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-board li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 14px; }
.cs-board li.me { background: var(--me); }
.cs-board li.fin .cs-val { color: var(--goldtext); }
.cs-pl { font-weight: 800; text-align: center; color: var(--dim); }
.cs-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-bar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.cs-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--cs-ok); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.cs-board li.fin .cs-bar i { background: var(--gold); }
.cs-val { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.cs-val .mk { width: 16px; height: 16px; fill: var(--gold); }

.cs-mix { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 16px; max-width: 460px; margin: 0 auto; }
.cs-mix h2 { margin: 6px 0 0; }
.cs-mix p { margin: 0; line-height: 1.45; }
.cs-mix-cards { position: relative; width: 150px; height: 96px; }
.cs-mix-cards i { position: absolute; left: 25px; top: 18px; width: 100px; height: 62px; border-radius: 14px; background: var(--panel); box-shadow: var(--lift), inset 0 0 0 2px var(--cs);
  animation: cs-shuffle 1.2s cubic-bezier(.5, 0, .3, 1) calc(var(--i) * .12s) infinite; }
.cs-mix-cards i::before, .cs-mix-cards i::after { content: ""; position: absolute; left: 14px; right: 26px; height: 7px; border-radius: 99px; background: var(--soft); top: 18px; }
.cs-mix-cards i::after { top: 34px; right: 44px; }
@keyframes cs-shuffle { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(calc((var(--i) - 2) * 18px), -10px) rotate(calc((var(--i) - 2) * 6deg)); } 60% { transform: translate(0, 4px) rotate(0); } }
.cs-mix-bar { width: min(280px, 100%); height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.cs-mix-bar i { display: block; height: 100%; width: var(--w); background: var(--cs); border-radius: inherit; transition: width .3s ease; }
.cs-warn { font-weight: 700; color: var(--goldtext); }

.cs-over { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 16px; border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); animation: cs-in .5s ease both; }
.cs-over h2 { margin: 4px 0 0; }
.cs-over p { margin: 0; }
.cs-answer { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; padding: 12px; border-radius: 16px; background: var(--panel2); }
.cs-answer code { font: 700 1.125rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.cs-sum { display: flex; flex-direction: column; gap: 10px; }
.cs-sumlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-sumlist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; }
.cs-sumlist .cs-num { min-width: 26px; height: 26px; font-size: 0.75rem; }

/* While typing on a phone, the top bar scrolls away so the box and more of the rules fit above the keyboard. */
@media (max-width: 640px) {
  .room:has(.cs-input:focus) .bar { position: static; }
  .room:has(.cs-input:focus) .cs-pass { top: 4px; }
  .cs-pass { padding: 10px 12px 12px; gap: 6px; }
  .cs-input { font-size: 1.125rem; min-height: 50px; padding: 10px 12px; }
  .cs-top { min-height: 40px; }
  .cs-lock { min-height: 46px; }
}
/* A phone on its side with the keyboard up leaves a strip of screen: the box sits right at the top, small. */
@media (min-aspect-ratio: 3/2) and (max-height: 500px) {
  .cs-pass { top: 4px; padding: 8px 12px; gap: 5px; }
  .cs-top { min-height: 0; }
  .cs-top .clock { transform: scale(.8); margin: -4px 0; }
  .cs-input { min-height: 42px; font-size: 1rem; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-pass.ready, .cs-rule.new, .cs-rule.ok .cs-mark, .cs-mix-cards i, .cs-over { animation: none; }
}
@media (forced-colors: active) {
  .cs-strip i.ok, .cs-bar i { background: Highlight; }
  .cs-strip i.no { background: GrayText; }
}

/* ---------- the host's room settings, own words, and night planning help ---------- */
/* On a phone, after the players and before the folds (as the watch switch); its rows are its own, not the lobby's. */
.lobby .room-set, .lobby .rs-notes { order: 4; }
.room-set { padding: 0 16px; }
.room-set > summary > span { display: flex; flex-direction: column; gap: 2px; }
.room-set > summary .small { font-weight: 400; }
.rs-body { padding: 4px 0 16px; }
.lobby .rs-body .switch-row { order: 0; }
.rs-row { padding: 6px 0; }
.rs-body .tint { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rs-notes { margin: 0; padding: 12px 16px 12px 32px; display: grid; gap: 4px; }
.our-words textarea { width: 100%; min-height: 160px; resize: vertical; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); }
.our-words textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ns-alone { padding: 12px 14px; border-radius: 14px; background: var(--soft); line-height: 1.45; }
.ns-go { display: grid; gap: 8px; }
.seg.tabs.locked button:not(.on) { opacity: .75; }
.cw-note { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--soft); text-align: center; text-wrap: balance; }

/* ---------- a long screen's main button stays in reach on a small phone ---------- */
/* The button (Lock in, Done) sticks to the bottom of the screen while the page scrolls under it, on a strip of the
   page's own colour so what passes beneath does not show through. */
.pod-gain { font-size: 0.75rem; font-weight: 800; color: var(--ok); }
.pod-key { margin: 6px 0 0; text-align: center; }
.nowrap:not(.row) { white-space: nowrap; }
.intro-x2 { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--soft); font-weight: 600; }
.intro-x2 b { font-family: var(--display); margin-right: 6px; }
.act-bar { position: sticky; bottom: 0; z-index: 5; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 78%, transparent); }
.au-mysets { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-weight: 600; }
.lc-hand .lc.ok:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The TV's big moment at each reveal: the answer as a headline and the faces of whoever scored, over the whole screen
   for about three seconds (app.js TvMoment). Sized by the screen, so it reads from the sofa on any TV. */
.tv-moment { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 4vmin; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: tvm-in .25s ease-out both, tvm-out .35s ease-in 3.05s forwards; }
.tvm-card { width: min(92vw, 1500px); display: flex; flex-direction: column; align-items: center; gap: 2.4vmin; text-align: center; }
.tvm-kick { display: inline-flex; align-items: center; gap: 1.4vmin; font: 700 clamp(1rem, 2.4vmin, 1.75rem) var(--display); color: var(--lead); text-transform: uppercase; letter-spacing: .08em; }
.tvm-title { margin: 0; font: 800 clamp(2.25rem, 7.5vmin, 6.5rem)/1.06 var(--display); color: var(--text); text-wrap: balance; overflow-wrap: anywhere; animation: tvm-pop .55s cubic-bezier(.3, 1.5, .5, 1) .08s both; }
.tvm-sub { margin: 0; font-size: clamp(1.125rem, 3.2vmin, 2.5rem); color: var(--lead); text-wrap: balance; animation: tvm-in .3s ease-out .3s both; }
.tvm-people { list-style: none; margin: 2vmin 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin 4vmin; }
.tvm-people li { display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; width: min(21vmin, 230px); min-width: 0; animation: tvm-rise .6s cubic-bezier(.3, 1.5, .5, 1) calc(.35s + var(--i) * .12s) both; }
.tvm-people .av { width: min(17vmin, 200px) !important; height: min(17vmin, 200px) !important; box-shadow: 0 0 0 .7vmin var(--panel), 0 1.2vmin 3vmin rgb(0 0 0 / .3); }
.tvm-name { max-width: 100%; font-size: clamp(1rem, 2.8vmin, 2.25rem); font-weight: 700; }
.tvm-pts, .tvm-tag { font: 800 clamp(1.125rem, 3.4vmin, 2.75rem)/1 var(--display); padding: .25em .7em; border-radius: 99px; }
.tvm-pts { background: var(--btn); color: var(--on-btn); }
.tvm-tag { background: var(--red); color: #fff; }
.tv-moment.out .tvm-people .av { filter: grayscale(.8); }
.tvm-people .tvm-more { width: auto; align-self: center; font-size: clamp(1rem, 2.8vmin, 2.25rem); font-weight: 700; color: var(--lead); }
@keyframes tvm-in { from { opacity: 0; } }
@keyframes tvm-out { to { opacity: 0; } }
@keyframes tvm-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes tvm-rise { from { opacity: 0; transform: translateY(6vmin) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .tv-moment, .tvm-title, .tvm-sub, .tvm-people li { animation: none; } }
/* A long address written out as a link (Google's policy pages) wraps on a small phone instead of widening the page. */
.doc a { overflow-wrap: anywhere; }