:root{color-scheme:dark;--bg:#0d141a;--panel:#151f27;--panel2:#1b2832;--line:#2a3943;--text:#eff4f3;--muted:#91a2ab;--mint:#87e4c3;--red:#f38178;--yellow:#e9c785;--blue:#9ebbe8;--radius:13px;--font:'Noto Sans KR',system-ui,'Malgun Gothic',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.6 var(--font);letter-spacing:-.25px}button,input,select{font:inherit}button,a,input,select,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);padding:8px 11px;transition:background .15s,border-color .15s}button:hover{background:#2a3c48;border-color:#627d8d}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}button.active{border-color:var(--mint);background:#244139;color:var(--mint)}input[type=checkbox]{accent-color:var(--mint)}input[type=range]{accent-color:var(--mint);width:100%;height:5px}input[type=number],select{color:var(--text);background:#101920;border:1px solid var(--line);border-radius:6px;padding:8px;width:100%;min-width:0}select{cursor:pointer}h1,h2,h3,p{margin:0}h2{font-size:14px;font-weight:700}h3{font-size:12px;font-weight:600}.topbar{height:82px;border-bottom:1px solid var(--line);padding:0 34px;display:flex;justify-content:space-between;align-items:center;background:#101920}.brand{display:flex;gap:13px;align-items:center;font-size:17px;line-height:1.3;font-weight:500}.brand b{font-weight:800}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:7px;font-weight:400;letter-spacing:.4px}.brand-mark{width:43px;height:43px;border:1px solid var(--mint);border-radius:11px;font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;text-align:center;line-height:43px;color:var(--mint);position:relative;background:#18332e}.brand-mark span{font-size:18px;position:absolute;right:-6px;top:-9px}.topnav{display:flex;align-items:center;gap:25px;color:#b3c1c7;font-size:12px}.topnav a:hover{color:var(--mint)}.prototype{font:10px 'Space Grotesk',sans-serif;letter-spacing:1.3px;display:flex;align-items:center;gap:9px}.prototype i,.canvas-label i{width:6px;height:6px;background:var(--mint);display:inline-block;border-radius:50%}.quiet{background:transparent;border:0}.quiet kbd{margin-left:10px}kbd{font-family:inherit;border:1px solid #52616c;padding:0 4px;border-radius:3px;color:#bdc9ce;font-size:10px}main{max-width:1760px;margin:0 auto;padding:27px 30px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-family:'Space Grotesk',sans-serif;letter-spacing:2.1px;font-size:10px;color:var(--mint);margin-bottom:7px}.intro h1{font-size:27px;font-weight:600;line-height:1.4;letter-spacing:-1px}.intro h1 em{color:var(--mint);font-style:normal;font-weight:800}.intro p{color:var(--muted);font-size:12px;margin-top:8px}.intro-note{border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--muted)}.intro-note strong{color:#d3dfdf;font-size:12px;font-weight:500}.tiny-label{font-size:9px;color:var(--mint)}.workspace{display:grid;grid-template-columns:227px minmax(400px,1fr) 280px;gap:15px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.left-panel,.right-panel{padding:19px 17px}.panel-heading{display:flex;align-items:center;gap:9px;margin-bottom:18px}.section-no{color:var(--mint);font:11px 'Space Grotesk',sans-serif;letter-spacing:1px}.map-card{width:100%;text-align:left;padding:0;overflow:hidden;background:#101b22;position:relative;margin-bottom:18px;border-color:#354a51}.map-art{height:93px;background:radial-gradient(ellipse at 70% 80%,#586347 0,transparent 65%),linear-gradient(125deg,#515c48,#213c3f 60%,#1a2b30);position:relative;overflow:hidden;background-size:cover;background-position:center}.map-lines{position:absolute;inset:12px 22px;transform:rotate(-12deg);background:linear-gradient(90deg,transparent 10%,#acc19a44 10%,#acc19a44 13%,transparent 13%,transparent 70%,#acc19a44 70%,#acc19a44 74%,transparent 74%),linear-gradient(0deg,transparent 30%,#c3d5b34d 30%,#c3d5b34d 35%,transparent 35%,transparent 78%,#c3d5b34d 78%,#c3d5b34d 82%,transparent 82%);border:2px solid #b8ccaa55;border-radius:8px}.map-tag{position:absolute;bottom:9px;left:11px;border:1px solid #d1e2bc66;color:#e1ead8;font:9px 'Space Grotesk';letter-spacing:1.2px;padding:2px 5px;background:#14252177}.map-copy{padding:10px 11px 12px}.map-copy strong{display:block;font-size:12px}.map-copy span{color:var(--muted);font-size:9px;display:block;margin-top:4px}.map-change{position:absolute;bottom:31px;right:11px;color:var(--mint);font-size:9px}.field-label{display:block;font-size:10px;color:var(--muted);margin-bottom:6px}.segmented{display:flex;margin-top:13px;gap:4px;padding:3px;border:1px solid var(--line);border-radius:7px;background:#101920}.segmented button{width:50%;font-size:11px;padding:6px 0;border:1px solid transparent;background:transparent;color:var(--muted)}.segmented button.active{background:#2a3d42;color:#d4e5e3;border-color:#435b61}.hint{font-size:10px;color:var(--muted);line-height:1.7;margin-top:8px}.divider{height:1px;background:var(--line);margin:18px 0}.subhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:5px}.team-toggle{display:flex;gap:4px}.team-toggle button{font-size:10px;padding:2px 7px;background:transparent;border:1px solid transparent}.team-toggle button.active{border-color:#3b6357;color:var(--mint);background:#213a32}.team-toggle button.enemy-active{color:var(--red);border-color:#754d4a;background:#402c2a}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.roster-hero{height:46px;border-radius:8px;padding:0;position:relative;background:#25333c;overflow:hidden}.roster-hero img{width:100%;height:100%;object-fit:cover}.roster-hero .hero-initial{font-size:18px;font-weight:800;color:#bdcfc9}.roster-hero.selected{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint)}.roster-hero:after{content:attr(data-short);position:absolute;bottom:0;left:0;right:0;background:#101920bb;font-size:7px;color:#fff;line-height:13px}.roster-actions{display:flex;justify-content:space-between;margin-top:8px}.text-btn{border:0;padding:0;background:none;font-size:10px;color:var(--mint);border-radius:2px}.text-btn:hover{background:transparent;color:#baffdf}.danger-text{color:#bd9893}.assumption,.model-tag{font-size:8px;border:1px solid #516158;color:#b7c7ae;padding:1px 4px;border-radius:3px}.switch-row{display:flex;justify-content:space-between;align-items:center;position:relative;font-size:11px;margin:14px 0;gap:6px;cursor:pointer}.switch-row input{position:absolute;right:0;opacity:0}.switch-row i{background:#394851;border-radius:12px;width:29px;height:16px;flex-shrink:0;position:relative;transition:.2s}.switch-row i:before{content:'';position:absolute;top:3px;left:3px;background:#9ba9af;width:10px;height:10px;border-radius:50%;transition:.2s}.switch-row input:checked+i{background:#396f5e}.switch-row input:checked+i:before{background:var(--mint);left:16px}.switch-row input:focus-visible+i{outline:2px solid var(--mint)}details summary{cursor:pointer;color:#9eb4bd;font-size:10px}.policy-details p{font-size:10px;color:var(--muted);margin:12px 0}.policy-details label{display:block;font-size:10px;margin:14px 0;color:#b7c4ca}.policy-details output{float:right;color:var(--mint);font:11px 'Space Grotesk'}.policy-details input{margin-top:10px}.panel-foot{font-size:9px;color:#738a96;line-height:2.1;margin-top:22px;border-top:1px solid var(--line);padding-top:14px}.panel-foot kbd{font-size:8px}.stage-toolbar{min-height:52px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:5px;border-bottom:1px solid var(--line);flex-wrap:wrap}.tool-group{display:flex;gap:3px}.tool{font-size:13px;padding:5px 8px;border-color:transparent;background:transparent;color:var(--muted)}.tool span{font-size:10px;margin-left:3px}.tool.active{background:#253c35;border-color:#406354}.zoom-tools{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--muted)}.zoom-tools button{font-size:10px;padding:3px 6px;background:transparent;border-color:transparent}.zoom-tools span{min-width:30px;text-align:center;font:10px 'Space Grotesk'}.canvas-wrap{width:100%;aspect-ratio:1.45;min-height:400px;max-height:650px;position:relative;background:#111c24;overflow:hidden}#battlefield{display:block;width:100%;height:100%;touch-action:none;user-select:none}#battlefield.tool-wall{cursor:crosshair}#battlefield.tool-erase{cursor:cell}#battlefield.tool-face,#battlefield.tool-jump{cursor:crosshair}.canvas-label{position:absolute;left:17px;top:15px;display:flex;gap:8px;align-items:center;font-size:9px;color:#8da2a7;pointer-events:none;letter-spacing:.3px}.canvas-label i{width:4px;height:4px}.canvas-hint{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);background:#172a31dd;border:1px solid #3a535d;color:#a9bfc6;border-radius:6px;padding:6px 12px;font-size:9px;pointer-events:none;white-space:nowrap}.scale{position:absolute;bottom:20px;left:18px;display:flex;flex-direction:column;align-items:center;color:#91a3ae;font-family:'Space Grotesk';pointer-events:none}.scale span{width:55px;border:1px solid #7f949f;border-top:0;height:5px}.scale small{font-size:9px;margin-top:4px}.model-label{position:absolute;right:12px;bottom:7px;font-size:7px;color:#6c818b;pointer-events:none}.canvas-notice{position:absolute;top:43px;left:50%;transform:translateX(-50%);background:#3b3021ee;border:1px solid #ad915b;color:#e9cf9c;padding:7px 14px;border-radius:6px;font-size:10px;max-width:85%;text-align:center;pointer-events:none}.legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 15px;border-top:1px solid var(--line);font-size:8px;color:#9bafb9}.legend>span{display:flex;align-items:center;gap:5px}.legend-line{width:16px;height:2px;display:inline-block}.legend-line.heal{background:var(--mint)}.legend-line.attack{background:var(--red)}.legend-line.blocked{height:0;border-top:2px dashed var(--yellow)}.legend-circle{width:10px;height:10px;border:1px dashed #7c94a5;border-radius:50%}.legend label{display:flex;align-items:center;gap:4px}.legend input{width:10px;height:10px;margin:0}.playback{display:flex;align-items:center;gap:8px;padding:13px 14px;border-top:1px solid var(--line);background:#101a22}.playback button{font-size:10px;padding:7px 10px}.playback .play-btn{background:var(--mint);color:#17382c;border-color:var(--mint);font-weight:800;min-width:134px}.play-btn.playing{background:#314b43;border-color:#588c76;color:var(--mint)}.reset-btn{background:transparent!important;border-color:transparent!important;color:#95a8b3}.time-display{margin-left:auto;display:flex;flex-direction:column;line-height:1.5}.time-display span{font-size:7px;color:#7d939f}.time-display strong{font:16px 'Space Grotesk';letter-spacing:.8px}.playback select{width:50px;font-size:9px;padding:4px}.damage-toggle{display:flex;align-items:center;gap:3px;font-size:8px;color:var(--muted);white-space:nowrap}.damage-toggle input{width:11px;height:11px}.ability-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px 13px 0}.ability{display:flex;align-items:center;gap:8px;text-align:left;position:relative;background:#1e2a33;border-color:#354650;padding:11px 10px}.ability kbd{width:22px;height:24px;line-height:22px;text-align:center;font-size:12px;color:var(--yellow);border-color:#7c6c4a;background:#3b3526}.ability strong{font-size:11px;display:block;font-weight:600}.ability small{font-size:8px;display:block;color:var(--muted);margin-top:2px}.ability-icon{margin-left:auto;font-size:24px;line-height:1;color:var(--yellow)}.enemy-square{background:#4f3132;color:var(--red);font-size:10px;padding:2px 5px;border-radius:3px}.enemy-ability .ability-icon{color:var(--red)}.cooldown-row{padding:12px 15px 15px;display:flex;align-items:center;gap:14px;font-size:9px;color:var(--muted)}.cooldown-row>span{color:#c6d1d2}.cooldown-row label{display:flex;gap:3px;align-items:center}.cooldown-row input{width:11px;height:11px;margin:0}.cooldown-row button{margin-left:auto}.right-panel{padding:19px 17px 16px}.right-panel .panel-heading{margin-bottom:14px}.live-dot{font:8px 'Space Grotesk';letter-spacing:1px;color:var(--mint);margin-left:auto}.live-dot:before{content:'';display:inline-block;background:var(--mint);width:4px;height:4px;border-radius:50%;margin-right:5px}.risk-card{background:linear-gradient(145deg,#244037,#1d2b2b);padding:14px;border:1px solid #3c5c4a;border-radius:9px;--risk-color:var(--mint)}.risk-card.risk-mid{background:linear-gradient(145deg,#3a3527,#282a26);border-color:#72613f;--risk-color:var(--yellow)}.risk-card.risk-high{background:linear-gradient(145deg,#422f30,#29242a);border-color:#6b4547;--risk-color:var(--red)}.risk-top{display:flex;justify-content:space-between;align-items:center;gap:5px;color:#c6d7ce;font-size:10px}.risk-value{display:flex;align-items:baseline;margin:5px 0 9px;gap:5px;color:var(--risk-color)}.risk-value>strong{font:600 49px/1.3 'Space Grotesk'}.risk-value>span{font:11px 'Space Grotesk';color:#8a9f99}.risk-value>b{font-size:11px;margin-left:auto;font-weight:600}.risk-track{background:#101a1a99;height:4px;border-radius:5px;overflow:hidden}.risk-track i{height:100%;display:block;width:0;background:var(--risk-color);transition:width .12s}.risk-card p{font-size:9px;line-height:1.7;color:#b5c5bf;margin-top:10px;min-height:30px}.metrics{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 14px;gap:12px 0}.metrics>div{padding-left:12px;border-left:1px solid var(--line)}.metrics>div:nth-child(2n+1){padding-left:0;border-left:0}.metrics span{display:block;font-size:9px;color:var(--muted);margin-bottom:2px}.metrics strong{font:600 25px 'Space Grotesk'}.metrics div:nth-child(3) strong{color:var(--mint)}.metrics div:nth-child(4) strong{color:var(--red)}.metrics strong small{font:10px var(--font);color:var(--muted)}.health-section>div:first-child{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-bottom:7px}.health-section strong{font:11px 'Space Grotesk';color:#d2dfdc}.health-track{height:6px;background:#26343d;border-radius:4px;overflow:hidden}.health-track i{display:block;background:#9bbac9;height:100%;width:100%}.small-muted{font-size:8px;color:#79929d}.insights{display:flex;flex-direction:column;gap:9px}.insight{display:flex;align-items:start;gap:8px;padding:9px 10px;background:#1d2a33;border-radius:6px;font-size:9px;line-height:1.8;color:#bdcbd1}.insight>span{font-size:12px;line-height:1.6;color:var(--yellow);flex-shrink:0}.insight.good>span{color:var(--mint)}.insight.danger>span{color:var(--red)}.healer-list{display:flex;flex-direction:column;gap:9px}.healer-row{display:flex;align-items:center;gap:8px}.mini-portrait{width:30px;height:30px;flex-shrink:0;border:1px solid #43615f;border-radius:50%;background:#293f46;overflow:hidden;display:grid;place-items:center;color:var(--mint);font-size:12px}.mini-portrait img{width:100%;height:100%;object-fit:cover}.healer-row>div:nth-child(2){flex:1;min-width:0}.healer-row strong{display:block;font-size:10px;font-weight:500}.healer-row small{font-size:8px;color:var(--muted);display:block;overflow-wrap:anywhere}.connection-tag{font-size:8px;color:var(--mint);white-space:nowrap}.connection-tag.blocked{color:var(--yellow)}.barrier-info{margin-top:14px;padding:10px;border:1px solid #486674;border-radius:7px;font-size:9px;color:#a9c2cf;background:#192a35}.barrier-info strong{display:block;color:#cfdfeb}.inspector summary{font-size:10px;color:#9aadb8}.inspector summary strong{float:right;color:#d1e3dd;font-size:10px;font-weight:500}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.inspector-grid label{color:var(--muted);font-size:8px}.inspector-grid input{padding:5px 6px;margin-top:3px;font:11px 'Space Grotesk'}.angle-label{display:block;font-size:8px;color:var(--muted);margin-top:11px}.angle-label output{float:right;color:var(--mint);font:10px 'Space Grotesk'}.angle-label input{margin-top:9px}.inspector .hint{font-size:8px}.bottom-strip{display:flex;gap:21px;align-items:center;border:1px solid var(--line);border-radius:10px;margin:18px 0 0;padding:16px 20px;background:#131e25}.bottom-strip>div{display:flex;gap:10px;align-items:center}.bottom-strip strong{font-size:11px;font-weight:500}.bottom-strip p{font-size:10px;color:var(--muted)}.bottom-strip p b{color:#c8d8d4;margin-right:6px;font-weight:500}.bottom-strip a{color:var(--mint);font-size:9px;margin-left:auto;white-space:nowrap}footer{display:flex;justify-content:space-between;gap:20px;color:#6f8692;font-size:8px;padding:19px 0 23px}footer>div{display:flex;gap:16px}footer .text-btn{font-size:9px;color:#9aafb8}dialog{background:#151f28;border:1px solid #4a5d69;color:var(--text);border-radius:17px;width:min(780px,95vw);max-height:90vh;padding:28px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#060d13b8;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}.dialog-heading h2{font-size:22px;letter-spacing:-.7px}.close-btn{font-size:24px;line-height:1;padding:1px 7px;border:0;background:transparent;color:var(--muted)}dialog>p{color:var(--muted);font-size:12px;line-height:1.8}.map-library{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:23px 0}.library-card{padding:0;text-align:left;overflow:hidden}.library-card .map-art{height:105px}.library-card strong{display:block;font-size:13px;padding:12px 12px 0}.library-card p{font-size:10px;color:var(--muted);padding:6px 12px 13px}.library-card .status-tag{display:block;font-size:9px;color:var(--yellow);padding:0 12px 12px}.library-card:disabled{opacity:.7}.upload-map{border:1px solid var(--line);padding:19px;border-radius:10px;background:#111b23}.upload-map h3{font-size:14px}.upload-map p{font-size:11px;color:var(--muted);margin:7px 0 15px}.upload-map>label{font-size:11px;display:inline-flex;align-items:center;gap:7px;margin:5px 12px 5px 0}.upload-map input[type=number]{width:65px;font:12px 'Space Grotesk'}.upload-button{padding:7px 12px;background:#29443b;color:var(--mint);border:1px solid #4b7766;border-radius:6px;cursor:pointer}.help-steps{padding-left:22px;font-size:12px;line-height:1.9;color:#b8c9ce}.help-steps li{margin:16px 0;padding-left:4px}.help-steps b{color:#e1ebe8;display:block}.help-note{border:1px solid #485747;border-radius:8px;background:#253028;padding:16px}.help-note strong{font-size:12px;color:var(--yellow)}.help-note p{font-size:11px;color:#b7c5bb;line-height:1.9;margin:9px 0}.help-note a{font-size:11px;color:var(--mint)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#d5ebe1;color:#16392b;padding:11px 20px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10;box-shadow:0 4px 20px #0006;max-width:90vw}.toast.visible{opacity:1;transform:translate(-50%,0)}.unit-token{cursor:grab}.unit-token:active{cursor:grabbing}.token-label{font-family:var(--font);font-size:1.0px;font-weight:600;paint-order:stroke;stroke:#0c141b;stroke-width:.35px;stroke-linejoin:round;fill:#dbe8e9;pointer-events:none}.token-initial{font:700 1.7px var(--font);fill:#e5f0ec;pointer-events:none}.jump-ghost{pointer-events:none}.wall-hit{cursor:cell}.offscreen-indicator{font-size:1.2px;fill:var(--yellow)}
@media(min-width:1600px){.workspace{grid-template-columns:249px minmax(500px,1fr) 305px}.canvas-wrap{min-height:550px}.left-panel,.right-panel{padding:21px}.map-art{height:110px}.intro h1{font-size:30px}}
@media(max-width:1250px){main{padding:22px 18px 0}.topbar{padding:0 22px}.workspace{grid-template-columns:205px minmax(350px,1fr) 248px;gap:10px}.left-panel,.right-panel{padding:16px 13px}.tool span{display:none}.tool{padding:4px 8px}.canvas-wrap{min-height:390px}.damage-toggle{display:none}.legend{gap:8px;padding:9px}.ability{padding:9px 7px;gap:5px}.ability strong{font-size:10px}.ability-icon{font-size:19px}.ability kbd{width:18px;height:21px;font-size:10px;line-height:19px}.ability-row{padding:9px 9px 0;gap:5px}.bottom-strip{gap:14px;padding:14px}.bottom-strip p{font-size:9px}.bottom-strip>div strong{font-size:10px}.playback{gap:4px;padding:11px 9px}.playback button{font-size:9px;padding:7px}.playback .play-btn{min-width:115px}.cooldown-row{gap:10px}}
@media(max-width:1060px){.workspace{grid-template-columns:190px minmax(350px,1fr)}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 20px;align-items:start}.right-panel .panel-heading{grid-column:1/-1;margin-bottom:0}.right-panel>.divider{display:none}.risk-card{grid-row:2/4}.metrics{margin:0}.health-section{grid-column:2;grid-row:3}.right-panel>.subhead{display:none}.insights{grid-column:3;grid-row:2/5}.healer-list{grid-column:1;grid-row:4}.inspector{grid-column:2;grid-row:4}.right-panel .barrier-info{grid-column:1/-1}.bottom-strip{flex-wrap:wrap}.intro-note{display:none}.canvas-wrap{min-height:430px}.topnav{gap:15px}.prototype{display:none}}
@media(max-width:700px){.topbar{height:70px;padding:0 15px}.brand{font-size:14px;gap:9px}.brand-mark{width:35px;height:35px;line-height:35px;font-size:22px}.brand small{font-size:8px}.topnav{gap:7px;font-size:9px}.quiet{font-size:10px;padding:5px}.quiet kbd{display:none}main{padding:20px 10px 0}.intro{margin-bottom:18px;padding:0 5px}.intro h1{font-size:21px}.intro .eyebrow{font-size:8px;letter-spacing:1.7px}.intro p{font-size:10px}.workspace{display:flex;flex-direction:column}.panel{width:100%}.left-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px}.left-panel .panel-heading{grid-column:1/-1;margin-bottom:0}.map-card{grid-column:1;grid-row:2/6;margin-bottom:0}.map-art{height:95px}.left-panel>.field-label{margin:0;align-self:end}.left-panel>select{padding:6px}.segmented{margin:0}.left-panel>.hint{grid-column:2;margin:0;font-size:8px}.left-panel>.divider,.left-panel>.panel-foot{display:none}.left-panel>.subhead{grid-column:1/-1;margin:2px 0 0}.left-panel .roster{grid-column:1/-1;grid-template-columns:repeat(8,1fr);gap:6px}.roster-hero{height:43px}.roster-actions{grid-column:1/-1;margin:0}.switch-row{margin:3px 0;font-size:10px}.policy-details{grid-column:1/-1}.policy-details>label{display:inline-block;width:45%;margin:10px 2%}.policy-details p{margin:8px 0}.stage-panel{order:2}.right-panel{order:3;display:block;padding:16px}.right-panel .panel-heading{margin-bottom:13px}.right-panel .risk-card{margin-bottom:14px}.right-panel .metrics{margin:16px 0;grid-template-columns:repeat(4,1fr);gap:8px}.metrics>div:nth-child(3){border-left:1px solid var(--line);padding-left:10px}.metrics strong{font-size:23px}.metrics span{font-size:8px}.right-panel>.divider{display:block;margin:16px 0}.right-panel>.subhead{display:flex}.healer-list{display:grid;grid-template-columns:1fr 1fr}.risk-card .risk-value>strong{font-size:40px}.risk-card p{min-height:0}.stage-toolbar{padding:7px;min-height:44px}.canvas-wrap{min-height:360px;aspect-ratio:1.15;max-height:500px}.legend{font-size:7px;gap:8px}.legend>span:nth-child(4){display:none}.canvas-hint{font-size:8px;bottom:31px;padding:4px 8px}.canvas-label{left:10px;top:10px;font-size:8px}.model-label{font-size:6px}.scale{left:10px;bottom:9px}.scale span{width:35px}.playback{padding:10px;gap:6px}.time-display strong{font-size:14px}.ability-row{gap:6px}.ability{padding:9px 6px}.ability-icon{display:none}.ability strong{font-size:9px}.ability small{font-size:7px}.cooldown-row{gap:12px}.bottom-strip{padding:14px;gap:10px}.bottom-strip>div{width:100%}.bottom-strip p{width:100%;font-size:10px}.bottom-strip a{margin-left:0}footer{flex-direction:column;gap:10px;padding:16px 4px;font-size:7px}.map-library{grid-template-columns:1fr;gap:10px}.library-card{display:grid;grid-template-columns:100px 1fr}.library-card .map-art{grid-row:1/4;height:100%}.library-card strong{padding:10px 12px 0}.library-card p{padding:4px 12px 5px}.library-card .status-tag{padding-bottom:9px}dialog{padding:20px}.dialog-heading h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.roster-hero img{position:absolute;inset:0}.tool-retreat{cursor:crosshair}.tactical-readouts{display:flex;flex-direction:column;gap:5px;margin-top:10px;color:#a6bac6;font-size:9px}.tactical-readouts p{padding:4px 0;border-bottom:1px solid #2a3943}.tactical-readouts #landingPreview{color:var(--yellow);font-weight:600}.manual-facing{display:flex;align-items:center;gap:5px;font-size:9px;color:#b1c4cb;margin-top:8px}.manual-facing input{width:11px;height:11px}.unit-token:focus-visible{outline:none}.unit-token:focus-visible>circle{stroke:#fff;stroke-width:.3}

.map-library-message:not(:empty){color:var(--yellow);padding:9px 12px;border:1px solid #6f5c3d;border-radius:6px;margin:0 0 13px}

.formation-settings { margin-top: 9px; }
.representative-control { margin-top: 10px; }
.representative-control select { border-color: #635740; font-size: 11px; }
.formation-settings .switch-row { margin: 0 0 6px; }
.formation-settings .policy-details label { width: auto; margin: 8px 0 0; }
.formation-settings .policy-details input { margin: 0 4px 0 0; vertical-align: middle; }
.legend select { padding: 2px 4px; font-size: 9px; width: auto; }
.heal-distance-legend i { width: 28px; height: 6px; border-radius: 2px; background: linear-gradient(90deg,#b5fa85,#547044,#233728); }
.legend .heal-distance-legend[hidden], .damage-position-field[hidden] { display: none; }
.healer-row .heal-distance.near { color: #aee797; }
.healer-row .heal-distance.mid { color: #c4d7a9; }
.healer-row .heal-distance.far { color: var(--yellow); }
.damage-position-field { margin: 10px 0; }
.damage-position-field > label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.damage-position-field select { width: 100%; font-size: 11px; }
.position-chip circle { fill: #223649; stroke: #a9cce7; stroke-width: .10; }
.position-chip.flank circle { fill: #3f3025; stroke: #f2ca9d; }
.position-chip text { fill: #fff; font: 700 .76px system-ui, sans-serif; }
@media(max-width:700px) { .formation-settings, .representative-control { grid-column: 1/-1; margin-top: 0; } }

.tool-freeWall { cursor: crosshair; }
.stage-reset { margin-left: auto; white-space: nowrap; color: var(--text); font-size: 10px; }
.combat-settings { display: flex; flex-wrap: wrap; gap: 6px 13px; align-items: center; padding: 8px 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.combat-settings label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.combat-settings input { margin: 0; accent-color: var(--mint); }
.respawn-panel { padding: 8px 13px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.respawn-panel[hidden], .respawn-panel :empty { display: none; }
.respawn-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.respawn-panel strong { color: #f3aea6; }
.respawn-panel ul { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 5px 0 0; padding: 0; list-style: none; }
.respawn-panel li { color: #e4c6c2; }
.respawn-panel p { margin: 5px 0 0; }
.respawn-panel li[data-team="ally"], .respawn-panel li[data-team="ally"] strong { color: var(--mint); }
.spawn-controls, .defeat-actions { display: flex; gap: 5px 10px; flex-wrap: wrap; }
.spawn-phase { white-space: pre-line; }
.objective-info { color: #f5b597; }
.switch-row[hidden] { display: none; }
.engagement-control { margin-bottom: 12px; }
.engagement-control select { width: 100%; }
.engagement-control .hint { margin: 7px 0 4px; line-height: 1.55; }
.engagement-control a { font-size: 10px; color: var(--mint); }
@media(max-width:700px) {
  .left-panel .map-card { grid-row: 2 / 5; }
  .engagement-control { margin: 0; }
  .engagement-control select { padding: 6px; }
}
#actionStatus { color: var(--yellow); }
.defeat-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; background: #351e24; color: #ffd1cc; border-top: 1px solid #82484b; }
.defeat-bar p { margin: 0; font-size: 11px; }
.defeat-bar p span { display: block; margin-top: 3px; color: #e8a9a6; }
.defeat-bar button { flex: none; background: #8b3f44; border: 1px solid #c47878; color: #fff; border-radius: 5px; padding: 6px 9px; font: inherit; cursor: pointer; }
.defeat-bar[hidden], .unit-menu[hidden], .menu-position[hidden], .map-credit[hidden] { display: none; }
.unit-token.eliminated image { filter: grayscale(1) brightness(.65); }
.unit-status { paint-order: stroke; stroke: #10191e; stroke-width: .27; stroke-linejoin: round; pointer-events: none; }
.unit-menu-trigger { margin-top: 7px; }
.unit-menu { position: fixed; z-index: 50; width: min(290px,calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; box-sizing: border-box; padding: 13px; border: 1px solid #54707b; border-radius: 9px; background: #15232b; color: #e7f0f2; box-shadow: 0 10px 30px #071116c9; }
.unit-menu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.unit-menu-head span { display: block; color: var(--muted); font-size: 9px; margin-bottom: 4px; }
.unit-menu-head strong { font-size: 14px; }
.unit-menu-head button { padding: 2px 8px; background: #273b44; color: #edf7f8; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.unit-menu .inspector-grid { margin-top: 8px; }
.unit-menu .angle-label { display: block; margin-top: 10px; }
.unit-menu .menu-check, .unit-menu-bottom, .menu-position { font-size: 11px; }
.unit-menu input[type=checkbox] { accent-color: var(--mint); }
.unit-menu-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 6px; }
.menu-position { display: block; margin-top: 9px; }
.menu-position select { display: block; width: 100%; margin-top: 4px; font-size: 11px; }
.map-credit { margin: -4px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.map-credit a { color: var(--mint); }
.map-art.has-image .map-lines { display: none; }
@media(max-width:700px) { .map-credit { grid-column: 1/-1; margin: 0; } }

/* The landing screen and the battle workspace share one viewport. */
body:has(.app-shell) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.app-shell {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 10px clamp(10px, 1.4vw, 24px) 12px;
}

.app-shell [hidden] { display: none !important; }
.topbar:has(~ .app-shell) { flex: none; height: 56px; }
.topbar:has(~ .app-shell) .brand-mark { width: 33px; height: 33px; font-size: 22px; line-height: 31px; }
.topbar:has(~ .app-shell) .brand small { margin-top: 2px; }

.landing {
  width: min(100%, 1120px);
  height: 100%;
  margin: 0 auto;
  padding: clamp(10px, 2.4vh, 26px) 4px;
  overflow: auto;
}

.landing .intro { gap: 20px; padding: 0 0 17px; margin: 0; }
.landing .intro h1 { font-size: clamp(23px, 3.4vw, 40px); line-height: 1.24; letter-spacing: -.045em; }
.landing .intro-note { display: flex; flex: none; }
.landing-library {
  padding: clamp(12px, 2.1vh, 24px) clamp(14px, 2vw, 25px);
  background: linear-gradient(135deg, #192630, #151f27 58%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.landing-library-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.landing-library-head h2 { font-size: clamp(16px, 2vw, 22px); letter-spacing: -.6px; }
.landing-actions, .storage-actions { display: flex; gap: 6px 12px; flex-wrap: wrap; }
.landing-actions button { padding: 4px 6px; background: #203139; border-radius: 5px; }
.landing-library > p { color: var(--muted); font-size: 11px; }
.landing-library .library-description { margin: 3px 0 0; }
.landing-credit { margin: 9px 0 0; color: var(--muted); font-size: 9px; }
.landing .map-library { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.landing .library-card { display: block; min-width: 0; background: #1b2933; border-color: #3a4d59; }
.landing .library-card:hover { border-color: #7b9f9a; }
.landing .library-card[aria-pressed="true"], .landing .library-card.active { border-color: var(--mint); box-shadow: inset 0 -3px #87e4c36b; }
.landing .library-card .map-art { height: clamp(80px, 19vh, 165px); }
.landing .library-card strong { padding: 7px 11px 0; }
.landing .library-card p { padding: 3px 11px 5px; }
.landing .library-card .status-tag { padding: 0 11px 8px; }
.landing-details { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
#landingEngagements, .landing .upload-map { min-width: 0; padding: 10px 12px; }
#landingEngagements { border: 1px solid var(--line); border-radius: 10px; background: #111b23; }
.landing-engagement-head h3, .landing .upload-map h3 { font-size: 13px; }
.landing .upload-map p { margin: 4px 0 8px; font-size: 10px; color: var(--muted); }
.landing-engagement-head { margin-bottom: 5px; }
.landing-engagement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.engagement-choice { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 8px; text-align: left; font-size: 11px; }
.engagement-choice:hover { color: var(--mint); border-color: #679586; }
.landing .upload-map label { margin: 2px 6px 3px 0; }
.landing .upload-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.landing .upload-controls > label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.landing .upload-controls .upload-button { padding: 5px 8px; }
.landing .upload-map input[type=number] { width: 56px; padding: 5px; }
.landing .upload-map button { padding: 5px 8px; font-size: 10px; }
.landing .map-library-message:not(:empty) { padding: 5px 8px; margin: 0 0 8px; }

.app-shell .workspace {
  position: relative;
  display: grid;
  grid-template-columns: clamp(175px, 17vw, 230px) minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  height: 100%;
  min-height: 0;
}

.workspace > .left-panel {
  display: block;
  min-height: 0;
  padding: 13px 11px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.workspace .left-panel .panel-heading { margin-bottom: 11px; }
.workspace .left-panel .map-card { margin-bottom: 9px; }
.workspace .left-panel .map-art { height: clamp(56px, 12vh, 102px); }
.workspace .left-panel .map-copy { padding: 6px 8px 8px; }
.workspace .left-panel .map-credit { margin: 0 0 7px; }
.workspace .left-panel > .subhead { display: flex; }
.workspace .left-panel .insight { padding: 6px 7px; line-height: 1.5; }
.workspace .left-panel .divider { margin: 9px 0; }
.workspace .left-panel .insights { gap: 5px; }

.workspace > .stage-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workspace .stage-toolbar { flex: none; min-height: 40px; gap: 3px 7px; padding: 5px 8px; }
.workspace .toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.workspace .toolbar-actions button { padding: 4px 7px; font-size: 10px; }
.workspace .tool[aria-expanded="true"] { background: #253c35; border-color: #406354; color: var(--mint); }
.workspace .tool { padding: 4px 5px; }
.workspace .tool span { display: inline; }
.workspace .canvas-wrap { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto; }
.workspace .legend { flex: none; gap: 4px 10px; min-height: 29px; padding: 5px 9px; font-size: 9px; }
.workspace .canvas-label { top: 9px; left: 10px; }
.workspace .canvas-notice { z-index: 4; }
.workspace .canvas-hint { bottom: 68px; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
.workspace .model-label { top: 26px; bottom: auto; left: 10px; right: auto; }
.workspace .scale { bottom: 79px; left: 10px; }

.workspace .ability-hud, .workspace .playback, .workspace .hud-readouts {
  position: absolute;
  z-index: 2;
  border: 1px solid #55717d83;
  border-radius: 8px;
  background: #121e26ec;
  box-shadow: 0 6px 20px #090f1566;
}

.workspace .ability-hud { bottom: 7px; left: 7px; max-width: calc(100% - 164px); }
.control-banner, .defender-event {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid #d4a268;
  border-radius: 7px;
  background: #231c1af0;
  color: #ffe3a4;
  font-size: 11px;
  pointer-events: none;
  white-space: nowrap;
}
.control-banner span { margin-left: 8px; font-variant-numeric: tabular-nums; }
.defender-event { border-color: #a57262; background: #20212be8; color: #ffe2d4; }
.combat-settings { flex-wrap: wrap; }
.workspace .ability-row { display: flex; gap: 4px; padding: 4px; }
.workspace .ability { min-width: 0; padding: 4px 6px; gap: 4px; }
#jumpBtn kbd { width: auto; padding-inline: 4px; }
.workspace .ability strong { font-size: 10px; }
.workspace .ability small { font-size: 8px; }
.workspace .ability-icon { display: none; }
.workspace .cooldown-row { flex-wrap: wrap; gap: 3px 7px; padding: 0 6px 5px; }
.workspace .playback { bottom: 7px; right: 7px; display: grid; grid-template-columns: auto auto; gap: 3px 6px; padding: 5px; }
.workspace .playback #actionStatus { grid-column: 1/-1; max-width: 235px; font-size: 9px; }
.workspace .playback #actionStatus:empty { display: none; }
.workspace .playback .play-btn { min-width: 0; padding: 6px 7px; font-size: 10px; }
.workspace .time-display { margin: 0; padding: 0 3px; }
.workspace .time-display strong { font-size: 14px; }

.workspace .hud-readouts {
  display: block;
  top: 7px;
  right: 7px;
  width: clamp(190px, 19vw, 252px);
  max-height: calc(100% - 84px);
  padding: 8px 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.workspace .hud-readouts .panel-heading { margin: 0 0 6px; }
.workspace .hud-readouts .risk-card { padding: 8px; margin: 0; }
.workspace .hud-readouts .risk-value { margin: 0 0 4px; }
.workspace .hud-readouts .risk-value > strong { font-size: 34px; }
.workspace .hud-readouts .risk-card p { min-height: 0; margin-top: 5px; line-height: 1.5; }
.workspace .hud-readouts .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 0; margin: 6px 0; }
.workspace .hud-readouts .metrics > div:nth-child(2n+1) { border: 0; padding: 0; }
.workspace .hud-readouts .metrics strong { font-size: 19px; }
.workspace .hud-readouts .metrics span { margin: 0; }
.workspace .hud-readouts > .divider { display: block; margin: 7px 0; }
.workspace .hud-readouts > .subhead { display: flex; margin-bottom: 5px; }
.workspace .hud-readouts .healer-list { display: flex; gap: 4px; }
.workspace .defeat-bar { position: absolute; z-index: 5; bottom: 69px; left: 7px; right: 7px; border: 1px solid #82484b; border-radius: 8px; }
#arena.readouts-closed .hud-readouts { display: none; }
#sceneInfoBtn { display: none; }

#settingsDialog, #rosterDialog { max-height: calc(100dvh - 24px); padding: clamp(13px, 2.2vh, 24px); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings-section { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #111b23; padding: 10px; }
.settings-section:has(.storage-actions) { grid-column: 1/-1; }
.settings-section .segmented { margin-top: 5px; }
.settings-section .combat-settings, .settings-section .respawn-panel { padding: 6px 0; }
#rosterDialog { position: fixed; inset: 104px 12px auto auto; width: min(350px, calc(100vw - 24px)); margin: 0; border-radius: 11px; z-index: 8; }
#rosterDialog .dialog-heading { margin-bottom: 8px; }
#rosterDialog .roster { grid-template-columns: repeat(auto-fit, minmax(43px, 1fr)); }
.unit-menu #menuBarrierBtn { width: 100%; margin-top: 8px; padding: 6px; border: 1px solid #49655b; border-radius: 5px; background: #233a35; }

@media (max-height: 740px) {
  .landing { padding-block: 8px; }
  .landing .intro { padding-bottom: 10px; }
  .landing-library { padding-block: 10px; }
  .landing .map-library { margin-block: 8px; }
  .landing .library-card .map-art { height: clamp(61px, 15vh, 112px); }
}

@media (max-height: 650px) {
  .topbar:has(~ .app-shell) { height: 48px; }
  .app-shell { padding-block: 6px; }
  .landing { padding-block: 5px; }
  .landing .intro { padding-bottom: 7px; }
  .landing .intro h1 { font-size: clamp(22px, 2.9vw, 34px); }
  .landing .intro p { margin-top: 4px; }
  .landing-library-head h2 { font-size: 18px; }
  .landing .library-card .map-art { height: clamp(60px, 12vh, 78px); }
  .landing .library-card .status-tag { padding-bottom: 6px; }
  .landing-credit { margin-top: 5px; }
  .workspace > .left-panel { padding: 8px 9px; }
  .workspace .left-panel .panel-heading { margin-bottom: 7px; }
  .workspace .left-panel .map-card { margin-bottom: 6px; }
  .workspace .left-panel .map-art { height: 46px; }
  .workspace .left-panel .map-copy { padding-block: 4px 6px; }
  .workspace .left-panel .engagement-control { margin-bottom: 6px; }
  .workspace .left-panel .engagement-control select { padding-block: 5px; }
  .workspace .left-panel .subhead, .workspace .left-panel .divider { margin-block: 5px; }
  .workspace .left-panel .insights, .workspace .left-panel .tactical-readouts { gap: 3px; }
  .workspace .left-panel .insight { padding-block: 4px; line-height: 1.4; }
  .workspace .left-panel .tactical-readouts { margin-top: 5px; }
  .workspace .left-panel .tactical-readouts p { padding-block: 2px; }
}

@media (max-width: 1060px) {
  .workspace .tool span { display: none; }
  #arenaBackBtn span, #rosterBtn span, #settingsBtn span { display: inline; }
  .workspace .hud-readouts { display: none; width: min(220px, 64vw); }
  #arena.readouts-open .hud-readouts { display: block; }
}

@media (max-width: 760px) {
  .landing .intro { flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
  .landing .intro-note { border: 0; padding: 0; gap: 1px; }
  .landing-details { grid-template-columns: minmax(0, 1fr); }
  .landing-engagement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace > .left-panel { display: none; position: absolute; z-index: 7; top: 84px; left: 4px; width: min(245px, calc(100% - 8px)); max-height: calc(100% - 88px); box-shadow: 0 7px 21px #0b1219a8; }
  #arena.scene-info-open > .left-panel { display: block; }
  #sceneInfoBtn { display: inline-block; }
  .workspace .tool { min-width: 27px; }
  .workspace .legend { gap: 4px 7px; }
  .workspace .legend > span:nth-child(4) { display: flex; }
  .workspace .canvas-hint { bottom: 70px; }
  .workspace .scale { bottom: 100px; }
}

@media (max-width: 480px) {
  .topbar:has(~ .app-shell) { padding: 0 10px; }
  .topbar:has(~ .app-shell) .prototype { display: none; }
  .app-shell { padding: 5px 6px 6px; }
  .landing { padding-block: 6px; }
  .landing .intro { gap: 6px; padding-bottom: 7px; }
  .landing .intro .eyebrow { margin-bottom: 4px; }
  .landing .intro-note { display: grid; grid-template-columns: auto 1fr; gap: 0 7px; align-items: baseline; }
  .landing .intro-note strong { font-size: 11px; }
  .landing .intro-note > :last-child { grid-column: 1/-1; }
  .landing-library { padding: 10px; }
  .landing-details { gap: 6px; }
  #landingEngagements, .landing .upload-map { padding: 7px 9px; }
  .landing .upload-map p { margin-block: 3px 4px; }
  .landing .upload-map label { margin: 1px 2px 2px 0; }
  .landing-credit { margin-top: 6px; }
  .landing .map-library { gap: 5px; margin: 8px 0; }
  .landing .library-card .map-art { height: clamp(50px, 8vh, 66px); }
  .landing .library-card strong, .landing .library-card p, .landing .library-card .status-tag { padding-inline: 5px; }
  .landing .library-card strong { font-size: 11px; }
  .landing .library-card p, .landing .library-card .status-tag { font-size: 8px; }
  .landing .library-card .map-tag { display: none; }
  .workspace .stage-toolbar { gap: 3px 4px; padding: 4px; }
  .workspace .toolbar-actions { gap: 2px; }
  .workspace .toolbar-actions button { padding: 4px 5px; }
  #rosterBtn span, #settingsBtn span { display: none; }
  .workspace .playback { grid-template-columns: 1fr; gap: 2px; }
  .workspace .playback #actionStatus { grid-column: auto; max-width: 118px; font-size: 8px; }
  .workspace .playback .play-btn { font-size: 9px; }
  .workspace .time-display { flex-direction: row; align-items: baseline; gap: 4px; }
  .workspace .time-display strong { font-size: 12px; }
  .workspace .ability-hud { max-width: calc(100% - 142px); }
  .workspace .ability small { font-size: 7px; }
  .workspace .cooldown-row { font-size: 8px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}

.workspace .canvas-label {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border: 1px solid #657681;
  border-radius: 6px;
  background: #101922ee;
  color: #f1f4f5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}
#sceneLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace .model-label { top: 38px; }
.map-art.route-diagram { background-color: #292b31; background-size: contain; background-repeat: no-repeat; background-position: center; }

.map-navigator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  background: #121c24;
}
.map-navigator > strong { color: #c8d5da; font-size: 10px; white-space: nowrap; }
.route-navigator > strong { color: #ffe1a5; }
.map-nav-stops { display: flex; gap: 4px; min-width: 0; }
.map-nav-stops button, .engagement-choice-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.map-nav-stops button { padding: 4px 7px; white-space: nowrap; font-size: 10px; line-height: 1.35; }
.map-nav-stops button[aria-current="step"] { color: var(--mint); border-color: #6aa28f; background: #223d36; }
.route-navigator button[aria-current="step"] { color: #fff0cc; border-color: #ddae68; background: #473523; }
.map-stop-number {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #ffe3af;
  background: #3d3227;
  font-size: 10px;
  font-weight: 800;
}
[aria-current="step"] .map-stop-number { background: #ffe1a5; color: #342619; }
.map-nav-key { display: flex; gap: 8px; margin-left: auto; color: #c6d0d6; font-size: 9px; white-space: nowrap; }
.map-nav-key > span { display: flex; align-items: center; gap: 4px; }
.map-nav-key > span::before { content: ''; display: inline-block; width: 13px; border-top: 2px solid #91a7ad; }
.map-nav-key .map-key-route::before { border-top: 2px dashed #ffe1a5; }
.training-map-label {
  text-anchor: middle;
  font-family: var(--font);
  font-size: 1.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #12232d;
  stroke-width: .38px;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  .map-nav-key { display: none; }
}
@media (max-width: 520px) {
  .map-navigator { padding: 5px; }
  .map-navigator > strong { display: none; }
  .map-nav-stops { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 1; }
  .map-nav-stops button { justify-content: center; gap: 3px; padding: 5px 3px; font-size: 9px; }
  .map-nav-stops button > span:last-child { white-space: normal; word-break: keep-all; }
}