:root{
  --bg1:#0f0a1f;--bg2:#1c1240;--card:rgba(255,255,255,.065);--card-b:rgba(255,255,255,.12);
  --text:#f6f2ff;--muted:#b7aed6;--accent:#8b5cf6;--accent2:#ff4fa3;--accent3:#22d3ee;--gold:#ffd166;
  --good:#34d399;--warn:#fbbf24;--track:rgba(255,255,255,.12);--sheet:#1a1238;--btn-t:#fff;
  --orb1:rgba(139,92,246,.45);--orb2:rgba(255,79,163,.30);
  --r:22px;--font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
:root[data-theme=candy]{
  --bg1:#fff3f9;--bg2:#efe3ff;--card:rgba(255,255,255,.78);--card-b:rgba(120,60,160,.14);
  --text:#3b1d4f;--muted:#7c5a96;--accent:#c026d3;--accent2:#fb5f8a;--accent3:#2fa8ee;--gold:#f59e0b;
  --track:rgba(120,60,160,.14);--sheet:#fff7fc;--orb1:rgba(217,70,239,.25);--orb2:rgba(251,113,133,.25);
}
:root[data-theme=matcha]{
  --bg1:#07130e;--bg2:#10301f;--card:rgba(255,255,255,.06);--card-b:rgba(255,255,255,.12);
  --text:#eafff3;--muted:#9bc7b0;--accent:#34d399;--accent2:#fbbf24;--accent3:#60a5fa;--gold:#fde68a;
  --sheet:#0e2418;--orb1:rgba(52,211,153,.35);--orb2:rgba(251,191,36,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;}
body{font-family:var(--font);color:var(--text);background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed;background-color:var(--bg1);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;line-height:1.35;overflow-x:hidden}
#bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#bg-orbs:before,#bg-orbs:after{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(70px);animation:float 18s ease-in-out infinite alternate}
#bg-orbs:before{background:radial-gradient(circle,var(--orb1),transparent 65%);top:-25vmax;left:-20vmax}
#bg-orbs:after{background:radial-gradient(circle,var(--orb2),transparent 65%);bottom:-30vmax;right:-25vmax;animation-delay:-9s}
@keyframes float{to{transform:translate(8vmax,6vmax) scale(1.1)}}
#app{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(150px + env(safe-area-inset-bottom))}
button,input{font-family:inherit;color:inherit;font-size:16px}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.45;cursor:default}

.top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.top h1{margin:2px 0 0;font-size:26px;letter-spacing:-.02em}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chip{padding:8px 13px;border-radius:99px;background:var(--card);border:1px solid var(--card-b);font-weight:700;font-size:14px}
.chip.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.chip.star{color:var(--gold)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

.card{background:var(--card);border:1px solid var(--card-b);border-radius:var(--r);padding:16px;margin-bottom:12px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.sec{font-size:15px;margin:22px 4px 10px;display:flex;justify-content:space-between;align-items:baseline;letter-spacing:.01em}
.sec em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
.muted{color:var(--muted);font-size:14px}.note{color:var(--muted);font-size:13px;margin:10px 0 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 18px;border-radius:16px;font-weight:800;color:var(--btn-t);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--card);border:1px solid var(--card-b);box-shadow:none;color:var(--text)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:12px}
.link{color:var(--muted);text-decoration:underline;font-size:13px;padding:6px}.link.danger{color:#ff7b8a;display:block;margin:14px auto 0}

/* hero */
.hero{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent2) 22%,transparent));}
.ring{position:relative;flex:none}.ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-in b{font-size:26px}.ring-in small{font-size:10px;color:var(--muted);font-weight:700;margin-top:2px}
.hero-r{flex:1;min-width:0}.rank{font-weight:900;font-size:18px;margin-bottom:6px}
.xpbar{height:10px;border-radius:99px;background:var(--track);overflow:hidden}
.xpbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent3),var(--accent2));transition:width .6s}
.xpnum{font-size:12px;color:var(--muted);margin:5px 0 8px}
.stats{display:flex;gap:14px;font-weight:800}
.banner{background:var(--card);border:1px dashed var(--card-b);border-radius:16px;padding:11px 14px;font-size:13px;margin-bottom:6px;color:var(--muted)}.banner b{color:var(--text)}

/* quests */
.quest.has{border-color:color-mix(in srgb,var(--good) 55%,transparent)}
.quest.glow{animation:pulse 2.2s infinite;border-color:var(--accent2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent2) 50%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.q-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.q-ico{font-size:28px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--track)}
.q-t{flex:1;display:flex;flex-direction:column}.q-t b{font-size:17px}.q-t span{font-size:12.5px;color:var(--muted)}
.q-med{font-size:28px}
.tiers{display:flex;flex-direction:column;gap:7px}
.tier{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:14px;background:var(--track);border:1px solid transparent;transition:all .15s}
.tier .tt{flex:1;font-size:14px}.tier .xp{font-size:12px;font-weight:800;color:var(--muted)}.medal{font-size:20px;filter:grayscale(1) opacity(.55);transition:filter .2s}
.tier:not(:disabled):active{transform:scale(.98)}
.tier.done{background:linear-gradient(135deg,color-mix(in srgb,var(--good) 25%,transparent),color-mix(in srgb,var(--accent3) 18%,transparent));border-color:color-mix(in srgb,var(--good) 50%,transparent)}
.tier.done .medal{filter:none;animation:pop .4s}.tier.done .xp{color:var(--good)}
@keyframes pop{50%{transform:scale(1.4) rotate(-8deg)}}
.q-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.q-foot:empty{display:none}

.pack{width:100%;display:flex;gap:14px;align-items:center;text-align:left;padding:16px;border-radius:var(--r);margin-bottom:12px;background:var(--card);border:1px dashed var(--card-b)}
.pack.ready{background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;animation:wiggle 2.5s infinite;box-shadow:0 10px 30px color-mix(in srgb,var(--accent2) 45%,transparent);color:#fff}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-1.5deg)}94%{transform:rotate(1.5deg)}}
.pk-ico{font-size:38px}.pk-t{display:flex;flex-direction:column}.pk-t small{opacity:.8;font-size:12px}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 12px}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;border-radius:18px;background:var(--card);border:1px solid var(--card-b)}
.tool span{font-size:26px}.tool b{font-size:13px}.tool small{font-size:11px;color:var(--muted)}
.tip p{margin:6px 0 0;font-size:15px}.next{font-size:14px}

/* fuel */
.zone-top{display:flex;justify-content:space-between;align-items:center}.kbig{font-size:38px;font-weight:900;line-height:1.1}.kbig small{font-size:14px;color:var(--muted);font-weight:700}
.zbar{position:relative;height:14px;border-radius:99px;background:var(--track);margin-top:16px}
.zg{position:absolute;top:0;bottom:0;border-radius:99px;background:color-mix(in srgb,var(--good) 40%,transparent);border:1px solid var(--good)}
.zm{position:absolute;top:-4px;width:6px;height:22px;border-radius:3px;background:#fff;transform:translateX(-3px);box-shadow:0 0 10px #fff}
.zm.green{background:var(--good)}.zm.yellow{background:var(--warn)}.zm.amber,.zm.warn{background:#fb923c}
.zlab{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.zt{margin:10px 0 0;font-size:14px;font-weight:600}.zt.green{color:var(--good)}.zt.yellow{color:var(--warn)}.zt.amber,.zt.warn{color:#fb923c}
.qfs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qf{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--card-b)}
.qf span{grid-row:1/3;font-size:24px;align-self:center}.qf b{font-size:12.5px;line-height:1.2}.qf small{font-size:11px;color:var(--muted)}
.qf:active{transform:scale(.96);background:var(--track)}
.frm{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
input[type=text],input[type=number],input[type=time],input:not([type]){background:var(--track);border:1px solid var(--card-b);border-radius:14px;padding:12px;min-width:0;color:var(--text);outline:none}
input:focus{border-color:var(--accent)}
.frm input{flex:1 1 90px}.frm input:first-child{flex:2 1 140px}
.fl{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--card-b)}.fl:last-child{border:0}.fl span{flex:1;font-size:14px}.fl small{color:var(--muted)}
.x{color:var(--muted);padding:4px 8px}
.pm{padding:9px 0;border-bottom:1px solid var(--card-b);display:flex;flex-direction:column}.pm:last-child{border:0}.pm b{font-size:14px}.pm span{font-size:13px;color:var(--muted)}

/* move */
.steps-top{display:flex;gap:16px;align-items:center}
.ladder{display:flex;gap:8px;margin-top:6px}.lad{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:12px;background:var(--track);font-size:12px;filter:grayscale(1);opacity:.7}.lad.on{filter:none;opacity:1;background:color-mix(in srgb,var(--good) 25%,transparent)}
.ex{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--card-b)}.ex:last-of-type{border:0}
.ck{width:34px;height:34px;border-radius:11px;border:2px solid var(--card-b);flex:none;font-weight:900;color:#fff;display:grid;place-items:center}
.ex.done .ck{background:var(--good);border-color:var(--good)}
.ex-b{flex:1;display:flex;flex-direction:column}.ex-b b{font-size:15px}.ex-b span{font-size:12.5px;color:var(--muted)}
.ex.done .ex-b b{text-decoration:line-through;opacity:.7}
details summary{font-size:12.5px;color:var(--accent3);cursor:pointer;margin-top:4px;list-style:none}details summary::-webkit-details-marker{display:none}
details p{font-size:13px;margin:6px 0 0;color:var(--muted)}
.kg{display:flex;flex-direction:column;width:70px}.kg input{width:100%;text-align:center;padding:9px 6px}.kg small{font-size:10.5px;text-align:center;color:var(--muted);margin-top:2px}
.bul{margin:8px 0 0;padding-left:18px;font-size:14px}.bul li{margin:5px 0}
.warnbox{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.warnbox b{color:var(--warn)}
.pb summary{font-weight:800;font-size:15px;color:var(--text);margin:0}.pb div{padding-top:6px}.pb{padding:14px 16px}

/* album */
.starbank{font-size:30px;font-weight:900;color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.set-h{display:flex;justify-content:space-between;font-size:15px}.set-h span{color:var(--muted);font-size:13px}.set{border-top:3px solid var(--sc)}
.stk{position:relative;aspect-ratio:1/1.05;border-radius:16px;background:var(--track);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;opacity:.55}
.stk .em{font-size:34px;filter:grayscale(1) brightness(.7)}.stk small{font-size:10.5px;color:var(--muted);line-height:1.1;margin-top:4px}
.stk.own{opacity:1;background:linear-gradient(160deg,color-mix(in srgb,var(--sc) 35%,transparent),var(--track));border:1px solid color-mix(in srgb,var(--sc) 60%,transparent)}
.stk.own .em{filter:none}.stk.own.r-r{box-shadow:0 0 14px color-mix(in srgb,var(--accent3) 55%,transparent)}
.stk.own.r-l{box-shadow:0 0 18px var(--gold);border-color:var(--gold)}
.dup{position:absolute;top:4px;right:6px;font-size:11px;font-style:normal;font-weight:800;color:var(--gold)}
.shop{display:flex;flex-direction:column;gap:10px}.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme{padding:12px 6px;border-radius:14px;background:var(--track);display:flex;flex-direction:column;border:2px solid transparent}.theme.on{border-color:var(--accent2)}.theme b{font-size:12.5px}.theme small{font-size:11px;color:var(--muted)}

/* you */
.wk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;text-align:center}.wk b{font-size:24px;display:block}.wk small{font-size:11px;color:var(--muted)}
.chart{width:100%;margin-top:12px}.ct{fill:var(--text);font-size:12px;font-weight:800}
.notif-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.rem{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--card-b)}.rem-b{flex:1;display:flex;flex-direction:column;min-width:0}.rem-b b{font-size:14px}.rem-b small{font-size:11.5px;color:var(--muted)}
.rem input[type=time]{padding:8px;width:98px;flex:none}
.sw{position:relative;width:46px;height:28px;flex:none}.sw input{opacity:0;position:absolute;inset:0;z-index:2;margin:0}.sw i{position:absolute;inset:0;border-radius:99px;background:var(--track);transition:.2s}.sw i:before{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}.sw input:checked+i{background:var(--good)}.sw input:checked+i:before{transform:translateX(18px)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.row3 label{font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.row3 input{width:100%}
.set-c .frm{margin-bottom:6px}

/* nav */
#tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(540px,calc(100% - 24px));z-index:20;display:flex;gap:2px;padding:6px;border-radius:26px;background:color-mix(in srgb,var(--sheet) 82%,transparent);border:1px solid var(--card-b);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0;border-radius:20px;color:var(--muted)}.tb span{font-size:20px}.tb b{font-size:10.5px}
.tb.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
#fab{position:fixed;right:max(16px,calc(50% - 264px));bottom:calc(88px + env(safe-area-inset-bottom));z-index:19;padding:12px 16px;border-radius:99px;font-weight:900;font-size:14px;color:#fff;background:linear-gradient(135deg,#ff4fa3,#ff8a4c);box-shadow:0 10px 26px rgba(255,79,163,.5)}
#fab:active{transform:scale(.94)}

/* modal */
#modal-root{position:fixed;inset:0;z-index:50;pointer-events:none}#modal-root.open{pointer-events:auto}
.backdrop{position:absolute;inset:0;background:rgba(5,2,15,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}.open .backdrop{opacity:1}
.sheet{position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);width:min(560px,100%);max-height:92vh;overflow-y:auto;background:var(--sheet);border-radius:28px 28px 0 0;border:1px solid var(--card-b);padding:22px 18px calc(28px + env(safe-area-inset-bottom));transition:transform .32s cubic-bezier(.2,.9,.2,1)}
.open .sheet{transform:translate(-50%,0)}
.sheet-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--track);z-index:2}
.flow h2{margin:4px 0 10px;font-size:23px}.flow h3{margin:18px 0 8px;font-size:15px}.flow .btn{width:100%;margin-top:12px}.flow input{width:100%;margin-top:12px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.opt{display:flex;align-items:center;gap:8px;padding:13px;border-radius:16px;background:var(--track);text-align:left;font-weight:700;font-size:14px;border:2px solid transparent;width:100%;margin-top:0}
.chk .opt,.flow>.opt{margin-top:8px}.opt.on{border-color:var(--good);background:color-mix(in srgb,var(--good) 20%,transparent)}.opt span{font-size:22px}
.breath{display:flex;flex-direction:column;align-items:center;margin:18px 0}.breath i{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,var(--accent3),var(--accent));animation:br 10s ease-in-out infinite;opacity:.85}.breath b{margin-top:14px}
@keyframes br{0%,100%{transform:scale(.6)}40%{transform:scale(1.1)}}
.bigemoji{font-size:64px;text-align:center}.flow.done{text-align:center}.gainrow{font-weight:900;color:var(--gold);margin:8px 0}
.timer{text-align:center;margin:14px 0}#doorTime{font-size:56px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.swap{background:var(--track);border-radius:14px;padding:12px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.rule{background:var(--track);border-radius:14px;padding:12px;margin:8px 0;display:flex;flex-direction:column;text-align:left}.rule span{font-size:13px;color:var(--muted)}
.welcome{text-align:center}
.packm{text-align:center;padding:10px 0}.pcard{width:210px;height:270px;margin:16px auto;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.pcard.back{background:linear-gradient(145deg,var(--accent),var(--accent2));color:#fff;font-size:20px;box-shadow:0 16px 40px color-mix(in srgb,var(--accent2) 50%,transparent);animation:wiggle 2s infinite}.pcard.back span{font-size:70px}
.pcard.front{background:linear-gradient(160deg,color-mix(in srgb,var(--sc) 45%,var(--sheet)),var(--sheet));border:2px solid var(--sc);animation:flip .6s}.pcard .big{font-size:96px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}.pcard.r-r{box-shadow:0 0 30px var(--accent3)}.pcard.r-l{box-shadow:0 0 44px var(--gold);border-color:var(--gold)}
.pcard.front b{font-size:20px}.pcard.front small{color:var(--muted)}
@keyframes flip{from{transform:rotateY(90deg) scale(.7);opacity:0}to{transform:none;opacity:1}}
.gain{font-weight:900;color:var(--gold);font-size:18px;margin:4px 0}

/* sudoku */
.board{display:grid;grid-template-columns:repeat(9,1fr);border:2px solid var(--text);border-radius:12px;overflow:hidden;background:var(--card-b);gap:1px;margin:10px 0;aspect-ratio:1}
.cell{background:var(--sheet);display:grid;place-items:center;font-size:clamp(16px,5.2vw,24px);font-weight:700;color:var(--accent3);padding:0;min-width:0}
.cell.given{color:var(--text);font-weight:900}.cell.peer{background:color-mix(in srgb,var(--accent) 14%,var(--sheet))}.cell.same{background:color-mix(in srgb,var(--accent3) 28%,var(--sheet))}
.cell.sel{background:color-mix(in srgb,var(--accent2) 40%,var(--sheet))}.cell.wrong{color:#ff5470;background:rgba(255,84,112,.18)}
.cell.br{border-right:2px solid var(--text)}.cell.bb{border-bottom:2px solid var(--text)}
.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}.np{padding:12px 0;border-radius:12px;background:var(--track);font-size:19px;font-weight:800}.np:active{background:var(--accent)}
.sdk-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.solved{text-align:center;font-weight:900;color:var(--good);margin-bottom:4px}.sdk-empty{text-align:center}.sdk-empty .btn{width:auto;margin:6px}

/* toast / confetti */
#toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%,-140%);z-index:80;max-width:min(92vw,440px);padding:12px 16px;border-radius:18px;background:var(--sheet);border:1px solid var(--card-b);box-shadow:0 14px 40px rgba(0,0,0,.4);font-size:14px;transition:transform .35s cubic-bezier(.2,.9,.2,1);text-align:center}
#toast.show{transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}