/* the title font is the site's own copy (1 Nov 2026), like the home page: no wait on Google, the same widths everywhere */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/big-shoulders-display-700.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/big-shoulders-display-800.woff2) format('woff2')}

/* =====================================================================
   Dabzilla420 HQ — v11 polish
   One consolidated stylesheet (replaces the layered "final pass" overrides).
   Palette stays: deep navy + cyan (brand), lime (live), gold (rank),
   mint/violet (Thrill). Oxanium for display, Manrope for reading.
   ===================================================================== */
:root{
  color-scheme:dark;
  --bg:#1f3068; --bg-2:#1f3275;
  --surface:#22347a; --surface-2:#243981; --raised:#263a89;
  --line:#aac4ff1f; --line-2:#aac4ff38; --line-3:#aac4ff5c;
  --cyan:#3fd2ff; --cyan-2:#95e8ff; --blue:#1a8fd0;
  --lime:#a3f04a; --gold:#f5c04a; --warn:#ffd36b; --red:#ff3348;
  --text:#f3f6ff; --text-2:#c5cee6; --muted:#aab4d2; --faint:#7d89aa;
  --mint:#5cffc1; --violet:#8b5cff; --ink:#0a0b14;
  --r-xl:6px; --r-lg:5px; --r-md:4px; --r-sm:3px;
  --font-display:'Oxanium','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-1:0 1px 0 #ffffff0d inset,0 14px 34px #00000045;
  --shadow-2:0 1px 0 #ffffff12 inset,0 28px 70px #0000006e;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:#356e9a #1e2e6f;scrollbar-width:thin;scroll-padding-top:96px}
body{margin:0;min-height:100vh;color:var(--text);font:400 15px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(60% 38% at 92% 100%,#1796dd1c,transparent 70%),radial-gradient(circle at 50% -20%,#216fa9 0,#1f3275 38%,var(--bg) 78%) ,var(--bg)}
::selection{background:#3fd2ff5c;color:#fff}
h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.15;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img{max-width:100%}
code{font-family:var(--font-mono);font-size:.9em;color:#aeeaff;background:#3fd2ff14;padding:.15em .45em;border-radius:3px}
.muted{color:var(--muted)}
.i{width:1.15em;height:1.15em;flex:none}
:where(a,button,summary,input,select,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:4px;background:#fff;color:#04182a;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:14px}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:40;background:#1f3073ec;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line);transition:box-shadow .25s,background .25s}
.topbar.scrolled{background:#1f3171f7;box-shadow:0 12px 30px #0006}
.nav{max-width:1160px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:22px;transition:padding .25s var(--ease)}
.brand{display:flex;align-items:center;flex:none;border-radius:4px}
.brandLogo{display:block;height:62px;width:auto;filter:drop-shadow(0 4px 10px #0007);transition:height .25s var(--ease)}
.navToggle{display:none;flex:none;width:44px;height:44px;padding:0;place-items:center;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:#fff;cursor:pointer}
.bars{position:relative;display:block;width:18px;height:12px}
.bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),opacity .2s,top .25s var(--ease)}
.bars i:nth-child(1){top:0}.bars i:nth-child(2){top:5px}.bars i:nth-child(3){top:10px}
.navToggle[aria-expanded="true"] .bars i:nth-child(1){top:5px;transform:rotate(45deg)}
.navToggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navToggle[aria-expanded="true"] .bars i:nth-child(3){top:5px;transform:rotate(-45deg)}


/* ---------- Surfaces ---------- */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,#243985 0%,#22367b 55%,#1f3378 100%);box-shadow:var(--shadow-1)}
.accent{overflow:hidden}
.accent::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:var(--accent,var(--gold));box-shadow:0 0 14px var(--accent,var(--gold))}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:5px;color:#fff;font:700 15px/1 var(--font-display);letter-spacing:.2px;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),box-shadow .2s,background .2s,border-color .2s,filter .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn .i{width:16px;height:16px}
.primary{background:linear-gradient(180deg,#95e8ff,#3fd2ff);color:#04182a;box-shadow:0 1px 0 #ffffff70 inset,0 10px 26px #3fd2ff35}
.primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 1px 0 #ffffff70 inset,0 14px 32px #3fd2ff52}
.secondary{background:#ffffff0c;border-color:var(--line-2)}
.secondary:hover{background:#ffffff17;border-color:var(--line-3)}
.live{background:linear-gradient(180deg,#b9ff8b,#67dc54);color:#072009;box-shadow:0 1px 0 #ffffff70 inset,0 0 0 0 #a3f04a80;animation:pulse 2s infinite}
@keyframes pulse{60%,100%{box-shadow:0 1px 0 #ffffff70 inset,0 0 0 12px #a3f04a00}}
.choice{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff08;color:var(--text-2);font:600 14px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.choice .i{width:14px;height:14px}
.choice:hover{background:#ffffff14;border-color:var(--line-3);color:#fff}
.choice.active{background:#3fd2ff25;border-color:#3fd2ffa6;color:#fff}
.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.viewers{order:3;flex-basis:100%;align-items:center;gap:9px;color:var(--text-2);font-weight:700;font-size:14px}
.viewers i,.refreshDot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--lime);animation:refreshPulse 1.6s infinite}
@keyframes refreshPulse{0%,100%{box-shadow:0 0 0 0 #a3f04a66}50%{box-shadow:0 0 0 6px #a3f04a00}}


.grid{display:grid;gap:18px}
/* =====================================================================
   Cases page, page-specific styles (tokens/header/buttons come from the HQ system)
   ===================================================================== */
html.lock{overflow:hidden}
.r-common{--rc:#9fb2c6;--rc-45:#9fb2c673;--rc-25:#9fb2c640;--rc-12:#9fb2c61f}
.r-uncommon{--rc:#7be05a;--rc-45:#7be05a73;--rc-25:#7be05a40;--rc-12:#7be05a1f}
.r-rare{--rc:#3fc0f0;--rc-45:#3fc0f073;--rc-25:#3fc0f040;--rc-12:#3fc0f01f}
.r-epic{--rc:#9d62ff;--rc-45:#9d62ff73;--rc-25:#9d62ff40;--rc-12:#9d62ff1f}
.r-legendary{--rc:#f4b93a;--rc-45:#f4b93a73;--rc-25:#f4b93a40;--rc-12:#f4b93a1f}
.r-junk{--rc:#b5926a;--rc-45:#b5926a73;--rc-25:#b5926a40;--rc-12:#b5926a1f}
.art{display:block}
.coin{width:24px;height:24px;flex:none}

/* ---------- mockup chrome ---------- */
.mock{background:linear-gradient(90deg,#253983,#23357e);border-bottom:1px solid var(--line);color:var(--text-2);font-size:13px}
.mock>div{max-width:1160px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:12px}
.mock b{padding:3px 9px;border-radius:4px;background:#f5c04a24;border:1px solid #f5c04a55;color:var(--gold);font:700 12px/1.3 var(--font-display)}
.mock button{margin-left:auto;padding:4px 8px;border:0;border-radius:4px;background:none;color:var(--muted);cursor:pointer}
.mock button:hover{color:#fff;background:#ffffff14}
.mockctl{position:fixed;left:16px;bottom:16px;z-index:110;width:264px;border:1px solid var(--line-2);border-radius:5px;background:#1f3073f2;backdrop-filter:blur(14px);box-shadow:0 20px 50px #000a;font-size:13px}
.mockctl summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;list-style:none;cursor:pointer;font:700 13px var(--font-display);color:var(--gold)}
.mockctl summary::-webkit-details-marker{display:none}
.mockctl .body{display:grid;gap:10px;padding:0 14px 14px}
.mockctl .row{display:flex;gap:8px;flex-wrap:wrap}
.mockctl .mkLab{color:var(--gold);font:700 12px var(--font-display);letter-spacing:.4px;text-transform:uppercase}
.mockctl .body{max-height:70vh;overflow:auto}
.mockctl button,.mockctl select{min-height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0b;color:var(--text-2);font:600 12.5px var(--font-body);cursor:pointer}
.mockctl select{background:#1f3172;padding-right:6px}
.mockctl button:hover{background:#ffffff18;color:#fff}
.mockctl label{display:grid;gap:5px;color:var(--muted);font-size:12px}

/* ---------- header wallet ---------- */
.wallet{margin-left:auto;display:flex;align-items:center;gap:10px}
.bal{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 10px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a}
.bal .coin{width:28px;height:28px}
.bal strong{display:block;font:700 16.5px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.bal small{display:block;margin-top:1px;color:var(--muted);font-size:11.5px;line-height:1}
.bal.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.06);border-color:var(--cyan)}}
.avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#95e8ff,#1796dd);color:#04182a;font:800 17px var(--font-display);flex:none}
.kickBtn{background:linear-gradient(180deg,#b9ff8b,#5fd94b);color:#072009;min-height:46px;padding:0 20px;box-shadow:0 1px 0 #ffffff70 inset,0 8px 22px #5fd94b33}
.kickBtn{white-space:nowrap}
.kickBtn img{height:16px;width:auto;flex:none}
.kickBtn:hover{filter:brightness(1.05)}

/* ---------- layout ---------- */
.shell{max-width:1160px;margin:0 auto;padding:22px 20px 56px}
main>*+*{margin-top:22px}
h2.gh{font-size:clamp(24px,2.8vw,30px);font-weight:700}
.gsub{margin-top:6px;color:var(--muted);font-size:15px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:8px;padding:48px 24px 40px 56px;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  background:radial-gradient(55% 95% at 86% 46%,#f5c04a30,transparent 62%),radial-gradient(60% 80% at 0% 100%,#1796dd30,transparent 62%),linear-gradient(135deg,#263c8d,#1f3378 74%)}
.hero>*{min-width:0}
.hero::before{content:"";position:absolute;z-index:-1;right:-140px;bottom:-260px;width:640px;height:640px;border-radius:50%;border:1.5px solid #3fd2ff2e;box-shadow:0 0 0 46px #3fd2ff0d,0 0 0 92px #3fd2ff07}
.hero h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;line-height:1.02;letter-spacing:.2px}
.hero .lead{max-width:44ch;margin-top:18px;color:var(--text-2);font-size:clamp(16px,1.5vw,18px);line-height:1.65}
.hstats{display:flex;gap:0;margin-top:30px}
.hstats div{padding:0 26px;border-left:1px solid var(--line-2)}
.hstats div:first-child{padding-left:0;border-left:0}
.hstats span{display:block;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.hstats strong{display:block;margin-top:4px;font:700 clamp(20px,2.4vw,28px)/1.1 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.hstats small{display:block;margin-top:3px;color:var(--faint);font-size:12.5px}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.wBonus{flex-basis:100%;display:flex;align-items:center;gap:10px;margin:0 0 2px;padding:10px 14px;border:1px solid #5cffc155;border-radius:5px;background:linear-gradient(90deg,#5cffc12b,#5cffc10a);color:var(--text);font-size:15px;line-height:1.4}
.wBonus b{color:var(--mint,#5cffc1)}
.wBonus .gift{flex:none;font-size:22px;line-height:1}
.toast.long{width:min(92vw,440px);line-height:1.45;animation:toastIn .35s var(--ease),toastOut .35s 6.6s forwards}
.toast .gift{flex:none;font-size:22px}
.heroArt{position:relative;display:grid;place-items:center}
.heroArt svg{animation:none!important;transition:opacity .65s ease,transform .65s ease}
.heroArt .heroArtLabel{transition:opacity .5s ease}
.heroArt.swapping svg{opacity:0;transform:scale(.96)}
.heroArt.swapping .heroArtLabel{opacity:0}
.heroArtLabel{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:2;background:#070b1ae6;border:1px solid var(--line-2);color:var(--text-2);font:700 12.5px var(--font-body);padding:4px 12px;border-radius:4px;white-space:nowrap;pointer-events:none}
.heroArt svg{width:min(112%,560px);max-width:none;margin:-10px -20px -14px 0;filter:drop-shadow(0 30px 40px #0009);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);padding:0}
.step{position:relative;display:flex;align-items:flex-start;gap:16px;padding:22px 26px}
.step+.step::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line)}
.stepN{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-3);border-radius:4px;background:#3fd2ff1c;color:var(--cyan-2);font:800 15px var(--font-display)}
.step.done .stepN{background:#a3f04a26;border-color:#a3f04a80;color:var(--lime)}
.step strong{display:block;font:700 16.5px/1.25 var(--font-display)}
.step p{margin-top:4px;color:var(--muted);font-size:14px;line-height:1.55}
/* "How it works": the three steps are a slim strip at the foot of the top banner (the page used to have a big card with a picture of him opening a chest) */
.heroSteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px;border:1px solid var(--line-2);border-radius:5px;background:#0d1a4a47;overflow:hidden}
.heroSteps .step{align-items:center;gap:10px;padding:11px 14px}
.heroSteps .step+.step::before{top:22%;bottom:22%}
.heroSteps .stepN{width:28px;height:28px;border-radius:4px;font-size:13px}
.stepN.pic,.step.done .stepN.pic{background:none;border:0}.stepN.pic img{width:100%;height:100%;object-fit:contain}.heroSteps .stepN.pic{width:34px;height:34px}.histMore{display:flex;justify-content:center;margin-top:14px}
img.icPic{width:20px;height:20px;object-fit:contain;flex:none;vertical-align:-4px}
img.shieldPic{width:24px;height:24px}.hallIcon.pic{background:none;border:0}.hallIcon.pic img{width:44px;height:44px}
.heroSteps .step strong{font:700 14.5px/1.25 var(--font-display)}
.heroSteps .step p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){.hero .heroSteps{grid-template-columns:repeat(3,minmax(0,1fr))}.heroSteps .step{flex-direction:column;align-items:flex-start;gap:7px;padding:11px 10px}.hero .heroSteps .step+.step::before{left:0;right:auto;top:20%;bottom:20%;width:1px;height:auto}.heroSteps .step strong{font-size:13.5px}}

/* ---------- toolbar ---------- */
.toolbar{display:grid;gap:14px;padding:16px}
.input,.select{height:46px;border:1px solid var(--line-2);border-radius:4px;background-color:#1f3172;color:#fff;font:500 15px var(--font-body);transition:border-color .2s,box-shadow .2s}
.input{width:100%;padding:0 14px 0 44px}
.input::placeholder{color:var(--faint)}
.select{padding:0 40px 0 14px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239db4c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.input:hover,.select:hover{border-color:var(--line-3)}
.input:focus,.select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px #3fd2ff33}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.count{margin-left:auto;color:var(--muted);font-size:13.5px}

/* ---------- daily banner ---------- */
.daily{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;padding:16px 34px 16px 20px;overflow:hidden;cursor:pointer;
  background:radial-gradient(45% 140% at 9% 50%,#a3f04a2b,transparent 65%),linear-gradient(160deg,#243985,#1f3378);transition:border-color .25s,transform .3s var(--ease)}
.daily:hover{border-color:#a3f04a66;transform:translateY(-2px)}
.daily .dart{width:210px;margin:-10px 0 -12px}
.daily h3{font-size:26px;font-weight:700}
.daily p{margin-top:6px;max-width:48ch;color:var(--muted);font-size:15px;line-height:1.6}
.dtag{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:5px 11px;border-radius:4px;background:#a3f04a1f;color:var(--lime);font:700 12.5px/1 var(--font-body)}
.dtag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.dact{display:grid;justify-items:end;gap:8px;text-align:right}
.dact small{color:var(--muted);font-size:12.5px}

/* ---------- case cards ---------- */
.cgrid{grid-template-columns:repeat(3,1fr);gap:18px}
.ccard{--acc:#3fd2ff;--acc-a:#3fd2ff2e;--acc-45:#3fd2ff73;position:relative;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),border-color .25s,box-shadow .3s}
.ccard::before{content:"";position:absolute;inset:0;background:radial-gradient(75% 52% at 50% 26%,var(--acc-a),transparent 72%);pointer-events:none}
.ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#ffffff12 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.ccard:hover{transform:translateY(-5px);border-color:var(--acc-45);box-shadow:0 26px 54px #0008,0 0 40px var(--acc-a)}
.ccard:hover::after{transform:translateX(120%);transition:transform .9s var(--ease)}
.ccard .cart{position:relative;padding:10px 26px 0}
.ccard .cart svg{width:100%;transition:transform .4s var(--ease)}
.ccard:hover .cart svg{transform:translateY(-6px) scale(1.04)}
.cbody{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:14px;padding:4px 22px 22px;flex:1}
.ccard{display:flex;flex-direction:column}
.cbody .cfoot{align-self:end}
.cname{font:700 23px/1.15 var(--font-display)}
.cblurb{margin-top:5px;color:var(--muted);font-size:14px;line-height:1.5;min-height:42px}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{display:inline-flex;align-items:center;gap:9px;font:700 22px/1 var(--font-display);font-variant-numeric:tabular-nums}
.price .coin{width:26px;height:26px}
.cfoot .btn{min-height:44px;padding:0 22px;font-size:14.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:saturate(.6)}
.btn[disabled]:hover{transform:none;filter:saturate(.6)}
.empty{grid-column:1/-1;padding:52px 20px;text-align:center;color:var(--muted)}
.panel{padding:24px}
.panelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.panelHead h2{font-size:22px;font-weight:700}
.tag{padding:6px 12px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:var(--text-2);font:700 12.5px/1 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabs{display:inline-flex;gap:4px;padding:5px;margin-bottom:16px;border:1px solid var(--line);border-radius:5px;background:#26366780}
.tabs button{min-height:38px;padding:0 16px;border:0;border-radius:4px;background:none;color:var(--muted);font:700 13.5px var(--font-body);cursor:pointer;transition:background .2s,color .2s}
.tabs button.on{background:#3fd2ff24;color:#fff;box-shadow:inset 0 0 0 1px #3fd2ff66}
.drops{display:grid;gap:8px}
.drop{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 16px 9px 10px;border:1px solid var(--line);border-left:3px solid var(--rc);border-radius:5px;background:linear-gradient(90deg,var(--rc-12),#ffffff05 40%)}
.drop.new{animation:dropIn .55s var(--ease)}
.drop.you{border-color:var(--cyan);border-left-color:var(--rc);box-shadow:0 0 0 1px #3fd2ff44}
@keyframes dropIn{from{opacity:0;transform:translateY(-12px) scale(.98);background:var(--rc-25)}}
.dropArt{display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:radial-gradient(circle,var(--rc-25),transparent 75%),#213478}
.dropArt svg{width:38px;height:38px}
.drop b{display:block;font:700 14.5px/1.25 var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop span.sub{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dval{text-align:right;font-variant-numeric:tabular-nums}
.dval strong{display:block;color:var(--rc);font:700 15px/1.2 var(--font-display)}
.dval small{color:var(--faint);font-size:12px}
.invHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.invGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.invEmpty{padding:34px 12px;text-align:center;color:var(--muted);line-height:1.6}
.invEmpty .hallIcon{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:10px;border-radius:5px;border:1px solid #3fd2ff55;background:#3fd2ff1c;color:var(--cyan)}

/* ---------- item cards ---------- */
.icard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;border:1px solid var(--rc-45);border-radius:5px;background:radial-gradient(85% 55% at 50% 34%,var(--rc-25),transparent 72%),linear-gradient(180deg,#243985,#213478);text-align:center}
.icard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rc)}
.icard .art{width:76%;aspect-ratio:1;margin-top:6px}
.icard .nm{max-width:100%;padding:0 8px;font:700 13.5px/1.2 var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icard .vl{margin-bottom:9px;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.icard.win{z-index:2;transform:scale(1.07);border-color:var(--rc);box-shadow:0 0 0 2px var(--rc),0 0 70px var(--rc-45);transition:transform .5s var(--ease),box-shadow .5s}
.icard.dim{opacity:.32;filter:saturate(.5);transition:opacity .6s,filter .6s}
.icard .odds{position:absolute;top:8px;right:9px;color:var(--rc);font:700 11.5px/1 var(--font-body)}
.icard.mini{aspect-ratio:.86}
.icard.mini .nm{font-size:12px}
.icard.mini .vl{margin-bottom:7px;font-size:11.5px}
.icard .qty{position:absolute;top:7px;left:8px;padding:3px 7px;border-radius:4px;background:#1d3776cc;font:700 11.5px/1 var(--font-display)}
.icard .sell{position:absolute;inset:0;display:grid;place-items:center;border:0;background:#070b1ae6;color:#fff;font:700 13px var(--font-display);cursor:pointer;opacity:0;transition:opacity .2s}
.icard:hover .sell,.icard:focus-within .sell,.icard .sell:focus-visible{opacity:1}
.icard .sell span{display:block;margin-top:2px;color:var(--lime);font-size:12px}

/* ---------- stage (opening view) ---------- */
.stage{--acc:#3fd2ff;--acc-a:#3fd2ff2e;position:fixed;inset:0;z-index:90;overflow-y:auto;background:radial-gradient(80% 50% at 50% 0%,var(--acc-a),transparent 70%),#050813f2;backdrop-filter:blur(10px);animation:stageIn .35s var(--ease)}
.stage[hidden]{display:none}
@keyframes stageIn{from{opacity:0;transform:scale(.985)}}
.stageIn{max-width:1120px;margin:0 auto;padding:16px 20px 64px}
.stageBar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stageTitle{min-width:0}
.stageTitle h2{font-size:clamp(22px,3vw,30px);font-weight:700}
.stageTitle span{display:block;margin-top:3px;color:var(--muted);font-size:13.5px}
.stageTools{display:flex;align-items:center;gap:10px;margin-left:auto}
.iconBtn{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:var(--text-2);cursor:pointer;transition:background .2s,color .2s}
.iconBtn:hover{background:#ffffff16;color:#fff}
.iconBtn .i{width:20px;height:20px}
.arena{position:relative;display:grid;place-items:center;min-height:400px;margin-top:18px;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);background:radial-gradient(65% 100% at 50% 42%,var(--acc-a),transparent 72%),linear-gradient(180deg,#21357c,#203274)}
.arena.shake{animation:shake .55s}
@keyframes shake{20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
.arena>*{grid-area:1/1}
.preview{display:grid;place-items:center;width:100%;padding:14px}
.preview svg{width:min(470px,84%);animation:float 5.5s ease-in-out infinite;filter:drop-shadow(0 26px 34px #000a)}
.preview[hidden],.reel[hidden],.multi[hidden],.result[hidden]{display:none}
.reel{--cw:150px;--gap:10px;position:relative;align-self:stretch;width:100%;overflow:hidden}
.reel::before,.reel::after{content:"";position:absolute;top:0;bottom:0;width:22%;z-index:3;pointer-events:none}
.reel::before{left:0;background:linear-gradient(90deg,#213375,#21337500)}
.reel::after{right:0;background:linear-gradient(270deg,#213375,#21337500)}
.strip{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:var(--gap);will-change:transform}
.strip .icard{width:var(--cw);height:198px;flex:none}
.strip .icard .art{width:74%}
.marker{position:absolute;left:50%;top:0;bottom:0;z-index:4;width:0;pointer-events:none}
.marker::before{content:"";position:absolute;top:10px;bottom:10px;left:-1.5px;width:3px;border-radius:3px;background:linear-gradient(#fff0,#fff 18%,#fff 82%,#fff0);box-shadow:0 0 22px #fff,0 0 8px var(--cyan)}
.marker::after{content:"";position:absolute;top:0;left:-9px;border:9px solid transparent;border-top:11px solid #fff;border-bottom:0;filter:drop-shadow(0 0 6px #fff)}
.skipBtn{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:5}
.multi{width:100%;padding:26px 24px 22px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.mgrid .icard{aspect-ratio:.86;animation:flipIn .7s var(--ease) both;animation-delay:calc(var(--n)*.28s)}
@keyframes flipIn{from{opacity:0;transform:perspective(600px) rotateY(90deg) scale(.8)}60%{opacity:1}}
.msum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding:14px 18px;border:1px solid var(--line);border-radius:5px;background:#ffffff07;animation:fadeIn .4s 1.6s var(--ease) both}
.msum strong{font:700 20px var(--font-display);font-variant-numeric:tabular-nums}
.msum small{display:block;color:var(--muted);font-size:12.5px}
.result{position:relative;z-index:6;align-self:stretch;justify-self:stretch;display:grid;place-items:center;padding:20px;background:#050813d9;backdrop-filter:blur(7px);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.rcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 22px;width:min(730px,100%);overflow:hidden;padding:20px 34px 20px 16px;border:1px solid var(--rc-45);border-radius:6px;background:linear-gradient(180deg,#263c8d,#213478);box-shadow:0 0 90px var(--rc-25),0 30px 70px #000a;animation:rpop .6s cubic-bezier(.2,1.25,.4,1)}
@keyframes rpop{from{opacity:0;transform:scale(.8) translateY(20px)}}
.rleft{position:relative;display:grid;place-items:center;width:302px;height:302px}
.aura{position:absolute;left:50%;top:50%;width:560px;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,var(--rc-25) 0 9deg,transparent 9deg 30deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 58%);mask:radial-gradient(circle,#000 6%,transparent 58%);animation:spin 26s linear infinite}
@keyframes spin{to{rotate:360deg}}
.rart{position:relative;width:264px;height:264px;animation:artPop .7s cubic-bezier(.2,1.5,.4,1) .1s both}
@keyframes artPop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
.rright{position:relative;display:grid;justify-items:start;gap:10px}
.rtag{display:inline-block;padding:6px 14px;border:1px solid var(--rc-45);border-radius:4px;background:var(--rc-12);color:var(--rc);font:700 13px/1 var(--font-display)}
.rcard h3{font-size:clamp(26px,3.4vw,34px);font-weight:800;line-height:1.1}
.rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rval{display:inline-flex;align-items:center;gap:8px;font:700 20px var(--font-display);font-variant-numeric:tabular-nums}
.rval .coin{width:24px;height:24px}
.delta{display:inline-block;padding:5px 10px;border-radius:4px;font:700 12.5px/1 var(--font-body);font-variant-numeric:tabular-nums}
.delta.up{background:#a3f04a22;color:var(--lime)}
.delta.down{background:#ffffff10;color:var(--muted)}
.racts{display:grid;gap:10px;width:100%;margin-top:8px}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 22px;margin-top:16px;padding:16px 20px}
.switch{display:inline-flex;align-items:center;gap:10px;color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0}
.switch i{position:relative;width:42px;height:24px;border-radius:4px;background:#ffffff1a;border:1px solid var(--line-2);transition:background .2s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.switch input:checked+i{background:#3fd2ffaa}
.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:2px solid var(--cyan);outline-offset:3px}
.cright{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.cost{text-align:right;color:var(--muted);font-size:13px;line-height:1.4}
.cost strong{display:inline-flex;align-items:center;gap:7px;color:#fff;font:700 19px var(--font-display);font-variant-numeric:tabular-nums}
.cost .coin{width:22px;height:22px}
.bigBtn{min-height:56px;padding:0 34px;font-size:17px;border-radius:5px}

/* ---------- what's inside ---------- */
.inside{margin-top:22px;padding:26px}
.oddsbar{display:flex;height:12px;margin:18px 0 12px;border-radius:4px;overflow:hidden;background:#ffffff10}
.oddsbar i{display:block;height:100%;background:var(--rc);min-width:3px}
.oddsbar i+i{margin-left:2px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:22px;color:var(--text-2);font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend .lg{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:#ffffff08;color:var(--text-2);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.legend .lg:hover{border-color:var(--line-3)}
.legend .lg.on{border-color:var(--rc,#fff);background:#ffffff14;color:#fff}
.legend .lg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--rc)}
.legend b{font-variant-numeric:tabular-nums}
.igrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:4px}
.igrid .icard{aspect-ratio:.86}
.igrid .icard .art{margin-top:16px}
.icard .rlab{position:absolute;top:10px;left:11px;color:var(--rc);font:700 11.5px/1 var(--font-body)}
.rtp{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.rtp b{color:#fff;font-variant-numeric:tabular-nums}

/* ---------- provably fair dialog ---------- */
.fairOv{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;background:#050813d9;backdrop-filter:blur(8px);animation:fadeIn .25s}
.fairOv[hidden]{display:none}
.fairBox{position:relative;width:min(640px,100%);max-height:92vh;overflow:auto;padding:28px}
.fairX{position:absolute;top:18px;right:18px;width:40px;height:40px}

.fairBox h2{display:flex;align-items:center;gap:12px;padding-right:48px;font-size:24px}
.fairBox h2 .hallIcon{display:grid;place-items:center;width:42px;height:42px;border-radius:4px;background:#a3f04a1f;border:1px solid #a3f04a66;color:var(--lime)}
.fairBox p{margin-top:12px;color:var(--text-2);line-height:1.65;font-size:14.5px}
.fairBox ol{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:10px;counter-reset:f}
.fairBox li{position:relative;padding:0 0 0 38px;color:var(--text-2);font-size:14.5px;line-height:1.6;counter-increment:f}
.fairBox li::before{content:counter(f);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:4px;background:#3fd2ff1c;border:1px solid #3fd2ff50;color:var(--cyan-2);font:700 13px var(--font-display)}
.fld{display:grid;gap:5px;margin-top:12px}
.fld label{color:var(--muted);font-size:12.5px;font-weight:600}
.fld code,.fld input{display:block;width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:4px;background:#1f3172;color:var(--cyan-2);font:500 12.5px/1.4 var(--font-mono);word-break:break-all}
.fld input{color:#fff}
.fld input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px #3fd2ff33}
.vres{margin-top:12px;padding:12px 14px;border-radius:4px;font-size:13.5px;line-height:1.55}
.vres.ok{background:#a3f04a1c;border:1px solid #a3f04a66;color:#c9ffb2}
.vres.warn{background:#f5c04a18;border:1px solid #f5c04a55;color:#ffe08a}
.fairAct{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;bottom:26px;z-index:140;display:grid;gap:8px;transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line-3);border-radius:5px;background:#23357cf5;box-shadow:0 18px 40px #000a;font:600 14px var(--font-body);animation:toastIn .35s var(--ease),toastOut .35s 2.6s forwards}
.toast strong{color:var(--lime);font-family:var(--font-display)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
#fx{position:fixed;inset:0;z-index:120;width:100%;height:100%;pointer-events:none}
#flash{position:fixed;inset:0;z-index:119;pointer-events:none;background:radial-gradient(circle at 50% 45%,#fff,var(--fc,#f4b93a) 35%,transparent 70%);opacity:0}
#flash.on{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* ---------- footer ---------- */
.footer{margin-top:60px;padding:34px 0 8px;border-top:1px solid var(--line);text-align:center}
.finePrint{max-width:74ch;margin:14px auto 0;color:var(--faint);font-size:13px;line-height:1.65}
.responsible{display:inline-flex;align-items:center;gap:12px;margin-top:14px;color:var(--text-2);font-size:14px;font-weight:700}
/* words, not the gold 18+ picture (31 Oct 2026, owner: "it looks too much. Just do 18+, gamble responsibly") */.adultTx b{color:#fff;font-weight:800}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .nav{gap:14px}
  .navToggle{display:grid}
  
  
  
  
  
}
@media(max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);padding:36px 32px 12px}
  .heroArt svg{width:min(100%,480px);margin:0 auto -6px}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .igrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps:not(.heroSteps){grid-template-columns:1fr}
  .step+.step::before{left:26px;right:26px;top:0;bottom:auto;width:auto;height:1px}
  .heroSteps .step+.step::before{left:0;right:auto;top:22%;bottom:22%;width:1px;height:auto}
  .daily{grid-template-columns:auto 1fr}
  .dact{grid-column:1/-1;justify-items:stretch;text-align:left}
}
@media(max-width:640px){
  .shell{padding:16px 16px 44px}
  .nav{padding:10px 16px}
  .hero{padding:30px 22px 6px;border-radius:6px}
  .hstats{margin-top:24px}
  .hstats div{padding:0 12px}
  .hstats div:first-child{padding-left:0}
  .hstats strong{font-size:18px}
  .hstats span{font-size:12px}
  .hstats small{display:none}
  .stageTitle{order:3;flex:1 0 100%}
  .stageTools{margin-left:auto}
  .cost{text-align:left}
  .strip .icard .nm{font-size:12px}
  .cgrid{grid-template-columns:1fr}
  .daily{grid-template-columns:1fr;padding:18px}
  .daily .dart{width:170px;margin:-6px auto -8px}
  .panel{padding:20px}
  .bal small{display:none}
  .bal{padding:0 14px 0 8px}
  .kickBtn{padding:0 14px;font-size:13.5px}
  .reel{--cw:118px;--gap:8px;height:214px}
  .strip .icard{height:170px}
  .stageIn{padding:12px 14px 56px}
  .arena{min-height:300px}
  .cright{margin-left:0;justify-content:space-between;width:100%}
  .controls .bigBtn{flex:1 1 100%}
  .igrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invGrid{grid-template-columns:repeat(2,1fr)}
  .mockctl{left:10px;bottom:10px;width:min(264px,calc(100vw - 20px))}
  .rcard{grid-template-columns:1fr;justify-items:center;text-align:center;padding:16px 20px 22px}
  .rleft{width:100%;height:244px}
  .rart{width:218px;height:218px}
  .rright{justify-items:center;width:100%}
  .rmeta{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.igrid .icard .nm,.icard.mini .nm{white-space:normal;line-height:1.18;padding:0 10px}

/* ---------- v2 additions ---------- */
.reel .mkGlow{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 120px 6px var(--mkc,transparent);opacity:0;transition:opacity .18s}
.reel .marker::before{box-shadow:0 0 22px var(--mkc,#fff),0 0 8px var(--mkc,#3fd2ff);transition:box-shadow .15s}
.reel .marker::after{border-top-color:var(--mkc,#fff);filter:drop-shadow(0 0 6px var(--mkc,#fff))}
.icard.win.pulse{animation:winPulse 1s ease-in-out 2}
@keyframes winPulse{50%{box-shadow:0 0 0 3px var(--rc),0 0 130px var(--rc)}}
.icard .upb{position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:4px;background:#3fd2ff;color:#04182a;font:800 10.5px/1 var(--font-display)}
.bonusNote{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:10px 14px;border:1px solid #f5c04a55;border-radius:4px;background:#f5c04a14;color:var(--gold);font:600 13.5px var(--font-body)}
.bonusNote .i{width:18px;height:18px}
.multi{width:100%}
/* streak + pity */
.streak{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.streak .pips{display:inline-flex;gap:5px}
.streak i{display:block;width:22px;height:8px;border-radius:4px;background:#ffffff16}
.streak i.on{background:var(--lime)}
.streak i.b{background:#f5c04a38}
.streak i.b.on{background:var(--gold)}
.pity{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:600}
.pity i{position:relative;display:block;width:96px;height:8px;border-radius:4px;background:#ffffff14;overflow:hidden}
.pity b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#9d62ff,#d0b0ff);transition:width .5s var(--ease)}
.pity em{font-style:normal;color:var(--text-2);font-variant-numeric:tabular-nums}
/* result extras */
.flav{max-width:42ch;color:var(--muted);font-size:14px;line-height:1.55}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:-2px}
.chain span{padding:4px 10px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:var(--text-2);font:700 12px/1.3 var(--font-body)}
.chain em{font-style:normal;color:var(--cyan);font:700 11.5px var(--font-body)}
.chain em::after{content:" \2192"}
.rcard.sad .rleft{animation:droopy 2.4s 1s ease-in-out infinite alternate}
@keyframes droopy{to{transform:rotate(5deg) translateY(5px)}}
/* upgrade moment */
.upg{--ua:#3fd2ff;grid-area:1/1;z-index:7;position:relative;align-self:stretch;justify-self:stretch;display:grid;place-items:center;background:#050813ee;animation:fadeIn .3s}
.upg[hidden]{display:none}
.upg::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 55%,var(--ua),transparent 70%);opacity:.32}
.upgTag{padding:7px 16px;border:1px solid #ffffff44;border-radius:4px;background:#ffffff14;font:800 13px/1 var(--font-display);letter-spacing:.6px;animation:fadeUp .5s ease-out both}
@keyframes crateDrop{from{opacity:0;transform:translateY(-160px) scale(1.5)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
/* big-win takeover */
.tk{position:fixed;inset:0;z-index:115;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:radial-gradient(70% 70% at 50% 46%,var(--rc-25),transparent 78%),#04060ef8;animation:fadeIn .35s ease-out}
.tk[hidden]{display:none}
.tkRays{position:absolute;left:50%;top:46%;width:180vmax;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,var(--rc-25) 0 6deg,transparent 6deg 24deg);-webkit-mask:radial-gradient(circle,#000 4%,transparent 46%);mask:radial-gradient(circle,#000 4%,transparent 46%);animation:spin 40s linear infinite,raysIn 1s ease-out}
@keyframes raysIn{from{opacity:0;scale:.3}}
.tkRing{position:absolute;left:50%;top:46%;width:40px;height:40px;border:3px solid var(--rc);border-radius:50%;translate:-50% -50%;opacity:0;animation:ring 1.3s ease-out .3s}
@keyframes ring{0%{opacity:.9;scale:1}100%{opacity:0;scale:42}}
.tkIn{position:relative;display:grid;justify-items:center;gap:12px;padding:20px;text-align:center}
.tkTag{padding:8px 18px;border:1px solid var(--rc-45);border-radius:4px;background:var(--rc-12);color:var(--rc);font:800 14px/1 var(--font-display);letter-spacing:.8px;text-transform:uppercase;animation:fadeUp .6s ease-out .3s both}
.tkArt{width:min(330px,60vw);aspect-ratio:1;filter:drop-shadow(0 0 50px var(--rc));animation:rise 1.1s cubic-bezier(.2,1.2,.3,1) .1s both}
.tk.big .tkArt{animation:rise 1.1s cubic-bezier(.2,1.2,.3,1) .1s both,floaty 3s ease-in-out 1.2s infinite}
@keyframes rise{from{opacity:0;transform:translateY(180px) scale(.3) rotate(-14deg)}}
@keyframes floaty{50%{transform:translateY(-12px) scale(1.03)}}
.tkName{font:800 clamp(30px,6vw,62px)/1.1 var(--font-display);text-shadow:0 0 40px var(--rc-45)}
.tkName span{display:inline-block;animation:letter .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d)}
@keyframes letter{from{opacity:0;transform:translateY(26px) scale(.6);filter:blur(6px)}}
.tkVal{display:inline-flex;align-items:center;gap:10px;font:700 clamp(20px,3vw,30px) var(--font-display);font-variant-numeric:tabular-nums;animation:fadeUp .6s ease-out 1.5s both}
.tkVal .coin{width:30px;height:30px}
.tkHint{margin-top:10px;color:var(--faint);font-size:13px;animation:fadeUp .6s ease-out 2.2s both,tkPulse 1.8s ease-in-out 3s infinite}
@keyframes tkPulse{50%{opacity:.45}}
/* collection */
.colBar{height:8px;margin:0 0 22px;border-radius:4px;background:#ffffff12;overflow:hidden}
.colBar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .7s var(--ease)}
/* the account menu's level bar: one solid site color, with a one-line caption under it */
.colBar.acctBar{margin:0 0 6px}
.colBar.acctBar i{background:var(--cyan)}
.acctNext{margin:0 0 12px;color:var(--muted);font-size:12.5px}
.colBody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px}
.colHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.colHead h3{font-size:16px;border-left:3px solid var(--acc);padding-left:10px}
.colHead span{color:var(--muted);font:600 13px var(--font-body);font-variant-numeric:tabular-nums}
.colGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.skinsGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.skinsGrid .skinTierTag{font-size:11px;padding:3px 9px}
.icard.tile{aspect-ratio:1;padding:0;border-radius:4px;color:inherit;font:inherit;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.icard.tile .art{width:84%;margin-top:0}
button.icard.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px #0008,0 0 26px var(--rc-25)}
.icard.tile.locked{cursor:default;border-color:var(--line);background:#213478}
.icard.tile.locked::after{opacity:.3}
.icard.tile.locked .art{display:none}
.icard.tile.locked{display:grid;place-items:center}
.icard.tile.locked .qm{font:800 clamp(30px,5vw,46px)/1 var(--font-display);color:#ffffff30;text-shadow:0 0 18px #ffffff10;user-select:none}
.skinTierTag{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:4px;background:#070b1ae6;border:1px solid var(--rc-45);color:var(--rc);font:800 9.5px var(--font-body);letter-spacing:.03em;text-transform:uppercase}
/* inspector */
.inspectBox{width:min(560px,100%);overflow:hidden}
.inspTop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;align-items:center;padding-right:40px}
.inspTop .rleft{width:190px;height:190px}
.inspTop .aura{width:400px}
.inspTop .rart{width:158px;height:158px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.statgrid div{padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:#ffffff08}
.statgrid span{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.statgrid strong{display:block;margin-top:3px;font:700 17px var(--font-display);font-variant-numeric:tabular-nums}
.icard[data-inspect]{cursor:pointer}
.igrid .icard[data-inspect]:hover{border-color:var(--rc)}
/* stream alert preview (mockup only) */
/* card tilt */
.ccard .cart{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out}
@media(max-width:980px){.colBody{grid-template-columns:1fr}.inspTop{grid-template-columns:1fr;justify-items:center;text-align:center;padding-right:0}}
@media(max-width:640px){.colGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.statgrid{grid-template-columns:1fr 1fr}}
.tk.chase{background:radial-gradient(70% 70% at 50% 46%,#fff0b8,#f4b93a 32%,#4d3000 80%),#854c00}
.tk.chase .tkRays{background:repeating-conic-gradient(from 0deg,#ffffff38 0 6deg,transparent 6deg 24deg)}
.tk.chase .tkRing{border-color:#fff}
.tk.chase .tkArt{width:min(470px,78vw);filter:drop-shadow(0 0 60px #fff8)}
.tk.chase .tkName{text-shadow:0 3px 30px #000b}
.tk.chase .tkTag{background:#ffffff2e;border-color:#fff9;color:#fff}
.tk.chase .tkVal,.tk.chase .tkHint{color:#fff}

/* ================= v4 polish ================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(a,button,input,select,summary,[role=button],[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn,.choice,.iconBtn,.seg button{transition:transform .12s var(--ease),background .2s,border-color .2s,box-shadow .2s,color .2s}
.btn:active:not(:disabled),.choice:active,.iconBtn:active,.seg button:active{transform:translateY(1px) scale(.985)}
.linkBtn{padding:0;border:0;background:none;color:var(--cyan-2);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkBtn:hover{color:#fff}
kbd{padding:2px 7px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;background:#ffffff0a;color:var(--text-2);font:600 11.5px var(--font-body)}
.up{color:var(--lime)}.dn{color:#ff8f8f}
/* wallet */
button.bal{color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
button.bal:hover{background:#ffffff14;border-color:var(--line-3)}
.bal>span{display:block}
.wallet{position:relative}
/* welcome + trust + subnav */
.welcome{display:flex;align-items:center;gap:16px;margin:0 0 16px;padding:14px 18px;border:1px solid #3fd2ff4d;border-radius:5px;background:linear-gradient(90deg,#3fd2ff22,#3fd2ff0a);animation:fadeUp .5s var(--ease)}
.welcome[hidden]{display:none}
.welcome .wIcon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:4px;background:#3fd2ff2a;color:var(--cyan)}
.welcome p{flex:1;color:var(--text-2);font-size:15px;line-height:1.55}
.welcome p b{color:#fff}
.welcome .wBtns{display:flex;gap:8px;flex-wrap:wrap}
.welcome .btn{min-height:42px;padding:0 18px;font-size:14px}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trust button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:var(--text-2);font:600 13.5px var(--font-body);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.trust button:hover{background:#ffffff16;border-color:var(--line-3);color:#fff}
.trust .i{width:15px;height:15px;color:var(--cyan)}
.subnav{position:sticky;top:66px;z-index:30;display:flex;align-items:center;gap:4px;overflow-x:auto;padding:7px;border:1px solid var(--line);border-radius:5px;background:#1f3073e8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a,.subnav button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border:0;border-radius:4px;background:none;color:var(--muted);font:700 14px var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.subnav a:hover,.subnav button:hover{background:#ffffff10;color:#fff}
.subnav a.on,.subnav button[data-pane].on{background:#3fd2ff24;color:#fff;box-shadow:inset 0 0 0 1px #3fd2ff66}
.subnav .sp{flex:1}
.subnav .i{width:15px;height:15px;color:var(--cyan)}
#cases,#compare,#activity,#collection{scroll-margin-top:128px}
/* case cards */
.cbadge{position:absolute;top:14px;left:14px;z-index:3;padding:6px 11px;border:1px solid var(--acc-45,#3fd2ff73);border-radius:4px;background:#1f3172dd;color:#fff;font:700 11.5px/1 var(--font-display);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* stage: facts, keyboard hint, popovers, armed button */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 4px}
.facts div{padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:#ffffff07}
.facts span{display:block;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.3}
.facts strong{display:block;margin-top:5px;font:700 21px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.rtp .linkBtn{font-size:13.5px}

.stageTools{position:relative}
.pop{position:absolute;z-index:60;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 32px));padding:16px;border:1px solid var(--line-3);border-radius:5px;background:#1f3073;box-shadow:0 24px 60px #000c;animation:fadeUp .2s var(--ease)}
.pop[hidden]{display:none}
.popTitle{margin-bottom:6px;font:700 17px var(--font-display)}
.acctHead{display:flex;align-items:center;gap:12px;margin:10px 0 14px}
.acctBadge{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:conic-gradient(from 180deg,#3fd2ff,#a970ff,#f5c04a,#3fd2ff);color:#070b19;font:900 15px var(--font-display);flex:none;box-shadow:0 3px 10px #0006,inset 0 0 0 2px #ffffff40}
.acctHead b{display:block;font:700 15px var(--font-display)}
/* your Kick profile picture, with your chat level on a small tag; the round level badge stands in if there is no picture */
.acctPicWrap{position:relative;width:44px;height:44px;flex:none}
.acctPic{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#2d3e7f;box-shadow:0 3px 10px #0006,0 0 0 2px #3fd2ff80}
.acctPicWrap.noimg .acctPic{display:none}
.acctPicWrap.noimg{border-radius:50%;background:conic-gradient(from 180deg,#3fd2ff,#a970ff,#f5c04a,#3fd2ff)}
.acctHead span{color:var(--muted);font-size:12.5px}
.goldEx{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.goldEx img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 8px #0006)}
.goldEx span{color:var(--muted);font:700 11.5px var(--font-body);text-transform:uppercase;letter-spacing:.04em}
.multEx{display:flex;align-items:center;gap:10px;margin-top:12px}
.multExBadge{background:linear-gradient(135deg,#ffe08a,#f5c04a);color:#1b1206;font:900 13px var(--font-display);padding:3px 12px;border-radius:4px;flex:none}
.popText{color:var(--muted);font-size:13.5px;line-height:1.55}
.popText b{color:#fff}
.popRows{display:grid;gap:8px;margin:12px 0}
.popRows div{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13.5px}
.popRows strong{color:#fff;font-variant-numeric:tabular-nums}
.popLink{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;margin-top:8px;border:1px solid var(--line);border-radius:4px;background:#ffffff08;color:var(--text-2);font:600 13.5px var(--font-body);text-align:left;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.popLink:hover{background:#ffffff14;color:#fff}
.popLink .i{width:16px;height:16px;color:var(--cyan)}
.walletPop{right:64px;top:calc(100% + 12px);text-align:left}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.setRow .lab{color:var(--text-2);font-size:14px;font-weight:600}
.setRow small{display:block;margin-top:2px;color:var(--faint);font-size:12px;font-weight:500}
.range{-webkit-appearance:none;appearance:none;width:130px;height:6px;border-radius:4px;background:#ffffff22;outline-offset:6px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0009;cursor:pointer}
.range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.range:disabled{opacity:.4}
.num{width:92px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:#1f3172;color:#fff;font:600 14px var(--font-body);text-align:right}
.btn.armed{background:linear-gradient(180deg,#ffe08a,#f4b93a);color:#2a1a00;box-shadow:0 0 0 3px #f4b93a55,0 12px 30px #f4b93a44;animation:armedPulse .9s ease-in-out infinite}
@keyframes armedPulse{50%{box-shadow:0 0 0 6px #f4b93a33,0 12px 30px #f4b93a44}}
/* inventory */
#invBar{display:grid;gap:10px;margin-bottom:12px}
.invTop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.invBtns{display:flex;gap:8px;flex-wrap:wrap}
.invBtns .btn{min-height:40px;padding:0 16px;font-size:13.5px}
.invBtns .btn.armed{color:#2a1a00}
select.input.sm{width:auto;height:38px;padding:0 12px;font-size:13.5px}
/* compare */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.pickCard{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:5px;background:#ffffff07;transition:border-color .2s,transform .25s var(--ease)}
.pickCard:hover{border-color:var(--acc);transform:translateY(-2px)}
.pickCard svg{width:104px;height:auto}
.pickCard h3{font-size:16.5px;margin-bottom:4px}
.pickCard p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-bottom:10px}
.pickCard .btn{min-height:40px;padding:0 16px;font-size:13.5px}
.tableWrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px}
.cmp{width:100%;min-width:880px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{background:#223478;color:var(--muted);font:700 12.5px var(--font-body)}
.cmp th:first-child,.cmp td:first-child{position:sticky;left:0;z-index:1;text-align:left;background:#23377f}
.cmp thead th:first-child{background:#223478}
.cmp td.best{color:var(--lime);font-weight:700}
.linkRow{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:#fff;font:700 14.5px var(--font-body);cursor:pointer}
.linkRow:hover{color:var(--cyan-2)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
/* activity */
.tabs.sm{margin:0}
.empty.small{padding:22px;color:var(--muted);text-align:center;font-size:14px}
.hist{display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 14px 8px 8px;border:1px solid var(--line);border-left:3px solid var(--rc,#3fd2ff);border-radius:4px;background:#ffffff06}
.hrow svg{width:44px;height:44px}
.hrow b{display:block;font-size:14.5px}
.hrow small{display:block;color:var(--muted);font-size:12.5px}
.hval{text-align:right}
.hval small{font-weight:700}
/* help page */
.page{position:fixed;inset:0;z-index:95;overflow:auto;background:radial-gradient(80% 45% at 50% 0%,#243a8a,#1f2d6b 70%),#1f2d6b;animation:fadeIn .25s}
.page[hidden]{display:none}
.pageIn{max-width:1060px;margin:0 auto;padding:0 20px 90px}
/* How cases work uses the whole width (owner, 31 Oct 2026: less scrolling): wider page, the steps four across, and from 1300 px the sections in two columns */
#howPage .pageIn{max-width:min(1680px,100%);padding:0 clamp(16px,2.4vw,40px) 90px}
/* (31 Oct 2026, owner: the two-column version squeezed the cards into thin strips with tiny pictures) one column of sections, the four basics
   across, the upgrade and bonus cards three across with their prize pictures big */
#howBody{max-width:1240px}
@media(min-width:1100px){#how-basics .stepGrid{grid-template-columns:repeat(4,minmax(0,1fr))}#how-extras .stepGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
#how-extras .stepCard{display:flex;flex-direction:column;padding:20px 20px 14px}
#how-extras .stepCard .goldEx{order:-1;justify-content:center;margin:0 0 14px;min-height:150px;padding:10px;border-radius:5px;background:radial-gradient(60% 70% at 50% 60%,#3fd2ff1f,transparent 70%)}
#how-extras .stepCard .goldEx img{height:clamp(150px,13vw,210px);max-width:44%}
#how-extras .stepCard h4{font-size:18px}
.pageBar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:14px 0;background:#1f2d6beb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pageBar h2{font-size:21px}
.pageBody{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start;margin-top:18px}
.toc{position:sticky;top:84px;display:grid;gap:4px}
.toc a{padding:9px 12px;border-radius:4px;color:var(--muted);font:600 14px var(--font-body);text-decoration:none;transition:background .2s,color .2s}
.toc a:hover{background:#ffffff10;color:#fff}
.prose section{scroll-margin-top:84px;margin-bottom:46px}
.prose h3{margin-bottom:12px;font-size:27px}
.prose h4{margin-bottom:6px;font-size:16.5px}
.prose p{margin-bottom:12px;color:var(--text-2);font-size:16px;line-height:1.7}
img.icPic.infoPic{width:22px;height:22px;vertical-align:-5px}.welcome .wIcon:has(.infoPic),.calloutIcon:has(.infoPic){background:none}.welcome .wIcon img.infoPic{width:34px;height:34px}
.stepGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stepCard{position:relative;padding:18px 18px 8px;border:1px solid var(--line);border-radius:5px;background:#ffffff07}
.stepCard b{display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:4px;background:#3fd2ff2a;color:var(--cyan);font:800 14px var(--font-display)}
.stepCard p{font-size:14.5px;line-height:1.6}
.checks{list-style:none;display:grid;gap:8px;margin:0 0 14px;padding:0}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);font-size:15.5px;line-height:1.5}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#7ee08a33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237ee08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat}
.checks li.no::before{background:#ff8f8f2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ff8f8f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.defs{display:grid;gap:10px;margin:0 0 16px}
.defs div{padding:14px 16px;border:1px solid var(--line);border-radius:5px;background:#ffffff06}
.defs dt{margin-bottom:4px;color:#fff;font:700 16px var(--font-display)}
.defs dd{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.6}
.tiers{display:grid;gap:8px}
.tierRow{display:grid;grid-template-columns:100px 150px 150px minmax(0,1fr);gap:14px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--rc);border-radius:4px;background:#ffffff06}
.tierName{color:var(--rc);font:800 15px var(--font-display)}
.tierVal{color:#fff;font:600 14px var(--font-body);font-variant-numeric:tabular-nums}
.tierEx{display:flex;gap:2px}
.tierEx svg{width:34px;height:34px}
.tierNote{color:var(--muted);font-size:13.5px;line-height:1.4}
.faq{margin-bottom:10px;border:1px solid var(--line);border-radius:5px;background:#ffffff06}
.faq summary{padding:15px 18px;font:700 15.5px var(--font-body);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-size:20px;line-height:1}
.faq[open] summary::after{content:"\2013"}
.faq p{margin:0;padding:0 18px 16px;font-size:15px}
/* motion polish */
.ccard::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(115deg,transparent 42%,#ffffff12 50%,transparent 58%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
.ccard:hover::after{transform:translateX(120%)}
@media(max-width:980px){.pick{grid-template-columns:1fr}.pageBody{grid-template-columns:1fr;gap:18px}.toc{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}.toc a{flex:none;border:1px solid var(--line);white-space:nowrap}.tierRow{grid-template-columns:90px 1fr}.tierEx,.tierNote{grid-column:1/-1}.facts{grid-template-columns:repeat(2,1fr)}.subnav{top:60px}}
@media(max-width:720px){.welcome{flex-direction:column;align-items:flex-start}.stepGrid{grid-template-columns:1fr}.walletPop{right:0}.pickCard{grid-template-columns:84px 1fr}.pickCard svg{width:84px}}

.bal small{white-space:nowrap}

@media(max-width:720px){.walletPop{position:fixed;left:12px;right:12px;top:70px;width:auto}}

/* ---------- v6: 3D prize viewer (inspector, win reveal, big-win screen) ---------- */
.o3dBox{position:relative}
.insp3d{--sz:160px}
.inspTop .rleft.insp3d{width:230px;height:240px}
.rart.o3dBox{--sz:244px}
.tkArt.o3dBox{--sz:min(300px,56vw)}
.tk.chase .tkArt.o3dBox{--sz:min(430px,72vw)}
.o3d{position:absolute;inset:0;perspective:calc(var(--sz,160px)*5.2);perspective-origin:50% 44%;outline:none;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.o3d:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-lg)}
.o3dRot{position:absolute;left:50%;top:46%;width:var(--sz,160px);height:var(--sz,160px);margin:calc(var(--sz,160px)/-2) 0 0 calc(var(--sz,160px)/-2);transform-style:preserve-3d;will-change:transform}
.o3dRot .ly{position:absolute;inset:0;display:block;background:var(--img) center/contain no-repeat;transform:translateZ(calc(var(--zf,0)*var(--sz,160px)));filter:brightness(var(--b,1));pointer-events:none}
.o3dRot svg.ly{background:none;overflow:visible;width:100%;height:100%}
.o3dShadow{position:absolute;left:50%;bottom:8%;width:calc(var(--sz,160px)*.82);height:calc(var(--sz,160px)*.12);margin-left:calc(var(--sz,160px)*-.41);border-radius:50%;background:radial-gradient(closest-side,#0009,transparent);pointer-events:none}
@media(max-width:980px){.inspTop .rleft.insp3d{width:240px;height:240px}.rart.o3dBox{--sz:205px}}

/* ---------- v9: case opening animation (timed to the supplied sound) ----------
   sound hits: 30 thump | 105 click | 280 snap | 425 BIG hit | 675 last hit. Everything coloured is gone by ~0.85 s. */
.preview svg.csAnim{overflow:visible;animation:none;transform-origin:50% 90%}
.preview svg.csAnim.go{animation:csSquash .62s ease-out both}
@keyframes csSquash{0%{transform:scale(1)}5%{transform:scale(1.05,.94) translateY(3px)}17%{transform:scale(.99,1.025) translateY(-3px)}27%{transform:scale(1)}45%{transform:scale(1.012,.988)}60%{transform:scale(1)}68%{transform:scale(1.035,.965) translateY(3px)}80%{transform:scale(.995,1.01)}100%{transform:scale(1)}}
.preview.csPunch{animation:csPunch .34s ease-out .425s both}
@keyframes csPunch{0%{transform:scale(1)}35%{transform:scale(1.03)}100%{transform:scale(1)}}
.csAnim .csx-lid,.csAnim .csx-lidb{transform-box:fill-box;transform-origin:50% 0}
.csAnim .csx-card{transform-box:fill-box;transform-origin:50% 100%}
.csAnim .csx-lidb{opacity:0;filter:brightness(.5)}
.csAnim .csx-inside,.csAnim .csx-seam,.csAnim .csx-floor{opacity:0}
.csAnim.go .csx-lid{animation:csLid .5s ease-out .19s both}
.csAnim.go .csx-lidb{animation:csLidB .5s ease-out .19s both}
.csAnim.go .csx-c0{animation:csC0 .7s cubic-bezier(.2,.9,.25,1) .37s both}
.csAnim.go .csx-c1{animation:csC1 .7s cubic-bezier(.2,.9,.25,1) .40s both}
.csAnim.go .csx-c2{animation:csC2 .7s cubic-bezier(.2,.9,.25,1) .34s both}
.csAnim.go .csx-inside{animation:csIn .3s ease-out .34s both}
.csAnim.go .csx-seam{animation:csSeam .3s ease-in .09s both}
.csAnim.go .csx-floor{animation:csFloor .6s ease-out .3s both}
@keyframes csLid{0%{transform:translateY(0) scaleY(1) rotate(0deg);opacity:1}18%{transform:translateY(-8px) scaleY(.97) rotate(-.5deg)}34%{transform:translateY(-32px) scaleY(.78) rotate(-2deg);opacity:1}34.1%{opacity:0}47%{transform:translateY(-56px) scaleY(.56) rotate(-6deg);opacity:0}100%{transform:translateY(-48px) scaleY(.62) rotate(-4deg);opacity:0}}
@keyframes csLidB{0%,34%{transform:translateY(-32px) scaleY(.78) rotate(-2deg);opacity:0}34.1%{opacity:1}47%{transform:translateY(-56px) scaleY(.56) rotate(-6deg);opacity:1}62%{transform:translateY(-45px) scaleY(.65) rotate(-3.5deg);opacity:1}100%{transform:translateY(-48px) scaleY(.62) rotate(-4deg);opacity:1}}
@keyframes csC0{0%{transform:translate(0,0) rotate(0deg) scale(1)}45%{transform:translate(-10px,-36px) rotate(-7deg) scale(1.06)}100%{transform:translate(-14px,-32px) rotate(-8deg) scale(1.06)}}
@keyframes csC1{0%{transform:translate(0,0) rotate(0deg) scale(1)}45%{transform:translate(10px,-38px) rotate(7deg) scale(1.06)}100%{transform:translate(14px,-34px) rotate(8deg) scale(1.06)}}
@keyframes csC2{0%{transform:translate(0,0) scale(1)}45%{transform:translate(0,-30px) scale(1.06)}100%{transform:translate(0,-25px) scale(1.06)}}
@keyframes csIn{to{opacity:1}}
@keyframes csSeam{0%{opacity:0}70%{opacity:1}100%{opacity:0}}
@keyframes csFloor{0%{opacity:0}35%{opacity:1}100%{opacity:.5}}
.csAnim.csDone .csx-lid{opacity:0}
.csAnim.csDone .csx-lidb{opacity:1;transform:translateY(-48px) scaleY(.62) rotate(-4deg)}
.csAnim.csDone .csx-c0{transform:translate(-14px,-32px) rotate(-8deg) scale(1.06)}
.csAnim.csDone .csx-c1{transform:translate(14px,-34px) rotate(8deg) scale(1.06)}
.csAnim.csDone .csx-c2{transform:translate(0,-25px) scale(1.06)}
.csAnim.csDone .csx-inside{opacity:1}
.csFx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.csFx i{position:absolute;display:block;pointer-events:none}
.csRays{left:var(--cx);top:var(--cy);width:min(150%,1300px);aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#ffffffd0 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);mix-blend-mode:screen;opacity:0}
.csBeam{left:var(--cx);bottom:calc(100% - var(--cy));width:min(70%,340px);height:130%;translate:-50% 0;transform-origin:50% 100%;background:linear-gradient(to top,#fff 0,var(--ca) 10%,transparent 88%);clip-path:polygon(0 0,100% 0,60% 100%,40% 100%);mix-blend-mode:screen;opacity:0;filter:blur(7px)}
.csCore{left:var(--cx);top:var(--cy);width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--ca) 34%,transparent 68%);mix-blend-mode:screen;opacity:0}
.csRing{left:var(--cx);top:var(--cy);width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:3px solid #fff;opacity:0}
.csFx.go .csRays{animation:csRays .7s ease-out .425s both}
.csFx.go .csBeam{animation:csBeam .5s cubic-bezier(.2,.7,.2,1) .425s both}
.csFx.go .csCore{animation:csCore .5s ease-out .425s both}
.csFx.go .csRing{animation:csRing .5s ease-out .425s both}
.csFx.go .csRing.r2{animation-delay:.66s;border-color:var(--ca)}
@keyframes csRays{0%{opacity:0;transform:rotate(0deg) scale(.5)}25%{opacity:.55}100%{opacity:0;transform:rotate(26deg) scale(1.15)}}
@keyframes csBeam{0%{opacity:0;transform:scaleY(.1)}25%{opacity:.85;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.05)}}
@keyframes csCore{0%{opacity:0;transform:scale(.2)}20%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(2.4)}}
@keyframes csRing{0%{opacity:.9;transform:scale(.25)}100%{opacity:0;transform:scale(6)}}
.csWash{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at var(--cx) var(--cy),#fff 0,#ffffffb8 38%,transparent 82%);opacity:0}

/* ---------- v7: reel cards carry the rarity colour; the reel background and marker never change ---------- */
.r-common{--rc-70:#9fb2c6b3;--rc-35:#9fb2c659}
.r-uncommon{--rc-70:#7be05ab3;--rc-35:#7be05a59}
.r-rare{--rc-70:#3fc0f0b3;--rc-35:#3fc0f059}
.r-epic{--rc-70:#9d62ffb3;--rc-35:#9d62ff59}
.r-legendary{--rc-70:#f4b93ab3;--rc-35:#f4b93a59}
.r-junk{--rc-70:#b5926ab3;--rc-35:#b5926a59}
.strip .icard{border:2px solid var(--rc);background:radial-gradient(72% 52% at 50% 40%,var(--rc-70),transparent 80%),linear-gradient(180deg,var(--rc-45),var(--rc-25)),#203274;box-shadow:inset 0 0 28px var(--rc-25)}
.strip .icard::after{height:6px}
.strip .icard .nm{color:#fff;text-shadow:0 1px 3px #000a}
.strip .icard .vl{color:#e6f0fa}
.strip .icard.win{box-shadow:inset 0 0 28px var(--rc-25),0 0 0 2px var(--rc),0 0 70px var(--rc-45)}

/* ---------- v9: My items page ---------- */
.ipWrap{padding-top:6px}
.ipStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 18px}
.ipStats>div{min-width:0;padding:14px 16px;border:1px solid var(--line-2);border-radius:5px;background:linear-gradient(180deg,#263a89aa,#22347aaa)}
.ipStats span{display:block;color:var(--muted);font:600 12.5px var(--font-body)}
.ipStats strong{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 22px/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.ipStats small{color:var(--muted);font-size:12.5px}
.ipBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ipBar .chips{display:flex;gap:8px;flex-wrap:wrap}
.ipBar .chips button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff08;color:var(--text-2);font:600 13px var(--font-body);cursor:pointer}
.ipBar .chips button.on{border-color:var(--cyan);background:#3fd2ff24;color:#fff}
.ipBar .chips i{width:9px;height:9px;border-radius:50%}
.ipTools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ipTools .btn{min-height:40px;padding:0 16px;font-size:13.5px}
.ipGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.ipCard{height:auto;min-height:250px;justify-content:flex-start;padding:0;transition:opacity .22s,transform .22s}
.ipCard.gone{opacity:0;transform:scale(.9)}
.ipCard .ipFace{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:14px 8px 8px;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.ipCard .ipFace:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:5px}
.ipCard .art{width:74%}
.ipCard .rt{margin-top:2px;color:var(--rc);font:800 10.5px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.ipCard .nm{font-size:14px}
.ipCard .vl{margin-bottom:4px}
.ipCard .ipSell{width:calc(100% - 20px);min-height:38px;margin:auto 10px 14px;padding:0 10px;font-size:13.5px}
.ipCard.hl{border-color:var(--rc);box-shadow:0 0 0 2px var(--rc),0 0 44px var(--rc-45);animation:ipPulse 1.4s ease-in-out 3}
@keyframes ipPulse{50%{box-shadow:0 0 0 3px var(--rc),0 0 70px var(--rc)}}
.ipNew{position:absolute;top:9px;left:9px;z-index:2;padding:3px 9px;border-radius:4px;background:var(--rc);color:#080d1d;font:800 11px var(--font-display)}
.ipCard.sel{border-color:#fff;box-shadow:0 0 0 2px #fff}
.ipCheck{position:absolute;top:0;right:2px;display:grid;place-items:center;width:24px;height:24px;border:2px solid #ffffff88;border-radius:4px;background:#1d3776aa;color:#080d1d}
.ipCard.sel .ipCheck{border-color:var(--cyan);background:var(--cyan)}
.ipCheck .i{width:15px;height:15px}
.ipSelBar{position:sticky;bottom:14px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;border:1px solid var(--line-3);border-radius:5px;background:#1f3073f5;box-shadow:0 20px 50px #000a;backdrop-filter:blur(10px)}
.ipSelBtns{display:flex;gap:8px;flex-wrap:wrap}
.ipSelBar .btn{min-height:40px;padding:0 16px;font-size:13.5px}
.ipEmpty{padding:70px 12px}
@media(max-width:640px){.ipStats{grid-template-columns:1fr 1fr}.ipStats>div:last-child{grid-column:1/-1}.ipGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ipCard{min-height:230px}}

/* ---------- v9: long prize names wrap to two lines on the reel cards instead of being cut off ---------- */
.strip .icard .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;overflow:hidden;text-overflow:clip}

/* ---------- v10: the case window is a pop-up over the home page, with an X and always-visible points ---------- */
.stage{display:grid;place-items:start center;padding:clamp(10px,3.5vh,34px) 14px;background:#04060cbd;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fadeIn .2s}
.stage[hidden]{display:none}
.stageIn{position:relative;width:min(1100px,100%);max-width:none;margin:0 auto;padding:0 22px 26px;border:1px solid var(--line-3);border-radius:6px;background:radial-gradient(90% 38% at 50% 0%,var(--acc-a),transparent 70%),linear-gradient(180deg,#21357c,#203274);box-shadow:0 40px 120px #000c,0 0 0 1px #ffffff0a inset;animation:modalIn .3s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}}
.stageBar{position:sticky;top:0;z-index:7;gap:12px;padding:16px 0 12px;background:linear-gradient(180deg,#21357c 80%,#21357c00)}
.stageBar .balChip{margin-left:auto}
.stageTools{margin-left:0}
.xBtn{flex:none;width:44px;height:44px}
.xBtn:disabled{opacity:.35;cursor:not-allowed}
.balChip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:#fff;font:700 15px var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.balChip[hidden]{display:none}
.balChip .cn svg{width:20px;height:20px;display:block}
.balChip small{color:var(--muted);font:600 12px var(--font-body)}
.balChip.bump{animation:balBump .5s ease-out}
@keyframes balBump{40%{transform:scale(1.08);border-color:var(--gold)}}
@media(max-width:720px){
  .stage{padding:0}
  .stageIn{width:100%;min-height:100%;border-radius:0;border-width:0;padding:0 14px 40px}
  .stageBar{flex-wrap:wrap;padding-top:12px}
  .stageTitle{order:1;flex:1 1 0;min-width:0}
  .xBtn{order:2}
  .stageBar .balChip{order:3;margin-left:0}
  .stageTools{order:4;margin-left:auto}
}

@media(max-width:720px){
  .stageTitle{flex:1 1 calc(100% - 64px)}
  .reel .skipBtn{left:auto;right:10px;bottom:8px;transform:none}
}

/* junk is not a celebration: no rays behind it */
.rcard.r-junk .aura{display:none}

/* ---------- v14: one case at a time, "Total cost" with Provably fair beside it ---------- */
#controls{gap:18px}
#controls .cleft{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#controls .cost{text-align:left;line-height:1.2}
#controls .cost span{display:block;color:var(--muted);font:600 13px var(--font-body)}
#controls .cost strong{display:flex;align-items:center;gap:7px;margin-top:2px;font:800 26px/1 var(--font-display);font-variant-numeric:tabular-nums}
#controls .cost .coin{width:24px;height:24px}
.fairBtn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border:1px solid var(--line-2);border-radius:5px;background:#ffffff0a;color:var(--text);font:700 14px var(--font-body);cursor:pointer;transition:background .2s,border-color .2s}
.fairBtn .i{width:22px;height:22px;color:var(--lime)}
.fairBtn:hover{background:#ffffff14;border-color:var(--line-3)}
.fairBtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- v14: the small per-case Provably fair window ---------- */
.seedBox{width:min(480px,100%)}
.seedBox h2{font-size:22px}
.swFor{margin:-2px 0 8px;color:var(--gold);font:700 14.5px var(--font-display)}
.swLead{font-size:14px;line-height:1.55;color:var(--text-2)}
.swRow{display:flex;gap:8px}
.swRow input{flex:1;min-width:0}
.swRow .btn{min-height:44px;padding:0 14px;font-size:13.5px}
.swH{margin:20px 0 8px;font-size:16px}
.swPast{margin-bottom:8px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:#ffffff06}
.swPast summary{cursor:pointer;font:700 13.5px var(--font-body)}
.swNote{font-size:12.5px;line-height:1.5;color:var(--faint)}

/* ---------- v14: labelled toolbar buttons (bigger, easier to read) ---------- */
.iconBtn.tool{display:inline-flex;align-items:center;gap:9px;width:auto;height:46px;padding:0 15px 0 12px;border-radius:5px;color:var(--text);font:700 14px var(--font-body);white-space:nowrap}
.iconBtn.tool .i{width:24px;height:24px;flex:none}
.iconBtn.tool:hover{background:#ffffff14;border-color:var(--line-3)}
.stageTools{gap:8px;flex-wrap:wrap}
.subnav button .i{width:20px;height:20px}
.subnav button,.subnav a{font-size:14.5px}

/* ---------- v14: the upgrade spin window ---------- */
.upgOv{position:fixed;inset:0;z-index:104;display:grid;place-items:center;padding:18px;background:#04060cd9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .2s}
.upgOv[hidden]{display:none}
.upgBox{width:min(760px,100%);padding:26px 26px 24px;text-align:center;border:1px solid var(--line-3);border-radius:6px;background:radial-gradient(90% 50% at 50% 0%,var(--ua-a,#3fd2ff38),transparent 70%),linear-gradient(180deg,#21347d,#203274);box-shadow:0 40px 120px #000c;animation:modalIn .3s var(--ease);outline:none}
.upgTag{display:inline-block;padding:5px 12px;border-radius:4px;background:#ffffff14;color:var(--gold);font:800 12px var(--font-display);letter-spacing:.09em;text-transform:uppercase}
.upgBox h2{margin-top:10px;font-size:clamp(24px,4vw,32px)}
.upgSub{margin:6px 0 4px;color:var(--text-2);font-size:15px}
.upgSub b{color:#fff}
.upgReel{position:relative;overflow:hidden;height:214px;margin:16px 0 12px;border:1px solid var(--line-2);border-radius:5px;background:#1d3171}
.upgReelBonus{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;background:linear-gradient(135deg,#ffe08a,#f5c04a);color:#1b1206;font:900 15px var(--font-display,inherit);padding:3px 12px;border-radius:4px;box-shadow:0 3px 10px #0007;letter-spacing:.02em}
.upgReel::before,.upgReel::after{content:"";position:absolute;top:0;bottom:0;width:18%;z-index:3;pointer-events:none}
.upgReel::before{left:0;background:linear-gradient(90deg,#1d3171,#1d317100)}
.upgReel::after{right:0;background:linear-gradient(270deg,#1d3171,#1d317100)}
.upgStrip{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:12px;padding-left:0;will-change:transform}
.upgMarker{position:absolute;left:50%;top:0;bottom:0;z-index:4;width:0;pointer-events:none}
.upgMarker::before{content:"";position:absolute;top:8px;bottom:8px;left:-1.5px;width:3px;border-radius:3px;background:#fff;box-shadow:0 0 18px #fff}
.ucard{flex:none;width:150px;padding:8px 8px 12px;border:2px solid var(--acc);border-radius:5px;background:radial-gradient(80% 55% at 50% 38%,var(--acc-a),transparent 78%),#203379;text-align:center;transition:opacity .5s,filter .5s,transform .5s}
.ucard svg{display:block;width:100%;height:auto}
.ucard b{display:block;margin-top:2px;font:700 14px var(--font-display)}
.ucard small{color:var(--muted);font-size:12.5px}
.ucard.win{transform:scale(1.06);box-shadow:0 0 0 2px var(--acc),0 0 46px var(--acc)}
.ucard.dim{opacity:.3;filter:saturate(.5)}
.upgOdds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 6px}
.uodd{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);border-radius:4px;background:#ffffff08;color:var(--text-2);font-size:13px}
.uodd i{width:9px;height:9px;border-radius:3px;background:var(--acc)}
.uodd b{font-variant-numeric:tabular-nums;color:#fff}
.uodd.hit{border-color:var(--acc);background:#ffffff14;color:#fff}
.upgAct{margin-top:16px}
.upgAct .btn{min-width:min(340px,100%)}
@media(max-width:720px){
  .iconBtn.tool{flex-direction:column;justify-content:center;gap:3px;width:64px;height:58px;padding:0;font-size:11.5px}
  .iconBtn.tool .i{width:24px;height:24px}
  .stageTools{order:4;margin-left:0;width:100%;justify-content:space-between}
  #controls .cleft{width:100%;justify-content:space-between}
  .upgBox{padding:20px 14px 18px}
  .upgReel{height:190px}
  .ucard{width:132px}
}

@media(min-width:721px){
  .stageBar{padding-right:58px}
  .stageBar .xBtn{position:absolute;top:16px;right:0}
}

/* ---------- v15: basic upgrade pair, multiplier badge, question mark card ---------- */
.upgPair{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 8px}
.upgPair .ucard{width:170px}
.upgPair .ucard.from{opacity:.55;filter:saturate(.6)}
.upgPair .ucard.win{transform:scale(1.05);box-shadow:0 0 0 2px var(--acc),0 0 42px var(--acc)}
.upgArrow{width:38px;height:38px;color:var(--gold);flex:none}
.multBig{margin:16px auto 8px;width:170px;height:170px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffffffaa,transparent 46%),var(--acc);color:#1b1206;font:900 86px/1 var(--font-display);box-shadow:0 0 70px var(--acc),inset 0 -12px 30px #0004;animation:multPop .5s var(--ease)}
@keyframes multPop{0%{transform:scale(.4) rotate(-12deg);opacity:0}70%{transform:scale(1.1) rotate(3deg)}100%{transform:none;opacity:1}}
.qmRow{display:flex;justify-content:center;gap:14px;margin:18px 0 8px;perspective:900px}
.qmCard{width:min(150px,29%);aspect-ratio:3/4.3;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.qmCard:disabled{cursor:default}
.qmCard:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:5px}
.qmIn{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.qmCard:not(:disabled):hover .qmIn{transform:translateY(-7px)}
.qmCard.flip .qmIn{transform:rotateY(180deg)}
.qmBack,.qmFace{position:absolute;inset:0;display:grid;place-items:center;border-radius:5px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.qmBack{background:linear-gradient(160deg,#324382,#203379);border:2px solid var(--line-3)}
.qmBack img{width:86%;height:auto}
.qmFace{transform:rotateY(180deg);align-content:center;gap:3px;padding:8px;text-align:center;border:2px solid var(--acc);background:radial-gradient(80% 55% at 50% 38%,#ffffff1f,transparent 78%),#203379}
.qmFace svg{width:100%;height:auto}
.qmFace b{font:700 14px var(--font-display)}
.qmFace small{color:var(--muted);font-size:12px}
.qmX{font:900 60px/1 var(--font-display);color:var(--acc)}
.qmCard.mine .qmFace{box-shadow:0 0 0 2px var(--acc),0 0 36px var(--acc)}
.qmCard.miss .qmFace{opacity:.86;filter:saturate(.85)}
.qmCard{position:relative}
.qmCard.miss::after{content:"Would have been";position:absolute;left:0;right:0;bottom:-24px;text-align:center;color:var(--muted);font:600 12px/1 var(--font-body)}
.qmRow:has(.miss){margin-bottom:34px}
.jokDeal .qmCard{cursor:default}.jokDeal .qmFace{--acc:#a970ff}.jokDeal .qmCard.miss::after{content:"Not kept"}.jokDeal .qmCard.mine::after{content:"Yours";position:absolute;left:0;right:0;bottom:-24px;text-align:center;color:#c9a6ff;font:800 12px/1 var(--font-body)}.jokDeal .jokArt{width:78%;height:auto}
.qmNote{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.reelMult{position:absolute;top:10px;right:12px;z-index:6;padding:3px 14px;border-radius:4px;background:linear-gradient(180deg,#ffe08a,#f5c04a);color:#1b1206;font:900 26px/1.25 var(--font-display);box-shadow:0 0 30px #f5c04a88;pointer-events:none;animation:multPop .4s var(--ease)}
.rmulti{display:inline-block;margin-left:8px;padding:2px 11px;border-radius:4px;background:linear-gradient(180deg,#ffe08a,#f5c04a);color:#1b1206;font:900 15px var(--font-display);vertical-align:middle}
.rcalc{margin-left:10px;color:var(--muted);font-size:14px}
@media(max-width:720px){.upgPair .ucard{width:120px}.upgArrow{width:28px;height:28px}.multBig{width:140px;height:140px;font-size:70px}.qmRow{gap:8px}}
.qmX{font-size:clamp(34px,10.5vw,60px)}
@media(max-width:720px){.qmFace{padding:4px}.qmFace b{font-size:12.5px}.qmFace small{font-size:10.5px;line-height:1.25}}
.igrid .icard .nm{line-height:1.08;font-size:13px}
.igrid .icard .nm{flex:none}

/* ---------- v16: win-screen line, achievements ---------- */
.rline{margin:4px 0 2px;font:800 12.5px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.rcard.sad .rline{color:var(--muted)}
.achGroup{margin-bottom:22px}
.achGroup h3{margin:0 0 10px;padding-left:10px;border-left:3px solid var(--gold);font-size:16px}
.achGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ach{position:relative;display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:5px;background:#ffffff06;opacity:.8}
.ach.done{opacity:1;border-color:#f5c04a88;background:linear-gradient(180deg,#f5c04a16,#ffffff06)}
.achIco{position:relative;flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:5px;background:#ffffff0d;color:var(--muted)}
.ach.done .achIco{background:linear-gradient(180deg,#ffe08a,#f5c04a);color:#1b1206;box-shadow:0 0 22px #f5c04a55}
.achIco svg{width:28px;height:28px}.achIco .achCk{width:32px;height:32px;object-fit:contain}
.achIco b{font:900 18px var(--font-display)}
.achIco i{position:absolute;right:-6px;bottom:-6px;min-width:22px;padding:0 5px;border:1px solid var(--line-3);border-radius:4px;background:#203379;color:#fff;font:800 11px/18px var(--font-display);font-style:normal;text-align:center}
.achTxt{min-width:0;flex:1}
.achTxt h4{margin:0 0 2px;font-size:15px}
.achTxt p{margin:0 0 8px;color:var(--text-2);font-size:13px;line-height:1.4}
.achBar{height:6px;border-radius:4px;background:#ffffff14;overflow:hidden}
.achBar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.ach.done .achBar span{background:linear-gradient(90deg,#f5c04a,#ffe08a)}
.achTxt small{display:block;margin-top:5px;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.achCheck{position:absolute;top:10px;right:10px;color:var(--lime)}
.achCheck svg{width:18px;height:18px}
@media(max-width:980px){.achGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.achGrid{grid-template-columns:1fr}}

/* ---------- v17: tabs, card buttons, quick-open window ---------- */
.tabPane[hidden]{display:none}
.tabPane{animation:fadeIn .25s ease-out}
.cbtns{display:flex;gap:8px;align-items:center}
.cbtns .btn{min-height:42px;padding:0 16px;font-size:14px}
.cbtns .inspectBtn{padding:0 14px}
.daily .dact .cbtns{flex-wrap:wrap;justify-content:flex-end}
.stage:not(.mini) .miniOnly{display:none}
.stage.mini{place-items:center}
.stage.mini .stageIn{width:min(840px,100%);padding-bottom:22px}
.stage.mini .inside{display:none}
.stage.mini .stageTools .tool:not(#sound){display:none}
.stage.mini .arena{min-height:300px;margin-top:6px}
.stage.mini .preview svg{width:min(330px,68%)}
.stage.mini .rcard{width:100%}

/* ---------- v17: smooth idle float. Transform only, on its own layer, no filter repainting every frame ---------- */
@keyframes floatY{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
.heroArt{position:relative}
.heroArt svg{position:relative;z-index:1;filter:none;animation:floatY 7s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
.heroArt::after{content:"";position:absolute;left:12%;right:12%;bottom:2%;height:10%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,#000b,transparent 72%)}
/* the mascot kneels next to the big case */
.preview{position:relative}
.preview svg{position:relative;z-index:1;filter:none;animation:floatY 6.5s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
.preview::after{content:"";position:absolute;left:50%;bottom:22px;width:min(400px,62%);height:26px;translate:-50% 0;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,#000c,transparent 72%);pointer-events:none}
.stage.mini .preview::after{bottom:16px;width:min(280px,56%)}
@media(prefers-reduced-motion:reduce){.heroArt svg,.preview svg{animation:none}}

/* ---------- v17: win-card backgrounds (11) and layouts (3) ---------- */
.rcard>*{position:relative;z-index:1}
.rcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.rcard:not(.bg-rays):not(.bg-burst) .aura{display:none}
.bg-spot{background:radial-gradient(70% 130% at 16% 50%,var(--rc-45),transparent 62%),linear-gradient(180deg,#233986,#203276)!important}
.bg-spot::before{background:radial-gradient(120% 120% at 50% 50%,transparent 55%,#0009)}
.bg-grid::before{background:linear-gradient(var(--rc-25) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,var(--rc-25) 1px,transparent 1px) 0 0/30px 30px;-webkit-mask:radial-gradient(75% 110% at 20% 50%,#000,transparent 78%);mask:radial-gradient(75% 110% at 20% 50%,#000,transparent 78%)}
.bg-dots::before{background:radial-gradient(var(--rc-45) 1.7px,transparent 2.3px) 0 0/18px 18px;-webkit-mask:radial-gradient(80% 120% at 18% 50%,#000,transparent 80%);mask:radial-gradient(80% 120% at 18% 50%,#000,transparent 80%)}
.bg-rings::before{background:repeating-radial-gradient(circle at 17% 50%,transparent 0 26px,var(--rc-25) 26px 28px);-webkit-mask:linear-gradient(90deg,#000 20%,transparent 92%);mask:linear-gradient(90deg,#000 20%,transparent 92%);animation:ringPulse 4s ease-in-out infinite alternate}
@keyframes ringPulse{to{transform:scale(1.08);opacity:.6}}
.bg-burst .aura{width:640px;background:repeating-conic-gradient(from 0deg,var(--rc-45) 0 4deg,transparent 4deg 15deg);animation:spin 16s linear infinite reverse}
.bg-burst{box-shadow:0 0 120px var(--rc-45),0 30px 70px #000a!important}
.bg-bokeh::before{background:radial-gradient(circle at 12% 30%,var(--rc-45) 0 14px,transparent 15px),radial-gradient(circle at 26% 78%,var(--rc-25) 0 26px,transparent 27px),radial-gradient(circle at 44% 18%,var(--rc-25) 0 10px,transparent 11px),radial-gradient(circle at 70% 72%,var(--rc-25) 0 34px,transparent 35px),radial-gradient(circle at 90% 24%,var(--rc-45) 0 18px,transparent 19px);filter:blur(3px);animation:bokeh 9s ease-in-out infinite alternate}
@keyframes bokeh{to{transform:translate(14px,-10px) scale(1.04)}}
.bg-diag::before{background:repeating-linear-gradient(115deg,var(--rc-25) 0 10px,transparent 10px 30px);-webkit-mask:linear-gradient(90deg,#000 10%,transparent 85%);mask:linear-gradient(90deg,#000 10%,transparent 85%)}
.bg-aurora{background:radial-gradient(60% 80% at 20% 30%,var(--rc-45),transparent 60%),radial-gradient(60% 80% at 82% 82%,#3fd2ff55,transparent 60%),radial-gradient(50% 70% at 60% 8%,#ff6bd63a,transparent 60%),linear-gradient(180deg,#233986,#203276)!important;background-size:170% 170%!important;animation:rpop .6s cubic-bezier(.2,1.25,.4,1),aurora 12s ease-in-out .6s infinite alternate!important}
@keyframes aurora{from{background-position:0% 0%}to{background-position:100% 100%}}
.bg-stars::before{background:radial-gradient(1.8px 1.8px at 12% 22%,#fff,transparent 60%),radial-gradient(1.3px 1.3px at 30% 70%,#fff,transparent 60%),radial-gradient(2px 2px at 44% 30%,#fff,transparent 60%),radial-gradient(1.4px 1.4px at 58% 82%,#fff,transparent 60%),radial-gradient(1.8px 1.8px at 72% 18%,#fff,transparent 60%),radial-gradient(1.3px 1.3px at 86% 60%,#fff,transparent 60%),radial-gradient(2px 2px at 94% 30%,#fff,transparent 60%),radial-gradient(1.5px 1.5px at 6% 78%,#fff,transparent 60%);animation:twinkle 2.6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.bg-tri::before{background:repeating-linear-gradient(60deg,var(--rc-25) 0 1px,transparent 1px 24px),repeating-linear-gradient(-60deg,var(--rc-25) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,var(--rc-25) 0 1px,transparent 1px 24px);-webkit-mask:radial-gradient(80% 120% at 20% 50%,#000,transparent 82%);mask:radial-gradient(80% 120% at 20% 50%,#000,transparent 82%)}
@media(min-width:721px){
  .rcard.lay-b{grid-template-columns:minmax(0,1fr) auto;padding:20px 16px 20px 34px}
  .rcard.lay-b .rleft{order:2}
  .rcard.lay-c{grid-template-columns:1fr;justify-items:center;text-align:center;width:min(540px,100%);padding:18px 28px 22px}
  .rcard.lay-c .rright{justify-items:center}
  .stage.mini .rcard.lay-c{width:min(540px,100%)}
}

/* ---------- v17: achievements (tiers, summary, filter) ---------- */
.achSum{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 22px}
.achStat{display:grid;gap:2px;min-width:150px;padding:10px 16px;border:1px solid var(--line);border-radius:5px;background:#ffffff08}
.achStat b{font:800 24px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.achStat span{color:var(--muted);font-size:12.5px}
.achSum .chips{margin-left:auto}
.ach{--tc:#8fa3ba}
.t-bronze{--tc:#d18a4d}.t-silver{--tc:#c9d5e3}.t-gold{--tc:#f5c04a}.t-platinum{--tc:#7fd6ff}.t-diamond{--tc:#ff8ae8}
.ach.done{border-color:color-mix(in srgb,var(--tc) 60%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 14%,transparent),#ffffff06)}
.ach.done .achIco{background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 55%,#fff),var(--tc));color:#1b1206;box-shadow:0 0 22px color-mix(in srgb,var(--tc) 45%,transparent)}
.ach:not(.done) .achIco{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tc) 45%,transparent)}
.ach.done .achBar span{background:linear-gradient(90deg,var(--tc),#fff8)}
.achRew{display:block;margin-top:3px;color:var(--tc);font:700 11.5px var(--font-body);letter-spacing:.02em}
.t-diamond.ach.done .achIco{animation:diaShine 3.2s ease-in-out infinite}
@keyframes diaShine{50%{filter:brightness(1.25)}}

/* ---------- v17: achievement notification, top right ---------- */
.achToasts{position:fixed;top:78px;right:18px;z-index:180;display:flex;flex-direction:column;width:min(370px,calc(100vw - 24px));pointer-events:none}
.achT{--tc:#f5c04a;position:relative;overflow:hidden;display:flex;gap:14px;align-items:center;max-height:220px;margin-bottom:12px;padding:16px 38px 20px 16px;border:1px solid color-mix(in srgb,var(--tc) 65%,transparent);border-radius:5px;background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 60%),linear-gradient(180deg,#253a85,#213478);box-shadow:0 18px 50px #000b,0 0 40px color-mix(in srgb,var(--tc) 22%,transparent);pointer-events:auto;cursor:pointer;animation:achIn .5s cubic-bezier(.2,1.1,.3,1) both}
.achT.out{animation:achOut .38s ease-in forwards}
@keyframes achIn{from{opacity:0;transform:translateX(60px) scale(.94)}}
@keyframes achOut{to{opacity:0;transform:translateX(50px);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}}
.achTi{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:5px;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 55%,#fff),var(--tc));color:#1b1206;box-shadow:0 0 26px color-mix(in srgb,var(--tc) 55%,transparent)}
.achTi svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.achTi b{font:900 20px var(--font-display)}
.achTb{min-width:0;display:grid;gap:2px}
.achTb small{color:var(--tc);font:800 11px var(--font-display);letter-spacing:.09em;text-transform:uppercase}
.achTb b{font:800 19px/1.2 var(--font-display)}
.achTb p{margin:0;color:var(--text-2);font-size:13px;line-height:1.35}
.achR{margin-top:3px;color:#fff;font:700 13px var(--font-body)}
.achR i{display:inline-block;width:4px;height:4px;margin:0 6px 2px;border-radius:50%;background:var(--tc)}
.achX{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;border-radius:50%;background:#ffffff14;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.achBarT{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 40%,#fff));transform-origin:left center;animation:achBar 5.5s linear forwards}
@keyframes achBar{to{transform:scaleX(0)}}
@media(max-width:720px){.achToasts{top:70px;right:12px}.achSum .chips{margin-left:0}}

.achT.t-bronze{--tc:#d18a4d}.achT.t-silver{--tc:#c9d5e3}.achT.t-gold{--tc:#f5c04a}.achT.t-platinum{--tc:#7fd6ff}.achT.t-diamond{--tc:#ff8ae8}

.subnav{gap:2px;padding:6px}
.subnav button,.subnav a{padding:0 11px;font-size:14px}
.subnav .sp{min-width:8px}

/* ---------- v18: new prizes, windows and screens ---------- */
.t-mythic{--tc:#ff5fd2}.achT.t-mythic{--tc:#ff5fd2}
.achT.lvlUp{--tc:#3fd2ff;box-shadow:0 0 0 1px #3fd2ff66,0 14px 38px #0008,0 0 28px #3fd2ff33}
.t-mythic.ach.done .achIco{animation:diaShine 2.4s ease-in-out infinite}
.rcard>.rright .rgold,.rgold{background:linear-gradient(180deg,#fff2a8,#f5c04a)!important;color:#1b1206!important}
.rcard.turning .rart{animation:goldTurn 1.1s ease-in-out both}
@keyframes goldTurn{0%{filter:none;transform:scale(1)}35%{filter:brightness(2.4) sepia(1) saturate(4) hue-rotate(-8deg);transform:scale(1.18) rotate(3deg)}100%{filter:brightness(1.3) sepia(.6) saturate(2.4) hue-rotate(-8deg);transform:scale(1)}}
.rcard.turned{box-shadow:0 0 110px #f5c04a66,0 30px 70px #000a!important;border-color:#f5c04aaa!important}
.tkChance{margin-top:8px;color:#fff;font:700 15px var(--font-body);text-shadow:0 2px 12px #000c;opacity:.92}
@keyframes jokWobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.upgArrow.dn{transform:rotate(90deg)}
.midImg{display:grid;place-items:center;margin:8px 0}
.midImg img{width:170px;height:auto;filter:drop-shadow(0 0 30px #f5c04a88);animation:floatY 3.4s ease-in-out infinite}
.fortT{font:800 24px/1.05 var(--font-display);color:#d5b8ff;text-align:center}
.qmFace .fortT{font-size:clamp(17px,5.4vw,26px)}
.cbody{gap:12px}
@media(max-width:720px){.midImg img{width:140px}}

.qmFace .fortT{font-size:clamp(15px,2.6vw,21px);word-break:break-word}
.qmFace small{word-break:break-word}
.reelMult.txt{font:900 17px/1.35 var(--font-display);padding:3px 12px}

/* ---------- v18: type. Bricolage Grotesque for headings, Bungee (chunky arcade caps) for the big moments, Oxanium for numbers, Manrope for reading ---------- */
:root{--font-display:'Bricolage Grotesque','Oxanium','Trebuchet MS',system-ui,sans-serif;--font-punch:'Bungee','Bricolage Grotesque','Oxanium',system-ui,sans-serif;--font-num:'Oxanium','Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif}
h1,h2,h3{letter-spacing:-.01em}
.hero h1{font-family:var(--font-punch);font-weight:400;letter-spacing:.005em;line-height:1.08;font-size:clamp(34px,5.2vw,58px)}
.rcard h3{font-family:var(--font-punch);font-weight:400;letter-spacing:.01em;font-size:clamp(22px,2.7vw,30px);line-height:1.15}
.stageTitle h2{font-family:var(--font-punch);font-weight:400;letter-spacing:.01em;font-size:clamp(22px,3vw,30px)}
.upgBox h2,.achTb b{font-family:var(--font-punch);font-weight:400;letter-spacing:.01em}
.upgBox h2{font-size:clamp(22px,3.6vw,30px)}
.achTb b{font-size:16px;line-height:1.25}
.cname{font-weight:800;letter-spacing:-.005em}
.price,.rval,#balNum,.balOut,.hstats strong,.achStat b,.tkVal b,.cost strong,.odds,.vl,.stepN,.rcalc,.achR,.luckChip{font-family:var(--font-num);font-variant-numeric:tabular-nums}

.achGroup{margin-bottom:14px;border:1px solid var(--line);border-radius:5px;background:#ffffff05}
.achGroup>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
.achGroup>summary::-webkit-details-marker{display:none}
.achGroup>summary h3{margin:0;padding-left:10px;border-left:3px solid var(--gold);font-size:16px}
.achGroup>summary span{color:var(--muted);font:600 13px var(--font-body);font-variant-numeric:tabular-nums}
.achGroup>summary::after{content:"+";margin-left:8px;color:var(--gold);font:800 20px/1 var(--font-display)}
.achGroup[open]>summary::after{content:"\2212"}
.achGroup .achGrid{padding:0 16px 16px}

.acHistHead{margin:22px 0 10px;font-size:16px;padding-left:10px;border-left:3px solid var(--cyan)}
.acSum{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;margin:0 0 12px;padding:12px 16px;border:1px solid var(--line);border-radius:5px;background:#ffffff08}
.acSumI{display:flex;align-items:baseline;gap:8px;min-width:0}
.acSumI span{color:var(--muted);font-size:13px;font-weight:600}
.acSumI strong{font:800 22px/1 var(--font-head);font-variant-numeric:tabular-nums}
.acSumI small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:20ch}
.achOneHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.achOneHead h3{margin:0;padding-left:10px;border-left:3px solid var(--gold);font-size:17px}
.achOneHead span{color:var(--muted);font:600 13px var(--font-body);font-variant-numeric:tabular-nums}
.achCats .choice small{margin-left:6px;opacity:.65;font-size:12px;font-variant-numeric:tabular-nums}

.sechead{margin-top:26px}

/* ---------- round 18: result screen, reel labels, history ---------- */
.rtags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rtags .rmulti{margin-left:0}
.rnew{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;background:linear-gradient(180deg,#b6ff8f,#7fe04f);color:#0d2405;font:800 12.5px/1 var(--font-display);box-shadow:0 0 0 1px #d9ffc4 inset,0 0 22px #a3f04a66;animation:newPop .6s cubic-bezier(.2,1.6,.4,1) .35s both}
.rnew .i{width:14px;height:14px;fill:currentColor}
@keyframes newPop{from{opacity:0;transform:scale(.6)}}
.racts .row4{display:flex;flex-wrap:wrap;gap:8px}
.racts .row4 .btn{flex:0 1 auto;min-height:40px;padding:0 14px;font-size:13.5px;gap:7px;white-space:nowrap}
.racts .row4 .btn .i{width:16px;height:16px}
@media(max-width:720px){.racts .row4{justify-content:center}.rtags{justify-content:center}}
.strip .icard .rband{position:absolute;top:0;left:0;right:0;z-index:1;padding:7px 0 6px;background:linear-gradient(180deg,var(--rc-70),var(--rc-25));border-bottom:1px solid var(--rc-45);color:#fff;font:800 12.5px/1 var(--font-display);letter-spacing:.03em;text-shadow:0 1px 3px #000b}
.strip .icard .art{margin-top:26px}
.tkCalc{margin-top:-4px;color:var(--text-2);font:700 clamp(15px,2.4vw,20px) var(--font-display);font-variant-numeric:tabular-nums}
.tkNew{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:7px 15px;border-radius:4px;background:linear-gradient(180deg,#b6ff8f,#7fe04f);color:#0d2405;font:800 14px/1 var(--font-display);box-shadow:0 0 30px #a3f04a77}
.tkNew .i{width:15px;height:15px;fill:currentColor}
.hrow.hach{--rc:var(--gold)}
.hrow .hIco{display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:#f5c04a24;color:var(--gold)}
.hrow .hIco svg{width:24px;height:24px}
.rcard>.rright{z-index:2}   /* the mirrored layout reorders the art column, which would otherwise paint its aura over the buttons */
.aura{pointer-events:none}

/* ---------- round 19: mystery tiles in Inspect, upgrade bonus banner ---------- */
.icard.mystery{cursor:pointer;background:radial-gradient(85% 70% at 50% 30%,color-mix(in srgb,var(--rc) 14%,transparent),transparent 70%),#1f3275;border-style:dashed}
.icard.mystery .qmark{display:grid;place-items:center;width:64%;aspect-ratio:1;margin-top:16px;border-radius:50%;border:2px dashed var(--rc-45);color:var(--rc);font:900 clamp(34px,5vw,54px)/1 var(--font-display);text-shadow:0 0 22px var(--rc-45)}
.icard.mystery .nm{color:var(--muted)}
.insideNote{margin:12px 2px 0;color:var(--muted);font-size:13px;text-align:center}
.upgFine{margin:8px 0 0;color:var(--muted);font-size:12.5px;text-align:center}
.upgBonus{display:flex;align-items:center;gap:14px;margin:14px auto 0;max-width:460px;padding:10px 16px 10px 10px;border-radius:5px;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,#1f3275),#1f3275);text-align:left;animation:bonusPop .55s cubic-bezier(.2,1.4,.3,1) both}
.upgBonus b{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffffffaa,transparent 46%),var(--acc);color:#1b1206;font:900 28px/1 var(--font-display)}
.upgBonus span{font-size:14px;line-height:1.35}
.upgBonus strong{display:block;color:var(--acc);font-family:var(--font-display)}
@keyframes bonusPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.upgBonus{animation:none}}
.ach.mystery{opacity:.72;border-style:dashed}
.ach.mystery .achIco{background:#ffffff08;color:var(--muted);border:1px dashed var(--line-3)}
.ach.mystery h4{color:var(--muted);letter-spacing:.02em}
.ach.mystery p{font-style:italic}

/* ---------- cosmetic item variants (Cupcake pilot) ---------- */
.vtag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;font:800 12.5px/1 var(--font-display)}
.vtag .i{width:13px;height:13px;fill:currentColor}
.vtag.v-uncommon{background:linear-gradient(180deg,#c8f7b0,#7be05a);color:#0d2405}
.vtag.v-rare{background:linear-gradient(180deg,#a9e8fb,#3fc0f0);color:#0b1127}
.vtag.v-epic{background:linear-gradient(180deg,#d3b8ff,#9d62ff);color:#1c0c33}
.vtag.v-legendary{background:linear-gradient(180deg,#ffe08a,#f4b93a);color:#1b1206}
.vtag.v-secret{background:linear-gradient(135deg,#f4d16a,#4b4b4b 55%,#f4d16a);background-size:220% 220%;color:#ffe9a8;animation:secretShine 3.5s linear infinite;box-shadow:0 0 16px #f4d16a88}
@keyframes secretShine{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.vname{margin-top:2px;font:700 14px var(--font-display);opacity:.85}
.rcard.hasVariant .rart{filter:drop-shadow(0 0 22px #ffffff22)}

.vGrid{margin-top:18px}
.vGridH{display:flex;align-items:center;justify-content:space-between;font:800 14px var(--font-display);color:var(--muted)}
.vGridH span{font-weight:700;color:#fff}
.vGridNote{margin:6px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.4}
.vGridRow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.vtile{position:relative;aspect-ratio:1;border-radius:4px;border:1px solid var(--line);background:#213478;overflow:hidden;display:grid;place-items:center}
.vtile img{width:88%;height:88%;object-fit:contain}
.vtile.locked{display:grid;place-items:center}
.vtile.locked .qm{font:800 clamp(20px,4vw,28px)/1 var(--font-display);color:#ffffff30}
.vtile.v-uncommon{border-color:#7be05a73;box-shadow:0 0 0 1px #7be05a40 inset}
.vtile.v-rare{border-color:#3fc0f073;box-shadow:0 0 0 1px #3fc0f040 inset}
.vtile.v-epic{border-color:#9d62ff73;box-shadow:0 0 0 1px #9d62ff40 inset}
.vtile.v-legendary{border-color:#f4b93a73;box-shadow:0 0 0 1px #f4b93a40 inset}
.vtile.v-secret{border-color:#f4d16a;box-shadow:0 0 14px #f4d16a88 inset,0 0 14px #f4d16a55}
.vtileLab{position:absolute;left:0;right:0;bottom:0;padding:2px 0;text-align:center;font:800 9px var(--font-display);letter-spacing:.03em;text-transform:uppercase;background:#00000090;color:#fff}
@media(max-width:640px){.vGridRow{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ---------- free cases: two tiles side by side, clear countdown ---------- */
.freeRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.freeRow:empty{display:none}
.daily.fcard{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px 20px 18px;
  background:radial-gradient(60% 80% at 14% 20%,var(--acc-a),transparent 70%),linear-gradient(160deg,#243985,#1f3378)}
.daily.fcard:hover{border-color:var(--acc-b)}
.fhead{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center}
.fcard .dart{width:132px;margin:-6px 0}
.fcard h3{font-size:24px}
.fcard p{max-width:none;font-size:14px;line-height:1.55}
.fcard .dtag{background:var(--acc-a);color:var(--acc)}
.fcard .dtag::before{background:var(--acc)}
.fcard .streak{margin-top:0}
.fTimer{display:grid;gap:7px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#1c306db3}
.fTimerTop{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.fTimerTop span{color:var(--text-2);font:700 13px var(--font-body)}
.fTimerTop small{color:var(--muted);font-size:12.5px}
.fTimer strong{color:#fff;font:800 clamp(21px,2.2vw,26px)/1 var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fBar{display:block;height:5px;overflow:hidden;border-radius:4px;background:#ffffff14}
.fBar i{display:block;height:100%;border-radius:inherit;background:var(--acc);transition:width 1s linear}
.fTimer.ready{border-color:var(--acc-b);background:linear-gradient(180deg,var(--acc-a),#1c306db3)}
.fTimer.ready strong{color:var(--acc);font-size:clamp(18px,1.9vw,22px)}
.fcard .dact{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.fcard .fTimer,.fcard .fhead+.dact{margin-top:auto}
.fcard .dact .cbtns{flex-wrap:wrap;justify-content:flex-start}
@media(max-width:860px){.freeRow{grid-template-columns:1fr}}
@media(max-width:640px){.daily.fcard{padding:16px}.fhead{grid-template-columns:92px minmax(0,1fr);gap:12px}.fcard .dart{width:92px;margin:0}.fcard h3{font-size:21px}.fcard .dact{flex-direction:column;align-items:stretch}.fcard .dact .cbtns .btn{flex:1}}

/* ---------- skins on the reel ---------- */
.strip .icard .reelSkin{position:absolute;top:31px;right:6px;z-index:2;gap:4px;padding:3px 7px;font-size:10px;letter-spacing:.02em;box-shadow:0 2px 8px #0008}
.strip .icard.skinned .art{filter:drop-shadow(0 0 12px #ffffff55)}
.strip .icard.skinned.v-legendary .art,.strip .icard.skinned.v-secret .art{filter:drop-shadow(0 0 16px #ffd76acc)}

/* ---------- activity: profit / loss, filters ---------- */
.histBar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.histBar .choice{min-height:36px;padding:0 14px;font-size:13.5px}
.histBar .choice small{margin-left:7px;opacity:.65;font-size:12px;font-variant-numeric:tabular-nums}
.histSort{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font:600 13px var(--font-body)}
.histSort select{min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;background:#22347a;color:#fff;font:600 13.5px var(--font-body);cursor:pointer}
.hval .hnet{font:800 17px/1.2 var(--font-num);font-variant-numeric:tabular-nums}
.hval small{font-weight:600}

/* ---------- account menu, sound slider ---------- */
.balWrap{position:relative}
button.balChip{cursor:pointer;transition:background .2s,border-color .2s}
button.balChip:hover{background:#ffffff14;border-color:var(--line-3)}
.balWrap .walletPop{left:0;right:auto;top:calc(100% + 10px)}
.popHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.popHead .popTitle{margin:0}
.popHead .iconBtn{width:36px;height:36px;min-height:36px;padding:0;display:grid;place-items:center}
.popHead .iconBtn .i{width:18px;height:18px}
.popBack .i{transform:rotate(90deg)}
.popHead:has(.popBack){justify-content:flex-start}
.walletPop .popText#sessNote{margin-top:10px}
.soundPop{width:auto;min-width:250px;padding:12px 14px}
.sndRow{display:flex;align-items:center;gap:12px}
.sndRow .range{width:150px;flex:1}
.sndRow output{min-width:48px;color:var(--text-2);font:600 13px var(--font-body);text-align:right;font-variant-numeric:tabular-nums}
.sndMute{width:38px;height:38px;min-height:38px;padding:0;display:grid;place-items:center;flex:none}
.sndMute .i{width:19px;height:19px}
.sndMute.on{color:#ff8f8f;border-color:#ff8f8f66}
.soundPop.muted .range{opacity:.45}
.fcard .dart .fArt{display:block;width:100%;height:auto;max-height:120px;object-fit:contain;filter:drop-shadow(0 10px 16px #0009)}

/* ---------- help: example cards big enough to read ---------- */
.stepCard .goldEx{gap:18px;margin:16px 0 10px}
.stepCard .goldEx img{width:auto;height:clamp(130px,17vw,190px);max-width:38%;object-fit:contain;filter:drop-shadow(0 8px 18px #0009)}
.stepCard .goldEx span{font-size:12.5px}

/* =====================================================================
   v20: one look with the main site (index.html)
   Same palette, type (Big Shoulders Display + Manrope), header, buttons,
   cards, hero marquee and footer as the HQ site. Case and prize art untouched.
   ===================================================================== */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --bg:#1f3068;--bg-2:#1f3171;--surface:#203576;--surface-2:#24397b;--raised:#273c86;
  --line:#aac4ff17;--line-2:#aac4ff29;--line-3:#aac4ff47;
  --cyan:#3fd2ff;--cyan-2:#95e8ff;--blue:#1a8fd0;--lime:#a3f04a;--gold:#f5c04a;--bulb:#ffdb8f;--warn:#ffd36b;--red:#ff3348;
  --text:#f3f6ff;--text-2:#c5cee6;--muted:#aab4d2;--faint:#7d89aa;--mint:#5cffc1;--violet:#8b5cff;
  --r-xl:6px;--r-lg:5px;--r-md:4px;--r-sm:3px;
  --font-head:'Big Shoulders Display','Oswald','Arial Narrow',system-ui,sans-serif;
  --font-display:var(--font-body);   /* small labels and buttons: Manrope, like the main site */
  --font-punch:var(--font-head);
  --font-num:var(--font-body);
  --edge:inset 0 1px 0 #ffffff0a;
  --shadow-1:var(--edge);
  --shadow-2:inset 0 1px 0 #ffffff12,0 30px 80px #00000080;
}
html{scrollbar-color:#384f8d #1f326b}
body{font-size:15.5px;background:radial-gradient(1000px 560px at 18% -120px,#8b5cff3d,transparent 70%),radial-gradient(1000px 600px at 88% -160px,#3fd2ff33,transparent 70%),radial-gradient(1200px 900px at 50% 110%,#3f6bff26,transparent 70%),var(--bg);background-attachment:fixed}
::selection{background:#3fd2ff55}
h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.02;letter-spacing:.2px}

/* header: identical to the HQ site */
.topbar{background:#1f3068d9;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.topbar.scrolled{background:#1f3068f5;box-shadow:none}
.nav{max-width:1200px;padding:10px 24px;gap:26px}
.brandLogo{height:54px;filter:none}





.navToggle{border-radius:4px;background:#ffffff08}
.bal{height:44px;border-radius:4px;background:#ffffff08}
.bal strong{font:800 21px/1 var(--font-head);letter-spacing:.3px;transition:opacity .3s}
#balNum.stale,.balOut.stale{opacity:.55}
.avatar{width:44px;height:44px;background:var(--cyan);color:#04182a;font:800 20px var(--font-head)}
/* your Kick profile picture in the header; the letter shows if it cannot load */
.avatar.hasPic{position:relative;overflow:hidden;background:#2d3e7f;box-shadow:0 0 0 2px #3fd2ff80}
.avatar.hasPic>span{display:none}
.avatarPic{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar.noimg{background:var(--cyan);box-shadow:none}
.avatarBtn{padding:0;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s}
.avatarBtn:hover{transform:scale(1.05)}
.avatarBtn.hasPic:hover{box-shadow:0 0 0 2px var(--cyan)}.avatar.noimg>span{display:inline}.avatar.noimg .avatarPic{display:none}
.kickBtn{background:#53fc18;color:#0b1a06;box-shadow:inset 0 1px 0 #ffffff80}
.kickBtn:hover{filter:brightness(1.06)}
.kickBtn img{height:15px!important;filter:brightness(0)}   /* black K on Kick green, like Kick's own sign-in buttons */


/* layout + surfaces */
.shell{max-width:1200px;padding:28px 24px 56px}
.card{border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--edge)}
.panel{padding:26px}
.panelHead h2,.contentcard h2{font-size:30px}
h2.gh{font-size:clamp(34px,4.2vw,48px)}
.gsub{font-size:15.5px}
.input,.select{border-radius:4px;background-color:var(--bg-2)}
.input:focus,.select:focus{box-shadow:0 0 0 3px #3fd2ff2e}

/* buttons + chips: flat, like the HQ site */
.btn{border-radius:4px;font:700 15px/1 var(--font-body);letter-spacing:0}
.primary{background:var(--cyan);color:#04182a;box-shadow:inset 0 1px 0 #ffffff80}
.primary:hover{filter:brightness(1.08);transform:none;box-shadow:inset 0 1px 0 #ffffff80}
.secondary{background:#ffffff0a;border-color:var(--line-2)}
.secondary:hover{background:#ffffff14;border-color:var(--line-3)}
.choice{border-radius:4px;background:transparent}
.choice.active{background:#3fd2ff1f;border-color:#3fd2ff99}
.trust button{border-radius:4px;background:transparent}
.tag,.pill{border-radius:4px}
.cbadge{border-radius:3px;font:700 11.5px/1 var(--font-body)}
.balChip{border-radius:4px}
.balChip b,.balOut{font:800 19px/1 var(--font-head);letter-spacing:.3px}
.iconBtn,.iconBtn.tool,.fairBtn{border-radius:4px}
.welcome{border-radius:var(--r-lg);border-color:#3fd2ff47;background:linear-gradient(90deg,#3fd2ff1a,#3fd2ff06)}
.welcome .wIcon{border-radius:4px}

/* tab bar: same as the HQ site's tab bars, cyan for the active tab */
.subnav{top:55px;padding:5px;border-radius:4px;background:#1f3171f0}
.subnav a,.subnav button{min-height:42px;padding:0 16px;border-radius:4px}
.subnav a.on,.subnav button[data-pane].on{background:#3fd2ff1f;box-shadow:inset 0 0 0 1px #3fd2ff80}

/* weekly prize banner and the weekly board */
.voucherBar{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border:1px solid #f4b93a73;border-radius:var(--r-md);background:linear-gradient(90deg,#f4b93a1f,#f4b93a08)}
.voucherBar[hidden]{display:none}
.voucherBar>div{flex:1;min-width:0}
.voucherBar b,.wkHead b{display:block;font:800 18px/1.15 var(--font-head)}
.voucherBar span:not(.vbIco),.wkHead span:not(.vbIco){color:var(--text-2);font-size:14px}
.vbIco{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#f4b93a26;color:#f4b93a}
.vbIco .i{width:20px;height:20px}
.wkHead{display:flex;align-items:center;gap:12px;margin:4px 0 12px;padding:12px 14px;border:1px solid #f4b93a4d;border-radius:var(--r-md);background:#f4b93a0d}
.wkList{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.wkRow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:#ffffff05}
.wkRow.lead{border-color:#f4b93a80;background:#f4b93a12}
.wkRank{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:#ffffff12;font:800 13px var(--font-head)}
.wkRow.lead .wkRank{background:#f4b93a;color:#1a1200}
.wkWho{flex:1;min-width:0}
.wkWho b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkWho small{color:var(--muted);font-size:12.5px}
.wkRow strong{font:800 16px var(--font-head);white-space:nowrap}
.wkSub{margin:18px 0 8px;color:var(--muted);font:700 12px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase}
.wkList.small .wkRow{padding:8px 12px}
.wkLast{margin:14px 0 0;color:var(--muted);font-size:13.5px}
@media (max-width:640px){.voucherBar{flex-wrap:wrap}.voucherBar .btn{width:100%}}
/* clickable names and the viewer card (same look as on the home page) */
.nameBtn{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
.nameBtn:hover,.nameBtn:focus-visible{color:var(--cyan-2);text-decoration-color:currentColor}
.pcWrap{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}
.pcWrap[hidden]{display:none}
.pcBack{position:absolute;inset:0;background:#02040bcc;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pcCard{position:relative;width:min(400px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,#213880,#1e3274);box-shadow:var(--shadow-2)}
.pcX{position:absolute;top:10px;right:10px;width:36px;height:36px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff0a;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.pcHead{display:flex;align-items:center;gap:14px;margin:0 40px 6px 0}
.pcAv{position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;overflow:hidden;background:var(--cyan);color:#04182a;font:800 24px var(--font-head);box-shadow:0 0 0 2px #3fd2ff80}
.pcAv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcHead h3{margin:0;font:800 26px/1.05 var(--font-head);overflow-wrap:anywhere}
.pcHead a{color:var(--muted);font-size:13px;text-decoration:none}
.pcHead a:hover{color:var(--cyan-2)}
.pcCard h4{margin:16px 0 8px;color:var(--muted);font:700 12px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase}
.pcGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pcGrid>div{padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:#ffffff06}
.pcGrid span{display:block;color:var(--muted);font-size:12px}
.pcGrid strong{font:800 20px/1.2 var(--font-head);font-variant-numeric:tabular-nums}
.pcGrid small{color:var(--muted);font:600 12px var(--font-body)}
.pcPulls{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.pcPulls li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:#ffffff06}
.pcPulls img{width:34px;height:34px;object-fit:contain;flex:none}
.pcPulls i{width:8px;height:8px;border-radius:50%;flex:none}
.pcPulls span{flex:1;min-width:0}
.pcPulls b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcPulls small{color:var(--muted);font-size:12px}
.pcPulls strong{font:800 15px var(--font-head);white-space:nowrap}
.pcMuted{margin:0;color:var(--muted);font-size:14px}
/* hero: same backdrop as the HQ site's hero */
.hero{border-color:var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  background:radial-gradient(55% 90% at 84% 48%,#f5c04a1f,transparent 62%),radial-gradient(70% 90% at 12% 0%,#8b5cff2e,transparent 62%),linear-gradient(160deg,#213880,#1a2f72 70%)}
.hero::before{display:none}
.hero h1{font-family:var(--font-head);font-weight:800;font-size:clamp(48px,6.2vw,82px);line-height:.94;letter-spacing:.3px}
/* hero backdrop: a faint grid that fades out, a thin light line along the top, and one soft glow that drifts slowly
   behind the art. (Replaces the old casino bulb ring.) */
.marquee{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden}
.marquee::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#aac4ff0d 1px,transparent 1px),linear-gradient(90deg,#aac4ff0d 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px;
  -webkit-mask:radial-gradient(75% 85% at 72% 45%,#000 10%,transparent 72%);mask:radial-gradient(75% 85% at 72% 45%,#000 10%,transparent 72%)}
.marquee::after{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,#3fd2ffcc 30%,#8b5cffcc 70%,transparent)}
.marquee i{position:absolute;top:50%;right:-6%;width:min(62vw,640px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 50% 50%,#3fd2ff2e,#8b5cff1f 38%,transparent 66%);filter:blur(8px);animation:heroGlow 14s ease-in-out infinite alternate}
@keyframes heroGlow{from{transform:translate(0,-50%) scale(1)}to{transform:translate(-6%,-44%) scale(1.08)}}
@media(max-width:640px){.marquee i{right:-40%;top:30%;width:120vw}}
@media(prefers-reduced-motion:reduce){.marquee i{animation:none!important}}

/* type sizes: Big Shoulders is narrow, so headings and big numbers step up a size */
.cname{font:800 30px/1 var(--font-head);letter-spacing:.2px}
.daily h3,.fcard h3{font-size:30px}
.stageTitle h2{font-weight:800;font-size:clamp(30px,3.6vw,40px);letter-spacing:.3px}
.rcard h3{font-weight:800;font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:.2px}
.upgBox h2{font-weight:800;font-size:clamp(32px,4.6vw,44px)}
.achTb b{font-weight:800;font-size:21px}
.tkName{font-family:var(--font-head);font-weight:800;font-size:clamp(44px,8vw,88px);line-height:1}
.popTitle{font:800 22px/1.1 var(--font-head)}
.price{font:800 28px/1 var(--font-head);letter-spacing:.3px}
#controls .cost strong{font:800 32px/1 var(--font-head)}
.hstats strong{font:800 clamp(30px,3.2vw,40px)/1 var(--font-head);letter-spacing:.4px}
.fTimer strong{font:800 clamp(26px,2.6vw,32px)/1 var(--font-head);letter-spacing:.4px}
.fTimer.ready strong{font-size:clamp(22px,2.2vw,26px)}
.achStat b,.ipStats strong,.acTile strong,.facts strong,.statgrid strong,.msum strong,.hval .hnet{font-family:var(--font-head);font-weight:800;letter-spacing:.3px}
.achStat b{font-size:30px}.ipStats strong,.acTile strong{font-size:30px}.facts strong{font-size:26px}
.rval{font:800 26px var(--font-head);letter-spacing:.3px}
.tkVal{font-family:var(--font-head);font-weight:800}
.stepN,.stepCard b{border-radius:4px;font:800 20px var(--font-head)}
.step strong{font:700 16px/1.3 var(--font-body)}

/* free cases + case cards: flat surface, accent glow stays */
.daily,.daily.fcard{background:radial-gradient(60% 80% at 14% 20%,var(--acc-a,#a3f04a1f),transparent 70%),var(--surface)}
.fTimer{border-radius:4px;background:var(--bg-2)}
.fTimer.ready{background:linear-gradient(180deg,var(--acc-a),var(--bg-2))}
.ccard:hover{box-shadow:0 26px 54px #0008,0 0 40px var(--acc-a)}

/* opening window */
.stageIn{border-color:var(--line-3);border-radius:var(--r-xl);background:radial-gradient(90% 38% at 50% 0%,var(--acc-a),transparent 70%),linear-gradient(180deg,#213679,#1f3171)}
.stageBar{background:linear-gradient(180deg,#213679 80%,#21367900)}
.arena{border-radius:var(--r-lg);background:radial-gradient(65% 100% at 50% 42%,var(--acc-a),transparent 72%),linear-gradient(180deg,#21357c,#1f3172)}

/* footer: identical to the HQ site */
.footer{margin-top:72px;padding:40px 0 8px}
.footerLinks{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.footMain{display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,72px);flex-wrap:wrap}
.footLogo{width:auto;height:210px;max-width:100%}.footLogo.suit{height:250px;filter:drop-shadow(0 12px 20px #0008)}
.footSide{display:flex;flex-direction:column;align-items:flex-start;gap:22px;text-align:left}
.footSide .footerLinks{justify-content:flex-start;margin:0}
.footBizTx{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.footBizTx span{color:var(--faint);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.footBizTx a{color:var(--text);font-weight:800;font-size:18px;text-decoration:none;border-bottom:2px solid var(--mint);padding-bottom:2px;transition:color .2s}
.footBizTx a:hover{color:var(--mint)}
@media (max-width:640px){.footMain{flex-direction:column;gap:22px}.footLogo{height:170px}.footSide{align-items:center;text-align:center}.footSide .footerLinks{justify-content:center}.footBizTx{align-items:center}}
.footerLinks a{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line-2);border-radius:4px;transition:border-color .2s,background .2s}
.footerLinks a:hover{border-color:var(--line-3);background:#ffffff0d}
.footerLinks img{width:32px;height:27px;object-fit:contain}
@media(max-width:640px){.shell{padding:16px 16px 44px}.nav{padding:8px 16px}.brandLogo{height:46px}.cname{font-size:28px}}

/* ---------- v20: layout. Four cases across on wide screens (two neat rows of four), mystery tiles tinted by tier ---------- */
.cgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ccard .cart{padding:8px 18px 0}
.cbody{padding:4px 18px 18px;gap:12px}
.cblurb{min-height:63px;font-size:13.5px}
.cfoot{flex-wrap:wrap;row-gap:12px}
.cfoot .cbtns{flex:1 1 100%}
.cfoot .cbtns .btn{flex:1}
.cfoot .cbtns .inspectBtn{flex:0 0 auto}
@media(max-width:1100px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cblurb{min-height:0}}
@media(max-width:640px){.cgrid{grid-template-columns:1fr}}
#pane-cases>#compare,#pane-collection>#skins{margin-top:22px}
#skins{scroll-margin-top:128px}
.colEmpty{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding:18px 20px;border:1px solid #3fd2ff47;border-radius:var(--r-md);background:linear-gradient(90deg,#3fd2ff14,#3fd2ff04)}
.colEmpty>div{flex:1;min-width:0}
.colEmpty strong{display:block;font:800 24px/1.1 var(--font-head)}
.colEmpty p{margin-top:4px;color:var(--muted);font-size:14px;line-height:1.55}
.colEmptyIcon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:4px;background:#3fd2ff1f;color:var(--cyan)}
.colEmptyIcon .i{width:24px;height:24px}
@media(max-width:640px){.colEmpty{flex-direction:column;align-items:flex-start}.colEmpty .btn{width:100%}}
.icard.tile.locked{border-style:dashed;border-color:var(--rc-25);background:radial-gradient(circle at 50% 45%,var(--rc-12),transparent 72%),var(--bg-2)}
.icard.tile.locked .qm{font-family:var(--font-head);color:var(--rc-45);text-shadow:none}

.dropsEmpty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-md)}
.dropsEmpty strong{font:800 26px/1.1 var(--font-head)}
.dropsEmpty p{max-width:40ch;color:var(--muted);font-size:14px}

/* v20 fixes: the empty-book note spans the whole book; skins use the same tile size as the collection;
   on phones each case is a compact row (art left, details right) instead of a full-screen card */
.colEmpty{grid-column:1/-1}
.skinsGrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.skinsGrid .skinTierTag{font-size:9.5px;padding:2px 7px}
#pane-cases>*+*{margin-top:18px}
#pane-cases>#cases{margin-top:0}
@media(max-width:640px){
  .ccard{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center}
  .ccard .cart{padding:26px 0 0 6px}
  .ccard::before{background:radial-gradient(60% 70% at 18% 50%,var(--acc-a),transparent 72%)}
  .cbody{padding:14px 14px 14px 8px;gap:8px}
  .cname{font-size:26px}
  .cblurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0;font-size:13px}
  .price{font-size:24px}
  .cfoot{row-gap:10px}
  .cfoot .btn{min-height:40px;padding:0 12px;font-size:14px}
  .cbadge{top:8px;left:8px;padding:4px 8px;font-size:10.5px}
  .cgrid{gap:12px}
}

.stepCard b{display:grid}
.stepCard .stepNum{display:block;width:40px;height:40px;object-fit:contain;margin:-4px 0 8px -4px}
.stepCard h4{margin:0 0 4px;font:700 16px/1.3 var(--font-body)}

/* the prize window scrolls when it is taller than the screen (items with skins used to be cut off) */
.inspectBox{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.fairOv{overflow-y:auto}

/* found skins are buttons now (inspectable), styled like the tiles they replace */
button.vtile{padding:0;color:inherit;font:inherit;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
button.vtile:hover{transform:translateY(-2px)}
button.vtile.on{outline:2px solid #fff;outline-offset:2px}

/* big-win name: letters animate one by one, but lines only break between words */
.tkWord{display:inline-block;white-space:nowrap}
@media(max-width:640px){
  .tkName{font-size:clamp(34px,10vw,52px)}
  /* achievement pop-ups: compact, one at a time, so they never cover the win */
  .achT{padding:12px 34px 14px 12px;gap:12px;border-radius:5px}
  .achTi{width:44px;height:44px;border-radius:4px}
  .achTi svg{width:24px;height:24px}
  .achTb p{display:none}
  .achTb b{font-size:19px}
  /* achievement pop-ups: one short line at the bottom, so they never cover the case header, the prize or a close button */
  .achToasts{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto}
  .achT{padding:8px 34px 10px 10px;gap:10px;margin-bottom:0}
  .achTi{width:36px;height:36px;border-radius:4px}
  .achTi svg{width:20px;height:20px}
  .achTi b{font-size:15px}
  .achTb small{display:none}
  .achTb b{font-size:16px}
  .achR{margin-top:0;font-size:12px}
  /* the win card fits on one phone screen: smaller art, tighter spacing */
  .rcard{padding:12px 16px 16px;gap:2px 16px}
  .rcard .rleft{height:min(160px,24vh)}
  .rcard .rart,.rcard .rart.o3dBox{--sz:min(140px,21vh);width:min(140px,21vh);height:min(140px,21vh)}
  /* prize window: smaller art so the details show without scrolling */
  .inspTop .rleft.insp3d{width:190px;height:min(180px,27vh);--sz:min(150px,22vh)}
  .inspectBox h2{font-size:clamp(26px,8vw,34px)}
  /* slimmer case header: Help and Sound become small icons next to your balance */
  .stageBar{gap:10px;padding:10px 0 8px}
  .stageBar .balWrap{order:0}
  .stageTools{order:1;width:auto;margin-left:auto;gap:8px}
  .iconBtn.tool{width:44px;height:44px}
  .iconBtn.tool span{display:none}
  .stageTitle{order:2}
  .stageBar .xBtn{order:3}
}
/* short phones (an iPhone SE or mini with Safari's bars showing): a little tighter again, so the whole win card still fits */
@media(max-width:640px) and (max-height:620px){
  .rcard{padding:10px 14px 14px}
  .rcard .rleft{height:min(128px,21vh)}
  .rcard .rart,.rcard .rart.o3dBox{--sz:min(112px,18vh);width:min(112px,18vh);height:min(112px,18vh)}
  .rcard .flav{display:none}
}



@media(min-width:1181px) and (max-width:1360px){.nav{gap:12px}}

/* ---------- the top banner with his picture (13 Oct 2026): the picture on the left with the rotating cases in its calm right half, the words beside it, the three steps along the foot ---------- */
.hero.heroPic{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"left info" "steps steps";align-items:center;column-gap:clamp(20px,2.6vw,36px);row-gap:18px;padding:clamp(18px,2.4vw,30px)}
.heroPic .heroLeft{grid-area:left;min-width:0;display:grid;gap:16px}
.heroPic .heroPane{position:relative;aspect-ratio:1376/768;border-radius:5px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 18px 50px #0008;background:#14183a}
.heroPicImg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.heroPic .heroArt{position:absolute;top:3%;bottom:3%;left:49%;right:0;display:grid;place-items:center}
.heroPic .heroArt svg{position:relative;width:100%;height:auto;max-height:100%;margin:0}
.heroPic .heroArt::after{left:14%;right:14%;bottom:7%}
.heroPic .heroArtLabel{bottom:2%}
.heroPic .heroInfo{grid-area:info;align-self:center;min-width:0}
.heroPic h1{font-size:clamp(34px,3.7vw,52px);line-height:1}
.heroPic .lead{margin-top:14px;font-size:clamp(15px,1.25vw,16.5px);line-height:1.6}
.heroPic .hbtns{margin-top:22px}
.heroPic .hstats{margin:0}
.heroPic .hstats strong{font-size:clamp(24px,2.4vw,32px)}
.heroPic .heroSteps{grid-area:steps;margin:0}
@media(max-width:980px){
  .hero.heroPic{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "info" "steps";padding:16px;row-gap:16px}
  .heroPic h1{font-size:clamp(34px,8vw,48px)}
}
/* the two free cases are big (13 Oct 2026): his crate picture across the top of each card, the words and buttons under it */
.fcard .fhead{grid-template-columns:minmax(0,1fr);gap:8px}
.fcard .dart{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(190px,18vw,250px);margin:0}
.fcard .dart::before{content:"";position:absolute;inset:4% 6% 0;border-radius:50%;background:radial-gradient(closest-side,var(--acc-a),transparent 78%)}
.fcard .dart .fArt{position:relative;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px #000a)}
.fcard h3{margin-top:4px;font-size:30px}
@media(max-width:640px){.fcard .fhead{grid-template-columns:minmax(0,1fr)}.fcard .dart{width:100%;height:190px;margin:0}.fcard h3{font-size:26px}}
/* the menu has 12 links: from 1181 px up it is set a little tighter on every page (the same on Home, Cases, Guess the Balance and the hunt page), so the sign-in button or Join Thrill fits beside it even with a wide fallback font */
@media(min-width:1181px){.nav{gap:10px;padding-left:16px;padding-right:16px;max-width:1340px}}

/* ---------- side panel: the menu (word for word the same on the home page, Cases, Guess the Balance and Bonus hunt) ----------
   1181 px and wider: a panel down the left under the header that folds to an icon rail (the button at its foot, remembered
   in localStorage dz-side). Narrower: a drawer that slides in from the left (the header's menu button). */
:root{--snW:248px;--snTop:74px;--snEase:cubic-bezier(.22,.8,.24,1)}
.sideNav{position:fixed;left:0;top:var(--snTop);bottom:0;z-index:39;width:var(--snW);display:flex;flex-direction:column;background:radial-gradient(120% 50% at 0 0,#3fd2ff14,transparent 60%),linear-gradient(180deg,#1f3068f2,#192859f5 60%,#152250f7);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-right:1px solid #aac4ff1c;box-shadow:inset -1px 0 0 #ffffff06,14px 0 40px -28px #000c}
.snScroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:20px 12px 14px;scrollbar-width:thin;scrollbar-color:#aac4ff2a transparent}
.snGroup{display:flex;flex-direction:column;gap:3px}
.snGroup+.snGroup{margin-top:20px}
.snGroup:not(:has(> a:not([style*="none"]))){display:none}
.snLabel{margin:0 0 8px;padding:0 11px;height:11px;color:#8693b8;font:800 10.5px/11px var(--font-body);letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:opacity .2s}
.sideNav a,.snCollapse{position:relative;display:flex;align-items:center;gap:12px;flex:none;height:56px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:var(--muted);font:600 14.5px/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.sideNav svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:color .2s,transform .3s var(--snEase),filter .2s}
.snTx{overflow:hidden;text-overflow:ellipsis;transition:opacity .22s}
.sideNav a:hover,.snCollapse:hover{background:#aac4ff0f;color:#fff}
.sideNav a:hover svg{color:var(--cyan);transform:scale(1.08)}
/* his 3D menu icons (assets/nav/, 96 px, shown at 44); a link without one keeps its line icon, drawn in the same 44 px box */
.sideNav .snIc{flex:none;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 6px #0007);transition:transform .3s var(--snEase),filter .25s}
.sideNav a>svg{width:32px;height:32px;margin:0 6px}
.sideNav a:hover .snIc{transform:scale(1.1) rotate(-3deg);filter:drop-shadow(0 3px 6px #0007) drop-shadow(0 0 8px #3fd2ff66)}
.sideNav a.active .snIc{filter:drop-shadow(0 3px 6px #0007) drop-shadow(0 0 10px #3fd2ffaa)}
.sideNav a.active{color:#fff;background:linear-gradient(90deg,#3fd2ff2b,#3fd2ff0a 72%,transparent);box-shadow:inset 0 0 0 1px #3fd2ff26}
.sideNav a.active svg{color:var(--cyan);filter:drop-shadow(0 0 6px #3fd2ffa6)}
.sideNav a.active::before{content:"";position:absolute;left:-12px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--cyan);box-shadow:0 0 14px #3fd2ffcc}
.sideNav a:focus-visible,.snCollapse:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.snFoot{flex:none;padding:10px 12px 14px;border-top:1px solid #aac4ff14}
.snCollapse{width:100%;font-size:13.5px}
.snCollapse svg{margin:0 7px}
.snTip{position:fixed;z-index:70;left:0;top:0;padding:9px 12px;border:1px solid #3fd2ff3d;border-radius:4px;background:#111c45f7;color:#fff;font:700 13px/1 var(--font-body);white-space:nowrap;box-shadow:0 14px 34px #000a;pointer-events:none;opacity:0;transform:translate(-4px,-50%);transition:opacity .15s,transform .15s}
.snTip.on{opacity:1;transform:translate(0,-50%)}
@media(min-width:1181px){
  html.sn-mini{--snW:86px}
  body{padding-left:var(--snW)}
  .topbar{margin-left:calc(var(--snW)*-1)}
  .topbar .nav{max-width:none;margin:0;padding-left:20px;padding-right:28px}
  .topbar .navToggle{display:none}
  html.sn-anim body{transition:padding-left .34s var(--snEase)}
  html.sn-anim .topbar{transition:background .25s,box-shadow .25s,margin-left .34s var(--snEase)}
  html.sn-anim .sideNav{transition:width .34s var(--snEase)}
  html.sn-mini .snTx{opacity:0}
  html.sn-mini .snLabel{opacity:0}
  html.sn-mini .snGroup+.snGroup::before{content:"";position:absolute;margin:-12px 0 0 10px;width:42px;height:1px;background:#aac4ff26}
  html.sn-mini .snGroup{position:relative}
/* the three groups read as three blocks: a line and some room between them, each label in its own colour with a short rule after it */
.snGroup+.snGroup{margin-top:14px;padding-top:14px;border-top:1px solid #aac4ff1f}
.sn-mini .snGroup+.snGroup::before{display:none}
.snLabel{display:flex;align-items:center;gap:9px;overflow:visible}
.snLabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.35}
.snGroup:nth-child(1 of .snGroup:not(.snRaceG)) .snLabel{color:#8ff26b}
.snGroup:nth-child(2 of .snGroup:not(.snRaceG)) .snLabel{color:#5fd8ff}
.snGroup:nth-child(3 of .snGroup:not(.snRaceG)) .snLabel{color:#c39bff}
  html.sn-mini .snCollapse svg{transform:rotate(180deg)}
  .snScrim{display:none}
}
@media(max-width:1180px){
  .topbar .navToggle{display:grid}
  .sideNav{width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;box-shadow:none;transition:transform .34s var(--snEase),visibility 0s linear .34s,box-shadow .34s}
  .sideNav.open{transform:none;visibility:visible;box-shadow:28px 0 60px #000a;transition:transform .34s var(--snEase),visibility 0s,box-shadow .34s}
  .sideNav a{height:48px;font-size:16px}
  .sideNav a.active::before{left:-12px}
  .snFoot{display:none}
  .snScrim{position:fixed;left:0;right:0;bottom:0;top:var(--snTop);z-index:38;background:#070d24a8;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
  .sideNav.open~.snScrim{opacity:1;pointer-events:auto}
  html:has(.sideNav.open){overflow:hidden}
}
@media(min-width:1181px) and (max-height:860px){.snScroll{padding-top:14px}.sideNav a{height:44px}.snGroup+.snGroup{margin-top:14px}.snLabel{margin-bottom:6px}}
@media(max-width:1180px){.sideNav a:not(.snThrill){height:44px}.snGroup+.snGroup{margin-top:10px}.snLabel{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.sideNav,.sideNav *,.snScrim,html.sn-anim body,html.sn-anim .topbar{transition:none!important}}
/* footer: the logo is the way to the contact page; "Gamble responsibly" goes to a help site */
.footLogoLink{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;max-width:100%;border-radius:5px;color:var(--muted);text-decoration:none}
.footLogoLink .footLogo{transition:transform .35s var(--snEase),filter .35s}
.footLogoLink:hover .footLogo{transform:translateY(-3px);filter:drop-shadow(0 10px 22px #3fd2ff40)}
.footContact{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line-2);border-radius:4px;font:700 12.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;transition:color .2s,border-color .2s,background .2s}
.footLogoLink:hover .footContact{color:#fff;border-color:#3fd2ff66;background:#3fd2ff12}
.footLogoLink:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media not (hover:hover){.footPic .footLogo.wave{display:none}}
@media (hover:hover){.footPic{position:relative;display:flex;justify-content:center}.footPic .footLogo.wave{position:absolute;bottom:0;left:50%;translate:-50% 0;max-width:none;opacity:0;pointer-events:none;transition:opacity .25s}.footLogoLink:hover .footPic .footLogo.wave,.footLogoLink:focus-visible .footPic .footLogo.wave{opacity:1}.footLogoLink:hover .footPic .footLogo.suit:not(.wave),.footLogoLink:focus-visible .footPic .footLogo.suit:not(.wave){opacity:0}.footPic .footLogo.suit:not(.wave){transition:opacity .25s,transform .35s var(--snEase),filter .35s}}
a.responsible{text-decoration:none;color:var(--text-2,#c5cee6)}
a.responsible span{text-decoration:underline;text-decoration-color:#c5cee655;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
a.responsible:hover span{color:#fff;text-decoration-color:var(--cyan)}

/* ---------- live chat panel (word for word the same on the home page, Cases, Guess the Balance and Bonus hunt) ----------
   Kick chat, read only, straight from Kick's public chat feed (the same one the chat overlay reads). 1480 px and wider: docked down
   the right under the header, the page making room for it; Hide folds it to the Chat button (remembered in localStorage dz-chat).
   Narrower: the Chat button at the bottom right opens it as a drawer. It is connected only while it is on screen. */
:root{--cdW:0px}
.chatDock{position:fixed;right:0;top:var(--snTop,74px);bottom:0;z-index:39;width:330px;display:flex;flex-direction:column;background:radial-gradient(120% 50% at 100% 0,#53fc1812,transparent 60%),linear-gradient(180deg,#1f3068f2,#192859f5 60%,#152250f7);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-left:1px solid #aac4ff1c;box-shadow:-14px 0 40px -28px #000c;transform:translateX(102%);visibility:hidden;transition:transform .34s cubic-bezier(.22,.8,.24,1),visibility 0s linear .34s}
html.cd-open .chatDock{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.22,.8,.24,1),visibility 0s}
.cdHead{display:flex;align-items:center;gap:10px;flex:none;padding:14px 14px 12px 18px;border-bottom:1px solid #aac4ff14}
.cdTitle{display:flex;flex:none;align-items:center;gap:9px;min-width:0;color:#fff;font:800 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cdTitle img{width:20px;height:20px;object-fit:contain;background:none;border-radius:0}
.cdState.on{display:none}   /* connected: nothing to say (owner, 31 Oct 2026: no "Live" word); only Connecting… or Off show */
.cdIcs{display:inline-flex;flex:none;gap:4px}.cdIcs img{flex:none;max-width:none}
.cdState{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;margin-left:auto;color:var(--muted);font:700 11px/1 var(--font-body);letter-spacing:.06em;white-space:nowrap}
.cdState span{overflow:hidden;text-overflow:ellipsis}.cdState i{flex:none;width:7px;height:7px;border-radius:50%;background:#7c88aa}
.cdState.on i{background:#53fc18;box-shadow:0 0 0 0 #53fc1880;animation:cdPulse 2s infinite}
.cdState.on{color:#b9f7a0}
@keyframes cdPulse{70%{box-shadow:0 0 0 7px #53fc1800}100%{box-shadow:0 0 0 0 #53fc1800}}
.cdClose{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #aac4ff24;border-radius:4px;background:#ffffff08;color:var(--muted);cursor:pointer;transition:color .2s,background .2s}
.cdClose:hover{color:#fff;background:#ffffff14}
.cdClose svg,.chatFab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cdPin{display:flex;gap:8px;align-items:flex-start;flex:none;padding:8px 12px;border-bottom:1px solid #ffffff1a;background:linear-gradient(90deg,#f5c04a24,#f5c04a0c);font:600 13px/1.4 var(--font-body);color:#f3f6ff;max-height:96px;overflow:auto;overflow-wrap:anywhere}.cdPin[hidden]{display:none}.cdPinLb{flex:none;margin-top:1px;padding:1px 6px;border-radius:3px;background:#f5c04a;color:#241a00;font:800 10px/1.5 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.cdList{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 10px 6px;scrollbar-width:thin;scrollbar-color:#aac4ff2a transparent;overscroll-behavior:contain}
.cdMsg{padding:6px 8px;border-radius:4px;color:#e8edfb;font:500 13.5px/1.45 var(--font-body);overflow-wrap:anywhere;animation:cdIn .28s cubic-bezier(.22,.8,.24,1)}
.cdMsg:hover{background:#ffffff08}
/* who is talking, at a glance (25 Oct 2026, owner): Dabzilla420's own lines and DabzillaBot's are square boxes of their own, with no tags
   (owner, the same day: "my messages might show up differently... more boxy or something like that, but it doesn't need to have the tag"):
   his is lit green with a green bar down the left, the bot's is dark with a cyan outline and a cyan top line; in both the name sits on top
   and the words under it (.cdTx). Mods get a blue edge, and the alerts are cards of their own: follows mint, subs and resubs purple,
   gifted subs pink, Kicks gold */
.cdMsg.host,.cdMsg.bot{margin:6px 0;padding:8px 11px 9px;border-radius:0}
.cdMsg.host{background:linear-gradient(180deg,#53fc1830,#53fc1812);border:1px solid #53fc1866;box-shadow:inset 3px 0 0 #53fc18,0 6px 18px -10px #53fc1866}
.cdMsg.bot{background:#0c1a3fd9;border:1px solid #3fd2ff59;box-shadow:inset 0 2px 0 #3fd2ff;color:#e3f7ff}
.cdMsg.host:hover{background:linear-gradient(180deg,#53fc183a,#53fc1818)}.cdMsg.bot:hover{background:#10214ae6}
.cdMsg.host .cdName,.cdMsg.bot .cdName{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cdTx{display:block;margin-top:4px}.cdMsg.host .cdTx{color:#fff;font-weight:600}
.cdMsg.mod:not(.host):not(.bot){box-shadow:inset 2px 0 0 #8fa8ff}
@keyframes cdIn{from{opacity:0;transform:translateY(6px)}}
.cdName{font-weight:800}
.cdBadgeImg{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:4px;object-fit:contain}.cdBadgeImg.cdHostAv{width:20px;height:20px;vertical-align:-5px;border-radius:50%}
.cdBadge{display:inline-block;vertical-align:1px;margin-right:4px;padding:2px 5px;border-radius:5px;font:800 9.5px/1.1 var(--font-body);letter-spacing:.06em;color:#0b1430;background:#c5cee6}
.cdBadge.b-broadcaster{background:#53fc18}
.cdBadge.b-moderator{background:#3fd2ff}
.cdBadge.b-vip{background:#ff7ad9}
.cdBadge.b-og{background:#ffd97a}
.cdBadge.b-subscriber,.cdBadge.b-founder,.cdBadge.b-sub_gifter{background:#b79bff}
.cdEmote{display:inline-block;height:28px;width:auto;max-width:84px;margin:-6px 1px;object-fit:contain;vertical-align:middle}
/* Twitch and YouTube: a small logo before the name (when another place is on, or always); the settings hide lines with classes on the list */
.cdPlat{display:none;width:15px;height:15px;margin-right:5px;vertical-align:-3px;border-radius:0;background:none;object-fit:contain}
.cdList.logos .cdPlat{display:inline-block}
.cdList.no-ai .cdMsg[data-k="ai"],.cdList.no-q .cdMsg[data-q],.cdList.no-q .cdMsg[data-k="ask"],.cdList.no-bot .cdMsg[data-k="bot"],.cdList.no-cmd .cdMsg[data-k="cmd"],.cdList.no-cmd .cdMsg[data-k="ask"],
.cdList.no-kick .cdMsg[data-plat="kick"],.cdList.no-twitch .cdMsg[data-plat="twitch"],.cdList.no-youtube .cdMsg[data-plat="youtube"]{display:none}
.cdMsg.note{color:var(--muted);font-size:12.5px;font-style:italic}
/* follows, subs, gifts and Kicks (from kick-events), DabzillaBot's robot picture, clickable links to his own places, a place that is not connected yet */
.cdMsg.ev{--ec:#ffd97a;display:flex;align-items:center;gap:9px;margin:6px 0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--ec) 34%,transparent);border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--ec) 20%,transparent),color-mix(in srgb,var(--ec) 5%,transparent));color:#f4f1ff;font-size:13px}
.cdMsg.ev .cdName{color:var(--ec)}
.cdMsg.e-follow{--ec:#5ef0b0}.cdMsg.e-sub,.cdMsg.e-resub{--ec:#b79bff}.cdMsg.e-gift{--ec:#ff7ad9}.cdMsg.e-kicks{--ec:#ffd97a}
.cdEvIc{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:color-mix(in srgb,var(--ec) 24%,transparent);font-size:15px}
.cdEvTx{min-width:0}
.cdList.no-follows .cdMsg[data-k="ev-follow"],.cdList.no-subs .cdMsg[data-k="ev-sub"]{display:none}
.cdLvl{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:4px}.cdBotAv{display:inline-block;width:18px;height:18px;margin-right:4px;vertical-align:-4px;object-fit:contain}
.cdLink{color:#7fe3ff;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cdLink:hover{color:#fff}
#cdIcs img.off{opacity:.35;filter:grayscale(1)}
html.cd-none .chatDock,html.cd-none .chatFab,html.cd-none .cdScrim{display:none!important}
.cdEmpty{margin:auto 0;padding:40px 18px;color:var(--muted);font:500 13px/1.5 var(--font-body);text-align:center}
.cdEmpty b{display:block;margin-bottom:6px;color:#fff;font-size:14px}
.cdMore{position:absolute;left:50%;bottom:72px;z-index:2;transform:translateX(-50%);padding:8px 14px;border:0;border-radius:4px;background:var(--cyan);color:#06243a;font:800 12px/1 var(--font-body);box-shadow:0 10px 24px #0008;cursor:pointer}
.cdMore[hidden]{display:none}
.cdFoot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 14px;border-top:1px solid #aac4ff14;color:var(--muted);font:500 12px/1.35 var(--font-body)}
.cdFoot a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:4px;background:#53fc18;color:#08210a;font:800 12.5px/1 var(--font-body);text-decoration:none;transition:filter .2s}
.cdFoot a:hover{filter:brightness(1.08)}
/* typing in the chat: sent to Kick as the viewer (the Cases Worker's /chat/send); a sign-in, then a one-time "turn on chatting" */
.cdFoot{flex-direction:column;align-items:stretch;gap:8px}
.cdForm{display:flex;gap:8px}
.cdForm[hidden],.cdGate[hidden]{display:none}
.cdForm{align-items:flex-end}
.cdIn{flex:1;min-width:0;min-height:42px;max-height:94px;overflow-y:auto;padding:10px 12px;border:1px solid #aac4ff2e;border-radius:4px;background:#070d24cc;color:#fff;font:500 14px/20px var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere;outline:none;cursor:text;scrollbar-width:thin;transition:border-color .2s,box-shadow .2s}
.cdIn:focus{border-color:#53fc18;box-shadow:0 0 0 3px #53fc1824}
.cdIn:empty::before{content:attr(data-placeholder);color:#7f8ab0;pointer-events:none}
.cdIn img{display:inline-block;height:24px;width:auto;max-width:72px;margin:-3px 1px;object-fit:contain;vertical-align:middle}
.cdForm button{flex:none;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:4px;background:#53fc18;color:#08210a;cursor:pointer;transition:filter .2s,opacity .2s}
.cdForm button:disabled{opacity:.5;cursor:default}
.cdForm button svg{width:18px;height:18px;fill:currentColor}
/* "Have a question? Type !ask": one quiet line above the box (a tap puts !ask in the box, or opens the FAQ's Ask box when signed out) */
.cdFoot a.cdAsk{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:4px;background:#3fd2ff0f;color:#b9c6ea;font:500 12px/1.3 var(--font-body);text-decoration:none;transition:background .15s,color .15s}
.cdFoot a.cdAsk:hover{background:#3fd2ff1c;color:#fff;filter:none}
.cdAsk img{flex:none;width:18px;height:18px;border-radius:5px}
.cdAsk b{color:#7fe3ff;font-family:var(--font-mono,ui-monospace,monospace)}
/* the emote button and its grid */
.cdForm .cdEmo{background:#ffffff12;color:#c9d2f0}
.cdForm .cdEmo:hover,.cdForm .cdEmo[aria-expanded=true]{background:#ffffff22;color:#fff}
.cdForm .cdEmo svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.cdFoot{position:relative}
.cdEmoPop{position:absolute;left:10px;right:10px;bottom:calc(100% + 6px);z-index:5;max-height:300px;overflow-y:auto;padding:10px;border:1px solid #3fd2ff38;border-radius:5px;background:#121c45fa;box-shadow:0 -14px 40px -10px #000c;scrollbar-width:thin}
.cdEmoPop[hidden]{display:none}
.cdEmoPop h4{margin:6px 2px 6px;color:#8693b8;font:800 10.5px/1 var(--font-body);letter-spacing:.15em;text-transform:uppercase}
.cdEmoPop h4:first-child{margin-top:0}
.cdEmoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px}
.cdEmoGrid button{position:relative;display:grid;place-items:center;height:38px;border:0;border-radius:4px;background:transparent;cursor:pointer;padding:0}
.cdEmoGrid button:hover,.cdEmoGrid button:focus-visible{background:#ffffff17;outline:none}
.cdEmoGrid img{width:28px;height:28px;object-fit:contain}
.cdEmoGrid .lock{position:absolute;right:2px;bottom:2px;font-size:9px;line-height:1}
.cdEmoNote{margin:4px 2px 0;color:var(--muted);font:500 12px/1.4 var(--font-body)}
.cdGate{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cdGate span{color:var(--muted);font:500 12.5px/1.35 var(--font-body)}
.cdNote{margin:0;min-height:0;color:var(--muted);font:500 11.5px/1.35 var(--font-body)}
.cdNote:empty{display:none}
.cdNote.bad{color:#ff9a9a}
.cdNote button{padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
.chatFab{position:fixed;right:18px;bottom:18px;z-index:38;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid #53fc1866;border-radius:4px;background:#18275cf2;color:#fff;font:800 13px/1 var(--font-body);box-shadow:0 14px 34px #0009,0 0 0 4px #53fc1812;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .25s,opacity .25s}
.chatFab:hover{transform:translateY(-2px)}
.chatFab svg{color:#53fc18}
html.cd-open .chatFab{opacity:0;pointer-events:none;transform:translateY(10px)}
.cdScrim{position:fixed;left:0;right:0;bottom:0;top:var(--snTop,74px);z-index:38;background:#070d24a8;opacity:0;pointer-events:none;transition:opacity .3s}
.cdClose:focus-visible,.chatFab:focus-visible,.cdFoot a:focus-visible,.cdMore:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(min-width:1480px){
  html.cd-open{--cdW:330px}
  body{padding-right:var(--cdW)}
  .topbar{margin-right:calc(var(--cdW)*-1)}
  html.cd-anim body{transition:padding-left .34s cubic-bezier(.22,.8,.24,1),padding-right .34s cubic-bezier(.22,.8,.24,1)}
  html.cd-anim .topbar{transition:background .25s,box-shadow .25s,margin-left .34s cubic-bezier(.22,.8,.24,1),margin-right .34s cubic-bezier(.22,.8,.24,1)}
}
@media(max-width:1479px){
  .chatDock{width:min(360px,92vw);box-shadow:none}
  html.cd-open .chatDock{box-shadow:-28px 0 60px #000a}
  html.cd-open .cdScrim{opacity:1;pointer-events:auto}
}
@media(max-width:640px){.chatFab{right:14px;bottom:14px;padding:11px 14px}}
@media(prefers-reduced-motion:reduce){.chatDock,.cdMsg,.chatFab,.cdScrim,html.cd-anim body,html.cd-anim .topbar{transition:none!important;animation:none!important}}

/* ---------- the header's status strip (word for word the same on the home page, Cases, Guess the Balance and Bonus hunt) ----------
   LIVE with the viewer count, the title and Watch now (only while live); a chip for a bonus hunt that is going on and one for an open
   Guess the Balance (each links to its page); and, signed in with Kick, the viewer's picture, name and channel points. One small
   answer from kick-events /now (kept 15 s there) every minute while the page is on screen, and the Cases Worker's /me every 3 minutes. */
.hb{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;overflow:hidden}
.hb [hidden],.hbMe[hidden]{display:none!important}
.hbLive{display:flex;align-items:center;gap:10px;min-width:0;height:42px;padding:0 6px 0 14px;border:1px solid #53fc1859;border-radius:4px;background:linear-gradient(90deg,#53fc181f,#53fc1808);color:#e9ffe0;text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s}
.hbLive:hover{border-color:#53fc18aa;background:linear-gradient(90deg,#53fc182e,#53fc180d)}
.hbLive i{flex:none;width:9px;height:9px;border-radius:50%;background:#53fc18;box-shadow:0 0 0 0 #53fc1899;animation:hbPulse 1.8s infinite}
@keyframes hbPulse{70%{box-shadow:0 0 0 8px #53fc1800}100%{box-shadow:0 0 0 0 #53fc1800}}
.hbLive b{color:#53fc18;font:800 12px/1 var(--font-body);letter-spacing:.14em}
.hbV{color:#fff;font:700 13px/1 var(--font-body)}
.marq{text-overflow:clip!important}.marq .mq{display:inline-flex;gap:48px;white-space:nowrap;animation:dzMq var(--mqd,14s) linear infinite}.marq:hover .mq{animation-play-state:paused}@keyframes dzMq{to{transform:translateX(calc(-50% - 24px))}}
.hbT{min-width:0;max-width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#c9d6c0;font:500 13px/1 var(--font-body)}
.hbGo{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:4px;background:#53fc18;color:#08210a;font:800 12.5px/1 var(--font-body)}
.hbChip{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 8px;border:1px solid var(--line-2,#aac4ff29);border-radius:4px;background:#ffffff0a;color:#e8edfb;font:700 13px/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s,transform .2s}
.hbChip:hover{border-color:#3fd2ff66;background:#3fd2ff12;transform:translateY(-1px)}
.hbChip img,.hbChip svg{flex:none;width:24px;height:24px}
.hbChip svg{fill:none;stroke:#ffd97a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hbChip b{color:#ffd97a;font-weight:800}
.hbChip.gtb b{color:#ff8ad8}
.hbMe{flex:none;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 14px 0 5px;border:1px solid var(--line-2,#aac4ff29);border-radius:4px;background:#ffffff0a;color:#fff;text-decoration:none;white-space:nowrap;transition:border-color .2s}
.hbMe:hover{border-color:#3fd2ff66}
.hbAv{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;overflow:hidden;background:#2b3f8c;color:#fff;font:800 13px/1 var(--font-body);text-transform:uppercase}
.hbAv img{width:100%;height:100%;object-fit:cover}
.hbWho{display:flex;flex-direction:column;gap:3px;min-width:0}
.hbWho span{max-width:120px;overflow:hidden;text-overflow:ellipsis;font:700 12.5px/1 var(--font-body)}
.hbWho small{display:flex;align-items:center;gap:4px;color:#ffd97a;font:800 12.5px/1 var(--font-body)}
.hbWho small svg{width:12px;height:12px}.hbWho small .ptsCoin{width:14px;height:14px;object-fit:contain;flex:none}
.hbMe.ptsOnly{padding:0 14px}
.hbMe.ptsOnly .hbAv,.hbMe.ptsOnly .hbWho span{display:none}
@media(max-width:1360px){.hbT{max-width:180px}}
@media(max-width:1180px){.hbT,.hbChip span{display:none}.hbChip{padding:0 11px 0 7px}}
@media(max-width:760px){.hbV,.hbChip,.hbMe{display:none!important}.hbLive{height:36px;padding:0 4px 0 10px;gap:7px}.hbGo{height:28px;padding:0 10px;font-size:12px}}
@media(max-width:420px){.hbLive b{display:none}}
@media(prefers-reduced-motion:reduce){.hbLive i{animation:none}}
/* always there: Offline with the next stream (LIVE takes its place), the follower goal, and Sign in with Kick when signed out */
.hbOff{flex:none;display:flex;align-items:center;gap:9px;height:42px;padding:0 15px 0 13px;border:1px solid var(--line-2,#aac4ff29);border-radius:4px;background:#ffffff0a;color:#c9d2f0;text-decoration:none;font:600 13px/1 var(--font-body);white-space:nowrap}
.hbOff:hover{border-color:#3fd2ff66;background:#3fd2ff10}
.hbOff i{flex:none;width:9px;height:9px;border-radius:50%;background:#8a94b8}
.hbOff b{color:#fff;font:800 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.hbOff.soon i{background:#ffd97a;box-shadow:0 0 0 3px #ffd97a33}
.hbOff.soon span{color:#ffe7a8}.hbOff.just i{background:#5cffc1}.hbOff.just span{color:#c8ffe9}
.hbGoal{flex:none;display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;border:1px solid var(--line-2,#aac4ff29);border-radius:4px;background:#ffffff0a;color:#e8edfb;text-decoration:none;font:700 12.5px/1 var(--font-body);white-space:nowrap}
.hbGoal:hover{border-color:#53fc1866}.hbGoalK{flex:none;width:18px;height:18px;object-fit:contain;margin-right:-2px}
.hbGoalL{color:#c9d2f0;font-weight:600}
.hbGoalBar{position:relative;width:96px;height:8px;border-radius:4px;background:#ffffff1a;overflow:hidden}
.hbGoalBar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#53fc18,#3fd2ff);transition:width .6s ease}
.hbGoal b{color:#fff}
.hbIn{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:4px;background:#53fc18;color:#08210a;text-decoration:none;font:800 13.5px/1 var(--font-body);white-space:nowrap;box-shadow:0 10px 24px -12px #53fc18b3;transition:filter .15s,transform .15s}
.hbIn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.hbIn img{width:auto;height:18px;filter:brightness(0);opacity:.85}
.hbIn[hidden]{display:none!important}
@media(max-width:1360px){.hbGoalL{display:none}}
@media(max-width:1180px){.hbOff span{display:none}.hbGoalBar{width:64px}}
@media(max-width:900px){.hbGoal{display:none!important}}
@media(max-width:760px){.hbOff{height:36px;padding:0 11px}.hbIn{height:36px;padding:0 11px 0 8px;font-size:12.5px}.hbInK{display:none}}
@media(max-width:560px){.topbar:has(#wallet,#acct) .hbOff{display:none}}   /* a small phone: where the points and account buttons are up there, the offline line has no room (owner, 31 Oct 2026: it was cut off) */
@media(max-width:420px){.hbOff{padding:0 10px;gap:7px}.hbIn{width:36px;padding:0;justify-content:center}.hbIn>span{display:none}}
/* "New here?": the welcome card (first visit, and from the side menu's Start here) */
.snNew{display:flex;align-items:center;gap:12px;width:100%;height:46px;margin-top:14px;padding:0 9px;border:1px dashed #3fd2ff4d;border-radius:5px;background:transparent;color:#bfefff;font:700 13.5px/1 var(--font-body);white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s}
.snNew:hover{background:#3fd2ff12;border-color:#3fd2ff99;color:#fff}
.snNewIc{flex:none;display:grid;place-items:center;width:44px;height:30px;color:#3fd2ff;font:800 20px/1 var(--font-head,var(--font-display,inherit))}
.dzW{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:#050a1ec2;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:dzWIn .25s ease}
.dzWBox{position:relative;width:min(880px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:clamp(20px,3.4vw,34px);border:1px solid #3fd2ff38;border-radius:6px;background:radial-gradient(70% 60% at 100% 0%,#8b5cff30,transparent 70%),radial-gradient(60% 60% at 0% 100%,#3fd2ff22,transparent 70%),linear-gradient(160deg,#1b2a66,#111b48);box-shadow:0 40px 90px -30px #000e;color:#fff}
.dzWHead{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.dzWHead img{flex:none;width:64px;height:auto;filter:drop-shadow(0 6px 12px #0008)}
.dzWHead h2{margin:0 0 4px;font:800 clamp(28px,4vw,40px)/1 var(--font-head,var(--font-display,inherit));letter-spacing:.02em;text-transform:uppercase}
.dzWHead p{margin:0;color:#c9d2f0;font-size:15px;line-height:1.45}
.dzWGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dzWTile{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #aac4ff24;border-radius:5px;background:#ffffff0a;color:inherit;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.dzWTile:hover{border-color:#3fd2ff80;background:#3fd2ff12;transform:translateY(-2px)}
.dzWTile img{flex:none;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 8px #0007)}
.dzWTile b{display:block;margin:2px 0 4px;font-size:15px}
.dzWTile span{display:block;color:#b9c4e6;font-size:13px;line-height:1.45}
.dzWFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}
.dzWFoot small{color:#8a96bd;font-size:12px}
.dzWBtns{display:flex;gap:10px;margin-left:auto}
.dzWBtns a,.dzWBtns button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:5px;font:800 14.5px/1 var(--font-body);text-decoration:none;cursor:pointer}
.dzWBtns a{background:#53fc18;color:#08210a;border:0}
.dzWBtns a img{height:18px;width:auto;filter:brightness(0);opacity:.85}
.dzWBtns button{border:1px solid #ffffff33;background:#ffffff10;color:#fff}
.dzWBtns button:hover{background:#ffffff1c}
.dzWX{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:4px;background:#ffffff12;color:#c9d2f0;font:700 22px/1 var(--font-body);cursor:pointer}
.dzWX:hover{background:#ffffff22;color:#fff}
@media(max-width:760px){.dzWGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.dzWGrid{grid-template-columns:minmax(0,1fr)}.dzWTile{padding:12px}.dzWHead img{width:48px}.dzWBtns{width:100%}.dzWBtns a,.dzWBtns button{flex:1;justify-content:center}}
@keyframes dzWIn{from{opacity:0}}
/* a sign-in that ran out says so, once, under the header */
.hbToast{position:fixed;z-index:85;left:50%;top:84px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:12px 12px 12px 16px;border:1px solid #ffd97a59;border-radius:5px;background:linear-gradient(180deg,#1d2c66f7,#16224ff9);box-shadow:0 18px 40px -16px #000c;color:#fff;font:600 14px/1.35 var(--font-body);animation:hbToastIn .3s ease}
.hbToast a{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:4px;background:#53fc18;color:#08210a;font-weight:800;text-decoration:none}
.hbToast button{flex:none;width:30px;height:30px;border:0;border-radius:4px;background:#ffffff12;color:#c9d2f0;font:700 18px/1 var(--font-body);cursor:pointer}
@keyframes hbToastIn{from{opacity:0;transform:translate(-50%,-8px)}}
/* the points pill opens a small account menu (Cases keeps its own, bigger one) */
.hbMe{cursor:pointer}
.hbPop{position:fixed;z-index:80;width:290px;max-width:calc(100vw - 24px);padding:16px;border:1px solid #3fd2ff38;border-radius:5px;background:linear-gradient(180deg,#1d2c66f7,#16224ff9);box-shadow:0 22px 60px #000c,0 0 0 1px #ffffff08 inset;color:#e8edfb;font:500 13.5px/1.4 var(--font-body);animation:hbPopIn .18s cubic-bezier(.22,.8,.24,1)}
@keyframes hbPopIn{from{opacity:0;transform:translateY(-6px)}}
.hbPopHead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hbPopAv{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#2b3f8c;box-shadow:0 0 0 2px #3fd2ff80;color:#fff;font:800 18px/1 var(--font-body);text-transform:uppercase}
.hbPopAv img{width:100%;height:100%;object-fit:cover}
.hbPopHead b{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:15px}
.hbPopHead span{color:var(--muted,#9aa7cc);font-size:12.5px}
.hbPopRow{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:4px;background:#ffffff0d}
.hbPopRow strong{color:#ffd97a;font-size:17px}
.hbPopNote{margin:8px 2px 0;color:var(--muted,#9aa7cc);font-size:12.5px}
.hbPopLinks{display:grid;gap:4px;margin:12px 0 8px}
.hbPopLinks a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:4px;color:#e8edfb;font-weight:700;text-decoration:none;transition:background .15s}
.hbPopLinks a::after{content:"›";color:#3fd2ff;font-size:18px;line-height:1}
.hbPopLinks a:hover,.hbPopLinks a:focus-visible{background:#3fd2ff17;outline:none}
.hbPopOut{width:100%;padding:9px 12px;border:1px solid #ffffff1f;border-radius:4px;background:transparent;color:var(--muted,#9aa7cc);font:700 13px var(--font-body);cursor:pointer}
.hbPopOut:hover{color:#fff;border-color:#ff8a8a66}
/* "DABZILLA420" beside his face in the header */
a.brand{text-decoration:none}.brandName{margin-left:10px;font:800 27px/1 'Big Shoulders Display','Oswald','Arial Narrow',sans-serif;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;background:linear-gradient(95deg,#a6ff5c,#3fd2ff 70%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px #0008)}
.brandName i{font-style:normal;background:linear-gradient(95deg,#c27bff,#ff6bd6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:1180px){.brandName{font-size:23px}}
@media(max-width:520px){.brandName{display:none}}

/* Join Thrill at the top of the side menu, as the Thrill logo (31 Oct 2026, owner: move it from the right "above the home button... the actual thrill logo") */
.sideNav a.snThrill{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 4px 12px;padding:12px 10px;border:1px solid #5cffc155;border-radius:4px;background:#1b1d29;text-decoration:none;transition:border-color .2s,background .2s}.sideNav a.snThrill:hover{border-color:#5cffc1;background:#20233a}.snThrill img{width:84px;height:auto}.snThrill span{color:#5cffc1;font:800 11px/1 var(--font-body,inherit);letter-spacing:.14em;text-transform:uppercase}html.sn-mini .snThrill span{display:none}html.sn-mini .snThrill img{width:52px}@media(max-width:1180px){.sideNav a.snThrill{height:38px;margin:0 4px 2px;padding:6px 10px}.snThrill img{width:64px}}

/* "How cases work" remake (1 Nov 2026, the owner's handoff: hero, kickers, equal rows with pictures, seed strip, footer; square, no glow) */
.howHero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center;margin-bottom:46px;padding:30px 32px;border:1px solid var(--line);border-top:4px solid #f5c04a;border-radius:0;background:linear-gradient(135deg,#263a89,#1f3275)}
.hhCall{display:block;margin-bottom:10px;color:#f5c04a;font:800 13px var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.howHero h3{margin-bottom:12px;font-size:clamp(26px,3vw,40px);line-height:1.08}
.howHero p{margin:0;color:var(--text-2);font-size:16px;line-height:1.6}
.hhArt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;align-items:end;justify-items:center}
.hhC{width:100%;max-width:150px;height:118px;object-fit:contain}.hhC.c1{height:150px}
.hk{display:block;margin-bottom:6px;color:#f5c04a;font:800 13px var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.prose h3{font-size:clamp(26px,2.4vw,34px)}
.tocH{display:block;margin-bottom:6px;color:#f5c04a;font:800 13px var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.toc{padding:14px;border:1px solid var(--line);background:#22347a}
.toc a{padding:8px 4px;border-bottom:1px solid var(--line);color:#aab4d2}.toc a:hover{color:#3fd2ff}
#how-basics .stepGrid{align-items:stretch}
#how-basics .stepCard{display:flex;flex-direction:column;padding:16px 18px 12px;border-radius:0;background:#243981}
#how-basics .hv{display:grid;place-items:center;height:150px;margin-bottom:12px;background:#1f3275}
#how-basics .hv img{max-height:130px;max-width:90%;object-fit:contain}#how-basics .hv img.hvKick{max-height:90px}
.stepTop{display:flex;align-items:center;gap:10px;margin-bottom:8px}.stepTop .stepNum{position:static;width:40px;height:40px}.stepLine{flex:1;height:1px;background:var(--line)}
#how-basics .stepCard .stepNum{position:static}
.ptsGrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,18vw,220px);gap:24px;align-items:center;margin-bottom:14px}
.ptsArt{display:grid;place-items:center;height:100%;min-height:160px;background:#1f3275;border:1px solid var(--line)}.ptsArt img{width:70%;max-width:170px;height:auto}
.checks.big li{padding:12px 14px;border:1px solid var(--line);background:#243981;font-size:16px}
.checks.twoCol{grid-template-columns:repeat(2,minmax(0,1fr))}.checks.twoCol li{padding:12px 14px;border:1px solid var(--line);background:#243981}
#how-odds .defs{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}#how-odds .defs div{border-radius:0;background:#243981}
.dfBig{display:block;margin-bottom:8px;color:#f5c04a;font:800 28px/1 var(--font-display)}.dfBig.sm{font-size:20px;text-transform:uppercase;letter-spacing:.06em}
#how-extras .stepGrid{align-items:stretch}#how-extras .stepCard{border-radius:0;background:#243981}
#how-extras .stepCard .goldEx{height:150px;min-height:150px;border-radius:0;background:#1f3275;box-shadow:none}
#how-extras .stepCard .goldEx img{height:130px;max-height:130px;object-fit:contain}
#how-extras .goldEx.chips b{display:inline-grid;place-items:center;min-width:54px;height:44px;padding:0 10px;border:1px solid #f5c04a;color:#f5c04a;font:800 22px var(--font-display)}#how-extras .goldEx.chips b.wide{font-size:18px;letter-spacing:.06em}
#how-extras .goldEx>span{flex:none;max-width:24%;text-align:center;color:#f5c04a;font:800 16px/1.1 var(--font-display)}#how-extras .stepCard .goldEx{overflow:hidden;gap:8px}#how-extras .stepCard .goldEx img{max-width:36%}
.seedFlow{display:flex;align-items:stretch;gap:10px;margin:6px 0 16px}.seedFlow div{flex:1;padding:12px 14px;border:1px solid var(--line);background:#243981}.seedFlow b{display:block;color:#f3f6ff;font:700 15px var(--font-display)}.seedFlow span{color:var(--text-2);font-size:13.5px}.seedFlow i{align-self:center;color:#f5c04a;font:800 20px var(--font-display);font-style:normal}
#how-faq details.faq summary{list-style:none;position:relative;padding-right:30px}#how-faq details.faq summary::-webkit-details-marker{display:none}
#how-faq details.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:#f5c04a;font:800 20px var(--font-display)}#how-faq details.faq[open] summary::after{content:"−"}
#how-faq details.faq summary:focus-visible{outline:2px solid #3fd2ff;outline-offset:3px}
.howFoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px;padding:22px 0 0;border-top:1px solid var(--line)}.howFoot p{margin:0;color:var(--text-2)}
#howPage .stepCard,#howPage .defs div,#howPage .callout{box-shadow:none}
@media(max-width:1000px){.howHero{grid-template-columns:1fr}.hhArt{justify-items:start}#how-odds .defs{grid-template-columns:repeat(2,minmax(0,1fr))}.checks.twoCol{grid-template-columns:1fr}}
@media(max-width:700px){#how-odds .defs{grid-template-columns:1fr}.ptsGrid{grid-template-columns:1fr}.seedFlow{flex-direction:column}.seedFlow i{transform:rotate(90deg);align-self:center}.hhC{height:80px}.hhC.c1{height:110px}.howHero h3{font-size:26px}}