/* frontend/toadtoss.css — TOAD TOSS board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Skewers / Cee-lo precedent: a board suite
 * that slices its block out of style.css breaks on someone else's append.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's palette block (docs/design/Batch 5/
 * Toad toss.dc.html, `--tt-*` on body). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD:
 * the setup card sits outside `.tt-root`, and a var() fallback is not a scope.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (mock F11, the Skewers / Cee-lo shape) ──
 * Radii and fonts are VARIABLES (`--tt-r*`, `--tt-font*`) so the pixel direction is a class
 * that redefines them and NOTHING ELSE — a skin may change colour, radius, shadow and font; it
 * may not move a box.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every band has a FIXED height in every phase — the throw area is the one flexible band (the
 * mock: "only the throw area absorbs freed height"). Every slot, pill, badge and button holds
 * its space whether lit or not; every border is the SAME width in every state. Feedback changes
 * colour, glow or a transform — never size.
 */

#toadtoss-game-screen, .tt-root {
  --tt-page: #0b0e0d; --tt-ink: #eff2ea; --tt-dim: #94a39a; --tt-dim2: #8a9c92; --tt-note: #5c6b62;
  --tt-shell: #0a1211; --tt-board: #132420; --tt-panel: #1a2f28; --tt-panel2: #14251f;
  --tt-slot: #0d1a16; --tt-line: #27423a; --tt-line2: #3a5d51;
  --tt-gold: #e9b23c; --tt-gold-h: #f6c75f; --tt-gold-p: #c8952a; --tt-gold-d: #a87c22; --tt-gold-t: #2a1d05; --tt-gold-t2: #523905;
  --tt-bank: #66c98f; --tt-bank-h: #8ddfae; --tt-bank-p: #47a672; --tt-bank-d: #3e8d5f;
  --tt-split: #e8603c; --tt-split-d: #a63d22; --tt-split-t: #2b0d05; --tt-split-r: #ff8a66; --tt-split-ink: #fff3ee; --tt-split-sub: #3b1408;
  --tt-tangle: #2b1a3a; --tt-tangle-r: #9c6ad1; --tt-tangle-ink: #f3e8ff; --tt-tangle-sub: #c9a4ec;
  --tt-cool: #7fa9de; --tt-win: #f0e4c0;
  /* ⛔ no toad-part colours: the toads are DRAWINGS (/toadtoss/*.png), each with its own shadow. */
  --tt-scrim: rgba(4, 8, 7, .66);
  --tt-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tt-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --tt-r1: 4px; --tt-r2: 12px; --tt-r3: 14px; --tt-rp: 999px;
}

@keyframes tt-ring   { 0%, 100% { box-shadow: inset 0 0 0 2px var(--tt-cool), 0 0 0 0 rgba(127, 169, 222, .5) } 55% { box-shadow: inset 0 0 0 2px var(--tt-cool), 0 0 0 8px rgba(127, 169, 222, 0) } }
@keyframes tt-pulse  { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes tt-glow   { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.09) } }
@keyframes tt-shake  { 10%, 90% { transform: translateX(-2px) } 20%, 80% { transform: translateX(4px) } 30%, 50%, 70% { transform: translateX(-7px) } 40%, 60% { transform: translateX(7px) } }
@keyframes tt-wobble { 0%, 100% { transform: rotate(-.5deg) } 50% { transform: rotate(.5deg) } }
@keyframes tt-land   { 0% { transform: translateY(-14px) rotate(-9deg); opacity: 0 } 55% { transform: translateY(3px) rotate(3deg); opacity: 1 } 80% { transform: translateY(-2px) } 100% { transform: translateY(0) rotate(0); opacity: 1 } }
@keyframes tt-tumble { 0% { transform: translateY(-30%) rotate(0) scale(.8) } 50% { transform: translateY(-12%) rotate(200deg) scale(.9) } 100% { transform: translateY(0) rotate(360deg) scale(.85) } }
@keyframes tt-slotflash { 0% { filter: brightness(1.55) } 100% { filter: brightness(1) } }
@keyframes tt-flashin { 0% { transform: translateY(-6px) scale(.86); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes tt-notepulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes tt-pop    { 0% { transform: scale(.9); opacity: 0 } 55% { transform: scale(1.015); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.tt-setup-card { max-width: 520px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.tt-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.tt-setup-title { margin: 0; font-size: 28px; }
.tt-setup-blurb, .tt-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.tt-setup-hint { opacity: .75; font-size: 13px; }
.tt-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tt-setup-lab { font-weight: 700; font-size: 13px; width: 64px; }
.tt-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-opt { width: 44px; height: 40px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.tt-optw { width: 64px; }
.tt-opt[data-on="1"] { background: var(--tt-gold); border-color: var(--tt-gold-d); color: var(--tt-gold-t); }
.tt-start { height: 48px; border: 0; border-radius: 12px; background: var(--tt-gold); color: var(--tt-gold-t); font-weight: 800; font-size: 16px; cursor: pointer; }
.tt-start:hover { filter: brightness(1.08); }

/* ── the board root (phone first: the mock's 384 × 812 arrangement) ─────── */
.tt-root {
  --tt-pad: 12px; --tt-g: 10px; --tt-headH: 36px; --tt-seatH: 52px; --tt-av: 22px; --tt-gly: 9px; --tt-trk: 5px;
  --tt-bandH: 92px; --tt-ctlH: 62px; --tt-toadBox: 118px; --tt-slotW: 150px; --tt-slotGap: 12px; --tt-tsW: 126px;
  --tt-fName: 11.5px; --tt-fLbl: 9px; --tt-fSub: 10.5px; --tt-fScore: 19px; --tt-fTurn: 46px; --tt-fCall: 18px; --tt-fBtn: 17px; --tt-fPose: 11px; --tt-fPts: 10px; --tt-fFlash: 26px;
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--tt-g); overflow: hidden;
  width: 100%; height: var(--tt-phone-h, 720px); padding: var(--tt-pad);
  background: var(--tt-board); color: var(--tt-ink); font-family: var(--tt-font);
  border-radius: var(--tt-r3);
}
.tt-root *, .tt-root *::before, .tt-root *::after { box-sizing: border-box; }
.tt-root button { -webkit-tap-highlight-color: transparent; font-family: var(--tt-font); }
.tt-root i, .tt-root em { font-style: normal; }

/* top bar — L1: never wraps. FIRST TO 100 is desktop-only; the pill ellipsises in its slot. */
.tt-head { flex: none; height: var(--tt-headH); display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.tt-brand { flex: none; display: flex; align-items: center; gap: 8px; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .2em; color: var(--tt-ink); }
.tt-brand i { flex: none; width: 11px; height: 11px; background: var(--tt-gold); border-radius: 2px; transform: rotate(45deg); }
/* the pill FILLS its slot on a phone (a text-sized pill resized on every turn) */
.tt-pill {
  flex: 1 1 0; min-width: 0; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 10px; overflow: hidden;
  border-radius: var(--tt-rp); font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .12em;
  background: var(--tt-panel); color: var(--tt-dim);
}
.tt-pill i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tt-pulse 1.6s ease-in-out infinite; }
.tt-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tt-pill[data-turn="you"] { background: var(--tt-gold); color: var(--tt-gold-t); box-shadow: 0 0 18px -4px rgba(233, 178, 60, .8); }
.tt-hsp { display: none; flex: 1 1 0; min-width: 0; }
.tt-hright { display: none; }
.tt-posesbtn, .tt-menu {
  flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: var(--tt-rp); cursor: pointer;
  font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .12em;
  background: var(--tt-panel2); color: var(--tt-bank); box-shadow: inset 0 0 0 1.5px var(--tt-bank);
  transition: box-shadow .12s, background .12s, color .12s;
}
.tt-menu { width: 30px; padding: 0; color: var(--tt-ink); box-shadow: inset 0 0 0 1px var(--tt-line2); font-size: 13px; letter-spacing: 0; }
.tt-posesbtn[data-on="1"] { background: #12241a; color: var(--tt-bank-p); box-shadow: inset 0 0 0 1.5px var(--tt-bank-p), inset 0 3px 9px rgba(0, 0, 0, .4); }
@media (hover: hover) {
  .tt-posesbtn:hover { color: var(--tt-bank-h); box-shadow: inset 0 0 0 1.5px var(--tt-bank-h), 0 0 16px -4px rgba(102, 201, 143, .8); }
  .tt-menu:hover { box-shadow: inset 0 0 0 1px var(--tt-gold); color: var(--tt-gold); }
}

.tt-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--tt-g); }

/* ── RACE TO 100 rail ───────────────────────────────────────────────────── */
.tt-rail { flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tt-railhead { flex: none; height: 11px; display: flex; align-items: center; justify-content: space-between; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .18em; color: var(--tt-dim2); white-space: nowrap; }
.tt-railhead span:last-child { font-weight: 400; letter-spacing: .12em; }
.tt-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tt-seat {
  position: relative; height: var(--tt-seatH); min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden;
  border-radius: var(--tt-r2); background: var(--tt-panel2); box-shadow: inset 0 0 0 1px var(--tt-line);
  transition: box-shadow .15s, background .15s;
}
.tt-seat[data-seat="you"] { background: var(--tt-panel); box-shadow: inset 0 0 0 2px var(--tt-gold), 0 0 22px -8px rgba(233, 178, 60, .9); }
.tt-seat[data-seat="bot"] { background: var(--tt-panel); animation: tt-ring 1.9s ease-in-out infinite; box-shadow: inset 0 0 0 2px var(--tt-cool); }
.tt-seat[data-seat="dead"] { box-shadow: inset 0 0 0 2px var(--tt-split-d); }
/* 🌐 MP: a seat that LEFT (⚖️ TTM6) — dimmed, never animated; its box is the same size */
.tt-seat[data-seat="gone"] { opacity: .45; }
.tt-avwrap { position: relative; flex: none; width: var(--tt-av); height: var(--tt-av); }
.tt-av {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--tt-slot); box-shadow: inset 0 0 0 1px var(--tt-line); font-size: var(--tt-fLbl); font-weight: 700; color: var(--tt-dim);
}
.tt-mark {
  position: absolute; right: -4px; bottom: -3px; width: 13px; height: 13px; display: none; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 7px; font-weight: 700; line-height: 1; background: var(--tt-ink); color: var(--tt-slot);
}
.tt-mark[data-on="1"] { display: flex; }
.tt-seat[data-seat="you"] .tt-mark { background: var(--tt-gold); color: var(--tt-gold-t); }
.tt-seat[data-seat="bot"] .tt-mark { background: var(--tt-cool); color: var(--tt-slot); }
.tt-seat[data-seat="dead"] .tt-mark { background: var(--tt-split); color: var(--tt-split-ink); }
/* identity glyphs — the mock's six silhouettes (colourblind-safe: shape + number + name) */
.tt-glyph { flex: none; width: var(--tt-gly); height: var(--tt-gly); background: var(--tt-ink); }
.tt-glyph[data-shape="circle"] { border-radius: 50%; }
.tt-glyph[data-shape="square"] { border-radius: 1px; }
.tt-glyph[data-shape="diamond"] { border-radius: 1px; transform: rotate(45deg) scale(.86); }
.tt-glyph[data-shape="bar"] { height: calc(var(--tt-gly) * .42); border-radius: 1px; }
.tt-glyph[data-shape="ring"] { border-radius: 50%; background: transparent; border: 2px solid var(--tt-ink); }
.tt-glyph[data-shape="arch"] { height: calc(var(--tt-gly) * .72); border-radius: 99px 99px 1px 1px; }
.tt-smid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tt-srow1 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
/* 🌐 a name is USER TEXT online (up to 12 chars): it shrinks and ellipsises before it pushes the tag out */
.tt-sname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--tt-fName); font-weight: 700; letter-spacing: .04em; color: var(--tt-ink); white-space: nowrap; }
/* L1 — on a phone the tag is the avatar badge; the words are desktop-only */
.tt-tag { display: none; flex: 1; min-width: 0; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .1em; color: var(--tt-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-track { position: relative; height: var(--tt-trk); border-radius: var(--tt-rp); background: var(--tt-slot); box-shadow: inset 0 0 0 1px var(--tt-line); }
.tt-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--tt-rp); background: var(--tt-line2); transition: width .45s ease-out; }
.tt-seat[data-seat="you"] .tt-fill { background: var(--tt-gold); }
.tt-seat[data-seat="bot"] .tt-fill { background: var(--tt-cool); }
.tt-seat[data-seat="dead"] .tt-fill { background: var(--tt-split-d); }
.tt-ghost { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--tt-win); box-shadow: 0 0 8px 1px rgba(240, 228, 192, .8); opacity: 0; transition: left .2s; }
.tt-ghost[data-on="1"] { opacity: 1; }
/* sized for three digits: a score column that grew at 100 slid the track */
.tt-scol { flex: none; width: calc(var(--tt-fScore) * 1.9); display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tt-sc { display: block; width: 100%; text-align: right; font-size: var(--tt-fScore); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tt-ink); }
.tt-scol small { font-size: var(--tt-fLbl); letter-spacing: .1em; color: var(--tt-dim2); line-height: 1; }
.tt-legend { flex: none; height: 16px; display: flex; align-items: center; gap: 7px; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .12em; color: var(--tt-dim2); white-space: nowrap; overflow: hidden; }
.tt-legend i { flex: none; width: 2px; height: 11px; background: var(--tt-win); box-shadow: 0 0 7px 1px rgba(240, 228, 192, .7); }
.tt-legend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── throw area + band + controls ───────────────────────────────────────── */
.tt-main { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--tt-g); }
.tt-mat {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--tt-r2); background: var(--tt-slot); box-shadow: inset 0 0 0 1px var(--tt-line);
}
.tt-matlbl, .tt-matnote { position: absolute; top: 9px; font-size: var(--tt-fLbl); letter-spacing: .18em; color: var(--tt-dim2); white-space: nowrap; }
.tt-matlbl { left: 12px; font-weight: 700; }
.tt-matnote { right: 12px; letter-spacing: .12em; }
.tt-slots { display: flex; gap: var(--tt-slotGap); align-items: flex-end; margin-top: 10px; }
.tt-slot {
  position: relative;
  flex: none; width: var(--tt-slotW); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px;
  border-radius: var(--tt-r2); background: var(--tt-panel2); box-shadow: inset 0 0 0 1px var(--tt-line);
}
.tt-slot[data-state="empty"] { box-shadow: inset 0 0 0 1px var(--tt-line); background: transparent; }
.tt-toadbox { position: relative; flex: none; width: var(--tt-toadBox); height: var(--tt-toadBox); transition: transform .25s ease-out; }
.tt-slot[data-state="empty"] .tt-toadbox { border-radius: 50%; border: 1px dashed var(--tt-line2); }
/* TT2 — tangled toads are drawn TOUCHING: each slides toward the other */
.tt-slots[data-tangle="1"] .tt-slot[data-i="0"] .tt-toadbox { transform: translateX(26%); }
.tt-slots[data-tangle="1"] .tt-slot[data-i="1"] .tt-toadbox { transform: translateX(-26%); }
.tt-toad { position: absolute; inset: 0; display: block; }
/* ⛔ ABSOLUTE and 100%: a drawing that arrives late must never resize its slot (locked layout).
   The art is square and so is its box, so contain maps 1:1 and every pose keeps one baseline. */
.tt-timg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.tt-toad[data-state="land"] { animation: tt-land .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.tt-toad[data-state="tumble"] { animation: tt-tumble .45s linear infinite; }
/* ── THE LANDING CALLED ON THE SLOT (owner, 2026-09-17) ───────────────────────
   ⛔ THE COLOUR IS IN THE BASE RULE AND THE MOTION IS A SEPARATE KEYFRAME. Reduced motion
   kills the animation, and the slot must still be red — and a check that read a computed
   colour mid-animation would be §5 all over again, so the SUITE asserts data-flash and the
   word, never a colour. These rules sit after the [data-state] ones they tie with on
   specificity: a flashing slot is never "empty", so it must win on load order. */
.tt-slot[data-flash] { transition: background .16s ease-out; }
.tt-slot[data-flash="split"]  { background: var(--tt-split);  box-shadow: inset 0 0 0 1px var(--tt-split-r); }
.tt-slot[data-flash="tangle"] { background: var(--tt-tangle); box-shadow: inset 0 0 0 1px var(--tt-tangle-r); }
.tt-slot[data-flash="double"] { background: var(--tt-gold);   box-shadow: inset 0 0 0 1px var(--tt-gold-h); }
.tt-slot[data-flash]:not([data-flash=""]) { animation: tt-slotflash .5s ease-out both; }
/* the word: an ABSOLUTE layer over the toad, so it can never move the art or the label */
.tt-flash {
  position: absolute; left: 0; right: 0; top: 10px; z-index: 3; pointer-events: none;
  /* ⛔ NOWRAP: a word that wrapped would drop a second line onto the toad. It must overflow
     visibly instead, so the suite's scrollWidth check can SEE it — TANGLED is the long one. */
  white-space: nowrap;
  text-align: center; font-size: var(--tt-fFlash); font-weight: 800; letter-spacing: .06em; line-height: 1;
  /* a DOUBLE can be SNOUT-STAND or LEANER, which fill their frame — the word lands on the
     frog, so it is keylined rather than moved. Seeing the landing as it fell is the point. */
  text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .35);
}
/* the second line, under the word — only the 1-in-28,000 double leaner sets one, and it FLASHES
   (owner, 2026-09-18). Absolute like the word, so an appearing line cannot move the art. */
.tt-flashnote {
  /* ⛔ A CHIP, NOT BARE TEXT. The only pose that can earn this line is the LEANER, which throws
     its arms up through exactly this band of the frame — bare keylined text read as clutter over
     them. A chip is the board's own idiom (.tt-ppts, .tt-tag) and is legible over any art.
     left+right+margin:auto centres a fit-content box inside the absolute layer. */
  position: absolute; left: 0; right: 0; margin-inline: auto; width: fit-content;
  z-index: 3; pointer-events: none;
  top: calc(10px + var(--tt-fFlash) * 1.15);
  padding: .34em .6em; border-radius: var(--tt-rp);
  white-space: nowrap; text-align: center;
  font-size: calc(var(--tt-fFlash) * .42); font-weight: 800; letter-spacing: .1em; line-height: 1;
}
.tt-flashnote:empty { display: none; }
.tt-slot[data-flash="double"] .tt-flashnote { color: var(--tt-gold); background: var(--tt-gold-t); }
.tt-slot[data-flash]:not([data-flash=""]) .tt-flashnote {
  animation: tt-flashin .34s cubic-bezier(.3, 1.4, .6, 1) .16s both, tt-notepulse .6s ease-in-out .5s 3;
}
.tt-slot[data-flash="split"]  .tt-flash { color: var(--tt-split-ink); }
/* TANGLED is seven characters against SPLIT's five and 4 ×'s three — it gets its own size. */
.tt-slot[data-flash="tangle"] .tt-flash { color: var(--tt-tangle-ink); font-size: calc(var(--tt-fFlash) * .78); }
.tt-slot[data-flash="double"] .tt-flash { color: var(--tt-gold-t); text-shadow: 0 1px 2px rgba(255, 255, 255, .45); }
.tt-slot[data-flash]:not([data-flash=""]) .tt-flash { animation: tt-flashin .34s cubic-bezier(.3, 1.4, .6, 1) both; }
/* the label row now sits on a coloured card — two attributes, so it beats [data-on] on its own */
.tt-slot[data-flash="split"]  .tt-pname { color: var(--tt-split-ink); }
.tt-slot[data-flash="tangle"] .tt-pname { color: var(--tt-tangle-ink); }
.tt-slot[data-flash="double"] .tt-pname { color: var(--tt-gold-t); }
.tt-slot[data-flash="double"] .tt-ppts[data-on="1"] { background: var(--tt-gold-t); color: var(--tt-gold); }
.tt-slot[data-flash="double"] .tt-ppts[data-on="side"] { color: var(--tt-gold-t2); box-shadow: inset 0 0 0 1px var(--tt-gold-t2); }
.tt-slot[data-flash="split"]  .tt-ppts[data-on="side"] { color: var(--tt-split-ink); box-shadow: inset 0 0 0 1px var(--tt-split-r); }
.tt-slot[data-flash="tangle"] .tt-ppts[data-on="side"] { color: var(--tt-tangle-sub); box-shadow: inset 0 0 0 1px var(--tt-tangle-r); }

.tt-plbl { flex: none; height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.tt-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--tt-fPose); font-weight: 700; letter-spacing: .08em; color: var(--tt-ink); }
.tt-slot[data-state="empty"] .tt-pname { color: var(--tt-note); }
.tt-ppts { flex: none; padding: 4px 5px; border-radius: 3px; font-size: var(--tt-fPts); font-weight: 700; letter-spacing: .06em; line-height: 1; color: transparent; background: transparent; box-shadow: inset 0 0 0 1px var(--tt-line); }
.tt-ppts[data-on="1"] { color: var(--tt-gold-t); background: var(--tt-gold); box-shadow: none; }
.tt-ppts[data-on="side"] { color: var(--tt-dim); box-shadow: inset 0 0 0 1px var(--tt-line2); }
.tt-ppts[data-on="tangle"] { color: var(--tt-tangle-ink); background: var(--tt-tangle); box-shadow: inset 0 0 0 1px var(--tt-tangle-r); }

/* band tones: idle / shrug (the only no-accent state) / sum / double / split / tangle */
.tt-bandrow { flex: none; height: var(--tt-bandH); display: flex; gap: var(--tt-g); }
.tt-band {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 13px; overflow: hidden;
  border-radius: var(--tt-r2); background: var(--tt-panel2); box-shadow: inset 0 0 0 1px var(--tt-line);
  --bInk: var(--tt-dim); --bLbl: var(--tt-dim2); --bSub: var(--tt-dim2);
}
.tt-band[data-band="sum"] { background: var(--tt-panel); --bInk: var(--tt-ink); --bLbl: var(--tt-gold); --bSub: var(--tt-dim); }
.tt-band[data-band="double"] { background: var(--tt-gold); box-shadow: inset 0 0 0 2px var(--tt-gold-h), 0 0 34px -6px rgba(233, 178, 60, .85); --bInk: var(--tt-gold-t); --bLbl: var(--tt-gold-t2); --bSub: var(--tt-gold-t2); animation: tt-glow 1.3s ease-in-out infinite; }
.tt-band[data-band="split"] { background: var(--tt-split); box-shadow: inset 0 0 0 2px var(--tt-split-r); --bInk: var(--tt-split-ink); --bLbl: var(--tt-split-t); --bSub: var(--tt-split-sub); animation: tt-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
.tt-band[data-band="tangle"] { background: var(--tt-tangle); box-shadow: inset 0 0 0 2px var(--tt-tangle-r), 0 0 30px -8px rgba(156, 106, 209, .9); --bInk: var(--tt-tangle-ink); --bLbl: var(--tt-tangle-sub); --bSub: var(--tt-tangle-sub); animation: tt-wobble 1.1s ease-in-out infinite; }
.tt-kick { flex: none; height: 12px; display: flex; align-items: center; gap: 7px; color: var(--bLbl); font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .18em; white-space: nowrap; overflow: hidden; }
.tt-kick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* two lines reserved for the longest callout the rules can produce */
.tt-callout { flex: none; height: calc(var(--tt-fCall) * 2.2); display: flex; align-items: center; font-size: var(--tt-fCall); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; color: var(--bInk); overflow: hidden; }
.tt-csub { flex: none; height: 13px; font-size: var(--tt-fSub); line-height: 13px; letter-spacing: .03em; color: var(--bSub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* callout glyphs — no emoji, greyscale-safe (the mock's set) */
.tt-ico { position: relative; flex: none; display: block; width: 13px; height: 13px; color: inherit; }
.tt-ico::before, .tt-ico::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; }
.tt-ico[data-ico="sum"]::before { left: 0; top: 45%; width: 100%; height: 10%; }
.tt-ico[data-ico="sum"]::after { left: 45%; top: 0; width: 10%; height: 100%; }
.tt-ico[data-ico="shrug"]::before { left: 0; top: 45%; width: 100%; height: 10%; }
.tt-ico[data-ico="shrug"]::after { display: none; }
.tt-ico[data-ico="split"]::before, .tt-ico[data-ico="split"]::after { left: 45%; top: 0; width: 10%; height: 100%; }
.tt-ico[data-ico="split"]::before { transform: rotate(45deg); }
.tt-ico[data-ico="split"]::after { transform: rotate(-45deg); }
.tt-ico[data-ico="star"]::before { inset: 8%; transform: rotate(45deg); border-radius: 2px; }
.tt-ico[data-ico="star"]::after { inset: 26%; border-radius: 50%; background: var(--tt-gold-h); }
.tt-ico[data-ico="tangle"]::before, .tt-ico[data-ico="tangle"]::after { top: 14%; width: 62%; height: 72%; background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.tt-ico[data-ico="tangle"]::before { left: 0; }
.tt-ico[data-ico="tangle"]::after { right: 0; }
.tt-ico[data-ico="flag"]::before { left: 18%; top: 0; width: 12%; height: 100%; }
.tt-ico[data-ico="flag"]::after { left: 30%; top: 4%; width: 60%; height: 44%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tt-ico[data-ico=""]::before, .tt-ico[data-ico=""]::after { display: none; }

.tt-ts {
  flex: none; width: var(--tt-tsW); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px;
  border-radius: var(--tt-r2); background: var(--tt-panel); box-shadow: inset 0 0 0 1px var(--tt-line);
  --tsInk: var(--tt-ink); --tsLbl: var(--tt-dim2);
}
.tt-ts[data-band="double"] { background: var(--tt-gold); box-shadow: inset 0 0 0 2px var(--tt-gold-h); --tsInk: var(--tt-gold-t); --tsLbl: var(--tt-gold-t2); }
.tt-ts[data-band="split"] { background: var(--tt-panel2); box-shadow: inset 0 0 0 2px var(--tt-split); --tsInk: var(--tt-split); --tsLbl: var(--tt-split); }
.tt-ts[data-band="tangle"] { background: var(--tt-panel2); box-shadow: inset 0 0 0 2px var(--tt-tangle-r); --tsInk: var(--tt-tangle-sub); --tsLbl: var(--tt-tangle-sub); }
.tt-ts small { font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .18em; color: var(--tsLbl); white-space: nowrap; }
.tt-ts b { width: 100%; text-align: center; font-size: var(--tt-fTurn); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tsInk); }
.tt-ts span { max-width: 100%; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .12em; color: var(--tsLbl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* THROW filled, BANK outlined — they differ in weight, not tint. Feedback is colour, glow and a
   4px shift; disabled drops the lip, goes flat, and names the reason on the reserved line. */
.tt-ctl { position: relative; flex: none; height: var(--tt-ctlH); display: flex; gap: var(--tt-g); }
/* 🌐 MP: the turn clock (2026-09-18) — an ABSOLUTE 3px bar centred in the gap above the buttons, so it can
 * never move a box (locked layout). Off, and invisible, at every solo table. Gold = your clock, dim = someone
 * else's, the split colour under five seconds. */
.tt-clock {
  position: absolute; left: 0; right: 0; top: calc(var(--tt-g) / -2 - 1.5px); height: 3px; pointer-events: none;
  border-radius: 2px; transform-origin: left center; transform: scaleX(0); background: var(--tt-dim); opacity: 0; transition: opacity .18s linear;
}
.tt-clock[data-on="1"] { opacity: .85; }
.tt-clock[data-mine="1"] { background: var(--tt-gold); }
.tt-clock[data-low="1"] { background: var(--tt-split); }
.tt-btn {
  min-width: 0; border: 0; border-radius: var(--tt-r2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transform: translateY(0); transition: box-shadow .12s, background .12s, color .12s, transform .1s;
}
.tt-btn b { font-size: var(--tt-fBtn); font-weight: 800; letter-spacing: .16em; line-height: 1; white-space: nowrap; }
/* the reason line is the button's full width — a text-sized line re-centred on every new reason */
.tt-btn small { height: 11px; width: 100%; text-align: center; padding: 0 4px; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .1em; line-height: 11px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-throw { flex: 1.3 1 0; background: var(--tt-gold); color: var(--tt-gold-t); box-shadow: 0 5px 0 0 var(--tt-gold-d); }
.tt-bank { flex: 1 1 0; background: var(--tt-panel2); color: var(--tt-bank); box-shadow: inset 0 0 0 2px var(--tt-bank), 0 5px 0 0 var(--tt-bank-d); }
@media (hover: hover) {
  .tt-throw:not(:disabled):hover { background: var(--tt-gold-h); box-shadow: 0 5px 0 0 var(--tt-gold-d), 0 0 26px -2px rgba(233, 178, 60, .85); }
  .tt-bank:not(:disabled):hover { background: #1d3a2a; color: var(--tt-bank-h); box-shadow: inset 0 0 0 2px var(--tt-bank-h), 0 5px 0 0 var(--tt-bank-d), 0 0 24px -4px rgba(102, 201, 143, .8); }
}
.tt-throw:not(:disabled):active { background: var(--tt-gold-p); box-shadow: 0 1px 0 0 var(--tt-gold-d), inset 0 3px 9px rgba(0, 0, 0, .35); transform: translateY(4px); }
.tt-bank:not(:disabled):active { background: #12241a; color: var(--tt-bank-p); box-shadow: inset 0 0 0 2px var(--tt-bank-p), 0 1px 0 0 var(--tt-bank-d), inset 0 3px 9px rgba(0, 0, 0, .4); transform: translateY(4px); }
.tt-btn:disabled { background: #111d19; color: var(--tt-dim2); box-shadow: inset 0 0 0 1.5px var(--tt-line); cursor: not-allowed; }

/* ── flights, the stinger, the pose sheet: ABSOLUTE layers INSIDE the root, never fixed ── */
.tt-fx { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.tt-fly {
  position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%);
  transition-property: transform, opacity; transition-timing-function: cubic-bezier(.3, .1, .25, 1);
}
.tt-fly::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--tt-gold); transform: rotate(45deg); box-shadow: 0 0 14px -2px rgba(233, 178, 60, .9); }
.tt-sting { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--tt-scrim); }
.tt-sting[data-on="0"] { visibility: hidden; }
.tt-stcard {
  width: 320px; max-width: 88%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 18px; text-align: center;
  border-radius: 18px; background: var(--tt-panel); color: var(--tt-ink); box-shadow: inset 0 0 0 3px var(--tt-line2), 0 30px 60px -20px rgba(0, 0, 0, .8);
  --stSub: var(--tt-dim);
}
.tt-sting[data-on="1"] .tt-stcard { animation: tt-pop .3s cubic-bezier(.3, 1.4, .6, 1) both; }
.tt-sting[data-tone="split"] .tt-stcard { background: var(--tt-split); color: var(--tt-split-ink); box-shadow: inset 0 0 0 3px var(--tt-split-r), 0 30px 60px -20px rgba(0, 0, 0, .8); --stSub: var(--tt-split-sub); }
.tt-sting[data-tone="double"] .tt-stcard, .tt-sting[data-tone="final"] .tt-stcard { background: var(--tt-gold); color: var(--tt-gold-t); box-shadow: inset 0 0 0 3px var(--tt-gold-h), 0 30px 60px -20px rgba(0, 0, 0, .8); --stSub: var(--tt-gold-t2); }
.tt-sting[data-tone="tangle"] .tt-stcard { background: var(--tt-tangle); color: var(--tt-tangle-ink); box-shadow: inset 0 0 0 3px var(--tt-tangle-r), 0 30px 60px -20px rgba(0, 0, 0, .8); --stSub: var(--tt-tangle-sub); }
.tt-stcard .tt-ico { width: 28px; height: 28px; }
.tt-sting[data-tone="double"] .tt-ico[data-ico="star"]::after { background: var(--tt-gold); }
.tt-stcard small { font-size: 9px; font-weight: 700; letter-spacing: .22em; color: var(--stSub); }
.tt-stcard b { font-size: calc(var(--tt-fTurn) * .62); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.tt-stcard span { font-size: var(--tt-fSub); font-weight: 700; letter-spacing: .05em; line-height: 1.35; color: var(--stSub); }

.tt-sheet { position: absolute; inset: 0; z-index: 9; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 8, 7, .72); }
.tt-sheet[data-on="0"] { visibility: hidden; pointer-events: none; }
.tt-sheetcard {
  width: 100%; max-height: 90%; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 14px 12px;
  border-radius: 18px 18px 0 0; background: var(--tt-panel); box-shadow: inset 0 0 0 1px var(--tt-line2), 0 -20px 50px -20px rgba(0, 0, 0, .8);
}
.tt-sheet[data-on="1"] .tt-sheetcard { animation: tt-pop .26s ease-out both; }
.tt-shhead { flex: none; display: flex; align-items: center; justify-content: space-between; }
.tt-shhead b { font-size: var(--tt-fCall); font-weight: 800; letter-spacing: -.01em; }
.tt-shclose { height: 26px; padding: 0 12px; border: 0; border-radius: var(--tt-rp); cursor: pointer; font-size: var(--tt-fLbl); font-weight: 700; letter-spacing: .14em; background: var(--tt-panel2); color: var(--tt-bank); box-shadow: inset 0 0 0 1.5px var(--tt-bank); }
.tt-shclose:hover { color: var(--tt-bank-h); box-shadow: inset 0 0 0 1.5px var(--tt-bank-h); }
.tt-shrow { flex: none; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: var(--tt-r2); background: var(--tt-panel2); box-shadow: inset 0 0 0 1px var(--tt-line); }
.tt-shart { position: relative; flex: none; width: 32px; height: 32px; }
.tt-shname { flex: 1 1 auto; min-width: 0; font-size: var(--tt-fName); font-weight: 700; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-shpts { flex: none; width: 58px; text-align: right; font-size: var(--tt-fSub); font-weight: 700; letter-spacing: .06em; color: var(--tt-gold); white-space: nowrap; }
.tt-shbar { position: relative; flex: none; width: 56px; height: 5px; border-radius: var(--tt-rp); background: var(--tt-slot); box-shadow: inset 0 0 0 1px var(--tt-line); }
.tt-shbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--tt-rp); background: var(--tt-dim); }
.tt-shrate { flex: none; width: 40px; text-align: right; font-size: var(--tt-fSub); font-variant-numeric: tabular-nums; color: var(--tt-dim); }
.tt-shfoot { flex: none; font-size: var(--tt-fSub); line-height: 1.4; color: var(--tt-dim); }

/* end screen rows (GameEndScreen html section) */
.tt-endrows { display: flex; flex-direction: column; gap: 6px; }
.tt-endrow { display: grid; grid-template-columns: 1fr auto 56px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.tt-endrow[data-win="1"] { background: rgba(233, 178, 60, .16); }
.tt-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tt-endav { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-style: normal; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .6); }
.tt-endnm .tt-glyph { --tt-gly: 10px; background: currentColor; }
.tt-endnm .tt-glyph[data-shape="ring"] { background: transparent; border-color: currentColor; }
.tt-endst { font-size: 12px; opacity: .75; }
.tt-endsc { text-align: right; font-weight: 800; font-size: 16px; }
.tt-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .tt-seat, .tt-band, .tt-toad, .tt-stcard, .tt-sheetcard, .tt-pill i { animation: none !important; }
  /* ⛔ the SLOT keeps its colour and its word — only the pulse and the drop-in go. */
  .tt-slot, .tt-flash, .tt-flashnote { animation: none !important; }
  .tt-fly, .tt-fill, .tt-toadbox { transition: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* ⛔ The vertical gutter goes too (the Pachisi / Salvage finding), scoped to a live board. */
  #toadtoss-game-screen.tt-playing .wrap { padding: 0 2px; max-width: none; }
  #toadtoss-game-screen.tt-playing .topbar { display: none; }
  #toadtoss-game-screen.tt-playing.tt-topbar-open .topbar { display: flex; }
}
/* the 360 × 740 stress frame (mock F7 · 360) */
@media (max-width: 999px) and (max-height: 760px) {
  .tt-root { --tt-pad: 10px; --tt-g: 8px; --tt-headH: 34px; --tt-seatH: 48px; --tt-av: 21px; --tt-trk: 4px; --tt-bandH: 84px; --tt-ctlH: 58px; --tt-toadBox: 100px; --tt-slotW: 138px; --tt-slotGap: 10px; --tt-tsW: 118px;
    --tt-fLbl: 8.5px; --tt-fSub: 10px; --tt-fName: 11px; --tt-fScore: 18px; --tt-fTurn: 40px; --tt-fCall: 16px; --tt-fBtn: 16px; --tt-fPose: 10px; --tt-fPts: 9px; --tt-fFlash: 22px; }
  .tt-slot { padding: 10px 6px 8px; gap: 6px; }
}
/* narrow: 360 wide — L3, the label row holds SNOUT‑STAND + 10 PTS */
@media (max-width: 370px) {
  .tt-root { --tt-slotW: 138px; --tt-slotGap: 10px; --tt-fPose: 9.5px; --tt-fPts: 8.5px; --tt-tsW: 112px; }
  .tt-brand { letter-spacing: .14em; }
  .tt-plbl { gap: 4px; }
  .tt-pname { letter-spacing: .04em; }
  .tt-ppts { padding: 3px 4px; letter-spacing: .02em; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 553) ── */
@media (min-width: 1000px) {
  #toadtoss-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .tt-root {
    --tt-pad: 16px; --tt-g: 14px; --tt-headH: 40px; --tt-seatH: 62px; --tt-av: 30px; --tt-gly: 13px; --tt-trk: 6px;
    --tt-bandH: 104px; --tt-ctlH: 70px; --tt-toadBox: 176px; --tt-slotW: 224px; --tt-slotGap: 22px; --tt-tsW: 206px;
    --tt-fName: 15px; --tt-fLbl: 10px; --tt-fSub: 12px; --tt-fScore: 26px; --tt-fTurn: 62px; --tt-fCall: 25px; --tt-fBtn: 20px; --tt-fPose: 13px; --tt-fPts: 12px; --tt-fFlash: 38px;
    width: 1280px; height: 553px; border-radius: 16px; box-shadow: 0 26px 60px -30px #000;
  }
  .tt-menu { display: none; }
  .tt-brand { font-size: 10px; letter-spacing: .22em; gap: 9px; }
  .tt-hsp { display: block; }
  .tt-pill { flex: none; width: 300px; height: 25px; padding: 0 11px; letter-spacing: .14em; }
  .tt-hright { display: block; flex: none; width: 130px; text-align: right; font-size: 10px; letter-spacing: .16em; color: var(--tt-dim2); }
  .tt-hright[data-final="1"] { color: var(--tt-gold); font-weight: 700; }
  .tt-posesbtn { height: 25px; }

  /* rail 400 + 14 + main 834 = 1248 = 1280 − 2 × 16 */
  .tt-body { flex-direction: row; gap: 14px; }
  .tt-rail { width: 400px; }
  .tt-seats { grid-template-columns: minmax(0, 1fr); }
  .tt-tag { display: block; }
  .tt-mark { display: none !important; }
  .tt-legend { height: 20px; }
  .tt-matlbl, .tt-matnote { top: 10px; }
  .tt-band { padding: 0 15px; gap: 6px; }
  .tt-csub { height: 15px; line-height: 15px; }
  .tt-btn small { height: 12px; line-height: 12px; }
  .tt-stcard { width: 560px; padding: 22px 20px; gap: 9px; }
  .tt-stcard .tt-ico { width: 30px; height: 30px; }
  .tt-stcard small { font-size: 10px; }
  .tt-sheetcard { width: 620px; max-height: 94%; border-radius: 18px; margin-bottom: 20px; padding: 16px 14px; gap: 8px; }
  .tt-sheet { align-items: center; }
  .tt-shrow { height: 42px; }
  .tt-shart { width: 34px; height: 34px; }
}