@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#e9e5dc;background:#0a101c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#284052 0,#111c29 35%,#090e19 80%)}button{font:inherit;cursor:pointer}.shell{max-width:1440px;margin:auto;padding:0 28px}.topbar{height:83px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#f3e2c0;font-weight:800;letter-spacing:.09em;font-size:20px}.brand-mark{font-size:30px;color:#e8ae78}.brand small{display:block;color:#728496;font-size:8px;letter-spacing:.35em;margin-top:1px}.chapter{font-size:11px;letter-spacing:.23em;color:#9aa9ae;font-weight:700}.chapter span{color:#d59c78;margin:0 10px}.icon-button{background:#172637;border:1px solid #334859;border-radius:9px;color:#d3e1de;padding:9px 13px;font-size:16px}.icon-button span{font-size:9px;letter-spacing:.16em;margin-left:4px;color:#92a9af}.game-card{border:1px solid #4c5460;box-shadow:0 25px 80px #0009,0 0 0 6px #101b26;border-radius:14px;overflow:hidden;background:#0c1722}.stage-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#243848}canvas{width:100%;height:100%;display:block}.hud{position:absolute;top:0;left:0;right:0;padding:31px 34px;display:flex;justify-content:space-between;gap:18px;pointer-events:none;text-shadow:0 2px 5px #000}.hud-player,.hud-boss{width:min(34%,365px)}.hud-boss{text-align:right}.hud-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.16em;font-weight:800;color:#f9eee0}.hud-label b{font-size:11px;color:#fff4e7}.diamond{color:#f0bf8f;margin-right:8px}.hud-boss .diamond{margin-right:0;margin-left:8px}.bar{height:13px;padding:3px;border:1px solid #f1e4d187;background:#081420ac;margin-top:7px;transform:skewX(-16deg);box-shadow:0 2px 12px #0006}.bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#a83c49,#e56b62,#f7ad81);transition:width .25s}.boss-bar span{background:linear-gradient(90deg,#bf5e55,#e99179,#ffe1a0)}.resource{display:flex;align-items:center;gap:9px;margin-top:8px;color:#bdd5d2;font-size:9px;letter-spacing:.18em;font-weight:800}.resource-bar{width:110px;height:4px;background:#3b5661}.resource-bar i{display:block;height:100%;background:#8ed2cd;width:100%;transition:width .1s}.phase{font-size:10px;letter-spacing:.13em;color:#dfd3bc;margin-top:8px}.bottom-panel{min-height:79px;display:flex;align-items:center;justify-content:space-between;padding:15px 30px;border-top:1px solid #445260;background:linear-gradient(#172737,#0d1a28)}.controls{display:flex;gap:22px;align-items:center}.controls>div{display:flex;align-items:center;gap:5px}.controls span{font-size:11px;color:#a6b6bc;margin-left:4px}.controls kbd{min-width:25px;height:25px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:#263b4b;border:1px solid #547080;box-shadow:0 2px 0 #091521;color:#f6e8d0;font-size:10px;font-family:inherit;font-weight:800;padding:0 6px}.tip{color:#9aadb1;font-size:11px}.tip-star{color:#e4ad8b;font-size:18px;margin-right:7px}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#08121bdd 0%,#0e1d2ab8 48%,#0b1521a3);display:flex;align-items:center;justify-content:center;z-index:5}.hidden{display:none!important}.menu-panel{text-align:center;position:relative;z-index:1;padding:10px 20px}.eyebrow{font-size:11px;letter-spacing:.36em;font-weight:800;color:#edbd91}.menu-panel h1,.result-panel h2{font-size:clamp(44px,6vw,86px);margin:5px 0;color:#fff0d9;letter-spacing:-.06em;text-shadow:0 5px 20px #000}.menu-panel h1 em{font-style:normal;color:#ec8873}.menu-copy{color:#e9e3d7;font-size:15px;margin:0 0 19px}.menu-art{position:absolute;width:250px;height:360px;left:calc(100% + 15px);bottom:-78px;overflow:hidden;mask-image:linear-gradient(#000 70%,transparent)}.menu-art img{height:100%;width:auto;filter:drop-shadow(0 8px 20px #0007)}.primary-button{min-width:200px;padding:14px 23px;border:1px solid #ffd0a5;border-radius:6px;background:linear-gradient(110deg,#ac4b4b,#de8068);color:#fff9e9;font-weight:800;letter-spacing:.11em;box-shadow:0 6px 0 #632d33,0 12px 25px #0006;transition:transform .15s,box-shadow .15s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 0 #632d33,0 16px 25px #0006}.primary-button span{margin-left:15px}.menu-hint{font-size:11px;color:#afbdc0;margin-top:22px}.banner{position:absolute;top:21%;left:50%;transform:translateX(-50%);background:#081623c9;border:1px solid #deac8b;color:#fff2dc;padding:13px 31px;z-index:3;font-weight:800;letter-spacing:.17em;white-space:nowrap;box-shadow:0 6px 35px #0008}.result-panel{text-align:center;background:#0d1b2ce8;border:1px solid #d8aa8699;padding:35px 50px;border-radius:8px;box-shadow:0 20px 70px #000a}.result-panel h2{font-size:54px}.result-panel>p:not(.eyebrow){color:#c6d0d0}.result-stats{display:flex;gap:30px;justify-content:center;margin:25px 0;color:#aebdc1;font-size:12px}.result-stats b{display:block;color:#fff0d3;font-size:22px;margin-top:6px}footer{text-align:center;padding:26px;color:#587080;font-size:9px;letter-spacing:.3em}footer span{color:#b68370;margin:0 8px}.mobile-controls{display:none}@media(max-width:900px){.shell{padding:0 12px}.topbar{height:62px}.chapter{display:none}.hud{padding:14px}.hud-label{font-size:8px}.hud-label b{font-size:8px}.bar{height:10px}.phase,.resource{font-size:7px}.bottom-panel{min-height:51px;padding:10px}.controls{gap:7px}.controls kbd{font-size:8px;min-width:18px;height:18px;padding:0 4px}.controls span,.tip{font-size:8px}.menu-art{display:none}.menu-copy{font-size:12px}.mobile-controls{display:flex;justify-content:space-between;margin:17px 0;gap:12px}.mobile-left,.mobile-right{display:flex;gap:7px}.mobile-controls button{min-width:47px;height:44px;border-radius:8px;border:1px solid #648094;background:#243b4c;color:#f7ead3;font-size:12px;font-weight:800;touch-action:none}.mobile-controls button:active{background:#b76961}}@media(max-width:620px){.bottom-panel .controls{display:none}.bottom-panel{justify-content:center}.mobile-right{display:grid;grid-template-columns:repeat(4,1fr)}.mobile-controls button{min-width:42px}.menu-panel h1{font-size:43px}.menu-copy{font-size:11px}.result-panel{padding:20px}.result-panel h2{font-size:38px}}