:root{--bg:#021623;--deep:#04243a;--c:#3ff2d0;--coral:#ff6b3d;--gold:#ffd23f;--pearl:#f4f1ff;--ink:#e9fbff;--dim:#8fb7c7;--h:'Lilita One',system-ui,sans-serif;--t:'Nunito',system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--t);overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
#app{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100vh*.5625));height:100vh;width:min(100vw,calc(100dvh*.5625));height:100dvh;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#0b5a7a,#04243a 55%,#021623)}
@media (min-aspect-ratio:9/16){#app{box-shadow:0 0 80px rgba(63,242,208,.12)}}
#cv3,#ov{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#ov{pointer-events:none}
.hide{display:none!important}
/* HUD */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none;z-index:3}
.hrow{display:flex;align-items:center;gap:10px}
#h-time{font:24px var(--h);letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.35);min-width:92px;font-variant-numeric:tabular-nums}
#h-pearl{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font:24px var(--h);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pearl{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e6dcff 35%,#b3a6e8 70%,#7d6fc2);box-shadow:0 0 10px rgba(230,220,255,.7)}
#b-pause{pointer-events:auto;width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.28);font:800 16px var(--t);letter-spacing:-2px}
.glassbar,.rage{display:flex;align-items:center;gap:8px;margin-top:8px;font:800 11px var(--t);letter-spacing:.12em;color:var(--dim)}
.glassbar span,.rage span{width:44px}
.gb,.rb,.eb{flex:1;height:10px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.gb i,.rb i,.eb i{display:block;height:100%;width:0;border-radius:99px;transition:width .12s}
.gb i{background:linear-gradient(90deg,#bfefff,#fff)}#h-glassp{min-width:46px;text-align:right;color:var(--ink);font:15px var(--h);letter-spacing:.02em}
.rb i{background:linear-gradient(90deg,#ff6b3d,#ffd23f)}.rage.full .rb i{animation:fury .3s infinite alternate}
@keyframes fury{to{filter:brightness(1.6)}}
.energy{position:absolute;left:12px;right:12px;bottom:calc(-100dvh + 18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px}
#hud .energy{top:auto;bottom:auto;position:fixed;left:auto;right:auto;width:calc(min(100vw,100dvh*.5625) - 24px);margin-left:0;bottom:calc(16px + env(safe-area-inset-bottom))}
.eb{height:16px}.eb i{background:linear-gradient(90deg,#3ff2d0,#9dffb0)}.energy.low .eb i{background:linear-gradient(90deg,#ff3d6b,#ff8a3d);animation:fury .25s infinite alternate}
#h-en{font:800 12px var(--t);letter-spacing:.12em;color:var(--ink);min-width:64px;text-align:right}
#toast{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:4;font:28px var(--h);text-align:center;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 20px rgba(63,242,208,.6);pointer-events:none;white-space:nowrap}
/* 화면들 */
.screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));text-align:center}
#title{justify-content:flex-end;background:linear-gradient(180deg,rgba(2,22,35,0) 30%,rgba(2,22,35,.55) 70%,rgba(2,22,35,.85))}
.tlogo{margin-bottom:auto;margin-top:6vh}
.tlogo small{display:block;font:900 11px var(--t);letter-spacing:.32em;color:var(--c);opacity:.9}
.tlogo h1{margin:8px 0 6px;font:clamp(52px,15vw,76px)/.86 var(--h);letter-spacing:.01em;color:#fff;text-shadow:0 5px 0 #0a3a52,0 10px 28px rgba(0,0,0,.45)}
.tlogo h1 em{font-style:normal;color:var(--coral);text-shadow:0 5px 0 #7a2410,0 10px 28px rgba(0,0,0,.45)}
.usp{margin:10px 0 0;font:800 16px/1.3 var(--t);color:var(--ink);text-shadow:0 2px 6px rgba(0,0,0,.5)}
#t-best{min-height:20px;font:800 14px var(--t);color:var(--gold);text-shadow:0 2px 4px rgba(0,0,0,.5)}
.cta{width:min(100%,320px);padding:16px 0;border-radius:18px;font:30px var(--h);letter-spacing:.04em;color:#fff;background:linear-gradient(180deg,#ff8a5c,#ff5a2b);box-shadow:0 6px 0 #a8341a,0 12px 30px rgba(255,90,43,.4);text-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .08s}
.cta:active,.cta.kf{transform:translateY(3px);box-shadow:0 3px 0 #a8341a}
.ghost{width:min(100%,320px);padding:12px 0;border-radius:14px;font:900 14px var(--t);letter-spacing:.1em;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.ghost:active,.ghost.kf{background:rgba(63,242,208,.3)}
.row2{display:flex;gap:10px;width:min(100%,320px)}.row2 .ghost{flex:1}
.ver{margin:2px 0 0;font:700 12px var(--t);color:#7fa3b3}.ver button{color:#bdf7ec;text-decoration:underline;text-underline-offset:2px}.ver button.kf{color:#fff}
.more{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;gap:7px;padding:8px 12px 8px 9px;border-radius:14px;background:rgba(4,36,58,.6);box-shadow:inset 0 0 0 1.5px rgba(63,242,208,.55);font:900 11px var(--t);letter-spacing:.1em;color:#bdf7ec;backdrop-filter:blur(4px)}
.more canvas{width:22px;height:22px;image-rendering:pixelated}.more.kf{background:rgba(63,242,208,.35)}
/* 상점 */
#shop{justify-content:flex-start;background:rgba(2,22,35,.82);backdrop-filter:blur(3px);gap:10px;overflow-y:auto;touch-action:pan-y}
.shead h2,#result h2,#pause h2{margin:6px 0 2px;font:34px var(--h);color:#fff;text-shadow:0 4px 0 #0a3a52}
#s-sum{font:800 13px var(--t);color:var(--dim);line-height:1.4}
.spearl{display:flex;align-items:center;gap:8px;font:30px var(--h)}.spearl span{font:800 13px var(--t);color:var(--dim)}.spearl .pearl{width:24px;height:24px}
#s-ups{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.up{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 10px 9px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);text-align:left;min-height:86px}
.up .ic{font-size:20px;line-height:1}.up .nm{font:17px var(--h);letter-spacing:.02em;color:#fff}.up .ds{font:700 11.5px/1.25 var(--t);color:var(--dim)}
.up .lv{position:absolute;right:9px;top:9px;font:900 11px var(--t);color:var(--c)}
.up .cs{margin-top:auto;display:flex;align-items:center;gap:5px;font:16px var(--h);color:var(--gold)}.up .cs .pearl{width:13px;height:13px}
.up.can{background:rgba(63,242,208,.16);box-shadow:inset 0 0 0 2px rgba(63,242,208,.7)}.up.can:active{transform:scale(.97)}
.up.no{opacity:.55}.up.max .cs{color:var(--c)}
.up.pop{animation:pop .25s}@keyframes pop{50%{transform:scale(1.06);filter:brightness(1.5)}}
.hint{margin:0;font:700 12.5px var(--t);color:var(--dim)}
/* 결과 */
#result{background:rgba(2,22,35,.78)}
.rtime{font:64px var(--h);color:var(--gold);text-shadow:0 5px 0 #7a5a10,0 0 30px rgba(255,210,63,.5);font-variant-numeric:tabular-nums}
.rrank{font:800 16px var(--t);color:#fff;min-height:22px}
.namebox{display:flex;gap:8px;width:min(100%,320px)}.namebox input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:1.5px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;font:800 17px var(--t);-webkit-user-select:text;user-select:text}
.namebox button{padding:0 16px;border-radius:12px;background:var(--c);color:#03303a;font:900 14px var(--t)}
#r-msg{min-height:18px;font:700 13px var(--t);color:var(--c)}
#pause{background:rgba(2,22,35,.8)}
/* 패널 */
.panel{position:absolute;left:12px;right:12px;top:6%;max-height:88%;z-index:8;overflow-y:auto;touch-action:pan-y;padding:18px 16px 16px;border-radius:20px;background:rgba(3,25,40,.96);box-shadow:inset 0 0 0 1.5px rgba(63,242,208,.4),0 20px 60px rgba(0,0,0,.6)}
.panel h3{margin:0 0 12px;text-align:center;font:24px var(--h);letter-spacing:.04em;color:#fff}
.panel h4{margin:16px 0 6px;font:16px var(--h);letter-spacing:.06em;color:var(--c)}
.panel ul{padding-left:18px;margin:0;font:700 14.5px/1.45 var(--t)}.panel li{margin:6px 0}.panel li b{color:var(--gold)}
#about{margin-top:14px;font:600 13px/1.5 var(--t);color:#b7d4df}#about h2{font:16px var(--h);color:#fff;margin:6px 0}
.links,.credit{text-align:center;font:700 13px var(--t);margin:10px 0 0}.links a,.credit a{color:#bdf7ec}
.panel .ghost{display:block;margin:14px auto 0}
.tabs{display:flex;gap:6px;margin-bottom:10px}.tabs button{flex:1;padding:8px 0;border-radius:10px;font:900 11.5px var(--t);letter-spacing:.06em;background:rgba(255,255,255,.08)}.tabs button.on{background:var(--c);color:#03303a}
.rrow{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08);font:800 14px var(--t)}
.rrow .n{font:16px var(--h);color:var(--dim);text-align:center}.rrow .s{font:17px var(--h);color:var(--gold);font-variant-numeric:tabular-nums}.rrow .s.p{color:#bfefff;font-size:15px}
.rrow.me{background:rgba(63,242,208,.15);border-radius:10px}.rrow.t1 .n{color:#ffd23f}.rrow.t2 .n{color:#dfe7ee}.rrow.t3 .n{color:#e5975c}
.rsec{margin:12px 0 4px;font:900 11px var(--t);letter-spacing:.16em;color:var(--dim)}
#rank-me{margin-top:8px;text-align:center;font:800 13px var(--t);color:var(--c)}
.none{padding:16px;text-align:center;color:var(--dim);font:700 13px var(--t)}
#patch-list .pv{font:16px var(--h);color:var(--c)}#patch-list small{margin-left:8px;color:var(--dim);font:700 12px var(--t)}#patch-list ul{margin:4px 0 12px}
.setrow{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;font:800 15px var(--t);border-bottom:1px solid rgba(255,255,255,.1)}
.tog{min-width:64px;padding:7px 12px;border-radius:999px;font:900 13px var(--t);letter-spacing:.06em;color:#03303a;background:var(--c)}.tog.off{background:rgba(255,255,255,.15);color:#9aa6b8}
.gtx{margin:0 0 8px;font:700 13px/1.4 var(--t);color:#b7d4df}
.glink{display:flex;gap:6px}.glink input{flex:1;min-width:0;padding:10px;border-radius:10px;border:1.5px solid rgba(63,242,208,.4);background:rgba(255,255,255,.06);color:#bdf7ec;font:900 14px var(--t);letter-spacing:.08em;text-align:center;-webkit-user-select:text;user-select:text}
#rc-in{text-transform:uppercase}
.glink button{padding:0 14px;border-radius:10px;background:var(--gold);color:#3a2a00;font:900 13px var(--t);letter-spacing:.06em}
#rc-msg{min-height:20px;margin-top:6px;text-align:center;font:800 13px var(--t)}#rc-msg.ok{color:#5dff9e}#rc-msg.err{color:#ff6b6b}
#fps{position:absolute;left:6px;bottom:4px;z-index:9;font:700 11px monospace;color:#9f9;pointer-events:none}

/* ───── v2 HUD (3D 개편) ───── */
#hud{background:linear-gradient(180deg,rgba(2,22,35,.55),rgba(2,22,35,0));padding-bottom:14px}
#h-time{font:22px var(--h);color:#fff;opacity:.92}
#h-pearl b{font:30px var(--h);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 18px rgba(220,210,255,.5);transition:transform .08s}
#h-pearl.pop b{transform:scale(1.18)}
#b-pause{display:grid;place-items:center;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}#b-pause svg{width:20px;height:20px;fill:#fff}
.lbl{width:44px;font:900 10.5px var(--t);letter-spacing:.14em;color:#a9d6e2}
.glassrow,.furyrow{display:flex;align-items:center;gap:8px;margin-top:9px}
#h-layers{flex:1;display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
#h-layers i{height:11px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#h-layers i.done{background:linear-gradient(180deg,#e9fdff,#9fe9ff);box-shadow:0 0 8px rgba(160,240,255,.8)}
#h-layers i b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#bff3ff,#fff);width:0}
#h-layer{min-width:40px;text-align:right;font:15px var(--h);color:#fff}
.rb{height:9px}
#h-combo{position:fixed;left:50%;transform:translateX(-50%);top:calc(150px + env(safe-area-inset-top));text-align:center;line-height:.9;pointer-events:none}
#h-combo b{display:block;font:44px var(--h);color:var(--gold);text-shadow:0 4px 0 #7a4a00,0 0 26px rgba(255,190,40,.7)}
#h-combo span{font:900 11px var(--t);letter-spacing:.3em;color:#ffe9a6}
#h-combo.big b{color:#ff8a3d;text-shadow:0 4px 0 #7a2410,0 0 30px rgba(255,120,40,.9)}
.energy svg{width:22px;height:22px;fill:#9dffb0;filter:drop-shadow(0 0 6px rgba(120,255,170,.6))}
.eb{height:14px;border-radius:99px}
#h-en{min-width:34px;font:18px var(--h);color:#fff}
/* ───── 스킬 트리 ───── */
#shop{gap:6px;padding-top:calc(14px + env(safe-area-inset-top))}
.shead h2{font-size:28px;margin:0}
#s-sum{font-size:12.5px}
.spearl b{font-size:34px}
#tree{position:relative;width:100%;flex:1;min-height:360px;max-height:64vh}
#tree-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#tree-lines line{stroke:rgba(255,255,255,.14);stroke-width:3;stroke-linecap:round}#tree-lines line.on{stroke:rgba(63,242,208,.7)}
.node{position:absolute;transform:translate(-50%,-50%);width:50px;display:flex;flex-direction:column;align-items:center;gap:2px}
.node .ci{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#1c5a74,#0b2e44);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 4px 10px rgba(0,0,0,.4);transition:transform .08s}
.node .ci svg{width:22px;height:22px;fill:#d7f6ff}
.node .lv{position:absolute;right:-6px;top:-4px;min-width:22px;padding:1px 5px;border-radius:99px;background:#0b2e44;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);font:900 10.5px var(--t);color:#fff}
.node .cs{display:flex;align-items:center;gap:3px;font:13px var(--h);color:var(--gold);white-space:nowrap}.node .cs .pearl{width:10px;height:10px}
.node.lock{opacity:.35}.node.lock .ci svg{fill:#7aa}
.node.can .ci{background:radial-gradient(circle at 35% 30%,#2fd6b8,#0f6e66);box-shadow:inset 0 0 0 2px #7fffe6,0 0 18px rgba(63,242,208,.65);animation:breathe 1.2s infinite}
@keyframes breathe{50%{box-shadow:inset 0 0 0 2px #b9fff1,0 0 26px rgba(63,242,208,.9)}}
.node.max .ci{background:radial-gradient(circle at 35% 30%,#ffe27a,#b9820d);box-shadow:inset 0 0 0 2px #fff3b0,0 0 14px rgba(255,210,63,.6)}.node.max .ci svg{fill:#4a3000}.node.max .cs{color:#ffe27a}
.node.sel .ci{transform:scale(1.12)}.node.pop .ci{animation:npop .3s}@keyframes npop{40%{transform:scale(1.3);filter:brightness(1.8)}}
#s-info{width:100%;min-height:52px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.07);text-align:left;display:flex;flex-direction:column;gap:1px}
#i-name{font:18px var(--h);color:#fff}#i-desc{font:700 12.5px var(--t);color:#b7d4df}#i-next{font:800 12px var(--t);color:var(--c)}

/* 3D 화면 가장자리 어둡게(깊은 물) */
#app::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(1,18,30,.55) 100%)}