/* the title font is served from this site (not Google), so the titles are the same width everywhere and on the first paint */
@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 — v12 "marquee" polish
   Signature: the home hero sits on a faint grid with a thin light line
   and one slow glow behind the art. Everything else stays flat and quiet.
   Type: Big Shoulders Display (marquee / scoreboard) + Manrope (reading).
   ===================================================================== */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  color-scheme:dark;
  --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; --ink:#0a0b14;
  --r-xl:6px; --r-lg:5px; --r-md:4px; --r-sm:3px;
  --font-display:'Big Shoulders Display','Oswald','Arial Narrow',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);
  --edge:inset 0 1px 0 #ffffff0a;
  --shadow-2:inset 0 1px 0 #ffffff12,0 30px 80px #00000080;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:#384f8d #1f326b;scrollbar-width:thin;scroll-padding-top:96px}
body{margin:0;min-height:100vh;color:var(--text);font:400 15.5px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  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;color:#fff}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:.2px;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img{max-width:100%}
code{font-family:var(--font-mono);font-size:.88em;color:var(--cyan-2);background:#3fd2ff12;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:#06142a;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:14px}


/* ---------- Giveaways: the viewer's payout profile ---------- */
.gwGrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:20px;align-items:stretch}
.gwSide{display:grid;gap:16px}
.card.gwMain{position:relative;overflow:hidden;padding:0;background:linear-gradient(165deg,#25418a 0%,#203576 58%)}
.gwMain::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--gold))}
.gwMain>*+*{margin-top:0}
.gwPad{padding:30px 32px 32px}
.gwHead h3{font-size:30px}
.gwHead p{margin-top:8px;color:var(--text-2)}
.gwWho{display:flex;align-items:center;gap:14px}
.gwAva{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid #53fc18;background:#14224f;display:grid;place-items:center;font:800 24px var(--font-display);color:var(--lime);box-shadow:0 0 0 4px #53fc1816}
.gwWho b{display:block;font:800 24px/1.05 var(--font-display);letter-spacing:.3px}
.gwWho small{display:block;margin-top:3px;color:var(--muted);font-size:13px}
.gwWho .choice{margin-left:auto}
.gwBanner{display:flex;align-items:center;gap:12px;margin-top:22px;padding:13px 16px;border-radius:4px;font-weight:700;font-size:14.5px;line-height:1.35}
.gwBanner .i{width:18px;height:18px}
.gwBanner.ready{background:#a3f04a17;border:1px solid #a3f04a4d;color:var(--lime)}
.gwBanner.todo{background:#f5c04a14;border:1px solid #f5c04a4d;color:var(--gold)}
.gwForm{display:grid;gap:20px;margin-top:24px}
.gwField label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;font-weight:700;font-size:14.5px}
.gwField label em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--faint)}
.gwField input[type=text]{width:100%;height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:4px;background:#16275f;color:#fff;font:500 16px var(--font-body);transition:border-color .2s,box-shadow .2s,background .2s}
.gwField input[type=text].mono{font:500 14px var(--font-mono);letter-spacing:.2px}
.gwField input[type=text]::placeholder{color:var(--faint)}
.gwField input[type=text]:hover{border-color:var(--line-3)}
.gwField input[type=text]:focus{outline:none;border-color:var(--cyan);background:#182a68;box-shadow:0 0 0 3px #3fd2ff2e}
.gwField input[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 3px #ff334829}
.gwHint{margin-top:8px;color:var(--muted);font-size:13.5px}
.gwErr{margin-top:8px;color:#ff9aa7;font-weight:600;font-size:13.5px}
.gwErr[hidden]{display:none}
.gwConfirm[hidden]{display:none}
.gwConfirm{animation:pageFade .3s var(--ease)}
.gwCheck{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff08;cursor:pointer;font-size:14.5px;color:var(--text-2);line-height:1.5}
.gwCheck:hover{border-color:var(--line-3)}
.gwCheck input{flex:none;margin-top:3px;width:20px;height:20px;accent-color:var(--cyan)}
.gwActions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:2px}
.gwActions .btn{min-width:160px}
.btn.gwDanger{border-color:#ff33485c;color:#ff9aa7}
.btn.gwDanger:hover{background:#ff33481c;border-color:#ff334899;color:#ffc2c9}
.gwSay{flex:1 1 220px;min-height:22px;font-weight:700;font-size:14px}
.gwSay.ok{color:var(--lime)}
.gwSay.bad{color:#ff9aa7}
.gwMeta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:13px}
.gwMeta b{color:var(--text-2);font-weight:700}
.gwSignIn{display:grid;gap:22px;justify-items:start}
.gwSignIn h3{font-size:32px}
.gwSignIn p{color:var(--text-2);max-width:48ch}
.gwChips{display:flex;flex-wrap:wrap;gap:8px}
.gwChips span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:4px;background:#ffffff0c;border:1px solid var(--line-2);color:var(--text-2);font-weight:700;font-size:13px}
.gwChips .i{width:14px;height:14px;color:var(--lime)}
.kickBtn{background:linear-gradient(180deg,#6dff3a,#3fd20f);color:#061002;border-color:#8dff5c;font-weight:800;box-shadow:inset 0 1px 0 #ffffff66,0 8px 22px -8px #53fc18aa}
.kickBtn:hover{filter:brightness(1.07)}
.kickBtn img{height:17px;width:auto;filter:brightness(0)}
.gwFine{font-size:12.5px;color:var(--faint)}
.gwSkel{display:grid;gap:14px}
.gwSkel i{display:block;height:46px;border-radius:4px;background:linear-gradient(90deg,#ffffff08,#ffffff14,#ffffff08);background-size:200% 100%;animation:gwShimmer 1.4s linear infinite}
.gwSkel i:first-child{height:60px;width:62%}
@keyframes gwShimmer{to{background-position:-200% 0}}
.card.gwSteps,.card.gwSafe{padding:26px 26px 28px}
.gwSteps h3,.gwSafe h3{font-size:24px}
.gwSteps ol{counter-reset:gw;list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.gwSteps li{counter-increment:gw;display:grid;grid-template-columns:34px minmax(0,1fr);gap:13px;align-items:start}
.gwSteps li::before{content:counter(gw);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3fd2ff1f;border:1px solid #3fd2ff59;color:var(--cyan-2);font:800 17px var(--font-display)}
.gwSteps li b{display:block;font-size:15px}
.gwSteps li span{display:block;margin-top:2px;color:var(--muted);font-size:13.5px;line-height:1.5}
.gwSafe ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.gwSafe li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;color:var(--text-2);font-size:14px;line-height:1.5}
.gwSafe li .i{width:18px;height:18px;margin-top:2px;color:var(--lime)}
.ckPic{width:20px;height:20px;object-fit:contain;flex:none;vertical-align:-4px}.gwSafe li .ckPic{margin-top:1px}
@media(max-width:980px){.gwGrid{grid-template-columns:1fr}.gwSteps ol{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.gwSteps ol{grid-template-columns:1fr}.gwPad{padding:24px 20px 26px}.gwActions .btn{flex:1 1 100%}.gwWho .choice{margin-left:0}.gwWho{flex-wrap:wrap}}
.gwMain{display:flex;flex-direction:column}
.gwMain>.gwPad{flex:1;display:flex;flex-direction:column;justify-content:center}
.gwMain>.gwPad.gwSignIn{display:grid;justify-items:start;align-content:center;gap:22px;position:relative;padding-right:min(49%,440px)}
.gwSignInMz{position:absolute;right:20px;bottom:0;height:min(96%,470px);width:auto;filter:drop-shadow(0 16px 20px #00000080);pointer-events:none;user-select:none}
.gwPrevTag{margin:0 0 10px;color:var(--faint);font:700 12px/1 var(--font-body);letter-spacing:1.6px;text-transform:uppercase}
.gwPrev{position:relative;padding:24px 22px 20px;border:1px solid #f5c04a8f;border-radius:var(--r-lg);text-align:center;background:radial-gradient(120% 80% at 50% 0%,#f5c04a22,transparent 62%),linear-gradient(180deg,#1b2d6c,#152458);box-shadow:0 0 0 1px #f5c04a1f,0 22px 50px -24px #000c,inset 0 1px 0 #ffffff12}
.gwWin{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font:800 15px/1 var(--font-display);letter-spacing:4px}
.gwWin::before,.gwWin::after{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.gwWin::after{transform:scaleX(-1)}
.gwName{margin-top:10px;font:800 36px/1 var(--font-display);letter-spacing:.4px;overflow-wrap:anywhere}
.gwPrevRows{display:grid;gap:8px;margin-top:18px;text-align:left}
.gwPrevRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-radius:4px;background:#ffffff0b;border:1px solid var(--line)}
.gwPrevRow span{color:var(--muted);font-weight:700;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
.gwPrevRow b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.gwPrevRow b.mono{font:600 13.5px var(--font-mono)}
.gwPrevRow b.dim{color:var(--faint);font-weight:600}
.gwPrevMsgs{display:grid;gap:7px;margin-top:16px;text-align:left}
.gwPrevMsgs p{padding:8px 12px;border-radius:4px;border-left:3px solid #3fd2ff80;background:#ffffff08;color:var(--text-2);font-size:13px;opacity:.82}
.gwPrevMsgs p:last-child{border-left-color:var(--gold);color:#fff;opacity:1;font-weight:600}
@media(max-width:700px){.gwMain>.gwPad.gwSignIn{padding-right:20px}.gwSignInMz{position:static;justify-self:center;height:240px;margin:6px 0 -30px}}
@media(prefers-reduced-motion:reduce){.gwSkel i,.gwConfirm{animation:none}}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:40;background:#1f3068d9;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);transition:background .25s}
.topbar.scrolled{background:#1f3068f5}
.nav{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:26px;transition:padding .25s var(--ease)}
.brand{display:flex;align-items:center;flex:none;border-radius:4px}
.brandLogo{display:block;height:54px;width:auto;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:#ffffff08;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)}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;margin-top:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tickerTrack{display:flex;width:max-content}
.tickerGroup{display:flex;flex:none;margin:0;padding:0;list-style:none}
.tickerGroup li{display:flex;align-items:center;gap:16px;margin-left:40px;padding:9px 0;color:var(--text-2);font:500 13px/1 var(--font-body);white-space:nowrap}
.tickerGroup li::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--bulb);box-shadow:0 0 6px #ffdb8fb3}
.ticker.ready .tickerTrack{animation:tick 52s linear infinite}
.tickerGroup li b{color:var(--text);font-weight:700}
.tickerGroup li>span{white-space:nowrap}
.tickerGroup .tkLive,.tkWin{display:inline-block;margin-right:6px;vertical-align:1px}
.tickerGroup .tkLive{color:#0a1004;background:var(--lime);padding:3px 7px;border-radius:5px;font:800 11.5px/1 var(--font-body);letter-spacing:.4px}
.tkWin{padding:3px 7px;border-radius:5px;font:800 11px/1 var(--font-body);letter-spacing:.3px;text-transform:uppercase;background:#ffffff14;color:var(--text-2)}
.tkWin.tk-uncommon{color:#7be05a;background:#7be05a1f}.tkWin.tk-rare{color:#3fc0f0;background:#3fc0f01f}.tkWin.tk-epic{color:#b58cff;background:#9d62ff26}.tkWin.tk-legendary{color:#f4b93a;background:#f4b93a26}
@keyframes tick{to{transform:translateX(-33.3333%)}}

/* ---------- Layout ---------- */
.shell{max-width:1200px;margin:0 auto;padding:28px 24px 56px}
main:focus,.page:focus{outline:none}
.page{display:none}
.page.active{display:block}
.page.fadein{animation:pageFade .35s var(--ease)}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
.grid{display:grid;gap:16px}
.section{margin-top:44px}
.sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 22px}
.sectionhead h2{font-size:clamp(34px,4.2vw,48px)}
.sectionhead p{margin-top:8px;color:var(--muted);font-size:15.5px}
/* ---------- page banners: his picture is the first thing on every page, big ---------- */
.pgHero{--tone:#8b5cff;--toneA:#8b5cff44;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy art";align-items:end;column-gap:28px;min-height:clamp(330px,32vw,450px);margin:0 0 26px;padding:0 0 0 clamp(24px,4vw,56px);border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  background:radial-gradient(54% 90% at 82% 94%,var(--toneA),transparent 70%),radial-gradient(60% 80% at 0% 0%,#8b5cff2e,transparent 62%),linear-gradient(160deg,#213880,#1a2f72 70%)}
.pgHero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#aac4ff0b 1px,transparent 1px),linear-gradient(90deg,#aac4ff0b 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}
.pgCopy{grid-area:copy;align-self:center;min-width:0;padding:30px 0}
.pgCopy :is(h1,h2){font-size:clamp(40px,5.2vw,68px);line-height:.96}
.pgCopy p{margin-top:12px;max-width:44ch;color:var(--text-2);font-size:clamp(15.5px,1.4vw,18px)}
.pgExtra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:20px}
.pgArt{grid-area:art;align-self:end;display:block;height:clamp(300px,30vw,420px);width:auto;max-width:none;margin:0 clamp(16px,4vw,56px) 0 0;filter:drop-shadow(0 18px 26px #000a);pointer-events:none;user-select:none}
/* a page whose title is a picture of its own (the words are in the picture; the heading's text is its alt): the picture, then the page's line, then him */
.pgHero.hasPoster{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"poster copy art";padding:26px 0 0 26px;column-gap:30px}
/* text banners: an outlined word of the page behind everything, things that belong to the page floating between the words and him, a brighter spotlight behind him */
.pgHero[data-word]::after{content:attr(data-word);position:absolute;left:clamp(12px,2.4vw,36px);bottom:-.18em;z-index:-1;font:800 clamp(96px,15vw,216px)/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--toneA);pointer-events:none;white-space:nowrap}
.pgHero.hasStage{background:radial-gradient(30% 78% at 84% 76%,var(--toneA),transparent 72%),radial-gradient(54% 90% at 82% 94%,var(--toneA),transparent 70%),radial-gradient(60% 80% at 0% 0%,#8b5cff2e,transparent 62%),linear-gradient(160deg,#213880,#1a2f72 70%)}
.pgHero.hasStage .pgCopy,.pgHero.hasStage .pgArt{position:relative;z-index:2}
.pgStage{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none}
.pgStage>*{position:absolute;display:block}
.pgStage img{height:auto;filter:drop-shadow(0 12px 20px #000a)}
.pgBadge,.pgPrize{transform:rotate(var(--r,0deg))}
.pgBubble{padding:10px 17px;border-radius:5px 5px 5px 5px;background:#ffffff14;border:1px solid #ffffff33;font:700 15.5px/1 var(--font-mono);color:#ffe7a3;box-shadow:0 12px 28px #0007;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transform:rotate(var(--r,0deg))}
.pgBubble.hot{background:#ff5a5a24;border-color:#ff6b6b80;color:#ffe0e0}
.pgConf{width:10px;height:18px;border-radius:2px;transform:rotate(var(--r,0deg));opacity:.92}
.pgSpark{width:26px;height:26px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 8px var(--toneA));opacity:.85}
/* the floating pictures need a banner wider than 1000 px (the side panel takes some of the window, so this is the banner's width, not the window's) */
.pgHero.hasStage{container-type:inline-size}
@container (max-width:1000px){.pgStage{display:none}}
/* Community HQ and Points store: his header picture (it keeps its background and carries the page's name) fills the left of the banner, the line and button sit on the right */
.pgHero.hasScene{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-areas:"scene copy";align-items:stretch;column-gap:clamp(20px,3vw,40px);min-height:0;padding:0 clamp(22px,3.4vw,46px) 0 0;
  background:radial-gradient(55% 90% at 100% 100%,var(--toneA),transparent 70%),radial-gradient(50% 80% at 100% 0%,var(--toneB,#8b5cff30),transparent 65%),linear-gradient(160deg,#213880,#1a2f72 70%)}
.pgSceneH{grid-area:scene;margin:0;font-size:0;line-height:0;min-width:0}
/* the FAQ banner is his one picture (1 Nov 2026): the words FAQ and him are in it, the line and the search sit under it */
.pgHero.faqPic{display:block;min-height:0;padding:0}
.faqPicH{margin:0;line-height:0}
#faq .pgHero.faqPic .faqImg{aspect-ratio:2/1;object-fit:cover;-webkit-mask-image:none;mask-image:none}
.pgHero.faqPic .pgCopy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px clamp(18px,3vw,32px) 22px}
.pgHero.faqPic .pgCopy p{margin:0;max-width:none}
.pgHero.faqPic .pgExtra{margin:0;flex:0 1 420px}
.pgScene{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;max-width:none;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.pgHero.hasScene .pgCopy{align-self:center;padding:30px 0}
/* store and giveaways pictures carry their own name top left: show the whole 16:9 picture, never cropped */
.gwHero .pgScene,#store .pgHero.hasScene .pgScene{aspect-ratio:16/9;object-position:0 0!important}
/* store: no cart picture (owner, 1 Nov 2026), so the whole store picture gets the room, no fade over him */
@media(min-width:781px){#store .pgHero.hasScene{grid-template-columns:minmax(0,2.6fr) minmax(0,1fr)}#store .pgHero.hasScene .pgScene{-webkit-mask-image:none;mask-image:none}}
@media(min-width:781px){.pgScene.wide{aspect-ratio:16/9;-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);mask-image:linear-gradient(90deg,#000 96%,transparent)}}
.pgHero.hasScene .pgCopy p{margin-top:0;max-width:30ch;color:var(--text);font-size:clamp(19px,1.9vw,25px);font-weight:600;line-height:1.35}
.pgHero.hasScene .pgExtra{margin-top:22px}
/* Chat commands: the chat-bubbles picture has its own column between the words and him, as big as the room allows */
#commands .pgHero.hasStage{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"copy bub art"}
#commands .pgHero.hasStage{column-gap:clamp(10px,1.4vw,22px)}
#commands .pgHero.hasStage .pgCopy{max-width:300px}
#commands .pgHero.hasStage .pgArt{margin-right:clamp(10px,2vw,30px)}
@container (max-width:1000px){#commands .pgHero.hasStage .pgCopy{max-width:none}}
/* Points store: the picture fills the banner's whole height, the cart (bigger), the line and the button stacked in the middle of the right side */
@media(min-width:781px){#store .pgHero.hasScene .pgSceneH{position:relative;overflow:hidden}
  #store .pgHero.hasScene .pgSceneH::before{content:"";display:block;padding-top:56.25%}
  #store .pgHero.hasScene .pgScene{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  #store .pgHero.hasScene .pgCopy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 0}
  #store .pgHero.hasScene .pgCopy p{max-width:22ch}}
@media(max-width:780px){#store .pgHero.hasScene .pgCopy{display:flex;flex-direction:column;align-items:center;text-align:center}}
.pgBadgeRow{display:flex;gap:10px;margin-top:22px}
.pgBadgeRow img{width:clamp(34px,4vw,52px);height:auto;filter:drop-shadow(0 8px 12px #0009)}
@media(max-width:780px){.pgHero.hasScene{grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "copy";padding:0 0 22px}.pgHero.hasScene .pgCopy{padding:20px 20px 0}.pgHero.hasScene .pgCopy p{font-size:18px}.pgScene{aspect-ratio:4/3;-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}}
/* FAQ: faint question marks floating behind the questions, only to be noticed when you look */
#faq{position:relative}

@media(max-width:780px){.pgHero[data-word]::after{display:none}}
.pgTitleImg{margin:0;font-size:0;line-height:0}
.pgHero.hasTitle .pgCopy{padding:30px 0}
.pgTitleImg img{display:block;width:min(100%,clamp(250px,29vw,420px));height:auto;filter:drop-shadow(0 8px 22px #0007)}
.pgTitleImg+p{margin-top:6px}
.thrillMz{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:clamp(240px,45%,330px);height:auto;aspect-ratio:1;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px #ffffff2a,0 16px 44px #0009;pointer-events:none;user-select:none}
@media(max-width:700px){.thrillMz{position:static;order:9;transform:none;align-self:center;width:min(100%,420px);margin:16px 0 0}}
.section>.sectionhead{margin-bottom:18px}

/* ---------- Surfaces ---------- */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--edge)}
.contentcard{padding:28px}
.contentcard>*+*{margin-top:12px}
.contentcard h2{font-size:30px}
.contentcard h3{font-size:22px}
.contentcard>.choice,.contentcard>.btn{margin-top:20px}

/* ---------- 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:4px;color:#fff;font:700 15px/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .2s,background .2s,border-color .2s,transform .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn .i{width:16px;height:16px}
.primary{background:var(--cyan);color:#04182a;box-shadow:inset 0 1px 0 #ffffff80}
.primary:hover{filter:brightness(1.08)}
.secondary{background:#ffffff0a;border-color:var(--line-2)}
.secondary:hover{background:#ffffff14;border-color:var(--line-3)}
.live{background:var(--red);color:#fff;box-shadow:inset 0 1px 0 #ffffff55,0 0 0 0 #ff334880;animation:pulse 2.2s infinite}
@keyframes pulse{60%,100%{box-shadow:inset 0 1px 0 #ffffff55,0 0 0 12px #ff334800}}
/* "Live now on Kick": green, gently pulsing, with a blinking dot, so it is obvious the stream is on */
.btn.live{background:linear-gradient(180deg,#6dff3a,#3fd20f);color:#061002;border-color:#8dff5c;font-weight:800;animation:livePulse 1.6s ease-in-out infinite}
.btn.live:hover{filter:brightness(1.06)}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 #53fc1866,0 6px 18px -6px #53fc1888}50%{box-shadow:0 0 0 8px #53fc1800,0 6px 26px -4px #53fc18cc}}
@keyframes liveBlink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.btn.live,.btn.live .liveDot{animation:none}}
.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:transparent;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:#ffffff0d;border-color:var(--line-3);color:#fff}
.choice.active{background:#3fd2ff1f;border-color:#3fd2ff99;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.8s infinite}
@keyframes refreshPulse{0%,100%{box-shadow:0 0 0 0 #a3f04a66}50%{box-shadow:0 0 0 6px #a3f04a00}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center;padding:58px 58px 58px 64px;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  background:radial-gradient(70% 90% at 12% 0%,#8b5cff2e,transparent 62%),radial-gradient(60% 80% at 100% 100%,#3fd2ff1f,transparent 60%),linear-gradient(160deg,#213880,#1a2f72 70%)}
@keyframes heroGlow{from{transform:translate(0,-50%) scale(1)}to{transform:translate(-6%,-44%) scale(1.08)}}


/* his pictures, as they are (25 Oct 2026, owner: "kind of feels very contained... make the images more how they appear naturally"): no frame,
   no shading and no dots; the edges fade softly into the banner, and the next picture fades in every 15 seconds */
.mascotArea{position:relative;width:100%;aspect-ratio:700/523;overflow:hidden;--fx:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);--fy:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:var(--fx),var(--fy);-webkit-mask-composite:source-in;mask-image:var(--fx),var(--fy);mask-composite:intersect}
.mascotSlides{position:absolute;inset:0}
.mascotSlide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.mascotSlide.active{opacity:1}
.mascotSlide img{display:block;width:100%;height:100%;object-fit:cover}
.dots{position:absolute;z-index:2;left:0;right:0;bottom:8px;display:flex;justify-content:center}
.dots button{position:relative;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.dots button::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffffff66;transition:background .3s,transform .3s}
.dots button.active::before{background:var(--bulb);box-shadow:0 0 8px var(--bulb);transform:scale(1.3)}
.stat{position:relative;padding:22px 28px 24px}
.stat+.stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line-2)}
.stat span{display:block;color:var(--muted);font-size:13.5px;font-weight:600}
.stat strong{display:block;margin-top:4px;font:800 clamp(34px,4vw,48px)/1 var(--font-display);letter-spacing:.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* New here? */
.newHere{position:relative;margin-top:16px;padding:26px 28px;border-color:#3fd2ff47;background:radial-gradient(80% 120% at 0% 0%,#3fd2ff14,transparent 60%),var(--surface)}
.newHere[hidden]{display:none}
.newHere h2{margin:0 40px 16px 0;font:800 clamp(26px,3vw,34px)/1 var(--font-display)}
.newX{position:absolute;top:14px;right:14px;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}
.linkBtn{padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
.linkBtn:hover{color:var(--cyan-2)}
@media (max-width:760px){.newHere{padding:22px 18px}}
.liveTitle{margin-top:12px!important;color:var(--text-2);font-weight:600;font-size:14.5px}
.liveTitle:empty{display:none}
@keyframes bulbPulse{50%{box-shadow:0 0 0 6px #ffdb8f00}}
/* X feed */
.xFeed{margin-top:18px!important;flex:1;display:flex;flex-direction:column}
.xFeed>.xProfile{flex:1;justify-content:center}
.xProfile{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}
.xHandle{display:flex;align-items:center;gap:14px}
.xAvatar{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:#000;border:1px solid var(--line-3)}
.xAvatar img{width:26px;height:26px;object-fit:contain}
.xHandle strong{display:block;font:800 24px/1.05 var(--font-display)}
.xHandle strong+span{display:block;color:var(--muted);font-size:14px}
.xProfile .btn{align-self:flex-start}
.xProfile p{color:var(--text-2);font-size:14.5px;line-height:1.6}
.xProfile.hasPost>.xHandle{display:none}
.xPost{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#131c45;color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.xPost:hover,.xPost:focus-visible{border-color:var(--line-3);transform:translateY(-1px)}
.xPostHead{display:flex;align-items:center;gap:12px}
.xPostHead .xAvatar{width:42px;height:42px}
.xPostHead .xAvatar img{width:20px;height:20px}
.xPostHead strong{display:block;font:800 17px/1.1 var(--font-body)}
.xPostHead strong+span{display:block;color:var(--muted);font-size:13.5px}
.xPostTag{margin-left:auto;padding:4px 9px;border-radius:4px;border:1px solid var(--line-2);color:var(--muted);font:700 11.5px/1 var(--font-body);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.xProfile .xPostText{margin:0;color:var(--text);font-size:15px;line-height:1.55;word-break:break-word}
.xPostMedia{position:relative;display:block;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.xPostMedia img{display:block;width:100%;max-height:340px;object-fit:cover}
.xPostMedia.isVideo::after{content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#000a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;border:2px solid #fff}
/* X posts rotate one at a time (31 Oct 2026, owner: a list made the page too long) */
.xCar{display:flex;flex-direction:column;gap:14px;outline:none}
.xTrack{display:grid;touch-action:pan-y;user-select:none}
.xTrack>.xPost{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(26px) scale(.985);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .55s,border-color .2s;background:linear-gradient(160deg,#16214f,#101838 70%);box-shadow:0 14px 34px -18px #000c}
.xTrack>.xPost.out{transform:translateX(-26px) scale(.985)}
.xTrack>.xPost.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s,border-color .2s}
.xTrack>.xPost:hover{transform:none}
.xTrack .xPostText{max-height:min(56vh,480px);overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.xTrack .xPostText.long{font-size:14px;line-height:1.5}
.xTrack .xPost.hasLong .xPostMedia img{max-height:170px}
/* the Follow button looks like X's own (white pill, black words); it opens X's follow page */
.xFollow{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;padding:9px 18px 9px 15px;border-radius:999px;background:#fff;color:#0f1419;font:700 15px/1.2 var(--font-body);text-decoration:none;transition:background .2s,transform .15s}
.xFollow:hover,.xFollow:focus-visible{background:#d7dbdc}
.xFollow:active{transform:scale(.97)}
.xFollow img{width:17px;height:17px;object-fit:contain;filter:invert(1)}
.xTrack .xPostMedia img{max-height:230px}
.xPostHead .xAvatar.face{background:#0b1230;overflow:hidden;border-color:var(--cyan-2)}
.xPostHead .xAvatar.face img{width:100%;height:100%;object-fit:cover}
.xNav{display:flex;align-items:center;gap:12px}
.xNav[hidden]{display:none}
.xArrow{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:4px;border:1px solid var(--line-2);background:#0e1636;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.xArrow:hover,.xArrow:focus-visible{border-color:var(--cyan-2);background:#142050}
.xArrow:active{transform:scale(.94)}
.xArrow svg{width:18px;height:18px}
.xDots{flex:1;display:flex;justify-content:center;gap:8px}
.xDot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:5px;background:#ffffff2e;cursor:pointer;overflow:hidden;transition:width .35s ease,background .2s}
.xDot:hover{background:#ffffff55}
.xDot.on{width:38px;background:#ffffff26}
.xDot.on::after{content:"";position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,var(--cyan-2),var(--lime,#b6ff3b));animation:xFill var(--xMs,8000ms) linear forwards}
.xCar.paused .xDot.on::after{animation-play-state:paused}
@keyframes xFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.xTrack>.xPost,.xTrack>.xPost.on{transition:opacity .2s;transform:none}.xDot.on::after{animation:none;transform:none}}
.xPostMedia:not(.isVideo){cursor:zoom-in}
/* a post's picture opens here, full size, without leaving the site (31 Oct 2026, owner) */
.xLb{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:clamp(14px,3vw,40px);background:#04081ae8;backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease}
.xLb.on{opacity:1}
.xLb img{max-width:min(100%,1600px);max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px -20px #000;transform:scale(.96);transition:transform .3s cubic-bezier(.2,.8,.2,1);cursor:zoom-out}
.xLb.on img{transform:none}
.xLb .xLbX{position:absolute;top:14px;right:14px;width:44px;height:44px}
.xLb .xLbBar{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:10px}
.xLb .xLbBar a{padding:9px 16px;border-radius:4px;border:1px solid var(--line-2);background:#0e1636;color:var(--text);font:700 14px/1 var(--font-body);text-decoration:none}
.xLb .xLbBar a:hover{border-color:var(--cyan-2)}
.xLb .xLbLoad{position:absolute;color:var(--muted);font-size:14px}
html.xLbOpen{overflow:hidden}
.xPostFoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;color:var(--muted);font-size:13.5px}
.xOpen{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--cyan-2);font-weight:700}
.xOpen .i{width:14px;height:14px}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.social{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border:1px solid var(--line-2);border-radius:4px;background:transparent;color:#fff;font-weight:700;text-decoration:none;transition:border-color .2s,background .2s}
.social:hover{border-color:var(--line-3);background:#ffffff0d}
.ico{display:inline-grid;place-items:center;width:27px;height:27px;flex:none}
.ico img{width:100%;height:100%;object-fit:contain}

/* ---------- Podium ---------- */
.podium{grid-template-columns:repeat(3,1fr);align-items:end;gap:16px}
.pod{position:relative;overflow:hidden;padding:30px 18px 26px;text-align:center;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--edge)}
.pod::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--rank)}
.pod::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 0%,var(--glow),transparent 75%);pointer-events:none}
.gold{--rank:var(--gold);--glow:#f5c04a24;border-color:#f5c04a4d}
.silver{--rank:#c9d3e0;--glow:#c9d3e01a}
.bronze{--rank:#cf8350;--glow:#cf83501f}
.podMedal{position:relative;z-index:1;display:block;width:auto;height:128px;margin:0 auto 10px;object-fit:contain;filter:drop-shadow(0 10px 16px #0009)}
.gold .podMedal{height:168px}   /* the trophy for first place, the ribbons for second and third: all three used to be about 40 px tall */
.pod .place{position:relative;z-index:1;color:var(--muted);font-size:13px;font-weight:600}
.pod .who{position:relative;z-index:1;margin-top:8px;font:800 clamp(22px,2.2vw,28px)/1.05 var(--font-display);word-break:break-word}
.pod .score{position:relative;z-index:1;margin-top:6px;color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums}
.gold{padding-block:42px 32px}
.skel{display:block;border-radius:3px;background:linear-gradient(90deg,#ffffff08,#ffffff17,#ffffff08) 0 0/200% 100%;animation:shimmer 1.5s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.pod .skel{margin:12px auto 0}

/* ---------- Leaderboard ---------- */
.board{overflow:hidden}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;padding:18px}
.searchbox{position:relative;flex:1 1 260px}
.searchbox .i{position:absolute;left:15px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--faint);pointer-events:none}
.input,.select{height:46px;border:1px solid var(--line-2);border-radius:4px;background-color:var(--bg-2);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='%2398a4c4' 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 #3fd2ff2e}
.filterbar .choice{height:46px}
.profile{display:none;margin:0 18px 18px;padding:18px 20px;border:1px solid #3fd2ff47;border-radius:var(--r-md);background:var(--surface-2)}
.profile.show{display:block}
.profileTop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.profileTop h3{display:flex;align-items:center;gap:8px;font-size:28px}
.rankChip{padding:6px 12px;border-radius:4px;background:#3fd2ff1f;border:1px solid #3fd2ff5c;color:var(--cyan-2);font:700 13px/1 var(--font-body)}
.profileStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.profileNext{display:flex;align-items:center;gap:16px;margin-top:12px;padding:12px 16px;border-radius:4px;background:#ffffff07}
.profileNext>div{flex:1;min-width:0}
.profileNext strong{display:block;font:800 22px/1.1 var(--font-display)}
.profileNext span{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.nextBadge{width:52px;height:52px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 10px #0008)}
.nextBar{height:6px;margin-top:10px;border-radius:4px;background:#ffffff12;overflow:hidden}
.nextBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.profileStats div{padding:12px 14px;border-radius:4px;background:#ffffff07}
.profileStats span{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.profileStats strong{display:block;margin-top:3px;font:800 26px/1.05 var(--font-display);font-variant-numeric:tabular-nums}
/* the leaderboard banner (1 Nov 2026, owner: "my picture on the left, the top three on the right, the list below"): the podium is three compact rows beside the picture */
.lbHero .pgCopy{padding:24px 0}
.lbHero .pgCopy p.lbTop{margin:0 0 10px;color:var(--muted);font:700 13px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.lbHero #leaderPodium{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;max-width:440px}
.lbHero .pod{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;align-items:center;text-align:left;padding:10px 14px}
.lbHero .pod .podMedal,.lbHero .gold .podMedal{grid-row:1/4;height:52px;width:52px;margin:0;object-fit:contain}
.lbHero .pod .place{font-size:12px}
.lbHero .pod .who{margin-top:2px;font-size:clamp(18px,1.5vw,22px)}
.lbHero .pod .score{margin-top:2px;font-size:14px}
.lbHero .pod::after{background:radial-gradient(60% 120% at 0% 50%,var(--glow),transparent 75%)}
.lbHero .pod .skel{grid-column:2}
.lbHero .pgExtra{margin-top:14px}
.lbHero .podium>.pod{order:0!important}
.tablewrap{overflow:auto;border-top:1px solid var(--line)}
#leaderboard .tablewrap{overflow-x:auto;overflow-y:visible}   /* 1 Nov 2026 (owner): the ranking is part of the page again, 25 at a time with Load more */
.boardMore{display:flex;justify-content:center;padding:16px 18px 4px}
.boardMore[hidden]{display:none}
.toTop{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border:1px solid var(--line-3);border-radius:4px;background:#101a44ee;color:#fff;font:700 13.5px/1 var(--font-body);box-shadow:0 10px 26px -10px #000c;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s,border-color .2s}
.toTop.on{opacity:1;transform:none;pointer-events:auto}
.toTop:hover{border-color:var(--cyan-2)}
html.cd-open .toTop{right:calc(var(--cdW,330px) + 22px)}
@media(max-width:760px){.toTop{bottom:calc(var(--bnH,62px) + env(safe-area-inset-bottom,0px) + 14px);right:14px}}
.table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}
.table th{position:sticky;top:0;z-index:2;padding:14px 18px;background:var(--surface-2);color:var(--muted);font:600 13px/1 var(--font-body);text-align:left;border-bottom:1px solid var(--line-2)}
.table td{height:58px;padding:0 18px;border-bottom:1px solid #ffffff09;font-variant-numeric:tabular-nums}
.table th:nth-child(n+3),.table td:nth-child(n+3){text-align:right}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:#3fd2ff0b}
.table tbody tr:last-child td{border-bottom:0}
.badge{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:4px;background:var(--raised);font:800 18px/1 var(--font-display)}
.rankMedal{display:block;width:auto;height:42px;object-fit:contain;filter:drop-shadow(0 4px 6px #0007)}
.viewer{display:flex;align-items:center;gap:10px}
.viewer strong{font-weight:700;overflow-wrap:anywhere}
/* clickable names and the viewer card */
.nameBtn{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;overflow-wrap:anywhere;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:200;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);animation:pcFade .2s ease}
.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);animation:pcIn .22s ease}
@keyframes pcFade{from{opacity:0}}@keyframes pcIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.pcBack,.pcCard{animation:none}}
.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}
.pcX:hover{background:#ffffff14}
.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-display);box-shadow:0 0 0 2px #3fd2ff80}
.pcAv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}
.pcAv img.ok{opacity:1}
.pcAv.hasImg{background:#2a407d}
.pcAv.hasImg b{visibility:hidden}
.pcHead h3{margin:0;font:800 26px/1.05 var(--font-display);overflow-wrap:anywhere}
.pcHead a{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:13px;text-decoration:none}
.pcHead a:hover{color:var(--cyan-2)}
.pcHead a .i{width:12px;height:12px}
.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>.pcRankTop{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:10px 18px;border-color:var(--rk-b);background:radial-gradient(70% 150% at 10% 50%,var(--rk-a),transparent 72%),#1c306d99}
.pcRankTop .pcMedal{display:block;flex:none;width:auto;height:86px;filter:drop-shadow(0 8px 12px #0009)}
.pcRankTop strong{font-size:30px;line-height:1.1}
.pcRankTop small{display:block}
.pcGrid strong{font:800 20px/1.2 var(--font-display);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 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-display);white-space:nowrap}
.pcMuted{margin:0;color:var(--muted);font-size:14px}
.pcMuted a{color:var(--cyan-2)}
.rowMeta{display:none}
.rowMeta span{white-space:nowrap}
.tierIcon{width:26px;height:26px;flex:none;object-fit:contain}
.pts{color:var(--cyan);font-weight:700}
.badgeslot{display:inline-flex;gap:4px}
.futurebadge{padding:3px 7px;border:1px dashed #a3f04a77;border-radius:3px;color:#c4f98f;font-size:11px;font-weight:700}
.notice{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:14px 20px;border-top:1px solid var(--line);background:#ffffff04;color:var(--muted);font-size:13.5px}
.emptyRow{padding:44px 20px!important;text-align:center!important;color:var(--muted)}
.liveRefresh{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;font-weight:600}
.liveRefresh.stale .refreshDot{background:var(--warn);animation:none}

/* ---------- Status chips ---------- */
.statusChip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:3px;font:700 12.5px/1 var(--font-body)}
.statusChip.isLive{background:#a3f04a1c;color:var(--lime)}
.statusChip.isLive::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.statusChip.isSoon{background:#f5c04a1c;color:var(--gold)}
.statusChip.isRule{background:#3fd2ff1a;color:var(--cyan-2)}

/* ---------- Challenges + community ---------- */
.challengeGrid{grid-template-columns:repeat(3,1fr)}
.challengeCard{display:flex;flex-direction:column;align-items:flex-start;padding:26px}
.challengeCard>*+*{margin-top:12px}
.challengeCard h3{font-size:28px}
.challengeCard p{color:var(--muted);font-size:14.5px;line-height:1.6}
.reward{margin-top:auto!important;padding-top:16px;width:100%;border-top:1px solid var(--line);color:#ffe08f;font-weight:700;font-size:13.5px}
.challengeCard p+.reward{margin-top:auto}
.rewardLink{display:flex;align-items:center;gap:7px;text-decoration:none}.rewardLink:hover{color:#fff}.rewardLink .i{width:14px;height:14px}
.hall{grid-template-columns:repeat(3,1fr)}
.hallCard{display:flex;gap:20px;align-items:center}
.hallIcon{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:5px;background:#f5c04a14;border:1px solid #f5c04a47;color:var(--gold)}
.hallIcon .i{width:26px;height:26px}
.hallIcon.pic{width:84px;height:84px;background:none;border:0}.hallIcon.pic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px #0007)}
.hallCard .statusChip{margin-bottom:10px}
.hallCard h2{color:var(--muted);font:600 15px/1.3 var(--font-body)}
.hof{margin-top:6px}
.hofName{display:block;font:800 clamp(30px,2.8vw,38px)/1 var(--font-display);color:#fff;word-break:break-word}
.hofName.long{font-size:clamp(24px,2.1vw,28px);overflow-wrap:anywhere}
.hofStat .tierIcon{width:22px;height:22px;vertical-align:-5px;margin-left:4px}
.hofStat{display:block;margin-top:4px;color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums}
.badgeLevelGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badgeLevelGrid>.badgeTier{flex:0 0 calc((100% - 5*14px)/6)}
.badgeTier{display:flex;flex-direction:column;align-items:center;padding:22px 14px 20px;text-align:center;background:var(--bg-2);border-radius:var(--r-md);transition:border-color .25s}
.badgeTier:hover{border-color:var(--line-3)}
.badgeTierImg{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 8px 14px #0008)}
.badgeTierLabel{margin-top:12px;color:#fff;font:800 22px/1 var(--font-display)}
.badgeTier p{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}

/* ---------- Store ---------- */
.storeGrid{grid-template-columns:repeat(3,1fr)}
.storeItem{display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s}
.storeItem:hover{border-color:var(--line-3)}
.storeImg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#183271;border-bottom:1px solid var(--line)}
.storeBody{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:22px}
.storeBody>*+*{margin-top:10px}
.storeBody h3{font-size:28px}
.storeBody p{padding-bottom:16px;color:var(--muted);font-size:14.5px;line-height:1.6}
.label{display:block;color:var(--muted);font-size:13px;font-weight:600}
.storeBody>.label{display:inline-block;padding:0;background:none;color:var(--gold);font:800 22px/1 var(--font-display);letter-spacing:.3px}
.storeCmd{margin-top:auto!important;display:inline-flex;align-items:center;gap:12px;min-height:40px;padding:0 8px 0 13px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-2);color:var(--cyan-2);cursor:pointer;font:inherit;transition:border-color .2s}
.storeCmd code{padding:0;background:none;color:inherit;font-weight:700;font-size:13.5px}
.storeCmd:hover{border-color:var(--cyan)}
.copyHint{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:3px;background:#ffffff0d;color:var(--muted);font:600 12px/1 var(--font-body)}
.copyHint .i{width:13px;height:13px}
.storeCmd.copied,.storeCmd.copied .copyHint{color:var(--lime);border-color:#a3f04a80}
.redeemNote{margin-bottom:18px}
.redeemNote a{color:var(--cyan-2)}
.storeFoot{margin-top:20px;text-align:center;color:var(--muted);font-size:14px}
.storeBuy{margin:auto 0 8px!important;width:100%}
.storeBuy+.storeCmd{margin-top:0!important}
.stBal{cursor:default}
.stMsg{margin:14px 0 0;text-align:center;font-weight:700}
.stMsg.bad{color:#ff8b8b}.stMsg.ok{color:var(--lime,#a3f04a)}

/* ---------- Commands ---------- */
.commandGroups{grid-template-columns:repeat(2,1fr);align-items:start}
.cmdGroup>.label{display:flex;align-items:center;gap:12px;color:#fff;font:800 26px/1.05 var(--font-display)}
.cmdIcon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:4px;background:#3fd2ff17;border:1px solid #3fd2ff40;color:var(--cyan)}
.cmdIcon .i{width:20px;height:20px}
.cmdIcon.pic{background:none;border:0;width:42px;height:42px}.cmdIcon.pic img{width:42px;height:42px;object-fit:contain}
.cmdList{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;margin-top:16px!important}
.cmdRow{grid-column:1/-1;display:grid;grid-template-columns:subgrid;column-gap:20px;align-items:baseline;padding:13px 2px;border-top:1px solid var(--line)}
.cmdRow:first-child{border-top:0;padding-top:4px}
.cmdRow>code{align-self:start;justify-self:start;color:var(--cyan-2);font-weight:700;font-size:13.5px;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.cmdRow>code:hover{background:#3fd2ff29}
.cmdRow>code.copied{color:var(--lime);background:#a3f04a1f}
.cmdRow>code.copied::after{content:"Copied";margin-left:8px;font:700 11px var(--font-body)}
.cmdRow[hidden],.cmdGroup[hidden],#commands .section[hidden]{display:none}
.cmdSearch{flex:0 1 340px;width:340px}
.cmdEmpty{margin-bottom:16px}
.cmdEmpty[hidden]{display:none}
.cmdRow p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.cmdNote{margin-top:14px!important;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;line-height:1.6}
.ruleList{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ruleList li{position:relative;padding-left:22px;color:var(--text-2);font-size:14.5px;line-height:1.6}
.ruleList li::before{content:"";position:absolute;left:4px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--bulb)}
@supports not (grid-template-columns:subgrid){.cmdList,.cmdRow{grid-template-columns:1fr}.cmdRow{row-gap:6px}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:860px}
/* two columns when the page is wide (25 Oct 2026, owner): the groups are split between them, about the same number of questions on each side */
#faqList.faq{max-width:none;container-type:inline-size}
.faqCols{display:grid;gap:10px 22px;align-items:start}.faqCol{display:grid;gap:10px;min-width:0;align-content:start}
@container (min-width:900px){.faqCols{grid-template-columns:1fr 1fr}.faqCol+.faqCol .faqGroup:first-child .faqH{margin-top:0}}
@container (max-width:899px){.faqCol+.faqCol .faqGroup:first-child .faqH{margin-top:18px}}
.qa{border-radius:var(--r-md);transition:border-color .2s}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;list-style:none;cursor:pointer;font:700 16.5px/1.4 var(--font-body);border-radius:var(--r-md)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .i{width:18px;height:18px;color:var(--muted);transition:transform .25s var(--ease)}
.qa[open]{border-color:var(--line-3)}
.qa[open] summary .i{transform:rotate(180deg);color:var(--cyan)}
.qa p{padding:0 22px 22px;max-width:68ch;color:var(--text-2);line-height:1.7}
.qa p a{color:var(--cyan-2,#7fe3ff);font-weight:700}
.faqGroup{display:grid;gap:10px}
.faqGroup[hidden],.qa[hidden]{display:none}
.faqH{margin:18px 2px 2px;font:800 13px/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#ffd34a)}
.faqGroup:first-child .faqH{margin-top:0}
.faqFind{display:flex;align-items:center;gap:10px;width:min(420px,100%);min-height:48px;padding:0 14px;border:1px solid #ffffff2e;border-radius:5px;background:#070a1ccc}
.faqFind .i{width:18px;height:18px;color:var(--muted);flex:none}
.faqFind input{flex:1;min-width:0;border:0;background:none;color:inherit;font:600 15.5px var(--font-body);outline:none}
.faqFind:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px #3fd2ff30}
.faqNone{max-width:860px;color:var(--muted)}
.askBot{max-width:860px;margin:0 0 22px;padding:20px 22px;border-color:#3fd2ff38;background:linear-gradient(160deg,#18275ef2,#111c47f2)}
.abHead{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.abHead img{flex:none;width:52px;height:52px;border-radius:5px;background:#0b1433;padding:4px;box-shadow:0 0 0 1px #3fd2ff40}
.abHead h2{margin:0 0 3px;font:800 22px/1.1 var(--font-display);letter-spacing:.02em}
.abHead p{margin:0;color:var(--text-2);font-size:14.5px}
.abRow{display:flex;gap:10px}
.abRow input{flex:1;min-width:0;height:48px;padding:0 15px;border:1px solid #ffffff2e;border-radius:5px;background:#070a1ccc;color:inherit;font:600 15.5px var(--font-body);outline:none}
.abRow input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #3fd2ff30}
.abRow .btn{flex:none;min-width:92px}
.abOut{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:5px;background:#ffffff0c}
.abOut[hidden]{display:none}
.abOut img{flex:none;width:30px;height:30px;border-radius:4px}
.abOut p{margin:0;color:var(--text);line-height:1.6}
.abOut p a{color:var(--cyan-2,#95e8ff);font-weight:700}
.abOut.wait p{color:var(--muted)}
.abOut.err p{color:#ffb4b4}

/* ---------- the Chat page (25 Oct 2026, owner: "a nice big chat box... the other third... each person could kind of just talk to the AI
   without that going to the main chat"): the live chat panel itself moves into the left two thirds (html.cd-page, see the chat panel's
   script), and the right third is a private Ask DabzillaBot conversation (kick-events POST /ask with the last 3 questions as history).
   Phones: one at a time, with two tabs on top. ---------- */
.chpHead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:12px clamp(18px,2.4vw,28px);border:1px solid var(--line-2);background:radial-gradient(60% 140% at 100% 0,#53fc1820,transparent 60%),linear-gradient(160deg,#213880,#1a2f72 70%)}
.chpHl{flex:1;min-width:0}
.chpHead h1{margin:0;font:800 clamp(26px,2.4vw,32px)/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.chpTitle{display:flex;align-items:baseline;gap:8px;margin:5px 0 0;min-width:0;color:var(--text-2);font-size:15px}
.chpTitle[hidden]{display:none}
.chpTitle b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:700}
.chpTag{flex:none;padding:3px 8px;border-radius:4px;background:#ffffff14;color:var(--muted);font:800 10.5px/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.chpTag.live{background:#53fc18;color:#08210a}
.chpWatch{flex:none}
.chpTabs{display:none}
/* 1 Nov 2026 (owner: use up the page): the two boxes run from under the slim header to just above the window's bottom; --chpTop is where the grid starts on the page, measured by the script */
.chpGrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:12px;height:max(480px,calc(100dvh - var(--chpTop,150px) - 14px))}
#chat.page{padding-bottom:0}
.chpChat{display:flex;min-width:0;min-height:0}
html.cd-page .chpChat .chatDock{position:relative;inset:auto;z-index:auto;flex:1;width:auto;height:100%;padding-top:0;transform:none;visibility:visible;border:1px solid var(--line-2);border-radius:5px;box-shadow:var(--shadow-2);transition:none}
html.cd-page #cdClose,html.cd-page .chatFab,html.cd-page .cdScrim{display:none!important}
.chpAsk{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid #3fd2ff38;border-radius:5px;background:linear-gradient(160deg,#18275ef2,#111c47f2);box-shadow:var(--shadow-2)}
.chpAskHead{display:flex;align-items:center;gap:12px;padding:12px 14px 10px;border-bottom:1px solid #aac4ff14}
.chpAskHead img{flex:none;width:46px;height:46px;border-radius:5px;background:#0b1433;padding:4px;box-shadow:0 0 0 1px #3fd2ff40}
.chpAskHead h2{margin:0 0 2px;font:800 20px/1.1 var(--font-display);letter-spacing:.02em}
.chpAskHead p{margin:0;color:var(--text-2);font-size:13px;line-height:1.4}
.chpMsgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px;scrollbar-width:thin;overscroll-behavior:contain}
.chpHint p{margin:0 0 10px;color:var(--muted);font-size:13.5px;line-height:1.5}
.chpChips{display:flex;flex-wrap:wrap;gap:6px}
.chpChips button{padding:7px 11px;border:1px solid #3fd2ff40;border-radius:4px;background:#3fd2ff12;color:#cfefff;font:600 12.5px/1.2 var(--font-body);cursor:pointer;text-align:left}
.chpChips button:hover{background:#3fd2ff24;color:#fff}
.chpMsg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.chpMsg p{margin:0;padding:9px 12px;border-radius:5px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.chpMsg.me{align-self:flex-end}
.chpMsg.me p{background:#53fc18;color:#08210a;border-bottom-right-radius:5px;font-weight:600}
.chpMsg.bot img{flex:none;width:28px;height:28px;border-radius:4px}
.chpMsg.bot p{background:#ffffff10;color:var(--text);border-bottom-left-radius:5px}
.chpMsg.bot p a{color:var(--cyan-2,#95e8ff);font-weight:700}
.chpMsg.wait p{color:var(--muted)}
.chpMsg.err p{color:#ffb4b4}
.chpForm{display:flex;gap:8px;padding:12px 14px 6px;border-top:1px solid #aac4ff14}
.chpForm input{flex:1;min-width:0;height:44px;padding:0 13px;border:1px solid #aac4ff2e;border-radius:4px;background:#070d24cc;color:#fff;font:500 14.5px var(--font-body);outline:none}
.chpForm input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #3fd2ff24}
.chpForm button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:4px;background:var(--cyan);color:#04263a;cursor:pointer}
.chpForm button:disabled{opacity:.5;cursor:default}
.chpForm button svg{width:18px;height:18px;fill:currentColor}
/* the Ask boxes: a microphone (owner, 31 Oct 2026); only where the browser can listen (Chrome, Edge, Safari) */
.micBtn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #aac4ff2e;border-radius:4px;background:#ffffff0d;color:#dfe8ff;cursor:pointer}
.micBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.micBtn:hover{background:#ffffff1a}.micBtn.on{background:#ff4d6d;border-color:#ff4d6d;color:#fff;animation:micPulse 1.2s infinite}
.abRow .micBtn{height:48px;width:48px}
@keyframes micPulse{50%{box-shadow:0 0 0 6px #ff4d6d33}}

.chpNote{margin:0;padding:4px 16px 14px;color:var(--muted);font-size:11.5px;line-height:1.4}
.chpNote a{color:var(--cyan-2,#95e8ff)}
@media(max-width:1100px) and (min-width:761px){.chpGrid{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr)}}
@media(max-width:760px){
  .chpHead{padding:10px 16px;margin-bottom:10px}.chpWatch{display:none}
  .chpTabs{display:flex;gap:6px;margin:0 0 10px;padding:5px;border:1px solid var(--line-2);border-radius:5px;background:#0f1a44cc}
  .chpTabs button{flex:1;height:40px;border:0;border-radius:4px;background:none;color:var(--muted);font:800 14px/1 var(--font-body);cursor:pointer}
  .chpTabs button[aria-selected=true]{background:#ffffff14;color:#fff;box-shadow:inset 0 0 0 1px #ffffff1c}
  .chpGrid{grid-template-columns:minmax(0,1fr);height:max(380px,calc(100dvh - var(--chpTop,180px) - var(--bnH,0px) - env(safe-area-inset-bottom,0px) - 10px))}
  .chpGrid[data-show=chat] .chpAsk,.chpGrid[data-show=ask] .chpChat{display:none}
}
/* the stream's title on the home page (kick-events /now: live, or the last one) */
.heroTitle{display:flex;align-items:baseline;gap:8px;max-width:640px;margin:-6px 0 18px;color:var(--text-2);font-size:15px}
.heroTitle[hidden]{display:flex;visibility:hidden}   /* its line is kept while the title loads, so the banner never grows under the reader */
.heroTitle b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:700}

/* ---------- Clips ----------
   Cards: the thumbnail (a frame he picked on the admin page, his own picture, or the video's own frame), the length, the title
   and a line about it. A card opens the pop-up player (.cp below). Every clip plays here; nothing links to Kick. */
.clipFilters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:18px}
.cfSel{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font:700 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.cfSel .select{height:40px;min-width:150px;text-transform:none;letter-spacing:0;font-weight:600}
/* four across when there is room for four cards of 230 px (1 Nov 2026, owner), fewer on narrower screens */
.clips{grid-template-columns:repeat(auto-fill,minmax(max(230px,calc((100% - 48px) / 4)),1fr))}
.ccCard{padding:0;overflow:hidden;transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
.ccCard:hover{transform:translateY(-4px);border-color:#3fd2ff59;box-shadow:0 26px 60px -24px #000c,0 0 0 1px #3fd2ff26}
.ccCard.featured{border-color:#f5c04a59}
.ccOpen{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ccOpen:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.ccThumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#2b4aa5,#0c1636)}
.ccThumb img,.ccThumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .45s}
.ccThumb video{opacity:0;pointer-events:none}
.ccThumb video.on{opacity:1}
.ccPh{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff2e}
.ccPh .i{width:54px;height:54px}
.ccShade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#050a1cd9);pointer-events:none}
.ccPlay{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:62px;height:62px;margin:-31px 0 0 -31px;border:1px solid #ffffff4d;border-radius:50%;background:#0a1230b3;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px #0008;transition:transform .3s var(--ease),background .25s,color .25s,border-color .25s}
.ccPlay svg{width:26px;height:26px;margin-left:3px;fill:currentColor}
.ccOpen:hover .ccPlay,.ccOpen:focus-visible .ccPlay{transform:scale(1.1);border-color:transparent;background:var(--cyan);color:#04182a}
.ccOpen:hover .ccThumb img,.ccOpen:hover .ccThumb video.on{transform:scale(1.05)}
.ccDur{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:3px;background:#000000b8;color:#fff;font:700 12.5px/1.2 var(--font-body);font-variant-numeric:tabular-nums}
.ccFeat{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:4px;background:linear-gradient(180deg,#ffe08f,#f5c04a);color:#2a1a00;font:800 11px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 16px #0006}
.ccBody{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.ccMeta{color:var(--cyan-2);font:700 12px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.ccTitle{color:#fff;font:800 23px/1.1 var(--font-display);letter-spacing:.2px}
.ccDesc{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--muted);font-size:14px;line-height:1.5}
.emptyState{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 24px;text-align:center}
.emptyState .hallIcon{margin-bottom:6px;background:#3fd2ff17;border-color:#3fd2ff4a;color:var(--cyan)}
.emptyState h3{font-size:32px}
.emptyState p{max-width:46ch;color:var(--muted);line-height:1.65}
.emptyState .btn{margin-top:12px}
#clips.isEmpty .clipFilters{display:none}
/* the pop-up player: the video in a 16:9 stage with its own controls (they fade while it plays and the pointer is still) */
html.cpOpen{overflow:hidden}
.cp{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px}
.cp[hidden]{display:none}
.cp svg{fill:currentColor}
.cpScrim{position:absolute;inset:0;background:#030713e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s}
.cpBox{position:relative;display:flex;flex-direction:column;gap:14px;width:min(1120px,100%);max-height:100%;padding:18px;overflow:auto;border:1px solid #aac4ff2e;border-radius:6px;background:linear-gradient(160deg,#16224ff5,#0b1330fa);box-shadow:0 40px 120px -20px #000,inset 0 1px 0 #ffffff14;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .28s var(--ease),transform .35s var(--ease)}
.cp.show .cpScrim{opacity:1}
.cp.show .cpBox{opacity:1;transform:none}
.cpTop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 4px 0}
.cpMeta{display:block;margin-bottom:6px;color:var(--cyan-2);font:700 12px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.cpMeta:empty{display:none}
.cpTop h2{font-size:clamp(24px,3vw,34px)}
.cpX{flex:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid #aac4ff33;border-radius:50%;background:#ffffff0d;color:#fff;cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.cpX:hover{background:#ffffff1f}
.cpX svg{width:18px;height:18px}
.cpStage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 230px);margin:0 auto;overflow:hidden;border-radius:5px;background:#000;box-shadow:0 0 0 1px #ffffff12;-webkit-user-select:none;user-select:none}
.cpStage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.cpStage:fullscreen{max-height:none;aspect-ratio:auto;border-radius:0}
.cpStage:-webkit-full-screen{max-height:none;width:100%;height:100%;border-radius:0}
.cp.idle.playing .cpStage,.cp.idle.playing .cpStage video{cursor:none}
.cpBig{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;background:#3fd2ffeb;color:#04182a;cursor:pointer;box-shadow:0 0 0 10px #3fd2ff26,0 18px 50px #0009;transition:transform .25s var(--ease),opacity .25s}
.cpBig svg{width:34px;height:34px;margin-left:4px}
.cpBig:hover{transform:scale(1.07)}
.cp.playing .cpBig,.cp.ended .cpBig,.cp.err .cpBig,.cp.loading .cpBig{opacity:0;pointer-events:none;transform:scale(.8)}
.cpSpin{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:4px solid #ffffff2e;border-top-color:var(--cyan);border-radius:50%;opacity:0;pointer-events:none;transition:opacity .2s}
.cp.loading .cpSpin{opacity:1;animation:cpSpin .8s linear infinite}
@keyframes cpSpin{to{transform:rotate(360deg)}}
.cpMsg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#050a1ceb;color:#fff;font-weight:700;text-align:center}
.cpEnd{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:20px;background:#050a1cb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cpMsg[hidden],.cpEnd[hidden],.cpBtn[hidden],.cpPill[hidden]{display:none}
.cpPill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid #ffffff38;border-radius:4px;background:#ffffff14;color:#fff;font:800 15px var(--font-body);cursor:pointer;transition:background .2s,transform .2s}
.cpPill:hover{background:#ffffff26;transform:translateY(-1px)}
.cpPill.go{border-color:transparent;background:var(--cyan);color:#04182a}
.cpPill svg{width:20px;height:20px}
.cpCtl{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 10px;background:linear-gradient(180deg,#0000,#000000d1);transition:opacity .3s,transform .3s}
.cp.idle.playing .cpCtl{opacity:0;transform:translateY(8px);pointer-events:none}
.cpSeek{position:relative;display:flex;align-items:center;height:18px;outline:none;cursor:pointer;touch-action:none}
.cpTrack{position:relative;flex:1;height:4px;overflow:hidden;border-radius:4px;background:#ffffff33;transition:height .15s}
.cpSeek:hover .cpTrack,.cpSeek.drag .cpTrack,.cpSeek:focus-visible .cpTrack{height:6px}
.cpBuf,.cpProg{position:absolute;top:0;bottom:0;left:0;width:0}
.cpBuf{background:#ffffff47}
.cpProg{background:linear-gradient(90deg,var(--cyan),#8ff0ff)}
.cpKnob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #3fd2ff4d;transform:scale(0);transition:transform .15s}
.cpSeek:hover .cpKnob,.cpSeek.drag .cpKnob,.cpSeek:focus-visible .cpKnob{transform:scale(1)}
.cpTip{position:absolute;bottom:22px;left:0;padding:3px 8px;border-radius:3px;background:#000000e0;color:#fff;font:700 12px/1.2 var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s}
.cpSeek:hover .cpTip,.cpSeek.drag .cpTip{opacity:1}
.cpRow{display:flex;align-items:center;gap:4px;margin-top:4px}
.cpBtn{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:4px;background:none;color:#fff;cursor:pointer;transition:background .15s,color .15s}
.cpBtn:hover{background:#ffffff1f;color:var(--cyan-2)}
.cpBtn svg{width:22px;height:22px}
.cpTxt{width:auto;min-width:44px;padding:0 10px;font:800 13.5px var(--font-body)}
.cpBtn:focus-visible,.cpX:focus-visible,.cpBig:focus-visible,.cpPill:focus-visible,.cpNavBtn:focus-visible,.cpVol input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cpVol{display:flex;align-items:center}
.cpVol input{width:0;height:4px;margin:0;border-radius:4px;background:linear-gradient(90deg,#fff var(--p,100%),#ffffff40 var(--p,100%));opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;transition:width .25s var(--ease),opacity .2s,margin .25s}
.cpVol:hover input,.cpVol:focus-within input{width:92px;margin:0 8px 0 2px;opacity:1}
.cpVol input::-webkit-slider-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0008;-webkit-appearance:none;appearance:none}
.cpVol input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.cpTime{margin-left:8px;color:#fff;font:700 13px/1 var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.cpGrow{flex:1}
.cpFoot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4px 2px}
.cpDesc{margin:0;max-width:70ch;color:var(--muted);font-size:15px;line-height:1.55}
.cpNav{display:flex;align-items:center;gap:8px;margin-left:auto}
.cpNavBtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid #aac4ff33;border-radius:4px;background:#ffffff0a;color:#fff;font:700 14px var(--font-body);cursor:pointer;transition:background .2s,border-color .2s}
.cpNavBtn:hover:not(:disabled){border-color:#3fd2ff66;background:#ffffff1a}
.cpNavBtn:disabled{opacity:.35;cursor:default}
.cpNavBtn svg{width:18px;height:18px}
.cpCount{color:var(--faint);font:700 13px var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the video is the frame (owner, 25 Oct 2026: "just the video frame... controls right underneath that don't overlay"): square corners, no panel
   around it, the controls on their own bar under the picture, also in full screen (the frame with its bar goes full screen) */
.cpBox{gap:12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;width:min(1240px,100%)}
.cpTop{padding:0 2px}
.cpFrame{background:#000;box-shadow:0 28px 80px #000d,0 0 0 1px #ffffff14}
.cpFrame .cpStage{border-radius:0;box-shadow:none;max-height:calc(100vh - 250px)}
.cpFrame .cpCtl{position:static;padding:8px 12px 6px;background:#0a0f22;border-top:1px solid #ffffff14}
.cp.idle.playing .cpFrame .cpCtl{opacity:1;transform:none;pointer-events:auto}
.cpFrame:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;box-shadow:none}
.cpFrame:fullscreen .cpStage{flex:1;max-height:none;aspect-ratio:auto}
.cpFrame:-webkit-full-screen{display:flex;flex-direction:column;width:100%;height:100%}
.cpFrame:-webkit-full-screen .cpStage{flex:1;max-height:none;aspect-ratio:auto}
.cpFoot{padding:2px 2px 0}
/* no black side bars (owner, 26 Oct 2026): the frame takes the clip's own shape (--ar from the video, 16:9 until it is known), and when the
   window is too short for the full width the whole player narrows to that shape instead of letting the stage go wide and short */
.cpStage,.cpFrame .cpStage{aspect-ratio:var(--ar,16/9)}
@media (min-width:761px){.cpBox{width:min(1240px,100%,calc((100vh - 250px) * var(--arn,1.7778)))}}
@media (hover:none){.cpVol input{display:none}}
@media (max-width:760px){
  .cp{place-items:stretch;padding:0}
  .cpBox{justify-content:center;gap:12px;width:100%;height:100%;padding:14px 12px;border:0;border-radius:0}
  .cpStage,.cpFrame .cpStage{max-height:none;border-radius:0}
  .cpBox{padding:14px 0}
  .cpTop,.cpFoot{padding:0 12px}
  .cpBig{top:42%;width:60px;height:60px;margin:-30px 0 0 -30px;box-shadow:0 0 0 7px #3fd2ff26,0 12px 30px #0009}
  .cpBig svg{width:24px;height:24px;margin-left:3px}
  .cpFrame .cpCtl{padding:6px 8px 4px}
  .cpRow .cpBtn{width:36px;height:36px}
  .cpTime{margin-left:4px;font-size:12px}
  .cpRow [data-cp=back],.cpRow [data-cp=fwd],.cpRow [data-cp=speed]{display:none}
  .cpFoot{flex-direction:column;align-items:stretch}
  .cpNav{justify-content:space-between;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.cpBox,.cpScrim,.ccCard,.ccThumb img,.ccThumb video,.ccPlay{transition:none}}

/* ---------- Thrill (partner page keeps Thrill's mint) ---------- */
.thrillTabs{display:flex;gap:4px;padding:5px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line);border-radius:4px;background:var(--bg-2)}
@media(max-width:900px){.thrillTabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,#0000);mask-image:linear-gradient(90deg,#000 82%,#0000)}.thrillTabs.atEnd{-webkit-mask-image:none;mask-image:none}}
.thrillTabs::-webkit-scrollbar{display:none}
.thrillTabBtn{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:700 14px/1 var(--font-body);cursor:pointer;transition:background .2s,color .2s}
.thrillTabBtn .tabIcon{width:16px;height:16px;flex:none}
.thrillTabBtn.active{background:var(--mint);color:#07231a}
.thrillTabBtn:not(.active):hover{color:#fff;background:#ffffff0d}
.thrillPane{display:none}
.thrillPane.active{display:block;animation:pageFade .3s var(--ease)}
.thrillWordmarkSvg{display:block;width:150px;margin-bottom:22px;color:#fff}
.thrillWordmarkSvg svg{display:block;width:100%;height:auto}
.thrillHeadline{margin:0 0 14px;color:#fff;font-size:clamp(40px,5vw,58px)}
.thrillLede{max-width:48ch;margin:0 0 26px;color:#c9d8ea;font-size:16.5px;line-height:1.65}
.thrillCodeRow{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-bottom:20px}
.thrillCodeChip{padding:12px 20px;border:1px dashed #5cffc166;border-radius:4px;background:#0b1b18}
.thrillCodeChip span{display:block;color:#8fd8bd;font-size:13px;font-weight:600}
.thrillCodeChip strong{display:block;margin-top:2px;color:var(--mint);font:800 32px/1.05 var(--font-display);letter-spacing:.8px}
.thrillScanChip{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:4px;background:var(--bg-2)}
.thrillScanChip img{width:64px;height:64px;border-radius:4px;background:#fff;padding:5px;display:block}
.qrBtn{border:0;background:none;padding:0;cursor:zoom-in;border-radius:4px;flex:none}.qrBtn:focus-visible{outline:2px solid var(--mint,#5cffc1);outline-offset:2px}
.qrBig{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;background:#050a14e6;cursor:zoom-out}.qrBig.on{display:flex}.qrBig img{width:min(80vw,420px);height:auto;aspect-ratio:1;background:#fff;padding:18px;border-radius:6px}.qrBig .qrX{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;cursor:pointer}
.thrillScanChip span{max-width:120px;color:var(--muted);font-size:13px;line-height:1.4}
.thrillDisclosure{max-width:54ch;margin-top:20px;color:#8397ad;font-size:12.5px;line-height:1.6}
.promoActions{display:flex;flex-wrap:wrap;gap:12px}
.promoActions .primary{background:var(--mint);color:#052b1c}
.thrillCarousel{position:relative;width:100%;max-width:440px;background:#263969;transition:height .4s ease}
.thrillSlide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .5s ease;line-height:1}
.thrillSlide.active{position:relative;opacity:1}
/* each picture at its own shape (31 Oct 2026, owner: "it should just be its natural size"): the frame takes the height of the one showing */
.thrillSlide img{width:100%;height:auto}
.thrillStepList{display:grid;flex:1;align-content:space-evenly;gap:18px;margin-top:20px}
.thrillStep{display:flex;align-items:flex-start;gap:16px}
.thrillStep strong{color:#fff;font-size:15.5px}
.thrillStep p{margin-top:3px;color:var(--muted);font-size:14.5px;line-height:1.55}
h2.thrillSectionTitle{color:#fff;font-size:clamp(30px,3.4vw,38px)}
.thrillLead{max-width:66ch;margin-top:8px;color:#c1d3e4;font-size:15.5px;line-height:1.65}
.thrillPane>.thrillSectionTitle+.thrillLead+.benefitGrid{margin-top:20px}
.thrillPane>.benefitGrid+.thrillSectionTitle{margin-top:40px}
.benefitGrid{grid-template-columns:repeat(3,1fr)}
.benefitCard{padding:22px 22px 24px}
.benefitCard::before{content:"";position:absolute;left:22px;top:0;width:28px;height:2px;background:var(--mint)}
.benefitCard h3{font-size:24px}
.benefitCard p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.6}
.thrillManifesto{margin-top:24px;padding:6px 26px}
.manifestoRow{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.manifestoRow:last-child{border-bottom:0}
.manifestoRow strong{color:var(--mint);font:800 22px/1.15 var(--font-display)}
.manifestoRow span{color:var(--muted);font-size:14.5px;line-height:1.55}
.thrillNote{margin-top:16px;padding:12px 16px;border:1px dashed #5cffc155;border-radius:4px;color:#a9c6b8;font-size:13.5px;line-height:1.55}
.supportCard{display:flex;align-items:flex-start;gap:22px;padding:30px}
.supportIcon{flex:none;display:grid;place-items:center;width:56px;height:56px;border:1px solid #5cffc140;border-radius:5px;background:#0b1b18;color:var(--mint)}
.supportIcon svg{width:26px;height:26px}
.xList{display:grid;gap:12px}.xHead{display:flex;align-items:center;gap:12px}.xHead img{width:30px;height:30px;object-fit:contain;flex:none;transform:translateY(-1px)}
.supportIcon.pic{background:none;border:0;width:64px;height:64px}.supportIcon.pic img{width:64px;height:64px;object-fit:contain}
.supportMail{display:inline-block;margin-top:14px;color:var(--cyan-2);font-weight:800;font-size:16px}

/* ---------- Footer ---------- */
.footer{margin-top:72px;padding:40px 0 8px;border-top:1px solid var(--line);text-align:center}
.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}
.finePrint{max-width:74ch;margin:14px auto 0;color:var(--faint);font-size:13px;line-height:1.65}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footDisclosure{margin-bottom:0}
body[data-page="promo"] .footDisclosure{display:none}
.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:1100px){
  .hall{grid-template-columns:1fr}
}
@media(max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:30px;padding:44px 38px}
  .stat+.stat::before{display:none}
  .stat:nth-child(even){border-left:1px solid var(--line)}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .storeGrid{grid-template-columns:repeat(2,1fr)}
  .challengeGrid{grid-template-columns:repeat(2,1fr)}
  .benefitGrid{grid-template-columns:repeat(2,1fr)}
  .badgeLevelGrid>.badgeTier{flex-basis:calc((100% - 3*14px)/4)}
}
@media(max-width:780px){
  .shell{padding:16px 16px 44px}
  .nav{padding:8px 16px}
  .brandLogo{height:46px}
  .section{margin-top:34px}
  .hero{grid-template-columns:1fr;gap:26px;padding:36px 26px 30px;border-radius:6px}
  .buttons .btn,.promoActions .btn{flex:1 1 170px}
  .twocol,.twocol.liveRow,.hall,.commandGroups{grid-template-columns:1fr}
  .podium{grid-template-columns:1fr;align-items:stretch}
  .sectionhead{flex-direction:column;align-items:flex-start}
  .pgHero{min-height:0;grid-template-columns:minmax(0,1fr) auto;column-gap:4px;padding:20px 0 0 18px;border-radius:6px}
  .pgCopy{padding:0 0 20px}
  .pgCopy :is(h1,h2){font-size:clamp(32px,9.5vw,44px)}
  .pgCopy p{font-size:15px}
  .pgArt{height:clamp(170px,48vw,240px);margin-right:8px}
  .pgHero.hasTitle{grid-template-areas:"poster poster" "copy art";padding:18px 18px 0;row-gap:4px}
  .pgHero.hasTitle .pgCopy{display:contents}
  .pgHero.hasTitle .pgTitleImg{grid-area:poster;justify-self:center}
  .pgHero.hasTitle .pgTitleImg img{width:min(100%,320px)}
  .pgHero.hasTitle .pgCopy p{grid-area:copy;align-self:center;margin:0;padding-bottom:20px}
  .pgHero.hasTitle .pgArt{height:clamp(150px,40vw,210px);margin-right:0}
  .cmdSearch{width:100%;flex-basis:auto}
  .contentcard{padding:22px}
  .filterbar{padding:14px}
  .filterbar .select,.filterbar .choice{flex:1 1 140px}
  .profileStats{grid-template-columns:repeat(2,1fr)}
  .table{min-width:0}
  .table th,.table td{padding:12px 12px}
  .table th:nth-child(6),.table td:nth-child(6){display:none}
  .pod{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"medal place" "medal who" "medal score";column-gap:18px;align-items:center;padding:16px 20px;text-align:left}
  .podMedal,.gold .podMedal{grid-area:medal;width:auto;height:92px;margin:0}
  .gold .podMedal{height:112px}
  .pod .place{grid-area:place}.pod .who{grid-area:who;margin-top:2px}.pod .score{grid-area:score;margin-top:2px}
  .pod.skelPod{display:block;padding:24px;text-align:center}

  .storeGrid,.clips,.challengeGrid,.benefitGrid{grid-template-columns:1fr}
  .badgeLevelGrid>.badgeTier{flex-basis:calc((100% - 14px)/2)}
  .cmdList,.cmdRow{grid-template-columns:1fr}
  .cmdRow{row-gap:6px}
  .manifestoRow{grid-template-columns:1fr}
  .supportCard{flex-direction:column}
}
@media(min-width:781px){
  .podium>.pod:nth-child(1){order:2}
  .podium>.pod:nth-child(2){order:1}
  .podium>.pod:nth-child(3){order:3}
}
@media(max-width:640px){
  .table th:nth-child(n+4),.table td:nth-child(n+4){display:none}
  .rowMeta{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;font-weight:500}
}
@media(max-width:520px){
  .brandLogo{height:42px}
  .footerLinks a{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker.ready .tickerTrack{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center;padding:0 16px}
  .tickerGroup[aria-hidden]{display:none}
}


/* ---------- polish pass ---------- */
.grid>*{min-width:0}   /* a wide stream player or a long title can no longer push a card past a phone screen */
.btn.kick{background:linear-gradient(180deg,#6dff3a,#3fd20f);color:#061002;border-color:#8dff5c;font-weight:800}
.btn.kick:hover{filter:brightness(1.06)}
.page:not(#home)>.sectionhead:first-child,.page:not(#home)>.pgHero:first-child{margin-top:30px}
.challengeCard>p{margin-bottom:20px}
.xProfile.hasPost{padding:0;border:0;background:none}
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.socials .social{min-width:0;padding:0 14px}
.socials .social:first-child{grid-column:1/-1}
.social span+span,.social .soc{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.social small{color:var(--muted);font:600 12px/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.socials .social{min-height:54px}
.rankMedal{height:46px;margin:-6px 0}

.ctStats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px!important;color:var(--muted);font-size:13px}
.ctStats b{display:block;margin-bottom:4px;color:#fff;font:800 28px/1 var(--font-display);letter-spacing:.3px}
@media(max-width:780px){.ctStats b{font-size:24px}}
/* Chat commands: cards pack into two columns without gaps; rules and support side by side */
@media(min-width:781px){
  #commands .commandGroups{display:block;columns:2;column-gap:16px}
  #commands .commandGroups>.cmdGroup{display:inline-block;width:100%;margin:0 0 16px;break-inside:avoid}
  #commands .commandGroups>.cmdGroup[hidden]{display:none}
  .cmdPair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
}
/* "New here?" steps: number beside the title on phones, so the three steps take far less room */
@media (max-width:760px){
  .page:not(#home)>.sectionhead:first-child,.page:not(#home)>.pgHero:first-child{margin-top:14px}
}



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

/* Guess the Balance is live: a bar above the hero while guessing is open (links to the page) */
.gtbLive{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:14px 18px;border:1px solid #5cffc166;border-radius:5px;background:radial-gradient(60% 160% at 0% 50%,#5cffc126,transparent 60%),linear-gradient(90deg,#22367bf2,#203576f2);color:var(--text);text-decoration:none;box-shadow:inset 0 1px 0 #ffffff0d;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;animation:gtbIn .45s var(--ease)}
.gtbLive:hover{border-color:#5cffc1b3;transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff0d,0 12px 30px #5cffc11f}
.gtbLive[hidden]{display:none}
@keyframes gtbBeat{60%,100%{box-shadow:0 0 0 9px #a3f04a00}}
@keyframes gtbIn{from{opacity:0;transform:translateY(-6px)}}
.gtbPrize{font-style:normal}
@media(max-width:640px){.gtbLive{gap:12px;padding:12px}.gtbGo i,.gtbPrize{display:none}}

@media(prefers-reduced-motion:reduce){.gtbLive,.gtbPulse::after{animation:none}}
/* 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}}

/* the home pictures fill the banner (25 Oct 2026, owner: "the images need to be more stretched out to the edges... more filled in... I do like how
   it kind of fades away at the edges... the size needs to be bigger overall"): over 780 px the picture is the banner's whole right side, top to
   bottom and out to the edge, fading into it on the left and softly at the other edges; the words keep the left column. On a phone it runs edge to
   edge under the words. */
@media(min-width:781px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,44%);min-height:clamp(440px,36vw,600px)}
  /* his square pictures (1 Nov 2026): the spot is a square as tall as the banner, so nothing is cut; every edge fades into the banner */
  .hero>.mascotArea{position:absolute;top:0;right:0;bottom:0;left:auto;width:auto;height:100%;aspect-ratio:1/1;max-width:66%;
    --fx:linear-gradient(90deg,transparent,#000 24%,#000 90%,transparent);--fy:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
  .hero>.mascotArea .mascotSlide img{object-fit:contain}
}
@media(max-width:780px){
  .hero>.mascotArea{width:calc(100% + 52px);margin:0 -26px -30px;aspect-ratio:1/1;
    --fx:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);--fy:linear-gradient(180deg,transparent,#000 12%,#000 94%,transparent)}
}

/* DabzillaBot as a character (25 Oct 2026, his robot picture): standing beside the FAQ's Ask box, waving above the Chat page's starter questions */
.askBot{position:relative;padding-right:clamp(22px,16vw,190px)}
.abBot{position:absolute;right:clamp(14px,2vw,26px);bottom:0;width:auto;height:min(92%,178px);pointer-events:none;filter:drop-shadow(0 10px 18px #0009)}
@media(max-width:640px){.askBot{padding-right:22px}.abBot{display:none}}
.chpBot{display:block;width:auto;height:clamp(80px,13vh,130px);margin:2px auto 8px;filter:drop-shadow(0 10px 18px #0009)}

/* the Join Thrill page's icons (31 Oct 2026, the owner's finished sets): tab icons (brand colours, the dark one on the active lime tab),
   card icons top right, the provider grid (white logos on dark tiles) and the crypto coins */
.thrillTabBtn .tabIcon{width:26px;height:26px;object-fit:contain}.thrillTabBtn .tiD,.thrillTabBtn.active .tiB{display:none}.thrillTabBtn.active .tiD{display:block}
.benefitCard{position:relative}.benefitIcon{position:absolute;top:16px;right:16px;width:48px;height:48px;object-fit:contain;pointer-events:none}.benefitIcon.big{width:52px;height:52px}
/* Thrill page redesign (1 Nov 2026, owner: "very high quality", graphics that break out of their boxes at different sizes) */
.tzHero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:center;margin-top:34px;padding:44px 48px;border:1px solid #5cffc133;border-radius:6px;
  background:radial-gradient(55% 80% at 82% 40%,#5cffc126,transparent 70%),radial-gradient(40% 60% at 100% 0%,#3f7bff33,transparent 70%),linear-gradient(150deg,#1a2a66,#121d4d 60%,#0f1840)}
.tzCopy{position:relative;z-index:2;min-width:0}
.tzArt{position:relative;align-self:stretch;min-height:360px}
.tzRing{position:absolute;left:50%;top:50%;width:min(420px,90%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#5cffc12e,transparent 72%);z-index:0}
.tzPhone{position:absolute;z-index:1;left:50%;top:50%;width:min(470px,108%);height:auto;transform:translate(-52%,-46%) rotate(-4deg);filter:drop-shadow(0 30px 40px #0009)}
.tzRocket{position:absolute;z-index:2;left:-6%;top:-60px;width:clamp(110px,11vw,170px);height:auto;transform:rotate(12deg);filter:drop-shadow(0 20px 26px #0008);animation:tzFloat 6s ease-in-out infinite}
@keyframes tzFloat{50%{transform:rotate(12deg) translateY(-12px)}}
.tzSteps{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,24vw,340px);gap:34px;align-items:center;margin-top:60px;padding:34px 40px;border:1px solid var(--line-2);border-radius:6px;background:linear-gradient(150deg,#1d2d6c,#16245a)}
.tzStepsCopy .thrillStepList{margin-top:18px;display:grid;gap:16px}
.tzStepsCopy .thrillStep{align-items:center}
.tzStepIc{width:62px;height:62px;flex:none}
.thrillMz.tzTall{position:relative;right:auto;top:auto;transform:none;pointer-events:auto;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0;border:1px solid #5cffc140;border-radius:6px;box-shadow:0 30px 60px -20px #000c}
.tzPromos{margin-top:56px}
.tzPromosHead{margin-bottom:14px}
.tzPromoGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:14px;align-items:start}
.tzPromo{display:block;border:0;border-radius:4px;overflow:hidden;background:none;transition:transform .2s,filter .2s}
.tzPromo:hover{transform:translateY(-3px);filter:brightness(1.06)}
.tzPromo img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover}
.tzPromo.big{grid-column:span 2;grid-row:span 2}
/* two cards of the same 6:5 shape side by side, at most 600 px wide each (the size of Thrill's files, so never blown up); the right one takes turns */
.tzPromoGrid{grid-template-columns:repeat(2,minmax(0,600px));justify-content:center;gap:16px}.tzPromoGrid>.tzRot{position:relative;aspect-ratio:6/5;grid-column:auto;grid-row:auto}
/* the weekly race is a strip (Thrill's 1200 x 1000 picture cropped to its content, 1200 x 630); the rotator beside it takes the strip's height */
.tzPromoGrid{grid-template-columns:minmax(0,1.905fr) minmax(0,1.2fr);max-width:1560px;margin:0 auto;align-items:stretch}.tzPromo.tzStrip img{aspect-ratio:1200/630}.tzPromoGrid>.tzRot{aspect-ratio:auto;min-height:0}.tzRot .tzSlide img{object-fit:cover}
.tzRot .tzSlide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}.tzRot .tzSlide.on{opacity:1;visibility:visible}.tzRot .tzSlide img{height:100%;aspect-ratio:auto}
.tzDots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}.tzDots i{width:7px;height:7px;border-radius:50%;background:#ffffff40}.tzDots i.on{background:#5cffc1}
.thrillPage .toEye{display:inline-block;font:800 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mint,#5cffc1);margin-bottom:8px}
/* the cards in the other tabs: their pictures sit half outside the card, big */
.thrillPage .benefitGrid{row-gap:56px;margin-top:70px}
.thrillPage .thrillPane>.thrillSectionTitle+.thrillLead+.benefitGrid,.thrillPage .thrillPane>.thrillLead+.benefitGrid{margin-top:84px}
.thrillPage .benefitCard{overflow:visible;padding-top:64px}
.thrillPage .benefitIcon{top:-38px;left:20px;right:auto;width:88px;height:88px;filter:drop-shadow(0 12px 18px #0009)}
.thrillPage .benefitIcon.big{width:96px;height:96px}
.thrillPage .benefitCard:nth-child(3n+2) .benefitIcon{width:100px;height:100px;top:-46px}
@media(max-width:860px){.tzPromoGrid{grid-template-columns:1fr;max-width:640px}.tzPromoGrid>.tzRot{aspect-ratio:6/5}}
@media(max-width:980px){.thrillMz.tzTall{margin:0;max-width:320px;justify-self:center}.tzHero{grid-template-columns:1fr;padding:30px 24px}.tzArt{min-height:300px}.tzRocket{top:-40px;left:0}.tzSteps{grid-template-columns:1fr;padding:26px 22px}.tzTall{margin:0;max-width:320px;justify-self:center}}
@media(max-width:560px){.tzPromoGrid{grid-template-columns:1fr}.tzPromoGrid>.tzRot{grid-column:auto;grid-row:auto}.tzPromo.big{grid-column:auto;grid-row:auto}.tzPhone{width:min(330px,100%)}}

.benefitCard h3,.benefitCard p{padding-right:60px}
.provGrid a.provTile{cursor:pointer;text-decoration:none}.provGrid a.provTile:hover{border-color:#ffffff40;background:#ffffff14}
.provGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:16px}
.provTile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:16/9;padding:14px 16px;background:linear-gradient(160deg,#262b3f,#1c2030);border:1px solid #ffffff12;border-radius:4px;transition:transform .2s,border-color .2s,background .2s}
.provGrid a.provTile:hover{transform:translateY(-2px)}
.provTile img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;image-rendering:auto}   /* each logo trimmed and sized by its shape (assets/thrill/prov, 1 Nov 2026), so they look equally big */.provTile.orig img{max-height:55%}
.provOrig{padding-top:5px;border-top:1px solid #ffffff55;color:#fff;font:700 9px/1 var(--font-body);letter-spacing:.3em}
.coinGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.coinTile{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#212535;border-radius:4px;color:#fff;font-weight:700;font-size:14px}.coinTile img{width:32px;height:32px;flex:none}
@media(min-width:1101px){.provGrid{display:flex;flex-wrap:wrap;justify-content:center}.provGrid>.provTile{flex:0 0 calc((100% - 60px)/7)}}   /* 62 tiles: the last row of 6 sits in the middle */
@media(max-width:1100px){.provGrid{grid-template-columns:repeat(6,minmax(0,1fr))}.coinGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.provGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.coinGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 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}}

/* the level tile on the profile card shows the community badge beside the number (31 Oct 2026) */
.pcGrid .pcLvl{display:flex;align-items:center;gap:8px;color:inherit;font:inherit}.pcLvl .tierIcon{width:28px;height:28px;object-fit:contain}
/* ===== the home page (1 Nov 2026 redesign, from the preview the owner picked): one hero that changes with the stream, tiles with live states, a strip, four cards ===== */
.hmHero{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);min-height:440px;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:radial-gradient(70% 90% at 0% 0%,#3fd2ff1f,transparent 60%),linear-gradient(135deg,#26398a,#1b2a6b);box-shadow:var(--edge),0 24px 60px -30px #000c}
.hmMain{position:relative;min-height:440px}
.hmMain>div{position:absolute;inset:0;display:none}
.hmHero[data-s=off] .hmOff,.hmHero[data-s=live] .hmLive,.hmHero[data-s=hunt] .hmHunt{display:block;animation:hmIn .5s var(--ease)}
@keyframes hmIn{from{opacity:0}to{opacity:1}}
.hmOff>.mascotArea{position:absolute;right:0;top:0;bottom:0;left:auto;width:auto;height:100%;aspect-ratio:1/1;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(0deg,transparent,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(0deg,transparent,#000 12%);mask-composite:intersect}
.hmOff>.mascotArea .mascotSlide img{object-fit:cover}
.hmTxt{position:absolute;left:clamp(22px,3vw,40px);top:50%;transform:translateY(-50%);z-index:1;max-width:min(460px,52%)}
.hmOff::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1f2f77 30%,#1f2f7700 58%);pointer-events:none}
.hmEye{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:4px;background:#0b1230d9;border:1px solid var(--line-2);font:800 12px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--text)}
.hmEye i{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.hmEye.live i,.hmEye.hot i{background:#ff3b5c;box-shadow:0 0 0 0 #ff3b5c99;animation:hmPulse 1.8s infinite}
.hmEye.just i{background:var(--gold)}
@keyframes hmPulse{70%{box-shadow:0 0 0 8px #ff3b5c00}100%{box-shadow:0 0 0 0 #ff3b5c00}}
.hmH{margin:14px 0 10px;font:800 clamp(36px,3.6vw,58px)/.95 var(--font-display);text-transform:uppercase;text-wrap:balance}
.hmH em{font-style:normal;color:var(--lime)}
.hmP{margin:0 0 18px;color:var(--text-2);font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.hmCount{display:flex;gap:10px;margin:0 0 18px}
.hmCount[hidden]{display:none}
.hmCount div{min-width:74px;padding:10px 8px 8px;text-align:center;border:1px solid var(--line-2);border-radius:4px;background:#0b1230b3}
.hmCount b{display:block;font:800 34px/1 var(--font-display);font-variant-numeric:tabular-nums}
.hmCount small{color:var(--muted);font:700 10.5px/1.6 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.hmOff .heroTitle{margin:-4px 0 16px;font-size:13.5px}
.hmBtns{display:flex;flex-wrap:wrap;gap:10px}
.hmBtns .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;line-height:1;margin:0}
.btn.hmGo{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#0b1a02;border:1px solid var(--lime)}
.btn.hmGo:hover{filter:brightness(1.08)}
.btn.hmGo img{width:18px;height:18px;filter:brightness(0)}
.btn.hmGhost{background:#ffffff0d;border:1px solid var(--line-3);color:var(--text)}
.btn.hmGhost:hover{background:#ffffff1a}
.hmLive{padding:16px}
.hmPlayer{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100% - 92px);margin:0 auto;border-radius:4px;overflow:hidden;background:#000}
.hmPlayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hmCap{display:flex;align-items:center;gap:16px;padding:14px 4px 0}
.hmCapTx{flex:1;min-width:0}
.hmCap .liveTitle{margin:6px 0 0;font:800 clamp(20px,1.7vw,26px)/1.05 var(--font-display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmCap #hmLiveHunt{margin-top:4px;color:var(--lime);font-weight:700;font-size:13.5px}
.hmHunt .hmHuntPic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%}
.hmHunt::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#16224ff5 28%,#16224f80 62%,transparent)}
.hmHunt .hmTxt{z-index:2}
.hmProg{width:100%;max-width:380px;height:12px;margin:0 0 18px;border-radius:3px;background:#ffffff1f;overflow:hidden}
.hmProg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),var(--cyan));transition:width .8s var(--ease)}
.hmSide{display:flex;flex-direction:column;gap:10px;padding:20px;border-left:1px solid var(--line-2);background:#0f1a44b3}
.hmSideH{display:flex;align-items:center;margin:2px 0 0;color:var(--muted);font:800 12.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.hmMore{margin-left:auto;padding:0;border:0;background:none;color:var(--cyan);font:700 12.5px var(--font-body);letter-spacing:0;text-transform:none;cursor:pointer}
.hmMore:hover{text-decoration:underline}
.hmJoin{margin-top:8px;padding:18px;border:1px dashed #ffffff38;border-radius:5px;text-align:center}
.hmJoin p{margin:0 0 12px;color:var(--text-2);font-size:14px}
.btn.hmKick{display:inline-flex;align-items:center;gap:8px;background:#53fc18;color:#06140a;border:0;font-weight:800}
.btn.hmKick img{filter:brightness(0)}
.hmYou{display:flex;gap:12px;align-items:center;margin-top:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface-2);text-decoration:none}
.hmYou:hover{border-color:var(--cyan)}
.hmAv{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#2b3f8c;font:800 20px var(--font-display)}
.hmAv img{width:100%;height:100%;object-fit:cover}
.hmYou b{display:block;font:800 22px/1 var(--font-display)}
.hmYou small{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--muted);font-size:12.5px;font-weight:600}
.hmYou small img{width:20px;height:20px}
.hmStats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.hmStats div{padding:9px 12px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff08}
.hmStats small{display:block;color:var(--muted);font-size:11.5px;font-weight:700}
.hmStats b{font:800 21px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.hmStats b.ok{color:var(--lime)}
.hmStats a.hmFreeLink{display:block;padding:9px 12px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff08;color:inherit;text-decoration:none;transition:border-color .15s,background .15s}
.hmStats a.hmFreeLink:hover{border-color:var(--line)}
.hmStats a.hmFreeLink.ready{border-color:#7cff6b88;background:#7cff6b14;cursor:pointer}
.hmStats a.hmFreeLink.ready:hover{background:#7cff6b24}
.hmStats a.hmFreeLink.ready b::after{content:' · Open';font-size:14px}
.hmSide #homePodium{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.hmSide .pod{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:7px 10px;text-align:left;border-radius:4px}
.hmSide .pod::before{width:3px;height:auto;right:auto;bottom:0}
.hmSide .pod::after{background:radial-gradient(60% 140% at 0% 50%,var(--glow),transparent 70%)}
.hmSide .pod .podMedal,.hmSide .gold .podMedal{height:30px;width:30px;margin:0;object-fit:contain}
.hmSide .pod .place{display:none}
.hmSide .pod .who{margin:0;font:800 17px/1.1 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmSide .pod .score{margin:0;font-size:13px}
.hmSide .podium>.pod{order:0!important}
.hmSide .pod .skel{margin:0}
.hmTiles{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.hmTiles>.hmTile{flex:1 1 172px}   /* a row that wraps stretches to fill: no empty gap at the end */
.hmTile{position:relative;display:flex;gap:12px;align-items:center;min-width:0;padding:14px 16px;border:1px solid var(--line-2);border-radius:5px;background:linear-gradient(160deg,var(--surface-2),var(--surface));text-decoration:none;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}
.hmTile:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 14px 30px -18px #3fd2ffaa}
.hmTile img{flex:none;width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 6px 10px #0008)}
.hmTile span{min-width:0}
.hmTile b{display:block;font:800 19px/1.05 var(--font-display);text-transform:uppercase}
.hmTile small{display:block;margin-top:4px;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1.3}
.hmTile small.hot{color:var(--lime)}
/* "Join [Thrill logo]", then the code big enough to read at a glance (owner, 1 Nov 2026) */
.hmXpBar{display:block;height:5px;margin-top:6px;border-radius:4px;background:#ffffff14;overflow:hidden}
.hmXpBar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#53fc18,#5cffc1);box-shadow:0 0 12px #53fc1880;transition:width .6s ease}
#hmXpTx{display:none!important;align-items:center;gap:5px;margin-top:6px;color:var(--muted);font:600 12px var(--font-body);font-style:normal}
#hmXpTx img{width:18px;height:18px;object-fit:contain}
/* crypto prices strip (1 Nov 2026): BTC, ETH, LTC live from Coinbase's public price feed, prices only, no links */
.cxStrip{display:flex;align-items:center;gap:22px;margin-top:16px;padding:14px 20px;border:1px solid var(--line-2);border-radius:5px;background:#0f1a44}
.cxHead{display:flex;flex-direction:column;gap:4px;min-width:150px}.cxHead h2{margin:0;font:800 12px/1 var(--font-body);letter-spacing:.14em;color:#3fd2ff;text-transform:uppercase}
.cxSt{display:flex;align-items:center;gap:6px;font:600 12px var(--font-body);color:#aab4d2}.cxSt i{width:7px;height:7px;border-radius:50%;background:#aab4d2}
.cxStrip[data-st=live] .cxSt i{background:#2fe39a}.cxStrip[data-st=wait] .cxSt i{background:#f5c04a}
.cxRow{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cxCoin{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:4px;background:#16245a;min-width:0}
.cxCoin img{width:44px;height:44px;flex:none;object-fit:contain}.cxName{display:flex;flex-direction:column;min-width:0}.cxName b{font:800 18px/1.1 var(--font-display);color:#f3f6ff;letter-spacing:.03em}.cxName span{font:600 12px var(--font-body);color:#aab4d2}
.cxPx{margin-left:auto;display:grid;grid-template-columns:auto auto;justify-content:end;align-items:baseline;gap:2px 8px;text-align:right}.cxPx b{grid-column:1/-1;font:800 22px/1.1 var(--font-display);color:#f3f6ff;font-variant-numeric:tabular-nums}
.cxCh{font:800 13px var(--font-body);color:#aab4d2}.cxCh.up{color:#2fe39a}.cxCh.dn{color:#ff5d6c}.cxPx small{font:600 11px var(--font-body);color:#aab4d2}
.cxNote{font:600 11px var(--font-body);color:#7f8bb0;white-space:nowrap}
@media(max-width:1100px){.cxStrip{flex-direction:column;align-items:stretch}.cxHead{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px}}
@media(max-width:760px){.cxRow{grid-template-columns:1fr}}
/* sports scores strip (1 Nov 2026): ESPN's public scoreboards, sports and speed from the admin page's Home page box */
/* scores (1 Nov 2026, owner: one game at a time in a small card like Newest clip, big logos) */
.spStrip h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spRow{min-height:190px;display:flex}
.spGame{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:14px 4px 4px;animation:spIn .35s ease}
@keyframes spIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.spTeam{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;font:800 15px var(--font-body);color:#c5cee6;text-align:center}
.spTeam img{width:clamp(64px,5.5vw,84px);height:clamp(64px,5.5vw,84px);object-fit:contain;filter:drop-shadow(0 6px 10px #0007)}
.spTeam .spNo{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#ffffff12;font:800 16px var(--font-body)}
.spTeam.win{color:#f3f6ff}.spScore{font:800 30px/1 var(--font-display);color:#f3f6ff;font-variant-numeric:tabular-nums;white-space:nowrap}
.spMid{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.spVs{font:800 26px/1 var(--font-display);color:#aab4d2}
.spMeta{display:flex;flex-direction:column;align-items:center;gap:3px;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#aab4d2}
.spMeta .lv{color:#ff5d6c}.spMeta .lv::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#ff5d6c;vertical-align:1px}
.spDots{display:flex;justify-content:center;gap:5px;margin-top:10px}.spDots i{width:6px;height:6px;border-radius:50%;background:#ffffff26}.spDots i.on{background:#3fd2ff}
/* Discord card (1 Nov 2026): Discord's public invite and widget data, drawn in the site's look; switch on the admin page */
.dcCard h3{display:flex;align-items:center;gap:10px}.dcCard h3 img{width:32px;height:32px;object-fit:contain}
.dcName{font:800 18px var(--font-display);color:#f3f6ff;margin:6px 0 10px}
.dcOn{display:flex;align-items:center;gap:8px;font:600 14px var(--font-body);color:#c5cee6}.dcOn i{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px #3ddc8426}.dcOn b{color:#f3f6ff;font-size:16px}
.dcMem{display:flex;align-items:center;margin:14px 0 4px;min-height:36px}.dcMem img,.dcMem span{width:36px;height:36px;border-radius:50%;border:2px solid #1a2a66;margin-right:-8px;background:#22347a;object-fit:cover}
.dcMem span{display:grid;place-items:center;font:800 11px var(--font-body);color:#c5cee6;margin-left:4px;width:auto;padding:0 10px;border-radius:18px}
.dcAll{font:600 12px var(--font-body);color:#aab4d2;min-height:16px}
.dcJoin{display:flex;justify-content:center;margin-top:14px;background:#5865f2;border-color:#5865f2;color:#fff}
/* upcoming Nolimit City slots (1 Nov 2026, the owner's handoff): 300 px wide, about 430 px tall, under Newest clip, 3 cards taking turns */
.nlMod[hidden],.spCard[hidden],.dcCard[hidden],.spStrip[hidden]{display:none!important}
.nlMod{width:100%;display:flex;flex-direction:column;background:#22347a;border:1px solid #ffffff1f;border-top:2px solid #f5c04a;color:#c5cee6}
.nlTop{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 4px}
.nlPill{font:800 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#1a2450;background:#f5c04a;padding:6px 8px}
.nlPill.out{background:#3ddc84}
.nlBrand{width:auto;height:22px}
.nlTrack{position:relative;display:grid;overflow:hidden}
.nlCard{grid-area:1/1;position:relative;min-height:370px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 16px 0;text-align:center;opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .45s,transform .45s,visibility .45s}
.nlCard.on{opacity:1;visibility:visible;transform:none}
.nlBg{position:absolute;left:0;right:0;top:0;width:100%;height:200px;object-fit:cover;object-position:50% 22%;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);z-index:-1}
.nlCard.on .nlBg+.nlLogo{margin-top:120px;width:min(290px,78%)}
.nlBg~.nlMax img{width:190px}
.nlCard{isolation:isolate}
.nlDate b.nlCd{color:#f5c04a;font-variant-numeric:tabular-nums}
.nlLogo{width:min(300px,82%);height:auto;margin-top:6px;filter:drop-shadow(0 8px 14px #0008)}
.nlMax{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px}.nlMax img{width:200px;height:auto}
.nlMax span{font:800 11px/1 var(--font-body);letter-spacing:.3em;color:#f5c04a;padding-left:.3em}
.nlDate{width:100%;margin-top:auto;padding:9px 10px;background:#263a89;border:1px solid #ffffff14;display:flex;flex-direction:column;gap:3px}
.nlDate small{font:700 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#aab4d2}.nlDate b{font:800 16px/1.1 var(--font-display);color:#f3f6ff;letter-spacing:.02em}
.nlFine{margin:0 0 4px;font:600 11.5px/1.4 var(--font-body);color:#aab4d2}
.nlDuo{display:flex;justify-content:center;align-items:flex-end;height:112px;margin-top:2px}.nlDuo img{width:auto;height:110px;filter:drop-shadow(0 8px 12px #0009)}.nlDuo img+img{margin-left:-18px}
.nlH{margin:2px 0 0;font:800 20px/1.05 var(--font-display);color:#f5c04a;letter-spacing:.02em;text-transform:uppercase}.nlH small{display:block;margin-top:3px;font:700 12px/1 var(--font-body);letter-spacing:.12em;color:#c5cee6}
.nlTx,.nlStory{margin:0;font:500 12.5px/1.45 var(--font-body)}.nlStory{color:#aab4d2}.nlStory i{color:#f3f6ff;font-style:normal;font-weight:700}
.nlStats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:auto;margin-bottom:4px;border:1px solid #ffffff14;background:#263a89}
.nlStats span{display:flex;flex-direction:column;gap:3px;padding:7px 4px;font:700 9.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#aab4d2}.nlStats span+span{border-left:1px solid #ffffff14}.nlStats b{font:800 16px/1 var(--font-display);color:#f3f6ff;letter-spacing:0}
.nlArt{width:160px;height:160px;object-fit:cover;border:1px solid #ffffff26;margin-top:4px}
.nlTag{margin:0;font:600 13px/1.35 var(--font-body);color:#f3f6ff}
.nlNav{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-top:1px solid #ffffff14;margin-top:8px}
.nlArr{width:30px;height:30px;display:grid;place-items:center;background:#263a89;border:1px solid #ffffff1f;color:#f3f6ff;font:700 20px/1 var(--font-body);cursor:pointer;padding:0}
.nlArr:hover,.nlArr:focus-visible{border-color:#f5c04a;color:#f5c04a;outline:none}
.nlDots{flex:1;display:flex;justify-content:center;gap:6px}.nlDots i{width:18px;height:3px;background:#ffffff2e}.nlDots i.on{background:#f5c04a}
.nlCount{font:700 11px/1 var(--font-body);color:#aab4d2;letter-spacing:.06em;min-width:34px;text-align:right}
@media(prefers-reduced-motion:reduce){.nlCard{transition:none;transform:none}}
/* stream playlist (1 Nov 2026): the playlist set on the admin page, the song playing while live (kick-events /site-playlist) */
.spCard h3{display:flex;align-items:center;justify-content:space-between;gap:10px}.spCard h3 svg{width:24px;height:24px;flex:none}.spCard h3 .plLogo{width:34px;height:34px;flex:none;filter:drop-shadow(0 3px 8px #0006)}
.plHd{display:flex;align-items:center;gap:8px}.plShuf{width:32px;height:32px;display:grid;place-items:center;border:1px solid #ffffff26;background:#ffffff0d;color:#c5cee6;cursor:pointer;border-radius:4px;transition:color .2s,border-color .2s,transform .2s}.plShuf svg{width:18px;height:18px}.plShuf:hover{color:#1ed760;border-color:#1ed76088}.plShuf:active{transform:scale(.92)}
.plTop{display:flex;gap:14px;align-items:center}.plCov{width:92px;height:92px;flex:none;object-fit:cover;background:#263a89}
.plTop small{font:800 10px var(--font-body);letter-spacing:.14em;color:#1ed760;text-transform:uppercase}
.plName{font:800 21px/1.05 var(--font-display);margin:3px 0;color:#f3f6ff;overflow-wrap:anywhere}.plMeta{color:#aab4d2;font-size:12.5px}
.plStage{margin:14px 0 4px;min-height:84px;position:relative}
.plFeat{width:100%;display:flex;gap:14px;align-items:center;padding:10px;background:linear-gradient(110deg,#1ed76014,#0f1840 55%);border:1px solid #1ed76033;border-left:3px solid #1ed760;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:border-color .2s,background .2s}
.plFeat[hidden],.plPlayer[hidden]{display:none!important}.plFeat:hover{border-color:#1ed76088}.plFeat[disabled]{cursor:default}
.plArt{position:relative;width:64px;height:64px;flex:none}.plArt img{width:64px;height:64px;object-fit:cover;display:block;background:#22347a}
.plBig{position:absolute;right:-6px;bottom:-6px;width:30px;height:30px;border-radius:50%;background:#1ed760;color:#0b1a0f;display:grid;place-items:center;box-shadow:0 4px 12px #0008;transition:transform .2s}.plBig svg{width:16px;height:16px;margin-left:2px}
.plFeat:hover .plBig{transform:scale(1.12)}.plFeat[disabled] .plBig{display:none}
.plFx{flex:1;min-width:0}.plFx small{display:flex;align-items:center;gap:6px;font:800 10px var(--font-body);letter-spacing:.14em;color:#1ed760;text-transform:uppercase}
.plFx b{display:block;color:#f3f6ff;margin-top:4px;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plFx .a{display:block;color:#c5cee6;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plEq{display:inline-flex;gap:2px;align-items:flex-end;height:10px}.plEq i{width:3px;height:3px;background:#1ed760;animation:plEq 1s infinite ease-in-out}.plEq i:nth-child(2){animation-delay:-.3s}.plEq i:nth-child(3){animation-delay:-.6s}
@keyframes plEq{0%,100%{height:3px}50%{height:10px}}
.plPlayer{position:relative}.plHost{border-radius:0;overflow:hidden;background:#121212;line-height:0;height:150px}.plHost iframe{display:block;border:0!important;width:calc(100% + 26px)!important;height:176px!important;margin:-13px!important;border-radius:0!important;background:#121212}
.plX{position:absolute;top:-10px;left:-10px;width:24px;height:24px;border-radius:50%;border:1px solid #ffffff40;background:#0f1840;color:#f3f6ff;font:700 16px/1 var(--font-body);cursor:pointer;display:grid;place-items:center;z-index:2}.plX:hover{background:#1ed760;color:#0b1a0f}
.plList{list-style:none;margin:10px 0 0;padding:0}
.plRow{width:100%;display:grid;grid-template-columns:18px 42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 6px;border:0;border-top:1px solid #ffffff1a;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.plRow:hover,.plRow.on{background:#1ed76012}.plRow.on .t{color:#1ed760}
.plRow .k{color:#aab4d2;font-weight:700;text-align:right}
.plRow .pa{position:relative;width:42px;height:42px}.plRow .pa img{width:42px;height:42px;object-fit:cover;display:block;background:#263a89}
.plRow .pa i{position:absolute;inset:0;display:grid;place-items:center;background:#000a;color:#1ed760;opacity:0;transition:opacity .15s}.plRow .pa i svg{width:18px;height:18px}
.plRow:hover .pa i,.plRow:focus-visible .pa i,.plRow.on .pa i{opacity:1}
.plRow .t{font-weight:700;color:#f3f6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plRow .t span{display:block;font-weight:500;color:#aab4d2;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.plRow .d{color:#aab4d2;font-size:12px}
.plGo{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;padding:11px;background:#1ed760;color:#0b1a0f!important;font:800 14px var(--font-body);text-decoration:none}.plGo img{width:24px;height:24px;filter:drop-shadow(0 1px 2px #0005)}
.plGo:hover{filter:brightness(1.08)}
.plPager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:#aab4d2;font:700 12.5px var(--font-body)}.plPg{width:34px;height:34px;display:grid;place-items:center;border:1px solid #ffffff26;background:#ffffff0d;color:#f3f6ff;border-radius:4px;cursor:pointer;transition:border-color .2s,color .2s}.plPg svg{width:16px;height:16px}.plPg:hover:not(:disabled){border-color:#1ed76088;color:#1ed760}.plPg:disabled{opacity:.35;cursor:default}.plPager[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.plEq i{animation:none;height:8px}}
/* Wager Race page (2 Nov 2026): Thrill's monthly wager standings from hq-api /race */
#race .rcHero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;padding:34px 38px;background:radial-gradient(60% 90% at 90% 10%,#f5c04a1f,transparent 70%),linear-gradient(150deg,#22347a,#1a2a66);border:1px solid #ffffff1a;border-top:3px solid #f5c04a}
.rcEye{font:800 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#f5c04a}
#race h1{margin:10px 0 10px;font:800 clamp(40px,4.6vw,66px)/.95 var(--font-display);color:#f3f6ff}#race h1 span{color:#f5c04a}
.rcCopy p{margin:0;color:#c5cee6;max-width:48ch;font-size:16px}
.rcActs{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.rcCode{display:inline-flex;gap:8px;align-items:center;padding:9px 14px;background:#0f1840;border:1px solid #5cffc155;font:700 14px var(--font-body);color:#c5cee6}.rcCode b{color:#5cffc1;letter-spacing:.06em}
.rcNote{margin-top:12px!important;color:#f5c04a!important;font-weight:700}
.rcClock{text-align:center;padding:22px;background:#0f1840;border:1px solid #ffffff1a}
.rcClock small{display:block;font:800 11px var(--font-body);letter-spacing:.16em;color:#aab4d2;text-transform:uppercase}
.rcCd{display:flex;justify-content:center;gap:8px;margin:12px 0 16px}.rcCd div{min-width:62px;padding:10px 6px;background:#263a89;border:1px solid #ffffff1a}
.rcCd b{display:block;font:800 34px/1 var(--font-display);color:#f3f6ff;font-variant-numeric:tabular-nums}.rcCd i{font:700 10px var(--font-body);color:#aab4d2;font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.rcPool{font:800 34px/1 var(--font-display);color:#f5c04a;margin-top:4px}
.rcPrizes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}.rcPrizes span{padding:4px 8px;border:1px solid #ffffff1f;font:700 12px var(--font-body);color:#c5cee6}.rcPrizes b{color:#f3f6ff}
.rcPod{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:14px;align-items:end;margin-top:18px}.rcPod.only2{grid-template-columns:1fr 1.12fr}.rcPod.only1{grid-template-columns:minmax(0,380px);justify-content:center}
.rcPc{padding:20px 16px 16px;text-align:center;background:#22347a;border:1px solid #ffffff1a}
.rcPc img{height:84px;width:auto}
.rcPc .nm{font:800 19px var(--font-body);letter-spacing:.02em;margin-top:6px;color:#f3f6ff}.rcPc .wg{color:#c5cee6;font-weight:700}.rcPc .wg b{color:#f3f6ff}
.rcPc .pr{display:inline-block;margin-top:10px;padding:5px 10px;background:#0f1840;border:1px solid #f5c04a;color:#f5c04a;font:800 14px var(--font-body)}
.rcPc.empty .nm{color:#aab4d2}
.rcBoard{margin-top:18px;padding:0!important;overflow:hidden}
.rcBh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #ffffff1a}.rcBh h2{margin:0;font:800 26px var(--font-display)}
.rcTabs{display:flex;gap:6px}.rcTabs button{padding:7px 12px;border:1px solid #ffffff1f;background:transparent;font:700 13px var(--font-body);color:#c5cee6;cursor:pointer}.rcTabs button.on{background:#f5c04a;color:#1a2450;border-color:#f5c04a}
.rcRow{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.2fr) 120px 80px;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid #ffffff12;font-weight:600}
.rcRow.hd{border-top:0;font:800 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#aab4d2;padding:10px 20px}
.rcRk{display:inline-grid;place-items:center;width:30px;height:30px;background:#263a89;font:800 15px var(--font-display);color:#f3f6ff}
.rcBar{height:5px;background:#ffffff14}.rcBar i{display:block;height:100%;background:linear-gradient(90deg,#3fd2ff,#5cffc1)}
.rcRow .r{text-align:right}.rcRow .pz{color:#f5c04a;font-weight:800}
.rcEmpty{padding:28px 20px;text-align:center;color:#c5cee6}.rcEmpty b{display:block;font:800 22px var(--font-display);color:#f3f6ff;margin-bottom:6px}
.rcUpd{margin:0;padding:10px 20px 14px;color:#aab4d2;font-size:12.5px}
.rcFoot{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.rcBox h3{margin:0 0 8px;font:800 20px var(--font-display)}.rcBox ul{margin:0;padding-left:18px}.rcBox li{color:#c5cee6;margin:5px 0}
.rcFine{text-align:center;margin:18px 0 0;font-size:12.5px}.rcFine a{color:#aab4d2}
@media(max-width:900px){#race .rcHero{grid-template-columns:1fr;padding:24px}.rcPod{grid-template-columns:1fr}.rcFoot{grid-template-columns:1fr}}
@media(max-width:600px){.rcRow{grid-template-columns:40px minmax(0,1fr) 96px 56px;padding:10px 12px}.rcRow>:nth-child(3){display:none}.rcRow.hd{padding:10px 12px}.rcCd div{min-width:54px}.rcCd b{font-size:28px}}
/* home side card: Chat leaderboard / Wager Race tabs */
#homePodium[hidden],#homeRace[hidden],#hmLbTabs[hidden]{display:none!important}
/* the two tabs share one spot, so the card keeps the taller one's height whichever is showing (an empty Wager Race never shrinks it) */
.hmLbBox{display:grid}.hmLbBox>#homePodium,.hmLbBox>#homeRace{grid-area:1/1;min-width:0}
.hmLbBox>#homePodium[hidden],.hmLbBox>#homeRace[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.hmLbBox>#homeRace{margin-top:0;align-self:stretch}.hmLbBox>#homeRace .none{flex:1;display:flex;align-items:center;justify-content:center}
.hmLbTabs{display:flex;gap:4px}.hmLbTabs button{padding:5px 9px;border:1px solid #ffffff1f;background:transparent;color:#c5cee6;font:700 11.5px var(--font-body);cursor:pointer}.hmLbTabs button.on{background:#f5c04a;border-color:#f5c04a;color:#1a2450}
.hmRace{display:flex;flex-direction:column;gap:6px}.hmRace a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;background:#22347a;border:1px solid #ffffff1a;border-left:3px solid #f5c04a;color:#f3f6ff;text-decoration:none;font-weight:700}
.hmRace a:nth-child(2){border-left-color:#c9d3e6}.hmRace a:nth-child(3){border-left-color:#d08a52}.hmRace a b{color:#5cffc1;font-weight:800}.hmRace .k{font:800 16px var(--font-display);color:#f5c04a}
.hmRace .none{padding:12px;color:#c5cee6;border:1px dashed #ffffff26;text-align:center}
.hmTile.thr{justify-content:center;text-align:center}
.hmTile.thr>span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.hmTile.thr b{display:flex;align-items:center;gap:8px}
.hmTile.thr b img{width:62px;height:auto;filter:none;margin:0}
.hmTile.thr .thrSr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hmTile.thr small{margin-top:4px}
.hmTile.thr code{display:block;align-self:center;padding:3px 9px;border-radius:4px;color:#5cffc1;background:#5cffc11a;border:1px solid #5cffc140;font:800 clamp(17px,1.35vw,21px)/1.15 var(--font-display);letter-spacing:.06em}
.hmTile.flash{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime),0 14px 32px -16px var(--lime)}
.hmStrip{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:16px;padding:12px 18px;border:1px solid var(--line-2);border-radius:5px;background:#0f1a44}
.hmStrip h4{margin:0;color:var(--cyan);font:800 12.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.hmSt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;font-size:14px}
.hmSt small{color:var(--muted);font-weight:700;font-size:13.5px}
.hmStrip .hmSt[hidden],.hmStrip .hmSep[hidden],.hmGoal[hidden]{display:none}
#hmStripNone{color:var(--muted);font-weight:600}
.hmGoal{flex:1 1 260px;display:flex;align-items:center;gap:10px;min-width:0}
.hmGoal small{color:var(--muted);font-weight:700;font-size:13px;white-space:nowrap}
.hmBar{flex:1;min-width:60px;height:8px;border-radius:3px;background:#ffffff1a;overflow:hidden}
.hmBar i{display:block;height:100%;width:0;background:#53fc18;transition:width .8s var(--ease)}
.hmSep{width:1px;height:24px;background:var(--line-3)}
.hmGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start}
@media(max-width:1300px){.hmGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.hmGrid>.hmColX{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.hmGrid>.hmColX:has(>.spCard[hidden]){grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){.hmGrid>.hmColX{grid-template-columns:minmax(0,1fr)}}
/* X posts show the whole picture (owner, 1 Nov 2026: never cropped) */
.hmGrid .xPostMedia img,.hmGrid .xTrack .xPostMedia img,.hmGrid .xTrack .xPost.hasLong .xPostMedia img{height:auto;max-height:none;object-fit:contain}
.hmColX,.hmColL,.hmColR{display:grid;gap:16px;min-width:0;align-content:start}
/* nothing in a column can ever spill into the next one (8 Nov 2026, owner's screenshot: the X post ran under Newest clip and over the Nolimit card):
   every track is minmax(0,1fr), every card and the X post may shrink, and each column clips sideways (the cards' shadows fall downwards) */
.hmColX,.hmColL,.hmColR{grid-template-columns:minmax(0,1fr);overflow-x:clip}
.hmColX>*,.hmColL>*,.hmColR>*{min-width:0;max-width:100%}
.hmGrid .xTrack{grid-template-columns:minmax(0,1fr)}.hmGrid .xTrack>.xPost{min-width:0;max-width:100%}.hmGrid .xPostMedia,.hmGrid .xPostMedia img{max-width:100%}
.nlTrack{grid-template-columns:minmax(0,1fr)}
.hmClipNone{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:16/9;min-height:0;padding:18px;border-radius:4px;background:linear-gradient(0deg,#0b1230f2,#0b123033 70%),url(/assets/header-clips-couch.webp) center/cover}
.hmClipNone b{font:800 22px/1.05 var(--font-display);text-transform:uppercase}
.hmClipNone span{color:var(--text-2);font-size:14px}
.hmCard{padding:18px;border-radius:5px}
.hmCard h3,.hmCard .xHead{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:800 24px/1 var(--font-display);text-transform:uppercase}
.hmClip,.hmChal{display:flex;flex-direction:column}
#hmClipBody{display:block}#hmClipBody>*{width:100%}   /* the clip keeps its 16:9 shape (it stretched into a tall box when the chat panel narrowed the row) */
.hmBanner{position:relative;margin-top:16px;aspect-ratio:1456/180;border-radius:5px;overflow:hidden;background:#151a2e;box-shadow:0 18px 40px -26px #000}
.hmPromoTrack{position:absolute;inset:0}
.hmSlide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s;background:var(--sbg,#151a2e)}
.hmSlide.on{opacity:1;visibility:visible}
.hmSlide a{display:block;height:100%}
.hmSlide img{width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.hmPromoDots{position:absolute;right:14px;bottom:10px;display:flex;gap:6px;z-index:2}
.hmPromoDots button{width:22px;height:4px;padding:0;border:0;border-radius:2px;background:#ffffff4d;cursor:pointer}
.hmPromoDots button.on{background:#fff}
.hmMe{display:flex;align-items:center;gap:clamp(12px,2vw,26px);height:100%;padding:0 clamp(16px,3vw,40px);background:radial-gradient(60% 160% at 100% 50%,#a3f04a2e,transparent 60%),linear-gradient(100deg,#2a3f95,#1a2864)}
.hmMe .hmAv{width:clamp(48px,6vw,84px);height:clamp(48px,6vw,84px)}
.hmMe .hmMeTx{flex:1;min-width:0}
.hmMe small{color:var(--muted);font:800 clamp(10px,.9vw,12px) var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.hmMe b{display:block;font:800 clamp(26px,3.4vw,52px)/1 var(--font-display);color:var(--gold)}
.hmMe p{margin:2px 0 0;color:var(--text-2);font-size:clamp(12px,1vw,14px)}
.hmMe .hmBtns{flex:none}
.hmClipPlay{position:relative;display:block;width:100%;padding:0;border:0;border-radius:4px;overflow:hidden;background:#000 center/cover;aspect-ratio:16/9;cursor:pointer;text-align:left;color:#fff}
.hmClipPlay::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d,transparent 60%)}
.hmClipPlay video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hmClipPlay .pl{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#ffffffeb;color:#16224f;transition:transform .2s}
.hmClipPlay:hover .pl{transform:translate(-50%,-50%) scale(1.08)}
.hmClipPlay .pl svg{width:22px;height:22px;margin-left:3px}
.hmClipPlay>span.t{position:absolute;left:14px;right:14px;bottom:12px;z-index:1}
.hmClipPlay b{display:block;font:800 22px/1.05 var(--font-display);text-transform:uppercase}
.hmClipPlay small{color:#dfe5ff}
.hmRace{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.hmRaceRow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line-2);border-radius:4px;background:#ffffff06}
.hmRaceRow img{width:30px;height:30px;object-fit:contain}
.hmRaceRow b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmRaceRow span{color:var(--cyan);font-weight:800;font-size:13.5px}
.hmRaceBar{grid-column:2/-1;height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}
.hmRaceBar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime))}

@media(max-width:980px){
  .hmHero{grid-template-columns:minmax(0,1fr)}
  .hmSide{border-left:0;border-top:1px solid var(--line-2)}
  .hmGrid{grid-template-columns:minmax(0,1fr)}
}
/* the order of the home page's blocks on phones and tablets, set on the admin page (7 Nov 2026): each block gets order from --o-<key>; computers keep the layout */
@media(max-width:980px){
  #home.active{display:flex;flex-direction:column;gap:16px}
  #home.active>*{margin-top:0!important}
  #home .hmHero,#home .hmGrid,#home .hmColX,#home .hmColL,#home .hmColR{display:contents}
  #home .hmMain{border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:radial-gradient(70% 90% at 0% 0%,#3fd2ff1f,transparent 60%),linear-gradient(135deg,#26398a,#1b2a6b);box-shadow:var(--edge),0 24px 60px -30px #000c}
  #home .hmSide{border:1px solid var(--line-2);border-radius:6px;background:linear-gradient(#0f1a44b3,#0f1a44b3),linear-gradient(135deg,#26398a,#1b2a6b);overflow:hidden}
  #home .hmMain{order:var(--o-hero,1)}#home .hmSide{order:var(--o-side,2)}#home .hmTiles{order:var(--o-tiles,3)}#home .hmStrip{order:var(--o-strip,4)}#home #hmPromo{order:var(--o-promo,5)}#home #cxStrip{order:var(--o-crypto,6)}
  #home .hmX{order:var(--o-x,7)}#home #spCard{order:var(--o-playlist,8)}#home #hmClip{order:var(--o-clip,9)}#home #nlMod{order:var(--o-nolimit,10)}#home #spStrip{order:var(--o-scores,11)}#home #dcCard{order:var(--o-discord,12)}#home #hmChal{order:var(--o-race5,13)}
}
@media(max-width:780px){
  .hmMain{min-height:0}
  .hmMain>div{position:relative;inset:auto}
  .hmOff>.mascotArea{position:relative;width:100%;max-width:none;height:auto;-webkit-mask-image:linear-gradient(0deg,transparent,#000 25%);mask-image:linear-gradient(0deg,transparent,#000 25%)}
  .hmTxt{position:relative;left:auto;top:auto;transform:none;max-width:none;padding:0 18px 22px;margin-top:-56px}
  .hmOff::after{display:none}
  .hmHunt .hmHuntPic{position:relative;height:auto;aspect-ratio:4/3}
  .hmHunt::after{background:linear-gradient(0deg,#16224f 30%,transparent 70%)}
  .hmLive{padding:10px}.hmPlayer{max-height:none}.hmCap{flex-direction:column;align-items:flex-start}
  .hmTiles{gap:10px}.hmTiles>.hmTile{flex:1 1 40%}
  .hmTile{padding:12px}.hmTile img{width:40px;height:40px}.hmTile b{font-size:16px}
  .hmTile:last-child{grid-column:1/-1}
  .hmSep{display:none}
  .hmBanner{aspect-ratio:auto;height:96px}.hmMe .hmBtns,.hmMe p{display:none}
  .hmCount div{min-width:64px}
}
@media(prefers-reduced-motion:reduce){.hmHero .hmMain>div,.hmEye i{animation:none!important}.hmSlide{transition:none}}
/* Thrill Originals (1 Nov 2026, from Thrill's brand pack): the words, Mines in play, and the Mines poster */
.thrillOrig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;gap:clamp(18px,2.4vw,32px);align-items:center;margin-top:18px;padding:clamp(20px,2.4vw,32px);background:radial-gradient(60% 120% at 100% 0%,#ff3d6e22,transparent 60%),linear-gradient(160deg,#20253a,#171b2a)}
.thrillOrig .toEye{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:4px;background:#5cffc11f;color:#5cffc1;font:800 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.thrillOrig .toGame img{display:block;width:100%;height:auto;border-radius:5px;box-shadow:0 18px 40px #0008}
.thrillOrig .toPoster{display:block;height:clamp(220px,22vw,320px);width:auto;border-radius:5px;box-shadow:0 18px 40px #0008}
@media(max-width:1100px){.thrillOrig{grid-template-columns:minmax(0,1fr) auto}.thrillOrig .toGame{grid-column:1/-1;grid-row:2}}
@media(max-width:640px){.thrillOrig{grid-template-columns:minmax(0,1fr)}.thrillOrig .toPoster{grid-row:1;justify-self:center;height:240px}}
.spRec{display:block;color:#aab4d2;font:700 11.5px var(--font-body);margin-top:2px}.spMl{display:block;margin-top:3px;color:#f5c04a;font:800 12.5px var(--font-body);font-variant-numeric:tabular-nums}.spOdds{margin-top:4px;color:#f5c04a;font:800 12px var(--font-body);letter-spacing:.02em}