@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0c121c;--panel:#111b28;--line:#243041;--muted:#8b9aae;--text:#e8eef5;--mint:#64e4c1;--font:'DM Sans','Noto Sans KR',sans-serif}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}.app{max-width:1512px;margin:auto;padding:0 48px}.topbar{height:98px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:21px;font-weight:800;letter-spacing:1px;line-height:1.2}.brand-light{font-weight:400;color:#d6e0ea}.brand small{display:block;font-size:8px;letter-spacing:2.1px;color:var(--muted);margin-top:7px;font-weight:500}.brand-mark{position:relative;width:35px;height:36px}.brand-mark i{display:block;background:var(--mint);position:absolute;width:15px;height:15px;transform:skewY(-23deg);border-radius:2px}.brand-mark i:nth-child(1){left:0;top:7px}.brand-mark i:nth-child(2){left:18px;top:0}.brand-mark i:nth-child(3){left:18px;top:19px;opacity:.5}.top-right{display:flex;align-items:center;gap:13px}.local-indicator{font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-right:18px;display:flex;align-items:center;gap:9px}.local-indicator i,.mint-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block}.icon-button{background:transparent;border:1px solid var(--line);width:34px;height:34px;border-radius:9px;display:inline-flex;justify-content:center;align-items:center;font-size:18px;color:#b6c4d6;position:relative}.icon-button:hover:not(:disabled){background:#213044;color:var(--mint);border-color:#4b716b}.sound-off{position:absolute;width:19px;height:1px;background:#b6c4d6;transform:rotate(-50deg)}.page-heading{display:flex;align-items:center;justify-content:space-between;padding:37px 0 31px}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600;color:var(--mint);margin:0 0 10px}h1{font-size:32px;letter-spacing:-1.4px;font-weight:600;margin:0 0 11px}h1>span{color:var(--mint);margin-left:3px}.page-description{color:var(--muted);font-size:12px;margin:0}.edition{text-align:right;color:#c2cfdd;font-size:10px;letter-spacing:2px}.edition span{display:block;color:#5d6d82;font-size:8px;letter-spacing:1.2px;margin-top:8px}.game-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start}.sidebar{padding-top:4px}.section-heading{font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}.tiny{font-size:8px;letter-spacing:1.5px;color:#62748c;font-weight:500}.missions{display:flex;flex-direction:column;gap:9px}.mission{display:flex;gap:13px;align-items:center;text-align:left;width:100%;min-height:76px;border:1px solid var(--line);border-radius:11px;background:#101925;padding:13px;color:var(--muted);transition:background .2s,border-color .2s}.mission:hover{background:#192a37;border-color:#3d5e66}.mission.active{border-color:#48796f;background:linear-gradient(110deg,#15332f,#14292b)}.mission-number{font-size:23px;font-weight:400;color:#52617a;letter-spacing:-1px}.mission.active .mission-number{color:var(--mint)}.mission-copy{flex:1}.mission h3{font-size:12px;font-weight:600;color:#bfcbd9;margin:0 0 6px}.mission.active h3{color:#ecfff8}.mission p{font-size:9px;letter-spacing:.2px;margin:0;color:#7e91a4}.mission-arrow{color:#546277;font-size:18px}.mission.active .mission-arrow{color:var(--mint)}.mission.completed .mission-number:after{content:'✓';display:block;font-size:10px;line-height:9px;text-align:center;color:var(--mint)}.difficulty-block{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}.difficulty-block select{width:100%;border:1px solid #2c3a4c;border-radius:9px;background:#141f2e;color:#d1dce8;padding:11px;font-size:11px;cursor:pointer}.difficulty-block p{font-size:10px;line-height:1.7;color:#788a9e;margin:11px 0}.briefing{margin-top:25px;padding:20px 16px 16px;background:linear-gradient(145deg,#172432,#111b28);border:1px solid var(--line);border-radius:11px;position:relative;overflow:hidden}.briefing:after{content:'';position:absolute;right:-32px;top:38px;width:110px;height:110px;border:1px solid #355b54;transform:rotate(30deg);opacity:.4}.briefing-icon{font-size:25px;color:var(--mint);margin-bottom:15px}.briefing .eyebrow{font-size:8px;letter-spacing:1.7px;color:#7b93a4}.briefing h3{font-size:16px;line-height:1.8;font-weight:500;margin:0 0 11px;position:relative;z-index:1}.briefing>p:last-child{font-size:10px;color:#8596a9;line-height:1.95;margin:0}.sidebar-footer{display:flex;align-items:center;gap:7px;margin-top:20px;font-size:8px;color:#6c7e93}.sidebar-footer .mint-dot{width:4px;height:4px}.sidebar-footer>span:last-child{margin-left:auto;color:#43566d}.battle-panel{border:1px solid #2a384a;border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:0 20px 50px #0000001c}.battle-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:17px 24px;border-bottom:1px solid var(--line)}.battle-header .eyebrow{font-size:8px;color:#7c90a5;letter-spacing:1.8px;margin-bottom:6px}.battle-header h2{font-size:16px;font-weight:600;letter-spacing:-.4px;margin:0}.battle-actions{display:flex;align-items:center;gap:10px}.battle-actions .icon-button{width:29px;height:29px;font-size:16px;border:0;background:#1c2939;border-radius:7px}.status-pill{font-size:9px;display:inline-flex;align-items:center;gap:6px;border:1px solid #334454;padding:5px 8px;border-radius:5px;color:#a5b4c4}.status-pill.live{color:var(--mint);border-color:#315e53}.status-pill.live:before{content:'';height:4px;width:4px;background:var(--mint);border-radius:50%}.timer{font-variant-numeric:tabular-nums;font-size:12px;color:#b0bfd0;margin:0 4px 0 9px;letter-spacing:1px}.board{position:relative;aspect-ratio:1000/660;isolation:isolate;background:radial-gradient(ellipse at 46% 44%,#162437 0%,#0f1928 70%);overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.board-coordinate{position:absolute;top:20px;font-size:7px;letter-spacing:1.5px;color:#4a6078;pointer-events:none}.top-left{left:24px}.top-right-coordinate{right:24px}.map-caption{position:absolute;bottom:15px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:8px;color:#4b6279}.map-caption>span:first-child{letter-spacing:1px;display:flex;align-items:center;gap:7px;font-size:7px}.map-caption i{height:4px;width:4px;background:var(--mint);border-radius:50%}.overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:#0b1425b3;backdrop-filter:blur(5px);padding:20px}.overlay[hidden]{display:none}.overlay-card{max-width:450px;width:100%;text-align:center;padding:25px 30px}.operation-symbol{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px solid #568c7d;border-radius:15px;background:linear-gradient(140deg,#1e4b43,#163334);margin:0 auto 24px;transform:rotate(-7deg);box-shadow:0 0 40px #64e4c110}.operation-symbol span{font-size:28px;color:var(--mint);transform:rotate(7deg)}.overlay-card>.eyebrow{font-size:8px;letter-spacing:2.5px;margin-bottom:13px}.overlay-card h2{font-size:25px;font-weight:600;letter-spacing:-1px;margin:0 0 15px}.overlay-card>p:not(.eyebrow):not(.overlay-footnote){font-size:11px;line-height:1.95;color:#a5b5c9;margin:0}.mission-facts{display:flex;align-items:center;justify-content:center;gap:17px;margin:22px 0;font-size:9px;color:#92a5b9}.mission-facts b{font-weight:500;color:#d6e1ed}.mission-facts>span+span{border-left:1px solid #334354;padding-left:17px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--mint);color:#102d29;border:0;border-radius:8px;font-size:12px;font-weight:700;padding:14px 20px;min-width:210px;margin:0 auto;transition:background .15s,transform .15s}.primary-button:hover{background:#8ef1d6;transform:translateY(-1px)}.primary-button>span{font-size:18px}.overlay-footnote{font-size:8px!important;color:#597287!important;margin:17px 0 0!important;line-height:1.6}.text-button{display:block;background:transparent;border:0;color:#b8c7d7;font-size:10px;margin:14px auto 0;padding:5px}.text-button[hidden]{display:none}.command-bar{min-height:64px;padding:12px 22px;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#121e2c}.command-group{display:flex;align-items:center;gap:11px}.command-label{font-size:10px;color:#8193a9;white-space:nowrap}.segmented{display:flex;padding:3px;border:1px solid #2d3a4c;border-radius:7px;background:#0f1927}.segmented button{border:0;background:transparent;border-radius:4px;font-size:10px;padding:7px 10px;color:#7e92a9;white-space:nowrap}.segmented button>span{font-size:8px;margin-left:5px;opacity:.65}.segmented button.active{color:var(--mint);background:#223e3c}.selection-info{display:flex;align-items:center;gap:6px;font-size:10px;color:#7790a7}.selection-dot{height:5px;width:5px;border:1px solid #55728a;border-radius:50%}.selection-info.selected{color:var(--mint)}.selection-info.selected .selection-dot{background:var(--mint);border-color:var(--mint)}.subtle-button{font-size:9px;color:#a8b7c9;border:0;background:transparent;white-space:nowrap;padding:6px 0;margin-left:auto}.subtle-button:hover{color:var(--mint)}kbd{font-family:var(--font);font-size:8px;border:1px solid #344357;background:#192638;padding:1px 5px;border-radius:3px;color:#8ba0b9;margin-left:6px}.battle-stats{padding:21px 24px;display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:20px}.stat+.stat{border-left:1px solid var(--line);padding-left:22px}.stat-label{font-size:9px;color:#8b9eb3;display:flex;align-items:center;gap:6px;margin-bottom:9px}.stat-label .mint-dot{width:5px;height:5px}.stat strong{display:block;font-size:25px;font-weight:500;letter-spacing:-.5px;line-height:1}.stat strong small{font-size:11px;color:#637790;font-weight:400;margin-left:4px}.power-stat .stat-label{justify-content:space-between}.power-stat .stat-label>span{color:var(--mint);font-size:9px}.power-bar{height:5px;background:#243246;border-radius:4px;overflow:hidden;display:flex;gap:3px;margin-top:15px}.power-bar>span{height:100%;transition:width .4s}.power-legend{font-size:7px;color:#71859c;display:flex;justify-content:space-between;margin-top:8px}.page-footer{display:flex;justify-content:space-between;align-items:center;padding:22px 0 28px;color:#61758c;font-size:8px}.page-footer>span{font-size:8px;letter-spacing:1.4px}.page-footer b{font-weight:400;color:#3e5a6f;margin:0 8px}.page-footer p{margin:0;font-size:9px;color:#6a7f95}.page-footer i{font-style:normal;margin:0 7px;color:#364d63}.page-footer button{font-size:9px;color:#91a3b6;background:transparent;border:0}.toast{position:absolute;bottom:42px;left:50%;transform:translate(-50%,8px);background:#233d3b;border:1px solid #4d786b;color:#c8f6e8;border-radius:7px;padding:10px 16px;font-size:10px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:4;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #3b5264;border-radius:18px;padding:30px;background:#132030;color:var(--text);max-width:490px;width:calc(100% - 32px);max-height:90vh}dialog::backdrop{background:#040b16c9;backdrop-filter:blur(6px)}.help-header{display:flex;justify-content:space-between;align-items:center}.help-header .eyebrow{margin:0}.help-header .icon-button{border:0;font-size:23px}dialog h2{font-size:23px;letter-spacing:-1px;margin:19px 0 26px}.help-step{display:flex;gap:18px;margin-bottom:23px}.help-step>b{font-weight:400;font-size:20px;color:var(--mint)}.help-step h3{margin:0 0 7px;font-size:13px;font-weight:500}.help-step p,details p{font-size:11px;color:#97acc0;line-height:1.9;margin:0}.help-keyboard{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:10px;color:#9eb0c2;padding:18px 0;border-top:1px solid var(--line)}.help-keyboard kbd{margin:0 6px 0 0}details{font-size:10px;color:#8fa9bc;margin:5px 0 22px}details summary{cursor:pointer}details p{margin-top:10px}dialog .primary-button{width:100%}
@media(min-width:1450px){.app{padding:0 64px}.page-heading{padding-top:43px;padding-bottom:38px}.game-layout{grid-template-columns:240px minmax(0,1fr);gap:32px}}
@media(max-width:1100px){.app{padding:0 26px}.game-layout{grid-template-columns:190px minmax(0,1fr);gap:20px}.battle-header{padding:15px 18px}.command-bar{padding:10px 15px;gap:12px}.command-label{display:none}.battle-stats{padding:20px 18px;gap:12px}.stat+.stat{padding-left:16px}.page-footer>span{display:none}.edition{display:none}.overlay-card h2{font-size:22px}.overlay-card{padding:15px}.page-heading h1{font-size:29px}.selection-info{font-size:9px}.mission-facts{margin:17px 0}.operation-symbol{margin-bottom:17px}}
@media(max-width:760px){.app{padding:0 16px}.topbar{height:75px}.brand{font-size:17px;gap:10px}.brand small{font-size:6px;letter-spacing:1.5px}.brand-mark{transform:scale(.85);transform-origin:left;width:30px}.local-indicator{display:none}.top-right{gap:8px}.page-heading{padding:25px 0 23px}.page-heading h1{font-size:25px}.page-description{font-size:10px}.eyebrow{font-size:8px}.game-layout{display:flex;flex-direction:column;gap:15px}.sidebar{width:100%;display:flex;flex-wrap:wrap;gap:12px;padding:0}.sidebar>.section-heading{display:none}.missions{flex-direction:row;width:100%;gap:7px}.mission{padding:10px 8px;min-height:65px;gap:8px;flex:1}.mission-number{font-size:19px}.mission h3{font-size:10px;white-space:nowrap}.mission p{font-size:8px}.mission-arrow{display:none}.difficulty-block{display:flex;align-items:center;gap:12px;border:0;padding:0;margin:0;width:100%}.difficulty-block label{font-size:10px;margin:0;white-space:nowrap}.difficulty-block .tiny{display:none}.difficulty-block select{padding:7px 10px;width:120px;font-size:10px}.difficulty-block p{margin:0;font-size:8px;flex:1;text-align:right}.briefing,.sidebar-footer{display:none}.battle-panel{width:100%;border-radius:12px}.battle-header{height:66px;padding:12px 15px}.battle-header h2{font-size:13px}.battle-header .eyebrow{font-size:7px}.battle-actions{gap:6px}.status-pill{font-size:8px;padding:4px 6px}.timer{font-size:10px;margin:0 3px}.board{aspect-ratio:1/1.05}.board-coordinate{top:14px;font-size:6px}.top-left{left:15px}.top-right-coordinate{right:15px}.map-caption{left:15px;right:15px;bottom:11px;font-size:6px}.map-caption>span:last-child{display:none}.command-bar{gap:9px;min-height:59px;padding:10px 12px;flex-wrap:wrap}.segmented button{padding:7px 8px;font-size:9px}.segmented button span{font-size:7px;margin-left:4px}.selection-info{font-size:8px}.subtle-button{font-size:8px}kbd{font-size:7px;margin-left:3px;padding:1px 4px}.battle-stats{padding:18px 14px;grid-template-columns:1fr 1fr 1fr;gap:12px}.stat strong{font-size:23px}.stat-label{font-size:8px}.stat+.stat{padding-left:18px}.power-stat{grid-column:1/-1;border-left:0!important;padding:14px 0 0!important;border-top:1px solid var(--line);display:grid;grid-template-columns:65px 1fr;gap:10px;align-items:center}.power-stat .stat-label{margin:0;display:block;font-size:8px}.power-stat .stat-label span{margin-left:8px;font-size:8px}.power-bar{margin:0;height:5px}.power-legend{display:none}.page-footer{padding:18px 0 22px}.page-footer p{font-size:8px}.page-footer i{margin:0 3px}.page-footer button{font-size:8px}.overlay-card h2{font-size:21px}.overlay-card>p:not(.eyebrow):not(.overlay-footnote){font-size:10px}.overlay-card{padding:10px}.operation-symbol{width:46px;height:46px;margin-bottom:19px}.mission-facts{font-size:8px;gap:10px}.mission-facts>span+span{padding-left:10px}.overlay-footnote{font-size:7px!important}.primary-button{min-width:200px;font-size:11px}.toast{font-size:9px;max-width:92%;white-space:normal;width:max-content;text-align:center}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(min-width:761px){.board{aspect-ratio:auto;height:clamp(300px,calc(100dvh - 560px),560px)}}
@media(max-width:760px){.board{aspect-ratio:660/950}.battle-panel{scroll-margin-top:10px}}
@media(min-width:761px) and (max-height:950px){.overlay-card{padding:10px 20px}.operation-symbol{width:38px;height:38px;margin-bottom:13px}.operation-symbol span{font-size:23px}.overlay-card h2{font-size:21px;margin-bottom:10px}.overlay-card>.eyebrow{margin-bottom:10px}.mission-facts{margin:15px 0}.overlay-footnote{display:none}}
.notification-bar{height:30px;overflow:hidden;border-bottom:1px solid var(--line);background:#121e2c;pointer-events:none}
.notification-bar .toast{position:static;inset:auto;transform:none;width:100%;max-width:none;height:30px;margin:0;padding:7px 22px;border:0;border-radius:0;background:transparent;font-size:10px;line-height:16px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity .15s}
.notification-bar .toast.visible{transform:none}
.brand-mark svg{display:block;width:100%;height:100%}
#clear-selection{margin-left:auto}#select-all{margin-left:0}
.install-button{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;border:1px solid #3c685f;border-radius:8px;background:#17362f;color:var(--mint);padding:8px 12px;font-size:10px}.install-button:hover{background:#244b41}.install-icon{display:block;border-radius:16px;margin:25px 0 0}.install-description{font-size:12px;line-height:1.9;color:#a5b5c9;margin-bottom:24px}.install-status{font-size:10px;line-height:1.8;color:var(--mint);padding-top:18px;border-top:1px solid var(--line)}#install-native{width:100%;margin-bottom:20px}
@media(max-width:760px){.app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.install-button{font-size:9px;padding:8px;gap:5px}.top-right{gap:6px}.top-right .icon-button{width:30px;height:30px}.brand{font-size:15px;gap:5px}.brand small{font-size:5px}.topbar{height:68px}.command-bar button{min-height:36px}.mission{min-height:68px}}
@media(display-mode:standalone) and (max-width:760px){.page-heading{padding-top:18px;padding-bottom:18px}.page-heading h1{font-size:22px}.page-description{font-size:9px}.page-footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}}
