/* Domain Duel — folderol.co/duel. Gameplay from the booth prototype (reference/sigma_game.html),
   dressed in the main site's design: the same nav and footer, navy-black ground, the pink→blue brand
   gradient, Bricolage Grotesque headings, Manrope body, JetBrains Mono labels and the Tools page's
   PASS / WARN / FAIL colours.
   Mobile first: attendees play from a QR on their phone; the booth TV uses ?mode=board.
   Animations only touch opacity/transform so nothing shifts while the result reveals. */

/* JetBrains Mono 600/700 for the reels and readouts (the site's fonts.css ships 400/500) */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/duel-jetbrains-mono-600.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/duel-jetbrains-mono-700.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}

:root{
  --ground:#10131E;
  --fg:#fff;--fg2:rgba(255,255,255,.66);--muted:rgba(255,255,255,.55);--dim:rgba(255,255,255,.42);
  --line:rgba(100,153,255,.16);--line2:rgba(100,153,255,.3);
  --card:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005));
  --field:rgba(255,255,255,.04);
  --blue:#6499FF;--blue-soft:#9BB8FF;
  /* brand gradient for fills and big words; the CTA variant has deeper ends so white text clears AA */
  --grad:linear-gradient(95deg,#E95667,#BF58BB 44%,#5C59D4 76%,#6499FF);
  --grad-text:linear-gradient(95deg,#E95667,#BF58BB 45%,#6499FF);
  --grad-cta:linear-gradient(95deg,#D33F54 0%,#A8459E 44%,#5C59D4 72%,#4A57C0 100%);
  --pass:#22D3A8;--pass-fg:#7BE8C9;--warn:#FFB347;--warn-fg:#FFD08A;--fail:#E95667;--fail-fg:#FF9DA8;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --pad:clamp(20px,5vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--ground);color-scheme:dark;scroll-padding-top:96px;-webkit-tap-highlight-color:rgba(100,153,255,.18)} /* dark native controls; the sticky nav never covers a focus target */
a,button,input,select,textarea,label,[role="button"]{touch-action:manipulation}
body{margin:0;min-height:100vh;color:var(--fg);font:16px/1.5 var(--sans);overflow-x:clip;background-color:var(--ground);
  background-image:radial-gradient(820px 520px at 88% -60px,rgba(92,89,212,.2),transparent 60%),radial-gradient(760px 560px at -8% 42%,rgba(233,86,103,.07),transparent 60%),
    linear-gradient(180deg,#0b0e16 0%,#0f1320 22%,#0c0f19 46%,#0f1320 70%,#0a0d15 100%)}
::selection{background:#6499FF;color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
a{color:var(--blue-soft)}
h1,h2,h3{font-family:var(--display)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ground);padding:8px 12px;border-radius:8px;z-index:60}
.skip:focus{left:8px}

/* ---------- site nav (same as the main site) ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(16,19,30,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(100,153,255,.12)}
.nav-in{position:relative;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad)}
.logo{display:inline-flex;align-items:center;gap:11px}
.logo-word{font:700 19px/1 var(--sans);letter-spacing:-.015em;color:#fff;text-decoration:none}
.logo-by{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;opacity:.72;text-decoration:none}
.logo-by span{font:500 12px var(--sans);color:rgba(255,255,255,.5)}
.logo-by img{display:block;height:15px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:600}
.navlink{color:rgba(255,255,255,.7);text-decoration:none;transition:color .18s}
.navlink:hover,.navlink.is-current{color:#fff}
.nav-cta{padding:12px 24px;border-radius:12px;background:var(--grad-cta);color:#fff;text-decoration:none;white-space:nowrap}
.btn-grad{transition:transform .18s,box-shadow .18s}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(191,88,187,.6)}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;cursor:pointer;font-size:18px}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .nav-links.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#0f1320;border-bottom:1px solid rgba(100,153,255,.16);padding:8px var(--pad) 22px}
  .nav-links.is-open a{padding:14px 0;border-bottom:1px solid rgba(100,153,255,.1)}
  .nav-links.is-open .nav-cta{margin-top:16px;padding:14px 24px;text-align:center;border-bottom:0}
}

/* ---------- game shell ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad) 80px}
/* viewport-fit=cover: content stays clear of the notch in landscape */
.wrap,.nav-in,.site-foot-in{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.gamebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;margin:0;font-size:14px;font-weight:500;color:var(--dim)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .18s}
.crumbs a:hover{color:#fff}
.crumbs b{color:#fff;font-weight:600}
.crumb-tag{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);border:1px solid var(--line2);border-radius:999px;padding:3px 9px;margin-left:4px}
@media(max-width:480px){.crumb-tag{display:none}}
.restart{appearance:none;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font:600 13.5px var(--sans);padding:8px 14px;min-height:38px;cursor:pointer;white-space:nowrap;transition:border-color .18s}
.restart:hover{border-color:var(--blue)}

.screen{position:relative;isolation:isolate}
.is-shared #s-form,.is-board #s-form{display:none}
.stage{margin:40px 0 22px;line-height:1.6;font:500 13px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.stage::before{content:"";display:inline-block;width:32px;height:1px;margin-right:12px;vertical-align:.3em;background:rgba(100,153,255,.55)}
h1{font-weight:800;font-size:clamp(38px,7.4vw,66px);line-height:1;letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance;overflow-wrap:break-word}
h1 em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
#s-form .lede{max-width:600px;text-shadow:0 2px 18px rgba(8,10,17,.85)} /* stays clear of the dice, like the site's hero lede over its art */
.lede{color:rgba(255,255,255,.64);font-size:clamp(16px,2vw,20px);line-height:1.5;max-width:640px;margin:0 0 34px;text-wrap:pretty}
h3{font-weight:700;font-size:21px;letter-spacing:-.015em;margin:0 0 8px}
.accent{color:var(--blue)}
/* accents in running text (the main site's vocabulary): one gradient phrase, brighter key phrases, DNS values as code */
.hl{color:#fff;font-weight:600}
.hl-grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
code.fix{padding:0 .32em;border-radius:6px;border:1px solid rgba(100,153,255,.24);background:rgba(100,153,255,.1);color:var(--blue-soft);font:500 .9em var(--mono);white-space:nowrap}
.hl-brush{padding:.06em .28em .12em;color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:url(/assets/img/brush.png) center 54%/100% 100% no-repeat}

/* engraved dice behind the stage 01 heading, as on the site's page heroes (cut out, so only a soft fade toward the text) */
.hero-art{position:absolute;z-index:-1;pointer-events:none;top:-10px;right:-40px;width:min(560px,70vw);height:auto;opacity:.62;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 38%);mask-image:linear-gradient(100deg,transparent 0%,#000 38%)}
@media(max-width:700px){.hero-art{top:2px;right:-8px;width:58vw;opacity:.38}}

/* ---------- 01 / guess ---------- */
.card{border:1px solid rgba(100,153,255,.18);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));padding:clamp(20px,4vw,40px)}
.grid{display:grid;gap:20px 22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid .full{grid-column:1/-1}}
.field{min-width:0}
.lab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lab .opt{color:var(--dim);text-transform:none;letter-spacing:.02em}
.lab.sub{margin-top:24px}
input[type=text],input[type=number],input[type=email]{width:100%;min-width:0;padding:16px 18px;border-radius:12px;border:1px solid var(--line2);background:var(--field);color:#fff;font:500 16px var(--mono);outline:none;appearance:none;-moz-appearance:textfield;transition:border-color .15s,box-shadow .15s}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input::placeholder{color:rgba(255,255,255,.5)}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(100,153,255,.18)}
input[aria-invalid=true]{border-color:var(--fail);box-shadow:0 0 0 3px rgba(233,86,103,.18)}
.unit{position:relative}
.unit input{padding-right:70px}
.unit::after{content:attr(data-unit);position:absolute;right:16px;top:50%;transform:translateY(-50%);font:12px var(--mono);color:var(--dim);pointer-events:none}

/* segmented choices — the site's audit-form toggle */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:14px;border:1px solid rgba(100,153,255,.2);background:var(--field)}
.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg button{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.65);font:700 15px var(--sans);padding:11px 6px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;min-width:0;transition:background .15s,color .15s}
.seg button:hover{color:#fff;background:rgba(255,255,255,.04)}
.seg button small{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75;text-align:center}
.seg button[aria-pressed=true]{background:var(--grad-cta);color:#fff}
.seg button[aria-pressed=true] small{opacity:.9}
.hint{font-size:13.5px;color:var(--dim);margin:8px 0 0}
.err{color:var(--fail-fg);font-size:14px;margin:6px 0 0}
.err:empty{display:none}

.guess{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.guess .big{font:800 56px/1 var(--sans);letter-spacing:-.03em;min-width:3ch;text-align:center;font-variant-numeric:tabular-nums;
  background:linear-gradient(95deg,#E95667,#6499FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.guess input[type=range]{flex:1 1 220px;min-width:0}
.nudge{appearance:none;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--field);color:#fff;font:600 22px var(--sans);cursor:pointer;transition:border-color .15s}
.nudge:hover{border-color:var(--blue)}

/* sliders — the site's range style, with a thumb big enough for a thumb */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(100,153,255,.2)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(100,153,255,.2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--grad)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border:0;border-radius:50%;background:linear-gradient(135deg,#E95667,#6499FF);box-shadow:0 0 0 4px rgba(100,153,255,.16),0 6px 16px -6px rgba(191,88,187,.8)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:linear-gradient(135deg,#E95667,#6499FF);box-shadow:0 0 0 4px rgba(100,153,255,.16),0 6px 16px -6px rgba(191,88,187,.8)}
input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* buttons — the site's gradient CTA and outline button */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:17px 30px;border-radius:14px;background:var(--grad-cta);color:#fff;font:700 17px var(--sans);text-decoration:none;
  box-shadow:0 16px 40px -16px rgba(191,88,187,.6);transition:transform .18s,box-shadow .18s,filter .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(191,88,187,.75);filter:brightness(1.06)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.32);box-shadow:none;font-weight:600}
.btn.ghost:hover{border-color:rgba(255,255,255,.62);filter:none;box-shadow:none}
.btn-sm{font-size:15px;padding:13px 20px;min-height:46px;margin-top:20px}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.actions .hint{margin:0;font:11px var(--mono);letter-spacing:.04em;color:rgba(255,255,255,.4)}
.link{appearance:none;background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;text-decoration:underline;padding:0;margin-left:14px}

/* ---------- 02 / scan ---------- */
#s-scan{min-height:100vh;min-height:100svh} /* keeps the footer below the fold, so it can't jump when the long result replaces this screen */
#s-scan .scan{margin-top:clamp(8px,3vh,40px)}
.scan-live{min-height:1.5em;margin:16px 0 0;font:500 12px var(--mono);letter-spacing:.08em;color:var(--muted)}
.scan-live b{color:var(--pass-fg);font-weight:600}
.scan{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:760px){.scan{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.radar{position:relative;aspect-ratio:1;max-width:clamp(280px,32vw,440px);width:100%;margin:0 auto;border-radius:50%;border:1px solid rgba(100,153,255,.22);background:radial-gradient(circle,rgba(92,89,212,.24),transparent 70%)}
.radar::before,.radar::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(100,153,255,.14)}
.radar::after{inset:36%}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(100,153,255,0) 0deg 240deg,rgba(92,89,212,.16) 300deg,rgba(191,88,187,.32) 340deg,rgba(233,86,103,.62) 360deg);animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.radar .dom{position:absolute;inset:0;display:grid;place-items:center;padding:22%;font:500 clamp(14px,3.6vw,20px) var(--mono);text-align:center;overflow-wrap:anywhere}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);font:13.5px var(--mono);color:var(--dim);transition:color .3s,border-color .3s}
.steps li .st{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:11px}
.steps li.run{color:#fff;border-color:rgba(100,153,255,.5)}
.steps li.run .st{border-color:var(--blue);animation:pulse 1s infinite}
.steps li.done{color:#fff}
.steps li.done .st{background:var(--pass);border-color:var(--pass);color:#06251a}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(100,153,255,.18)}}

/* ---------- 03 / cash out ---------- */
.res-head{margin:0 0 4px}
.res-art{position:absolute;z-index:-1;top:-36px;right:-70px;width:min(560px,62vw);height:auto;opacity:.17;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent);mask-image:radial-gradient(closest-side,#000 52%,transparent)}
@media(max-width:640px){.res-art{top:24px;right:-34vw;width:86vw;opacity:.11}}
.res-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag{margin:0;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tag b{color:var(--blue-soft);font-weight:500}
.res-dom{margin:14px 0 0;font:500 clamp(18px,3.6vw,30px)/1.15 var(--mono);letter-spacing:-.01em;color:var(--blue-soft);overflow-wrap:anywhere}
.headline{font-size:clamp(32px,5.6vw,56px);margin:10px 0 0;outline:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(100,153,255,.25);background:rgba(255,255,255,.03);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--pass);box-shadow:0 0 10px var(--pass)}
.pill.pre .dot{background:var(--blue);box-shadow:0 0 10px var(--blue)}
.pill.demo .dot{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.pill.off{visibility:hidden} /* keeps its space: showing it later must not shift anything */
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reel{min-width:0;padding:10px 10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-align:center;transition:border-color .3s,background-color .3s}
.reel .rl{font:500 10.5px var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.reel .win{position:relative;height:40px;overflow:hidden;margin-top:8px;border-radius:10px;background:var(--field)}
.reel .strip{display:flex;flex-direction:column;will-change:transform}
.reel .strip span{height:40px;flex:none;display:grid;place-items:center;font:700 18px var(--mono);letter-spacing:.08em;color:var(--dim)}
.reel.spin .strip{animation:reel .32s linear infinite}
@keyframes reel{to{transform:translateY(-120px)}}
.reel.locked .strip span{color:inherit}
.reel.locked .rl{color:inherit;opacity:.85}
.reel.PASS{color:var(--pass-fg);border-color:rgba(34,211,168,.45);background:rgba(34,211,168,.05)}
.reel.WARN{color:var(--warn-fg);border-color:rgba(255,179,71,.45);background:rgba(255,179,71,.05)}
.reel.FAIL{color:var(--fail-fg);border-color:rgba(233,86,103,.5);background:rgba(233,86,103,.06)}
@media(min-width:640px){.score .reel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;text-align:left}.score .reel .win{flex:0 0 92px;margin:0}}

/* the duel scoreboard: your call against what Lens says, the gap between them, one ruler */
.score{position:relative;margin:26px 0 0;padding:clamp(18px,3vw,32px);border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--card);box-shadow:0 30px 70px -44px rgba(76,107,255,.6);scroll-margin-top:104px}
.score-top{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"you lens" "verdict verdict";gap:4px 16px;align-items:end}
@media(min-width:640px){.score-top{grid-template-columns:1fr auto 1fr;grid-template-areas:"you verdict lens"}}
.score .duelist .k{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.score .duelist .n{margin-top:8px;font:800 clamp(66px,12.5vw,124px)/.86 var(--sans);letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.score .duelist .n small{margin-left:4px;font:500 clamp(13px,1.6vw,16px) var(--mono);letter-spacing:0;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.score .you{grid-area:you}
.score .lens{grid-area:lens;text-align:right}
.score .lens .n{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.score .verdict{grid-area:verdict;min-width:0;padding:14px 0 0}
@media(min-width:640px){.score .verdict{max-width:24ch;padding:0 0 6px;text-align:center}}
.score .verdict .n{font:800 clamp(24px,3vw,32px)/1.05 var(--display);letter-spacing:-.025em;color:#fff}
.score .verdict .s{min-height:2.8em;margin-top:6px;font-size:14px;line-height:1.4;color:var(--fg2)} /* two lines reserved: the reveal never shifts the page */
.score.win .verdict .n{width:fit-content;margin-inline:auto;background:linear-gradient(95deg,#22D3A8,#6499FF);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:639px){.score.win .verdict .n{margin-inline:0}}
.ruler{position:relative;height:10px;margin:40px 0 0;border-radius:999px;background:rgba(100,153,255,.14)}
.ruler .fill{position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:.5;transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.ruler .span{position:absolute;top:-4px;bottom:-4px;border-radius:999px;opacity:0;transition:opacity .5s .15s;background:rgba(255,179,71,.28);box-shadow:inset 0 0 0 1px rgba(255,179,71,.7)}
.score.win .ruler .span{background:rgba(34,211,168,.28);box-shadow:inset 0 0 0 1px rgba(34,211,168,.75)}
.score.revealed .ruler .span{opacity:1}
.ruler .pin{position:absolute;top:50%;z-index:1;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid #10131E}
.ruler .pin::after{content:attr(data-l);position:absolute;left:50%;transform:translateX(-50%);font:600 10px var(--mono);letter-spacing:.14em;color:var(--fg2);white-space:nowrap}
.ruler .pin.you{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 18px rgba(255,255,255,.35)}
.ruler .pin.you::after{bottom:24px}
.lensbox{position:absolute;inset:0;transform:translateX(-100%);transition:transform 1.3s cubic-bezier(.2,.8,.2,1);pointer-events:none} /* moves with transform only */
.lensbox .pin{left:100%;background:linear-gradient(135deg,#E95667,#6499FF);box-shadow:0 0 0 2px rgba(155,184,255,.35),0 0 18px rgba(100,153,255,.5)}
.lensbox .pin::after{top:24px}
.score .reels{margin-top:46px}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 0;scroll-margin-top:104px} /* clears the sticky nav */
.duel .wide{grid-column:1/-1}
@media(min-width:640px){.duel{grid-template-columns:repeat(3,minmax(0,1fr))}.duel .wide{grid-column:auto}}
.tile{min-width:0;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.tile .k,.rtp-tile .k,.money .k,.jackpot .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tile .n{margin-top:10px;font:800 clamp(28px,5vw,42px)/1.05 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .s{margin-top:6px;font-size:13.5px;color:var(--muted)}
.tile.win{border-color:rgba(34,211,168,.4);background:rgba(34,211,168,.08)}
.tile.win .n{background:linear-gradient(95deg,#22D3A8,#6499FF);-webkit-background-clip:text;background-clip:text;color:transparent}

section.block{margin-top:48px}
.act{margin:84px 0 0;font:600 clamp(42px,6vw,64px)/1.08 'Cormorant Garamond',Georgia,serif;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.act em{display:inline-block;padding:0 .08em .12em 0;font-style:italic;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.act + section.block{margin-top:28px}
section.block h2{margin:0 0 16px;line-height:1.6;font:500 13px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
section.block h2::before{content:"";display:inline-block;width:32px;height:1px;margin-right:12px;vertical-align:.3em;background:rgba(100,153,255,.5)}

.tier{display:flex;align-items:center;gap:20px;margin-top:12px;padding:18px 22px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.tier-body{flex:1 1 260px;min-width:0}
.tier-k{margin:0 0 6px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tier-k span{color:var(--fg2)}
.tier-name{font:800 clamp(26px,3.4vw,34px)/1.05 var(--display);letter-spacing:-.025em}
.tier-next{margin:4px 0 0;color:var(--fg2);font-size:15px}
/* the tier as a slot line: three reel cells, drum shading over the symbols, a payline once a winning line lands */
.tier{flex-wrap:wrap}
.slot{position:relative;flex:none;display:grid;grid-template-columns:repeat(3,64px);gap:6px;padding:8px;border-radius:16px;
  background:linear-gradient(180deg,#232a52,#141a33);border:1px solid rgba(124,127,240,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px -14px rgba(92,89,212,.7)}
.slot-cell{position:relative;height:78px;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#1d2347,#0a0d1a 78%);
  box-shadow:inset 0 0 0 1px rgba(124,127,240,.28);transition:box-shadow .4s}
.slot-cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 12px 14px -8px rgba(0,0,0,.9),inset 0 -12px 14px -8px rgba(0,0,0,.9)}
.slot-strip{display:flex;flex-direction:column;will-change:transform} /* flex: the symbols' margins don't collapse, so every row is exactly 78px */
.slot-strip img{display:block;width:56px;height:56px;margin:11px auto;filter:drop-shadow(0 4px 10px rgba(124,127,240,.45))}
.payline{position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;border-radius:2px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,transparent,#7BE8C9 12%,#7BE8C9 88%,transparent);box-shadow:0 0 12px #22D3A8}
.slot.win.landed .payline{opacity:1}
.slot.win.landed .slot-cell{box-shadow:inset 0 0 0 1px rgba(34,211,168,.55)}
.slot.near.landed .slot-cell:nth-child(-n+2){box-shadow:inset 0 0 0 1px rgba(255,179,71,.6)}
.slot.bust.landed .slot-cell{box-shadow:inset 0 0 0 1px rgba(233,86,103,.4)}
.tier.t-jackpot .tier-name{width:fit-content;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier.t-big-win .tier-name{color:var(--pass-fg)}.tier.t-near-miss .tier-name{color:var(--warn-fg)}.tier.t-bust .tier-name{color:var(--fail-fg)}
.tier .tier-next{color:var(--fg2)}

/* Layer 1: one list, the verdict chip at the end of each row (no box around every row, no status dots) */
.sig{display:grid;border-radius:20px;border:1px solid var(--line);background:var(--card);overflow:hidden}
.sig .row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t badge" "d d";gap:6px 14px;align-items:center;padding:16px 20px;border-top:1px solid rgba(100,153,255,.1)}
.sig .row:first-child{border-top:0}
@media(min-width:720px){.sig .row{grid-template-columns:minmax(150px,.8fr) minmax(0,2fr) auto;grid-template-areas:"t d badge";padding:18px 22px}}
.badge{grid-area:badge;padding:4px 9px;border-radius:7px;text-align:center;font:700 10.5px var(--mono);letter-spacing:.08em}
.badge.PASS{background:rgba(34,211,168,.16);color:var(--pass-fg)}
.badge.WARN{background:rgba(255,179,71,.16);color:var(--warn-fg)}
.badge.FAIL{background:rgba(233,86,103,.18);color:var(--fail-fg)}
.sig .t{grid-area:t;font-weight:700}
.sig .d{grid-area:d;font-size:14px;line-height:1.45;color:var(--fg2)}

.rtp{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.rtp{grid-template-columns:1fr 1fr}}
.rtp-tile{padding:22px 24px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.rtp-tile .n{margin:12px 0 10px;font:800 clamp(38px,7vw,56px)/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.rtp-tile .s{font-size:14px;color:var(--muted)}
.rtp-tile .s b{color:var(--pass-fg)}
.rtp-tile.edge{border-color:rgba(233,86,103,.35);background:rgba(233,86,103,.08)}
.rtp-tile.edge .n{color:var(--fail-fg)}

.placeholder-flag{display:inline-block;margin:0 0 14px;padding:5px 10px;border:1px dashed rgba(255,179,71,.6);border-radius:8px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn-fg)}
.bench{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.bench{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bar{min-width:0;padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.bar h3{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 16px;font-size:17px}
.bar h3 span{font:500 11.5px var(--mono);color:var(--muted)}
.track{position:relative;height:38px;margin:0 8px 34px 0;border-radius:10px;background:var(--field)}
.track .you{position:absolute;left:0;top:0;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--grad);border-radius:10px;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.track .yl{position:absolute;top:50%;transform:translateY(-50%);padding:0 8px;font:700 13px var(--mono);color:#fff;white-space:nowrap}
.track .mk{position:absolute;top:-8px;height:54px;width:2px;background:#fff;opacity:.9}
.track .mk::after{content:attr(data-l);position:absolute;top:56px;left:50%;transform:translateX(-50%);font:500 9.5px var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.track .mk.med{background:var(--warn)}.track .mk.top{background:var(--pass)}
.bar .gap{margin:0;font-size:14px;color:var(--fg2)}
.bar .gap b{color:#fff}

/* side bet — a sealed card in the money block's place, with the same featured border */
.bet{padding:clamp(20px,3.4vw,36px);border-radius:22px;border:1.5px solid transparent;
  background:linear-gradient(#12192B,#12192B) padding-box,linear-gradient(135deg,#E95667,#BF58BB 45%,#5C59D4 75%,#6499FF) border-box;box-shadow:0 30px 60px -30px rgba(76,107,255,.5)}
.bet-k{margin:0 0 12px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft)}
.bet-q{max-width:30ch;margin:0 0 10px;font-size:clamp(22px,3.2vw,30px);line-height:1.12;letter-spacing:-.025em}
.bet-s{max-width:62ch;margin:0 0 22px;font-size:14.5px;color:var(--fg2)}
.chips{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.chips{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:759px){.chips button:last-child:nth-child(odd){grid-column:1/-1}}
.chips button{appearance:none;min-height:58px;padding:12px 10px;border-radius:14px;border:1px solid var(--line2);background:var(--field);color:#fff;font:800 17px var(--sans);letter-spacing:-.01em;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.chips button:hover{border-color:var(--blue);background:rgba(100,153,255,.08);transform:translateY(-2px)}
.bet-skip{display:inline-block;margin:18px 0 0}
.chips button[aria-pressed=true]{background:var(--grad-cta);border-color:transparent;transform:none}
#betReveal{margin-top:4px}
.nowrap{white-space:nowrap}
/* the side bet on the form: its own optional section under the call */
.sidebet{margin-top:6px;padding-top:24px;border-top:1px dashed rgba(100,153,255,.22)}
.sb-q{margin:0 0 14px;font:700 clamp(17px,2.2vw,20px)/1.3 var(--display);letter-spacing:-.015em}
.bet-res{display:block;width:fit-content;max-width:100%;margin:0 0 16px;padding:8px 14px;border-radius:10px;font:600 14px/1.4 var(--sans)}
.bet-res.hit{border:1px solid rgba(34,211,168,.45);background:rgba(34,211,168,.12);color:var(--pass-fg)}
.bet-res.miss{border:1px solid rgba(255,179,71,.4);background:rgba(255,179,71,.1);color:var(--warn-fg)}
.bet-mark{display:inline-grid;place-items:center;width:1.35em;height:1.35em;margin-left:.45em;border-radius:50%;background:rgba(34,211,168,.2);color:var(--pass-fg);font-size:.8em;font-weight:700;vertical-align:.08em}
.lb-legend{caption-side:bottom;padding:10px 14px;text-align:left;font:11.5px var(--mono);letter-spacing:.04em;color:var(--muted)}
.lb-legend .bet-mark{margin:0 6px 0 0}

/* unclaimed winnings — the site's featured card (gradient border) */
.money{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;padding:clamp(20px,3.4vw,36px);border-radius:22px;border:1.5px solid transparent;
  background:linear-gradient(#12192B,#12192B) padding-box,linear-gradient(135deg,#E95667,#BF58BB 45%,#5C59D4 75%,#6499FF) border-box;box-shadow:0 30px 60px -30px rgba(76,107,255,.5)}
@media(min-width:760px){.money{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.money .n{margin:12px 0 10px;font:800 clamp(44px,10vw,76px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(95deg,#E95667,#5C59D4 60%,#6499FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.money .s{max-width:48ch;margin:0;font-size:14.5px;color:var(--fg2)}
.side{display:grid;gap:12px;margin:0}
.side div{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(100,153,255,.14);font:12.5px var(--mono);color:var(--muted)}
.side dt{min-width:0}
.side dd{margin:0;color:#fff;font-weight:600;text-align:right}
.vpc{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.vpc .lab{margin:0}
.vpc input[type=range]{flex:1;min-width:140px}
.vpc .v{min-width:5ch;font:600 14px var(--mono)}

/* badges: engraved casino chips (duel/badges/<slug>.webp), flipped in as they scroll into view */
.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.badges li{display:flex;align-items:center;gap:16px;flex:1 1 280px;padding:14px 20px 14px 14px;border-radius:20px;border:1px solid var(--line);
  background:radial-gradient(110px 110px at 54px 50%,rgba(124,127,240,.18),transparent 70%),var(--card)}
.badges li:only-child{max-width:640px} /* the row is always full: two badges share it, a lone one stays card-sized */
.badges img{flex:none;display:block;width:80px;height:80px;filter:drop-shadow(0 10px 18px rgba(92,89,212,.45))}
.badges b{display:block;margin-bottom:4px;font:700 18px/1.2 var(--display);letter-spacing:-.015em;color:#fff}
.badges span{display:block;font-size:14px;line-height:1.4;color:var(--fg2)}
@keyframes chipIn{from{opacity:0;transform:perspective(400px) rotateY(110deg) scale(.7)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.badges img{animation:chipIn linear both;animation-timeline:view();animation-range:entry 10% entry 90%}}
@media(prefers-reduced-motion:reduce){.badges img{animation:none!important}}

.capture{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.capture{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.cap-tg[hidden]+.cap-mail{grid-column:1/-1}}
.cap-tg,.cap-mail{min-width:0;padding:22px 24px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.cap-tg p,.cap-mail p{margin:0 0 14px;font-size:14.5px;color:var(--fg2)}
.cap-tg .err:empty{display:none}
.btn-tg.off{opacity:.5;box-shadow:none;cursor:not-allowed}
.tg-logged{margin:12px 0 0!important;color:var(--pass-fg)!important;font-size:14px}
.team-tag{color:var(--pass-fg);border-color:rgba(34,211,168,.45)}
.mail-row{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* share in Telegram: Telegram's own blue, so the button is recognised at a glance */
.btn-tg{background:linear-gradient(180deg,#2AABEE,#229ED9);color:#fff;text-decoration:none}
.btn-tg{box-shadow:0 16px 40px -16px rgba(42,171,238,.65)}
.btn-tg:hover{box-shadow:0 18px 36px -16px rgba(42,171,238,.8)}
.btn-tg svg{width:20px;height:20px;flex:none}

.tablewrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:var(--card)}
table.lb{width:100%;border-collapse:collapse;font:13px var(--mono)}
.lb th,.lb td{padding:12px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid rgba(100,153,255,.1)}
.lb tbody tr:last-child td{border-bottom:0}
.lb td:nth-child(3){max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.lb th{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:480px){.lb th,.lb td{padding:9px 5px;font-size:12px}.lb th{letter-spacing:.06em}.lb td:nth-child(2){max-width:19vw;overflow:hidden;text-overflow:ellipsis}.lb td:nth-child(3){max-width:25vw}.lb .bet-mark{margin-left:.25em}}
@media(max-width:340px){.lb td:nth-child(2){max-width:15vw}.lb td:nth-child(3){max-width:23vw}}
.lb .r{text-align:right;font-variant-numeric:tabular-nums}
.lb tr.me td{color:#fff;background:rgba(100,153,255,.1)}
.lb tr.won td:last-child{color:var(--pass-fg)}
.lb .rv{margin-left:6px;padding:1px 5px;border-radius:5px;border:1px solid var(--line2);font-size:9.5px;letter-spacing:.1em;color:var(--muted)}

.rival{margin:0}
.rival-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;max-height:260px;overflow:auto;overscroll-behavior:contain}
.rival-list:empty{display:none}
.rival-list button{appearance:none;width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:#fff;font:500 14px var(--mono);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.rival-list button:hover,.rival-list button:focus-visible{border-color:var(--blue);outline:none}
.rival-picked{margin:14px 0 10px;color:var(--muted)}
.rival-picked b{color:#fff;font-family:var(--mono);font-weight:500}
#rivalCall .btn{margin-top:18px}
#rivalRes .duel{margin-top:14px}

/* closing CTA — the site's final call to action */
.cta{margin-top:56px;padding:clamp(24px,4.4vw,48px);border-radius:24px;border:1px solid rgba(100,153,255,.2);
  background:radial-gradient(700px 420px at 12% 50%,rgba(92,89,212,.26),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.cta h3{margin:0 0 14px;font-weight:800;font-size:clamp(28px,4.6vw,44px);line-height:1.02;letter-spacing:-.03em}
.cta p{max-width:56ch;margin:0 0 4px;font-size:17px;line-height:1.5;color:var(--fg2)}
.foot{margin-top:40px;padding-top:16px;border-top:1px solid rgba(100,153,255,.12);font-size:12.5px;line-height:1.65;color:var(--dim)}
.foot code{font-family:var(--mono);color:rgba(255,255,255,.6)}

/* staggered reveal: opacity/transform only — every block already holds its space */
.block-in{animation:up .55s both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* read-only shared result: Layer 1 + the duel only */
.shared .private{display:none}

/* ---------- site footer (same as the main site) ---------- */
.site-foot{background:linear-gradient(180deg,transparent,#080a11 55%)}
.site-foot-in{max-width:1280px;margin:0 auto;padding:46px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px 30px;flex-wrap:wrap}
.site-foot .logo-word{font-size:18px;opacity:.9}
.site-foot .logo-by{gap:6px;opacity:.7}
.site-foot .logo-by span{font-size:13px}
.site-foot .logo-by img{height:16px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:14px;font-weight:500}
.foot-links a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .18s}
.foot-links a:hover{color:#fff}
.copy{margin:0;font:12px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.55)}
.copy a{color:rgba(255,255,255,.5);letter-spacing:.04em;text-decoration:none;transition:color .18s}
.copy a:hover{color:#fff}

/* ---------- booth board (?mode=board) ---------- */
body.boardmode .nav-links,body.boardmode .nav-burger,body.boardmode .gamebar,body.boardmode .site-foot{display:none}
@media(min-width:1400px){body.boardmode .wrap{max-width:1320px}}
.board-head .hl-brush{margin-left:-.28em}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.board-qr{display:flex;flex-direction:column;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted)}
.board-qr img{padding:8px;border-radius:14px;background:#fff}
.jackpot{position:relative;isolation:isolate;overflow:hidden;margin:30px 0;padding:clamp(22px,3.4vw,40px);border-radius:24px;border:1px solid rgba(233,86,103,.35);
  background:radial-gradient(800px 420px at 0% 0%,rgba(233,86,103,.16),transparent 60%),rgba(233,86,103,.05)}
.jackpot p{margin:0}
.jackpot .n{margin:12px 0;font:800 clamp(56px,11vw,140px)/1 var(--sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:linear-gradient(95deg,#FF9DA8,#E95667 40%,#BF58BB);-webkit-background-clip:text;background-clip:text;color:transparent}
.jackpot .s{font-size:clamp(15px,2vw,22px);color:var(--fg2)}
.jackpot-art{position:absolute;z-index:-1;right:-30px;top:-40px;height:calc(100% + 80px);width:auto;opacity:.45;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.lb-big{font-size:clamp(14px,2vw,22px)}
.lb-big th{font-size:clamp(10px,1.2vw,13px)}
.lb-big td{padding:clamp(10px,1.4vw,16px) 14px}
.board-foot{display:flex;justify-content:space-between;align-items:center}
/* the top three wear the slot symbols; new calls slide in */
.lb .rk{white-space:nowrap}
.lb .sym{display:inline-block;width:1.7em;height:1.7em;margin:-.35em 0;vertical-align:middle;filter:drop-shadow(0 4px 12px rgba(124,127,240,.5))}
.lb tr.top td{color:#fff}
.lb tr.top1 td{background:rgba(100,153,255,.13)}
.lb tr.top2 td{background:rgba(124,127,240,.08)}
.lb tr.top3 td{background:rgba(233,86,103,.07)}
.lb tr.top1 td:first-child{box-shadow:inset 4px 0 0 #6499FF}
.lb tr.top2 td:first-child{box-shadow:inset 4px 0 0 #9B8CFF}
.lb tr.top3 td:first-child{box-shadow:inset 4px 0 0 #E95667}
.lb tr.new td{animation:rowIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rowIn{from{opacity:0;transform:translateY(-12px);box-shadow:inset 0 0 0 999px rgba(34,211,168,.22)}60%{opacity:1;transform:none}to{box-shadow:inset 0 0 0 999px rgba(34,211,168,0)}}
.jackpot.bump{animation:bump 1.4s ease-out}
@keyframes bump{from{box-shadow:0 0 0 0 rgba(233,86,103,.5)}to{box-shadow:0 0 0 30px rgba(233,86,103,0)}}

/* the booth TV: full width, read from across the stand; on a wide screen the board sits beside the total */
body.boardmode .wrap,body.boardmode .nav-in{max-width:none;padding-inline:clamp(20px,4.5vw,96px)}
body.boardmode #h-board{font-size:clamp(48px,5.4vw,112px)}
body.boardmode .board-qr{flex-direction:row;gap:clamp(16px,1.6vw,32px);color:#fff}
body.boardmode .board-qr img{width:clamp(148px,12vw,260px);height:auto}
body.boardmode .board-qr span{max-width:9ch;font:800 clamp(22px,2.2vw,44px)/1.05 var(--display);letter-spacing:-.02em;text-transform:none}
body.boardmode .lb-big{font-size:clamp(15px,1.45vw,30px)}
body.boardmode .lb-big th{font-size:clamp(10px,.85vw,15px)}
body.boardmode .lb-big td{padding:clamp(12px,1.25vw,26px) clamp(12px,1.3vw,28px)}
body.boardmode .jackpot .s{font-size:clamp(15px,1.45vw,28px)}
@media(min-width:1200px){
  body.boardmode #s-board{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);grid-template-areas:"head table" "jackpot table" "foot table";column-gap:clamp(28px,3.2vw,64px);align-items:start}
  body.boardmode .board-head{grid-area:head;align-items:flex-end}
  body.boardmode .jackpot{grid-area:jackpot;margin:28px 0 0}
  body.boardmode .jackpot .n{font-size:clamp(64px,6.6vw,150px)}
  body.boardmode .tablewrap{grid-area:table;margin-top:8px}
  body.boardmode .board-foot{grid-area:foot}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sweep{animation:none}
}
#benchType{display:inline-block;margin-left:10px;padding:2px 9px;border-radius:999px;border:1px solid rgba(100,153,255,.4);font-size:11px;letter-spacing:.14em;vertical-align:.1em}