@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101c26;--panel:#14232f;--line:#2c3c47;--ink:#edf0e8;--muted:#8c9fa9;--mint:#48d4b3;--orange:#f4a568;--gold:#edcb7e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px Inter,system-ui,sans-serif;overflow:hidden}button,select{font:inherit;color:inherit}button{cursor:pointer;background:#1c303e;border:1px solid var(--line);border-radius:6px;padding:10px 13px;transition:background .15s,border-color .15s}button:hover{background:#2b4352;border-color:#71858b}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}button.selected{background:var(--mint);border-color:var(--mint);color:#102923}.topbar{height:92px;display:flex;align-items:center;gap:38px;padding:0 28px;border-bottom:1px solid var(--line);background:#12212b}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;letter-spacing:1px;white-space:nowrap}.brand-mark,.modal-emblem{display:grid;place-items:center;background:var(--orange);color:#17212a;font-weight:800;transform:skew(-8deg);width:42px;height:46px;border-radius:3px}.brand small{display:block;font-family:Inter,sans-serif;font-size:8px;color:var(--muted);letter-spacing:2.2px;margin-top:4px}.accent{color:var(--orange)}.resources{display:flex;gap:38px;flex:1}.resources>div{min-width:130px}.resources small,.attack-row small{display:block;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1.2px}.resources small span{font-size:7px;color:#6c848c}.resources strong{font-size:26px;letter-spacing:-1px;line-height:1.4}.gold{color:var(--gold)}.gain{font-size:10px;margin-left:8px;color:var(--mint);white-space:nowrap}.meter{height:3px;background:#30414a;max-width:170px}.meter i{display:block;height:100%;background:var(--mint);width:0}.top-actions{display:flex;gap:7px;align-items:center}.top-actions>span{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:10px}.top-actions button{min-width:36px;padding:8px}#arena{height:calc(100dvh - 92px);position:relative;overflow:hidden}#map{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.map-caption{position:absolute;top:22px;left:28px;font-size:9px;letter-spacing:1.4px;color:#9eb0b9;display:flex;gap:10px;align-items:center;pointer-events:none}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--mint)}.map-tools{position:absolute;left:24px;top:60px;display:grid;gap:4px}.map-tools button{font-size:19px;width:36px;height:36px;padding:0;background:#152a37e8}.intel{position:absolute;right:22px;top:24px;width:238px;max-height:calc(100% - 35px);overflow:auto;scrollbar-width:thin;background:#10212bec;border:1px solid #354650;border-radius:10px;padding:16px;box-shadow:0 12px 40px #0003;backdrop-filter:blur(12px)}.intel section+section{border-top:1px solid var(--line);margin-top:17px;padding-top:17px}.section-title{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700;display:flex;justify-content:space-between;margin-bottom:14px}.standing{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:11px}.standing.you{color:var(--mint)}.standing .rank{width:12px;color:var(--muted);font-size:9px}.standing i{width:6px;height:6px;border-radius:50%;flex-shrink:0}.standing b{margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums}.standing .nation{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.front{padding:8px 0;border-bottom:1px solid #273c46}.front-main{display:flex;align-items:center;gap:6px}.front-main button{border:0;padding:0;background:transparent;text-align:left;font-size:10px;flex:1;color:var(--mint)}.front.in .front-main button{color:var(--orange)}.front-main b{font-size:11px}.front small{display:block;color:var(--muted);font-size:9px;margin:6px 0}.front .recall{font-size:9px;padding:4px 8px}.empty{color:#8296a0;line-height:1.7;font-size:11px}.event{font-size:10px;line-height:1.6;color:#9eafb4;margin:9px 0}.event.good{color:#a2cdbb}.event.battle{color:#e2ab8d}.event time{color:#687f89;font-size:9px;margin-right:5px}.quiet{font-size:10px;margin-top:13px;background:transparent;padding:7px 9px}.guide-tip{position:absolute;left:28px;bottom:150px;width:265px;background:#122630ed;border:1px solid #39514e;border-left:3px solid var(--mint);border-radius:6px;padding:15px 28px 14px 16px}.eyebrow{color:var(--orange);font-size:9px;letter-spacing:2px;font-weight:700;display:block}.guide-tip strong{display:block;margin:9px 0;font-size:14px}.guide-tip p{font-size:11px;line-height:1.7;color:#a3b7bd;margin:0}.guide-tip button{position:absolute;right:5px;top:5px;background:transparent;border:0;padding:2px 6px;color:var(--muted)}.command{position:absolute;bottom:40px;left:calc((100% - 260px)/2);transform:translateX(-50%);width:600px;max-width:calc(100% - 300px);background:#132530f5;border:1px solid #40525d;border-radius:10px;box-shadow:0 14px 35px #0005;backdrop-filter:blur(12px)}.build-row{display:grid;grid-template-columns:repeat(3,1fr);padding:9px;gap:7px}.build-row button{display:flex;gap:9px;text-align:left;align-items:center;position:relative;padding:11px;background:#1c303b;border-color:#334650}.build-row button.active{border-color:var(--orange);background:#42382d}.building-icon{font-size:24px;color:#c0d1d4}.build-row button>span:nth-child(2){font-size:12px;font-weight:600}.build-row small{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:3px}.build-row b{margin-left:auto;font-size:10px;color:var(--gold)}kbd{position:absolute;right:6px;top:3px;color:#617d87;font-size:8px}.attack-row{padding:10px 16px 14px;border-top:1px solid #2b404b;display:flex;align-items:center;gap:16px}.attack-row strong{font-size:13px;display:block;margin-top:5px}.attack-row small{font-size:8px;letter-spacing:.8px}.percentages{display:flex;gap:4px}.percentages button{font-size:11px;padding:9px 10px}.action-hint{font-size:8px;letter-spacing:1px;line-height:1.7;color:var(--muted);max-width:90px}.bottom-note{position:absolute;bottom:15px;left:calc((100% - 260px)/2);transform:translateX(-50%);font-size:8px;letter-spacing:1.5px;color:#6e8a95;white-space:nowrap;pointer-events:none}.bottom-note span{margin:0 10px;color:#46616b}.tooltip{position:absolute;pointer-events:none;background:#0e202bed;border:1px solid #52636c;padding:10px 13px;border-radius:5px;min-width:145px;font-size:11px;z-index:3}.tooltip strong{display:block;margin-bottom:5px}.tooltip small{color:#a6b9c0;font-size:10px;line-height:1.7}#notice{position:absolute;top:62px;left:50%;transform:translateX(-50%);max-width:440px;background:#182e38f5;border:1px solid #4d6968;border-radius:6px;padding:11px 18px;font-size:12px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s;z-index:4}#notice.show{opacity:1}dialog{background:#13232e;color:var(--ink);border:1px solid #43545e;border-radius:16px;width:570px;max-width:calc(100% - 30px);padding:40px;box-shadow:0 35px 120px #0008}dialog::backdrop{background:#07131cd4;backdrop-filter:blur(5px)}.modal-emblem{width:44px;height:44px;font:800 26px 'Barlow Condensed',sans-serif;margin-bottom:24px}h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px;line-height:1.03;font-weight:600;margin:15px 0 18px}h1{font-size:66px}h1 em{font-style:normal;color:var(--orange)}h2{font-size:43px}dialog p{color:#acbec6;line-height:1.8;font-size:13px}dialog label{display:block;font-size:11px;color:#acbec6;margin:24px 0 8px}select{background:#203441;border:1px solid #425865;border-radius:6px;width:100%;padding:12px}.primary{background:var(--orange);color:#17212a;border:1px solid var(--orange);font-weight:800;display:block;width:100%;padding:14px 18px;margin-top:12px;text-align:left}.primary span{float:right}.primary:hover{background:#ffc395;border-color:#ffc395}.secondary{width:100%;background:transparent;margin-top:9px}.modal-foot{font-size:8px;letter-spacing:1px;color:#728e9b;display:block;text-align:center;margin-top:22px}.feature-strip{display:flex;gap:20px;font-size:10px;color:#acbec6;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin-top:24px}dialog ol{padding-left:18px;color:#a9bcc3;font-size:12px;line-height:1.7}dialog li{margin:12px 0}dialog li b{color:#e5ece7}.keyhelp{font-size:10px!important;border-top:1px solid var(--line);padding-top:14px}#resultStats{display:flex;justify-content:space-between;font-size:12px;color:var(--mint);margin:22px 0} [hidden]{display:none!important}
@media(min-width:1500px){.intel{width:260px;right:30px;top:30px}.command{width:660px}.topbar{gap:65px}.resources{gap:65px}}
@media(max-width:1050px){.topbar{gap:20px;padding:0 18px}.brand{font-size:21px}.resources{gap:20px}.resources>div{min-width:105px}.resources small span{display:none}.gain{display:block;margin:0;font-size:9px}.top-actions>span{display:none}.intel{width:200px;right:12px;padding:12px}.command{left:calc((100% - 210px)/2);max-width:calc(100% - 240px)}.action-hint{display:none}.attack-row{justify-content:space-between}.build-row button{gap:6px;padding:10px 6px}.build-row b{font-size:9px}.guide-tip{width:240px;bottom:150px}.dispatch{display:none}}
@media(max-width:720px){.topbar{height:108px;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 15px}.brand{font-size:19px}.brand small{display:none}.brand-mark{width:27px;height:29px;font-size:17px}.resources{grid-column:1/3;grid-row:2;gap:15px;justify-content:space-between}.resources>div{min-width:0;flex:1}.resources small{font-size:7px;letter-spacing:.6px}.resources strong{font-size:20px}.gain{display:inline;font-size:8px;margin-left:4px}.resources .meter{display:none}.top-actions{grid-column:2;grid-row:1}.top-actions button{padding:4px;min-width:30px;font-size:11px}.intel{top:48px;right:8px;width:154px;padding:9px;max-height:37%}.intel .dispatch,.intel .quiet,.intel section:first-child{display:none}.intel section+section{padding-top:0;border-top:0;margin-top:0}.section-title{font-size:8px;margin-bottom:5px}.front{padding:5px 0}.map-caption{top:18px;left:15px;font-size:7px;gap:5px}.map-tools{left:12px;top:44px}.map-tools button{width:30px;height:30px}.guide-tip{bottom:146px;left:12px;max-width:230px;padding:10px 26px 10px 12px}.guide-tip .eyebrow{font-size:7px}.guide-tip strong{font-size:12px;margin:6px 0}.guide-tip p{font-size:10px}.command{bottom:18px;left:50%;width:calc(100% - 20px);max-width:none}.build-row{padding:6px;gap:4px}.build-row button{padding:9px 6px}.build-row button>span:nth-child(2){font-size:10px}.building-icon{font-size:20px}.build-row small{font-size:8px}.build-row b{font-size:8px}kbd{display:none}.attack-row{padding:8px 10px;gap:8px}.attack-row strong{font-size:11px}.attack-row small{font-size:7px}.percentages button{padding:8px;font-size:10px}.bottom-note{display:none}#arena{height:calc(100dvh - 108px)}#notice{top:15px;max-width:85%;width:max-content;font-size:10px}dialog{padding:25px}h1{font-size:51px}.feature-strip{gap:8px;font-size:8px}.modal-foot{font-size:7px}#tooltip{max-width:190px}}
.front-main{display:block;width:100%;border:0;padding:5px 0;background:transparent;text-align:left;color:var(--mint)}.front-main>span{display:block;font-size:8px;letter-spacing:.6px}.front-main>strong{display:block;font-size:13px;margin:6px 0}.front.hostile .front-main{color:var(--orange)}.build-row button.selected{border-color:var(--orange);background:#42382d;color:var(--ink)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.game-status{position:absolute;top:48px;left:50%;transform:translateX(-50%);padding:9px 16px;background:#10212bea;border:1px solid #48d4b380;border-radius:5px;color:#8ce3cc;font-size:11px;pointer-events:none;white-space:nowrap}@media(max-width:720px){.game-status{top:auto;bottom:152px;font-size:9px}.guide-tip{bottom:192px}.intel{max-height:27%}}

@media(min-width:721px){.guide-tip{bottom:180px}}

/* Keep intrinsic canvas dimensions out of layout, including iOS Safari. */
#map{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0}
#arena{height:calc(100vh - 92px);height:calc(100dvh - 92px)}
@media(max-width:720px){#arena{height:calc(100vh - 108px);height:calc(100dvh - 108px)}}

.order-help{display:flex;gap:12px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}.order-help button{color:var(--mint);padding:8px;font-weight:700}.order-help span{font-size:10px;color:var(--muted)}.guide-tip #expandNow{position:static;display:block;background:var(--mint);color:#102923;font-size:11px;padding:10px;margin-top:10px;width:100%}.choosing-start .command,.choosing-start .intel{visibility:hidden}.choosing-start .guide-tip{bottom:30px}.choosing-start .game-status{top:48px;bottom:auto}.guide-tip{bottom:230px}@media(max-width:720px){.order-help span{font-size:8px}.guide-tip{bottom:230px}.game-status{bottom:195px}.choosing-start .guide-tip{bottom:24px}}

#standings{max-height:190px;overflow-y:auto;scrollbar-width:thin}
.nation-label-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}.nation-map-label{position:absolute;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;color:#fff;font-family:Inter,system-ui,sans-serif;text-shadow:0 1px 3px #000b;pointer-events:none}.nation-map-label span{display:block;font-weight:600;line-height:1.25;letter-spacing:.2px}.nation-map-label strong{display:block;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.nation-map-label{ text-shadow:-1px -1px 2px #07151c,1px -1px 2px #07151c,-1px 1px 2px #07151c,1px 1px 2px #07151c; }
.nation-map-label[data-kind="nation"]{color:#e4f8ff}
.nation-map-label[data-kind="npc"]{color:#efcf9b}
.nation-map-label[data-kind="npc"] span{font-style:italic}
.nation-map-label[data-kind="you"]{color:#8dffcf}
.troop-cap{font-size:12px;color:var(--muted);margin-left:5px;white-space:nowrap}.resources .troop-meter{display:block;margin-top:2px}.troop-meter i{background:#8ed8ed}@media(max-width:720px){.troop-cap{font-size:9px;margin-left:3px}.resources .troop-meter{display:block;height:3px;max-width:100%}}
@media(max-width:720px){.intel.no-fronts{display:none}}

.map-setup{margin-top:16px}.map-setup>label{margin-top:8px}.seed-row{display:flex;align-items:end;gap:12px;margin:10px 0}.seed-row label{flex:1;margin:0}.seed-row input{display:block;width:100%;margin-top:5px;background:#203441;color:var(--ink);border:1px solid #425865;border-radius:6px;padding:10px;font:inherit}.seed-row button{white-space:nowrap;padding:10px}#mapPreview{display:block;width:100%;height:auto;max-height:190px;object-fit:contain;background:#12638c;border:1px solid #387b94;border-radius:7px}#mapDescription{font-size:10px;margin:8px 0;line-height:1.5}#welcome{max-height:calc(100dvh - 30px);overflow-y:auto}#welcome h1{font-size:46px}#welcome .modal-emblem,#welcome .feature-strip{display:none}#welcome>p{margin-bottom:8px}@media(max-width:720px){#welcome{padding:20px}#welcome h1{font-size:36px;margin:10px 0}#mapPreview{max-height:145px}.map-setup{margin-top:10px}.seed-row button{font-size:11px}}

#welcome{padding:24px}#welcome h1{font-size:36px;margin:10px 0}#mapPreview{max-height:150px}#welcome>label{margin-top:14px}#welcome .modal-foot{margin-top:14px}@media(max-width:720px){#welcome{padding:20px}#mapPreview{max-height:130px}}