/* frontend/thinice.css — THIN ICE board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Dibs / Gulls precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's VECTOR palette (docs/design/Batch6/Thin ice.dc.html,
 * the `--v-*` block). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits outside
 * `.ti-root`. Players are SHAPE first (circle, triangle, square, diamond — `[data-o]` rules), colour second;
 * the four colours are one lightness, so in greyscale only the shapes differ, on purpose.
 *
 * ── 🎨 THE PIXEL STYLE COMES LATER, AS A TOGGLE (mock F10) ────────────────────
 * Radii, fonts and colours are variables (`--ti-r*`, `--ti-ui`). ⛔ TI-M3: the player-1 marker's roundness is
 * NOT one of them — `.ti-mk[data-o="0"]` hard-codes `border-radius: 50%`, so a pixel theme that zeroes the
 * radii cannot turn the circle into a second square (the mock did).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements by CSS grid areas. Every row and column is a FIXED size except the sheet band
 * (desktop: the centre cell of a fixed 1280 × 553 box; phone: the `1fr` row). Four card slots always exist
 * (an unused one is an OPEN SEAT). The hex size is ONE variable, `--ti-hw` (px), set by thinice.js from the
 * sheet band's size. Feedback changes colour, glow or a transform — never size or spacing.
 */

#thinice-game-screen, .ti-root {
  --ti-sea: oklch(.305 .055 244); --ti-seaDeep: oklch(.195 .05 247);
  --ti-ice: oklch(.935 .02 230); --ti-iceLo: oklch(.85 .028 234); --ti-iceEdge: oklch(.66 .05 240);
  --ti-gapFill: oklch(.15 .04 248); --ti-gapRing: oklch(.34 .05 244);
  --ti-fish: oklch(.46 .085 240);
  --ti-lit: oklch(.55 .15 200); --ti-litFill: oklch(.955 .04 200);
  --ti-sel: oklch(.93 .09 95); --ti-selGlow: oklch(.93 .09 95 / .55);
  --ti-far: oklch(.60 .03 242);
  --ti-pen: oklch(.25 .022 252); --ti-penBelly: oklch(.96 .012 228); --ti-beak: oklch(.78 .15 62);
  --ti-panel: oklch(.265 .035 245); --ti-line: oklch(.42 .04 242);
  --ti-ink: oklch(.965 .01 230); --ti-dim: oklch(.745 .025 235);
  --ti-roll: oklch(.60 .16 42); --ti-rollLo: oklch(.48 .15 42);
  --ti-bad: oklch(.62 .17 27); --ti-ok: oklch(.72 .13 155);
  --ti-p0: oklch(.78 .14 88); --ti-p1: oklch(.72 .13 205); --ti-p2: oklch(.72 .15 342); --ti-p3: oklch(.71 .15 148);
  --ti-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ti-rBox: 14px; --ti-rCard: 8px; --ti-rBtn: 9px;
}

@keyframes ti-halo { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes ti-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes ti-shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-2px) } 75% { transform: translateX(2px) } }
@keyframes ti-drop { 0% { transform: translateY(-14px); opacity: 0 } 70% { transform: translateY(1px); opacity: 1 } 100% { transform: none; opacity: 1 } }
@keyframes ti-sink { 0% { transform: scale(1); opacity: 1 } 100% { transform: scale(.82); opacity: 0 } }
/* ⛔ the callout is centred by translateX(-50%): its rise animation must carry that, or the animation replaces it */
@keyframes ti-rise { 0% { opacity: 0; transform: translate(-50%, 8px) } 100% { opacity: 1; transform: translate(-50%, 0) } }
@keyframes ti-think { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.ti-setup-card { max-width: 540px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.ti-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.ti-setup-title { margin: 0; font-size: 28px; }
.ti-setup-blurb, .ti-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.ti-setup-hint { opacity: .75; font-size: 13px; }
.ti-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ti-setup-lab { font-weight: 700; font-size: 13px; min-width: 64px; }
/* The die explained: both texts share one grid cell, so the note is always the taller one's height. */
.ti-setup-note { display: grid; font-size: 13px; line-height: 1.45; }
.ti-setup-note > span { grid-area: 1 / 1; }
.ti-setup-note > span[data-on="0"] { visibility: hidden; }
.ti-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ti-opt { min-width: 40px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ti-line); background: rgba(255, 255, 255, .06); color: inherit; font-weight: 800; cursor: pointer; }
.ti-opt[data-on="1"] { border-color: var(--ti-lit); color: var(--ti-litFill); box-shadow: 0 0 12px -4px var(--ti-lit); }
.ti-start { height: 48px; border: 0; border-radius: 12px; background: linear-gradient(180deg, var(--ti-roll), var(--ti-rollLo)); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; }
@media (hover: hover) { .ti-start:hover, .ti-opt:hover { filter: brightness(1.1); } }

/* ── identity: SHAPE (colour second) ───────────────────────────────────── */
.ti-mk { flex: none; display: inline-block; width: var(--mk, 12px); height: var(--mk, 12px); background: var(--pc); }
/* scoped: other boards use data-o too (Dibs, Gulls) */
.ti-root [data-o="0"], .ti-mk[data-o="0"] { --pc: var(--ti-p0); }
.ti-root [data-o="1"], .ti-mk[data-o="1"] { --pc: var(--ti-p1); }
.ti-root [data-o="2"], .ti-mk[data-o="2"] { --pc: var(--ti-p2); }
.ti-root [data-o="3"], .ti-mk[data-o="3"] { --pc: var(--ti-p3); }
/* ⛔ TI-M3 — the circle is a HARD 50%, never a radius variable a pixel theme can zero */
.ti-mk[data-o="0"] { border-radius: 50%; }
.ti-mk[data-o="1"] { clip-path: polygon(50% 3%, 100% 100%, 0 100%); }
.ti-mk[data-o="2"] { border-radius: 1px; }
.ti-mk[data-o="3"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ── the board root (phone first: the mock's 384 × 812 arrangement) ─────── */
.ti-root {
  --ti-hw: 42px; --ti-hh: calc(var(--ti-hw) / .8660254);
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--ti-phone-h, 652px); padding: 10px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 24px 122px minmax(0, 1fr) 80px 22px;
  grid-template-areas: "head" "cards" "sheet" "act" "feed";
  gap: 8px;
  background: radial-gradient(125% 105% at 50% -12%, var(--ti-sea) 0%, var(--ti-seaDeep) 72%);
  color: var(--ti-ink); font-family: var(--ti-ui);
  border-radius: var(--ti-rBox); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ti-root *, .ti-root *::before, .ti-root *::after { box-sizing: border-box; }
.ti-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.ti-root i, .ti-root em { font-style: normal; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ti-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.ti-brand { flex: none; font: 800 8px/1 var(--ti-ui); letter-spacing: .2em; color: var(--ti-dim); }
.ti-phase { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 700 8px/1 var(--ti-ui); letter-spacing: .06em; color: var(--ti-dim); opacity: .75; }
/* the marker sits at a FIXED left edge and the label fills the rest — a right-aligned label would slide the marker */
.ti-turn { flex: none; width: 128px; display: flex; align-items: center; justify-content: flex-start; gap: 6px; overflow: hidden; }
.ti-turn .ti-mk { --mk: 9px; }
.ti-turn b { flex: 1 1 auto; min-width: 0; font: 800 9px/1 var(--ti-ui); letter-spacing: .12em; color: var(--ti-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-turn[data-you="1"] b { color: var(--ti-ink); }
.ti-menu { flex: none; width: 30px; height: 22px; border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; background: rgba(255, 255, 255, .07); color: var(--ti-ink); box-shadow: inset 0 0 0 1px var(--ti-line); }
@media (hover: hover) { .ti-menu:hover { box-shadow: inset 0 0 0 1px var(--ti-lit); } }

/* ── player cards (display, not controls) ──────────────────────────────── */
.ti-cards { grid-area: cards; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 58px 58px; gap: 6px; min-width: 0; min-height: 0; }
.ti-card {
  position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 7px; border-radius: var(--ti-rCard); background: var(--ti-panel); box-shadow: inset 0 0 0 1.5px var(--ti-line);
  transition: background .2s, box-shadow .2s, opacity .3s;
}
.ti-card[data-empty="1"] { background: transparent; box-shadow: inset 0 0 0 1px var(--ti-line); opacity: .45; align-items: center; justify-content: center; }
.ti-card[data-empty="1"] > * { display: none; }
.ti-card[data-empty="1"]::after { content: 'OPEN SEAT'; font: 800 8px/1 var(--ti-ui); letter-spacing: .12em; color: var(--ti-dim); }
.ti-card[data-turn="1"] { background: color-mix(in oklab, var(--pc) 13%, var(--ti-panel)); box-shadow: inset 0 0 0 1.5px var(--pc), 0 0 0 2px color-mix(in oklab, var(--pc) 28%, transparent); }
.ti-card[data-out="1"] { opacity: .62; }
.ti-crow { display: flex; align-items: center; gap: 5px; min-width: 0; height: 17px; }
.ti-av { flex: none; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in oklab, var(--pc) 22%, var(--ti-panel)); box-shadow: inset 0 0 0 1.5px var(--ti-line); }
.ti-crow .ti-mk { --mk: 10px; }
.ti-cname { flex: 1 1 auto; min-width: 0; font: 800 10.5px/1 var(--ti-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-pill { flex: none; width: 30px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font: 800 7px/1 var(--ti-ui); letter-spacing: .09em; color: var(--ti-dim); box-shadow: inset 0 0 0 1px var(--ti-line); }
.ti-pill[data-k="you"] { color: var(--ti-ink); background: color-mix(in oklab, var(--pc) 24%, transparent); box-shadow: inset 0 0 0 1px var(--pc); }
.ti-pill[data-k="out"] { color: var(--ti-bad); background: color-mix(in oklab, var(--ti-bad) 26%, transparent); box-shadow: inset 0 0 0 1px var(--ti-bad); }
.ti-cnum { display: flex; align-items: baseline; gap: 3px; min-width: 0; height: 16px; }
.ti-fishn { display: inline-block; width: 3ch; font: 800 16px/1 var(--ti-ui); font-variant-numeric: tabular-nums; }
.ti-lab { font: 800 7px/1 var(--ti-ui); letter-spacing: .1em; color: var(--ti-dim); }
.ti-cnum .ti-sp { flex: 1 1 auto; }
.ti-floen { display: inline-block; width: 2ch; text-align: right; font: 800 11px/1 var(--ti-ui); font-variant-numeric: tabular-nums; }
.ti-cfoot { display: flex; align-items: center; gap: 3px; min-width: 0; height: 11px; }
.ti-pip { position: relative; flex: none; width: 7px; height: 9px; border-radius: 3px 3px 1px 1px; background: var(--pc); }
.ti-pip[data-st="gone"] { background: transparent; box-shadow: inset 0 0 0 1px var(--ti-line); }
.ti-pip[data-st="off"] { visibility: hidden; }
/* row 2 — a DEAD penguin: the pip is crossed (a shape change, not a recolour) */
.ti-pip[data-st="dead"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pc); }
.ti-pip[data-st="dead"]::after { content: ''; position: absolute; left: -1px; right: -1px; top: 50%; height: 1.5px; background: var(--ti-bad); transform: rotate(-50deg); }
.ti-cstat { flex: 1 1 auto; min-width: 0; margin-left: 3px; font: 800 7px/1 var(--ti-ui); letter-spacing: .05em; color: var(--ti-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-cstat[data-k="out"] { color: var(--ti-bad); }
.ti-cstat[data-k="dead"] { color: color-mix(in oklab, var(--ti-bad) 70%, var(--ti-ink)); }

/* ── THE SHEET ─────────────────────────────────────────────────────────── */
.ti-band { grid-area: sheet; position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ti-sheet { position: relative; flex: none; width: calc(var(--ti-hw) * 8); height: calc(var(--ti-hh) * 6.25); }
.ti-sheet[data-shake="1"] { animation: ti-shake .15s linear 4; }
.ti-floe {
  --gut: max(2px, calc(var(--ti-hw) * .045));
  position: absolute; left: calc(var(--ti-hw) * var(--x)); top: calc(var(--ti-hh) * .75 * var(--r));
  width: var(--ti-hw); height: var(--ti-hh); padding: 0; border: 0; background: transparent; color: inherit; cursor: default;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: filter .12s, transform .08s;
}
.ti-ring, .ti-ice, .ti-hatch { position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); pointer-events: none; }
.ti-ring { inset: 0; background: transparent; }
.ti-ice {
  inset: var(--gut);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 34%), linear-gradient(180deg, transparent 66%, color-mix(in oklab, var(--ti-iceEdge) 34%, transparent) 100%), linear-gradient(178deg, var(--ti-ice) 0%, var(--ti-ice) 58%, var(--ti-iceLo) 100%);
}
.ti-hatch { inset: var(--gut); background: repeating-linear-gradient(52deg, var(--ti-far) 0 1.5px, transparent 1.5px 6px); opacity: 0; }
.ti-fishes { position: absolute; left: 0; right: 0; top: 60%; height: calc(var(--ti-hw) * .17); display: flex; align-items: center; justify-content: center; gap: calc(var(--ti-hw) * .06); pointer-events: none; }
.ti-floe[data-n="3"] .ti-fishes { gap: calc(var(--ti-hw) * .045); }
.ti-fishes i { flex: none; width: calc(var(--ti-hw) * .30); height: calc(var(--ti-hw) * .16); background: var(--ti-fish); clip-path: polygon(0 12%, 29% 40%, 52% 4%, 82% 14%, 100% 50%, 82% 86%, 52% 96%, 29% 60%, 0 88%); }
.ti-floe[data-n="3"] .ti-fishes i { width: calc(var(--ti-hw) * .245); height: calc(var(--ti-hw) * .135); }
.ti-floe[data-n="1"] .ti-fishes i:nth-child(n+2), .ti-floe[data-n="2"] .ti-fishes i:nth-child(3) { display: none; }
.ti-num {
  position: absolute; left: 50%; top: 17%; width: max(15px, calc(var(--ti-hw) * .30)); height: max(15px, calc(var(--ti-hw) * .30)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; border-radius: 50%; pointer-events: none;
  font: 800 max(9px, calc(var(--ti-hw) * .19))/1 var(--ti-ui); color: var(--ti-litFill); background: transparent; visibility: hidden;
}
/* the owner mark on a sunk floe is a .ti-mk (its shape) — TI-M10: ≥ 7px at 50% so it survives a 360 phone */
.ti-owner { position: absolute; left: 50%; top: 50%; --mk: max(7px, calc(var(--ti-hw) * .15)); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }

/* states — data-st on the floe: ice | lit | far | place | sel | gap | crack | stuck */
.ti-floe[data-st="lit"] .ti-ring, .ti-floe[data-st="place"] .ti-ring { background: var(--ti-lit); }
.ti-floe[data-st="lit"] .ti-ice, .ti-floe[data-st="place"] .ti-ice { background: var(--ti-litFill); }
.ti-floe[data-st="lit"] .ti-num, .ti-floe[data-st="place"] .ti-num { visibility: visible; background: var(--ti-lit); }
.ti-floe[data-st="far"] .ti-ring { background: color-mix(in oklab, var(--ti-far) 55%, transparent); }
.ti-floe[data-st="far"] .ti-hatch { opacity: .5; }
.ti-floe[data-st="far"] .ti-num { visibility: visible; background: var(--ti-far); color: var(--ti-ice); }
.ti-floe[data-st="far"] .ti-num::after { content: ''; position: absolute; left: -6%; right: -6%; top: 50%; height: 2px; margin-top: -1px; background: var(--ti-ice); transform: rotate(-34deg); opacity: .9; }
/* TI-M4 — the selected penguin's floe: a LIGHT, THICK pulsing ring that reads on a dark sea */
.ti-floe[data-st="sel"] .ti-ring { background: var(--ti-sel); animation: ti-halo 1.7s ease-in-out infinite; }
.ti-floe[data-st="sel"] .ti-ice { inset: calc(var(--gut) + 2.5px); }
.ti-floe[data-st="stuck"] .ti-ring { background: var(--ti-bad); animation: ti-halo 1.1s ease-in-out infinite; }
.ti-floe[data-st="crack"] .ti-ice { background: linear-gradient(178deg, var(--ti-iceLo), var(--ti-iceEdge)); }
.ti-floe[data-st="crack"] .ti-crack { opacity: .85; }
.ti-crack { position: absolute; inset: 0; opacity: 0; pointer-events: none; background:
  linear-gradient(-24deg, transparent 47%, var(--ti-pen) 47%, var(--ti-pen) 52%, transparent 52%),
  linear-gradient(38deg, transparent 48%, var(--ti-pen) 48%, var(--ti-pen) 52%, transparent 52%); }
.ti-floe[data-st="gap"] .ti-ring { background: transparent; }
.ti-floe[data-st="gap"] .ti-ice { background: radial-gradient(68% 62% at 50% 46%, transparent 55%, color-mix(in oklab, var(--ti-gapRing) 75%, transparent) 57%, transparent 64%), var(--ti-gapFill); }
.ti-floe[data-st="gap"] .ti-fishes { visibility: hidden; }
.ti-floe[data-st="gap"] .ti-owner { opacity: .5; }
.ti-floe[data-sink="1"] .ti-ice { animation: ti-sink .32s ease-in both; }
/* TI-M4 — hover/pressed ONLY on a floe you can tap (plain ice never reacts) */
.ti-root[data-lock="0"] .ti-floe[data-tap="1"] { cursor: pointer; }
@media (hover: hover) { .ti-root[data-lock="0"] .ti-floe[data-tap="1"]:hover { filter: brightness(1.1) drop-shadow(0 0 6px var(--ti-lit)); } }
.ti-root[data-lock="0"] .ti-floe[data-tap="1"]:active { transform: translateY(1px); filter: brightness(.9); }

/* penguins — drawn from shapes; pointer-events none: a tap goes to the floe under it */
.ti-pen {
  --pw: calc(var(--ti-hw) * .46); --ph: calc(var(--pw) * 1.32);
  position: absolute; width: var(--pw); height: var(--ph); pointer-events: none;
  left: calc(var(--ti-hw) * var(--x) + var(--ti-hw) / 2 - var(--pw) / 2);
  top: calc(var(--ti-hh) * .75 * var(--r) + var(--ti-hh) * .5 - var(--ph) * .78);
}
.ti-pen[data-on="0"] { visibility: hidden; }
.ti-pen b { position: absolute; display: block; }
.ti-pen .h { left: 17%; top: 0; width: 66%; height: 42%; border-radius: 50%; background: var(--ti-pen); }
.ti-pen .bd { left: 0; top: 26%; width: 100%; height: 74%; border-radius: 48% 48% 44% 44% / 40% 40% 60% 60%; background: var(--ti-pen); }
.ti-pen .be { left: 25%; top: 40%; width: 50%; height: 50%; border-radius: 50% 50% 46% 46% / 46% 46% 54% 54%; background: var(--ti-penBelly); }
.ti-pen .bk { left: 64%; top: 15.5%; width: 26%; height: 8.5%; background: var(--ti-beak); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ti-pen .ti-mk { position: absolute; left: 50%; top: 56%; --mk: max(6px, calc(var(--pw) * .42)); transform: translateX(-50%); }
/* ⭐ PT0922-TI-1 — YOUR penguins glow on YOUR turn, in your seat colour (thinice.js tiPaintSheet glowOf):
   a pool of light under the feet plus a thin rim on the body, breathing. It is the first child, so it sits
   BEHIND the penguin, and it is always built (data-glow flips it), so nothing reflows when a turn changes. */
.ti-pen .gl {
  /* ~ the whole floe wide (the penguin is .46 of a hex), because pale ice swallows a small pale-gold pool */
  left: -55%; width: 210%; top: 48%; height: 76%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, var(--pc), color-mix(in oklab, var(--pc) 70%, transparent) 50%, transparent);
  transition: opacity .25s;
}
.ti-pen[data-glow="1"] .gl { opacity: 1; animation: ti-mine 1.3s ease-in-out infinite; }
/* the rim is ONE silhouette outline (a filter), not a box-shadow per shape — those drew a line across the neck */
.ti-pen[data-glow="1"] { filter: drop-shadow(0 0 1.2px var(--pc)) drop-shadow(0 0 1.2px var(--pc)) drop-shadow(0 0 6px color-mix(in oklab, var(--pc) 70%, transparent)); }
@keyframes ti-mine { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .6; transform: scale(.88) } }
.ti-pen[data-sel="1"] { animation: ti-bob 1.6s ease-in-out infinite; }
.ti-pen[data-stuck="1"] { animation: ti-shake .5s ease-in-out infinite; }
.ti-pen[data-drop="1"] { animation: ti-drop .34s ease-out both; }
/* row 2 — a DEAD penguin: faded, with a ✕ badge (an icon, not a recolour) */
.ti-pen[data-dead="1"] .h, .ti-pen[data-dead="1"] .bd { opacity: .55; }
.ti-pen .x { right: -18%; top: -6%; width: max(9px, calc(var(--pw) * .5)); height: max(9px, calc(var(--pw) * .5)); border-radius: 50%; background: var(--ti-bad); color: #fff; display: none; align-items: center; justify-content: center; font: 900 max(7px, calc(var(--pw) * .36))/1 var(--ti-ui); box-shadow: 0 0 0 1.5px var(--ti-seaDeep); }
.ti-pen[data-dead="1"] .x { display: flex; }
.ti-sheetfx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ti-sheetfx .ti-pen { left: 0; top: 0; }

/* ── the action rail / row ─────────────────────────────────────────────── */
.ti-act { grid-area: act; min-width: 0; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.ti-dieblock { flex: none; width: 148px; height: 44px; display: flex; align-items: center; gap: 7px; }
.ti-die { position: relative; flex: none; width: 44px; height: 44px; }
.ti-diering { position: absolute; inset: -4px; border-radius: 10px; background: var(--ti-lit); opacity: 0; }
.ti-die[data-live="1"] .ti-diering { opacity: 1; animation: ti-halo 2s ease-in-out infinite; }
.ti-dieface { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ti-dieghost { display: block; width: 100%; height: 100%; border-radius: 8px; border: 1.5px dashed var(--ti-line); background: color-mix(in oklab, var(--ti-panel) 60%, transparent); }
.ti-dietxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ti-dietxt small { font: 800 8px/1 var(--ti-ui); letter-spacing: .14em; color: var(--ti-dim); white-space: nowrap; }
.ti-badge { height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 4px; font: 800 9px/1 var(--ti-ui); letter-spacing: .06em; color: var(--ti-dim); box-shadow: inset 0 0 0 1px var(--ti-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-badge[data-k="live"] { color: var(--ti-ink); box-shadow: inset 0 0 0 1px var(--ti-lit); }
.ti-badge[data-k="rolled"] { color: var(--ti-ink); background: color-mix(in oklab, var(--ti-lit) 26%, transparent); box-shadow: inset 0 0 0 1px var(--ti-lit); }
/* TI-M2 — ROLL takes the rest of the row and may shrink (148 + 8 + ROLL ≤ 340 at 360 wide) */
.ti-roll {
  flex: 1 1 0; min-width: 0; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden;
  border-radius: var(--ti-rBtn); border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--ti-roll), var(--ti-rollLo)); box-shadow: inset 0 0 0 1.5px var(--ti-roll), 0 0 0 2px color-mix(in oklab, var(--ti-roll) 22%, transparent);
  transition: filter .12s, box-shadow .16s, transform .08s;
}
/* both labels FILL the button and centre their text: an auto-width label is a box that resizes with its text */
.ti-roll b { width: 100%; text-align: center; font: 800 11.5px/1 var(--ti-ui); letter-spacing: .1em; white-space: nowrap; }
.ti-roll small { width: 100%; height: 10px; text-align: center; font: 700 8px/1.2 var(--ti-ui); letter-spacing: .06em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .ti-roll:not(:disabled):hover { filter: brightness(1.16); box-shadow: inset 0 0 0 1.5px var(--ti-roll), 0 0 0 4px color-mix(in oklab, var(--ti-roll) 30%, transparent); } }
.ti-roll:not(:disabled):active { transform: translateY(1px); filter: brightness(.84); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .5); }
.ti-roll:disabled { cursor: not-allowed; color: var(--ti-dim); background: color-mix(in oklab, var(--ti-line) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--ti-line); }
.ti-roll[data-k="done"]:disabled { color: color-mix(in oklab, var(--ti-roll) 70%, var(--ti-ink)); background: color-mix(in oklab, var(--ti-roll) 16%, transparent); }
.ti-hint { flex: none; width: 100%; height: 26px; display: flex; align-items: center; padding: 0 9px; border-radius: 8px; background: var(--ti-panel); box-shadow: inset 0 0 0 1px var(--ti-line); overflow: hidden; }
.ti-hint span { font: 700 9.5px/1.35 var(--ti-ui); color: var(--ti-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-hint[data-you="1"] span { color: var(--ti-ink); }
.ti-hint .ti-long { display: none; }
.ti-legend { display: none; }

/* ── the feed ──────────────────────────────────────────────────────────── */
.ti-feed { grid-area: feed; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 7px; background: var(--ti-panel); box-shadow: inset 0 0 0 1px var(--ti-line); overflow: hidden; min-width: 0; }
.ti-feed small { flex: none; font: 800 8px/1 var(--ti-ui); letter-spacing: .14em; color: var(--ti-dim); }
.ti-feed b { flex: 1 1 auto; min-width: 0; height: 12px; font: 700 9.5px/12px var(--ti-ui); color: var(--ti-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-feed span { display: none; }

/* ── screen-level layers INSIDE the root (never fixed) ─────────────────── */
.ti-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.ti-fly { position: absolute; left: 0; top: 0; will-change: transform; }
.ti-flyfish { display: block; width: 22px; height: 12px; background: var(--ti-litFill); clip-path: polygon(0 12%, 29% 40%, 52% 4%, 82% 14%, 100% 50%, 82% 86%, 52% 96%, 29% 60%, 0 88%); }
.ti-flyfloe { display: block; width: 22px; height: 25px; background: var(--ti-iceLo); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ti-callout {
  position: absolute; left: 50%; top: 0; width: 300px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 13px; text-align: center;
  border-radius: 12px; background: linear-gradient(180deg, oklch(.28 .05 250), oklch(.20 .04 250)); box-shadow: 0 0 0 2px var(--ti-bad), 0 22px 54px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateX(-50%); pointer-events: none;
}
.ti-callout[data-on="1"] { opacity: 1; visibility: visible; animation: ti-rise .26s ease-out both; }
.ti-callout div { display: flex; align-items: center; gap: 7px; }
.ti-callout .ti-mk { --mk: 13px; }
.ti-callout b { font: 800 15px/1.1 var(--ti-ui); letter-spacing: .05em; color: #fff; white-space: nowrap; }
.ti-callout span { font: 600 11px/1.4 var(--ti-ui); color: #cfd6de; }
.ti-callout small { font: 800 9px/1 var(--ti-ui); letter-spacing: .14em; color: #8d97a3; white-space: nowrap; }

/* end screen rows (GameEndScreen html section) */
.ti-endrows { display: flex; flex-direction: column; gap: 5px; }
.ti-endrow { display: grid; grid-template-columns: 1fr auto 70px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.ti-endrow[data-win="1"] { background: rgba(111, 212, 154, .16); }
.ti-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ti-endnm .ti-mk { --mk: 14px; }
.ti-endst { font-size: 12px; opacity: .75; }
.ti-endsc { text-align: right; font-weight: 800; font-size: 15px; }
.ti-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .ti-floe .ti-ring, .ti-floe .ti-ice, .ti-pen, .ti-pen .gl, .ti-sheet, .ti-callout, .ti-diering { animation: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #thinice-game-screen.ti-playing .wrap { padding: 0 2px; max-width: none; }
  #thinice-game-screen.ti-playing .topbar { display: none; }
  #thinice-game-screen.ti-playing.ti-topbar-open .topbar { display: flex; }
}
@media (max-width: 370px) {
  .ti-dieblock { width: 136px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 637 less its 84px chat strip) ── */
@media (min-width: 1000px) {
  #thinice-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .ti-root {
    width: 1280px; height: 553px; padding: 12px; border-radius: 16px;
    grid-template-columns: 270px minmax(0, 1fr) 330px; grid-template-rows: 28px minmax(0, 1fr) 24px;
    grid-template-areas: "head head head" "cards sheet act" "feed feed feed";
    column-gap: 18px; row-gap: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -30px #000;
  }
  .ti-brand { font-size: 9px; }
  .ti-phase { font-size: 9px; }
  .ti-turn { width: 220px; }
  .ti-turn .ti-mk { --mk: 11px; }
  .ti-turn b { font-size: 10.5px; }
  .ti-menu { display: none; }

  .ti-cards { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 86px; align-content: center; gap: 8px; }
  .ti-card { padding: 9px 10px; }
  .ti-card[data-empty="1"] { display: none; }
  .ti-crow { gap: 6px; height: 24px; }
  .ti-av { width: 24px; height: 24px; }
  .ti-crow .ti-mk { --mk: 13px; }
  .ti-cname { font-size: 13px; }
  .ti-pill { width: 36px; height: 17px; font-size: 8px; }
  .ti-cnum { gap: 4px; height: 24px; }
  .ti-fishn { font-size: 24px; }
  .ti-lab { font-size: 8px; }
  .ti-floen { font-size: 15px; }
  .ti-cfoot { height: 13px; }
  .ti-pip { width: 9px; height: 12px; border-radius: 4px 4px 2px 2px; }
  .ti-cstat { font-size: 8px; }

  .ti-act { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  .ti-dieblock { width: 100%; height: 58px; gap: 12px; }
  .ti-die { width: 58px; height: 58px; }
  .ti-dietxt small { font-size: 9px; }
  .ti-badge { height: 22px; font-size: 10.5px; }
  .ti-roll { flex: none; width: 100%; height: 46px; }
  .ti-roll b { font-size: 13px; }
  .ti-roll small { font-size: 9px; height: 11px; }
  .ti-hint { height: 56px; padding: 0 11px; }
  .ti-hint span { font-size: 11px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .ti-hint .ti-short { display: none; }
  .ti-hint .ti-long { display: -webkit-box; }
  .ti-legend { display: flex; flex: none; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 8px; background: var(--ti-panel); box-shadow: inset 0 0 0 1px var(--ti-line); }
  .ti-legend > small { font: 800 9px/1 var(--ti-ui); letter-spacing: .14em; color: var(--ti-dim); }
  .ti-lrow { display: flex; align-items: center; gap: 9px; height: 32px; }
  .ti-lrow .ti-floe { position: relative; left: 0; top: 0; flex: none; --ti-hw: 26px; --ti-hh: 30px; }
  .ti-lrow > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ti-lrow b { font: 800 10.5px/1 var(--ti-ui); letter-spacing: .06em; white-space: nowrap; }
  .ti-lrow em { font: 600 9px/1.2 var(--ti-ui); color: var(--ti-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .ti-feed small { font-size: 9px; }
  /* a FIXED share, never auto: an auto-width entry slid the dimmed previous one along as its text changed */
  .ti-feed b { flex: none; width: 54%; height: 14px; font-size: 11px; line-height: 14px; }
  /* a FIXED height: empty, it was a 0px box that grew to 11 when the first entry arrived */
  .ti-feed span { display: block; flex: 1 1 auto; min-width: 0; height: 14px; font: 600 11px/14px var(--ti-ui); color: var(--ti-dim); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .ti-callout { width: 420px; padding: 16px 18px; gap: 6px; }
  .ti-callout b { font-size: 16px; }
  .ti-callout span { font-size: 12px; }
  .ti-callout small { font-size: 10px; }
}

/* ── MP (the online table, thinice_mp.js): the turn clock, a rival's pill, a seat that left ─────────────────────
 * The clock is a 3px bar laid ON the head's bottom edge — absolute, scaleX, so it reserves no height and moves nothing
 * (the locked-layout rule). It exists only at an MP table (thinice.js tiMpMount adds it). */
.ti-root[data-mp="1"] .ti-head { position: relative; }
.ti-clock { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; transform-origin: left center; transform: scaleX(0); background: var(--ti-dim); opacity: 0; pointer-events: none; transition: transform .25s linear; }
.ti-clock[data-on="1"] { opacity: .75; }
.ti-clock[data-on="1"][data-mine="1"] { background: var(--ti-lit); opacity: 1; }
.ti-clock[data-on="1"][data-low="1"] { background: var(--ti-bad); }
/* a person needs no BOT tag: the pill keeps its slot (the name never shifts) and says nothing */
.ti-pill[data-k="rival"] { visibility: hidden; }
.ti-pill[data-k="left"] { color: var(--ti-bad); box-shadow: inset 0 0 0 1px var(--ti-bad); }
.ti-card[data-left="1"] { opacity: .45; }