:root{
  --bg:#DDF0FF; --bg2:#F4FAFF; --panel:#FFFFFF; --ink:#1B2333; --soft:#5A6478; --line:#C9D6EA; --faint:#C9D1E2;
  --s:#1E6FD9; --v:#D93A2B; --do:#6B3FA0; --io:#C2185B; --oc:#7E57C2; --adj:#2E9E4F; --pp:#0E8C8C;
  --gold:#F2B705; --goldink:#3A2A00; --trail:#B9CBE3; --good:#2E9E4F; --goodbg:#E3F6E9; --bad:#C62828; --badbg:#FDECEC;
  --btn:#E9EEF8; --btnhover:#DCE3F2; --accent:#2F55D4; --accentink:#FFFFFF; --mark:#FFE58A;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1A2E; --bg2:#16233B; --panel:#1E2A44; --ink:#EEF2FA; --soft:#A9B4CB; --line:#33436A; --faint:#3A4A70;
    --s:#6AA8FF; --v:#FF7A6B; --do:#B58CF0; --io:#FF6FA8; --oc:#C7A6FF; --adj:#5ED38A; --pp:#4FD1D1;
    --gold:#FFC93C; --goldink:#2B2000; --trail:#3A4C74; --good:#5ED38A; --goodbg:#1D3829; --bad:#FF8080; --badbg:#3E2228;
    --btn:#28365A; --btnhover:#32426B; --accent:#7C97FF; --accentink:#0E1424; --mark:#6B5A12;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0F1A2E; --bg2:#16233B; --panel:#1E2A44; --ink:#EEF2FA; --soft:#A9B4CB; --line:#33436A; --faint:#3A4A70;
    --s:#6AA8FF; --v:#FF7A6B; --do:#B58CF0; --io:#FF6FA8; --oc:#C7A6FF; --adj:#5ED38A; --pp:#4FD1D1;
    --gold:#FFC93C; --goldink:#2B2000; --trail:#3A4C74; --good:#5ED38A; --goodbg:#1D3829; --bad:#FF8080; --badbg:#3E2228;
    --btn:#28365A; --btnhover:#32426B; --accent:#7C97FF; --accentink:#0E1424; --mark:#6B5A12;
    color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg2);min-height:100%}
*{box-sizing:border-box}
body{margin:0;min-height:100%;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 70%);background-attachment:fixed;color:var(--ink);font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:19px;line-height:1.45;overflow-x:hidden}
.wrap{max-width:860px;margin:0 auto;padding:14px 14px 48px}
h1,h2,h3,.fred{font-family:"Fredoka","Nunito",system-ui,sans-serif;font-weight:600;margin:0}
.hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-family:"Fredoka",sans-serif;font-size:20px;background:var(--panel);border:2px solid var(--line);border-radius:99px;padding:4px 14px;display:inline-flex;gap:6px;align-items:center}
.pill.streak{display:none}
.pill.streak.on{display:inline-flex}
.spacer{flex:1}
.iconbtn{font:inherit;font-size:20px;background:var(--panel);border:2px solid var(--line);border-radius:99px;width:42px;height:42px;cursor:pointer;color:var(--ink)}
.trailbox{position:relative;margin:16px 0 14px;padding:62px 6px 4px}
.trail{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;align-items:center;position:relative}
.trail::before{content:"";position:absolute;left:2%;right:2%;top:50%;height:6px;margin-top:-3px;border-radius:9px;background:var(--trail)}
.dot{position:relative;justify-self:center;width:clamp(14px,3.4vw,26px);height:clamp(14px,3.4vw,26px);border-radius:50%;background:var(--panel);border:3px solid var(--trail);display:grid;place-items:center;font-size:11px}
.dot.gold{background:var(--gold);border-color:var(--gold)}
.dot.miss{background:var(--faint);border-color:var(--faint)}
.dot.chest{border-radius:6px}
.hero{position:absolute;top:4px;font-size:clamp(22px,4.8vw,32px);line-height:1;transform:translateX(-50%);transition:left .55s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.flag{position:absolute;right:0;top:-2px;font-size:clamp(20px,4.4vw,28px)}
.card{background:var(--panel);border:2px solid var(--line);border-radius:24px;padding:18px 18px 20px;box-shadow:0 8px 0 var(--line)}
.qno{font-family:"Fredoka",sans-serif;color:var(--soft);font-size:16px}
.qt{font-family:"Fredoka",sans-serif;font-size:clamp(22px,4.6vw,30px);line-height:1.15;margin:4px 0 10px}
.big{font-size:clamp(22px,4.6vw,30px);font-weight:800;line-height:1.35;margin:6px 0}
.sentence{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.tok{font:inherit;font-size:clamp(22px,4.6vw,30px);font-weight:800;color:var(--ink);background:var(--btn);border:3px solid transparent;border-radius:12px;padding:2px 10px;cursor:pointer}
.tok:hover{background:var(--btnhover)}
.tok.right{background:var(--good);color:#fff}
.tok.no{background:var(--badbg);border-color:var(--bad)}
mark{background:var(--mark);color:inherit;border-radius:6px;padding:0 4px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.opt{font:inherit;font-weight:800;font-size:20px;color:var(--ink);background:var(--btn);border:3px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;text-align:center}
.opt:hover{background:var(--btnhover)}
.opt svg{width:100%;height:auto;display:block}
.opt .cap{font-size:16px;margin-top:4px}
.opt.right{border-color:var(--good);background:var(--goodbg)}
.opt.no{border-color:var(--bad);background:var(--badbg)}
.opt.tree{background:var(--bg2)}
.opt .lab{font-family:"Fredoka",sans-serif;font-size:22px}
.btn{font:inherit;font-weight:800;font-size:18px;border-radius:14px;border:2px solid var(--line);background:var(--btn);color:var(--ink);padding:10px 18px;cursor:pointer}
.btn.main{background:var(--accent);border-color:var(--accent);color:var(--accentink);font-size:21px;padding:12px 28px;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 60%,black)}
.btn.main:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 60%,black)}
.btn:focus-visible,.tok:focus-visible,.opt:focus-visible,.iconbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fb{margin-top:14px;border-radius:16px;padding:12px 16px;font-size:18px;display:none}
.fb.show{display:block}
.fb.good{background:var(--goodbg);border:2px solid var(--good)}
.fb.bad{background:var(--badbg);border:2px solid var(--bad)}
.fb .head{font-family:"Fredoka",sans-serif;font-size:22px;display:block}
.tree{margin-top:12px;border-radius:16px;background:var(--bg2);padding:8px;overflow-x:auto}
.tree svg{display:block;width:100%;min-width:500px;height:auto}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.title{text-align:center;padding:26px 10px}
.title h1{font-size:clamp(38px,8vw,64px);line-height:1}
.title .sub{color:var(--soft);font-size:20px;margin:10px auto 0;max-width:34ch}
.bigemoji{font-size:clamp(70px,16vw,120px);line-height:1;display:inline-block}
.stars{font-size:clamp(44px,10vw,64px);letter-spacing:8px;min-height:1.2em}
.stars span{display:inline-block}
.skills{list-style:none;padding:0;margin:14px 0 0;text-align:left}
.skills li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.skills li b{margin-left:auto}
.rev{border-top:1px solid var(--line);padding:10px 0;font-size:16px;text-align:left}
.confetti{position:fixed;width:10px;height:14px;border-radius:2px;pointer-events:none;z-index:50;top:0;left:0}
.flyer{position:fixed;z-index:60;font-size:30px;pointer-events:none;left:0;top:0}
.closet{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:16px;margin-top:14px;align-items:start}
@media (max-width:640px){.closet{grid-template-columns:1fr}}
.me{text-align:center;position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px)}
.me svg{display:block;margin:0 auto;max-width:100%;height:auto}
.soft{color:var(--soft);font-size:15px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.tab{font:inherit;font-weight:800;font-size:16px;border-radius:99px;border:2px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 14px;cursor:pointer}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--accentink)}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.item{font:inherit;background:var(--panel);color:var(--ink);border:3px solid var(--line);border-radius:16px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.item:hover{background:var(--btnhover)}
.world.haunted{background:radial-gradient(circle at 85% 8%,#FFF3B033 0 40px,transparent 41px),linear-gradient(180deg,#2B1B47,#150C28);border-color:#E8742A;color:#F4EEFF}
.world.haunted .whead p{color:#D9CCF2}
.world.haunted .deco span{opacity:.75}
.world.haunted .nlabel{color:var(--ink)}
body.scened{background:transparent}
#scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
#scene .sky{position:absolute;inset:0}
#scene .ground{position:absolute;left:0;bottom:0;width:100%;height:30vh}
#scene .peaks{position:absolute;left:0;bottom:18vh;width:100%;height:34vh}
#scene .sea{position:absolute;left:0;right:0;bottom:16vh;height:10vh;opacity:.85}
#scene .em{position:absolute;line-height:1;opacity:.9}
#scene .sun{position:absolute;right:6%;top:5%;font-size:70px;opacity:.85}
#scene .star{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:#fff;opacity:.85}
#scene .aurora{position:absolute;left:-10%;right:-10%;height:30vh;border-radius:50%;opacity:.45}
#scene .aurora.a1{top:8vh;background:linear-gradient(90deg,transparent,#3CF0A0,#3CC4F0,transparent);transform:rotate(-6deg)}
#scene .aurora.a2{top:20vh;background:linear-gradient(90deg,transparent,#B46CFF,#3CF0A0,transparent);transform:rotate(5deg);opacity:.3}
#scene .rbow{position:absolute;left:5%;width:90%;bottom:22vh;height:46vh}
#scene .city{position:absolute;left:0;bottom:0;width:100%;height:42vh}
#scene .rise{position:absolute;bottom:-6vh;font-size:22px;opacity:.7;animation:rise linear infinite;will-change:transform}
#scene .rise.ember{width:6px;height:6px;border-radius:50%;background:#FF8A3C;box-shadow:0 0 8px #FF5A1F}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-115vh)}}
@media (prefers-reduced-motion: reduce){#scene .rise{animation:none}}
#scene .moon{position:absolute;right:8%;top:6%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFFBE3,#F3DC8C);box-shadow:0 0 40px 10px rgba(255,243,176,.45)}
#scene .fog{position:absolute;left:0;right:0;bottom:0;height:35vh;background:linear-gradient(transparent,rgba(180,160,220,.18))}
#scene .cloud{position:absolute;left:0;opacity:.85;animation:drift linear infinite}
#scene .cloud.smoke{font-size:70px;opacity:.5;filter:grayscale(1) brightness(.8)}
#scene .bat{position:absolute;left:0;font-size:34px;animation:fly linear infinite}
#scene .flake{position:absolute;top:0;font-size:20px;opacity:.7;animation:fall linear infinite}
@keyframes drift{from{transform:translateX(-25vw)}to{transform:translateX(115vw)}}
@keyframes fly{0%{transform:translate(-10vw,0)}25%{transform:translate(20vw,-24px)}50%{transform:translate(50vw,12px)}75%{transform:translate(80vw,-18px)}100%{transform:translate(115vw,0)}}
@keyframes fall{from{transform:translateY(-8vh) rotate(0)}to{transform:translateY(110vh) rotate(360deg)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #scene.day::after{content:"";position:absolute;inset:0;background:rgba(8,12,26,.55)}}
:root[data-theme="dark"] #scene.day::after{content:"";position:absolute;inset:0;background:rgba(8,12,26,.55)}
@media (prefers-reduced-motion: reduce){#scene .cloud,#scene .bat,#scene .flake{animation:none}}
.bhearts{font-size:20px;letter-spacing:1px;margin-top:3px}
.youlbl{font-family:"Fredoka",sans-serif;font-size:15px;color:var(--soft)}
.revive{margin-top:10px;padding:10px 14px;border-radius:14px;background:#3A0D16;color:#FFD7DE;border:2px solid #E53935}
.redflash{position:fixed;inset:0;background:#B71C1C;z-index:55;pointer-events:none;opacity:0}
.ash{position:fixed;left:0;top:0;width:6px;height:6px;border-radius:2px;z-index:60;pointer-events:none}
.ashpile{display:inline-block;width:64px;height:28px;margin-top:24px;background:radial-gradient(ellipse at 50% 100%,#A8A8A8 0 55%,#7D7D7D 56% 68%,transparent 69%)}
:root{--adv:#E07B12}
.chapnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 4px;padding:10px;background:var(--panel);border:2px solid var(--line);border-radius:20px;position:relative;z-index:3}
.chbtn{font-size:18px;padding:12px 18px;border-radius:16px;background:var(--accent);border-color:var(--accent);color:var(--accentink)}
.chbtn:disabled{opacity:.35;cursor:default}
.chbtn.lockedch{background:var(--btn);border-color:var(--line);color:var(--soft);border-style:dashed}
.chlabel{font-family:"Fredoka",sans-serif;font-size:19px;text-align:center}
.badge.hwb{background:linear-gradient(180deg,color-mix(in srgb,#7E3FB0 14%,var(--panel)),color-mix(in srgb,#F57C00 10%,var(--bg2)))}
.badge.hwb.locked .bem{background:radial-gradient(circle at 35% 30%,#E9DDF7,#BFA6DD)}
.home{background:color-mix(in srgb,var(--panel) 74%,transparent);border-radius:30px;padding:16px 12px 22px;box-shadow:var(--shadow)}
.mapintro{background:color-mix(in srgb,var(--panel) 74%,transparent);border-radius:24px;padding:12px;box-shadow:var(--shadow)}
.maptop{background:color-mix(in srgb,var(--panel) 82%,transparent)!important;border-radius:0 0 20px 20px;padding:8px 10px!important}
.multpill{background:linear-gradient(180deg,#FFF1B8,#FFD25A)!important;color:#5A3D00;box-shadow:inset 0 1px 0 #fff,0 3px 0 #C99400!important}
.item .mlt{font-size:12px;font-weight:800;color:#7A5600;background:#FFE58A;border-radius:99px;padding:1px 8px;margin-top:2px}
.boostline{margin-top:10px;font-weight:700;background:linear-gradient(180deg,#FFF1B8,#FFD25A);color:#5A3D00;border-radius:14px;padding:8px 10px;box-shadow:0 3px 0 #C99400}
.tab.locked{opacity:.6;border-style:dashed;cursor:not-allowed}
.tab.hwtab{border-color:#F57C00}
.unlockbox{background:linear-gradient(180deg,#2B1B47,#150C28);color:#F4EEFF;border:3px solid #E8742A;border-radius:26px;padding:24px 20px;max-width:520px;width:100%;text-align:center}
.unlockbox h2{font-size:clamp(26px,5.5vw,36px)}
.lockwrap{position:relative;width:160px;height:160px;margin:0 auto 8px}
.lk,.pk{position:absolute;inset:0;display:grid;place-items:center;font-size:120px;line-height:1}
.lk.half{opacity:0}
.lk.half.l{clip-path:inset(0 50% 0 0)}
.lk.half.r{clip-path:inset(0 0 0 50%)}
.crack{position:absolute;inset:10%;width:80%;height:80%;opacity:0;filter:drop-shadow(0 0 4px #fff)}
.pk{opacity:0;filter:drop-shadow(0 0 18px #F57C00)}
.eventbtn{display:block;margin:14px auto 0;font-size:22px;padding:12px 0;width:min(320px,84%);border:none;border-radius:20px;color:#fff;background:linear-gradient(135deg,#F57C00,#7E3FB0);box-shadow:0 6px 0 #4A2470}
.eventbtn.small{display:inline-block;width:auto;margin:0;font-size:17px;padding:8px 14px;box-shadow:0 4px 0 #4A2470}
.shopbtn{background:#F57C00;border-color:#F57C00;color:#fff;font-size:19px;margin-top:6px}
.ghead{grid-column:1/-1;font-family:"Fredoka",sans-serif;font-size:20px;margin:8px 0 0;text-align:left}
.item svg{width:78px;height:auto}
.item .nm{font-weight:800;font-size:15px;text-align:center}
.item .pr{font-size:13px;font-weight:800;color:var(--soft);text-align:center}
.item.wearing{border-color:var(--good);background:var(--goodbg)}
.item.locked{opacity:.55}
.item.confirm{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}
.sw{width:56px;height:56px;border-radius:50%;border:3px solid var(--line);margin:8px 0}
.heroav{display:block;line-height:0}
.titleav{display:inline-block;line-height:0}
.streakbadge{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;font:inherit;font-family:"Fredoka",sans-serif;font-size:19px;background:var(--panel);color:var(--ink);border:3px solid var(--gold);border-radius:18px;padding:8px 14px;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--gold) 55%,transparent);display:flex;align-items:center;gap:8px;text-align:left}
.streakbadge small{display:block;font-family:"Nunito",sans-serif;font-size:12px;color:var(--soft);font-weight:800;line-height:1.1}
.streakbadge .dots{display:flex;gap:3px;margin-top:3px}
.streakbadge .dots i{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.streakbadge .dots i.on{background:var(--gold)}
.streakbadge.ready{animation:wiggle 1.2s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}30%{transform:rotate(0)}}
.overlay{position:fixed;inset:0;z-index:70;background:rgba(10,16,32,.55);display:grid;place-items:center;padding:16px}
.daily{background:var(--panel);border:3px solid var(--gold);border-radius:26px;padding:20px;max-width:720px;width:100%;text-align:center;max-height:calc(100vh - 32px);overflow:auto}
.daily h2{font-size:clamp(26px,5vw,36px)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:16px 0}
@media (max-width:560px){.days{grid-template-columns:repeat(4,1fr)}.days .d7{grid-column:span 2}}
.day{font:inherit;border-radius:16px;border:3px solid var(--line);background:var(--bg2);color:var(--ink);padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:default}
.day .dn{font-weight:800;font-size:13px;color:var(--soft)}
.day .pz{font-size:28px;line-height:1.1}
.day .amt{font-family:"Fredoka",sans-serif;font-size:18px}
.day.got{background:var(--goodbg);border-color:var(--good)}
.day.today{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 22%,var(--panel));cursor:pointer;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 45%,transparent)}
.day.locked{opacity:.5}
.day.d7 .pz{font-size:34px}
.wrap{padding-bottom:96px}
@media (prefers-reduced-motion: reduce){.streakbadge.ready{animation:none}}
.coldbtn{font-size:20px;padding:12px 22px;background:#DFF3FF;border-color:#7CC4F0;color:#0B4D73}
:root[data-theme="dark"] .coldbtn{background:#173550;border-color:#3D86B8;color:#CDEBFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .coldbtn{background:#173550;border-color:#3D86B8;color:#CDEBFF}}
.bankline{font-family:"Fredoka",sans-serif;font-size:22px;margin-top:6px}
input.name{font:inherit;font-size:20px;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:var(--ink);text-align:center;width:min(320px,90%)}
:root{--road:#F3E2B8;--roadedge:#C9A86A;--roaddash:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--road:#5B4C30;--roadedge:#3A3020;--roaddash:#C9B98F}}
:root[data-theme="dark"]{--road:#5B4C30;--roadedge:#3A3020;--roaddash:#C9B98F}
.maptop{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;padding:8px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.avbtn{border:3px solid var(--gold);border-radius:50%;background:var(--panel);padding:2px;cursor:pointer;line-height:0}
.avbtn:focus-visible,.node:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mapintro{text-align:center;margin:6px 0 10px}
.mapintro h1{font-size:clamp(36px,8vw,58px);line-height:1}
.mapintro .coldbtn{margin-top:10px}
.map{position:relative}
.road{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
.world{position:relative;border-radius:28px;padding:16px 14px 26px;margin:0 0 18px;background:linear-gradient(180deg,color-mix(in srgb,var(--wc) 26%,var(--bg2)),color-mix(in srgb,var(--wc) 12%,var(--bg2)));border:3px solid color-mix(in srgb,var(--wc) 55%,transparent)}
.deco{position:absolute;inset:0;overflow:hidden;border-radius:26px;pointer-events:none}
.deco span{position:absolute;font-size:clamp(26px,6vw,42px);opacity:.55}
.whead{display:flex;gap:12px;align-items:center;position:relative;z-index:3}
.wem{font-size:48px;line-height:1}
.whead h2{font-size:clamp(22px,4.6vw,30px)}
.whead p{margin:2px 0 0;color:var(--soft);font-size:16px;max-width:52ch}
.nodes{position:relative;z-index:3;padding-top:10px}
.nodewrap{width:max-content;display:flex;flex-direction:column;align-items:center;margin:26px 0 6px;position:relative}
.node{width:76px;height:76px;border-radius:50%;border:5px solid #fff;background:var(--wc);color:#fff;font-family:"Fredoka",sans-serif;font-size:24px;cursor:pointer;box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 60%,black);display:grid;place-items:center;position:relative;z-index:3}
.node:active{transform:translateY(4px);box-shadow:0 3px 0 color-mix(in srgb,var(--wc) 60%,black)}
.node.boss{width:96px;height:96px;font-size:48px;background:radial-gradient(circle,#fff6,transparent 60%),color-mix(in srgb,var(--wc) 75%,black);border-color:var(--gold)}
.node.locked{background:var(--faint);box-shadow:0 7px 0 var(--line);cursor:not-allowed;font-size:26px}
.node.cur{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 60%,black),0 0 0 0 color-mix(in srgb,var(--gold) 80%,transparent)}50%{box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 60%,black),0 0 0 14px color-mix(in srgb,var(--gold) 0%,transparent)}}
.here{position:absolute;top:-64px;animation:bob 1s ease-in-out infinite alternate;z-index:4;line-height:0}
@keyframes bob{to{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.here,.node.cur{animation:none}}
.nlabel{margin-top:10px;text-align:center;font-weight:800;font-size:15px;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:3px 10px;line-height:1.2;position:relative;z-index:3}
.nstars{color:var(--gold);font-size:18px;letter-spacing:2px}
.finish{text-align:center;font-family:"Fredoka",sans-serif;font-size:20px;padding:14px;background:var(--panel);border:3px dashed var(--gold);border-radius:20px;position:relative;z-index:3}
.card.intro{text-align:center;border-color:var(--wc)}
.stitle{font-size:clamp(26px,5.4vw,38px);margin:6px 0}
.tipbox{background:color-mix(in srgb,var(--wc) 14%,var(--panel));border:2px solid color-mix(in srgb,var(--wc) 50%,transparent);border-radius:16px;padding:12px 16px;font-size:19px;text-align:left;margin:12px auto;max-width:560px}
.bossintro{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.bossbig{font-size:clamp(80px,18vw,120px);line-height:1}
.bubble{background:var(--panel);border:3px solid var(--ink);border-radius:18px;padding:8px 14px;font-weight:800;max-width:440px}
.bossbar{display:flex;align-items:center;gap:12px;background:var(--panel);border:3px solid var(--bad);border-radius:20px;padding:10px 14px;margin:14px 0}
.boss{font-size:56px;line-height:1}
.bname{font-family:"Fredoka",sans-serif;font-size:19px}
.hp{height:16px;border-radius:99px;background:var(--btn);overflow:hidden;margin-top:4px;border:2px solid var(--line)}
.hp i{display:block;height:100%;background:linear-gradient(90deg,#E53935,#FF7043);transition:width .5s ease}
.hearts{font-size:24px;white-space:nowrap}
.youbtn{font-size:18px}
.tok.right,.youbtn.right{background:var(--good);color:#fff;border-color:var(--good)}
.youbtn.no{background:var(--badbg);border-color:var(--bad)}
.daily.scroll{border-color:#B8862B;background:linear-gradient(#FFF6DF,#F6E6BE);color:#3A2A10}
.home{text-align:center;padding:4px 0 10px}
.logo{font-size:clamp(40px,9vw,66px);line-height:1}
.homeav{display:inline-block;line-height:0;margin-top:14px}
.hname{font-size:24px;margin-top:4px}
.startbtn{display:block;margin:18px auto 0;font:inherit;font-family:"Fredoka",sans-serif;font-weight:700;font-size:clamp(34px,8vw,48px);letter-spacing:2px;color:#fff;background:#22B14C;border:none;border-radius:28px;padding:18px 0;width:min(420px,92%);cursor:pointer;box-shadow:0 9px 0 #157A33,0 14px 24px rgba(0,0,0,.18)}
.startbtn:hover{background:#28C456}
.startbtn:active{transform:translateY(6px)!important;box-shadow:0 3px 0 #157A33}
.startbtn:focus-visible{outline:4px solid var(--accent);outline-offset:4px}
.dressbtn{display:block;margin:20px auto 0;font-size:22px;padding:12px 0;width:min(300px,80%);border-radius:20px}
.badgearea{background:var(--panel);border:2px solid var(--line);border-radius:24px;padding:16px;margin-top:22px}
.bhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bhead h2{font-size:28px}
.newpill{background:var(--gold);color:var(--goldink);font-weight:800;border-radius:99px;padding:3px 12px;font-size:15px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{font:inherit;color:var(--ink);background:var(--bg2);border:3px solid var(--line);border-radius:18px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;cursor:default}
.badge .bem{font-size:38px;line-height:1.1}
.badge .bn{font-weight:800;font-size:15px}
.badge .bl{font-size:12px}
.badge .bd{font-size:13px;color:var(--soft);line-height:1.2;min-height:2.4em}
.badge .bs{font-size:13px;font-weight:800;color:var(--soft)}
.badge .bar{width:85%;height:8px;border-radius:9px;background:var(--btn);overflow:hidden;margin:4px 0 2px}
.badge .bar i{display:block;height:100%;background:var(--gold)}
.badge.locked .bem{filter:grayscale(1);opacity:.45}
.badge.ready{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 20%,var(--panel));cursor:pointer;animation:glow 1.3s ease-in-out infinite}
.badge.ready .claim{color:var(--ink)}
.badge.done{border-color:var(--good);background:var(--goodbg)}
.badge.lvl3.done,.badge.lvl3.ready{border-width:4px}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 70%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--gold) 0%,transparent)}}
@media (prefers-reduced-motion: reduce){.badge.ready{animation:none}}
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:80;background:var(--panel);color:var(--ink);border:3px solid var(--gold);border-radius:18px;padding:10px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:92vw}
.toast small{color:var(--soft)}
/* ================= SKIN 2.0 (looks better, stays light: only gradients, shadows, transforms) ================= */
:root{--tile:#FFF8E6;--tileedge:#E3C792;--glow:rgba(255,255,255,.65);--shadow:0 14px 34px rgba(25,35,70,.13);--logoA:#FFC531;--logoB:#FF8A00;--logoEdge:#B35300}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tile:#3B3424;--tileedge:#1E1910;--glow:rgba(255,255,255,.08);--shadow:0 14px 34px rgba(0,0,0,.45);--logoEdge:#5A2A00}}
:root[data-theme="dark"]{--tile:#3B3424;--tileedge:#1E1910;--glow:rgba(255,255,255,.08);--shadow:0 14px 34px rgba(0,0,0,.45);--logoEdge:#5A2A00}
body{background:
  radial-gradient(900px 500px at 0% -10%,color-mix(in srgb,var(--panel) 85%,transparent),transparent 60%),
  radial-gradient(800px 500px at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg2));background-attachment:fixed}
h1,h2,.qt,.stitle,.bname,.fred{letter-spacing:.2px}
/* logo */
.logo,.mapintro h1{background:linear-gradient(180deg,var(--logoA),var(--logoB));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 var(--logoEdge)) drop-shadow(0 10px 14px rgba(0,0,0,.15));font-weight:700}
/* cards */
.card,.badgearea,.daily:not(.scroll),.chapnav{border:none!important;border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,#fff),var(--panel));box-shadow:inset 0 1px 0 var(--glow),0 8px 0 color-mix(in srgb,var(--line) 80%,transparent),var(--shadow)}
.card.intro{box-shadow:inset 0 1px 0 var(--glow),0 0 0 4px color-mix(in srgb,var(--wc) 55%,transparent),0 10px 0 color-mix(in srgb,var(--wc) 40%,transparent),var(--shadow)}
/* buttons */
.btn{border:none;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--btn) 70%,#fff),var(--btn));box-shadow:inset 0 1px 0 var(--glow),0 4px 0 color-mix(in srgb,var(--line) 90%,#000 10%);transition:transform .08s}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--glow),0 1px 0 var(--line)}
.btn.main{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 72%,#fff),var(--accent) 60%);color:var(--accentink);text-shadow:0 1px 0 rgba(0,0,0,.18);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 color-mix(in srgb,var(--accent) 55%,#000),0 12px 20px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn.main:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.startbtn{position:relative;overflow:hidden;background:linear-gradient(180deg,#63E486,#22B14C 55%,#169A3E)!important;text-shadow:0 3px 0 #0F7A30;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 10px 0 #12772F,0 18px 30px rgba(34,177,76,.35)!important}
.startbtn::before{content:"";position:absolute;left:8%;right:8%;top:6px;height:38%;border-radius:20px;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
.eventbtn{box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 #4A2470,0 12px 22px rgba(126,63,176,.35)}
.iconbtn{border:none;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,#fff),var(--panel));box-shadow:0 3px 0 var(--line)}
/* HUD pills */
.pill{border:none;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 85%,#fff),var(--panel));box-shadow:inset 0 1px 0 var(--glow),0 3px 0 var(--line),0 6px 12px rgba(0,0,0,.06);font-weight:600}
.pill b{font-family:"Fredoka",sans-serif}
/* question area */
.qno{display:inline-block;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent);font-weight:700;border-radius:99px;padding:3px 12px;font-size:14px}
.qt{font-weight:600;margin-top:10px}
.big mark,.big .hl{box-shadow:0 3px 0 color-mix(in srgb,var(--gold) 70%,#000 10%)}
.tok{background:linear-gradient(180deg,var(--tile),color-mix(in srgb,var(--tile) 82%,var(--tileedge)));border:none;border-radius:14px;padding:4px 13px;box-shadow:inset 0 1px 0 var(--glow),0 5px 0 var(--tileedge),0 8px 14px rgba(0,0,0,.08);transition:transform .08s}
.tok:hover{transform:translateY(-2px)}
.tok:active{transform:translateY(3px);box-shadow:0 2px 0 var(--tileedge)}
.tok.right,.youbtn.right{background:linear-gradient(180deg,#5BD27A,#2E9E4F)!important;color:#fff!important;box-shadow:0 5px 0 #1D6E35,0 8px 14px rgba(46,158,79,.3)!important}
.tok.no,.youbtn.no{background:linear-gradient(180deg,#FFB3B3,#F07070)!important;color:#fff!important;box-shadow:0 5px 0 #A33!important}
.opt{border:3px solid transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,#fff),color-mix(in srgb,var(--btn) 60%,var(--panel)));box-shadow:inset 0 1px 0 var(--glow),0 6px 0 var(--line),0 10px 18px rgba(0,0,0,.06);transition:transform .1s}
.opt:hover:not(:disabled){transform:translateY(-3px)}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.opt.right{border-color:var(--good);background:linear-gradient(180deg,var(--goodbg),color-mix(in srgb,var(--goodbg) 70%,var(--good)));box-shadow:0 6px 0 color-mix(in srgb,var(--good) 70%,#000)}
.opt.no{border-color:var(--bad);background:linear-gradient(180deg,var(--badbg),color-mix(in srgb,var(--badbg) 75%,var(--bad)));box-shadow:0 6px 0 color-mix(in srgb,var(--bad) 70%,#000)}
.opt.tree{background:var(--bg2)}
.fb{border:none!important;border-radius:20px;box-shadow:var(--shadow)}
.fb.good{background:linear-gradient(135deg,var(--goodbg),var(--panel) 80%);border-left:8px solid var(--good)!important}
.fb.bad{background:linear-gradient(135deg,var(--badbg),var(--panel) 80%);border-left:8px solid var(--bad)!important}
.fb .head{font-size:24px}
.tree{border:2px dashed color-mix(in srgb,var(--line) 80%,transparent);background:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--accent) 7%,transparent) 31px 32px),var(--bg2)}
/* trail */
.trail::before{height:12px;margin-top:-6px;background:linear-gradient(180deg,color-mix(in srgb,var(--trail) 80%,#fff),var(--trail));box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.dot{border:3px solid #fff;background:radial-gradient(circle at 35% 30%,#fff,var(--btn));box-shadow:0 3px 0 var(--line)}
.dot.gold{background:radial-gradient(circle at 35% 30%,#FFF3B8,#F2B705 60%,#C48F00);border-color:#FFE07A;box-shadow:0 3px 0 #A97A00,0 0 10px rgba(242,183,5,.5)}
.dot.miss{background:radial-gradient(circle at 35% 30%,#eee,#AAB2C5);border-color:#fff}
/* boss */
.bossbar{border:none;background:linear-gradient(135deg,#2A0F18,#4E1527);color:#fff;box-shadow:0 0 0 3px #E53935,0 8px 0 #6E0F1B,0 14px 28px rgba(229,57,53,.3)}
.bossbar .bname{color:#FFE3E8}
.bossbar .youlbl{color:#FFC1CC}
.bossbar .hp{background:#1A060B;border-color:#7A1A2B}
.boss{filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.bubble{border:none;box-shadow:0 0 0 3px var(--ink),0 6px 0 var(--ink)}
.tipbox{border:none;box-shadow:inset 6px 0 0 var(--wc),0 4px 0 color-mix(in srgb,var(--wc) 25%,transparent)}
/* map */
.world{border:none;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--wc) 45%,transparent),0 10px 24px rgba(0,0,0,.08)}
.whead{background:linear-gradient(180deg,color-mix(in srgb,var(--wc) 80%,#fff),var(--wc));color:#fff;border-radius:20px;padding:10px 14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 color-mix(in srgb,var(--wc) 60%,#000)}
.whead h2{text-shadow:0 2px 0 rgba(0,0,0,.25)}
.whead p{color:rgba(255,255,255,.92)!important}
.node{border:5px solid #fff;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0 12%,transparent 13%),radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--wc) 85%,#fff),color-mix(in srgb,var(--wc) 75%,#000));text-shadow:0 2px 0 rgba(0,0,0,.3);box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 55%,#000),0 14px 20px rgba(0,0,0,.18)}
.node.boss{border-color:var(--gold);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6) 0 12%,transparent 13%),radial-gradient(circle,color-mix(in srgb,var(--wc) 60%,#000),color-mix(in srgb,var(--wc) 35%,#000))}
.node.locked{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6) 0 12%,transparent 13%),radial-gradient(circle,#C9CFDD,#98A1B5);box-shadow:0 7px 0 #7A8299;text-shadow:none}
.nlabel{border:none;font-family:"Fredoka",sans-serif;font-weight:600;box-shadow:0 3px 0 var(--line),0 6px 10px rgba(0,0,0,.08)}
.nstars{text-shadow:0 1px 0 #A97A00}
.finish{border:none;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 25%,var(--panel)),var(--panel));box-shadow:inset 0 0 0 3px var(--gold),0 6px 0 color-mix(in srgb,var(--gold) 60%,#000)}
.chbtn:not(:disabled):not(.lockedch){background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 72%,#fff),var(--accent))}
/* home + badges */
.homeav svg{filter:drop-shadow(0 12px 14px rgba(0,0,0,.18))}
.hname{font-weight:600}
.badge{border:none;background:linear-gradient(180deg,var(--panel),var(--bg2));box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line)}
.badge .bem{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--btn));box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.badge.done{background:linear-gradient(180deg,var(--goodbg),var(--panel));box-shadow:inset 0 0 0 3px var(--good),0 4px 0 color-mix(in srgb,var(--good) 60%,#000)}
.badge.done .bem{background:radial-gradient(circle at 35% 30%,#FFF6C8,#F2B705 65%,#C48F00);box-shadow:0 3px 0 #A97A00}
.badge.ready{box-shadow:inset 0 0 0 3px var(--gold),0 4px 0 color-mix(in srgb,var(--gold) 60%,#000)}
/* closet */
.me{border:none}
.tab{border:none;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,#fff),var(--panel));box-shadow:0 3px 0 var(--line)}
.tab.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 72%,#fff),var(--accent));color:var(--accentink);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.item{border:none;box-shadow:inset 0 0 0 3px var(--line),0 4px 0 var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2))}
.item.r-rare{box-shadow:inset 0 0 0 3px #4C8DFF,0 4px 0 #2F5FBF}
.item.r-epic{box-shadow:inset 0 0 0 3px #9B5CFF,0 4px 0 #6B35C4;background:linear-gradient(180deg,color-mix(in srgb,#9B5CFF 12%,var(--panel)),var(--bg2))}
.item.r-mythic{box-shadow:0 4px 0 #6B35C4,0 0 18px rgba(155,92,255,.35)!important;border:3px solid transparent;background:linear-gradient(180deg,color-mix(in srgb,#9B5CFF 10%,var(--panel)),var(--bg2)) padding-box,linear-gradient(120deg,#FF4D6D,#FFB703,#3CC47C,#2F80ED,#9B51E0,#FF4D6D) border-box;background-size:100% 100%,300% 300%;animation:mythic 4s linear infinite}
@keyframes mythic{to{background-position:0 0,300% 0}}
@media (prefers-reduced-motion: reduce){.item.r-mythic{animation:none}}
.item.r-mythic .rar{background:linear-gradient(90deg,#FF4D6D,#FFB703,#3CC47C,#2F80ED,#9B51E0);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.item.r-legend{box-shadow:inset 0 0 0 3px #F2B705,0 4px 0 #B88700;background:linear-gradient(180deg,color-mix(in srgb,#F2B705 18%,var(--panel)),var(--bg2))}
.item .rar{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:99px;padding:1px 8px;margin-top:2px}
.item.r-rare .rar{background:#4C8DFF;color:#fff}.item.r-epic .rar{background:#9B5CFF;color:#fff}.item.r-legend .rar{background:#F2B705;color:#3A2A00}
.item.wearing{box-shadow:inset 0 0 0 4px var(--good),0 4px 0 color-mix(in srgb,var(--good) 60%,#000)!important}
/* results */
.stars span{filter:drop-shadow(0 4px 0 rgba(169,122,0,.5))}
.bigemoji{filter:drop-shadow(0 10px 12px rgba(0,0,0,.2))}
.bankline{display:inline-block;background:color-mix(in srgb,var(--gold) 18%,var(--panel));border-radius:99px;padding:6px 16px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent)}
.toast{border:none;box-shadow:inset 0 0 0 3px var(--gold),0 6px 0 color-mix(in srgb,var(--gold) 60%,#000),var(--shadow)}
.streakbadge{border:none;box-shadow:inset 0 0 0 3px var(--gold),0 5px 0 color-mix(in srgb,var(--gold) 60%,#000),var(--shadow)}
#scene .cloud,#scene .bat,#scene .flake{will-change:transform}