:root{color-scheme:dark;--bg:#070b13;--panel:#111827;--panel2:#172033;--line:#2a3955;--text:#f4f7fb;--muted:#8fa2bd;--cyan:#62e5ff;--gold:#ffd166;--danger:#ff667d;--ok:#7df08a;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#182647 0,#080d18 50%,#05070c 100%);color:var(--text);font-family:ui-monospace,"SFMono-Regular",Consolas,"Noto Sans KR",monospace;overscroll-behavior:none}body{touch-action:manipulation}button{font:inherit;color:inherit}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}#app{min-height:100dvh;max-width:1280px;margin:auto;padding:calc(10px + var(--safe-top)) 16px calc(18px + var(--safe-bottom))}.topbar{height:64px;display:flex;align-items:center;gap:18px;border-bottom:1px solid #25314a}.brand{display:flex;align-items:center;gap:10px;min-width:220px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #4fdfff;background:#10253b;color:#8af1ff;box-shadow:0 0 18px #26c8ff55}.brand strong{display:block;font-size:17px;letter-spacing:.12em}.brand small{display:block;color:#7187a6;font-size:9px;letter-spacing:.18em;margin-top:2px}.resources{display:flex;gap:9px;margin-left:auto}.resources span{display:flex;gap:8px;align-items:center;min-height:38px;padding:0 12px;background:#0c1422;border:1px solid #263753;color:#7f96b7;font-size:10px}.resources b{color:#fff;font-size:13px}.top-actions{display:flex;gap:8px}.icon-btn{width:44px;height:44px;border:1px solid #314362;background:#111b2d;font-size:22px;cursor:pointer}.icon-btn:active{transform:translateY(1px);background:#1a2c47}main{display:grid;gap:12px;padding-top:12px}.battle-frame{position:relative;overflow:hidden;border:1px solid #334564;background:#080d18;box-shadow:0 20px 70px #0009;aspect-ratio:16/9;max-height:min(66dvh,720px)}#gameCanvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:crosshair}.battle-frame:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px #0a0f18,inset 0 0 80px #02050bbb}.battle-hud{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;pointer-events:none}.battle-hud span{padding:7px 10px;background:#07101ddd;border:1px solid #36516c;color:#c8edff;font-size:10px;letter-spacing:.12em;backdrop-filter:blur(7px)}.center-message{position:absolute;left:50%;top:16%;transform:translateX(-50%);min-width:240px;padding:10px 22px;text-align:center;background:#080d18df;border:1px solid #526783;box-shadow:0 14px 40px #0008;pointer-events:none;transition:.2s}.center-message strong,.center-message span{display:block}.center-message strong{font-size:18px}.center-message span{color:#9cb0c9;font-size:10px;margin-top:4px}.center-message.hidden{opacity:0;transform:translate(-50%,-12px)}.command-bar{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:8px}.command{min-height:52px;border:1px solid #2c3e5c;background:linear-gradient(180deg,#17243a,#0f1726);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;touch-action:none}.command span{font-size:15px;color:#9ab5d7}.command b{font-size:11px}.command.primary{border-color:#3dd6ff;background:linear-gradient(180deg,#123750,#102638);box-shadow:inset 0 0 18px #23cfff24}.command.primary span{color:#7feaff}.command.active{border-color:#ffd166;color:#ffd166}.command:disabled{opacity:.4;cursor:not-allowed}.squad-panel,.upgrade-panel{border:1px solid #263650;background:#0d1421dd;padding:14px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:12px}.section-heading span,.eyebrow{font-size:9px;letter-spacing:.18em;color:#55defe}.section-heading h1,.upgrade-panel h2{font-size:17px;margin:3px 0 0}.section-heading p,.upgrade-panel p{margin:0;color:#7f93af;font-size:10px}.hero-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.hero-card{position:relative;min-width:0;padding:8px;border:1px solid #2d3d5a;background:linear-gradient(150deg,#152033,#0d1421);cursor:pointer;touch-action:none;user-select:none;transition:.15s;overflow:hidden}.hero-card:hover,.hero-card.selected{border-color:#63e4ff;transform:translateY(-2px);box-shadow:0 8px 24px #0008,0 0 18px #42dbff1f}.hero-card.ready{border-color:#ffd166;box-shadow:0 0 18px #ffd16633}.hero-card.dead{filter:grayscale(1);opacity:.5}.hero-card img{display:block;width:72px;height:72px;margin:auto;object-fit:contain;image-rendering:pixelated}.hero-card .slot{position:absolute;left:6px;top:6px;width:19px;height:19px;display:grid;place-items:center;background:#060a12;border:1px solid #354866;color:#9db3cf;font-size:9px}.hero-card .element{position:absolute;right:6px;top:6px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 9px currentColor}.hero-card h3{font-size:12px;margin:2px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-card p{font-size:9px;color:#7f94b0;margin:0 0 7px}.bar{height:5px;background:#070b12;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;width:0;transition:width .15s}.bar.hp i{background:linear-gradient(90deg,#48d879,#9af29e)}.bar.mana i{background:linear-gradient(90deg,#6f6cff,#68e5ff)}.hero-card small{display:block;margin-top:5px;color:#8da2bd;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upgrade-panel{display:flex;align-items:center;justify-content:space-between}.upgrade-panel button{min-width:180px;min-height:54px;border:1px solid #e6b84f;background:#352915;display:grid;grid-template-columns:35px 1fr;grid-template-rows:1fr 1fr;align-items:center;cursor:pointer}.upgrade-panel button span{grid-row:1/3;font-size:22px;color:#ffd166}.upgrade-panel button b{font-size:11px;align-self:end}.upgrade-panel button small{font-size:8px;color:#e7bd62;align-self:start}footer{display:flex;justify-content:space-between;align-items:center;padding:16px 4px 0;color:#52657f;font-size:8px}footer button{border:0;background:none;color:#738cab;text-decoration:underline;cursor:pointer}dialog{width:min(540px,calc(100% - 28px));border:1px solid #425573;background:#0d1421;color:#fff;padding:0;box-shadow:0 30px 100px #000}dialog::backdrop{background:#03060bd9;backdrop-filter:blur(4px)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid #283852}.modal-head h2{margin:3px 0 0;font-size:19px}.dialog-close{width:44px;height:44px;border:1px solid #354866;background:#111c2e;font-size:24px;cursor:pointer}dialog ol{list-style:none;margin:0;padding:12px 18px}dialog li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #222f45}dialog li b{color:#7feaff;font-size:11px}dialog li span,dialog p{color:#a0b2c8;font-size:10px;line-height:1.7}.keys,dialog>p{padding:0 18px 16px}dialog a{color:#75e4ff}.damage-text{pointer-events:none}body.maximized{overflow:hidden}body.maximized #app{position:fixed;z-index:9999;inset:0;max-width:none;padding:calc(4px + var(--safe-top)) 4px calc(4px + var(--safe-bottom));background:#02050a;overflow:auto}body.maximized .topbar,body.maximized .squad-panel,body.maximized .upgrade-panel,body.maximized footer{display:none}body.maximized main{padding:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}body.maximized .battle-frame{width:min(100%,calc((100dvh - 64px)*16/9));max-height:calc(100dvh - 64px);flex:0 1 auto;aspect-ratio:16/9}body.maximized .command-bar{width:min(100%,calc((100dvh - 64px)*16/9));padding-top:4px}
@media(max-width:760px){#app{padding-left:7px;padding-right:7px}.topbar{height:52px;gap:6px}.brand{min-width:0;flex:1}.brand-mark{width:32px;height:32px}.brand strong{font-size:13px}.brand small{font-size:7px}.resources span{padding:0 7px;min-height:32px}.resources span:first-child{display:none}.resources b{font-size:11px}.icon-btn{width:44px;height:44px}.battle-frame{max-height:none}.battle-hud{top:6px;left:6px;right:6px}.battle-hud span{padding:5px 7px;font-size:8px}.center-message{top:12%;min-width:200px;padding:7px 14px}.center-message strong{font-size:14px}.center-message span{font-size:8px}.command-bar{grid-template-columns:repeat(5,1fr);gap:4px}.command{min-width:0;min-height:50px;flex-direction:column;gap:2px}.command span{font-size:12px}.command b{font-size:8px;white-space:nowrap}.squad-panel{padding:10px 7px}.section-heading{align-items:start;margin-bottom:8px}.section-heading p{max-width:53%;text-align:right;font-size:8px}.hero-cards{grid-template-columns:repeat(3,1fr);gap:5px}.hero-card{padding:5px}.hero-card img{width:58px;height:58px}.hero-card h3{font-size:10px}.hero-card p,.hero-card small{font-size:7px}.upgrade-panel{padding:10px}.upgrade-panel p{display:none}.upgrade-panel button{min-width:135px}.upgrade-panel h2{font-size:14px}footer{padding:10px 2px 0}.top-actions{gap:4px}}
@media(max-width:420px) and (orientation:portrait){.battle-frame{aspect-ratio:16/9}.brand small{display:none}.resources{margin-left:0}.section-heading h1{font-size:14px}}
@media(orientation:landscape) and (max-height:600px){#app{max-width:none;padding:3px 6px}.topbar,.squad-panel,.upgrade-panel,footer{display:none}main{padding:0;height:calc(100dvh - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center}.battle-frame{width:min(100%,calc((100dvh - 78px)*16/9));height:auto;max-height:calc(100dvh - 78px);flex:none;aspect-ratio:16/9}.command-bar{width:min(100%,calc((100dvh - 78px)*16/9));height:56px}.command{min-height:50px}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Exploration layer */
.explore-controls{position:absolute;inset:0;z-index:8;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 22px}.explore-controls.hidden{display:none}.joystick{width:118px;height:118px;border-radius:50%;border:2px solid #7deaff99;background:#07101db8;box-shadow:inset 0 0 28px #39dfff22,0 8px 28px #0008;pointer-events:auto;touch-action:none;display:grid;place-items:center}.joystick:before{content:"";width:56px;height:56px;border-radius:50%;border:1px solid #78ddff44}.joystick span{position:absolute;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b6f8ff,#3dbddd 68%,#154b68);border:2px solid #d7fbff;box-shadow:0 5px 14px #0009;transform:translate(0,0);will-change:transform}.map-action-stack{display:flex;align-items:flex-end;gap:10px;pointer-events:auto}.run-button,.interact-button{border-radius:50%;border:2px solid #bfeeff;background:#10243edb;box-shadow:0 7px 24px #0009;touch-action:none;font-weight:900;letter-spacing:.08em}.run-button{width:70px;height:70px;color:#8beaff}.interact-button{width:90px;height:90px;color:#fff2a8;border-color:#ffd166;background:#493919e8}.interact-button.ready{animation:interactPulse 1s infinite;box-shadow:0 0 28px #ffd16688}.scene-transition{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:#02040a;color:#fff;opacity:0;pointer-events:none;transition:opacity .38s}.scene-transition strong{font-size:28px;letter-spacing:.26em;text-shadow:0 0 22px #62e5ff}.scene-transition.active{opacity:1}.dialogue-box{position:absolute;z-index:15;left:7%;right:7%;bottom:7%;display:grid;grid-template-columns:135px 1fr auto;gap:16px;align-items:center;padding:16px 18px;background:#07101df2;border:2px solid #6685a9;box-shadow:0 16px 60px #000c,inset 0 0 35px #1c477533;backdrop-filter:blur(8px)}.dialogue-box.hidden{display:none}.dialogue-box div{display:grid;gap:5px}.dialogue-box small{color:#73e8ff;font-size:9px;letter-spacing:.16em}.dialogue-box strong{font-size:15px}.dialogue-box p{margin:0;color:#e7eef8;font-size:13px;line-height:1.65}.dialogue-box button{min-width:92px;min-height:48px;border:1px solid #ffd166;background:#392c14;color:#ffe7a5;cursor:pointer}.battle-frame.explore-mode .battle-hud span{border-color:#52dca0;color:#caffdf}.battle-frame.explore-mode #gameCanvas{cursor:default}@keyframes interactPulse{50%{transform:scale(1.06)}}
@media(pointer:fine){.explore-controls{opacity:.38}.joystick{pointer-events:none}.map-action-stack{opacity:.85}}
@media(max-width:760px){.explore-controls{padding:0 12px 12px}.joystick{width:96px;height:96px}.joystick span{width:40px;height:40px}.run-button{width:58px;height:58px;font-size:10px}.interact-button{width:72px;height:72px;font-size:10px}.map-action-stack{gap:7px}.dialogue-box{left:3%;right:3%;bottom:3%;grid-template-columns:84px 1fr;gap:8px;padding:10px}.dialogue-box button{grid-column:1/3;min-height:42px}.dialogue-box p{font-size:10px}.dialogue-box strong{font-size:12px}}
@media(orientation:landscape) and (max-height:600px){.explore-controls{padding:0 10px 8px}.joystick{width:88px;height:88px}.interact-button{width:68px;height:68px}.run-button{width:52px;height:52px}.dialogue-box{bottom:2%;padding:8px 12px;grid-template-columns:95px 1fr 82px}.dialogue-box button{grid-column:auto}}