:root{color-scheme:dark;--ink:#10191c;--panel:#202b2c;--gold:#ddbb7c;--cream:#f1e8d1;--mute:#b2b9a9;--line:#5c5a47;--umber:#92764e;font-family:"Segoe UI",sans-serif;color:var(--cream)}
*{box-sizing:border-box}body{min-height:100svh;margin:0;background:#142026}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#101b20cc,#13202399 48%,#101a20cf),linear-gradient(0deg,#111a20 8%,#142126bb 56%,#1a202088),url('assets/interface/marches.png') center top/cover no-repeat}
button,a{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.53}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f0d19a;outline-offset:3px}button{border-radius:2px}button,dialog{font-synthesis:none}h1,h2,h3,dd,p{margin:0}h1,h2,h3{font-family:Georgia,"Palatino Linotype",serif;font-weight:500}p{line-height:1.45}small{font-size:11px}kbd{font:10px Consolas,monospace;padding:2px 5px;border:1px solid #83816b;border-radius:3px;color:#e6d6b3} [hidden]{display:none!important}
.mast{height:64px;border-bottom:1px solid #867651;background:linear-gradient(90deg,#101819f2,#172021f0);box-shadow:0 3px 18px #080e1250;padding:0 clamp(18px,4.4vw,82px);display:flex;align-items:center;gap:clamp(24px,5vw,100px)}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--cream)}.brand span{display:grid;line-height:1}.brand strong{font:bold 26px/.98 Georgia;letter-spacing:3.1px}.brand b{font:650 9px/1.4 "Segoe UI";letter-spacing:1.5px;color:#e3bc76}.sigil{position:relative;width:39px;height:45px;background:linear-gradient(130deg,#ffe6b1,#a08043);clip-path:polygon(50% 0,98% 16%,90% 70%,50% 100%,10% 70%,2% 16%)}.sigil:before{content:"";position:absolute;inset:2px;clip-path:inherit;background:linear-gradient(90deg,#633e31,#904c33 50%,#663b2c 51%)}.sigil:after{content:"";position:absolute;inset:9px 9px 10px;background:#f6d8a3;clip-path:polygon(0 0,20% 0,20% 19%,37% 19%,37% 0,62% 0,62% 19%,80% 19%,80% 0,100% 0,96% 34%,82% 42%,89% 85%,100% 94%,100% 100%,58% 100%,58% 68%,41% 68%,41% 100%,0 100%,0 94%,12% 85%,18% 42%,4% 34%)}
.mast nav{display:flex;align-self:stretch;gap:8px}.mast nav button,.help,.plain,.dialog-head button{background:none;border:0}.mast nav button{font-size:13px;font-weight:550;color:#bdc4b5;border-bottom:2px solid transparent;padding:0 14px}.mast nav button[aria-current]{color:#f8db9e;border-color:#c1a26d;background:linear-gradient(transparent,#d4af6520)}.mast nav button:hover{color:var(--cream)}.help{margin-left:auto;border:1px solid #716e57;border-radius:50%;width:28px;height:28px;color:#d4c09c;font:18px Georgia}
main{margin:0 auto;max-width:1570px;padding:17px clamp(14px,3vw,48px) 20px}.brief{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.location span,.result small{color:#d6b782;font-size:10px;font-weight:650;letter-spacing:2.25px;text-transform:uppercase}.location h1{color:#ffebc2;font-size:clamp(28px,3vw,43px);line-height:1.08;margin:2px 0;text-shadow:0 2px 6px #10100f}.stats{display:flex;gap:30px;margin:0}.stats div{min-width:70px}.stats dt{display:flex;gap:6px;align-items:center;font:600 10px "Segoe UI";letter-spacing:1.1px;text-transform:uppercase;color:#c6c9bb}.stats dd{font:26px/1.27 Georgia;color:#f3e5c0;font-variant-numeric:tabular-nums}.symbol{display:inline-block;width:12px;height:12px;background:#c9b07b}.coin-icon{border-radius:50%;width:10px;height:10px;background:#dbad50;border:2px double #ffdda0;box-shadow:1px 1px 0 #87642e}.gate-icon{clip-path:polygon(0 0,23% 0,23% 25%,40% 25%,40% 0,60% 0,60% 25%,77% 25%,77% 0,100% 0,100% 100%,65% 100%,65% 66%,35% 66%,35% 100%,0 100%)}.flag-icon{clip-path:polygon(0 0,95% 0,75% 28%,95% 55%,20% 55%,20% 100%,0 100%)}
.war-room{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,21vw,318px);gap:14px;align-items:start}.field,.panel,.rune{background:linear-gradient(130deg,#2d3938,#212a2b 60%,#1d2729);border:1px solid var(--line);box-shadow:inset 0 1px #d5c69218,0 4px 18px #080c0e48}.field{min-width:0}.field-head,.field-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.field-head{background:linear-gradient(#31403a,#26332f);padding:5px 8px 5px 13px;min-height:32px;border-bottom:1px solid #94835d}.field-head strong{font:600 11px "Segoe UI";color:#efe0b8}.field-head>div{display:flex;gap:5px}.field-head button,.line-button{border:1px solid #70705c;background:#1c2929;color:#e6dbc1;font:600 11px "Segoe UI";padding:3px 7px}.field-head button:hover,.line-button:hover{background:#36423b}.stage{position:relative;isolation:isolate;width:100%;aspect-ratio:5/3;background:#243331;overflow:hidden}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 17px #0d161b38}.stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation}.stage.aiming canvas{cursor:crosshair}
#pad-buttons{position:absolute;inset:0;pointer-events:none}#pad-buttons button{position:absolute;pointer-events:auto;width:5.8%;height:8.4%;min-width:23px;min-height:22px;transform:translate(-50%,-52%);border:0;border-radius:35%;background:transparent;touch-action:manipulation}#pad-buttons button:focus-visible{outline:2px dotted #f4df9a}
.field-foot{min-height:35px;padding:7px 12px;background:#192527;color:#c4c9b8;font-size:11px;line-height:1.3;border-top:1px solid #6d6a4e}.field-foot>div{display:flex;align-items:center;gap:7px}.status-light{width:6px;height:6px;border-radius:50%;background:#b1be86;flex:none}.status-light.fight{background:#e19164}#save-status{font-size:10px;color:#a9b4a2;text-align:right}
.commands{display:grid;gap:9px}.panel{padding:12px 13px}.panel h2{font:21px/1.1 Georgia;color:#f0d8a4}.panel-head{display:flex;justify-content:space-between;align-items:baseline}.panel-head small{color:var(--mute);font:10px "Segoe UI";letter-spacing:1px}
.tower-list{display:grid;gap:4px;margin:9px 0 0}.tower-option{background:linear-gradient(100deg,#26322e,#202b2c);border:1px solid #575f50;display:flex;align-items:center;gap:8px;padding:3px 7px 3px 3px;text-align:left}.tower-option:hover,.tower-option.armed{background:#394236;border-color:#d2b274}.tower-option canvas{width:40px;height:43px;image-rendering:pixelated;flex:none}.tower-option span{flex:1}.tower-option strong{display:block;font:16px Georgia;color:#eadfc0}.tower-option small{display:block;color:#b8c0af;font:11px/1.3 "Segoe UI";margin:2px 0}.price{color:#e9c77d;font:600 12px Consolas;white-space:nowrap}
#selected-detail:not(:empty){margin-top:8px;padding-top:8px;border-top:1px solid #586052}#selected-detail p{font-size:11px;color:#cad0bf;margin:2px 0 6px}#selected-detail strong{font:15px Georgia;color:#f4d69e}.pad-actions{display:flex;gap:5px}.pad-actions button{font-size:10px;flex:1;min-height:28px}
#wave-name{display:block;font:15px Georgia;color:#e5dbc4;margin-top:7px}#roster{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.unit-chip{display:flex;align-items:center;gap:2px;background:#1b2527;border:1px solid #51584b;padding:0 4px 0 1px;color:#c7cebd;font:11px Consolas}.unit-chip canvas{width:30px;height:28px;image-rendering:pixelated}#wave-tip{font-size:11px;color:#bdc6b4;margin:5px 0 9px}
.gold{border:1px solid #e8c482;box-shadow:inset 0 0 0 2px #6f522f3b,0 2px 3px #131c1a60;color:#292319;background:linear-gradient(#e1c48b,#ba945b);font:650 13px "Segoe UI";padding:8px 14px}.gold:hover:enabled{background:linear-gradient(#f1d59c,#cda56c)}#start{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:34px}#start b{font-size:11px}
.rune{width:100%;padding:8px 11px;text-align:left;display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,#343641,#242b31)}.rune>i{font:27px Georgia;color:#dbbbef;text-shadow:0 0 6px #a97fbb}.rune strong{display:block;font:16px Georgia;color:#dfd4e5}.rune small{color:#c2bace;display:block}.rune kbd{margin-left:auto}.rune.armed{border-color:#d2a6da}
#field-notice{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);border:1px solid #aa9468;padding:5px 12px;background:#162124ed;color:#f6dfaf;text-align:center;font-size:12px;pointer-events:none;min-width:160px}
.veil{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:15px;z-index:4;background:#0b1619cf}.veil h2{font-size:35px;color:#f0d39d}.result{padding:25px;text-align:center}.result p{margin:10px 0 16px;color:#d3d7c7;font-size:13px}.plain{color:#dfd4b9;font-size:12px;padding:8px}
dialog{color:var(--cream);background:#202c2d;border:1px solid #b09a6d;box-shadow:0 20px 80px #050b0eaa;width:min(730px,94vw);max-height:91svh;padding:18px}dialog::backdrop{background:#0b1419ca;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-head h2{font-size:27px;color:#e6c790}.dialog-head button{font:26px Georgia;color:#c9ba9f}.map-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.map-card{display:flex;flex-direction:column;gap:7px;align-items:stretch;border:1px solid #706e56;background:#1a2527;color:#dddcc9;padding:7px;text-align:left}.map-card img{width:100%;aspect-ratio:5/3;object-fit:cover;image-rendering:pixelated}.map-card strong{font:20px Georgia;color:#f0dcaf}.map-card small{color:#bdc6b5}.dialog-note,.guide-list,.score-row{color:#cdd2c3;font-size:13px;line-height:1.55}.dialog-note{margin:10px 0}.score-row{padding:9px 0;border-top:1px solid #52604e;display:flex;justify-content:space-between;gap:12px}.score-row strong{color:#ead8ae}.guide-list{padding-left:21px}.guide-list li{margin:7px 0}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
@media(min-width:875px) and (max-height:760px){main{max-width:min(1450px,calc((100svh - 170px)*1.667 + 340px));padding:8px 12px 12px}.mast{height:51px}.brand strong{font-size:22px}.sigil{width:32px;height:38px}.brief{margin-bottom:8px}.location h1{font-size:29px}.stats dd{font-size:23px}.commands{gap:6px}.panel{padding:8px 10px}.tower-option canvas{width:32px;height:36px}.tower-option small,#wave-tip{font-size:10px}.panel h2{font-size:18px}.tower-list{margin-top:6px}.rune{padding:5px 9px}}
@media(max-width:874px){.war-room{grid-template-columns:minmax(0,1fr)}.commands{grid-template-columns:1fr 1fr;align-items:start}.rune{grid-column:2}.garrison{grid-row:1/3}.mast{height:56px;gap:20px}.stats{gap:16px}.stats div{min-width:43px}.mast nav button{padding:0 8px}}
@media(max-width:560px){main{padding:10px 8px}.mast{padding:0 9px;gap:7px;height:51px}.brand{gap:5px}.sigil{width:26px;height:32px}.brand strong{font-size:18px}.brand b{font-size:6px}.mast nav{gap:0}.mast nav button{font-size:11px;padding:0 6px}.help{width:23px;height:23px;font-size:13px}.location h1{font-size:24px}.location span{font-size:8px;letter-spacing:.9px}.stats{gap:8px}.stats dd{font-size:18px}.stats dt{font-size:8px;gap:3px}.stats div{min-width:33px}.brief{margin-bottom:7px}.field-foot{font-size:10px;min-height:26px}.commands{gap:5px}.war-room{gap:6px}.panel{padding:7px}.tower-option{gap:4px;padding-right:3px}.tower-option canvas{width:26px;height:33px}.tower-option strong{font-size:13px}.tower-option small{font-size:9px}.panel h2{font-size:17px}.map-cards{grid-template-columns:1fr}.map-card{display:grid;grid-template-columns:85px 1fr}.map-card img{grid-row:1/3}.rune{padding:5px}.rune small{font-size:9px}#save-status{display:none}}

/* 0.2 — stone windows, vocational defenders and a 32px orthogonal realm. */
:root{--panel:#3a3c3c;--line:#87877c;--cream:#eee9d8;--mute:#b6b8ae;font-family:"Trebuchet MS","Segoe UI",sans-serif}
body{background:#171f21}body:before{background:radial-gradient(ellipse at 50% 15%,#3b4442 0,#202a2b 58%,#11191c 100%)}
.mast{background:linear-gradient(#424846,#292e2e);border-bottom:2px solid #a2936e;box-shadow:0 3px 0 #111c20,0 9px 22px #10171980}
.mast nav button{color:#c9ccbf}.mast nav button[aria-current]{background:linear-gradient(#63665b,#454d46);border-color:#d9b975;color:#ffe2a2}
main{max-width:1430px}.brief{padding:9px 2px 4px}.location h1{font-size:clamp(28px,2.8vw,39px)}.location span{color:#c7b184}.stats dd{font-size:25px}.stats dt{color:#c5cabd}
.war-room{grid-template-columns:minmax(0,1fr) 274px;gap:11px}.field,.panel,.rune{border:2px solid #2b3333;outline:1px solid #767c70;background:linear-gradient(110deg,#454a46,#343c3a);box-shadow:inset 1px 1px #9c9e8655,inset -1px -1px #1c272a,0 5px 17px #0b111a60}
.field-head{background:linear-gradient(#61675d,#424b42);border-bottom:2px solid #293734;padding:6px 8px 6px 12px}.field-head strong{color:#fff0c7;letter-spacing:.25px}.field-head button,.line-button{background:linear-gradient(#4f574d,#2d3835);border:1px solid #91927d;box-shadow:inset 1px 1px #a3a38a33;color:#f4e5bf}
.stage:after{box-shadow:inset 0 0 0 1px #d4c59350,inset 0 0 14px #0b151f30}
.field-foot{background:#293532;border-top:2px solid #1d2a29;color:#d1d8c8}.hotkey-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 11px;background:linear-gradient(#3b443e,#283431);border-top:1px solid #767d6a;font-size:10px;color:#c8d0be}.hotkey-strip span{display:flex;gap:4px;align-items:center}.hotkey-strip small{margin-left:auto;font-size:8px;letter-spacing:1px;color:#a5ad99}kbd{color:#eedbaa;border-color:#92927b;background:#222f2d;box-shadow:inset 1px 1px #b0b99a22;border-radius:1px}
.commands{gap:10px}.panel{padding:11px}.panel h2{font:600 14px/1.2 "Trebuchet MS",sans-serif;color:#f0ddb1;text-shadow:0 1px #182526;border-bottom:1px solid #828875;padding-bottom:7px;margin-bottom:3px}.panel-head{border-bottom:1px solid #828875}.panel-head h2{border:0;margin:0}.panel-head small{font-size:10px;color:#e0d0a9}
.realm-overview{display:flex;justify-content:space-between;gap:5px;align-items:center;padding:8px}.realm-overview h2{font-size:12px;padding-bottom:5px;margin:0 0 6px}.realm-overview p{font-size:9px;line-height:1.7;color:#cbd2bf}.realm-overview small{display:block;color:#a7b4a3;line-height:1.4;font-size:8px;margin-top:4px}.realm-overview canvas{width:144px;height:86px;border:3px solid #1c2b2c;outline:1px solid #91937a;image-rendering:pixelated}.map-key{display:inline-block;width:5px;height:5px;margin-right:3px}.map-key.ally{background:#eff4b1}.map-key.hostile{background:#f37659}
.tower-option{padding:4px 8px 4px 3px;background:linear-gradient(110deg,#343f39,#293632);border:1px solid #7d8371;box-shadow:inset 1px 1px #b8b68d24,inset -1px -1px #101f21}.tower-option canvas{width:44px;height:48px;border:1px solid #8a8a71;background:#23332e}.tower-option strong{font:600 13px "Trebuchet MS",sans-serif;color:#f1dfaf}.tower-option small{font-size:10px;color:#b7c3ae}.tower-option:hover,.tower-option.armed{background:linear-gradient(110deg,#56624b,#39483c);border-color:#dfbd77}.price{font-size:12px;color:#f0ce7e}
#roster{gap:5px}.unit-chip{border:1px solid #7c8671;box-shadow:inset 1px 1px #b0b69822;background:#23332f}.unit-chip canvas{width:31px;height:30px}#wave-name{font:600 14px "Trebuchet MS",sans-serif;color:#eeddb3;margin-top:10px}#wave-tip{line-height:1.5;color:#c7d0bc}
.rune{background:linear-gradient(120deg,#514e58,#323c40);padding:10px}.rune>i{border:1px solid #a599ae;background:#252e36;width:34px;height:35px;text-align:center;box-shadow:inset 0 0 9px #a995ca44}.rune strong{font:600 13px "Trebuchet MS",sans-serif}.rune small{font-size:9px;margin-top:3px}.gold{background:linear-gradient(#d5bd83,#a58851);border-color:#e1ca96;box-shadow:inset 1px 1px #f6e4ba88,inset -1px -1px #735b37,0 2px 0 #122423}
dialog{background:linear-gradient(125deg,#454c44,#2c3834);border:3px double #b0ab88}.dialog-head{border-bottom:1px solid #6a7a65;padding-bottom:8px}.map-card{background:#293832;border:1px solid #93987c}.map-card img{border:1px solid #16282c}
@media(min-width:875px) and (max-height:760px){main{max-width:min(1360px,calc((100svh - 198px)*1.667 + 300px))}.realm-overview{padding:6px}.realm-overview canvas{width:120px;height:72px}.realm-overview small{display:none}.tower-option canvas{width:34px;height:38px}.commands{gap:7px}.panel{padding:8px}.panel h2{font-size:12px;padding-bottom:5px}.location h1{font-size:28px}.hotkey-strip{padding:5px 8px;gap:9px}.rune{padding:7px}}
@media(max-width:874px){.war-room{grid-template-columns:minmax(0,1fr)}.realm-overview{grid-column:1/3;display:none}.garrison{grid-row:1/3}.rune{grid-column:2}.hotkey-strip{gap:8px;font-size:9px}.hotkey-strip small{display:none}.tower-option canvas{width:36px;height:40px}}
@media(max-width:560px){.commands{gap:6px}.panel{padding:7px}.tower-option{gap:4px;padding:3px}.tower-option canvas{width:29px;height:36px}.tower-option strong{font-size:12px}.tower-option small{font-size:9px}.hotkey-strip{padding:6px;gap:6px}.hotkey-strip span:last-of-type{display:none}.location h1{font-size:24px}.stats dd{font-size:18px}.rune{padding:6px}}
