:root{
  --night:#0a0c22;--night-2:#141641;--violet:#2c2566;--panel:rgba(21,23,62,.8);--line:rgba(246,183,44,.25);--line-soft:rgba(255,255,255,.08);
  --gold:#f6b72c;--gold-hi:#ffe08a;--gold-deep:#c47f17;--cream:#fff2dc;--text:#ebe8ff;--muted:#aaa8d8;--sky:#6fb6ef;--pink:#f08b8b;--mint:#5eead4;--ok:#4ade80;--bad:#f87171;
  --paper:#f7e7c4;--paper-2:#ecd29b;--ink:#4a2f12;--ink-soft:#7a5a32;--wood:#6b3f1d;
  --display:"Lilita One","Trebuchet MS",system-ui,sans-serif;--fantasy:"Cinzel",Georgia,serif;--body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:20px;--gut:clamp(16px,4vw,40px);--max:1180px;--hud:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hud) + 16px)}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi)}
h1,h2,h3,h4{margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
::selection{background:var(--gold);color:#3a2000}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-2;background:radial-gradient(1200px 700px at 50% -10%,#3b2f8a 0%,transparent 62%),radial-gradient(900px 600px at 100% 100%,#45286f 0%,transparent 60%),radial-gradient(700px 500px at 0% 70%,#1f2f6e 0%,transparent 60%),linear-gradient(180deg,#0a0c22 0%,#11133b 50%,#1a1748 100%)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

.hud{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,rgba(10,12,34,.94),rgba(10,12,34,.78));backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.hud-bar{max-width:var(--max);margin:0 auto;height:var(--hud);padding-inline:var(--gut);display:flex;align-items:center;gap:18px}
.brand img{height:50px;width:auto;filter:drop-shadow(0 4px 10px #0009);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(-4deg) scale(1.06)}
nav{margin-left:auto;display:flex;align-items:center;gap:20px}
nav a{color:var(--text);text-decoration:none;font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative;padding-block:6px}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .25s;border-radius:2px}
nav a:not(.btn):hover::after,nav a.on::after{transform:scaleX(1)}
nav a.on{color:var(--gold-hi)}
.player{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer}
.lv{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:16px;color:#3a2000;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 55%,var(--gold-deep));box-shadow:0 0 0 2px #0006,0 0 14px rgba(246,183,44,.5)}
.lv.pop{animation:pop .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{40%{transform:scale(1.45) rotate(-10deg)}}
.xpwrap{display:grid;gap:2px;min-width:92px}
.xpbar{height:8px;border-radius:99px;background:#0008;overflow:hidden;box-shadow:inset 0 0 0 1px #fff1}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),#a7f3d0);border-radius:inherit;transition:width .6s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 10px var(--mint)}
.xptext{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-align:left}
.gold{display:flex;align-items:center;gap:6px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--gold-hi)}
.coin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b8,var(--gold) 50%,var(--gold-deep));box-shadow:0 0 0 1.5px #8a5409 inset}
.gold.bump{animation:pop .5s}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;order:3}
.burger span{display:block;width:24px;height:2px;background:var(--cream);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:block}
  .player{margin-left:auto}
  nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px;background:rgba(10,12,34,.97);border-bottom:1px solid var(--line);display:none}
  nav.open{display:flex}
  nav a{padding:13px 4px;border-bottom:1px solid var(--line-soft)}
  nav a:not(.btn)::after{display:none}
  nav .btn{margin-top:12px}
}
@media (max-width:460px){.xpwrap{min-width:60px}.xptext{display:none}.brand img{height:42px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-family:var(--display);font-size:18px;letter-spacing:.03em;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.btn-gold{background:linear-gradient(180deg,#fff0b0 0%,var(--gold-hi) 18%,var(--gold) 55%,var(--gold-deep) 100%);color:#4a2700;box-shadow:0 5px 0 #8a5409,0 12px 26px rgba(246,183,44,.35),inset 0 2px 0 #fff8;text-shadow:0 1px 0 #ffeeb0}
.btn-gold::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#fff9,transparent);transform:skewX(-20deg);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 8px 0 #8a5409,0 18px 34px rgba(246,183,44,.45),inset 0 2px 0 #fff8}
.btn-gold:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5409}
.btn-gold[aria-disabled="true"]{filter:grayscale(.65) brightness(.85);cursor:default;transform:none}
.btn-gold[aria-disabled="true"]::before{display:none}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--cream);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold-hi);transform:translateY(-2px)}
.btn-sm{padding:8px 18px;font-size:15px}
.btn-lg{padding:16px 34px;font-size:21px}

.pet{position:fixed;left:0;top:0;width:150px;z-index:55;cursor:pointer;will-change:transform;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45));touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pet:focus-visible{outline:none}
.pet:focus-visible .pbody{filter:drop-shadow(0 0 6px var(--sky))}
.pet-bob{position:relative;aspect-ratio:408/337;animation:bob 2.4s ease-in-out infinite;transform-origin:50% 60%}
.pet-bob img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wl{transform-origin:23.5% 63%;animation:flapL .42s ease-in-out infinite alternate}
.wr{transform-origin:61.4% 80%;animation:flapR .42s ease-in-out infinite alternate}
.pet.fast .wl,.pet.fast .wr{animation-duration:.2s}
.pet.spin .pet-bob{animation:spin .8s cubic-bezier(.4,1.5,.5,1)}
.pet.flip .pet-bob{scale:-1 1}
@keyframes flapL{from{transform:rotate(16deg)}to{transform:rotate(-22deg) scaleY(.92)}}
@keyframes flapR{from{transform:rotate(-16deg)}to{transform:rotate(22deg) scaleY(.92)}}
@keyframes bob{50%{translate:0 -10px}}
@keyframes spin{to{rotate:360deg}}
.bubble{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;background:var(--cream);color:#3a2000;font-weight:900;font-size:13px;padding:6px 12px;border-radius:14px;box-shadow:0 6px 14px #0006;animation:bubble .3s cubic-bezier(.3,1.6,.5,1)}
.bubble::after{content:"";position:absolute;left:50%;top:100%;border:7px solid transparent;border-top-color:var(--cream);transform:translateX(-50%)}
@keyframes bubble{from{transform:translateX(-50%) scale(.4);opacity:0}}
@media (max-width:640px){.pet{width:96px}}

main{position:relative}
.hero{position:relative;min-height:clamp(640px,calc(100svh - var(--hud)),980px);display:grid;place-items:center;padding:24px var(--gut) 140px;overflow:hidden;isolation:isolate}
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.isl{position:absolute;animation:hover 9s ease-in-out infinite}
.far .isl{filter:blur(1.2px) brightness(1.35) drop-shadow(0 0 18px rgba(160,140,255,.35));opacity:.75}
.mid .isl{filter:brightness(1.3) saturate(1.1) drop-shadow(0 10px 20px rgba(0,0,0,.4)) drop-shadow(0 0 24px rgba(160,140,255,.3))}
.i1{width:70px;left:7%;top:16%}
.i2{width:56px;right:12%;top:10%;animation-delay:-3s;transform:scaleX(-1)}
.i3{width:84px;right:4%;top:46%;animation-delay:-6s}
.i4{width:130px;left:2%;top:48%;animation-delay:-2s;animation-duration:11s}
.i5{width:110px;right:16%;top:66%;animation-delay:-5s;animation-duration:12s}
@keyframes hover{50%{translate:0 -18px}}
@media (max-width:760px){.i4,.i5{display:none}.i3{top:62%}}
.hero-core{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:16px;max-width:960px}
.logo-stage{perspective:1000px;width:min(860px,100%)}
.hero-logo{width:100%;transform-style:preserve-3d;transition:transform .25s ease-out;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(246,183,44,.18));animation:enter 1.1s cubic-bezier(.2,1.3,.4,1) both}
@keyframes enter{from{opacity:0;transform:translateY(40px) scale(.85)}}
.motto{font-family:var(--fantasy);font-weight:900;font-size:clamp(13px,2.1vw,19px);letter-spacing:.34em;color:var(--gold);text-transform:uppercase;text-shadow:0 0 18px rgba(246,183,44,.4)}
.motto i{font-style:normal;color:var(--cream);opacity:.6;margin-inline:.25em}
.lead{max-width:58ch;color:var(--muted);font-size:clamp(16px,1.9vw,19px)}
.cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px}
.hint{font-size:14px;font-weight:800;color:var(--muted);display:flex;gap:8px;align-items:center}
.hint-star{color:var(--gold);display:inline-block;animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.4) rotate(20deg);opacity:.6}}
.launch{display:grid;gap:10px;justify-items:center}
.launch-label{font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--muted)}
.count{display:flex;gap:10px}
.count div{min-width:76px;padding:10px 8px 8px;border-radius:16px;background:var(--panel);border:1px solid var(--line);display:grid;justify-items:center;box-shadow:0 10px 24px #0005}
.count b{font-family:var(--display);font-size:34px;color:var(--gold-hi);font-variant-numeric:tabular-nums;line-height:1;font-weight:400}
.count span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.cloudbank{position:absolute;left:-5%;right:-5%;bottom:-40px;height:190px;z-index:3;pointer-events:none}
.cloudbank i{position:absolute;bottom:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,#f4ecff 0%,#d9cdf5 55%,#b6a6e6 100%);box-shadow:inset 0 -18px 30px rgba(120,100,200,.35);animation:drift 18s ease-in-out infinite alternate}
.cloudbank i:nth-child(1){left:-2%;width:28%;height:150px}
.cloudbank i:nth-child(2){left:18%;width:22%;height:120px;animation-delay:-4s}
.cloudbank i:nth-child(3){left:34%;width:30%;height:165px;animation-delay:-8s}
.cloudbank i:nth-child(4){left:57%;width:22%;height:125px;animation-delay:-2s}
.cloudbank i:nth-child(5){left:73%;width:30%;height:155px;animation-delay:-6s}
.cloudbank i:nth-child(6){left:8%;width:90%;height:70px;bottom:-20px;animation:none;border-radius:40px}
.cloudbank i:nth-child(7){left:44%;width:16%;height:95px;bottom:60px;animation-delay:-10s;opacity:.9}
@keyframes drift{to{translate:3vw 0}}

.status{position:relative;z-index:4;max-width:var(--max);margin:-70px auto 0;width:calc(100% - 2*var(--gut));display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--r);background:linear-gradient(180deg,#24206a,#171a48);border:2px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.45),inset 0 1px 0 #fff2}
.stat{display:grid;gap:2px;padding:20px 24px;border-left:1px solid var(--line-soft);position:relative}
.stat:first-child{border-left:0;padding-left:56px}
.gem{position:absolute;left:22px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);border-radius:4px;background:var(--muted)}
.gem.on{background:var(--ok);box-shadow:0 0 16px var(--ok);animation:pulse 2s infinite}
.gem.soon{background:var(--gold);box-shadow:0 0 16px var(--gold);animation:pulse 2s infinite}
.gem.off{background:var(--bad);box-shadow:0 0 12px var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 4px currentColor;opacity:.7}}
.k{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v{font-family:var(--display);font-size:24px;color:var(--cream);font-variant-numeric:tabular-nums;line-height:1.2}
@media (max-width:760px){.status{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line-soft)}}

.block,.crossroads{max-width:var(--max);margin:0 auto;padding:96px var(--gut) 0}
.block{display:grid;gap:30px}
.head{display:grid;gap:10px;max-width:66ch}
.head p{color:var(--muted)}
.eyebrow{font-family:var(--fantasy);font-weight:900;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.title{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,56px);letter-spacing:.01em;background:linear-gradient(180deg,#fff6d6 0%,var(--gold-hi) 35%,var(--gold) 65%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3a1f00) drop-shadow(0 8px 14px #0007)}
.title.sm{font-size:clamp(28px,3.4vw,40px)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,30px);backdrop-filter:blur(8px);min-width:0;position:relative;box-shadow:0 18px 40px rgba(0,0,0,.3)}

.reveal{transition:transform .8s cubic-bezier(.2,.9,.3,1),opacity .8s}
.reveal.pre{transform:translateY(36px);opacity:.001}

.crossroads{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.road-copy{display:grid;gap:16px}
.road-copy>p{color:var(--muted);max-width:52ch}
.road-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.road-list li{display:grid;gap:2px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.road-list b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold-hi)}
.road-list span{font-size:14px;color:var(--muted)}
.sign{position:relative;width:min(300px,70vw);justify-self:center;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.sign img{width:100%}
.plank{position:absolute;left:12%;right:2%;height:17%;border-radius:10px;transition:transform .3s cubic-bezier(.3,1.8,.5,1),background .2s}
.plank:hover,.plank:focus-visible{background:rgba(255,224,138,.16);outline:none;box-shadow:0 0 0 2px var(--gold-hi)}
.p1{top:13%;transform-origin:8% 50%}.p2{top:32%;transform-origin:8% 50%}.p3{top:50.5%;transform-origin:8% 50%}.p4{top:69%;transform-origin:8% 50%}
.plank:hover{transform:rotate(-3deg)}
@media (max-width:760px){.crossroads{grid-template-columns:1fr}.road-list{grid-template-columns:1fr}}

.scroll{position:relative;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.scroll-rod{height:30px;margin-inline:-14px;border-radius:15px;background:linear-gradient(180deg,#a8662b,#6b3f1d 50%,#3e220d);box-shadow:inset 0 2px 0 #d9944c,0 4px 8px #0006;position:relative;z-index:1}
.scroll-rod::before,.scroll-rod::after{content:"";position:absolute;top:-6px;width:30px;height:42px;border-radius:12px;background:radial-gradient(circle at 40% 35%,var(--gold-hi),var(--gold-deep))}
.scroll-rod::before{left:-14px}.scroll-rod::after{right:-14px}
.scroll-paper{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:34px clamp(18px,4vw,44px);margin-block:-8px;background:radial-gradient(ellipse at 50% 0%,#fff6dd 0%,transparent 70%),linear-gradient(90deg,var(--paper-2) 0%,var(--paper) 6%,var(--paper) 94%,var(--paper-2) 100%);color:var(--ink);transform-origin:top}
.scroll.anim .scroll-paper{animation:unroll 1.1s cubic-bezier(.2,.9,.3,1) both;animation-play-state:paused}
.scroll.anim.open .scroll-paper{animation-play-state:running}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.scroll-col h3{font-family:var(--fantasy);font-weight:900;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--wood);border-bottom:2px solid rgba(107,63,29,.3);padding-bottom:8px;margin-bottom:6px}
.scroll-col h3.mt{margin-top:22px}
.rates{margin:0}
.rates div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(107,63,29,.25)}
.rates div:last-child{border-bottom:0}
.rates dt{color:var(--ink-soft);font-weight:700}
.rates dd{margin:0;font-family:var(--display);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.rates dd.tba{font-family:var(--body);font-size:15px;font-style:italic;font-weight:700;color:#a0784a}
.tags{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:5px 12px;border-radius:999px;background:rgba(107,63,29,.12);border:1px solid rgba(107,63,29,.3);font-size:14px;font-weight:800;color:var(--ink)}
.feat{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.feat li{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:15px;color:var(--ink-soft)}
.feat li b{color:var(--ink);display:block}
.feat .ic{font-size:22px;line-height:1.2}
@media (max-width:900px){.scroll-paper{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}
.card{perspective:1100px;height:400px;cursor:pointer;outline:none}
.card-in{position:relative;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.4,1)}
.card.turned .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:2px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.card:focus-visible .face{border-color:var(--sky)}
.front{display:grid;align-content:end;padding:22px;background:var(--c1)}
.front::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,var(--c2) 0%,transparent 60%),repeating-linear-gradient(45deg,#ffffff08 0 2px,transparent 2px 14px)}
.front::after{content:"";position:absolute;inset:10px;border-radius:14px;border:1px solid #ffffff2a;pointer-events:none}
.front .glyph{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:96px;filter:drop-shadow(0 10px 18px #0008);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.card:hover .glyph{transform:translate(-50%,-56%) scale(1.12) rotate(-6deg)}
.front .nm{position:relative;font-family:var(--display);font-size:30px;color:#fff;text-shadow:0 3px 0 #0007}
.front .rl{position:relative;font-weight:800;font-size:14px;color:#ffffffc8}
.front .turn{position:absolute;right:16px;top:14px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffffffb0}
.back{transform:rotateY(180deg);background:linear-gradient(180deg,#221f5e,#151741);padding:22px;display:grid;align-content:start;gap:12px}
.back h3{font-family:var(--display);font-weight:400;font-size:26px;color:var(--gold-hi)}
.back p{color:var(--muted);font-size:15px}
.back .k{margin-top:4px}
.sps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sps li{padding:4px 10px;border-radius:8px;background:#ffffff10;border:1px solid var(--line-soft);font-size:13px;font-weight:800}
.meter{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--muted)}
.meter i{height:7px;border-radius:9px;background:#0007;overflow:hidden;position:relative}
.meter i::after{content:"";position:absolute;inset:0;width:var(--v);background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));border-radius:inherit}

.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{font-family:var(--display);font-size:17px;padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;transition:transform .2s}
.tabs button:hover{transform:translateY(-2px)}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#3a2000;border-color:var(--gold)}
.tabs button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.rank-body{display:grid;gap:22px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:14px;max-width:760px;margin-inline:auto;width:100%}
.pod{display:grid;justify-items:center;gap:8px;text-align:center}
.pod .av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:26px;color:#3a2000;background:radial-gradient(circle at 35% 30%,#fff,var(--pc))}
.pod b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--cream)}
.pod span{font-size:13px;color:var(--muted);font-weight:700}
.pod .stand{width:100%;border-radius:14px 14px 0 0;background:linear-gradient(180deg,var(--pc),#0000);display:grid;place-items:start center;padding-top:10px;font-family:var(--display);font-size:34px;color:#fff;text-shadow:0 3px 0 #0006}
.pod.g1{--pc:#f6b72c}.pod.g1 .stand{height:150px}
.pod.g2{--pc:#c9d3e6}.pod.g2 .stand{height:110px}
.pod.g3{--pc:#d08a4e}.pod.g3 .stand{height:84px}
.rank-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.rank{width:100%;border-collapse:collapse;min-width:520px}
.rank th,.rank td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line-soft)}
.rank th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:900}
.rank td{font-variant-numeric:tabular-nums}
.rank tr:last-child td{border-bottom:0}
.rank .pos{font-family:var(--display);color:var(--gold);width:64px;font-size:18px}
.empty{display:grid;justify-items:center;gap:10px;padding:40px 20px 46px;text-align:center;color:var(--muted);border-radius:var(--r);border:1px dashed var(--line);background:rgba(255,255,255,.02)}
.empty .ghost-pod{display:flex;align-items:end;gap:10px;margin-bottom:8px}
.empty .ghost-pod i{display:block;width:70px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,rgba(246,183,44,.35),transparent)}
.empty .ghost-pod i:nth-child(1){height:60px}.empty .ghost-pod i:nth-child(2){height:96px;width:84px}.empty .ghost-pod i:nth-child(3){height:44px}
.empty b{color:var(--cream);font-family:var(--display);font-weight:400;font-size:26px}

.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:26px;padding:34px clamp(16px,3vw,34px);border-radius:var(--r);background:linear-gradient(90deg,#00000022 0 2px,transparent 2px) 0 0/90px 100%,linear-gradient(180deg,#7a4a24,#5a3418);border:6px solid #3e220d;box-shadow:inset 0 0 40px #0008,0 24px 40px #0007}
.note{position:relative;padding:28px 22px 22px;background:linear-gradient(180deg,#fffaf0,var(--paper));color:var(--ink);border-radius:4px;box-shadow:0 12px 20px #0006;rotate:var(--rot,-1.2deg);transition:rotate .3s,transform .3s;display:grid;gap:10px;align-content:start}
.note:nth-child(2n){--rot:1.4deg}.note:nth-child(3n){--rot:-.6deg}
.note:hover{rotate:0deg;transform:translateY(-6px) scale(1.02)}
.note::before{content:"";position:absolute;left:50%;top:10px;width:16px;height:16px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#ff9a9a,#c43c3c);box-shadow:0 3px 4px #0006}
.note .meta{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:800;color:var(--ink-soft)}
.note .tag{padding:2px 10px;border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:#2c256622;color:#2c2566}
.note .tag.update{background:#c47f1726;color:#8a5409}
.note .tag.event{background:#c43c3c22;color:#a12c2c}
.note h3{font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink)}
.note p{color:var(--ink-soft)}

.duo{grid-template-columns:1.1fr .9fr;align-items:stretch}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
.dl,.quest,.license,.community{display:grid;gap:14px;align-content:start}
.dl .btn{justify-self:start}
.req{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.req th,.req td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line-soft)}
.req thead th{color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.req tbody th{color:var(--muted);font-weight:700}
.quests{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:q}
.quests li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);counter-increment:q;cursor:pointer;transition:background .2s,border-color .2s}
.quests li::before{content:counter(q);grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-size:22px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));color:#3a2000}
.quests li.done{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.08)}
.quests li.done::before{content:"✓";background:linear-gradient(180deg,#a7f3d0,#22c55e)}
.quests li.done b{text-decoration:line-through;text-decoration-color:var(--ok)}
.quests b{color:var(--cream)}
.quests span{color:var(--muted);font-size:14px}

.license{background:linear-gradient(160deg,rgba(44,37,102,.92),rgba(21,23,62,.92));border:2px solid var(--line)}
.license::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(246,183,44,.3);border-radius:14px;pointer-events:none}
form{display:grid;gap:7px}
label{font-weight:900;font-size:14px;color:var(--cream)}
label small{color:var(--muted);font-weight:600}
input{font:inherit;color:var(--text);background:rgba(10,12,34,.75);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:6px;width:100%;transition:border-color .2s,box-shadow .2s}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,183,44,.18)}
input:user-invalid{border-color:var(--bad)}
.pw{height:6px;border-radius:9px;background:#0007;overflow:hidden;margin:-2px 0 8px}
.pw i{display:block;height:100%;width:0;border-radius:inherit;transition:width .3s,background .3s}
.check{display:flex;gap:10px;align-items:center;font-weight:700;margin-block:4px 10px}
.check input{width:18px;height:18px;margin:0;accent-color:var(--gold)}
form .btn{justify-self:start}
.form-msg{min-height:1.6em;font-weight:800}
.form-msg.ok{color:var(--ok)}.form-msg.err{color:var(--bad)}.form-msg.info{color:var(--gold-hi)}
.community{overflow:visible;padding-top:56px}
.community>p{color:var(--muted)}
.fox{position:absolute;right:22px;top:-58px;width:116px;border-radius:50%;border:4px solid var(--gold);background:var(--night-2);box-shadow:0 10px 20px #0007;cursor:pointer;transform-origin:50% 100%;transition:transform .3s}
.fox:hover,.fox.wave{animation:wave .9s ease-in-out}
@keyframes wave{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.social{display:grid;gap:10px}
.social a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);text-decoration:none;color:var(--cream);font-family:var(--display);font-size:19px;transition:transform .2s,border-color .2s}
.social a:hover{border-color:var(--gold);transform:translateX(4px)}
.social a span{color:var(--muted);font-family:var(--body);font-weight:700;font-size:14px}
.journal{margin-top:8px;padding:16px;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid var(--line-soft)}
.journal h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold-hi);margin-bottom:10px}
.journal ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.journal li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.journal li i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;background:#ffffff0d;filter:grayscale(1);opacity:.5}
.journal li.got{color:var(--cream)}
.journal li.got i{filter:none;opacity:1;background:rgba(246,183,44,.18)}
.journal li b{display:block;font-size:14px}

.rules{margin:0;padding-left:22px;display:grid;gap:10px;max-width:72ch}
.rules li::marker{color:var(--gold);font-family:var(--display)}

.foot{position:relative;margin-top:140px;background:linear-gradient(180deg,#d9cdf5 0,#b6a6e6 60px,#14163f 61px,#0a0b1f 100%);padding:120px var(--gut) calc(30px + env(safe-area-inset-bottom,0px))}
.foot-clouds{position:absolute;left:-5%;right:-5%;top:-70px;height:140px;pointer-events:none}
.foot-clouds i{position:absolute;bottom:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,#f4ecff,#d9cdf5 70%)}
.foot-clouds i:nth-child(1){left:0;width:30%;height:130px}.foot-clouds i:nth-child(2){left:22%;width:26%;height:100px}.foot-clouds i:nth-child(3){left:42%;width:30%;height:140px}.foot-clouds i:nth-child(4){left:66%;width:24%;height:110px}.foot-clouds i:nth-child(5){left:80%;width:28%;height:130px}
.foot-grid{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.foot-brand img{width:190px}
.foot-brand p{margin-top:10px;font-family:var(--fantasy);font-size:12px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.foot h4{font-family:var(--display);font-weight:400;font-size:19px;color:var(--gold-hi);margin-bottom:10px}
.foot-grid a{display:block;color:var(--muted);text-decoration:none;padding:4px 0}
.foot-grid a:hover{color:var(--gold-hi)}
.legal{max-width:var(--max);margin:34px auto 0;font-size:13px;color:#7c7aa8}

.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:grid;gap:10px;justify-items:end;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;background:linear-gradient(180deg,#2c2566,#1a1a4a);border:2px solid var(--gold);box-shadow:0 14px 30px #0008,0 0 24px rgba(246,183,44,.25);color:var(--cream);animation:tin .5s cubic-bezier(.3,1.6,.5,1) both;max-width:min(360px,calc(100vw - 32px))}
.toast.out{animation:tout .4s ease-in both}
.toast .ti{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:24px;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-deep))}
.toast b{display:block;font-family:var(--display);font-weight:400;font-size:18px;color:var(--gold-hi);line-height:1.1}
.toast span{font-size:13px;color:var(--muted)}
@keyframes tin{from{transform:translateX(120%) scale(.8);opacity:0}}
@keyframes tout{to{transform:translateX(120%);opacity:0}}

.page{max-width:780px;margin:0 auto;padding:48px var(--gut) 0;display:grid;gap:16px}
.page h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,50px);color:var(--gold-hi)}
.page h2{font-family:var(--display);font-weight:400;font-size:24px;margin-top:14px;color:var(--gold)}
.page p,.page li{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal.pre{transform:none;opacity:1}
}