:root{--bg:#0a101c;--panel:#131e31;--line:#2a3a50;--text:#f4f1e8;--muted:#a9b8cb;--mint:#bdfb8c;--gold:#ffc477;--red:#ff7b86}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif}body{overscroll-behavior:none;background:radial-gradient(ellipse at 45% 0%,#26324955,transparent 60%),var(--bg)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled{opacity:.35;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.14)}.topbar{max-width:1440px;margin:auto;min-height:72px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.16em}.mark{width:31px;height:31px;border:2px solid var(--mint);border-radius:50%;position:relative}.mark:before{content:"";position:absolute;background:var(--mint);border-radius:50%;width:7px;height:7px;top:7px;left:7px}.mark:after{content:"";position:absolute;width:13px;border-top:2px solid var(--mint);bottom:6px;right:-6px;transform:rotate(-25deg)}.top-right{display:flex;align-items:center;gap:8px}.tag{color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:30px;padding:6px 10px;letter-spacing:.06em}.icon-button{background:#172237;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700}.layout{max-width:1440px;margin:auto;padding:0 24px 20px}.viewport{position:relative;width:100%;max-height:calc(100dvh - 164px);aspect-ratio:5/3;margin:auto;background:#111c2c;border:1px solid #35465d;border-radius:18px;overflow:hidden;box-shadow:0 24px 90px #0007;isolation:isolate;user-select:none;-webkit-user-select:none}canvas{width:100%;height:100%;display:block;object-fit:contain;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;display:none;padding:18px 22px}.hud.visible{display:block}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.level-info{background:#0b1424db;border:1px solid #52657e44;padding:11px 16px;border-radius:12px;min-width:180px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--mint);font-weight:800;margin-bottom:5px}.level-name{font-size:16px;font-weight:800}.health-panel{min-width:220px;max-width:280px;background:#0b1424db;border:1px solid #52657e44;border-radius:12px;padding:10px 14px}.health-row{display:flex;justify-content:space-between;font-size:11px;font-weight:800;margin-bottom:7px}.health-track{height:7px;background:#304056;border-radius:6px;overflow:hidden}.health-fill{height:100%;width:100%;background:var(--mint);transition:width .18s}.pocket{font-size:11px;display:flex;justify-content:space-between;color:var(--muted);margin-top:8px;gap:14px}.boss-panel{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:30%;max-width:390px;text-align:center;display:none}.boss-title{font-size:12px;font-weight:800;text-shadow:0 2px 5px #000;margin-bottom:8px}.boss-track{height:7px;border-radius:7px;background:#253044;border:1px solid #7f405955;overflow:hidden}.boss-fill{height:100%;background:var(--red);transition:width .25s}.boss-detail{font-size:10px;color:#d0dbea;margin-top:7px;text-shadow:0 1px 4px #000}.ability{position:absolute;left:22px;bottom:18px;display:flex;gap:7px;max-width:70%;align-items:center}.ability span{font-size:11px;padding:8px 11px;border:1px solid #52657e55;border-radius:9px;background:#0b1424e8}.ability .ready{border-color:#bdfb8c88;color:var(--mint)}.ability .locked{color:#a0aec2}.status{position:absolute;right:22px;bottom:18px;font-size:11px;padding:9px 12px;background:#0b1424dc;border-radius:9px;color:#ffc477;display:none}.overlay{position:absolute;inset:0;display:none;background:#080f1be0;backdrop-filter:blur(8px);overflow:auto;scrollbar-width:thin;scrollbar-color:#415571 #111b2b}.overlay.visible{display:flex;align-items:center;justify-content:center}.overlay.title{background:linear-gradient(90deg,#0b1424f7 0%,#0b1424e0 42%,#0b142447 78%,#0b14240a);backdrop-filter:none;align-items:center;justify-content:flex-start}.title-content{padding:5.5%;max-width:620px}.kicker{display:flex;align-items:center;gap:10px;color:var(--mint);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px}.kicker:before{content:"";width:25px;height:2px;background:var(--mint)}h1{font-size:clamp(30px,4.7vw,67px);line-height:1.14;letter-spacing:-.055em;margin:0 0 20px;font-weight:850}h1 em{font-style:normal;color:var(--mint)}.title-desc{color:#bac8d9;font-size:clamp(12px,1.25vw,16px);line-height:1.9;max-width:390px;margin:0 0 27px}.title-sub{font-size:11px;color:#8295af;line-height:1.8;margin-top:22px}.button-row{display:flex;gap:10px;flex-wrap:wrap}.primary,.secondary,.danger{padding:13px 19px;font-size:13px;font-weight:800;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid transparent}.primary{background:var(--mint);color:#18231a}.secondary{background:#203048;color:#eef0ed;border-color:#3e526e}.danger{background:#301b2a;border-color:#6d3746;color:#ffb0b6}.menu-card{width:min(92%,870px);margin:20px auto;background:#111d30;border:1px solid #3a4e69;border-radius:18px;padding:30px;box-shadow:0 20px 80px #0005}.menu-card.narrow{width:min(90%,460px);text-align:center}.menu-card.wide{width:min(93%,1060px)}h2{margin:0;font-size:27px;letter-spacing:-.035em}.subtext{color:var(--muted);font-size:13px;line-height:1.8;margin:12px 0 22px}.menu-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px}.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 23px}.chapter-label{font-size:13px;display:flex;justify-content:space-between;color:#d8e3ed}.chapter-label small{font-size:10px;color:#99abc3}.stage-tile{position:relative;min-height:102px;padding:14px 10px;text-align:left;border:1px solid #384a65;background:#1b2b41;border-radius:12px;display:flex;flex-direction:column;gap:7px}.stage-tile.cleared{border-color:#829c625c;background:#25312d}.stage-tile .num{font-size:22px;font-weight:850;color:var(--gold);letter-spacing:-.04em}.stage-tile.gym .num{color:#92e6e2}.stage-tile .stage-title{font-size:10px;line-height:1.5}.stage-tile .state{position:absolute;right:10px;top:12px;font-size:10px;color:var(--mint)}.menu-bottom{display:flex;gap:10px;justify-content:space-between;align-items:center}.currency{color:var(--gold);font-size:13px;font-weight:800}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.help-section{padding:17px;background:#1a293e;border-radius:12px}.help-section h3{font-size:14px;margin:0 0 10px;color:var(--mint)}.help-section p{font-size:12px;line-height:1.9;color:#c5d1e1;margin:0}.help-section kbd,kbd{font:inherit;background:#26374e;border:1px solid #485b76;border-bottom-width:2px;border-radius:5px;padding:2px 5px;color:#eef1f5}.help-section details{font-size:12px;color:#bdcbdc;line-height:1.8;margin-top:8px}.help-section summary{cursor:pointer;color:#f0e5d2}.big-number{font-size:70px;font-weight:850;letter-spacing:-.06em;color:var(--mint);margin:20px 0 4px}.progress-steps{display:flex;justify-content:center;gap:8px;margin:20px 0}.progress-steps i{width:40px;height:5px;border-radius:4px;background:#37475e}.progress-steps i.on{background:var(--mint)}.toast{position:absolute;bottom:74px;left:50%;transform:translate(-50%,12px);padding:11px 18px;border:1px solid #bdfb8c55;border-radius:12px;background:#101e2ff2;color:#e8f4e3;font-size:12px;max-width:82%;text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:5;line-height:1.6}.toast.show{opacity:1;transform:translate(-50%,0)}.footer{display:flex;align-items:center;justify-content:space-between;padding:15px 4px 0;gap:12px;color:#90a2b9;font-size:11px}.keyboard-guide{display:flex;gap:18px;flex-wrap:wrap}.build-tag{font-size:10px;letter-spacing:.1em;color:#68829f;text-align:right}.touch{display:none;justify-content:space-between;align-items:center;padding-top:12px;gap:12px;user-select:none}.touch-group{display:flex;gap:9px}.touch button{width:64px;height:54px;border-radius:13px;background:#22354c;border:1px solid #49627d;font-size:20px;font-weight:850;touch-action:none;user-select:none}.touch button.pressed{background:#566b47;border-color:var(--mint)}.touch button.action{font-size:12px;width:82px;color:var(--mint)}.touch button.slam{color:var(--gold)}.touch button.locked{opacity:.4}.touch.force{display:flex}.fatal{padding:30px;white-space:pre-wrap;color:#ffafb9}body.full .topbar,body.full .footer{display:none}body.full .layout{padding:0;max-width:none}body.full .viewport{height:100dvh;max-height:none;border-radius:0;border:0;aspect-ratio:auto}
@media(pointer:coarse){.touch{display:flex}.viewport{max-height:calc(100dvh - 204px)}.keyboard-guide{display:none}}
@media(max-width:760px){.topbar{min-height:55px;padding:11px 14px}.brand{font-size:10px;letter-spacing:.1em}.mark{width:24px;height:24px}.tag{display:none}.layout{padding:0 8px 12px}.viewport{border-radius:12px;max-height:none}.icon-button{font-size:10px;padding:7px 8px}.footer{font-size:9px;padding:10px 4px}.keyboard-guide{gap:9px}.title-content{padding:5%;max-width:65%}.kicker{font-size:8px;margin-bottom:12px}h1{font-size:clamp(24px,5.5vw,43px);margin-bottom:12px}.title-desc{font-size:10px;margin-bottom:15px;line-height:1.7}.title-sub{font-size:8px;margin-top:12px}.primary,.secondary,.danger{font-size:10px;padding:9px 12px}.button-row{gap:7px}.hud{padding:10px}.level-info{padding:6px 9px;min-width:120px}.eyebrow{font-size:7px;margin-bottom:3px}.level-name{font-size:10px}.health-panel{min-width:145px;padding:7px 9px}.health-row{font-size:8px;margin-bottom:4px}.health-track{height:5px}.pocket{font-size:7px;margin-top:5px;gap:8px}.ability{left:10px;bottom:9px;gap:4px}.ability span{font-size:7px;padding:5px 6px}.status{right:10px;bottom:9px;font-size:8px;padding:5px 8px}.boss-panel{top:14px;width:28%}.boss-title{font-size:8px;margin-bottom:5px}.boss-detail{font-size:7px;margin-top:4px}.boss-track{height:5px}.menu-card{padding:17px;margin:12px auto}.menu-header{margin-bottom:12px}h2{font-size:21px}.subtext{font-size:11px;margin:8px 0 14px}.stage-grid{gap:6px;margin:10px 0 17px}.stage-tile{min-height:82px;padding:10px 7px;gap:5px}.stage-tile .num{font-size:18px}.stage-tile .stage-title{font-size:8px}.stage-tile .state{font-size:8px;right:6px;top:8px}.chapter-label{font-size:11px}.chapter-label small{font-size:8px}.help-grid{grid-template-columns:1fr;gap:12px}.help-section{padding:12px}.toast{bottom:40px;padding:7px 11px;font-size:9px}.currency{font-size:11px}.big-number{font-size:48px}.overlay.visible:not(.title){align-items:flex-start}.menu-card.narrow{margin:auto}.touch button{height:48px;width:60px}.touch button.action{width:72px}.build-tag{font-size:8px}}
@media(max-height:600px) and (orientation:landscape){.topbar{display:none}.layout{padding:6px}.viewport{max-height:calc(100dvh - 54px);width:auto;max-width:100%;height:calc(100dvh - 54px)}.footer{display:none}.touch{position:absolute;bottom:12px;left:15px;right:15px;z-index:3;pointer-events:none;padding:0;opacity:.7}.touch button{pointer-events:auto}.ability{bottom:75px}.toast{bottom:105px}.status{bottom:75px}.hud{padding:10px}.menu-card{margin:12px auto}.overlay.visible:not(.title){align-items:flex-start}}
@media(max-width:560px){.overlay.title{align-items:flex-start}.title-content{padding:5%;max-width:72%}.title-content .kicker{font-size:6px;letter-spacing:.07em;margin-bottom:9px;white-space:nowrap;gap:6px}.title-content .kicker:before{width:14px}.title-desc{font-size:9px;line-height:1.65;margin-bottom:12px}.title-sub{display:none}.title-content h1{font-size:24px;line-height:1.15;margin-bottom:10px}.title-content .button-row{gap:6px}.title-content .primary,.title-content .secondary{font-size:9px;padding:9px 10px}.build-tag:after{content:" / 가로 화면 권장"}}