/* Deathroll: amber on green felt, the rolls in the game's system-message yellow, a hot red for the 1.
   Shares the site's tokens, header, buttons, dialogs and boards with the other pages. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Sora Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 113%; }

:root {
  color-scheme: dark;
  --bg: #0a0910; --surface: #14121c; --surface-2: #1a1826; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f2f0f8; --muted: #a8a4b9; --dim: #716d82;
  --purple: #a335ee; --orange: #ff8000; --pink: #e268a8; --gold: #e5cc80; --teal: #2dd4bf; --blue: #0070dd; --red: #f43f5e; --green: #1eff00;
  --parse: linear-gradient(90deg, var(--purple), var(--pink) 55%, var(--gold));
  /* this game's own colours */
  --acc: #f5b942; --acc-2: #d4861a; --acc-3: #ffe08a;
  --acc-grad: linear-gradient(135deg, #ffd978, #f5b942 55%, #e0891c);
  --acc-glow: rgba(245,185,66,.85);
  --felt: #12382a; --felt-2: #0a2219; --felt-3: #1c5038;
  --house: #4fd18a;        /* the house's side */
  --sys: #ffe76a;          /* "Tester rolls 437 (1-1000)" */
  --hot: #ff4a3d;          /* the 1 */
  --display: Sora, 'Sora Fallback', Inter, system-ui, sans-serif; --font: Inter, 'Inter Fallback', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Consolas, 'Cascadia Mono', 'Courier New', monospace;
  --ease: cubic-bezier(.2,.7,.2,1); --bounce: cubic-bezier(.34,1.56,.64,1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  /* ---- motion gate: effects are on for everyone, also on a device that asks for less motion (no media query here
     switches anything off). Calm is the visitor's own choice, made in Settings or on the front page: the script writes
     it into html[data-motion="calm"]. Full is the default, with or without the script. ---- */
  --m: 1; --play: running;
  --k-in: fadeIn; --k-pop: pop; --k-land: land; --k-one: theOne; --k-bumpup: bumpUp; --k-bumpdown: bumpDown; --k-shake: shake; --k-thud: thud; --k-coin: coinFly; --k-drop: coinDrop; --k-fly: chipFly; --k-menu: menuIn; --k-rise: rise; --k-flash: flashOut; --k-draw: draw; --k-float: floatUp; --k-nope: nope; --k-fade: fadeOnly; --k-throw: handThrow; --k-die: dieFly; --k-verdict: verdictIn;
}
html[data-motion="calm"] {
  --m: 0; --play: paused;
  --k-in: none; --k-pop: none; --k-land: none; --k-one: none; --k-bumpup: none; --k-bumpdown: none; --k-shake: none; --k-thud: none; --k-coin: none; --k-drop: none; --k-fly: none; --k-menu: none; --k-rise: none; --k-flash: none; --k-draw: none; --k-float: none; --k-nope: none; --k-fade: none; --k-throw: none; --k-die: none; --k-verdict: none;
}
html.hidden-tab { --play: paused; }
html[data-motion="calm"] *, html[data-motion="calm"] *::before, html[data-motion="calm"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html[data-motion="calm"] .bigNum { transition-duration: .22s !important; transition-property: opacity; } /* a rolled number fading in is the one motion Calm keeps */

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: 15px/1.55 var(--font); overflow-x: hidden; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(900px 560px at 12% -10%, rgba(245,185,66,.16), transparent 62%),
    radial-gradient(760px 520px at 100% 8%, rgba(28,80,56,.5), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, rgba(229,204,128,.07), transparent 60%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent); -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent);
}
body.modal { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(100% - 32px, 820px); margin: 0 auto; }
body[data-screen="screenTable"] .wrap { width: min(100% - 32px, 1440px); }   /* the table takes the screen: the column widens with the window while you sit at it */
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--acc); color: #2a1a05; font-weight: 600; }
.skip:focus { top: 12px; }
header, main, footer { position: relative; z-index: 1; }
.grad { background: linear-gradient(90deg, #ffd978, var(--acc) 50%, #ff8a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
kbd { font: 600 11px var(--font); letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
main:focus { outline: none; }

/* ---------- header ---------- */
header.top { z-index: 30; padding-top: var(--sat); }
.top .wrap { display: flex; align-items: center; gap: 10px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -10px rgba(245,185,66,.8); }
.crumb { color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; }
.crumb .sep { color: var(--dim); margin: 0 10px 0 2px; }
.top-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.icon-btn .ic { width: 20px; height: 20px; }
.login-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; background: linear-gradient(180deg, #6571f3, #5865f2); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px -12px rgba(88,101,242,.9), inset 0 1px 0 rgba(255,255,255,.14); transition: filter .15s, transform .15s var(--ease); }
.login-link:hover { filter: brightness(1.08); transform: translateY(calc(-1px * var(--m))); }
.ic.discord { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.account { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 5px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; max-width: 250px; transition: background .15s, border-color .15s; }
.user-btn:hover, .user-btn[aria-expanded="true"] { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }
.user-btn .chev { width: 14px; height: 14px; color: var(--dim); transition: transform .2s var(--ease); }
.user-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.user-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #2a2440; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 232px; padding: 6px; border-radius: 16px; background: #1a1826; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4); animation: var(--k-menu) .22s var(--ease) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head .avatar { width: 34px; height: 34px; }
.menu-head div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.menu-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head small { color: var(--dim); font-size: 11.5px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-weight: 500; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.menu-item .ic { width: 16px; height: 16px; color: var(--muted); }
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.06); outline: none; }

/* ---------- buttons, segments, switches ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease), filter .15s, box-shadow .2s, color .15s; }
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.btn.primary { border-color: transparent; color: #2a1a05; background: var(--acc-grad); box-shadow: 0 10px 28px -12px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover { filter: brightness(1.06); transform: translateY(calc(-1px * var(--m))); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
.btn.danger { border-color: rgba(244,63,94,.5); color: #ffb4c0; background: rgba(244,63,94,.1); }
.btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.big { padding: 14px 26px; min-height: 52px; font-size: 16px; border-radius: 16px; }
.btn[disabled], .mini-btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; min-height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.mini-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.seg span small { display: block; font-size: 11px; font-weight: 500; color: var(--dim); white-space: normal; }
.seg input:checked + span { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.seg input:checked + span small { color: var(--muted); }
.seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.seg input:hover:not(:checked) + span { color: var(--text); background: rgba(255,255,255,.05); }
.seg.small span { padding: 6px 10px; font-size: 12.5px; }
.switch { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid var(--line-2); transition: background .2s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--acc-grad); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--acc); outline-offset: 3px; }
.switch .lbl { font-weight: 600; font-size: 14px; }
.switch .lbl small { display: block; font-weight: 400; color: var(--dim); font-size: 12.5px; }
.rangefield { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 6px 0 10px; font-weight: 600; font-size: 14px; }
.rangefield input[type=range] { width: 100%; accent-color: var(--acc); }
.rangefield output { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 38px; text-align: right; }

/* ---------- page column, cards, start screen ---------- */
.app { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 28px; }
.screen { display: flex; flex-direction: column; gap: 14px; animation: var(--k-in) .3s var(--ease) both; }
.title-row { text-align: center; padding: 6px 0 2px; }
/* the title: a die showing the 1 beside the word. The amber sweeps across "Death" once as the page opens and then rests
   (a background sweep is painted every frame, so it never loops); every 5.5 s the die tumbles with a hop and the word
   flares with it (a brighter copy fading in and out: opacity only). A Calm the visitor chose stills it; the loops rest
   while the title is out of the window or the tab is hidden (.rest, set by the script).
   The bright copy and the die's 1 are generated content with an empty spoken text, so the heading's own text is the one
   word "Deathroll" for copying, searching and reading out. The word is an inline-block: its box is then exactly one
   line high, and the copy laid over it (inset: 0) sits on the same baseline (over an inline box it stood 7 px high). */
.logo { margin: 0; display: inline-flex; align-items: center; font: 700 clamp(34px, 9vw, 52px)/1 var(--display); letter-spacing: -.04em; }   /* the room between the die and the word is the die's margin, not a gap: the page as it was before (no die, the word in two parts) still reads "Deathroll" with this stylesheet */
.logo .grad { position: relative; display: inline-block; background: linear-gradient(90deg, #ffd978, var(--acc) 28%, #ff8a2a 50%, var(--acc) 72%, #ffd978); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: logo-shine 2.4s var(--ease) .4s 1 both; }
.logo .grad::after { content: attr(data-flare); content: attr(data-flare) / ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff6d2, #ffe08a 45%, #ffc46a); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; animation: logo-flare 5.5s var(--ease) infinite var(--play); }
.logo-word { animation: var(--k-rise) .6s var(--ease) both; }
.logo.rest, .logo.rest *, .logo.rest *::before, .logo.rest *::after { animation-play-state: paused !important; }
/* the page as it was before this change (a browser may still hold it and ask for this stylesheet) has two lines that said effects were toned down: they stay out of sight */
.motionNote { display: none; }
.logo-die { position: relative; flex: none; width: .7em; height: .7em; margin-right: .3em; border-radius: .15em; display: grid; place-items: center; font-style: normal; letter-spacing: 0;
  background: linear-gradient(145deg, #ffd76a, #e09a1a); box-shadow: 0 .14em .3em -.1em rgba(0,0,0,.9), inset 0 -.07em 0 rgba(120,70,0,.35), inset 0 .04em 0 rgba(255,255,255,.45);
  transform: rotate(-10deg); animation: logo-die 5.5s var(--bounce) infinite var(--play); }
.logo-die::after { content: "1"; content: "1" / ""; font: 800 .46em/1 var(--display); color: #3a1d00; }   /* a dark 1 on the gold: readable at title size */
@keyframes logo-shine { to { background-position: 200% 0; } }
@keyframes logo-flare { 0%, 62%, 94%, 100% { opacity: 0; } 72%, 84% { opacity: .85; } }
@keyframes logo-die { 0%, 62%, 100% { transform: translateY(0) rotate(-10deg); } 70% { transform: translateY(-.6em) rotate(110deg); } 80% { transform: translateY(0) rotate(350deg); } 85% { transform: translateY(-.14em) rotate(350deg); } 90% { transform: translateY(0) rotate(350deg); } }
.tagline { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.card { position: relative; padding: 18px 18px 20px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--surface); overflow: hidden; }
.card p { margin: 0 0 10px; }
.card h2 { margin: 0 0 8px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin: 0 0 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--acc-grad); }
.sub { margin: 18px 0 10px; font: 600 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 12px; }
.sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hint { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; }
.intro { display: flex; gap: 16px; align-items: flex-start; }
.intro .portrait { width: 104px; height: 104px; flex: none; }
.introText { min-width: 0; flex: 1; }
.introText p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.introText p b { color: var(--text); }
/* the start screen's one card: Grix and one line, a duel in three pictures, the two tables */
.hero { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; }
.heroTop { display: flex; gap: 16px; align-items: center; }
.heroTop .portrait { width: 92px; height: 92px; }
.heroText { min-width: 0; flex: 1; }
.rule { margin: 8px 0 0; font: 600 clamp(16px, 2.6vw, 20px)/1.3 var(--display); letter-spacing: -.01em; color: var(--muted); text-wrap: balance; }
.rule b { color: var(--text); }
.strip { list-style: none; margin: 0; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; background: radial-gradient(120% 100% at 50% 0%, var(--felt-3), var(--felt) 60%, var(--felt-2)); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 0 4px #2c1a10, inset 0 0 0 5px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.45); }
.strip li { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; text-align: center; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.strip li small { font: 600 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.strip li b { font: 600 12px var(--mono); color: var(--sys); white-space: nowrap; }
.strip li i { font: 700 clamp(22px, 4vw, 30px)/1.1 var(--display); font-style: normal; color: var(--acc); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.strip li em { font: 600 10.5px var(--font); font-style: normal; color: #ffb4a8; letter-spacing: .06em; text-transform: uppercase; }
.strip li.one i { color: var(--hot); text-shadow: 0 0 18px rgba(255,74,61,.8); }
.strip li.one { border-color: rgba(255,74,61,.5); background: rgba(70,12,12,.4); }
.strip .arrow { padding: 0; border: 0; background: none; width: 18px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.22); position: relative; flex: none; }
.strip .arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 6px solid rgba(255,255,255,.32); border-right: 0; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.way { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 44px 10px 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.way.daily { border-color: rgba(245,185,66,.3); background: linear-gradient(180deg, rgba(245,185,66,.07), rgba(245,185,66,.02)); }
.way p { margin: 0; }
.way .counts { color: var(--dim); font-size: 12.5px; }
.way .counts:empty { display: none; }
.way .counts.warn { color: #ffb4a8; }
.way-btn { flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px; min-height: 60px; line-height: 1.2; text-align: center; }
.way-btn b { font: 700 16px var(--display); letter-spacing: -.01em; }
.way-btn small { font-weight: 500; font-size: 12px; opacity: .85; white-space: normal; }
.way-btn:not(.primary) { background: rgba(255,255,255,.05); }
/* the daily's own state: in progress, or today's result */
.way .played { color: var(--text); padding: 8px 10px; border-radius: 10px; background: rgba(245,185,66,.1); border: 1px solid rgba(245,185,66,.3); font-size: 13px; }
.way .played b { display: block; font: 700 15px var(--display); letter-spacing: -.01em; color: var(--acc-3); }
.way.daily[data-state="played"] .played.bust b { color: #ff8585; }
.info { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font: 700 13px/1 var(--display); font-style: italic; cursor: pointer; display: grid; place-items: center; transition: color .15s, background .15s; }
.info:hover { color: var(--text); background: rgba(255,255,255,.1); }
.hero .nextDaily { margin: 0; text-align: center; }
.hname { display: flex; align-items: baseline; gap: 8px; }
.hname b { font: 700 16px var(--display); letter-spacing: -.01em; }
.hname small { color: var(--dim); font-size: 12px; }
.bubble { position: relative; display: inline-block; max-width: 100%; margin-top: 6px; padding: 7px 12px; border-radius: 14px; border-top-left-radius: 4px; background: #f6f1e6; color: #1a1620; font-weight: 500; font-size: 14px; line-height: 1.35; box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); overflow-wrap: anywhere; }
.bubble:empty { display: none; }
.bubble.typing { color: #8a8390; letter-spacing: .2em; }
.bubble.pop { animation: var(--k-pop) .35s var(--bounce) both; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode { display: flex; flex-direction: column; }
.mode p { color: var(--muted); font-size: 14px; }
.mode .counts { color: var(--acc-3); font-weight: 500; }
.mode .counts:empty { display: none; }
.mode .counts.warn { color: #ffb4a8; }
/* the daily's own state: in progress, or today's result */
.mode .played { color: var(--text); padding: 8px 10px; border-radius: 10px; background: rgba(245,185,66,.1); border: 1px solid rgba(245,185,66,.3); font-size: 13.5px; }
.mode .played b { display: block; font: 700 16px var(--display); letter-spacing: -.01em; color: var(--acc-3); }
.mode.daily[data-state="open"] .played { border-color: rgba(245,185,66,.6); box-shadow: 0 0 0 1px rgba(245,185,66,.2); }
.mode.daily[data-state="played"] .played.bust b { color: #ff8585; }
.modeActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mode .hint { margin-top: 10px; }
.mode.daily::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--acc-grad); opacity: .55; }
.openRun .openText { font-weight: 600; color: var(--text); }
.openRun .win-actions { justify-content: flex-start; margin-top: 6px; }
.bests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.best { padding: 10px 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.best .k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.best .v { font: 700 18px var(--display); color: var(--acc-3); font-variant-numeric: tabular-nums; }
.best.none .v { color: var(--dim); }
.bestsCard .sub { margin-top: 0; }
.offline { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; text-align: center; border-radius: 18px; border: 1px solid rgba(255,200,80,.4); background: rgba(255,170,0,.08); color: #ffe2a8; }
.offline b { font: 700 18px var(--display); color: var(--text); }
.offline p { margin: 0; }
.portrait { flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.portrait.small { width: 64px; height: 64px; }
.rookface, .youface { width: 100%; height: 100%; display: block; }

/* ---------- the table ----------
   Sizes that the layout is built from. The felt fills the window from under the bar above it down to the action bar
   (--felt-top and --barh are measured by the script), and the number, the faces and the purse grow with the window's
   height: a 1080p screen gets a 240px number and a 176px Grix, a laptop a smaller set (further down), and nothing on
   the table changes height while a duel runs, so the action bar below it never moves.
   The number is never wider than its own column: --numh is what the window's height allows, and --num is that or what
   the column's width allows, whichever is smaller. The column is the middle panel (--dicew, measured by the script)
   without its padding, the ladder's rail on the left and the same room on the right; three digits at full size are
   1.91 times the font size wide and longer numbers are shrunk by --fit to 1.96 at most (measured), so the font is half
   the column. So a tall, narrow window (half
   a 1080p screen, a tablet held upright) gets a smaller number, never one that covers the ladder or is cut off. The
   faces are capped by the window's width in the same way, so the sides leave the middle its room. */
.screen.table { --numh: clamp(112px, 26dvh, 240px); --rail: 36px; --rgap: 10px; --dpad: 14px;
  --num: min(var(--numh), calc((var(--dicew, 3000px) - 2 * var(--dpad) - 2 * var(--rail) - 2 * var(--rgap)) / 2));
  --numrow: calc(var(--num) * 1.3); --face: clamp(88px, min(18dvh, 12.5vw), 176px); --slot: clamp(15px, calc(var(--face) * .11), 19px);
  --chip: 60px; --log-h: 124px; --say-h: clamp(68px, 9dvh, 92px); --pad: 16px; --chat-w: clamp(200px, 17vw, 240px); gap: 12px; }
/* this screen must not be moved by a transform, not even while it fades in: its action bar is fixed to the window on a phone,
   and a transformed parent would become what "fixed" is measured from */
.screen.table { animation-name: var(--k-fade); }
body[data-screen="screenTable"] main { z-index: 2; }   /* the bar lies over the footer, not under it */
.tablebar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-height: 32px; }
.pill { padding: 3px 10px; border: 0; border-radius: 999px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #2a1a05; background: var(--acc-grad); cursor: help; }
.tb-note, .turnRow, .cmdLine { display: none; }   /* the bar's sentence and the typed-command pill of the page as it was: a browser that still holds that page reads right with this stylesheet */
.duelTag { font: 700 13px var(--display); color: var(--acc-3); white-space: nowrap; }
.duelTag:focus { outline: none; }
.tablebar #btnLeave { margin-left: auto; }
.chatBtn { display: none; position: relative; width: 36px; padding: 0; justify-content: center; }
.chatBtn .ic { width: 17px; height: 17px; }
.chatBtn.unread::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc-glow); }
.felt {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--chat-w); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: var(--pad); border-radius: 28px; overflow: hidden;
  min-height: calc(100dvh - var(--felt-top, 124px) - var(--barh, 144px) - 40px);
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(120% 90% at 50% 30%, var(--felt-3), var(--felt) 50%, var(--felt-2)), var(--felt);
  box-shadow: inset 0 0 0 8px #2c1a10, inset 0 0 0 9px rgba(255,255,255,.08), inset 0 0 90px rgba(0,0,0,.55), 0 30px 80px -40px rgba(0,0,0,.9);
}
.felt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px); background-size: 7px 7px; opacity: .5; }
/* the table darkens while a roll from a small number is in the air (data-dread 1 to 3): the eye goes to the number */
.felt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; opacity: 0; transition: opacity .45s; background: radial-gradient(130% 78% at 50% 40%, transparent 42%, rgba(0,0,0,.78)); }
.felt[data-dread="1"]::after { opacity: .5; }
.felt[data-dread="2"]::after { opacity: .8; }
.felt[data-dread="3"]::after { opacity: 1; background: radial-gradient(130% 78% at 50% 40%, transparent 38%, rgba(46,0,0,.88)); }
.felt.shake { animation: var(--k-shake) .55s var(--ease); }
.felt.thud { animation: var(--k-thud) .28s ease-out; }
.felt > * { position: relative; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.flash { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; border-radius: inherit; }
.flash.red { background: radial-gradient(circle at 50% 45%, rgba(255,70,50,.6), rgba(200,0,0,.25) 70%); animation: var(--k-flash) .6s ease-out both; }
.flash.gold { background: radial-gradient(circle at 50% 45%, rgba(255,220,120,.55), rgba(255,170,40,.2) 70%); animation: var(--k-flash) .6s ease-out both; }
@keyframes flashOut { 0% { opacity: 1; } 100% { opacity: 0; } }

.arena { position: relative; display: grid; grid-template-columns: minmax(150px, calc(var(--face) + 60px)) minmax(0, 1fr) minmax(150px, calc(var(--face) + 60px)); gap: 12px; align-items: stretch; min-height: 0; }
/* How the duel ended, as the headline across the table. A win and a death do not look alike: gold and the pile coming
   to you, or the red of the 1 and a cracked table. */
.verdict { position: absolute; inset: -6px; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; pointer-events: none; border-radius: 20px; background: radial-gradient(75% 70% at 50% 46%, rgba(0,0,0,.86), rgba(0,0,0,.5) 62%, transparent 100%); animation: var(--k-fade) .18s both; container-type: inline-size; }
.verdict .vWho { font: 700 13px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.verdict .vAmt { font: 700 calc(var(--num) * 1.05 * var(--vfit, 1))/1 var(--display); white-space: nowrap; letter-spacing: -.04em; font-variant-numeric: tabular-nums; animation: var(--k-verdict) .6s var(--bounce) both; }
/* and never wider than the table it lies across: --vlen is the number of characters ("+1,638,400g" is 11), a character is
   under .6 of the font size wide, and 100cqi is the headline's own width (the arena's) */
@supports (width: 1cqi) { .verdict .vAmt { font-size: min(calc(var(--num) * 1.05 * var(--vfit, 1)), calc(150cqi / var(--vlen, 4))); } }
.verdict .vSub { font: 600 14px var(--font); color: var(--muted); min-height: 1.3em; }
.verdict[data-kind="win"] .vWho { color: var(--acc-3); }
.verdict[data-kind="win"] .vAmt { background: linear-gradient(180deg, #fff6d6 0%, #ffd166 45%, #ff8a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(245,185,66,.75)) drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
.verdict[data-kind="loss"] .vWho { color: #ffb4a8; }
.verdict[data-kind="loss"] .vAmt { color: var(--hot); text-shadow: 0 0 44px rgba(255,74,61,.85), 0 4px 0 rgba(0,0,0,.55); }
.verdict[data-kind="loss"] { background: radial-gradient(75% 70% at 50% 46%, rgba(30,0,0,.9), rgba(20,0,0,.55) 62%, transparent 100%); }
@keyframes verdictIn { 0% { transform: scale(2.1); opacity: 0; filter: blur(6px); } 55% { transform: scale(.94); opacity: 1; filter: none; } 100% { transform: scale(1); } }
.side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6dvh, 16px); padding: 14px 12px 12px; border-radius: 20px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); text-align: center; transition: box-shadow .4s, border-color .4s, background .4s; overflow: hidden; min-width: 0; }
.side.you.active { border-color: rgba(245,185,66,.6); box-shadow: 0 0 0 1px rgba(245,185,66,.25), 0 0 50px -12px rgba(245,185,66,.75), inset 0 0 40px -22px rgba(245,185,66,.4); }
.side.house.active { border-color: rgba(79,209,138,.6); box-shadow: 0 0 0 1px rgba(79,209,138,.25), 0 0 50px -12px rgba(79,209,138,.75), inset 0 0 40px -22px rgba(79,209,138,.4); }
.side.cracked { background: rgba(70,12,12,.4); border-color: rgba(255,74,61,.5); }     /* the side that rolled the 1 */
/* the felt cracks when you roll the 1. It lies under the panels: the lines show in the gaps and dimly through the panels,
   and never run through a name, a bubble or a number. It stays until the next stake panel. */
.feltCrack { position: absolute !important; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; fill: none; stroke: rgba(255,238,225,.85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s; filter: drop-shadow(0 0 5px rgba(255,74,61,.9)); }
.feltCrack path { vector-effect: non-scaling-stroke; }
.felt.cracked .feltCrack { opacity: 1; }
.felt.cracked .feltCrack path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: var(--k-draw) .5s ease-out both; }
html[data-motion="calm"] .felt.cracked .feltCrack path { stroke-dashoffset: 0; }
.felt.wreck { filter: saturate(.5) brightness(.82); transition: filter .6s; }       /* a bust: the wreck stands for a moment */
@keyframes draw { to { stroke-dashoffset: 0; } }
.side .face { width: var(--face); height: var(--face); border-radius: 50%; flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); transition: transform .3s var(--ease); }
.side.active .face { transform: scale(1.06); }
.side .face img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid rgba(245,185,66,.6); }
.sname { font: 700 clamp(15px, calc(var(--face) * .11), 19px) var(--display); letter-spacing: -.01em; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sname small { display: block; font: 500 11.5px var(--font); color: var(--dim); }
.purse { position: relative; width: 100%; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08); transition: border-color .3s; container-type: inline-size; }
.purse .k { display: block; }
.purse b { display: block; font: 700 clamp(28px, calc(var(--face) * .28), 50px)/1.1 var(--display); color: var(--acc-3); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a long purse (1,638,400g) is set smaller so it stays inside its box: --plen is its length in digits (set with the text) */
@supports (width: 1cqi) { .purse b { font-size: min(clamp(28px, calc(var(--face) * .28), 50px), calc(146cqi / var(--plen, 4))); } }
.purse b i { font-style: normal; font-size: .54em; color: var(--acc); margin-left: 2px; }
.purse small { color: var(--dim); font-size: clamp(11.5px, calc(var(--face) * .08), 13.5px); }
.purse.up { border-color: rgba(134,255,142,.35); } .purse.up small { color: #86ff8e; }
.purse.down { border-color: rgba(255,133,133,.35); } .purse.down small { color: #ff8585; }
.purse.bump-up { animation: var(--k-bumpup) .6s var(--ease); }
.purse.bump-down { animation: var(--k-bumpdown) .6s var(--ease); }
.fdelta { position: absolute; right: 8px; top: -2px; font: 700 17px var(--display); pointer-events: none; animation: var(--k-float) 1.5s var(--ease) both; }
.fdelta.up { color: #86ff8e; } .fdelta.down { color: #ff8585; }
html[data-motion="calm"] .fdelta { opacity: 0; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-36px); } }
.k, .bigLabel { font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trackerBox { width: 100%; }
/* fifteen duels as two full rows (8 and 7) beside the table, one row on a phone: never a row with one left over */
.tracker { display: grid; grid-template-columns: repeat(8, minmax(0, var(--slot, 15px))); justify-content: center; gap: 5px; margin-top: 6px; }   /* (the slots give way in a narrow side: never a row that leaves its panel) */
.slot { width: 100%; max-width: var(--slot, 15px); height: auto; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); flex: none; }
.slot.won { background: radial-gradient(circle at 35% 35%, #ffe8a8, #d4861a 75%); border-color: #ffd978; box-shadow: 0 0 8px rgba(245,185,66,.55); }
.slot.lost { background: radial-gradient(circle at 35% 35%, #7a252c, #2a0d10 75%); border-color: rgba(255,74,61,.55); }
.slot.live { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(245,185,66,.3); animation: livepulse 1.4s ease-in-out infinite var(--play); }
@keyframes livepulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(245,185,66,.3); } 50% { box-shadow: 0 0 0 5px rgba(245,185,66,.12); } }
.tracker.big { --slot: 22px; grid-template-columns: repeat(15, 22px); }
/* what Grix says, or "Grix rolls": one or the other, in a slot that keeps its height */
.sayslot { position: relative; width: 100%; height: var(--say-h); display: flex; align-items: flex-start; justify-content: center; min-width: 0; }
.sayslot .bubble { font-size: clamp(13px, calc(var(--face) * .09), 15.5px); text-align: left; margin-top: 0; max-height: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.sayslot .bubble:empty, .sayslot.busy .bubble { display: none; }
.rolling { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 10px; border-radius: 999px; background: rgba(79,209,138,.14); border: 1px solid rgba(79,209,138,.4); font-size: 12px; color: #a8f0c6; font-weight: 600; white-space: nowrap; }
.rolling .die { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; animation: rattle .3s ease-in-out infinite var(--play); }
.rolling .die circle { fill: currentColor; stroke: none; }
.rolling.go .die { animation: spin .7s linear infinite var(--play); }
.rolling i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dots 1s ease-in-out infinite var(--play); }
.rolling i:nth-child(4) { animation-delay: .15s; } .rolling i:nth-child(5) { animation-delay: .3s; }
@keyframes rattle { 0%, 100% { transform: rotate(-16deg) translateX(-1px); } 50% { transform: rotate(16deg) translateX(1px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.center { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.dice { --heat: 0; --hot: var(--acc); position: relative; flex: 1; text-align: center; padding: 12px var(--dpad); border-radius: 20px; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .3s, box-shadow .3s; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; overflow: hidden; }
/* while the verdict stands across the table, the label, the number (the 1 has had its moment) and the odds under it step
   back: the headline stands alone, with nothing showing through it */
.dice .bigLabel, .dice .odds, .dice .numrow { transition: opacity .25s; }
.dice.hush .bigLabel, .dice.hush .odds, .dice.hush .numrow { opacity: 0; }
.dice::before { content: ""; position: absolute; inset: 15% 10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hot) 55%, transparent), transparent 70%); opacity: calc(var(--heat) * .9); filter: blur(12px); pointer-events: none; transition: opacity .4s; }
.dice.hot::before { animation: glow .76s ease-in-out infinite var(--play); }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.dice[data-end="win"] { --hot: #ffd166; --heat: 1; border-color: rgba(245,185,66,.7); }
.dice[data-end="win"] .bigNum { color: #ffe08a; }
.dice[data-end="loss"] { border-color: rgba(255,74,61,.7); box-shadow: 0 0 0 1px rgba(255,74,61,.3), 0 0 50px -8px rgba(255,74,61,.7); }
.dice[data-turn="you"] { border-color: rgba(245,185,66,.55); box-shadow: 0 0 0 1px rgba(245,185,66,.25), 0 0 40px -10px rgba(245,185,66,.55); }
.dice[data-turn="bot"] { border-color: rgba(79,209,138,.5); box-shadow: 0 0 0 1px rgba(79,209,138,.2), 0 0 40px -10px rgba(79,209,138,.5); }
.numrow { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); gap: var(--rgap); align-items: stretch; width: 100%; height: var(--numrow); margin: 4px 0 2px; }   /* --rail and --rgap are the table's: the number's size is worked out from them */
.dice.hot .numrow { animation: heartbeat .76s ease-in-out infinite var(--play); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.035); } 24% { transform: scale(1); } 36% { transform: scale(1.025); } 50% { transform: scale(1); } }
.ladder { position: relative; display: flex; flex-direction: column; align-items: center; font: 600 clamp(10px, calc(var(--num) * .09), 13px) var(--font); color: var(--dim); font-variant-numeric: tabular-nums; }
.ladder .lt, .ladder .lb { line-height: 1; }
.ladder .rail { position: relative; flex: 1; width: 8px; margin: 13px 0 12px; border-radius: 999px; background: rgba(255,255,255,.1); }   /* room above and below: the ball at the rail's end does not cover the labels */
.ladder .danger { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--danger, .3) * 100%); border-radius: 999px; background: linear-gradient(180deg, rgba(255,138,42,.45), var(--hot)); box-shadow: 0 0 12px rgba(255,74,61,.5); }
.ladder .ticks { position: absolute; inset: 0; }
.ladder .tick { position: absolute; left: -5px; right: -5px; top: calc(var(--p) * 100%); height: 2px; margin-top: -1px; background: var(--acc); opacity: .85; border-radius: 1px; }
.ladder .tick.bot { background: var(--house); }
.ladder .marker { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 18px; height: 18px; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle at 35% 35%, #fff0bf, #f5b942 55%, #a65f0c); box-shadow: 0 0 10px rgba(245,185,66,.7), 0 2px 4px rgba(0,0,0,.5); transition: top .7s var(--ease); }
.ladder.hot .marker { box-shadow: 0 0 16px var(--hot), 0 2px 4px rgba(0,0,0,.5); animation: markerPulse .76s ease-in-out infinite var(--play); }
@keyframes markerPulse { 0%, 100% { scale: 1; } 12% { scale: 1.25; } 30% { scale: 1; } }
/* --fit shrinks the number by its length (set with the text), so 1,600 and 1,638,400 stay inside their column */
.bigNum { display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; white-space: nowrap; font: 700 calc(var(--num) * var(--fit, 1))/1 var(--display); letter-spacing: -.04em; color: var(--hot); font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(40px * var(--heat)) color-mix(in srgb, var(--hot) 75%, transparent), 0 4px 0 rgba(0,0,0,.45); transition: color .3s, opacity .22s; }
.bigNum.land { animation: var(--k-land) .55s var(--bounce); }
.bigNum.one { animation: var(--k-one) .9s var(--ease); }
.bigNum.fade { opacity: .35; }
.bigNum.tumbling { filter: blur(1.6px); opacity: .5; text-shadow: none; animation: tumbleJit .11s linear infinite var(--play); }   /* in the air: dim, blurred, rattling. A landed number is none of these */
@keyframes tumbleJit { 0% { transform: translateY(-5px) scale(.9); } 50% { transform: translateY(5px) scale(.9); } 100% { transform: translateY(-5px) scale(.9); } }
/* Calm has no tumble: the number waits as a plain "?" for the same length of time, then the roll shows. Nothing counts down. */
.bigNum.hold { color: var(--muted); text-shadow: none; opacity: .55; }
.odds { font-size: clamp(13.5px, calc(var(--num) * .075), 18px); color: var(--muted); }
.odds b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.dice.scorch .odds b { color: #ffb4a8; }
/* the label above the number: whose roll it is, in that side's colour; or that the number is only your stake */
.dice .bigLabel { font-size: clamp(11px, calc(var(--num) * .058), 14px); min-height: 1.3em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dice[data-turn="you"] .bigLabel { color: var(--acc-3); }
.dice[data-turn="bot"] .bigLabel { color: #8fe3b4; }
/* the stake that is everything you have: it must not look like any other stake */
.dice.allin { border-color: rgba(255,74,61,.6); box-shadow: 0 0 0 1px rgba(255,74,61,.25), 0 0 44px -10px rgba(255,74,61,.6); }
.dice.allin .bigLabel { color: #ffb4a8; font-weight: 700; }
.dice.allin .bigNum { color: #ff8a70; }
/* The gold on the table: your stake on your side, the same from Grix on his, each piled in three stacks that grow with
     the stake. --sx is the step from one stack to the next (the coin's own width at least), --sy from one coin up to the next. */
.pot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto; padding: 4px 16px; height: clamp(52px, calc(var(--num) * .3), 68px); width: 100%; flex: none; border-radius: 16px; background: rgba(0,0,0,.26); border: 1px dashed rgba(255,255,255,.18); color: var(--acc-3); font: 600 clamp(13px, calc(var(--num) * .065), 15.5px) var(--font); transition: border-color .3s, color .3s; }
.pot.empty { color: var(--dim); border-color: rgba(255,255,255,.08); justify-content: center; }
.potLabel { display: flex; flex-direction: column; align-items: center; line-height: 1.25; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; }
.potLabel b, .potLabel small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* in a narrow middle the words give way to the coins, never run into them */
.potLabel b { font-weight: 700; } .potLabel small { font-size: 11.5px; font-weight: 500; color: var(--muted); } .potLabel small:empty { display: none; }
.pile { --sx: clamp(24px, calc(var(--num) * .13), 30px); --sy: 4px; --cw: var(--sx); position: relative; width: calc(var(--sx) * 2 + var(--cw)); height: 100%; flex: none; }
.pot.empty .pile { display: none; }
.pcoin { position: absolute; left: var(--x, 0px); bottom: calc(2px + var(--y, 0px)); width: var(--cw); height: 9px; border-radius: 50%; background: linear-gradient(180deg, #ffe08a, #e0a93a 60%, #9a6210); border: 1px solid rgba(0,0,0,.55); box-shadow: 0 1px 0 #6a4408; animation: var(--k-pop) .25s var(--bounce) both; }
.pile.house .pcoin { background: linear-gradient(180deg, #fff0bf, #e8b84a 60%, #8a5a10); }
/* the chat: a slim column at the right of the felt, as tall as the arena, like the game's own chat window. It scrolls
   inside itself and never pushes the action bar. (On a phone it is a panel one tap away: see the phone rules.) */
.logwrap { position: relative; min-width: 0; min-height: var(--log-h); }
.logwrap::before { content: "Chat"; position: absolute; z-index: 1; top: 1px; left: 1px; right: 12px; padding: 8px 13px 12px; border-radius: 17px 0 0 0; background: linear-gradient(180deg, rgb(7,19,14) 58%, rgba(7,19,14,0));   /* (a full chat scrolls away under its label, not through it) */ font: 600 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
.log { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 14px 10px; border-radius: 18px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.07); font: 500 14px/1.45 var(--font); scrollbar-width: thin; display: flex; flex-direction: column; gap: 3px; text-shadow: 0 1px 0 rgba(0,0,0,.9); }
.log::before { content: ""; margin-top: auto; }   /* a short chat sits at the bottom of its box, as in the game (also when its first line is out of sight) */
.logToggle { display: none; position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(20,18,28,.9); color: var(--muted); place-items: center; cursor: pointer; }
.logToggle .ic { width: 16px; height: 16px; }
.log:empty::before { content: "The duel is written here, the way the game writes it."; color: var(--dim); font-size: 13px; text-shadow: none; }
.log:not(:has(> .line:not(.now)))::before { content: "The duel is written here, the way the game writes it."; color: var(--dim); font-size: 13px; text-shadow: none; }   /* (nothing to read in it yet) */
.line { overflow-wrap: anywhere; }
/* What Grix says is said once: the line his bubble is showing right now stays out of the chat, and shows there as
   history once he has said the next thing (the script moves the class on). */
.line.say.now { display: none; }
.line:not(.still) { animation: var(--k-in) .3s var(--ease) both; }
.line.sys { color: var(--sys); }
.line.say { color: #fff; }
.line.win { color: #86ff8e; font-weight: 600; }
.line.loss { color: #ff8585; font-weight: 600; }
.line.duel { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-shadow: none; }
.line.duel::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }

/* thrown dice: from the one who rolls to the number in the middle */
.tdie { position: absolute; width: clamp(22px, calc(var(--num) * .14), 34px); height: clamp(22px, calc(var(--num) * .14), 34px); border-radius: 6px; z-index: 6; pointer-events: none; border: 1.5px solid #2a1a10; box-shadow: 0 8px 14px rgba(0,0,0,.55);
  background: radial-gradient(circle at 28% 28%, #2a1a10 0 2.2px, transparent 2.7px), radial-gradient(circle at 72% 72%, #2a1a10 0 2.2px, transparent 2.7px), radial-gradient(circle at 50% 50%, #2a1a10 0 2.2px, transparent 2.7px), #fff8e6;
  animation: var(--k-die) var(--t, .3s) cubic-bezier(.3,.1,.5,1) var(--d, 0ms) both; }
.tdie.two { background: radial-gradient(circle at 30% 30%, #2a1a10 0 2.2px, transparent 2.7px), radial-gradient(circle at 70% 70%, #2a1a10 0 2.2px, transparent 2.7px), #fff8e6; }
html[data-motion="calm"] .tdie { display: none; }
@keyframes dieFly { 0% { transform: translate(-50%, -50%) rotate(0) scale(.6); opacity: 0; } 14% { opacity: 1; } 55% { transform: translate(calc(-50% + var(--tx) * .55), calc(-50% + var(--ty) * .55 - 38px)) rotate(300deg) scale(1.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(640deg) scale(.9); opacity: 0; } }
/* coins and chips in flight */
.coin { position: absolute; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; z-index: 6; background: radial-gradient(circle at 35% 35%, #fff0bf, #f5b942 55%, #a65f0c); box-shadow: 0 0 10px rgba(245,185,66,.55); animation: var(--k-coin) var(--ct, 1.15s) var(--ease) var(--d, 0ms) both; }
.coin.dim { background: radial-gradient(circle at 35% 35%, #ddd6c6, #9c948a 55%, #4e4a44); box-shadow: 0 0 8px rgba(0,0,0,.4); }
.coin.fly { width: 22px; height: 22px; animation: var(--k-fly) .45s var(--ease) both; background: radial-gradient(circle at 50% 50%, #ffe3a0 0 40%, #f5b942 41%); }
.resFx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.resFx .coin { top: -24px; animation: var(--k-drop) var(--t, 1.8s) linear var(--d, 0ms) both; }
@keyframes coinFly { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 18% { opacity: 1; transform: translate(calc(-50% + var(--mx, 0px)), calc(-50% - 48px)) scale(1.15); } 100% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(.6); opacity: 0; } }
@keyframes chipFly { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(.45); opacity: .3; } }
@keyframes coinDrop { 0% { transform: translateY(0) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(var(--mx, 0px), 760px) rotate(540deg); opacity: .9; } }

/* ---------- controls: the action bar ----------
   Sticks to the bottom of the window when the page is taller than the window, so the button to press is always on
   screen. The stake panel and the roll panel are the same height, and the two gold buttons sit in the same place. */
.controls { position: sticky; bottom: 0; z-index: 20; padding: 2px 0 10px; background: linear-gradient(to top, var(--bg) 82%, rgba(10,9,16,0)); }
.betpanel { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: var(--chip) 64px; grid-template-areas: "chips chips chips" "field bet cash"; gap: 8px 10px; align-items: stretch; }
.chips { grid-area: chips; display: flex; gap: 10px; justify-content: center; height: var(--chip); }
.betfield { grid-area: field; } #btnBet { grid-area: bet; } #btnCash { grid-area: cash; }
.chip { --c1: #e8e4da; --c2: #fff; --ink: #1d1a14; position: relative; width: var(--chip); height: var(--chip); flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; font: 700 15px var(--display); color: var(--ink); letter-spacing: -.01em;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0 33%, rgba(0,0,0,.22) 34% 36%, transparent 37%), repeating-conic-gradient(var(--c1) 0 18deg, var(--c2) 18deg 36deg);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 10px 20px -8px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.1); transition: transform .12s var(--ease), box-shadow .12s, filter .15s, opacity .15s; }
.chip span { position: relative; }
.chip.c25 { --c1: #d6353b; --c2: #ffb3b3; --ink: #fff; }
.chip.c50 { --c1: #2a6be0; --c2: #c2d8ff; --ink: #fff; }
.chip.c100 { --c1: #23242c; --c2: #f5b942; --ink: #ffe08a; }
.chip.half { --c1: #7a3fc2; --c2: #e4cbff; --ink: #fff; font-size: 13.5px; }
.chip.all { --c1: #e0891c; --c2: #ffe08a; --ink: #2a1a05; font-size: 13px; }
.chip.clear { --c1: transparent; --c2: transparent; --ink: var(--muted); background: rgba(255,255,255,.04); border: 1px dashed var(--line-2); box-shadow: none; font: 600 12.5px var(--font); }
.chip:hover { transform: translateY(calc(-2px * var(--m))); filter: brightness(1.06); }
.chip:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 6px 14px -8px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.1); }
.chip[disabled] { opacity: .32; cursor: default; filter: grayscale(.6); transform: none; }
.chip kbd { position: absolute; right: -3px; bottom: 0; padding: 0 5px; font-size: 10px; background: rgba(12,11,18,.92); }
.betfield { display: flex; flex-direction: column; justify-content: center; padding: 4px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); min-width: 0; overflow: hidden; }
.betfield.nope { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot); animation: var(--k-nope) .4s var(--ease); }
.betfield span { font: 600 11px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.betfield input { width: 100%; min-height: 26px; margin: 0; padding: 0; border: 0; background: transparent; font: 700 22px/1.15 var(--display); color: var(--acc-3); font-variant-numeric: tabular-nums; outline: none; }
.betfield input:focus-visible { outline: none; }
.betfield:focus-within { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.betfield small { color: var(--dim); font-size: 11.5px; line-height: 1.2; }
.betfield input::-webkit-outer-spin-button, .betfield input::-webkit-inner-spin-button { opacity: .6; }
.btn.act { flex-direction: column; gap: 2px; padding: 8px 14px; min-height: 0; line-height: 1.15; text-align: center; }
.btn.act b { font: 700 17px var(--display); letter-spacing: -.01em; }
.btn.act small { font-weight: 500; font-size: 12px; opacity: .8; }
.btn.act.cash { border-color: rgba(134,255,142,.35); }
.btn.act.cash:hover { border-color: rgba(134,255,142,.7); background: rgba(134,255,142,.08); }
/* all in: the red of the 1, and it says so */
.btn.primary.allin { color: #fff; background: linear-gradient(135deg, #ff7a5c, var(--hot) 55%, #c41f1f); box-shadow: 0 10px 28px -12px rgba(255,74,61,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary.allin b { letter-spacing: .02em; }
/* the stake panel has only just come back: for a moment the button does not take a press that was meant for the roll */
.btn.act.arming { opacity: .62; }
.rollpanel { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: calc(var(--chip) + 72px); }
.rollrow { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.btn.roll { width: min(100%, 380px); height: calc(var(--chip) + 26px); min-height: 0; border-radius: 20px; }
/* the loaded die: a red button of its own beside the roll, only there when the die may come out; a first press arms it */
.dieBtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: calc(var(--chip) + 60px); height: calc(var(--chip) + 26px); flex: none; padding: 4px 8px; border-radius: 20px; border: 1px solid rgba(255,74,61,.55); background: rgba(70,12,12,.5); color: #ffb4a8; cursor: pointer; transition: background .15s, box-shadow .2s, transform .15s var(--ease); animation: var(--k-pop) .3s var(--bounce) both; }
.dieTxt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.dieBtn b { font: 700 12px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.dieBtn small { font: 500 10px/1.15 var(--font); text-align: center; opacity: .9; text-wrap: balance; }
.dieBtn:hover { background: rgba(120,20,20,.55); transform: translateY(calc(-1px * var(--m))); }
.dieBtn.armed { background: linear-gradient(135deg, #ff7a5c, var(--hot) 55%, #c41f1f); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px rgba(255,74,61,.25), 0 10px 28px -12px rgba(255,74,61,.9); animation: diePulse .7s ease-in-out infinite var(--play); }
.dieBtn.armed small { opacity: 1; }
@keyframes diePulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,74,61,.25), 0 10px 28px -12px rgba(255,74,61,.9); } 50% { box-shadow: 0 0 0 8px rgba(255,74,61,.12), 0 14px 40px -10px rgba(255,74,61,1); } }
/* the die itself: red with white pips (a five) */
.dieFace { display: block; width: 24px; height: 24px; border-radius: 6px; flex: none; border: 1px solid rgba(0,0,0,.5); box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  background: radial-gradient(circle at 25% 25%, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 75% 25%, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 25% 75%, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 75% 75%, #fff 0 2px, transparent 2.6px), linear-gradient(145deg, #ff6a5a, #c41f1f); }
.dieBtn.armed .dieFace { animation: rattle .25s ease-in-out infinite var(--play); }
.dieToken { position: absolute; top: 6px; right: 7px; cursor: help; }
.dieToken::after { content: ""; position: absolute; inset: -9px; }   /* a finger's worth of room around it: a tap says what the die does */
.dieToken .dieFace { width: 18px; height: 18px; border-radius: 5px; }
.slot.loaded { box-shadow: 0 0 0 2px var(--hot), 0 0 10px rgba(255,74,61,.6); }
.bigNum.loaded { color: #ff8a70 !important; text-shadow: 0 0 44px rgba(255,74,61,.85), 0 4px 0 rgba(0,0,0,.45); }
.btn.roll b { font-size: 30px; font-family: var(--mono); letter-spacing: -.02em; }
.btn.roll:not([disabled]):not(.skipmode) { animation: rollPulse 1.6s ease-in-out infinite var(--play); }
.btn.roll.waiting { opacity: .55; filter: saturate(.5); }
.btn.roll.skipmode { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--line-2); box-shadow: none; opacity: 1; filter: none; }   /* the same size as Roll: nothing moves under the cursor */
.btn.roll.skipmode b { font-size: 18px; font-family: var(--display); }
.btn.roll.skipmode:hover { color: var(--text); background: rgba(255,255,255,.1); }
@keyframes rollPulse { 0%, 100% { box-shadow: 0 10px 28px -12px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 14px 40px -10px var(--acc-glow), 0 0 0 6px rgba(245,185,66,.14), inset 0 1px 0 rgba(255,255,255,.35); } }
.keys { margin: 0; color: var(--dim); font-size: 12px; text-align: center; }

/* ---------- result ---------- */
.result { align-items: center; }
.over-card { position: relative; width: min(100%, 640px); padding: 26px 22px 22px; border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: var(--k-rise) .5s var(--ease) both; overflow: hidden; }
body[data-outcome="profit"] .over-card { border-color: rgba(245,185,66,.45); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 80px -30px rgba(245,185,66,.5); }
body[data-outcome="bust"] .over-card { border-color: rgba(255,74,61,.4); }
.resHouse { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; max-width: 100%; }
.resHouse .bubble { margin-top: 0; text-align: left; }
.over-card .eyebrow { margin: 4px 0 2px; }
.over-title { margin: 0; font: 700 clamp(26px, 6vw, 38px)/1.15 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.over-title:focus { outline: none; }
body[data-outcome="profit"] .over-title { background: linear-gradient(180deg, #fff6d6 0%, #ffd166 45%, #ff8a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-outcome="bust"] .over-title { color: #ff8585; }
.over-delta { margin: 0; color: var(--muted); font-size: 14.5px; }
.record { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #2a1a05; background: linear-gradient(135deg, #ffd978, #ff8a2a); box-shadow: 0 8px 20px -8px rgba(255,138,42,.8); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; margin: 8px 0 0; }
.stats div { padding: 8px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.stats dt { font: 600 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.stats dd { margin: 2px 0 0; font: 700 18px var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.counted { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(134,255,142,.08); border: 1px solid rgba(134,255,142,.3); color: #c8ffcc; font-size: 13.5px; max-width: 56ch; }
.counted.visitor { background: rgba(255,170,0,.08); border-color: rgba(255,200,80,.4); color: #ffe2a8; }   /* a daily that waits for a sign-in to reach the board */
.over-card .login-link { margin-top: 2px; }
.over-card .sub { width: 100%; }
.over-card .bests { width: 100%; }
/* the run's story: the purse over the fifteen duels */
.story { width: 100%; margin: 6px 0 0; padding: 8px 8px 6px; border-radius: 18px; background: radial-gradient(120% 100% at 50% 0%, var(--felt-3), var(--felt) 60%, var(--felt-2)); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 0 4px #2c1a10, inset 0 0 0 5px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.45); }
.storyLine { display: block; width: 100%; height: auto; overflow: visible; }
.storyLine .sBase { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 4 4; }
.storyLine .sZero { stroke: rgba(255,74,61,.45); stroke-width: 1; }
.storyLine .sAxis, .storyLine .sTick { font: 600 10px var(--font); fill: var(--dim); }
.storyLine .sTick.off { fill: rgba(255,255,255,.18); }
.storyLine .sArea { fill: rgba(245,185,66,.14); }
.storyLine .sArea.down { fill: rgba(255,74,61,.12); }
.storyLine .sLine { fill: none; stroke: var(--acc-3); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(245,185,66,.5)); stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: var(--k-draw) 1.6s var(--ease) .2s both; }
html[data-motion="calm"] .storyLine .sLine { stroke-dashoffset: 0; }
.storyLine .sDot { stroke: #0a0910; stroke-width: 1.5; }
.storyLine .sDot.won { fill: #ffd978; }
.storyLine .sDot.lost { fill: #c62a2a; }
.storyLine .sDot.loaded { stroke: var(--hot); stroke-width: 2.5; }
.storyLine .sPeak { font: 700 11px var(--font); fill: var(--acc-3); letter-spacing: .06em; text-transform: uppercase; }
.storyLine .sEnd { font: 700 13px var(--display); fill: var(--acc-3); }
.storyLine .sEnd.down { fill: #ff8585; }
/* the phone's drawing (340 units across, shown about 300px wide): its own words in sizes that can be read */
.storyLine.narrow .sAxis, .storyLine.narrow .sTick { font-size: 12.5px; }
.storyLine.narrow .sPeak { font-size: 13px; letter-spacing: .03em; }
.storyLine.narrow .sEnd { font-size: 15px; }
.story figcaption { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.storyWords { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; max-width: 56ch; display: flex; flex-direction: column; gap: 3px; color: var(--text); font-size: 14px; line-height: 1.45; text-align: center; }
.storyWords li { text-wrap: balance; }
.storyWords li:first-child { font-weight: 600; font-size: 15px; }
.bestsLine { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.bestsLine .k { font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); align-self: center; }
.bestsLine b { color: var(--acc-3); font-variant-numeric: tabular-nums; }
.over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.over-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 2px; }
.over-more .btn { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.shareBox { width: 100%; }
.shareBox textarea { width: 100%; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: rgba(0,0,0,.3); color: var(--text); font: 500 13px/1.5 var(--font); }

/* ---------- dialogs ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: radial-gradient(60% 55% at 50% 40%, rgba(245,185,66,.12), transparent 70%), rgba(6,5,10,.74); animation: var(--k-in) .25s both; }
.dlg { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 24px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: var(--k-pop) .45s var(--ease) both; outline: none; scrollbar-width: thin; }
.dlg.wide { width: min(100%, 600px); }
.dlg.confirm { width: min(100%, 460px); text-align: center; }
.dlg.confirm .dlg-title { justify-content: center; }
.close-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.close-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
.dlg-title { margin: 0 0 14px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; padding-right: 40px; }
.dlg.confirm .dlg-title { padding-right: 0; }
.dlg-text { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; }
.rookQuote { margin: 12px auto 0; padding: 8px 12px; border-radius: 12px; background: #f6f1e6; color: #1a1620; font-weight: 500; font-size: 14px; display: inline-block; }
.help section { padding: 12px 0; border-top: 1px solid var(--line); }
.help section:first-child { border-top: 0; padding-top: 0; }
.help h3 { margin: 0 0 6px; font: 700 15px var(--display); }
.help p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.help p b { color: var(--text); }
.help p i { color: var(--sys); font-style: normal; font-weight: 600; font-family: var(--mono); }
.board-note { margin: 10px 0 8px; color: var(--dim); font-size: 12.5px; min-height: 1.2em; }
.lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lb.scroll { max-height: clamp(214px, calc(100dvh - 380px), 440px); overflow-y: auto; scrollbar-width: thin; padding: 1px 4px 1px 1px; margin-right: -4px; overscroll-behavior: contain; }
.lb-hint { margin: 12px 0 0; color: var(--dim); font-size: 12.5px; text-align: center; }
/* your own row, pinned under the list while it is scrolled out of view */
.lb-pin { display: block; width: 100%; margin-top: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(245,185,66,.55); background: linear-gradient(90deg, rgba(245,185,66,.16), rgba(245,185,66,.05)); color: var(--acc-3); font: 700 13.5px var(--display); cursor: pointer; text-align: center; }
.lb-pin:hover { background: rgba(245,185,66,.2); }
.brow { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); animation: var(--k-in) .3s var(--ease) both; }
.brow.loading { display: block; text-align: center; color: var(--dim); padding: 14px; border-style: dashed; }
.brow .rank { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 700 13px var(--display); color: var(--dim); font-variant-numeric: tabular-nums; }
.brow.top1, .brow.top2, .brow.top3 { --rc: var(--orange); }
.brow.top1 .rank, .brow.top2 .rank, .brow.top3 .rank { color: #fff; background: var(--rc); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 8px 18px -8px var(--rc); }
.brow.top1 { border-color: rgba(255,128,0,.4); background: linear-gradient(90deg, rgba(255,128,0,.12), transparent 55%), rgba(255,255,255,.025); }
.brow.top2 { --rc: var(--purple); border-color: rgba(163,53,238,.4); background: linear-gradient(90deg, rgba(163,53,238,.12), transparent 55%), rgba(255,255,255,.025); }
.brow.top3 { --rc: var(--blue); border-color: rgba(0,112,221,.45); background: linear-gradient(90deg, rgba(0,112,221,.14), transparent 55%), rgba(255,255,255,.025); }
.brow.top1 .who b { color: #ffb366; } .brow.top2 .who b { color: #d2a0f7; } .brow.top3 .who b { color: #7fb8ff; }
.brow .avatar { width: 32px; height: 32px; }
.brow .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.brow .who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .who small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .val { text-align: right; line-height: 1.1; white-space: nowrap; }
.brow .val b { font: 700 17px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--acc-3); }
.brow .val small { display: block; color: var(--dim); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.brow.me { border-color: rgba(245,185,66,.55); background: linear-gradient(90deg, rgba(245,185,66,.14), rgba(245,185,66,.04)); box-shadow: 0 0 0 1px rgba(245,185,66,.2); }
.brow.me .who b::after { content: "you"; margin-left: 7px; padding: 1px 6px; border-radius: 999px; font: 700 9.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #2a1a05; background: var(--acc); vertical-align: 2px; }
/* a player's stakes, duel by duel: fifteen bars, gold won and red lost, an all-in with a brighter top */
.bars { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; align-items: end; height: 18px; width: min(100%, 150px); margin-top: 4px; }
.bars i { display: block; height: var(--h, 12%); border-radius: 2px 2px 0 0; background: rgba(255,255,255,.1); min-height: 2px; }
.bars i.none { height: 2px; background: rgba(255,255,255,.08); }
.bars i.won { background: linear-gradient(180deg, #ffe8a8, #d4861a); }
.bars i.lost { background: linear-gradient(180deg, #ff6a5a, #7a252c); }
.bars i.allin { box-shadow: 0 -2px 0 #fff; }
.bars i.loaded { outline: 1.5px solid var(--hot); outline-offset: 1px; }
.brow.hasLine { cursor: pointer; }
.brow.hasLine:hover { border-color: rgba(255,255,255,.2); }
.brow .cmp { grid-column: 1 / -1; padding: 8px 4px 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; animation: var(--k-in) .25s var(--ease) both; }
.cmpRow { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: end; gap: 10px; }
.cmpRow .k { font: 600 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.cmpRow .bars { width: 100%; height: 28px; margin-top: 0; }
.cmp p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.lb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; text-align: center; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.lb-empty .ic { width: 28px; height: 28px; color: var(--dim); margin-bottom: 4px; }
.lb-empty b { color: var(--text); font: 700 16px var(--display); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(22px + var(--sab)); z-index: 70; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
body[data-screen="screenTable"] .toasts { top: max(8px, calc(var(--felt-top, 124px) - 50px)); bottom: auto; }   /* at the table a line of text never lies over the buttons it is about: it stands in the free middle of the bar above the felt (on a phone, just above the action bar: see the phone rules) */
.toast { opacity: 0; translate: 0 16px; padding: 10px 16px; border-radius: 12px; background: #221e30; color: var(--text); font-weight: 500; font-size: 14px; border: 1px solid var(--line-2); box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); transition: opacity .25s, translate .25s var(--ease); text-align: center; max-width: 100%; }
.toast.in { opacity: 1; translate: 0 0; }
.toast.out { opacity: 0; translate: 0 -8px; }
.toast.bad { border-color: rgba(244,63,94,.55); color: #ffc6cf; }
.toast.warn { border-color: rgba(255,200,80,.5); color: #ffe2a8; }
.toast.good { border-color: rgba(134,255,142,.5); color: #d4ffd7; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding: 18px 0 calc(28px + var(--sab)); border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; }
.foot a { color: var(--muted); font-weight: 600; }
.foot a:hover { color: var(--text); }

/* ---------- Grix's face: moods by data-mood ---------- */
.rookface .rk-lid, .rookface .rk-lid-lo, .rookface .rk-blinker, .rookface .rk-brow, .rookface .rk-look, .rookface .rk-head, .rookface .gx-ear { transform-box: fill-box; transition: transform .28s var(--ease); }
.rookface .rk-lid { transform-origin: 50% 0; transform: scaleY(.14); }
.rookface .rk-lid-lo { transform-origin: 50% 100%; transform: scaleY(0); }
.rookface .rk-blinker { transform-origin: 50% 0; transform: scaleY(0); }
.rookface .rk-brow { transform-origin: 50% 50%; transform: rotate(7deg); }
.rookface .rk-look { transform-origin: 50% 50%; }
.rookface .rk-head { transform-origin: 50% 60%; }
.rookface .gx-ear { transform-origin: 100% 50%; }
.rookface .gx-mouth > * { opacity: 0; transition: opacity .2s; }
.rookface[data-mood="calm"] .m-calm, .rookface[data-mood="think"] .m-think, .rookface[data-mood="tense"] .m-think, .rookface[data-mood="shock"] .m-open, .rookface[data-mood="gloat"] .m-grin, .rookface[data-mood="sulk"] .m-frown { opacity: 1; }
.rookface[data-mood="think"] .rk-lid { transform: scaleY(.45); }
.rookface[data-mood="think"] .rk-look { transform: translate(1.5px, 2.5px); }
.rookface[data-mood="think"] .rk-eye:first-of-type .rk-brow { transform: translateY(-3px) rotate(-4deg); }
.rookface[data-mood="tense"] .rk-lid, .rookface[data-mood="shock"] .rk-lid { transform: scaleY(0); }
.rookface[data-mood="tense"] .rk-brow { transform: translateY(-3px) rotate(0deg); }
.rookface[data-mood="tense"] .rk-look { transform: scale(.9); }
.rookface[data-mood="tense"] .gx-ear { transform: rotate(-7deg); }
.rookface[data-mood="shock"] .rk-brow { transform: translateY(-6px) rotate(-10deg); }
.rookface[data-mood="shock"] .rk-look { transform: scale(.72); }
.rookface[data-mood="shock"] .gx-ear { transform: rotate(-16deg) translateX(-2px); }
.rookface[data-mood="gloat"] .rk-lid { transform: scaleY(.3); }
.rookface[data-mood="gloat"] .rk-lid-lo { transform: scaleY(.45); }
.rookface[data-mood="gloat"] .rk-brow { transform: rotate(14deg); }
.rookface[data-mood="gloat"] .rk-head { transform: rotate(3deg); }
.rookface[data-mood="sulk"] .rk-lid { transform: scaleY(.5); }
.rookface[data-mood="sulk"] .rk-brow { transform: rotate(22deg) translateY(2px); }
.rookface[data-mood="sulk"] .rk-look { transform: translate(-2px, 1px); }
.rookface[data-mood="sulk"] .rk-head { transform: rotate(-3deg); }
.rookface[data-mood="sulk"] .gx-ear { transform: rotate(12deg); }
/* he watches the dice roll: eyes wide and on the number (to his left; the right eye is drawn mirrored) */
.rookface[data-mood="watch"] .m-think { opacity: 1; }
.rookface[data-mood="watch"] .rk-lid { transform: scaleY(.04); }
.rookface[data-mood="watch"] .rk-brow { transform: translateY(-3px) rotate(2deg); }
.rookface[data-mood="watch"] .rk-eye-l .rk-look, .rookface[data-mood="tense"] .rk-eye-l .rk-look { transform: translate(-2.6px, 1.8px); }
.rookface[data-mood="watch"] .rk-eye-r .rk-look, .rookface[data-mood="tense"] .rk-eye-r .rk-look { transform: translate(2.6px, 1.8px); }
.rookface[data-mood="watch"] .rk-head { transform: rotate(-3deg); }
/* his hand with the dice: it comes up and shakes while he winds up, then throws toward the middle */
.rookface .gx-hand { transform-box: fill-box; transform-origin: 50% 60%; transform: translate(24px, 142px) scale(1.25); opacity: 0; transition: transform .22s var(--ease), opacity .15s; }
.rookface[data-act="shake"] .gx-hand { opacity: 1; transform: translate(24px, 104px) scale(1.25); animation: handShake .15s ease-in-out infinite alternate var(--play); }
.rookface[data-act="throw"] .gx-hand { opacity: 1; transform: translate(24px, 104px) scale(1.25); animation: var(--k-throw) .3s var(--ease) both; }
.rookface[data-act="throw"] .gx-dice { opacity: 0; }
@keyframes handShake { from { transform: translate(20px, 107px) scale(1.25) rotate(-12deg); } to { transform: translate(28px, 100px) scale(1.25) rotate(12deg); } }
@keyframes handThrow { 0% { transform: translate(24px, 104px) scale(1.25) rotate(0); } 35% { transform: translate(34px, 110px) scale(1.25) rotate(22deg); } 100% { transform: translate(0px, 94px) scale(1.25) rotate(-36deg); } }
.side.house.winding .face { animation: windup .3s ease-in-out infinite alternate var(--play); }
@keyframes windup { from { rotate: -3deg; } to { rotate: 3deg; } }
.rookface .rk-blinker { animation: blink 5.3s ease-in-out infinite var(--play); }
.rookface[data-mood="tense"] .rk-blinker, .rookface[data-mood="shock"] .rk-blinker { animation-play-state: paused; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.rookface[data-mood="think"] .rk-head { animation: bob 1.1s ease-in-out infinite var(--play); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(1.5px) rotate(1.5deg); } }

/* ---------- one-shot keyframes (names are `none` in Calm) ---------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }
@keyframes fadeOnly { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } 60% { transform: translateY(-2px) scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes land { 0% { transform: scale(1.45) translateY(-10px); filter: brightness(1.7); } 55% { transform: scale(.96) translateY(2px); } 100% { transform: scale(1); filter: none; } }
@keyframes theOne { 0% { transform: scale(2.2); filter: brightness(2.2); } 30% { transform: scale(.9) rotate(-6deg); } 50% { transform: scale(1.18) rotate(5deg); } 70% { transform: scale(.98) rotate(-2deg); } 100% { transform: none; } }
@keyframes bumpUp { 0% { transform: scale(1); } 30% { transform: scale(1.06); background: rgba(134,255,142,.14); } 100% { transform: scale(1); } }
@keyframes bumpDown { 0% { transform: translateX(0); } 20% { transform: translateX(-4px); background: rgba(255,74,61,.16); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: none; } }
@keyframes shake { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; } }
@keyframes thud { 30% { translate: 0 3px; } }
@keyframes nope { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

/* ---------- responsive ---------- */
@media (max-width: 760px) { .user-btn { padding: 0 5px; max-width: none; } .user-name, .user-btn .chev { display: none; } }

/* A short window (a 1366x768 or 1280x800 laptop leaves 640 to 670px of page): the compact set, so that the whole
   table and the action bar are on screen without scrolling. */
@media (min-width: 721px) and (max-height: 800px) {
  .screen.table { --numh: clamp(96px, 19dvh, 150px); --numrow: calc(var(--num) * 1.15); --face: clamp(64px, min(15dvh, 12.5vw), 120px); --rail: 30px; --slot: 14px; --chip: 52px; --log-h: 80px; --say-h: 64px; --pad: 12px; gap: 8px; }
  .felt { gap: 8px; border-radius: 24px; min-height: calc(100dvh - var(--felt-top, 112px) - var(--barh, 128px) - 40px); }
  .arena { gap: 10px; }
  .center { gap: 8px; }
  .dice { padding: 8px var(--dpad); }
  .numrow { margin: 2px 0 0; }
  .pot { height: 44px; }
  .side { gap: 4px; padding: 10px 12px 8px; }
  .purse { padding: 5px 10px; }
  .tracker { margin-top: 4px; gap: 4px; }
  .log { padding: 28px 14px 8px; font-size: 13.5px; }   /* the room at the top is the "Chat" label's: nothing is written over it */
  .btn.roll b { font-size: 27px; }
}
/* a window too narrow for the chat column beside the felt (the middle would be left too little for the number): the
   chat goes under the arena, three lines high. A short window (the compact set above) has a smaller number and keeps
   the column down to 1041px; a taller one needs the middle's width for its bigger number, up to 1319px. */
@media (min-width: 721px) and (max-width: 1040px), (min-width: 1041px) and (max-width: 1319px) and (min-height: 801px) {
  .screen.table { --chat-w: 0px; }
  .felt { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .logwrap { height: var(--log-h); min-height: 0; }
  .logwrap::before { display: none; } .log { padding-top: 10px; }
}

/* A phone: the two heads in one row, what Grix says under it, then the number, then the duels. The felt fills the
   screen from the bar above it down to the action bar (the site's footer is not on the table screen), the number is
   sized from that free height, and the chat is a panel one tap away. The action bar is stuck to the bottom of the
   screen, so the number, Grix and the button are on one screen and the button never moves. */
@media (max-width: 720px) {
  .screen.table { --numh: clamp(64px, calc((100dvh - var(--barh, 92px)) * .18), 150px); --numrow: calc(var(--num) * 1.18); --face: 64px; --rail: 24px; --rgap: 8px; --dpad: 10px; --slot: 14px; --chip: 44px; --log-h: 56px; --say-h: 44px; --pad: 10px; gap: 8px; padding-bottom: calc(var(--barh, 92px) + 2px); }
  body[data-screen="screenTable"] .foot { display: none; }
  .chatBtn { display: inline-flex; }
  .tablebar { gap: 6px 8px; } .tablebar .lg { display: none; }
  .felt { border-radius: 22px; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: calc(100dvh - var(--felt-top, 104px) - var(--barh, 92px) - 8px); transition: min-height .3s var(--ease); }
  .arena { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "yface purse hname hface" "say say say say" "center center center center" "track track track track"; gap: 6px 10px; align-items: center; }
  .side { display: contents; }
  .side .crack { display: none; }
  .side.you .face { grid-area: yface; width: 48px; height: 48px; }
  .side.you .sname { display: none; }
  .side.you.active .face, .side.house.active .face { transform: none; }
  .side.you.active .face { filter: drop-shadow(0 0 10px rgba(245,185,66,.9)); }
  .side.house.active .face { filter: drop-shadow(0 0 12px rgba(79,209,138,.9)); }
  .purse { grid-area: purse; width: auto; min-width: 0; padding: 0; background: none; border: 0; text-align: left; }
  .purse b { font-size: 24px; font-size: min(24px, calc(146cqi / var(--plen, 4))); } .purse b i { font-size: .54em; } .purse small { font-size: 11.5px; }
  .purse small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side.house .face { grid-area: hface; }
  .side.house .sname { grid-area: hname; text-align: right; font-size: 15px; }
  .sayslot { grid-area: say; justify-content: flex-end; align-items: center; }
  .sayslot .bubble { border-top-left-radius: 14px; border-top-right-radius: 4px; -webkit-line-clamp: 2; line-clamp: 2; padding: 4px 10px; font-size: 13px; }
  .rolling { margin-top: 0; }
  .center { grid-area: center; gap: 6px; align-self: stretch; }
  .trackerBox { grid-area: track; }
  .trackerBox .k { display: none; }
  .tracker { grid-template-columns: repeat(15, minmax(0, 16px)); justify-content: space-between; gap: 2px; margin-top: 0; }
  .slot { width: 100%; max-width: none; height: auto; aspect-ratio: 1; }
  .dice { padding: 8px var(--dpad); border-radius: 16px; }
  .numrow { margin: 2px 0 0; transition: height .3s var(--ease); }
  .bigNum { transition: color .3s, opacity .22s, font-size .3s var(--ease); }
  .odds { font-size: 13px; }
  .dice .bigLabel { font-size: 11px; }
  .pot { height: 40px; padding: 4px 12px; gap: 10px; border-radius: 12px; font-size: 12.5px; }
  .pile { --sx: 17px; --sy: 3px; --cw: 17px; } .pcoin { height: 7px; }
  .verdict .vWho { font-size: 11.5px; } .verdict .vSub { font-size: 12.5px; }
  .verdict .vAmt { font-size: min(calc(var(--num) * 1.15 * var(--vfit, 1)), calc(128vw / var(--vlen, 4))); }   /* and never wider than the felt on a phone, with a little air at both ends */
  /* the chat: closed, nothing of it is on the felt; opened from the bar's button it lies over the lower part of the felt */
  .logwrap { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 7; min-height: 0; height: 0; pointer-events: none; }
  .logwrap::before { display: none; }   /* (the column's label: the phone's panel is opened by a button that says what it is) */
  .logwrap.open { height: min(52vh, 320px); pointer-events: auto; }
  .log { display: none; inset: auto 0 0 0; height: 100%; padding: 7px 44px 7px 12px; border-radius: 14px; font-size: 13px; background: rgba(6,14,10,.94); border-color: rgba(255,255,255,.14); box-shadow: 0 -10px 30px -10px rgba(0,0,0,.8); }
  .logwrap.open .log { display: flex; animation: var(--k-rise) .25s var(--ease) both; }
  .logwrap.open .logToggle { display: grid; z-index: 8; }
  .controls { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 16px calc(8px + var(--sab)); background: #0c0b12; border-top: 1px solid var(--line-2); box-shadow: 0 -14px 30px -10px rgba(0,0,0,.8); }
  .betpanel { grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto 48px 60px; grid-template-areas: "chips chips" "field cash" "bet bet"; gap: 8px; }
  .chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: auto; justify-items: center; }
  .chip { width: 100%; max-width: 52px; height: auto; aspect-ratio: 1; font-size: 13px; box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.1); }
  .chip.half, .chip.all { font-size: 11px; } .chip.clear { font-size: 11px; }
  .chip kbd { display: none; }
  .betfield { padding: 3px 10px; }
  .betfield input { font-size: 20px; min-height: 24px; }
  .betfield small { display: none; }
  .btn.act { padding: 4px 10px; }
  .btn.act b { font-size: 16px; }
  .rollpanel { min-height: 0; } .keys { display: none; }
  .rollrow { gap: 8px; }
  .btn.roll { width: 100%; height: 60px; } .btn.roll b { font-size: 24px; }
  /* the die's button says what it is on a phone too (there is no hover to ask): the die at the left, two lines beside it */
  .dieBtn { width: 112px; height: 60px; border-radius: 16px; flex-direction: row; gap: 7px; padding: 4px 8px; } .dieBtn .dieFace { width: 22px; height: 22px; }
  .dieTxt { align-items: flex-start; } .dieBtn b { font-size: 11.5px; } .dieBtn small { font-size: 9.5px; text-align: left; }
  .dieToken { top: 0; right: auto; left: 54px; } .dieToken .dieFace { width: 15px; height: 15px; }
  body[data-screen="screenTable"] .toasts { top: auto; bottom: calc(var(--barh, 92px) + 10px); }
  .modes, .ways { grid-template-columns: 1fr; }
  .heroTop { gap: 12px; } .heroTop .portrait { width: 72px; height: 72px; }
  .strip { gap: 6px; padding: 8px; } .strip li { padding: 5px 7px; } .strip li b { font-size: 11px; } .strip .arrow { width: 10px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .tracker.big { grid-template-columns: repeat(15, minmax(0, 22px)); gap: 3px; width: 100%; justify-content: center; }
}
/* a short phone (360x640): one line for Grix, so the row of duels stays above the taller stake bar */
@media (max-width: 720px) and (max-height: 700px) {
  .screen.table { --say-h: 30px; }
  .sayslot .bubble { -webkit-line-clamp: 1; line-clamp: 1; }
}
/* a phone with little height (a small one with the browser's bars showing): one line for Grix and a smaller number, so the
   stake still shows above the taller stake bar */
@media (max-width: 720px) and (max-height: 540px) {
  .screen.table { --say-h: 30px; --numh: 50px; --numrow: 54px; --face: 44px; }
  .sayslot .bubble { -webkit-line-clamp: 1; line-clamp: 1; }
  .top .wrap { padding: 6px 0; }
}
@media (max-width: 700px) { .crumb { display: none; } }
@media (max-width: 600px) { .brand span { display: none; } }
@media (max-width: 480px) {
  .win-actions { flex-direction: column; } .win-actions .btn { width: 100%; }
  .over-actions { flex-wrap: nowrap; } .over-actions .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  .openRun .win-actions { flex-direction: row; } .openRun .win-actions .btn { width: auto; }
  .intro { flex-direction: column; align-items: center; text-align: center; } .intro .hname { justify-content: center; }
  .bests { gap: 6px; } .best .v { font-size: 16px; }
  .rangefield { grid-template-columns: auto 1fr auto; } .rangefield .mini-btn { grid-column: 2 / -1; justify-self: start; }
  .top .wrap { padding: 10px 0; }
}
@media (max-width: 420px) {
  .top-actions { gap: 4px; } .icon-btn { width: 36px; height: 36px; } .login-link { height: 36px; padding: 0 10px 0 9px; gap: 6px; border-radius: 11px; font-size: 13px; } .ic.discord { width: 18px; height: 18px; } .user-btn { height: 36px; border-radius: 11px; } .user-btn .avatar { width: 26px; height: 26px; }
  .dlg { padding: 24px 18px 18px; }
  .brow { gap: 8px; grid-template-columns: 26px 28px minmax(0, 1fr) auto; padding: 6px 8px; } .brow .rank { width: 26px; height: 26px; font-size: 12px; } .brow .avatar { width: 28px; height: 28px; } .brow .val b { font-size: 15px; } .brow .who small { white-space: normal; }
  .stats dd { font-size: 16px; }
  .seg span small { display: none; }
}
@media (max-width: 374px) {
  .login-link { width: 36px; padding: 0; justify-content: center; } .login-link span { display: none; }
  .screen.table { --face: 44px; }
  .tablebar { gap: 6px 8px; } .duelTag { font-size: 12.5px; } .tablebar .mini-btn { padding: 6px 9px; } .tablebar .lg { display: none; }
  .chips { gap: 4px; } .chip { font-size: 12px; } .chip.half, .chip.all, .chip.clear { font-size: 10px; }
}
@media (hover: none) and (pointer: coarse) { .chip kbd { display: none; } .keys { visibility: hidden; } }