/* Layout: a full-bleed night-forest canvas; HUD pinned to the top edge, floating joystick wherever the thumb lands, and card-style modals for level-ups, chests and results */
:root{
  --night:#0b0f1f; --ink:#fff6e3; --muted:#a9b0cf; --gold:#ffcf6b; --ember:#ff8a3d; --spirit:#6ff0e0; --danger:#ff4d6d;
  --panel:#151b34; --panel-2:#1d2547; --edge:rgba(255,207,107,.28);
  --f-cn:"PingFang SC","Microsoft YaHei",sans-serif;
  --f-num:"Arial Black",Impact,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--night);color:var(--ink);font:15px/1.45 var(--f-cn);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* HUD */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 0;pointer-events:none;display:flex;flex-direction:column;gap:6px;z-index:5}
.xpbar{position:relative;height:16px;border-radius:9px;background:rgba(5,8,20,.75);border:1.5px solid rgba(111,240,224,.45);overflow:hidden}
.xpbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#34c6d9,#6ff0e0 70%,#d2fff8);box-shadow:0 0 12px rgba(111,240,224,.8);transition:width .12s}
.xpbar b{position:absolute;inset:0;display:grid;place-items:center;font:400 12px/1 var(--f-num);letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px #000}
.hud-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stat{display:flex;align-items:center;gap:5px;font:400 17px/1 var(--f-num);text-shadow:0 2px 0 rgba(0,0,0,.5);min-width:72px}
.stat svg{width:18px;height:18px}
.stat.r{justify-content:flex-end}
.timer{font:400 30px/1 var(--f-num);letter-spacing:.04em;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(255,207,107,.35)}
.slots{display:flex;flex-wrap:wrap;gap:4px;max-width:260px}
.slot{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(5,8,20,.7);border:1px solid rgba(255,255,255,.12);position:relative}
.slot svg{width:17px;height:17px}
.slot small{position:absolute;right:-2px;bottom:-4px;font:400 9px/1 var(--f-num);color:var(--gold);text-shadow:0 1px 1px #000}
.slot.evo{border-color:var(--gold);box-shadow:0 0 8px rgba(255,207,107,.6)}
.bossbar{position:relative;height:14px;border-radius:7px;background:rgba(40,0,10,.75);border:1.5px solid rgba(255,77,109,.6);overflow:hidden;margin-top:2px}
.bossbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff2e55,#ff8a3d);width:100%}
.bossbar span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.2em;text-shadow:0 1px 2px #000}
.pausebtn{pointer-events:auto;position:fixed;right:16px;top:calc(env(safe-area-inset-top,0px) + 62px);width:38px;height:38px;border-radius:12px;background:rgba(5,8,20,.7);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;z-index:6}
.pausebtn svg{width:16px;height:16px;fill:var(--ink)}
#joy{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,.02));pointer-events:none;z-index:4}
#joyKnob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff3cf,#ffcf6b 60%,#c98a2a);box-shadow:0 0 18px rgba(255,207,107,.6)}
#banner{position:fixed;left:0;right:0;top:34%;text-align:center;pointer-events:none;z-index:7;opacity:0;transition:opacity .3s}
#banner.show{opacity:1}
#banner b{display:inline-block;padding:10px 26px;font:400 30px/1.2 var(--f-cn);letter-spacing:.12em;background:linear-gradient(90deg,transparent,rgba(120,10,30,.85),transparent);color:#ffd9de;text-shadow:0 0 18px rgba(255,77,109,.8)}
#banner small{display:block;margin-top:6px;font-size:14px;color:var(--muted)}

/* screens & modals */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 20px) 16px calc(env(safe-area-inset-bottom,0px) + 20px);touch-action:pan-y}
.menu{gap:16px;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(11,15,31,0) 0%,rgba(11,15,31,.55) 70%)}
.logo{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.logo h1{margin:0;font:400 clamp(54px,15vw,92px)/1 var(--f-cn);letter-spacing:.06em;color:var(--gold);text-shadow:0 0 28px rgba(255,170,60,.65),0 5px 0 #7a3d10}
.logo p{margin:0;font:400 14px/1.4 var(--f-num);letter-spacing:.42em;color:#ffd99a;padding-left:.42em}
.logo span{color:var(--muted);font-size:13.5px;max-width:24em;margin-top:8px}
.chars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,460px)}
.char{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:16px;background:rgba(21,27,52,.85);border:2px solid transparent;min-width:0}
.char img{width:56px;height:70px;object-fit:contain;image-rendering:auto}
.char b{font-weight:400;font-size:15px}
.char small{font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.char.on{border-color:var(--gold);background:rgba(60,44,20,.85);box-shadow:0 0 18px rgba(255,207,107,.3)}
.cta{width:min(100%,460px);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{height:50px;border-radius:16px;font:400 18px/1 var(--f-cn);letter-spacing:.08em;background:var(--panel-2);border:1.5px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn.go{grid-column:1/-1;height:60px;font-size:24px;background:linear-gradient(180deg,#ffdf8f,#ffb43c 55%,#e68a1c);color:#3b1d02;border-color:#ffe6a8;box-shadow:0 5px 0 #8a4a0c,0 0 30px rgba(255,180,60,.35)}
.btn.sm{height:40px;font-size:15px;border-radius:12px}
.btn svg{width:18px;height:18px}
.btn:disabled{opacity:.45;cursor:default}
.wallet{display:flex;gap:14px;align-items:center;justify-content:center;font:400 16px/1 var(--f-num);color:#ffe3a3}
.wallet span{display:flex;align-items:center;gap:5px}
.wallet svg{width:18px;height:18px}
.hint{color:var(--muted);font-size:12.5px;text-align:center;max-width:30em}
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:rgba(4,6,14,.72);backdrop-filter:blur(3px);touch-action:pan-y}
.box{width:min(100%,440px);max-height:100%;overflow-y:auto;border-radius:22px;padding:20px 16px 16px;background:linear-gradient(180deg,#1b2346,#111733);border:2px solid var(--edge);box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px}
.box h2{margin:0;text-align:center;font:400 28px/1.2 var(--f-cn);letter-spacing:.1em;color:var(--gold);text-shadow:0 0 18px rgba(255,180,60,.5)}
.box .sub{text-align:center;color:var(--muted);font-size:13px;margin-top:-6px}
.cards{display:flex;flex-direction:column;gap:10px}
.card{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:16px;background:var(--panel-2);border:2px solid rgba(255,255,255,.08);animation:pop .35s cubic-bezier(.2,1.4,.4,1) both}
.card:nth-child(2){animation-delay:.06s}.card:nth-child(3){animation-delay:.12s}.card:nth-child(4){animation-delay:.18s}
@keyframes pop{from{transform:scale(.85) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.card:hover,.card:focus-visible{border-color:var(--gold)}
.card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.14),rgba(0,0,0,.2));border:1.5px solid rgba(255,255,255,.12)}
.card .ic svg{width:32px;height:32px}
.card b{display:flex;align-items:center;gap:8px;font-weight:400;font-size:18px}
.card b em{font-style:normal;font:400 11px/1 var(--f-num);padding:3px 6px;border-radius:6px;background:var(--gold);color:#3b1d02;letter-spacing:.04em}
.card b em.new{background:var(--spirit);color:#053a35}
.card b em.evo{background:var(--danger);color:#fff}
.card p{margin:2px 0 0;font-size:13px;color:#d3d8f0;line-height:1.45}
.pips{display:flex;gap:3px;margin-top:5px}
.pips i{width:12px;height:5px;border-radius:3px;background:rgba(255,255,255,.15)}
.pips i.on{background:var(--gold)}
.pips i.nx{background:var(--spirit);animation:blink .8s infinite}
@keyframes blink{50%{opacity:.35}}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.row .btn{flex:1;min-width:120px}
.chest{display:flex;flex-direction:column;align-items:center;gap:10px}
.chest .lid{width:96px;height:80px;position:relative;animation:shake .5s ease-in-out 2}
.chest svg.big{width:96px;height:80px}
@keyframes shake{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.rew{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--panel-2);width:100%;animation:pop .4s both}
.rew svg{width:26px;height:26px;flex:none}
.rew b{font-weight:400}
.rew span{margin-left:auto;font:400 13px/1 var(--f-num);color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stats div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:12px;background:var(--panel-2)}
.stats span{font-size:11.5px;color:var(--muted)}
.stats strong{font:400 20px/1 var(--f-num);font-variant-numeric:tabular-nums}
.dmg{display:flex;flex-direction:column;gap:6px}
.dmg div{display:grid;grid-template-columns:22px 5.5em 1fr auto;gap:8px;align-items:center;font-size:13px}
.dmg svg{width:20px;height:20px}
.dmg i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--ember),var(--gold))}
.dmg small{font:400 12px/1 var(--f-num);color:#ffe3a3;font-variant-numeric:tabular-nums}
.shop{display:flex;flex-direction:column;gap:8px}
.shop .it{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--panel-2)}
.shop .it .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(0,0,0,.25)}
.shop .it .ic svg{width:24px;height:24px}
.shop .it b{font-weight:400;font-size:15px}
.shop .it p{margin:0;font-size:12px;color:var(--muted)}
.shop .it .btn{height:36px;font-size:13px;padding:0 10px;border-radius:10px;font-family:var(--f-num);letter-spacing:.02em}
.rank{display:flex;flex-direction:column;gap:6px}
.rank div{display:grid;grid-template-columns:2em 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel-2);font-size:14px}
.rank div.me{border:1.5px solid var(--gold)}
.rank em{font-style:normal;font:400 16px/1 var(--f-num);color:var(--gold);text-align:center}
.rank span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank small{font:400 14px/1 var(--f-num);font-variant-numeric:tabular-nums}
.rank small.k{color:var(--muted);font-size:12px}
.toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:14px;background:var(--panel-2)}
.toggle input{width:20px;height:20px;accent-color:#ffcf6b}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.menu{justify-content:flex-start;gap:14px}
.menu .logo{margin-top:auto;flex-shrink:0}
.menu>.hint:last-child{margin-bottom:auto;padding-bottom:4px}
.menu>*{flex-shrink:0}
.demo-nav{display:flex;align-items:center;justify-content:space-between;width:min(100%,460px);font-size:13px;gap:12px}
.demo-nav a,.demo-return{color:var(--gold);text-decoration:none}
.demo-nav span{color:var(--muted);font-size:12px}
.demo-note{font-family:var(--f-cn);color:var(--muted);font-size:11px;line-height:1.65;margin:0;text-align:center;max-width:460px}
.demo-note a{color:inherit}
.demo-return{font-size:13px;text-align:center;padding:8px}
#demo-access{touch-action:pan-y}
@media(max-height:740px){.menu{gap:10px}.logo h1{font-size:clamp(42px,12vw,68px)}.logo span{font-size:12px}.char{padding:7px 4px}.char img{height:55px}.btn.go{height:50px}.hint{margin:2px 0}}