:root{--gold:#f8d67c;--cream:#fff0bf;--ink:#0c1c35;--panel:rgba(6,20,38,.91);--accent:#ffd67a;--blue:#91d6ff}*{box-sizing:border-box}html,body{margin:0;background:#050d19;color:#fff;font-family:system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;height:100%;overflow:hidden;touch-action:none}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#viewport{position:fixed;inset:0;display:block;overflow:hidden;background:radial-gradient(ellipse at center,#1b3256,#050910 80%)}#app{width:1280px;height:720px;position:absolute;left:0;top:0;transform-origin:top left;overflow:hidden;background:#0c1929;border-radius:5px;box-shadow:0 0 80px #000b}#world{position:absolute;inset:0;width:1280px;height:720px;touch-action:none}#overlay{position:absolute;inset:0;pointer-events:none}#overlay>*{pointer-events:auto}.scene{position:absolute;inset:0;display:flex}.dim{background:linear-gradient(90deg,rgba(4,17,35,.72),rgba(2,10,28,.08) 48%,rgba(2,12,27,.55))}.full-dim{background:#041026b8;backdrop-filter:blur(6px)}.titlefont{font-family:Georgia,'Noto Serif KR','Malgun Gothic',serif;font-weight:900;letter-spacing:-2px;text-shadow:0 4px 2px #442018,0 0 24px #edb94a66}.logo{font-size:75px;color:#fff3bb;line-height:1.25;text-shadow:0 5px 0 #9c4d1d,0 9px 20px #000,0 0 18px #ffdd6a}.eyebrow{color:#d7ecff;letter-spacing:4px;font-weight:850;font-size:13px}.panel{background:linear-gradient(145deg,rgba(18,42,70,.96),rgba(4,14,32,.96));border:2px solid #eac67785;border-radius:20px;box-shadow:0 15px 45px #000a,inset 0 2px #ffffff14;padding:22px}.panel h2,.panel h3{margin:0;color:var(--gold)}.glow{filter:drop-shadow(0 0 14px #ffb64090)}.goldbtn{background:linear-gradient(#fff8c6 0%,#ffd66b 28%,#ffa62e 70%,#e88512 100%);border:3px solid #fff0ab;color:#4c2607;text-shadow:0 1px #fff7;border-radius:19px;box-shadow:0 6px 0 #864b19,0 13px 25px #0009,0 0 24px #ffb72b7c;font-weight:950}.bluebtn{background:linear-gradient(#3a678e,#102b4d);border:2px solid #a3d5ff;color:#e8f9ff;border-radius:13px;font-weight:850}.redbtn{background:linear-gradient(#ac3e54,#54172b);border:2px solid #f18b89;color:white;border-radius:13px;font-weight:800}.goldbtn,.bluebtn,.redbtn{transition:transform .1s,filter .1s}.goldbtn:active,.bluebtn:active,.redbtn:active{transform:translateY(3px);filter:brightness(.9)}.screen-header{position:absolute;left:42px;top:28px;font-size:36px;font-weight:950;color:#ffe8ab;text-shadow:0 3px 5px #000}.back{position:absolute;left:38px;top:30px;padding:12px 23px;font-weight:800;font-size:21px}.center{text-align:center}.muted{color:#b9d0e4}.sticker{padding:8px 16px;border-radius:99px;background:#073355c9;border:1px solid #b8dfff99;font-size:14px}.tag{display:inline-block;padding:5px 11px;background:#0e4063;border:1px solid #7bc8fe;border-radius:10px;color:#ccecff;font-weight:800}.listitem{display:flex;gap:14px;align-items:center;border-bottom:1px solid #ffffff24;padding:12px 6px}.rank{width:33px;height:33px;display:grid;place-items:center;background:#a96c33;color:#fff6c9;border-radius:9px;font-weight:950}.class-card{width:273px;height:425px;padding:14px;border:2px solid #7598b080;border-radius:19px;background:linear-gradient(#1f3549d9,#061025ec);text-align:center;cursor:pointer;transition:border-color .12s,transform .12s}.class-card.active{border:4px solid #ffdb7a;transform:translateY(-7px);box-shadow:0 0 32px #ffae3b66}.class-card img{width:245px;height:260px;object-fit:contain;filter:drop-shadow(0 12px 14px #000)}.class-card h3{font-size:28px;color:var(--gold);margin:4px}.class-card p{font-size:17px;color:#d8e6ef}.thumb{width:86px;height:86px;border:2px solid #7ea5bf80;border-radius:14px;background:#081a2f;display:grid;place-items:center;font-size:36px;cursor:pointer;overflow:hidden}.thumb.active{border:3px solid #ffe583;box-shadow:0 0 18px #ffbd4c99}.choice{width:320px;height:388px;background:linear-gradient(160deg,#213555,#08162e);border:3px solid #9aadc5;border-radius:23px;padding:25px;text-align:center;box-shadow:0 15px 40px #0007}.choice.rare{border-color:#ad8cff}.choice.legend{border-color:#ffcc60}.choice .symbol{font-size:87px;margin:20px 0;filter:drop-shadow(0 5px 15px #ffe68a66)}.choice h3{font-size:28px;color:#ffe4a1}.choice p{font-size:18px;color:#c8e2ef;min-height:57px}.hud{position:absolute;inset:0;pointer-events:none}.hud button{pointer-events:auto}.bar{height:19px;background:#1e2232;border:1px solid #667a8a;border-radius:6px;overflow:hidden;position:relative}.bar i{display:block;height:100%;transition:width .15s}.hud-l{position:absolute;top:11px;left:12px;width:342px;padding:12px 15px;border-radius:16px;background:#071426d9;border:1px solid #ffdd8766}.hud-r{position:absolute;top:10px;right:12px;width:289px;padding:11px 14px;border-radius:16px;background:#071426dd;border:1px solid #90b9cd75;font-size:18px}.skill-chip{display:inline-block;min-width:46px;padding:9px;border-radius:11px;background:#0d284f;border:1px solid #ffc5667a;font-size:23px;text-align:center;box-shadow:inset 0 0 10px #ff9c261c}.bossbar{position:absolute;top:11px;left:430px;width:420px;background:#150a22ef;padding:10px 14px;border:2px solid #f5c074;border-radius:12px}.bossbar .bar{height:15px}.bottom-controls{position:absolute;inset:0;pointer-events:none}.stick{position:absolute;bottom:25px;left:27px;width:162px;height:162px;border-radius:50%;border:3px solid #c4e0ff99;background:#092b5266;display:grid;place-items:center;color:#f5fbff;font-weight:800;font-size:18px;pointer-events:auto;touch-action:none}.stick-knob{width:71px;height:71px;background:#90b7db9c;border-radius:50%;border:2px solid #e8faffb0;display:grid;place-items:center;font-size:18px}.jump{position:absolute;right:34px;bottom:45px;width:121px;height:121px;border-radius:50%;pointer-events:auto;background:#0d315d9a;border:4px solid #e9f8ffe0;color:#f4ffff;font-size:43px}.pause{border-radius:13px;padding:5px 12px;background:#153f66;color:#fff;border:2px solid #9cbdcf;font-size:27px}.tab{padding:11px 17px;background:#0a294b;color:#e2f3ff;border:1px solid #7298b0;border-radius:11px;font-weight:800}.tab.active{background:linear-gradient(#ffed9d,#ffba48);color:#593012;border:1px solid white}.swatch{width:43px;height:43px;border-radius:50%;border:3px solid #eeeeee66;cursor:pointer}.swatch.active{outline:3px solid #ffdd73}.help{position:absolute;bottom:8px;width:100%;text-align:center;color:#cee0f3;font-size:14px;pointer-events:none}.toast{position:absolute;top:165px;left:50%;transform:translateX(-50%);background:#081b39e8;border:2px solid #ffda86;border-radius:14px;padding:14px 28px;color:#ffe4a0;font-size:21px;font-weight:900;opacity:0;pointer-events:none;transition:opacity .25s}#toast.show{opacity:1}#rotate{display:none;position:absolute;inset:0;background:#091932;color:#ffe5a1;z-index:90;flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center}.turn{font-size:75px}#rotate button{border:1px solid #a4c6ff;background:#132b4c;color:white;padding:12px 22px;border-radius:13px}#rotate strong{font-size:24px}#rotate span{font-size:15px;color:#c4d9ec}@media (orientation:portrait) and (max-width:850px){body:not(.rotation-dismissed) #rotate{display:flex}}:focus-visible{outline:4px solid #fff188}#overlay input{background:#07172c;border:2px solid #799bb1;border-radius:12px;color:white;padding:12px 15px;font-size:21px;outline:0}#overlay input:focus{border-color:#ffd56c}