/* ============================ TOKENS ============================ */
:root{
  --coral:#FF5C6E; --coral-deep:#F0384D;
  --aqua:#1FC7B6; --aqua-deep:#0FA695;
  --amber:#FFB23E; --amber-deep:#F0951A;
  --violet:#7B6CF6;

  --ground:#EEF0F7;
  --paper:#FBFBFE;
  --paper-2:#F4F5FB;
  --line:#E0E2EF;
  --line-2:#D2D5E6;
  --ink:#171A2E;
  --ink-soft:#3C4162;
  --muted:#6A6F8E;
  --faint:#9BA0BC;

  --shadow-sm:0 1px 2px rgba(23,26,46,.06), 0 2px 6px rgba(23,26,46,.05);
  --shadow-md:0 6px 18px rgba(23,26,46,.09), 0 2px 6px rgba(23,26,46,.05);
  --shadow-lg:0 24px 60px rgba(23,26,46,.16), 0 8px 20px rgba(23,26,46,.08);
  --ring:0 0 0 3px rgba(31,199,182,.35);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
  --maxw:1160px;
  --font-display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --ground:#090B18;
    --paper:#141733;
    --paper-2:#1B1F42;
    --line:#282D55;
    --line-2:#343A6B;
    --ink:#F3F4FE;
    --ink-soft:#C8CCEC;
    --muted:#9297C4;
    --faint:#666C9C;
    --coral:#FF6E7E; --aqua:#31D9C7; --amber:#FFBE57;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px rgba(0,0,0,.5);
    --shadow-lg:0 30px 70px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.4);
    --ring:0 0 0 3px rgba(49,217,199,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#090B18;
  --paper:#141733;
  --paper-2:#1B1F42;
  --line:#282D55;
  --line-2:#343A6B;
  --ink:#F3F4FE;
  --ink-soft:#C8CCEC;
  --muted:#9297C4;
  --faint:#666C9C;
  --coral:#FF6E7E; --aqua:#31D9C7; --amber:#FFBE57;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(49,217,199,.4);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.05; margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:10px}
::selection{background:var(--aqua); color:#04110f}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ============================ NAV ============================ */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb, var(--ground) 80%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-color:var(--line); background:color-mix(in srgb, var(--ground) 92%, transparent)}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:1.28rem; letter-spacing:-.03em; cursor:pointer; flex-shrink:0}
.brand .logo{width:34px; height:34px; flex-shrink:0}
.brand b{background:linear-gradient(120deg,var(--coral),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-spacer{flex:1}
.nav-search{
  display:flex; align-items:center; gap:9px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px; min-width:190px; max-width:340px; flex:1;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s, border-color .2s;
}
.nav-search:focus-within{border-color:var(--aqua); box-shadow:var(--ring)}
.nav-search svg{color:var(--muted); flex-shrink:0}
.nav-search input{border:none; background:none; outline:none; color:var(--ink); font-size:.95rem; width:100%}
.nav-search input::placeholder{color:var(--faint)}
.icon-btn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .15s, border-color .2s; flex-shrink:0}
.icon-btn:hover{transform:translateY(-2px); border-color:var(--line-2)}
.icon-btn:active{transform:translateY(0) scale(.94)}
@media(max-width:640px){ .nav-search{min-width:0} .brand span.word{display:none} }

/* ============================ LAYOUT ============================ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.view{animation:viewIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes viewIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ============================ HERO ============================ */
.hero{position:relative; padding:56px 0 30px; text-align:center; overflow:hidden}
#ripple-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-in{position:relative; z-index:2; max-width:820px; margin:0 auto}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.22em; color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:7px 15px; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:24px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 0 var(--aqua); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--aqua) 60%, transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.1rem); font-weight:800; letter-spacing:-.045em; line-height:.96}
.hero h1 .grad{background:linear-gradient(105deg,var(--coral) 0%, var(--amber) 45%, var(--aqua) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.32rem); color:var(--muted); max-width:560px; margin:22px auto 0; line-height:1.5}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1rem; padding:14px 26px; border-radius:999px; transition:transform .16s, box-shadow .2s, background .2s; position:relative; overflow:hidden}
.btn svg{flex-shrink:0}
.btn-primary{background:linear-gradient(120deg,var(--coral),var(--coral-deep)); color:#fff; box-shadow:0 10px 26px color-mix(in srgb,var(--coral) 45%, transparent)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 34px color-mix(in srgb,var(--coral) 55%, transparent)}
.btn-primary:active{transform:translateY(-1px) scale(.98)}
.btn-ghost{background:var(--paper); border:1px solid var(--line); color:var(--ink); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-md)}
.trust{margin-top:30px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; color:var(--faint); font-size:.82rem; font-family:var(--font-mono)}
.trust b{color:var(--ink-soft)}

/* ============================ TOOL GRID ============================ */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:52px 0 22px; flex-wrap:wrap}
.section-head h2{font-size:clamp(1.5rem,3vw,2rem)}
.section-head p{color:var(--muted); font-size:.95rem}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.chip{font-size:.85rem; font-weight:600; padding:8px 15px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--muted); transition:all .18s; cursor:pointer}
.chip:hover{color:var(--ink); border-color:var(--line-2); transform:translateY(-1px)}
.chip.active{background:var(--ink); color:var(--ground); border-color:var(--ink)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px}
.card{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px; text-align:left; cursor:pointer; overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s;
  display:flex; flex-direction:column; gap:13px; min-height:150px;
}
.card::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, var(--glow,transparent) 0%, transparent 55%); opacity:.14; transition:opacity .25s}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--glow,var(--line-2))}
.card:hover::before{opacity:.28}
.card:hover .tool-ico{transform:scale(1.08) rotate(-4deg)}
.card:focus-visible{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.tool-ico{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:26px; background:color-mix(in srgb,var(--glow) 16%, var(--paper-2)); border:1px solid color-mix(in srgb,var(--glow) 30%, var(--line)); transition:transform .25s cubic-bezier(.3,1.4,.5,1); flex-shrink:0}
.card h3{font-size:1.14rem; letter-spacing:-.02em}
.card p{color:var(--muted); font-size:.88rem; line-height:1.45}
.card .go{margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--glow,var(--aqua)); font-weight:500; opacity:0; transform:translateX(-6px); transition:.2s}
.card:hover .go{opacity:1; transform:none}
.card .tag{position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; padding:4px 9px; border-radius:999px; background:color-mix(in srgb,var(--glow) 18%, transparent); color:var(--glow); border:1px solid color-mix(in srgb,var(--glow) 35%, transparent)}
.empty{grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--muted)}

/* ============================ TOOL STAGE ============================ */
.stage{padding:26px 0 60px}
.breadcrumb{display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--muted); margin-bottom:22px}
.breadcrumb button{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--paper); transition:.18s}
.breadcrumb button:hover{color:var(--ink); border-color:var(--line-2); transform:translateX(-2px)}
.stage-head{display:flex; align-items:center; gap:16px; margin-bottom:8px}
.stage-head .tool-ico{width:60px; height:60px; font-size:30px}
.stage-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.stage-head p{color:var(--muted); margin-top:4px}
.stage-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:22px; margin-top:26px}
.stage-grid.split{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
@media(max-width:820px){ .stage-grid.split{grid-template-columns:minmax(0,1fr)} }
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm)}
.panel.stagebox{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:420px; gap:22px; position:relative; overflow:hidden}
.field-label{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:9px}
.field-label .count{color:var(--aqua)}
textarea, input[type=text], input[type=number], select{
  width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); font-family:var(--font-body); font-size:.98rem; padding:13px 15px; transition:border-color .2s, box-shadow .2s; resize:vertical;
}
textarea{min-height:200px; line-height:1.7; font-family:var(--font-mono); font-size:.92rem}
textarea:focus, input:focus, select:focus{outline:none; border-color:var(--aqua); box-shadow:var(--ring)}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row.tight{gap:8px}
.stepper{display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--paper-2)}
.stepper button{width:44px; height:46px; font-size:1.3rem; color:var(--muted); transition:.15s}
.stepper button:hover{background:var(--paper); color:var(--ink)}
.stepper input{border:none; border-radius:0; text-align:center; background:transparent; width:64px; font-family:var(--font-mono); font-weight:500; box-shadow:none}
.stepper input:focus{box-shadow:none}
.opt{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--paper-2); cursor:pointer; transition:.18s; font-size:.92rem; font-weight:500; user-select:none}
.opt:hover{border-color:var(--line-2)}
.opt.on{border-color:var(--aqua); background:color-mix(in srgb,var(--aqua) 12%, var(--paper-2))}
.opt .box{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); display:grid; place-items:center; flex-shrink:0; transition:.15s}
.opt.on .box{background:var(--aqua); border-color:var(--aqua); color:#04110f}
.opt .box svg{opacity:0; transition:.15s}
.opt.on .box svg{opacity:1}
.help{font-size:.84rem; color:var(--muted); line-height:1.5}
.divider{height:1px; background:var(--line); margin:18px 0}

.btn-block{width:100%; justify-content:center; font-size:1.05rem; padding:16px}
.btn-aqua{background:linear-gradient(120deg,var(--aqua),var(--aqua-deep)); color:#04110f; box-shadow:0 10px 26px color-mix(in srgb,var(--aqua) 40%, transparent)}
.btn-aqua:hover{transform:translateY(-3px); box-shadow:0 16px 34px color-mix(in srgb,var(--aqua) 50%, transparent)}
.btn-aqua:active{transform:translateY(-1px) scale(.99)}
.btn-amber{background:linear-gradient(120deg,var(--amber),var(--amber-deep)); color:#2a1900; box-shadow:0 10px 26px color-mix(in srgb,var(--amber) 40%, transparent)}
.btn-amber:hover{transform:translateY(-3px)}
.btn-sm{padding:9px 16px; font-size:.88rem; border-radius:999px}

/* result displays */
.result-hero{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; text-align:center; line-height:1; animation:popIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes popIn{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)}}
.result-label{font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); text-align:center}
.winner-chip{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(120deg,var(--amber),var(--coral)); color:#2a1400; font-family:var(--font-display); font-weight:700; font-size:1.5rem; padding:14px 26px; border-radius:999px; box-shadow:var(--shadow-md); animation:popIn .5s cubic-bezier(.2,1.4,.4,1)}
.pill-list{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.pill{background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:9px 17px; font-weight:600; font-size:.95rem; animation:popIn .4s cubic-bezier(.2,1.4,.4,1) backwards}
.teams-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; width:100%}
.team{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; animation:popIn .45s cubic-bezier(.2,1.2,.4,1) backwards}
.team h4{font-size:1.02rem; display:flex; align-items:center; gap:8px; margin-bottom:11px}
.team h4 .swatch{width:12px; height:12px; border-radius:4px}
.team ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.team li{font-size:.94rem; padding:7px 11px; background:var(--paper); border-radius:9px; border:1px solid var(--line)}
.hist{width:100%; margin-top:6px}
.hist .field-label{margin-bottom:11px}
.hist-list{display:flex; flex-direction:column; gap:7px; max-height:210px; overflow-y:auto}
.hist-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; background:var(--paper-2); border:1px solid var(--line); border-radius:10px; font-size:.9rem; animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.hist-item .when{font-family:var(--font-mono); font-size:.72rem; color:var(--faint)}

/* ad slot */
.adslot{border:1px dashed var(--line-2); border-radius:var(--r-md); padding:16px; text-align:center; color:var(--faint); font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; background:repeating-linear-gradient(45deg,transparent,transparent 10px,color-mix(in srgb,var(--line) 40%,transparent) 10px,color-mix(in srgb,var(--line) 40%,transparent) 11px)}

.explainer{margin-top:26px}
.explainer h3{font-size:1.15rem; margin-bottom:8px}
.explainer p{color:var(--muted); font-size:.95rem; line-height:1.65; max-width:66ch}
.related{margin-top:30px}
.mini-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.mini{display:flex; align-items:center; gap:11px; padding:13px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; transition:.18s}
.mini:hover{transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-md)}
.mini .em{font-size:1.4rem}
.mini b{font-size:.92rem; font-weight:600}

/* dice/coin visuals */
.coin{width:170px; height:170px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:2.4rem; transform-style:preserve-3d; box-shadow:var(--shadow-lg)}
.die{width:84px; height:84px; border-radius:18px; background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--shadow-md); position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:14px; gap:2px}
.die .pip{width:15px; height:15px; border-radius:50%; background:var(--coral); align-self:center; justify-self:center}
.dice-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
@keyframes rollShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) translateY(-6px)}75%{transform:rotate(12deg) translateY(-6px)}}
.rolling{animation:rollShake .12s linear infinite}

/* footer */
.footer{border-top:1px solid var(--line); margin-top:40px; padding:34px 0; color:var(--muted); font-size:.88rem}
.footer-in{max-width:var(--maxw); margin:0 auto; padding:0 22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.footer a{color:var(--muted); transition:.15s}
.footer a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){ *{animation-duration:.001s !important; transition-duration:.05s !important} }

/* ---- production additions ---- */
.stack{display:flex;flex-direction:column;gap:18px}
.center-col{max-width:520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:18px}
.nav-in a.brand{cursor:pointer}
.faq{margin-top:30px}
.faq h2{font-size:1.4rem;margin-bottom:14px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);padding:2px 18px;margin-bottom:10px;background:var(--paper);transition:border-color .2s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;font-weight:600;padding:15px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.3rem;color:var(--aqua);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px;color:var(--muted);line-height:1.65;max-width:70ch}
.explainer h2{font-size:1.4rem;margin-bottom:10px}
.crosslinks{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;line-height:1.8}
.crosslinks a{color:var(--aqua);font-weight:600}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--paper);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow-md)}

/* ---- premium 3D wheel ---- */
.wheel-stage{position:relative}
.wheel-wrap{position:relative;width:100%;aspect-ratio:1;margin:0 auto;isolation:isolate}
.wheel-halo{position:absolute;inset:-9%;border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,#FF5C6E,#FFB23E,#4ADE80,#1FC7B6,#38BDF8,#7B6CF6,#F472B6,#FF5C6E);
  filter:blur(34px) saturate(1.2);opacity:.55;animation:haloSpin 9s linear infinite;will-change:transform}
@keyframes haloSpin{to{transform:rotate(1turn)}}
.wheel-canvas{position:relative;z-index:1;width:100%;height:100%;display:block;border-radius:50%;
  box-shadow:0 18px 44px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25)}
.wheel-hub{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:23%;height:23%;border-radius:50%;border:none;cursor:pointer;color:#fff;overflow:hidden;
  font-family:var(--font-display);font-weight:800;font-size:clamp(.8rem,3vw,1.05rem);letter-spacing:.03em;
  background:radial-gradient(circle at 36% 30%,#ffb3bb 0%,#FF5C6E 42%,#e02a40 100%);
  box-shadow:inset 0 3px 7px rgba(255,255,255,.55), inset 0 -7px 14px rgba(120,0,15,.5), 0 5px 16px rgba(224,42,64,.55), 0 0 0 5px rgba(255,255,255,.07), 0 0 26px rgba(255,92,110,.55);
  transition:transform .14s ease}
.wheel-hub::after{content:"";position:absolute;inset:16% 20% 46% 20%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);pointer-events:none}
.wheel-hub:hover{transform:translate(-50%,-50%) scale(1.06)}
.wheel-hub:active{transform:translate(-50%,-50%) scale(.93)}
.wheel-hub:disabled{cursor:default}
.wheel-ptr{position:absolute;z-index:5;top:-3.5%;left:50%;transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.wheel-ptr svg{display:block}
.wheel-ptr.pop{animation:ptrPop .5s ease}
@keyframes ptrPop{0%,100%{transform:translateX(-50%) translateY(0)}35%{transform:translateX(-50%) translateY(7px)}}
@media(prefers-reduced-motion:reduce){ .wheel-halo{animation:none} }