/* Napínánka web: glass shell, hoop and Halloween scene; tokens on :root, dark and Halloween overrides below. */
:root{
  color-scheme:light dark;
  --bg:#efeae2;--ink:#15172a;--ink-2:#45475a;--muted:#86837a;--thread:#8f7250;
  --glass:radial-gradient(120% 70% at 18% 0%,#ffffffc0,#ffffff00 58%),linear-gradient(160deg,#ffffff70 0%,#ffffff2e 48%,#ffffff45 100%);
  --glass-edge:inset 0 1px 1px #ffffff,inset 0 -1px 1px #ffffff80,inset 0 0 0 1px #ffffffa6,inset 0 -12px 20px -14px #15172a30,0 0 0 .5px #15172a1a;
  --glass-shadow:0 6px 14px -10px #15172a2e;
  --sel:linear-gradient(180deg,#2b2e4b,#121426);--sel-ink:#f6f2ea;
  --a1:#f5c97a;--a2:#eea08c;--a3:#93a9e6;--a4:#b1cc9f;--aurora-o:.7;
  --coach:#117a73;--madder:#c24d36;
  --pin-hi:#fff6dc;--pin-mid:#d4ae62;--pin-lo:#7b5a22;--ghost:#15172a2e;--fill:.34;
  --rim-hi:#ffffffee;--rim-mid:#ffffff66;--rim-lo:#15172a1f;--rim-shade:#15172a2e;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.2,.9,.25,1.1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1120;--ink:#eeeaf6;--ink-2:#bcb9cc;--muted:#8a889c;--thread:#e2c391;
    --glass:radial-gradient(120% 70% at 18% 0%,#ffffff30,#ffffff00 58%),linear-gradient(160deg,#ffffff1c 0%,#ffffff08 50%,#ffffff12 100%);
    --glass-edge:inset 0 1px 1px #ffffff40,inset 0 -1px 1px #ffffff14,inset 0 0 0 1px #ffffff26,inset 0 -12px 20px -14px #00000060,0 0 0 .5px #00000080;
    --glass-shadow:0 8px 16px -10px #0000008c;
    --sel:linear-gradient(180deg,#f3efe7,#d9d3c8);--sel-ink:#15172a;
    --a1:#3d2c78;--a2:#1d4a72;--a3:#2a3a8a;--a4:#6a4516;--aurora-o:.55;
    --pin-hi:#ffeec4;--pin-mid:#c49a4c;--pin-lo:#5e4216;--ghost:#ffffff2e;--fill:.62;
    --rim-hi:#ffffff80;--rim-mid:#ffffff26;--rim-lo:#ffffff08;--rim-shade:#00000066;
  }
}
/* Halloween mood: always a night palette, whatever the system scheme. */
:root[data-theme="halloween"]{
  color-scheme:dark;
  --bg:#0c0911;--ink:#f6eee2;--ink-2:#d8cbba;--muted:#9c8e7d;--thread:#f28c2e;
  --glass:radial-gradient(120% 70% at 18% 0%,#ffd9a82b,#ffffff00 58%),linear-gradient(160deg,#ffffff17 0%,#ffffff06 50%,#ff9a3c12 100%);
  --glass-edge:inset 0 1px 1px #ffe2bf45,inset 0 -1px 1px #ffffff10,inset 0 0 0 1px #ffd6a024,inset 0 -12px 20px -14px #00000070,0 0 0 .5px #00000090;
  --glass-shadow:0 8px 18px -10px #000000a8;
  --sel:linear-gradient(180deg,#ffb45a,#e0661b);--sel-ink:#1c0d03;
  --a1:#ff7a1a;--a2:#4a1f78;--a3:#1f5a36;--a4:#a8560c;--aurora-o:.34;
  --coach:#79a35a;--madder:#d9573d;
  --pin-hi:#efe2cf;--pin-mid:#7d6a59;--pin-lo:#1d1511;--ghost:#f6eee22b;--fill:.55;
  --rim-hi:#ffdcb090;--rim-mid:#ff9a3c33;--rim-lo:#ffffff08;--rim-shade:#00000080;
}
:root[data-theme="halloween"] .hoop{box-shadow:0 0 0 .5px var(--rim-shade),0 26px 50px -28px #000,inset 0 -40px 60px -40px #ff8a2a30}
:root[data-theme="halloween"] h1{text-shadow:0 0 18px #ff8a2a55}
.spooky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none;contain:strict}
:root[data-theme="halloween"] .spooky{display:block;animation:fade 1.6s both}
.spooky > *{position:absolute;left:0;top:0;transform-origin:50% 50%}
.spooky .glow{z-index:0;left:50%;top:auto;bottom:-18vh;width:120vmin;height:60vmin;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,#ff8a2a2e,#ff8a2a00);animation:candle 5.3s linear infinite}
.spooky .moon{z-index:1;top:max(-7vmin,-60px);left:max(-6vmin,-50px);width:min(30vmin,240px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff8e4 0,#f4dfa6 42%,#d8b46a 70%,#c79d52 100%);box-shadow:0 0 60px 18px #ffd99a30,0 0 160px 60px #ff9a3c14;opacity:.3;filter:blur(1.5px);animation:moon 14s ease-in-out infinite alternate}
.spooky .moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 64% 58%,#b08a4a40 0 9%,transparent 10%),radial-gradient(circle at 34% 66%,#b08a4a33 0 6%,transparent 7%),radial-gradient(circle at 56% 30%,#b08a4a2b 0 5%,transparent 6%)}
.spooky .cloud{z-index:2;top:calc(max(-7vmin,-60px) + min(30vmin,240px) * .3);width:min(50vmin,380px);height:min(10vmin,76px);background:radial-gradient(28% 42% at 26% 58%,#2e2638b8,#2e263800 72%),radial-gradient(24% 36% at 50% 46%,#352c40a8,#352c4000 72%),radial-gradient(30% 40% at 74% 60%,#2b2435a0,#2b243500 72%),radial-gradient(46% 22% at 50% 38%,#cfc4e01f,#cfc4e000 74%);opacity:0;animation:cloud 70s linear infinite}
.spooky .cloud.c2{top:calc(max(-7vmin,-60px) + min(30vmin,240px) * .58);width:min(38vmin,280px);height:min(7vmin,54px);animation-duration:84s;animation-delay:-36s}
.spooky .flash{z-index:3;inset:0;background:radial-gradient(120% 80% at 62% -10%,#f1f5ff,#bccbf2 45%,#8195c9);opacity:0}
.spooky .vignette{z-index:4;inset:0;background:radial-gradient(125% 90% at 50% 45%,#0000 42%,#040207c4 100%)}
.spooky .fog{z-index:9;top:auto;bottom:-5vh;width:200vw;height:32vh;background:linear-gradient(0deg,#cdc4e217,#cdc4e200 75%),radial-gradient(24% 46% at 27% 70%,#cdc4e22b,#cdc4e200 70%),radial-gradient(20% 38% at 58% 80%,#cdc4e221,#cdc4e200 70%),radial-gradient(16% 42% at 80% 66%,#cdc4e226,#cdc4e200 70%);background-size:100vw 100%;animation:fog-left 60s linear infinite}
.spooky .fog.f2{z-index:12;bottom:-8vh;height:22vh;opacity:.8;animation:fog-right 90s linear infinite}
.spooky .web{z-index:7;left:auto;right:0;width:clamp(96px,22vmin,200px);height:clamp(96px,22vmin,200px)}
.spooky .web svg{display:block;width:100%;height:100%}
.spooky .web path{fill:none;stroke:#f6eee2;stroke-opacity:.15;stroke-width:.75;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spooky .bat{z-index:5;width:64px;height:30px;margin:-15px 0 0 -32px;overflow:visible;fill:#050308;filter:drop-shadow(0 0 5px #ff8a2a38)}
.spooky .bat.back{fill:#1d1626;filter:none}
.spooky .bat.burst{z-index:14}
.spooky .bat .wing{transform-origin:32px 12.5px;animation:flap .16s cubic-bezier(.45,0,.55,1) infinite}
.spooky .bat.back .wing{animation-duration:.24s}
.spooky .eyes{z-index:6;width:40px;height:16px;margin:-8px 0 0 -20px;overflow:visible}
.spooky .ghost{z-index:13;width:var(--gw);height:calc(var(--gw) * 4 / 3);margin:calc(var(--gw) * -2 / 3) 0 0 calc(var(--gw) / -2);overflow:visible;--gw:96px}
.spooky .ghost.faint{z-index:5;opacity:.32}
.spooky .pumpkin{z-index:11;top:auto;width:var(--pw);aspect-ratio:7/6}
.spooky .pumpkin svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.spooky .pumpkin .lit{position:absolute;inset:0;animation:flame 2.9s linear infinite}
.spooky .pumpkin .spill{position:absolute;left:-70%;right:-70%;bottom:18%;height:210%;border-radius:50%;background:radial-gradient(closest-side,#ff8a2a30,#ff8a2a12 55%,#ff8a2a00)}
.spooky .p1{--pw:clamp(98px,18vmin,200px);left:calc(var(--pw) * -.1);bottom:calc(var(--pw) * -.1)}
.spooky .p2{--pw:clamp(80px,13.5vmin,152px);left:auto;right:calc(var(--pw) * -.12);bottom:calc(var(--pw) * -.09)}
.spooky .p2 .lit{animation-duration:3.7s;animation-delay:-1.3s}
.spooky .p3{z-index:10;--pw:clamp(58px,9.5vmin,108px);left:calc(clamp(98px,18vmin,200px) * .74);bottom:calc(var(--pw) * -.06)}
.spooky .p3 .lit{animation-duration:2.3s;animation-delay:-.7s}
@media(max-width:699px){.spooky .p3{display:none}}
@keyframes fade{from{opacity:0}}
@keyframes fog-left{to{transform:translateX(-100vw)}}
@keyframes fog-right{from{transform:translateX(-100vw)}to{transform:none}}
@keyframes moon{from{transform:translateY(0)}to{transform:translateY(8px)}}
@keyframes cloud{0%{opacity:0;transform:translateX(-100%)}7%,50%{opacity:1}57%,100%{opacity:0;transform:translateX(calc(min(30vmin,240px) * 1.35))}}
@keyframes candle{0%,100%{opacity:.86}9%{opacity:.97}17%{opacity:.8}26%{opacity:1}34%{opacity:.88}41%{opacity:.76}52%{opacity:.95}60%{opacity:.84}68%{opacity:1}77%{opacity:.82}88%{opacity:.93}}
@keyframes flame{0%,100%{opacity:.88}8%{opacity:1}14%{opacity:.8}22%{opacity:.96}31%{opacity:.74}38%{opacity:.92}47%{opacity:.84}55%{opacity:1}63%{opacity:.78}71%{opacity:.95}79%{opacity:.86}90%{opacity:.98}}
@keyframes flap{0%,100%{transform:scale(1,1)}45%{transform:scale(.9,-.62)}}
@media(prefers-reduced-motion:reduce){.spooky,.spooky *{animation:none!important}}
.icon-btn[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink)}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit}
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;filter:blur(70px);opacity:var(--aurora-o)}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%}
.aurora i:nth-child(1){background:var(--a1);left:-22vmax;top:-26vmax;animation:float1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:var(--a2);right:-26vmax;top:4vmax;animation:float2 31s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:var(--a3);left:-10vmax;bottom:-34vmax;animation:float3 29s ease-in-out infinite alternate}
.aurora i:nth-child(4){background:var(--a4);right:-20vmax;bottom:-20vmax;width:44vmax;height:44vmax;animation:float1 35s ease-in-out infinite alternate-reverse}
@keyframes float1{to{transform:translate(8vmax,6vmax) scale(1.08)}}
@keyframes float2{to{transform:translate(-6vmax,8vmax) scale(.94)}}
@keyframes float3{to{transform:translate(7vmax,-6vmax) scale(1.06)}}

.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;min-height:100svh;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:30px;height:30px}
h1{margin:0;font:800 26px/1 var(--ui);letter-spacing:-.015em}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--spring)}
.icon-btn:active,.btn:active,.seg button:active{transform:scale(.94)}
.icon-btn:disabled{opacity:.4;cursor:default}
.icon-btn svg{width:20px;height:20px}
.meta{margin:0;padding:7px 15px;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);color:var(--ink-2);font:600 13px/1.2 var(--ui);letter-spacing:.02em}
.meta b{color:var(--ink);font-weight:750}
.seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6)}
.seg button{position:relative;z-index:1;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:650 14px var(--ui);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--spring),color .25s}
.seg button[aria-pressed="true"]{color:var(--sel-ink)}
.thumb{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--sel);box-shadow:0 4px 10px -6px #15172a80;pointer-events:none;transition:transform .55s var(--spring),width .55s var(--spring),height .3s ease}
.thumb.instant{transition:none}
.subwrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),opacity .3s,margin .5s cubic-bezier(.3,.7,.2,1)}
.subwrap > .sub{min-height:0;overflow:hidden;padding:4px 8px 10px;margin:-4px -8px -10px}
.subwrap.collapsed{grid-template-rows:0fr;opacity:0;margin-top:-12px;pointer-events:none}
.seg.small button{min-height:30px;padding:0 12px;font-size:13px}
.sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.sub[hidden]{display:none}

.hoop{--rim:clamp(8px,2.6%,14px);position:relative;width:min(100%,58svh,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 44%,transparent 64%,var(--rim-shade) 100%),var(--glass);backdrop-filter:blur(22px) saturate(1.6) brightness(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.05);box-shadow:0 0 0 .5px var(--rim-shade),0 26px 50px -30px #15172a80,0 6px 14px -8px #15172a40;animation:hoop-in 1.1s var(--spring) both}
/* Glass rim: a conic sheen cut to a ring, so light runs round the hoop like on the edge of a lens. */
.hoop::before{content:"";position:absolute;inset:0;z-index:1;padding:var(--rim);border-radius:50%;pointer-events:none;background:conic-gradient(from 200deg,var(--rim-hi),var(--rim-mid) 12%,var(--rim-lo) 28%,var(--rim-mid) 44%,var(--rim-hi) 50%,var(--rim-mid) 56%,var(--rim-lo) 72%,var(--rim-mid) 88%,var(--rim-hi));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* The board sits under the rim's lip: shadow beneath the upper edge, a thin catch light on the lower one. */
.hoop::after{content:"";position:absolute;inset:var(--rim);z-index:1;border-radius:50%;pointer-events:none;box-shadow:inset 0 4px 10px var(--rim-shade),inset 0 -1.5px 0 var(--rim-mid),0 0 0 .5px var(--rim-shade)}
.hoop canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;touch-action:none;cursor:crosshair}
@keyframes hoop-in{from{opacity:0;transform:scale(.92)}}

.hint{min-height:2.7em;max-width:36ch;margin:0;color:var(--ink-2);font:500 15px/1.35 var(--ui);text-align:center}
.hint.stuck{color:var(--coach);font-weight:650}
.hint.snap{color:var(--madder);font-weight:650}
.controls{display:flex;align-items:center;gap:12px}
.count{display:flex;align-items:center;gap:10px;min-width:96px;justify-content:center;padding:11px 16px;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);color:var(--ink);font:700 15px/1 var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.count span{color:var(--muted);font-weight:600}
.dots{display:inline-flex;gap:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--thread);transition:opacity .3s,transform .3s}
.dots i.gone{opacity:.22;transform:scale(.7)}

.result{width:100%;max-width:420px;padding:20px 22px 22px;border-radius:28px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);text-align:center;animation:rise .8s var(--spring) both}
.result h2{margin:0 0 6px;font:800 22px/1.15 var(--ui);letter-spacing:-.01em}
.result .stats{color:var(--muted);font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.result p{margin:10px 0 18px;color:var(--ink-2);font:500 15px/1.4 var(--ui)}
.row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border:0;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);color:var(--ink);font:650 15px var(--ui);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--spring)}
.btn.primary{background:var(--sel);color:var(--sel-ink)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}}
.note{margin-top:auto;color:var(--muted);font:500 12px var(--ui);text-align:center}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.aurora i,.hoop,.result{animation:none}.subwrap,.thumb,.seg button,.btn,.icon-btn{transition:none}}
.top-end{display:flex;gap:8px}
#game{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:6px}
.app > .hoop{flex:none}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:34ch;margin:auto 0;padding:28px 24px;border-radius:28px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);text-align:center}
.empty h2{margin:0;font:800 20px/1.2 var(--ui)}
.empty p{margin:0;color:var(--ink-2);font:500 15px/1.4 var(--ui)}
.result .streak{margin-top:6px;color:var(--ink-2);font:650 13px var(--ui)}
.sheet{width:min(440px,calc(100vw - 32px));max-height:min(80svh,640px);padding:20px;border:0;border-radius:28px;background:var(--bg);color:var(--ink);box-shadow:var(--glass-edge),0 30px 60px -30px #000a}
.sheet::backdrop{background:#0b0c1a66;backdrop-filter:blur(4px)}
.sheet h2{margin:0 0 4px;font:800 20px/1.2 var(--ui)}
.sheet p{margin:0 0 14px;color:var(--ink-2);font:500 14px/1.4 var(--ui)}
.days{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.days button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:8px 16px;border:0;border-radius:18px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);color:var(--ink);font:650 15px var(--ui);text-align:left;cursor:pointer}
.days button[aria-current="true"]{background:var(--sel);color:var(--sel-ink)}
.days small{color:inherit;opacity:.7;font:600 12px var(--ui)}
.days .tick{color:var(--coach);font-weight:800}
.sheet .row{margin-top:16px}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:20;translate:-50% 0;padding:10px 18px;border-radius:999px;background:var(--sel);color:var(--sel-ink);font:650 14px var(--ui);box-shadow:0 10px 24px -12px #000a}
.offline{color:var(--madder)}
#account-btn{position:relative}
#account-btn[data-signed-in]::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--coach);box-shadow:0 0 0 1.5px var(--bg)}
.sheet.account{overflow-y:auto}
.nudge{margin:0 0 14px;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--coach) 16%,transparent);color:var(--ink);font:600 14px/1.38 var(--ui);text-align:center;text-wrap:balance}
.nudge p{margin:0;color:inherit}
.account .acct-lead{margin:10px 0 18px;font:500 14.5px/1.5 var(--ui);color:var(--ink-2);text-align:center}
.acct-lead b{color:var(--ink);word-break:break-all}
.acct-form{display:grid;gap:8px;margin:0 0 12px}
.acct-label{font:700 10.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.acct-input{width:100%;min-height:52px;padding:0 18px;border:0;border-radius:16px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow);color:var(--ink);font:600 17px var(--ui)}
.acct-input:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.acct-code{font:800 28px/1 var(--ui);letter-spacing:.4em;text-indent:.4em;text-align:center;font-variant-numeric:tabular-nums}
.account .acct-error{margin:0;font:650 13.5px/1.35 var(--ui);color:color-mix(in srgb,var(--madder) 72%,var(--ink));text-align:center}
.acct-error:empty{display:none}
.acct-form .btn{margin-top:6px}
.account .btn.primary,.account .btn.danger,.account .acct-back{width:100%}
.btn.danger{background:var(--madder);color:#fff}
.account .acct-note{margin:0 0 6px;font:500 12.5px/1.4 var(--ui);color:var(--muted);text-align:center}
.acct-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0 0 14px}
.linkbtn{min-height:44px;padding:8px;border:0;background:none;color:var(--muted);font:600 12.5px var(--ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:disabled{text-decoration:none;cursor:default;opacity:.7}
.acct-who{display:grid;gap:4px;justify-items:center;margin:8px 0 18px;text-align:center}
.acct-who b{font:750 17px/1.25 var(--ui);word-break:break-all}
.acct-who span{font:500 12.5px var(--ui);color:var(--muted)}
.acct-who span:empty{display:none}
.acct-h{margin:0 0 4px;font:700 10.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.acct-devices{margin:0 0 14px;padding:0;list-style:none}
.acct-devices li{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 2px;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.acct-devices li span{display:grid;flex:1;gap:3px}
.acct-devices b{font:650 14.5px/1.2 var(--ui)}
.acct-devices small{font:500 12.5px/1.2 var(--ui);color:var(--muted)}
.chip{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2);font:650 12.5px var(--ui);cursor:pointer}
.acct-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.acct-actions .btn{flex:1 1 140px}
.acct-danger{display:block;margin:8px auto 0;color:color-mix(in srgb,var(--madder) 72%,var(--ink))}
.acct-warn{margin:14px 0 16px;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--madder) 12%,transparent);text-align:center}
.acct-warn p{margin:0;font:500 14.5px/1.5 var(--ui);color:var(--ink-2)}
.acct-warn p + p{margin-top:6px}
.acct-warn b{color:var(--ink);word-break:break-all}
.account .acct-back{margin-top:10px}
.btn:disabled{opacity:.5;cursor:default}
.splash{position:fixed;inset:0;z-index:60;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.splash-stage{display:grid;justify-items:center;gap:24px}
.splash-icon{position:relative;width:96px;height:96px;color:var(--ink)}
.splash-icon .sp-nails circle{transform-box:fill-box;transform-origin:center}
.splash-icon svg{display:block;width:100%;height:100%;overflow:visible}
.splash-icon .sp-thread,.splash-icon .sp-ring{stroke-dasharray:1;stroke-dashoffset:1}
.splash-word{font:800 46px/1 var(--ui);letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.splash-word span{display:inline-block}
.splash .glint{position:fixed;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:2px;pointer-events:none}
body.splashing .app{opacity:0}
body.splashing .hoop{animation:none}
.app{transition:opacity .6s ease}
#hint-btn{position:relative}
#hint-btn .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coach);color:#fff;font:750 11px/18px var(--ui);text-align:center;box-shadow:0 0 0 2px var(--bg)}
#hint-btn .badge:empty{display:none}
.hint-ask{width:100%;max-width:420px;margin:0}
.hint-ask .ask-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}
.hint-ask .btn{min-height:44px}
.hint-never{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--ink-2);font:500 13px var(--ui);cursor:pointer}
.hints-stock{font-weight:700!important;color:var(--ink)!important}
.nudge .ask-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}
.nudge .ask-actions .btn{min-height:44px}
#giftBubble{width:100%;max-width:420px;margin:0}
.acct-gift{display:flex;gap:8px;margin:0 0 8px}
.acct-gift .acct-input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em}
.acct-gift .acct-input::placeholder{text-transform:none;letter-spacing:0}
.acct-gift .btn{flex:none}
.badges{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.badges li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:18px;background:var(--glass);box-shadow:var(--glass-edge),var(--glass-shadow)}
.badges img{flex:none;width:56px;height:56px}
.badges div{display:grid;gap:3px}
.badges b{font:750 15px/1.2 var(--ui)}
.badges span{color:var(--ink-2);font:500 13px/1.35 var(--ui)}
.badges small{color:var(--muted);font:600 11.5px var(--ui)}
.badges .locked img{filter:grayscale(1);opacity:.35}
.badges .locked b{color:var(--ink-2)}
#achievements{overflow-y:auto}
.sheet h2:focus{outline:none}
.acct-more{display:flex;justify-content:center;gap:4px 18px;margin:-8px 0 10px}
.look-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.look-row .chip[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink)}
.look-row .chip:disabled{opacity:.45;cursor:default}
.hoop[data-board="walnut"]{background:radial-gradient(circle at 50% 44%,transparent 64%,#0000004d 100%),repeating-radial-gradient(ellipse at 30% 120%,#6b4426 0 3px,#5a3820 3px 7px,#7a5030 7px 9px),#5e3b22}
.hoop[data-board="marble"]{background:radial-gradient(circle at 50% 44%,transparent 64%,#00000026 100%),linear-gradient(125deg,transparent 42%,#b9b3ab66 44%,transparent 47%),linear-gradient(60deg,transparent 60%,#a9a29966 61.5%,transparent 63%),radial-gradient(120% 90% at 30% 20%,#fbf9f5,#e4dfd7)}
.hoop[data-board="glass"]{background:radial-gradient(circle at 50% 44%,transparent 64%,#000000a0 100%),radial-gradient(120% 80% at 25% 10%,#ffffff1a,#ffffff00 50%),#17181d}
.archive-h{margin:18px 0 8px}
.days button:disabled{opacity:.5;cursor:default}
#archive,#collection{overflow-y:auto}