/* PW Counter: PalVault's palette (dark), with a day sky and a night sky on the board. */
/* the version of this file: index.html checks it matches the page (a stale stylesheet once showed every button at once) */
:root { --pwc-v: "0.3.18"; }
:root {
  --bg: #070b17;
  --text: #e8ecfa; --text-2: #9aa6c8; --text-3: #69769c;
  --accent: #a9abee; --cyan: #a3cfd8; --gold: #e3c893; --sage: #a4d4ba; --rose: #d8a2ab; --purple: #c2a3e2;
  --border: rgba(150, 170, 230, .16);
  --radius: 26px; --radius-sm: 14px;
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  color: var(--text); font: 15px/1.45 var(--font-ui);
  -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: manipulation;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { display: block; }
.noscript { padding: 24px; text-align: center; }

/* ---------- the stage (the whole board; turned as one in landscape) ---------- */
.stage {
  /* day defaults */
  --tile: linear-gradient(180deg, rgba(10, 38, 88, .74), rgba(6, 26, 66, .82));
  --tile-edge: rgba(255, 255, 255, .24);
  --tile-press: rgba(255, 255, 255, .1);
  --pm: rgba(255, 255, 255, .92); --pm-edge: rgba(255, 255, 255, .42); --pm-fill: rgba(255, 255, 255, .1);
  --acc: var(--gold);
  --acc-ink: #2a1f08;
  --num: #fff6e2; /* js/life.js knows this colour too (the life number at 10) */
  position: fixed; inset: 0; overflow: hidden; isolation: isolate;
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: 'top' 'bar' 'bottom';
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  container-type: size; container-name: stage;
}
.stage[data-time='night'] {
  --tile: linear-gradient(180deg, rgba(20, 26, 52, .86), rgba(11, 16, 34, .9));
  --tile-edge: rgba(169, 171, 238, .22);
  --tile-press: rgba(169, 171, 238, .1);
  --pm: #dcdcfb; --pm-edge: rgba(169, 171, 238, .5); --pm-fill: rgba(169, 171, 238, .12);
  --acc: var(--accent);
  --acc-ink: #161a33;
  --num: #e8ecfa; /* js/life.js knows this colour too */
}
.stage[data-players='1'] { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'bottom' 'bar'; }
.seat[data-seat='1'] { grid-area: top; }
.seat[data-seat='0'] { grid-area: bottom; }
.bar { grid-area: bar; }

/* Landscape by setting: the phone stays portrait, the board turns 90°. */
.stage[data-land='right'], .stage[data-land='left'] {
  inset: auto; width: 100vh; height: 100vw; width: 100dvh; transform-origin: 0 0;
}
.stage[data-land='right'] { top: 0; left: 100vw; transform: rotate(90deg); }
.stage[data-land='left'] { top: 100vh; top: 100dvh; left: 0; transform: rotate(-90deg); }

/* Tablet mode (experimental, two players): the two seats side by side, both upright. Left: Player 1 on the left,
   Right: Player 1 on the right. With the screen portrait (orientation lock on) the board turns itself, like Landscape
   Left / Right, so Player 1 sits on the tablet's bottom edge; when the browser is already landscape it is not turned
   again (0.3.16: turning it twice put everything sideways). */
.stage:is([data-tablet='left'], [data-tablet='right']) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 18px;
}
.stage[data-tablet='right'] { grid-template-areas: 'top bottom' 'bar bar'; }
.stage[data-tablet='left'] { grid-template-areas: 'bottom top' 'bar bar'; }
@media (orientation: portrait) {
  .stage:is([data-tablet='left'], [data-tablet='right']) { inset: auto; width: 100vh; height: 100vw; width: 100dvh; transform-origin: 0 0; }
  .stage[data-tablet='right'] { top: 0; left: 100vw; transform: rotate(90deg); }
  .stage[data-tablet='left'] { top: 100vh; top: 100dvh; left: 0; transform: rotate(-90deg); }
}
.stage:not([data-tablet='off']) .bar { justify-self: center; width: min(620px, 100%); }
/* who goes first, Begin and Game over: Player 2's half on the left, Player 1's on the right */
.stage:not([data-tablet='off']) .overlay.first2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.stage:not([data-tablet='off']) .begin { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
/* turned left, Player 1 (the bottom side in these screens) comes first, on the left */
.stage[data-tablet='left'] :is(.f2-side.bottom, .bg-side.bottom) { order: -1; }
.stage[data-tablet='left'] .f2-mid { order: 0; }
.stage[data-tablet='left'] .f2-side.top { order: 1; }
.stage:not([data-tablet='off']) .bg-side b { font-size: clamp(44px, 9vmin, 104px); } /* half the width each: the big words fit their half */
.stage:not([data-tablet='off']) .over .bg-side b { font-size: clamp(40px, 7.5vmin, 88px); }

/* ---------- sky ---------- */
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .3, 1); }
.sky::before, .sky::after { content: ''; position: absolute; inset: 0; transition: opacity .7s ease; }
/* day: a clear blue sky warming toward the horizon */
.sky::before {
  background:
    radial-gradient(60% 38% at 86% 4%, rgba(255, 252, 235, .55), transparent 70%),
    linear-gradient(180deg, #0d3f8f 0%, #1666c2 46%, #2f8ad8 78%, #4aa3e2 100%);
}
/* night: PalVault's deep navy */
.sky::after {
  opacity: 0;
  background:
    radial-gradient(60% 40% at 18% 8%, rgba(190, 200, 255, .16), transparent 70%),
    radial-gradient(90% 60% at 80% 100%, rgba(80, 70, 160, .22), transparent 70%),
    linear-gradient(180deg, #070b17, #060916 62%, #0a0f24);
}
/* two players: the sky is the same for both. The sun and moon sit at the middle (sun right, moon left), the day sky is
   lightest in the middle and the night glow is by the moon, so neither player has the "top" of the sky. */
.stage[data-players='2'] .sun { top: 50%; right: -70px; margin-top: -110px; }
.stage[data-players='2'] .moon { top: 50%; left: 14px; margin-top: -60px; }
.stage[data-players='2'] .sky::before {
  background:
    radial-gradient(34% 30% at 96% 50%, rgba(255, 252, 235, .5), transparent 70%),
    linear-gradient(180deg, #0d3f8f 0%, #2a83d4 40%, #3d97dd 50%, #2a83d4 60%, #0d3f8f 100%);
}
.stage[data-players='2'] .sky::after {
  background:
    radial-gradient(40% 30% at 8% 50%, rgba(190, 200, 255, .16), transparent 70%),
    linear-gradient(180deg, #070b17, #0a0f24 50%, #070b17);
}
.stage[data-time='night'] .sky::before { opacity: 0; }
.stage[data-time='night'] .sky::after { opacity: 1; }
.sky i { z-index: 1; }
.stars { inset: 0; opacity: 0; }
.stars.s1 {
  background-size: 220px 220px;
  background-image: radial-gradient(1.4px 1.4px at 24px 42px, rgba(255, 255, 255, .85), transparent 100%),
    radial-gradient(1px 1px at 152px 96px, rgba(198, 214, 255, .6), transparent 100%),
    radial-gradient(1.7px 1.7px at 88px 178px, rgba(255, 255, 255, .7), transparent 100%),
    radial-gradient(1px 1px at 200px 24px, rgba(180, 200, 255, .55), transparent 100%),
    radial-gradient(1.2px 1.2px at 176px 200px, rgba(255, 255, 255, .5), transparent 100%);
}
.stars.s2 {
  inset: -10%; background-size: 380px 380px;
  background-image: radial-gradient(1px 1px at 60px 20px, rgba(255, 255, 255, .6), transparent 100%),
    radial-gradient(1.5px 1.5px at 300px 140px, rgba(230, 240, 255, .5), transparent 100%),
    radial-gradient(1px 1px at 180px 300px, rgba(255, 255, 255, .45), transparent 100%);
}
.stage[data-time='night'] .stars { opacity: 1; }
.stage[data-time='night'] .stars.s2 { opacity: .65; }
/* the stars move only at night (by day they are invisible, and a running animation keeps the screen redrawing) */
.stage[data-time='night'] .stars.s1 { animation: twinkle 7s ease-in-out infinite; }
.stage[data-time='night'] .stars.s2 { animation: drift 120s linear infinite alternate; }
.sun {
  width: 220px; height: 220px; right: -60px; top: -60px; border-radius: 50%;
  background: radial-gradient(circle, #fffef6 0 22%, rgba(255, 248, 220, .7) 30%, rgba(255, 244, 210, .16) 52%, transparent 70%);
}
.moon {
  width: 120px; height: 120px; left: 18px; top: 22px; border-radius: 50%; opacity: 0; transform: translateY(30px) scale(.9);
  background: radial-gradient(circle at 38% 38%, #f4f2ff 0 34%, rgba(220, 222, 255, .25) 46%, transparent 64%);
  box-shadow: inset -18px -6px 0 -4px rgba(7, 11, 23, .0);
}
.moon::after { /* the crescent bite */
  content: ''; position: absolute; left: 47px; top: 30px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #0a1024 0 58%, transparent 66%);
}
.stage[data-time='night'] .sun { opacity: 0; transform: translateY(40px) scale(.85); }
.stage[data-time='night'] .moon { opacity: .9; transform: none; }
.haze { inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22), transparent 70%); }
.stage.flash .haze { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-160px, -50px, 0); } }

/* ---------- seats ---------- */
.seat { min-height: 0; position: relative; isolation: isolate; border-radius: calc(var(--radius) + 8px); padding: 8px; }
.stage[data-flip='on'] .seat[data-seat='1'] { transform: rotate(180deg); }
/* whose turn: a soft filled panel behind that player's tiles, no outline */
/* the panel is its own layer that fades in (a fading blurred shadow repainted the whole seat every frame); 0.3.4: brighter, a thicker ring and a wider glow */
.seat::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--radius) + 10px); pointer-events: none; opacity: 0; transition: opacity .35s; will-change: opacity; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 52%, transparent), color-mix(in srgb, var(--acc) 30%, transparent)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--acc) 95%, transparent), 0 0 44px color-mix(in srgb, var(--acc) 60%, transparent), 0 12px 48px color-mix(in srgb, var(--acc) 35%, transparent); }
.seat.active::before { opacity: 1; }
.seat-in {
  height: 100%; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) clamp(104px, 15cqh, 140px);
}
/* one player: life and the resources in proportion (about 4 : 3), not one giant tile */
.stage[data-players='1'] .seat-in { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
.stage[data-players='1'] .t-life .num { font-size: min(34cqh, 30cqw); }
.stage[data-players='1'] .t-life .ico { width: min(13cqh, 46px); height: min(13cqh, 46px); }
.res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }

/* landscape: life on the left, the two resources stacked on the right */
.stage[data-land='left'] .seat-in, .stage[data-land='right'] .seat-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr); }
.stage[data-land='left'] .res, .stage[data-land='right'] .res { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
/* where each tile sits: life on top, the resources, then souls (when tracked) */
.t-life { grid-area: life; } .res { grid-area: res; } .t-soul { grid-area: soul; }
.seat-in { grid-template-areas: 'life' 'res'; }
.stage[data-souls='on'] .seat-in { grid-template-areas: 'life' 'res' 'soul'; grid-template-rows: minmax(0, 1fr) clamp(84px, 10cqh, 116px) clamp(138px, 15cqh, 164px); } /* 0.3.7: souls taller, for the − of N + strip */
.stage[data-souls='on'][data-players='1'] .seat-in { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); }
.stage[data-souls='on'][data-players='1'][data-soulbg='on'] .seat-in, .stage[data-souls='on'][data-soulview='cards'] .seat-in { grid-template-rows: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr); }
.stage[data-land='left'] .seat-in, .stage[data-land='right'] .seat-in { grid-template-areas: 'life res'; }
.stage[data-land='left'][data-souls='on'] .seat-in, .stage[data-land='right'][data-souls='on'] .seat-in { grid-template-areas: 'life res' 'life soul'; grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
.stage[data-land='left'][data-players='1'][data-soulbg='on'] .seat-in, .stage[data-land='right'][data-players='1'][data-soulbg='on'] .seat-in, .stage[data-land='left'][data-soulview='cards'] .seat-in, .stage[data-land='right'][data-soulview='cards'] .seat-in { grid-template-areas: 'life res' 'soul soul'; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
/* landscape cards: a slim header and cards that use the row's full height */
.stage[data-land='left'][data-soulview='cards'] .t-soul, .stage[data-land='right'][data-soulview='cards'] .t-soul { padding: 6px 12px 8px; }
.stage[data-land='left'] .soul-cards, .stage[data-land='right'] .soul-cards { gap: 4px; }
.stage[data-land='left'] .sc-head, .stage[data-land='right'] .sc-head { min-height: 22px; }
.stage[data-land='left'] .sc-row, .stage[data-land='right'] .sc-row { gap: 6px; }
.stage[data-land='left'][data-soulview='cards'] .soul-adj, .stage[data-land='right'][data-soulview='cards'] .soul-adj { top: 4px; }

/* ---------- a counter tile: left half takes one off, right half adds one ---------- */
.tile {
  position: relative; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  background: var(--tile); border: 1px solid var(--tile-edge); border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(3, 6, 18, .35);
  container-type: size; /* no colour transition: the gradient cannot fade anyway, and fading the edge redrew every tile on every frame of the day / night switch */
}
.t-life { border-radius: var(--radius); }
.hit { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; border: 0; padding: 0; transition: background .12s; }
/* each half is its own button: a faint tint toward its edge, a divider down the middle */
.hit.minus { left: 0; } .hit.plus { right: 0; }
.hit { background: transparent; }
.hit:active { background: var(--tile-press); }
@media (hover: hover) { .hit:hover { background: color-mix(in srgb, var(--tile-press) 60%, transparent); } }
.tile::after {
  content: ''; position: absolute; z-index: 2; left: 50%; top: 10%; bottom: 10%; width: 0; pointer-events: none;
  border-left: 1.5px dashed color-mix(in srgb, var(--text) 26%, transparent);
}
.pm, .core, .delta { position: relative; z-index: 3; pointer-events: none; }
.pm {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 700 20px/1 var(--font-ui); border: 1.5px solid;
}
.pm { color: var(--pm); border-color: var(--pm-edge); background: var(--pm-fill); }
.t-life .pm { width: clamp(36px, 14cqh, 52px); height: clamp(36px, 14cqh, 52px); font-size: clamp(22px, 8cqh, 32px); }
.core {
  flex: 1; min-width: 0; align-self: stretch;
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center;
}
.head { grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 9px; min-width: 0; }
/* short tiles: icon beside the word, so both fit above the number */
@container (max-height: 180px) { .head { flex-direction: row; gap: 6px; padding-bottom: 6px; } .head .ico { width: 20px; height: 20px; } }
.num { grid-row: 2; font: 600 min(40cqh, 40cqw)/.9 var(--font-head); font-variant-numeric: tabular-nums; color: var(--num); letter-spacing: -.02em; }
.lbl { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.ico { width: min(20cqh, 40px); height: min(20cqh, 40px); flex: none; }
.ico svg { width: 100%; height: 100%; }
.t-mat .pm, .t-ing .pm { width: clamp(30px, 26cqh, 40px); height: clamp(30px, 26cqh, 40px); font-size: clamp(18px, 15cqh, 24px); }
.t-life .ico { width: min(16cqh, 54px); height: min(16cqh, 54px); }
.stage[data-icons='only'] .lbl { display: none; }
.stage[data-icons='only'] .head { flex-direction: column; padding-bottom: 6px; }
.stage[data-icons='only'] .ico { width: min(30cqh, 64px); height: min(30cqh, 64px); }
.stage[data-icons='only'] .t-life .ico { width: min(26cqh, 84px); height: min(26cqh, 84px); }
@container (max-height: 180px) { .stage[data-icons='only'] .head .ico { width: min(24cqh, 44px); height: min(24cqh, 44px); } .stage[data-icons='only'] .head { padding-bottom: 4px; } }
.stage[data-icons='only'] .sc-head .lbl { display: none; }
.t-soul .core { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1.3fr); }
.t-soul .num { font-size: min(34cqh, 40cqw); }
.t-life .num { font-size: min(44cqh, 40cqw); }
/* long numbers (life can reach 99999) get smaller so they stay between the buttons */
.stage .tile .num[data-len='3'] { font-size: min(40cqh, 30cqw); }
.stage .tile .num[data-len='4'] { font-size: min(36cqh, 23cqw); }
.stage .tile .num[data-len='5'] { font-size: min(32cqh, 19cqw); }
.qa { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.qa h4 { margin: 0 0 6px; font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.qa dt { color: var(--text); font-weight: 600; margin-top: 8px; }
.qa dd { margin: 4px 0 0; }
.qa a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(163, 207, 216, .4); }
.qa dt { margin-top: 14px; }
.qa-note { margin: 0 0 4px; font-size: 12.5px; color: var(--text-3); }
.qa-list, .qa-links { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.qa-list li { position: relative; padding-left: 26px; line-height: 1.45; }
.qa-list li b { color: var(--text); font-weight: 600; }
/* a word mark, not colour alone: ✓ allowed, ? depends, ✕ not allowed */
.qa-list li::before { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font-ui); }
.qa-list li.ok::before { content: '✓'; background: rgba(164, 212, 186, .2); color: var(--sage); }
.qa-list li.maybe::before { content: '?'; background: rgba(227, 200, 147, .2); color: var(--gold); }
.qa-list li.no::before { content: '✕'; background: rgba(216, 162, 171, .2); color: var(--rose); }
.qa-src { margin: 6px 0 0; font: 500 11.5px/1.4 var(--font-mono); color: var(--text-3); }
.qa-links li { line-height: 1.45; }
.delta {
  position: absolute; bottom: 8px; left: 50%; translate: -50% 0; z-index: 3;
  padding: 5px 15px; border-radius: 999px; font: 700 21px/1.2 var(--font-mono); white-space: nowrap;
  color: #08251a; background: var(--sage); opacity: 0; transform: translateY(-6px); transition: opacity .4s ease-out, transform .4s;
}
.delta.neg { color: #34121a; background: var(--rose); }
.delta.show { opacity: 1; transform: none; }
.t-life .delta { bottom: 38px; font-size: 26px; padding: 6px 18px; }
/* two players: the life tile is shorter, so the badge goes to the corner on the + side, clear of the number (both seats) */
.stage[data-players='2'] .t-life .delta { top: 10px; bottom: auto; left: auto; right: 14px; translate: none; font-size: 22px; padding: 4px 14px; }
@container (max-height: 130px) { .delta { font-size: 17px; padding: 3px 11px; bottom: 5px; } }

/* icon colours (drawn for this app) */
/* All four icons: flat sticker style, one solid fill, an outline in a darker shade of the same colour (paint-order puts it behind the fill), light details */
.i-heart, .i-wisp, .i-log, .i-fruit, .i-leaf { stroke-width: 3.2; stroke-linejoin: round; paint-order: stroke; }
.i-heart { fill: #ef5a63; stroke: #6e0d1c; }
.i-shine { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.i-wisp { fill: #8f6ee6; stroke: #2f1f6b; }
.i-wisp-in { fill: #e4dbff; }
.i-log { fill: #7b4a12; stroke: #3f240a; }
.i-rings { fill: none; stroke: #3f240a; stroke-width: 2.4; stroke-linecap: round; }
.i-grain { fill: none; stroke: #3f240a; stroke-width: 2.4; stroke-linecap: round; }
.i-fruit, .i-leaf { fill: #1eab3f; stroke: #0f6b26; }
.i-stem { fill: none; stroke: #0f6b26; stroke-width: 2.6; stroke-linecap: round; } /* where the stalk goes into the fruit */
.i-stalk-o, .i-stalk { fill: none; stroke-linecap: round; }
.i-stalk-o { stroke: #0f6b26; stroke-width: 7.4; }
.i-stalk { stroke: #1eab3f; stroke-width: 3.2; }
/* the fruit is drawn on a 100-unit grid: same look, strokes scaled to match the 64-unit icons */
.ico-100 .i-fruit, .ico-100 .i-leaf, .ico-100 .i-log { stroke-width: 5; }
.ico-100 .i-rings { stroke-width: 3.2; }
.ico-100 .i-grain { stroke-width: 3.4; }
.ico-100 .i-stem { stroke-width: 3.4; stroke-linejoin: round; }
.i-shine2 { fill: #fff; }

/* ---------- souls ---------- */
/* numbers view: "− of 5 +" under the standing count changes how many souls there are */
.soul-adj {
  position: absolute; z-index: 4; left: 50%; bottom: 6px; translate: -50% 0; display: flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-mono); color: var(--text-2); white-space: nowrap;
}
.soul-adj b { color: var(--text); }
.soul-adj { gap: 8px; }
.soul-adj button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--pm-edge); background: var(--pm-fill); color: var(--pm); font: 700 15px/1 var(--font-ui); padding: 0; }
/* 0.3.7: "− of 5 +" has its own strip along the bottom of the soul tile, under a line, with bigger buttons;
   the big rest / stand halves stop above it, so a tap that misses a small button does nothing */
.t-soul { --adj-h: 44px; }
.stage[data-players='2'] .t-soul { --adj-h: 40px; }
.stage[data-players='2']:not([data-soulview='cards']) .soul-adj button { height: 30px; }
.stage:not([data-soulview='cards']) .t-soul { padding-bottom: var(--adj-h); }
.stage:not([data-soulview='cards']) .t-soul > .hit { bottom: var(--adj-h); }
.stage:not([data-soulview='cards']) .t-soul::after { bottom: calc(var(--adj-h) + 6px); }
.stage:not([data-soulview='cards']) .soul-adj {
  left: 0; right: 0; bottom: 0; translate: none; height: var(--adj-h); justify-content: center; gap: 10px;
  border-top: 1px solid var(--border); background: rgba(3, 6, 18, .28); font-size: 13px;
}
.stage:not([data-soulview='cards']) .soul-adj button { width: 54px; height: 32px; border-radius: 10px; font-size: 20px; }
.stage:not([data-soulview='cards']) .soul-adj button:active { background: var(--tile-press); }
.stage:not([data-soulview='cards']) .soul-adj .of { min-width: 4.5em; text-align: center; }
.soul-cards { display: none; }
/* cards view (one player): the souls as cards, tap to rest or stand */
.stage[data-soulview='cards'] .t-soul > .hit, .stage[data-soulview='cards'] .t-soul > .pm, .stage[data-soulview='cards'] .t-soul .core { display: none; }
.stage[data-soulview='cards'] .t-soul::after { display: none; }
.stage[data-soulview='cards'] .t-soul { padding: 10px 12px 12px; align-items: stretch; }
.stage[data-soulview='cards'] .soul-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; position: relative; z-index: 3; }
.sc-head { display: flex; align-items: center; gap: 8px; padding-right: 96px; min-height: 26px; }
.sc-head .ico { width: 22px; height: 22px; }
.sc-count { margin-left: auto; font: 600 11px/1 var(--font-mono); color: var(--text-2); white-space: nowrap; }
/* the cards area; in 'Sides' mode its left half rests a soul and its right half stands one, like the other counters */
.sc-body { position: relative; flex: 1; min-height: 0; display: flex; }
.stage[data-soulview='cards'] .sc-body { margin-top: 8px; } /* keeps the header's total − / + well away from the tapping area */
.sc-hit, .sc-pm { display: none; }
.stage[data-soultap='halves'] .sc-hit { display: block; z-index: 4; }
.stage[data-soultap='halves'] .sc-pm { display: grid; position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 36px; height: 36px; font-size: 22px; }
.stage[data-soultap='halves'] .sc-pm.minus { left: 4px; } .stage[data-soultap='halves'] .sc-pm.plus { right: 4px; }
.stage[data-soultap='halves'] .sc-body::after {
  content: ''; position: absolute; z-index: 3; left: 50%; top: 4%; bottom: 4%; width: 0; pointer-events: none;
  border-left: 1.5px dashed color-mix(in srgb, var(--text) 26%, transparent);
}
.stage[data-soultap='halves'] .sc-row { padding: 0 44px; }
.stage[data-soultap='halves'] .sc-card { pointer-events: none; }
/* the total − / + sit in the header, above a line, never inside the tapping area */
.stage[data-soulview='cards'] .sc-head { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.sc-row { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; place-items: center; }
.stage[data-land='left'] .sc-row, .stage[data-land='right'] .sc-row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.sc-card {
  height: 100%; max-width: 100%; aspect-ratio: 63 / 88; padding: 0; border-radius: 8px; transition: transform .18s, opacity .18s, background .18s;
  border: 1.5px solid rgba(217, 204, 255, .65);
  background: radial-gradient(circle at 50% 42%, rgba(217, 204, 255, .9) 0 14%, rgba(143, 110, 230, .55) 30%, transparent 60%), linear-gradient(180deg, #4a3591, #261a57);
}
.sc-card[data-state='rest'] { transform: rotate(90deg) scale(.78); opacity: .55; filter: saturate(.5); }
.sc-card[data-state='empty'] { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); }
.sc-card:not(:disabled):active { filter: brightness(1.25); }
.stage[data-soulview='cards'] .soul-adj { top: 10px; bottom: auto; left: auto; right: 12px; translate: none; }
.stage[data-soulview='cards'] .soul-adj .of { display: none; }
/* cards-only styles show no number */
.stage[data-soulview='cards'] .sc-count { display: none; }
/* "Numbers on cards": the cards drawn faintly behind the count; not tappable, the halves do the work */
.stage[data-soulbg='on'] .soul-cards { display: flex; position: absolute; inset: 12px 64px calc(var(--adj-h) + 6px); z-index: 1; opacity: .3; pointer-events: none; }
.stage[data-soulbg='on'] .sc-head, .stage[data-soulbg='on'] .sc-hit, .stage[data-soulbg='on'] .sc-pm { display: none; }
.stage[data-soulbg='on'] .sc-body { margin: 0; }
.stage[data-soulbg='on'] .t-soul .num { text-shadow: 0 2px 14px rgba(3, 6, 18, .85); }
/* two players, Numbers on cards: small soul cards behind the count, two rows of five bunched in the middle
   (standing = a card face with a soul flame, rested = face down, empty = a dashed outline) */
.stage[data-players='2'][data-soulbg='on'] .soul-cards { inset: 4px 48px calc(var(--adj-h) + 4px); opacity: .55; }
.stage[data-players='2'][data-soulbg='on'] .sc-row { grid-template-columns: repeat(5, 38px); justify-content: center; gap: 4px 6px; }
.stage[data-players='2'][data-soulbg='on'] .sc-card {
  aspect-ratio: 63 / 88; height: 100%; width: auto; max-width: 100%; border-radius: 4px; transform: none; filter: none;
  border: 1.5px solid #cbbcff;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%222 2 58 58%22%3E%3Cpath d=%22M33 6c2 9 14 13 16 26 2 12-6 24-17 24S13 48 14 37c1-8 7-11 8-18 4 4 4 9 3 12 5-4 9-13 8-25Z%22 fill=%22%23e4dbff%22/%3E%3C/svg%3E") center / 52% no-repeat, radial-gradient(circle at 50% 45%, rgba(143, 110, 230, .7), transparent 65%), linear-gradient(180deg, #4a3591, #221650);
  box-shadow: inset 0 0 0 2px #2a1d60, inset 0 0 0 3px rgba(217, 204, 255, .35);
}
.stage[data-players='2'][data-soulbg='on'] .sc-card[data-state='rest'] {
  transform: none; filter: none; opacity: .7; border-color: rgba(203, 188, 255, .4);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 7px), linear-gradient(180deg, #2b2150, #17112f);
  box-shadow: inset 0 0 0 2px #17112f, inset 0 0 0 3px rgba(217, 204, 255, .15);
}
.stage[data-players='2'][data-soulbg='on'] .sc-card[data-state='empty'] { background: transparent; box-shadow: none; border: 1.5px dashed rgba(232, 236, 250, .35); }
/* who goes first, in the big throw (0.3.13): one die, no Done / Roll again, the words a little smaller (they are longer) */
#ov-throw[data-first] .d2-slot + .d2-slot, #ov-throw[data-first] #tm-b, #ov-throw[data-first] .throw-btns { display: none; }
#ov-throw[data-first] .throw-out { font-size: clamp(24px, 6vmin, 40px); }
/* the soul style picker: one choice per row, with a line of help */
.set-row.stack { flex-direction: column; align-items: stretch; }
.seg.stack { display: grid; gap: 4px; }
.seg.stack button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; min-height: 0; }
.seg.stack button b { font-weight: 600; color: inherit; }
.seg.stack button small { font-weight: 400; font-size: 12.5px; opacity: .85; }
/* souls: the badge sits at the top of the tile, clear of the "− of 6 +" line and the card header */
.t-soul .delta { top: 12px; bottom: auto; left: 16px; translate: none; z-index: 6; }
.stage[data-soulview='cards'] .t-soul .delta { top: auto; bottom: 10px; left: 50%; translate: -50% 0; }

/* who goes first */
.first-btns { display: grid; gap: 10px; }
.stage[data-players='2'] #first-b { order: -1; } /* the top player's choice sits above the bottom player's, as at the table */
.btn.ghost { background: transparent; }
.btn.link { border: 0; background: transparent; color: var(--text-2); min-height: 40px; margin-top: 6px; }
.first-out { margin: 12px 0 0; font: 600 18px/1.2 var(--font-head); color: var(--gold); min-height: 22px; }
.set-h { margin: 22px 0 2px; font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ---------- the bar between the seats ---------- */
.bar { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 8px; min-width: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.stage[data-face='top'] .bar, .stage[data-face='top'] :is(#ov-calc, #ov-dice) { transform: rotate(180deg); } /* settings, reset and rooms stay with Player 1 */
.stage[data-players='1']:not([data-souls='on']):not([data-room='on']) .endturn { visibility: hidden; } /* one player: no turns to track (its space keeps the bar balanced); with souls it starts your turn */
.bar-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-side.end { justify-content: flex-end; }
.ibtn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(13, 19, 38, .88);
}
.ibtn svg, .daynight svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ibtn:active { transform: scale(.94); }
.daynight {
  height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 12px; border-radius: 999px; flex: none;
  font: 700 13.5px/1 var(--font-ui); transition: background .5s, color .5s, border-color .5s, box-shadow .5s;
  background: linear-gradient(180deg, #f6dda2, #e3b762); color: #3a2706; border: 1px solid rgba(255, 230, 170, .8);
  box-shadow: 0 0 18px rgba(255, 200, 110, .35);
}
.daynight .ico-moon { display: none; }
.stage[data-time='night'] .daynight {
  background: linear-gradient(180deg, #2b2f63, #1b1e44); color: #dfe0ff; border-color: rgba(169, 171, 238, .55);
  box-shadow: 0 0 18px rgba(130, 130, 230, .3);
}
.stage[data-time='night'] .daynight .ico-sun { display: none; }
.stage[data-time='night'] .daynight .ico-moon { display: block; fill: currentColor; }
.endturn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 22px; min-height: 60px; border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 16%, rgba(13, 19, 38, .9)); border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent);
}
.endturn:active { transform: scale(.97); }
/* the turn button never grows into the buttons beside it: its words shrink instead */
.endturn { max-width: 100%; min-width: 0; overflow: hidden; }
.et-word, .et-turn { max-width: 100%; white-space: nowrap; }
/* the turn button fills the middle column (up to 240 px) and its words scale to that width, so they always fit, centred */
.bar > .endturn { justify-self: center; width: 100%; max-width: 240px; container-type: inline-size; padding-left: 8px; padding-right: 8px; }
.et-word { font-size: clamp(13px, 15cqi, 17px) !important; }
.et-turn { font-size: clamp(9px, 9cqi, 11px) !important; letter-spacing: .02em !important; }
.endturn.long .et-word, .endturn.long .et-turn { letter-spacing: 0 !important; }
/* very narrow phones (320 px): smaller round buttons, and the turn button drops its second line when it can't fit */
@container stage (max-width: 340px) {
  .ibtn { width: 36px; height: 36px; }
  .daynight { width: 40px; height: 40px; }
  .bar, .bar-side { gap: 4px; }
}
@container (max-width: 104px) { .et-turn { display: none; } .et-word { font-size: 12px !important; } }
@container stage (max-width: 340px) { .bar > .endturn { padding-left: 4px; padding-right: 4px; } }
.stage[data-land='left'] .endturn, .stage[data-land='right'] .endturn { min-width: 168px; min-height: 60px; padding: 10px 26px; }
.stage[data-land='left'] .et-word, .stage[data-land='right'] .et-word { font-size: 18px; }
/* a rested card is turned sideways: in the landscape row it must fit its slot's width (card width is 63/88 of its height) */
.stage[data-land='left'] .sc-card[data-state='rest'], .stage[data-land='right'] .sc-card[data-state='rest'] { transform: rotate(90deg) scale(.66); }
.et-word { font: 700 17px/1.1 var(--font-ui); }
.et-turn { font: 600 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-2); white-space: nowrap; }
@container stage (max-width: 460px) {
  .dn-word { display: none; }
  .daynight { padding: 0; width: 44px; justify-content: center; }
}
@container stage (max-width: 400px) {
  .dn-word { display: none; }
  .daynight { padding: 0; width: 44px; justify-content: center; }
  .endturn { padding: 10px 12px; }
  .et-word { font-size: 16px; }
  .endturn.long .et-word { font-size: 14px; letter-spacing: -.01em; }
  .endturn.long .et-turn { font-size: 10px; letter-spacing: 0; }
  .ibtn { width: 40px; height: 40px; }
  .bar-side { gap: 4px; }
}

.endturn:disabled { opacity: .55; cursor: default; }
.endturn:disabled:active { transform: none; }

/* ---------- room mode: the opponent's drawer (stage coordinates, so landscape turns it with the board) ---------- */
.stage[data-room='on'] { padding-top: calc(max(10px, env(safe-area-inset-top)) + 52px + 8px); }
.opp {
  --h: 52px; --p: 0;
  position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); height: 45cqh;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 22px; background: rgba(13, 19, 38, .96);
  box-shadow: 0 14px 34px rgba(3, 6, 18, .4);
  transform: translateY(calc((var(--p) - 1) * (100% - var(--h))));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.opp[data-open='on'] { --p: 1; }
.opp[data-drag] { transition: none; }
.opp-body {
  flex: 1; min-height: 0; padding: 8px; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr);
  transition: visibility 0s .32s;
}
.opp[data-open='off']:not([data-drag]) .opp-body { visibility: hidden; }
.opp .tile { grid-area: auto; pointer-events: none; }
.opp .t-life, .opp .t-soul { grid-column: span 2; }
.opp .tile::after { display: none; }
.opp .t-life .num { font-size: min(40cqh, 40cqw); }
.opp .t-soul .core { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.opp .of { grid-row: 3; align-self: start; padding-top: 3px; font: 600 12px/1 var(--font-mono); color: var(--text-2); }
.opp .of b { color: var(--text); }
.opp-handle {
  flex: none; position: relative; height: var(--h); width: 100%; padding: 0 16px 8px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; touch-action: none; text-align: left;
}
.opp-handle:focus-visible { outline-offset: -4px; border-radius: 22px; }
.stage[data-room='on'] #btn-full { display: none; } /* room for End Turn between the buttons */
.opp-name { min-width: 0; font: 700 15px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-life { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 700 18px/1 var(--font-mono); }
.opp-life svg { width: 20px; height: 20px; }
.opp-grip { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; width: 38px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 38%, transparent); }
.stage[data-room='on'] .seat[data-seat='0'] .whose { max-width: calc(100% - 140px); }
/* short stage (landscape): the counters in one row */
@container stage (max-height: 480px) {
  .opp-body { grid-template-columns: repeat(3, 1fr); }
  .opp[data-souls='on'] .opp-body { grid-template-columns: repeat(4, 1fr); }
  .opp .t-life, .opp .t-soul { grid-column: auto; }
}

/* ---------- the room sheet ---------- */
.sheet.room { width: min(420px, 100%); text-align: center; }
.sheet.room .sheet-head { text-align: left; }
.room-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: rgba(216, 162, 171, .14); border: 1px solid rgba(216, 162, 171, .45); color: #f3d5da; font-size: 13.5px; }
.room-text, .room-hint { margin: 0 0 14px; color: var(--text-2); font-size: 14px; }
.room-pick { display: grid; gap: 10px; }
.room-choice {
  display: grid; gap: 4px; padding: 18px 14px; border-radius: 20px; border: 1px solid var(--border); background: rgba(7, 11, 23, .5); text-align: center;
}
.room-choice b { font: 600 20px/1.1 var(--font-head); color: var(--gold); }
.room-choice span { font-size: 13px; color: var(--text-2); }
.room-choice:active { transform: scale(.98); }
.room-label { display: block; margin-bottom: 6px; font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.room-input { width: 100%; flex: none; min-height: 62px; text-align: center; font: 600 34px/1 var(--font-mono); letter-spacing: .3em; padding-left: .3em; margin-bottom: 10px; }
.room-scan { width: 100%; margin-bottom: 10px; }
.room-video { width: 100%; aspect-ratio: 4 / 3; max-height: 40cqh; object-fit: cover; border-radius: 16px; margin-bottom: 10px; background: #000; }
.room-live { display: grid; gap: 12px; justify-items: center; }
.room-codebox { display: grid; justify-items: center; }
.room-code { font: 700 clamp(44px, 14cqw, 64px)/1 var(--font-mono); letter-spacing: .18em; padding-left: .18em; color: var(--gold); }
.room-qr { background: #fff; border-radius: 16px; padding: 4px; width: min(200px, 60cqw); }
.room-qr svg { width: 100%; height: auto; border-radius: 12px; }
.room-status { margin: 0; font: 600 17px/1.3 var(--font-head); color: var(--text); min-height: 22px; }
@container stage (max-height: 520px) {
  .room-live { grid-template-columns: auto auto; column-gap: 18px; row-gap: 8px; }
  .room-qr { width: 120px; grid-row: span 2; }
  .room-code { font-size: 38px; }
  .room-live .btn, .room-status { grid-column: 1; }
  .room-choice { padding: 10px; }
  .room-pick { grid-template-columns: 1fr 1fr; }
}

.room-toast { position: absolute; z-index: 60; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 60px); translate: -50% 0; max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; background: rgba(13, 19, 38, .94); border: 1px solid var(--border); font-weight: 600; font-size: 14px; text-align: center; pointer-events: none; }
.sheet.sync { width: min(640px, 100%); }
.sync .sub { margin-bottom: 12px; }
.sync-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sync-card { min-width: 0; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--border); background: rgba(7, 11, 23, .5); }
.sync-card h3 { margin: 0 0 4px; font: 600 15px/1.2 var(--font-head); color: var(--gold); }
.sync-card h4 { margin: 8px 0 2px; font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.sync-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sync-card li { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.sync-card li b { color: var(--text); font-family: var(--font-mono); }
.sync-card li.d b, .sync-card li.d span { color: var(--gold); }
.sync-card li i { font-style: normal; font-size: 10px; vertical-align: 2px; }
.sync-card ul.sh { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.sheet.sync .btn.link { width: 100%; }
@container stage (max-height: 520px) { .sync-card ul { grid-template-columns: 1fr 1fr; column-gap: 12px; } .sync-card h4 { margin-top: 4px; } }

/* ---------- who goes first, two players on one screen ---------- */
.overlay.first2 {
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; justify-content: stretch;
  background: rgba(3, 6, 18, .97); /* the board does not show through the big buttons */
}
.f2-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.stage[data-flip='on'] .f2-side.top { transform: rotate(180deg); } /* the top player reads their side */
.f2-big, .f2-call {
  min-height: 0; border-radius: var(--radius); background: var(--tile), #08112a; color: var(--num); text-align: center; padding: 14px;
  border: 2px solid color-mix(in srgb, var(--acc) 55%, transparent);
}
.f2-big { font: 600 clamp(28px, 7vmin, 56px)/1.15 var(--font-head); }
.f2-big:active, .f2-call:not(:disabled):active { background: color-mix(in srgb, var(--acc) 30%, var(--bg, #0b1020)); }
.f2-calls { display: none; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.f2-call { display: grid; place-content: center; gap: 8px; }
.f2-call b { font: 600 clamp(26px, 6vmin, 50px)/1 var(--font-head); }
.f2-call small { font: 500 13px/1 var(--font-mono); color: var(--text-2); }
.f2-call[aria-pressed='true'] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); opacity: 1; }
.f2-call[aria-pressed='true'] small { color: var(--acc-ink); }
.f2-call:disabled:not([aria-pressed='true']) { opacity: .3; }
.f2-picks { display: grid; gap: 10px; min-height: 0; }
.f2-big.solo, .f2-head { display: none; }
#ov-first2:is([data-step='call'], [data-step='throw'], [data-step='result']) .f2-picks { display: none; }
#ov-first2:is([data-step='call'], [data-step='throw'], [data-step='result']) .f2-calls { display: grid; }
/* the toss winner chooses: their calls make way for Go first / Go second */
.f2-choose { display: none; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
/* Pass: a slimmer button under the two choices (0.3.17) */
.f2-pass {
  grid-column: 1 / -1; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(13, 19, 38, .9); color: var(--text);
  border: 1.5px dashed color-mix(in srgb, var(--text) 40%, transparent); font: 600 16px/1.2 var(--font-ui);
}
.f2-pass:active { background: color-mix(in srgb, var(--acc) 25%, var(--bg, #0b1020)); }
/* the side that is not choosing: a card that says who is (instead of the old High / Low) */
.f2-wait {
  display: none; place-content: center; min-height: 0; padding: 14px; text-align: center; border-radius: var(--radius);
  background: rgba(8, 17, 42, .7); border: 2px dashed color-mix(in srgb, var(--text) 22%, transparent);
}
.f2-wait b { font: 600 clamp(26px, 6vmin, 48px)/1.15 var(--font-head); color: var(--text-2); }
#ov-first2[data-step='result'] .f2-side:not(.won) .f2-calls { display: none; }
#ov-first2[data-step='result'] .f2-side:not(.won) .f2-wait { display: grid; }
.stage[data-players='1'] .f2-wait { display: none !important; }
#ov-first2[data-step='result'] .f2-side.won .f2-calls { display: none; }
#ov-first2[data-step='result'] .f2-side.won .f2-choose { display: grid; }
.f2-choose .f2-call { border-color: var(--gold); }
.f2-say { margin: 0; min-height: 1.35em; text-align: center; font: 600 clamp(15px, 3.4vmin, 22px)/1.35 var(--font-ui); color: var(--text); }
.f2-side.won .f2-say { color: var(--gold); }
.f2-mid { display: grid; place-items: center; min-height: 72px; }
.f2-m { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
#ov-first2[data-step='pick'] .f2-m:not([data-for~='pick']), #ov-first2[data-step='method'] .f2-m:not([data-for~='method']),
#ov-first2[data-step='call'] .f2-m:not([data-for~='call']), #ov-first2[data-step='throw'] .f2-m:not([data-for~='throw']),
#ov-first2[data-step='result'] .f2-m:not([data-for~='result']) { display: none; }
.f2-roll {
  display: inline-flex; align-items: center; gap: 10px; height: 84px; padding: 0 26px 0 20px; border-radius: 999px; flex: 0 1 auto; min-width: 0;
  border: 2px solid color-mix(in srgb, var(--acc) 75%, transparent); background: rgba(13, 19, 38, .9); color: var(--text); font: 700 21px/1 var(--font-ui);
}
.f2-roll svg { flex: none; width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f2-hint { color: var(--text-2); font: 600 14px/1.2 var(--font-ui); }
.f2-die { --d: 84px; }
.f2-m .btn { min-height: 62px; padding: 0 26px; font-size: 18px; }
.f2-m [data-method] { border-width: 2px; border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
/* two players, the first screen: Roll | Not now | Flip in one row (0.3.18); Not now about 10% bigger too */
.f2-m[data-for='pick'] { flex-wrap: nowrap; gap: 10px; }
.f2-m .btn.f2-notnow { min-height: 68px; padding: 0 16px; font-size: 20px; flex: none; background: rgba(13, 19, 38, .96); } /* solid: the bar behind does not show through */
#ov-first2[data-kind='coin'] .f2-die, #ov-first2[data-kind='die'] .f2-coin { display: none; }
/* one player: the same screen with only your side, a heading, the die / coin buttons right away and big buttons */
.stage[data-players='1'] .overlay.first2 { grid-template-rows: auto minmax(0, 1fr) auto; }
.stage[data-players='1'] .f2-side.top { display: none; }
.stage[data-players='1'] .f2-head { display: block; grid-row: 1; text-align: center; padding: 8px 8px 0; }
.f2-head h2 { margin: 0; font: 600 clamp(30px, 8vmin, 44px)/1.1 var(--font-head); color: var(--gold); }
.f2-head p { margin: 8px auto 0; max-width: 34em; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.stage[data-players='1'] .f2-side.bottom { grid-row: 2; }
.stage[data-players='1'] .f2-mid { grid-row: 3; padding-bottom: 6px; }
.stage[data-players='1'] .f2-picks { grid-template-rows: 1fr 1fr; }
.stage[data-players='1'] .f2-big.solo { display: block; }
.stage[data-players='1'] .f2-m .btn { min-height: 64px; padding: 0 26px; font-size: 19px; }
.stage[data-players='1'] .f2-m [data-method] { min-height: 78px; font-size: 21px; }
.stage[data-players='1'] #ov-first2[data-step='pick'] .f2-m[data-for='method'] { display: flex; }
.stage[data-players='1'] #ov-first2[data-step='pick'] :is(.f2-m[data-for='pick'] .f2-roll, .f2-m[data-for='method'] [data-back]) { display: none; }
.stage[data-players='1'] #ov-first2[data-step='pick'] .f2-mid { display: grid; gap: 6px; justify-items: stretch; }
.stage[data-players='1'] #ov-first2[data-step='pick'] .f2-m[data-for='method'] { order: -1; flex-wrap: nowrap; }
.stage[data-players='1'] #ov-first2[data-step='pick'] .f2-m[data-for='method'] .btn { flex: 1; }
.stage[data-players='1'] #ov-first2[data-step='result'] .f2-side.bottom .f2-calls { display: none; }
.stage[data-players='1'] #ov-first2[data-step='result'] .f2-side.bottom .f2-choose { display: grid; }
.f2-coin { padding: 14px 26px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fff1c2, #e3c069 55%, #b88a2e); color: #3a2706; font: 700 22px/1 var(--font-head); min-width: 120px; text-align: center; }

/* ---------- the game begins ----------
   two players: each half of the screen says Begin and "You go first" / "You go second" to its own player (the top half
   turned round with Face to face); one player: one callout in the middle. It stays 4 s. */
.begin { position: absolute; inset: 0; z-index: 70; display: grid; grid-template-rows: 1fr 1fr; pointer-events: none; isolation: isolate; }
/* the board dims behind the words while they show, so they read over the big numbers */
.begin::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(3, 6, 18, .66); opacity: 0; }
.begin.go::before { animation: beginDim 4s ease forwards; }
@keyframes beginDim { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.stage[data-players='1'] .begin, .stage[data-room='on'] .begin { grid-template-rows: 1fr; }
.stage[data-players='1'] .bg-side.top, .stage[data-room='on'] .bg-side.top { display: none; }
.bg-side { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.stage[data-flip='on'] .bg-side.top { transform: rotate(180deg); }
.bg-side b { font: 600 clamp(64px, 17vmin, 150px)/1 var(--font-head); color: var(--gold); letter-spacing: .02em; text-shadow: 0 6px 40px rgba(3, 6, 18, .9), 0 0 60px rgba(227, 200, 147, .35); }
.bg-side span { font: 700 clamp(22px, 6vmin, 44px)/1.15 var(--font-ui); color: var(--text); text-shadow: 0 2px 18px rgba(3, 6, 18, .95), 0 0 2px rgba(3, 6, 18, .9); }
.bg-side[data-first='yes'] span { color: var(--gold); }
.begin.go .bg-side > :not(.fx) { animation: beginIn 4s cubic-bezier(.2, .8, .2, 1) forwards; }
/* game over: the same callout, 5 s; the winner's line in green, the loser's in red */
.over .bg-side { position: relative; overflow: hidden; }
.over .bg-side > :not(.fx) { position: relative; z-index: 1; }
.fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0; }
/* each side fades in from its top edge (the middle of the board with two players), so the two effects never meet at a hard line */
.fx { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 12%, #000 34%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 12%, #000 34%); }
.over.go .fx { animation: fxShow 5s linear forwards; }
@keyframes fxShow { 0% { opacity: 0; } 6% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
.fx i { position: absolute; top: -24px; display: block; will-change: transform; }
.fx .confetti { width: 8px; height: 13px; border-radius: 2px; animation: confetti linear both; }
@keyframes confetti { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--dx), var(--fall), 0) rotate(var(--rot)); } }
.fx .drop { width: 2px; height: 22px; border-radius: 1px; background: linear-gradient(180deg, rgba(160, 190, 255, 0), rgba(170, 200, 255, .95)); animation: rain linear infinite both; }
@keyframes rain { from { transform: translate3d(0, 0, 0) rotate(12deg); } to { transform: translate3d(calc(var(--fall) * -.2), var(--fall), 0) rotate(12deg); } }
.over .bg-side[data-result='lose'] .fx { background: linear-gradient(180deg, rgba(20, 30, 60, .35), rgba(20, 30, 60, .1)); }
.over.go::before { animation-duration: 5s; }
.over.go .bg-side > :not(.fx) { animation-duration: 5s; }
.over .bg-side b { font-size: clamp(50px, 14vmin, 130px); color: var(--text); text-shadow: 0 6px 40px rgba(3, 6, 18, .9), 0 0 50px rgba(255, 255, 255, .2); }
.over .bg-side[data-result='win'] span { color: #5be37d; }
.over .bg-side[data-result='lose'] span { color: #ff6b6b; }
@keyframes beginIn { 0% { opacity: 0; transform: scale(.6); } 9% { opacity: 1; transform: scale(1.06); } 14% { transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }

/* the first 10 seconds of a game the turn button rests (greyed, a bar fills), so nobody ends turn 1 by accident */
.endturn { position: relative; }
.endturn.wait::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--acc); transform-origin: left; animation: lockbar 10s linear forwards; }
@keyframes lockbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the two players' turn clock, after the turn number */
.et-clock { font-variant-numeric: tabular-nums; }
.et-clock::before { content: ' \00b7  '; white-space: pre; }

/* ---------- overlays ---------- */
/* settings rows far down the sheet are laid out only when scrolled to */
#ov-set .set-row { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.overlay {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(3, 6, 18, .74); /* a plain dim: a full-screen blur made pop-ups slow to open on phones */
  container-type: inline-size; animation: fade .18s ease-out;
  will-change: opacity; /* its own layer: the opening fade is not painted twice (it is display:none while closed) */
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 18px;
  background: linear-gradient(180deg, rgba(24, 33, 64, .97), rgba(14, 20, 42, .98));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(3, 6, 18, .6);
  will-change: transform;
  -webkit-user-select: none; user-select: none; animation: rise .25s cubic-bezier(.2, .7, .3, 1);
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet h2 { margin: 0; font: 600 24px/1.1 var(--font-head); color: var(--gold); letter-spacing: .01em; }
.sub { margin: 4px 0 0; color: var(--text-2); font-size: 13px; }
.xbtn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, .04); font-size: 22px; line-height: 1; }
.btn {
  min-height: 46px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05); font-weight: 600;
}
.btn.primary { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.txt {
  flex: 0 1 200px; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(7, 11, 23, .6); color: var(--text); font: 500 15px/1 var(--font-ui); -webkit-user-select: text; user-select: text;
}
.txt::placeholder { color: var(--text-3); }
/* the player's name, faint, behind the life number */
.whose {
  position: absolute; z-index: 2; left: 50%; bottom: 8px; translate: -50% 0; max-width: calc(100% - 140px);
  font: 700 clamp(11px, 9cqh, 22px)/1.1 var(--font-ui); letter-spacing: .02em; color: color-mix(in srgb, var(--text) 30%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; text-align: center;
}
.whose.unset { font-weight: 600; font-size: clamp(10px, 7cqh, 14px); }
.btn.danger { background: rgba(216, 162, 171, .14); border-color: rgba(216, 162, 171, .5); color: #f3d5da; }

/* calculator */
.calc-body { display: grid; gap: 14px; }
@container (min-width: 600px) { .sheet.calc { width: min(760px, 100%); } .calc-body { grid-template-columns: 1fr 1.1fr; } }
.calc-left { display: grid; gap: 10px; align-content: start; }
.calc-screen { padding: 10px 16px; border-radius: 18px; background: rgba(7, 11, 23, .6); border: 1px solid var(--border); text-align: right; overflow: hidden; }
.calc-expr { min-height: 20px; font: 500 14px/1.4 var(--font-mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; unicode-bidi: plaintext; }
.calc-val { font: 600 clamp(36px, 10cqw, 52px)/1.1 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-val.err { color: var(--rose); }
.calc-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.q { min-height: 42px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, .05); font: 700 14px/1 var(--font-mono); }
.q.up { color: var(--sage); } .q.down { color: var(--rose); }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-keys button { min-height: 52px; border-radius: 14px; border: 1px solid var(--border); background: rgba(7, 11, 23, .55); font: 600 21px/1 var(--font-ui); }
.calc-keys button:active, .q:active { transform: scale(.96); }
.calc-keys .op { background: rgba(169, 171, 238, .16); color: #e9b8c4; }
.calc-keys .clr { background: rgba(216, 162, 171, .16); color: var(--rose); }
.calc-keys .wide { grid-column: span 2; }
.calc-keys .eq { background: rgba(227, 200, 147, .2); color: var(--gold); border-color: rgba(227, 200, 147, .45); }

/* dice & coin: the chooser sheet shows small previews; the throw itself is big, on its own overlay */
.dice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.roll { display: grid; justify-items: center; gap: 12px; padding: 22px 10px 18px; border-radius: 20px; border: 1px solid var(--border); background: rgba(7, 11, 23, .5); }
.roll-label { font-weight: 600; }
.die-scene, .coin-scene { --s: 72px; display: grid; place-items: center; width: calc(var(--s) * 1.35); height: calc(var(--s) * 1.35); perspective: calc(var(--s) * 7); }
.die, .coin { position: relative; display: block; width: var(--s); height: var(--s); transform-style: preserve-3d; }

/* the dice: seen from above, a rounded ivory die with a soft bevel; they tumble in 2D, so nothing clips */
.d2 {
  --d: 64px; position: relative; display: grid; width: var(--d); height: var(--d); padding: calc(var(--d) * .14); border-radius: calc(var(--d) * .22);
  grid-template: 'p1 p2 p3' 1fr 'p4 p5 p6' 1fr 'p7 p8 p9' 1fr / 1fr 1fr 1fr; place-items: center;
  background: radial-gradient(130% 130% at 28% 22%, #fffdf7 0%, #f3ecdb 48%, #ddd3bb 100%);
  box-shadow: inset 0 calc(var(--d) * -.05) calc(var(--d) * .06) rgba(110, 85, 40, .35), inset 0 calc(var(--d) * .04) calc(var(--d) * .05) rgba(255, 255, 255, .9), 0 calc(var(--d) * .08) calc(var(--d) * .14) rgba(0, 0, 0, .45);
}
.d2 i { width: calc(var(--d) * .16); height: calc(var(--d) * .16); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3f63, #14172b 70%); box-shadow: inset 0 calc(var(--d) * .015) calc(var(--d) * .02) rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .7); }
.d2[data-face='1'] i { width: calc(var(--d) * .24); height: calc(var(--d) * .24); background: radial-gradient(circle at 40% 35%, #e3584a, #a2241a 70%); }
.d2.sm { --d: 44px; }
.d2-preview { display: flex; gap: 10px; align-items: center; height: 97px; }
.d2-preview .d2:first-child { rotate: -12deg; } .d2-preview .d2:last-child { rotate: 9deg; }
.dice-pair { grid-area: 1 / 1; display: flex; gap: min(8vmin, 56px); align-items: flex-start; justify-content: center; }
.d2-slot { display: grid; justify-items: center; gap: 14px; }
.d2-spin { display: block; }
.dice-pair .d2 { --d: min(30vmin, 180px); }
.d2-num { font: 600 clamp(28px, 7vmin, 46px)/1 var(--font-head); color: var(--text); opacity: 0; min-height: 1em; }
.d2-num.show { opacity: 1; animation: pop .3s cubic-bezier(.2, .9, .3, 1.3); }
.throw.going .d2-spin.a { animation: tumbleA 1.15s cubic-bezier(.25, .65, .3, 1); }
.throw.going .d2-spin.b { animation: tumbleB 1.15s cubic-bezier(.25, .65, .3, 1); }
@keyframes tumbleA {
  0% { transform: translate(-60%, 40%) rotate(-260deg) scale(.55); }
  35% { transform: translate(-8%, -38%) rotate(-40deg) scale(1.08); }
  62% { transform: translate(4%, 4%) rotate(60deg) scale(.97); }
  78% { transform: translate(0, -9%) rotate(80deg) scale(1.02); }
  90% { transform: translate(0, 0) rotate(88deg) scale(1); }
  100% { transform: translate(0, 0) rotate(90deg) scale(1); }
}
@keyframes tumbleB {
  0% { transform: translate(60%, 40%) rotate(250deg) scale(.55); }
  35% { transform: translate(8%, -32%) rotate(30deg) scale(1.08); }
  62% { transform: translate(-4%, 4%) rotate(-70deg) scale(.97); }
  78% { transform: translate(0, -7%) rotate(-86deg) scale(1.02); }
  90% { transform: translate(0, 0) rotate(-90deg) scale(1); }
  100% { transform: translate(0, 0) rotate(-90deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .throw.going .d2-spin { animation: none; } }
/* the 3D dice (js/die3d.js): one bevelled block each; the canvas is bigger than the die so the corners fit while it turns */
.d3 { display: none; }
.dice-pair .d2-spin { --d: min(30vmin, 180px); }
.dice-pair.gl { gap: min(16vmin, 96px); }
.dice-pair.gl .d2-slot { gap: calc(min(30vmin, 180px) * .32); } /* the numbers sit clear below the dice, even mid-roll */
.dice-pair.gl .d2 { display: none; }
.dice-pair.gl .d3 { display: block; width: calc(var(--d) * 1.75); height: calc(var(--d) * 1.75); margin: calc(var(--d) * -.375); }
/* the shadow is a plain soft oval under the die (a CSS filter on the canvas was re-blurred on every frame of the roll) */
.dice-pair.gl .d2-spin { position: relative; isolation: isolate; }
.dice-pair.gl .d2-spin::after {
  content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -12%; height: 26%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 60%, transparent);
}
.throw.going .dice-pair.gl .d2-spin.a { animation: hopA 1.15s cubic-bezier(.25, .65, .3, 1); }
.throw.going .dice-pair.gl .d2-spin.b { animation: hopB 1.15s cubic-bezier(.25, .65, .3, 1); }
@keyframes hopA { 0% { transform: translate(-55%, 45%) scale(.6); } 38% { transform: translate(-6%, -34%) scale(1.06); } 64% { transform: translate(2%, 3%) scale(.98); } 80% { transform: translate(0, -7%) scale(1.01); } 100% { transform: none; } }
@keyframes hopB { 0% { transform: translate(55%, 45%) scale(.6); } 38% { transform: translate(6%, -28%) scale(1.06); } 64% { transform: translate(-2%, 3%) scale(.98); } 80% { transform: translate(0, -5%) scale(1.01); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .throw.going .dice-pair.gl .d2-spin { animation: none; } }

/* the coin: two faces and a gold edge between them */
.coin-f, .coin-edge { position: absolute; inset: 0; border-radius: 50%; }
.coin-f { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: radial-gradient(circle at 35% 30%, #fff1c2, #e3c069 55%, #b88a2e); box-shadow: 0 0 0 calc(var(--s) * .025) #8d6a1f, inset 0 calc(var(--s) * -.05) calc(var(--s) * .1) rgba(80, 50, 0, .3); }
.coin-f.heads { transform: translateZ(calc(var(--s) * .03)); }
.coin-f.tails { transform: rotateX(180deg) translateZ(calc(var(--s) * .03)); }
.coin-edge { background: #9c7526; }
.coin-f svg { width: 100%; height: 100%; }
.c-rim { fill: none; stroke: #8d6a1f; stroke-width: 1.6; stroke-dasharray: 2 2.4; }
.c-sun { fill: #fff3c4; stroke: #8d6a1f; stroke-width: 1.6; }
.c-rays { stroke: #8d6a1f; stroke-width: 2; stroke-linecap: round; fill: none; }
.c-moon { fill: #fff3c4; stroke: #8d6a1f; stroke-width: 1.6; }
.c-star { fill: #8d6a1f; }
.c-letter { font: 700 22px var(--font-head); fill: #5a3d07; }

/* the big throw */
.overlay.throw { background: rgba(3, 6, 18, .78); }
.throw-box { display: grid; justify-items: center; gap: 18px; width: min(560px, 100%); }
.throw-stage { position: relative; display: grid; place-items: center; width: 100%; height: min(62vmin, 400px); cursor: pointer; }
.coin-scene.big { --s: min(40vmin, 240px); grid-area: 1 / 1; }
.throw[data-kind='die'] .coin-scene.big, .throw[data-kind='coin'] .dice-pair { display: none; }
.throw[data-kind='die'] .throw-shadow { display: none; }
.throw-shadow { grid-area: 1 / 1; align-self: end; width: min(34vmin, 210px); height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.throw.going .coin-scene.big { animation: toss 1.5s cubic-bezier(.3, .6, .3, 1); }
.throw.going .throw-shadow { animation: shadow 1.3s cubic-bezier(.3, .6, .3, 1); }
.throw[data-kind='coin'].going .throw-shadow { animation-duration: 1.5s; }
@keyframes toss { 0% { translate: 0 30%; scale: .6; } 45% { translate: 0 -28%; scale: 1.08; } 80% { translate: 0 2%; scale: 1; } 90% { translate: 0 -3%; } 100% { translate: 0 0; scale: 1; } }
@keyframes shadow { 0% { scale: .6; opacity: .9; } 45% { scale: .45; opacity: .35; } 100% { scale: 1; opacity: 1; } }
.throw-out { margin: 0; min-height: 1.2em; text-align: center; font: 600 clamp(34px, 9vmin, 56px)/1.1 var(--font-head); color: var(--gold); opacity: 0; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.throw-out.show { opacity: 1; animation: pop .3s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pop { from { opacity: 0; scale: .7; } }
.throw-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(360px, 100%); }
/* two players face to face: the dice in the middle; the top player gets the numbers, the total and Done / Roll again
   facing them (the copy is turned round, so its numbers sit under the dice from their side) */
.throw-mirror { display: none; }
.stage[data-players='2'][data-flip='on'] .throw-mirror { display: grid; justify-items: center; gap: 14px; width: 100%; transform: rotate(180deg); }
.stage[data-players='2'][data-flip='on'] .throw-stage { height: min(44vmin, 320px); }
.tm-nums { margin: 0; display: flex; justify-content: center; gap: min(16vmin, 96px); font: 600 clamp(28px, 7vmin, 46px)/1 var(--font-head); color: var(--text); }
.tm-nums span { min-width: 1.2ch; text-align: center; }
.throw[data-kind='coin'] .tm-nums { display: none; }
/* two players: Done and Roll again wait 3 s after the result, a bar fills while they wait */
.throw-btns .btn { position: relative; overflow: hidden; }
.throw-btns.cool .btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--acc); transform-origin: left; animation: lockbar 3s linear forwards; }
.throw-btns .btn { min-height: 52px; font-size: 16px; }
/* while a pop-up is open the board behind it stays still (no twinkling stars to repaint) */
.stage.ov-open[data-time] .stars.s1, .stage.ov-open[data-time] .stars.s2 { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .throw.going .coin-scene.big, .throw.going .throw-shadow { animation: none; } }

/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.set-label { font-weight: 600; display: grid; gap: 2px; }
.set-label small { font-weight: 400; font-size: 12.5px; color: var(--text-2); }
.seg { display: inline-flex; flex: none; padding: 3px; gap: 3px; border-radius: 13px; background: rgba(7, 11, 23, .6); border: 1px solid var(--border); }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-weight: 600; font-size: 13.5px; }
.seg button[aria-pressed='true'] { background: var(--accent); color: #1a2038; }
.switch { position: relative; flex: none; width: 50px; height: 30px; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(150, 170, 230, .2); transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--sage); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
#btn-reset { width: 100%; margin-top: 8px; }
.set-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.credits { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; font-size: 13.5px; color: var(--text-2); display: grid; gap: 4px; }
.credits p { margin: 0; }
.credits a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(163, 207, 216, .4); }
.credits a:active, .credits a:hover { color: #c8eef5; border-bottom-color: rgba(200, 238, 245, .8); }
.credits .fine { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.credits .ver { font: 600 11.5px/1.4 var(--font-mono); color: var(--text-2); letter-spacing: .04em; }

/* confirm */
.sheet.confirm { width: min(400px, 100%); text-align: center; }
.sheet.confirm p { color: var(--text-2); margin: 10px 0 16px; }
.cf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* short boards (landscape): a compact calculator that fits without scrolling */
@container stage (max-height: 520px) {
  .sheet { padding: 12px 14px; }
  .sheet-head { margin-bottom: 8px; }
  .sheet h2 { font-size: 20px; }
  .sub { font-size: 12px; margin-top: 2px; }
  .xbtn { width: 34px; height: 34px; }
  .calc-body { gap: 10px; }
  .calc-val { font-size: 34px; }
  .calc-expr { min-height: 16px; font-size: 12.5px; }
  .calc-keys { gap: 6px; }
  .calc-keys button { min-height: 40px; font-size: 18px; }
  .q { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .opp { transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Settings: Reset game sits at the top of the sheet, full width ---------- */
.btn.set-reset { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin: 0 0 4px; font: 700 16px/1 var(--font-ui); }

/* ---------- room mode: a faint line saying how others can watch (in the gap above the bar, never over a number) ---------- */
.stage[data-room='on'] { grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: 'bottom' 'mark' 'bar'; }
.room-mark {
  grid-area: mark; margin: -7px 0; min-width: 0; z-index: 2; pointer-events: none; text-align: center;
  font: 500 clamp(8.5px, 2.5cqw, 10px)/12px var(--font-mono); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--text) 42%, transparent);
}
.room-big { display: grid; gap: 6px; justify-items: center; width: 100%; }
.room-linkrow { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.room-linkrow code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(7, 11, 23, .6); border: 1px solid var(--border); font: 500 12px/1.2 var(--font-mono); color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-user-select: text; user-select: text; }
.room-linkrow .btn { flex: none; min-height: 36px; }
.room-qr.small { width: 112px; }
@container (max-height: 520px) { .room-big { grid-template-columns: 1fr auto; grid-column: 1 / -1; align-items: center; } .room-big .room-label { grid-column: 1 / -1; } .room-linkrow { grid-column: 1; } .room-qr.small { grid-column: 2; grid-row: 2; width: 80px; } }

/* ---------- display mode: watching a room on a TV, read only, nothing upside down, ignores the landscape setting ---------- */
.stage[data-display='on'] > .seat, .stage[data-display='on'] > .bar, .stage[data-display='on'] > .opp, .stage[data-display='on'] > .room-mark { display: none; }
.stage[data-display='on'][data-land] { inset: 0; width: auto; height: auto; transform: none; }
.display {
  position: absolute; z-index: 4; display: grid; gap: clamp(8px, 1.6vmin, 20px);
  inset: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.dp-top { grid-row: 1; display: flex; align-items: center; gap: clamp(10px, 2vmin, 28px); min-width: 0; }
.dp-chip {
  display: inline-flex; align-items: center; gap: .5em; padding: .35em .9em .35em .7em; border-radius: 999px; font: 700 clamp(15px, 2.4vmin, 30px)/1 var(--font-ui);
  background: linear-gradient(180deg, #f6dda2, #e3b762); color: #3a2706; border: 1px solid rgba(255, 230, 170, .8); box-shadow: 0 0 22px rgba(255, 200, 110, .35);
}
.dp-chip svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dp-chip .dp-moon, .dp-chip[data-time='night'] .dp-sun { display: none; }
.dp-chip[data-time='night'] .dp-moon { display: block; } .dp-chip[data-time='night'] .dp-moon svg { fill: currentColor; }
.dp-chip[data-time='night'] { background: linear-gradient(180deg, #2b2f63, #1b1e44); color: #dfe0ff; border-color: rgba(169, 171, 238, .55); box-shadow: 0 0 22px rgba(130, 130, 230, .3); }
.dp-turn { font: 600 clamp(20px, 3.6vmin, 44px)/1 var(--font-head); color: var(--num); }
.dp-actions { margin-left: auto; display: flex; gap: 8px; opacity: .32; transition: opacity .2s; }
.dp-actions:hover, .dp-actions:focus-within { opacity: 1; }
.dp-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(13, 19, 38, .72); color: var(--text); font: 600 13px/1 var(--font-ui); }
.dp-line { grid-row: 2; margin: 0; text-align: center; white-space: pre-line; font: 600 clamp(14px, 2.3vmin, 26px)/1.3 var(--font-ui); color: var(--gold); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.dp-panels { grid-row: 3; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vmin, 28px); }
@container stage (max-width: 699px) { .dp-panels { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
.dp-panel {
  position: relative; min-width: 0; min-height: 0; container-type: size; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: clamp(6px, 2cqmin, 20px); padding: clamp(10px, 3cqmin, 30px);
  background: var(--tile); border: 1px solid var(--tile-edge); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(3, 6, 18, .35);
  transition: background .6s, border-color .6s, box-shadow .35s;
}
.dp-panel[data-souls='off'] { grid-template-rows: auto minmax(0, 1fr) auto; }
.dp-panel[data-souls='off'] .dp-souls { display: none; }
.dp-panel[data-active='on'] { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 30%, transparent), color-mix(in srgb, var(--acc) 14%, transparent)), var(--tile); border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 12px 40px color-mix(in srgb, var(--acc) 24%, transparent); }
.dp-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.dp-name { margin: 0; min-width: 0; font: 600 clamp(18px, 7cqmin, 64px)/1.1 var(--font-head); color: var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-their { flex: none; display: none; padding: .35em .8em; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: 700 clamp(10px, 2.4cqmin, 20px)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.dp-panel[data-active='on'] .dp-their { display: inline-block; }
.dp-life { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3cqmin, 36px); }
.dp-life .ico { width: clamp(30px, 13cqmin, 130px); height: clamp(30px, 13cqmin, 130px); }
.dp-num { font: 600 min(46cqh, 34cqw)/.95 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--num); }
.dp-num[data-len='3'] { font-size: min(42cqh, 26cqw); } .dp-num[data-len='4'] { font-size: min(36cqh, 20cqw); } .dp-num[data-len='5'] { font-size: min(32cqh, 16cqw); }
.dp-res { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2cqmin, 20px); }
.dp-r { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(8px, 2.4cqmin, 22px); align-items: center; justify-items: start; padding: clamp(6px, 2cqmin, 18px) clamp(8px, 3cqmin, 24px); border-radius: var(--radius-sm); background: rgba(3, 8, 24, .28); }
.dp-r .ico { grid-row: 1 / 3; width: clamp(28px, 11cqmin, 96px); height: clamp(28px, 11cqmin, 96px); }
.dp-n { font: 600 clamp(24px, 12cqmin, 110px)/1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--num); }
.display .lbl { font-size: clamp(9px, 2.4cqmin, 20px); }
.dp-souls { position: relative; display: flex; align-items: center; gap: clamp(8px, 2cqmin, 18px); padding: 0 clamp(4px, 1.5cqmin, 12px); }
.dp-souls .ico { width: clamp(22px, 7cqmin, 56px); height: clamp(22px, 7cqmin, 56px); }
.dp-souls .dp-n { font-size: clamp(22px, 8cqmin, 72px); }
.dp-of { font: 600 clamp(14px, 4.6cqmin, 40px)/1 var(--font-mono); color: var(--text-2); }
.dp-wait { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding-top: 12%; text-align: center; font: 500 clamp(18px, 5cqmin, 44px)/1.2 var(--font-head); color: var(--text-2); }
.dp-panel[data-state='ready'] .dp-wait { display: none; }
.dp-panel[data-state='waiting'] { opacity: .72; }
.dp-panel[data-state='waiting'] .dp-life, .dp-panel[data-state='waiting'] .dp-res, .dp-panel[data-state='waiting'] .dp-souls { visibility: hidden; }
.display .delta { bottom: auto; top: 4px; left: auto; right: 6px; translate: none; font-size: clamp(14px, 3.6cqmin, 36px); padding: .2em .7em; }
.display .dp-life .delta { top: auto; bottom: 2%; left: 50%; right: auto; translate: -50% 0; font-size: clamp(18px, 7cqmin, 60px); }
.dp-foot { grid-row: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-width: 0; }
.dp-mark { margin: 0; min-width: 0; font: 500 clamp(11px, 1.7vmin, 20px)/1.3 var(--font-mono); letter-spacing: .03em; color: color-mix(in srgb, var(--text) 45%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-qr { flex: none; width: clamp(64px, 11vmin, 132px); padding: 3px; border-radius: 10px; background: #fff; }
.dp-qr svg { width: 100%; height: auto; border-radius: 8px; }
.dp-r .dp-n { grid-row: 1; grid-column: 2; align-self: end; }
.dp-r .lbl { grid-row: 2; grid-column: 2; align-self: start; }