:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#e9ecdb;background:#050607;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit;border:1px solid #71877a66;border-radius:9px;background:#2c4540;padding:12px 17px;cursor:pointer;min-height:44px}button:hover{background:#3b5850}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #e4ce83;outline-offset:3px}button[hidden]{display:none}.primary{background:#e2cf91;color:#263934;border-color:transparent;font-weight:750}.primary:hover{background:#f1e0a9}#game{position:fixed;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}header{position:fixed;top:max(16px,env(safe-area-inset-top));left:20px;right:20px;display:flex;align-items:center;gap:16px;pointer-events:none}header>*{pointer-events:auto}header button{background:#203732e8;font-size:22px;padding:5px 14px}header div{display:flex;flex-direction:column;gap:2px}header b{font-size:23px;letter-spacing:6px}header #level{font-size:10px;letter-spacing:2px;color:#bccabb}#turn{margin-left:auto;font-size:12px;letter-spacing:2px}#intel{position:fixed;top:91px;left:22px;font-size:10px;letter-spacing:1.7px;display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;background:#8bc7bb;border-radius:50%}#zoom{position:fixed;right:18px;top:100px;display:grid;gap:6px}#zoom button{background:#203732db;padding:3px;width:42px;font-size:23px}#toast{position:fixed;bottom:160px;left:50%;transform:translateX(-50%);text-align:center;font-size:12px;padding:8px 14px;border-radius:7px;background:#1c302fea;max-width:85%;pointer-events:none;transition:opacity .3s}footer{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 32px));background:#203732f2;border:1px solid #6e85775c;border-radius:15px;padding:15px 18px;box-shadow:0 12px 50px #10232144;display:flex;align-items:center;gap:20px;min-height:94px}#selection{flex:1;min-width:0}#selection strong{font-size:15px}#selection p{font-size:12px;color:#bbc9b8;margin:6px 0 0;line-height:1.5}#selection .stats{color:#e2cf91}#actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}#actions button{font-size:12px;padding:12px}#end span{padding-left:8px}dialog{background:#203732;color:#e9ecdb;border:1px solid #62796a;border-radius:18px;padding:30px;width:min(400px,calc(100% - 32px));max-height:85dvh;overflow:auto;box-shadow:0 25px 100px #07161399}dialog::backdrop{background:#112823ad;backdrop-filter:blur(5px)}dialog h1{font-size:52px;letter-spacing:13px;margin:14px 0}dialog h2{font-size:27px;margin:15px 0}dialog p{font-size:13px;line-height:1.65;color:#bdccbd}dialog small{font-size:10px;letter-spacing:2px;color:#d7c995}dialog>button:not(.close){display:block;width:100%;margin-top:10px}dialog .close{position:absolute;right:12px;top:12px;font-size:23px;padding:0;width:40px;background:transparent;border:0}dialog a{display:block;color:#d6dfcc;text-align:center;margin-top:22px;font-size:12px;text-decoration:none}label{display:block;margin:16px 0;font-size:12px}select{display:block;width:100%;margin-top:6px}#roster{font-size:12px;line-height:1.7}#roster div{padding:7px 0;border-bottom:1px solid #ffffff12}#roster b{color:#e2cf91}#helpDialog{width:min(510px,calc(100% - 32px))}@media(max-width:600px){header{left:14px;right:14px}footer{padding:13px;flex-direction:column;gap:10px;align-items:stretch}#actions{justify-content:stretch}#actions button{flex:1}#selection p{margin-top:3px}#selection strong{font-size:14px}#toast{bottom:174px;width:max-content}#zoom{right:12px}#intel{left:15px}header b{font-size:20px}}@media(max-height:500px){footer{left:14px;transform:none;width:330px;bottom:10px;min-height:70px;padding:10px;gap:8px}#selection p{font-size:10px}#toast{bottom:100px}header{top:10px}#intel{top:74px}#zoom{top:74px}}

/* Keep the battlefield clear; secondary controls live in the menu. */
header #level{font-size:13px;color:#e9ecdb;letter-spacing:1px;text-shadow:0 1px 4px #102321}
#intel{top:32px;left:50%;transform:translateX(-50%);font-size:12px}
#zoom{position:static;display:flex;justify-content:center;margin-top:16px}
footer{width:auto;max-width:calc(100% - 28px);min-height:0;padding:8px;gap:14px;flex-direction:row;align-items:center;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}
#selection{white-space:nowrap;font-size:13px;padding-left:6px;display:flex;gap:10px;align-items:center}
#selection[hidden]{display:none}#selection .stats{font-size:16px;color:#ffb88b}#selection small{font-size:12px;color:#d2dace}
#actions{flex-wrap:nowrap}#actions button{flex:none;white-space:nowrap}#confirm{background:#eaa16d;color:#21332f;font-weight:700}
#toast{bottom:88px}#toast:empty{display:none}

/* The board carries targeting and results. */
header{justify-content:center}header #menuButton{position:absolute;right:0}header #level{font-size:16px;font-weight:650}
#intel{top:68px;font-size:11px}footer{background:transparent;border:0;box-shadow:none;padding:0}#selection{display:none!important}
@media(max-height:500px){footer{left:auto;right:12px;transform:none;bottom:10px}}
#end{box-shadow:0 4px 20px #10232155}#confirm{position:fixed;z-index:3;transform:translate(-50%,-100%);width:52px;height:52px;padding:0;border:2px solid #fff2cc;border-radius:50%;font-size:32px;box-shadow:0 0 0 7px #ffb45133,0 5px 18px #0008;animation:targetPulse 1s ease-in-out infinite}
#result{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:4}#result[hidden]{display:none}#next{font-size:20px;padding:15px 32px;box-shadow:0 5px 30px #10232177}body.finished footer{display:none}
#brief{position:fixed;z-index:3;left:50%;transform:translateX(-50%);bottom:78px;width:max-content;max-width:min(460px,calc(100% - 24px));background:#203732f2;border:1px solid #6e85775c;border-radius:12px;padding:8px 12px;font-size:12px;line-height:1.45;text-align:center;pointer-events:none}#brief[hidden]{display:none}#brief b{color:#e2cf91}#brief .good{color:#b7e0a8}#brief .bad{color:#e7a090}
#wipe{opacity:0;position:fixed;inset:0;z-index:8;background:#070b0a;pointer-events:none;clip-path:polygon(-80% 0,-40% 0,-82% 100%,-120% 100%)}
body.fighting header,body.fighting footer,body.fighting #brief,body.fighting #intel,body.fighting #toast,body.fighting #confirm{visibility:hidden}#duel{position:fixed;z-index:7;display:flex;justify-content:space-between;pointer-events:none}#duel[hidden]{display:none}#duel .split{position:absolute;top:0;bottom:0;left:50%;width:6px;transform:translateX(-50%);background:#070b0a}#duel .panel{width:46%;display:flex;flex-direction:column;gap:2px;padding:max(12px,env(safe-area-inset-top)) 16px 10px}#duel .panel.left{align-items:flex-end;text-align:right}#duel .panel.right{align-items:flex-start}#duel small{font-size:12px;letter-spacing:.6px;color:#f4f7ea;text-shadow:0 1px 2px #000}#duel b{font-weight:800;line-height:.85;color:#fff;text-shadow:0 3px 0 #000a}#duel .panel span{color:#f2d56a;letter-spacing:3px;font-size:16px;min-height:1em}#duel .pips{display:flex;gap:3px;margin-top:2px}#duel .pips i{width:14px;height:8px;display:block;background:#d7e36a;box-shadow:0 1px 0 #0008}#duel .pips i.off{background:#1b2420;opacity:.55}
/* Inline artwork animates before the game's modules finish loading. */
#loading{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#34554b,#1c302f 75%);z-index:10}#loading[hidden]{display:none}
.loading-tank{width:min(320px,85vw);height:auto;overflow:visible}
.tank-wheel{transform-box:fill-box;transform-origin:center;animation:tankWheel .65s linear infinite}
.tank-tread{animation:tankTread .3s linear infinite}
.tank-hull{animation:tankBounce .36s ease-in-out infinite alternate}
.tank-dust{animation:tankDust 1.2s ease-out infinite;transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes tankWheel{to{transform:rotate(360deg)}}
@keyframes tankTread{to{stroke-dashoffset:-10}}
@keyframes tankBounce{to{transform:translateY(-2px) rotate(.3deg)}}
@keyframes tankDust{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.45}100%{opacity:0;transform:translate(-70px,-16px) scale(2.1)}}
@media(prefers-reduced-motion:reduce){.tank-wheel,.tank-tread,.tank-hull,.tank-dust{animation:none}}
@keyframes targetPulse{50%{box-shadow:0 0 0 11px #ffb45118,0 5px 18px #0008}}

/* Selection miniature with adjacent, readable stats. */
#brief{left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));transform:none;display:flex;align-items:center;gap:12px;width:390px;max-width:calc(100% - 28px);padding:10px;text-align:left;border-radius:16px;background:#172d29f5;box-shadow:0 8px 28px #071b2255;line-height:1.55}
#preview{width:124px;height:124px;flex:none;border-radius:12px;background:radial-gradient(ellipse at 50% 65%,#57756866,#263e3800 72%);overflow:hidden}
#preview canvas{width:100%!important;height:100%!important}
#briefStats{flex:1;min-width:0;font-size:12px;color:#d8e1d7}#briefStats b{font-size:16px;color:#fff3cf}#briefStats .strength{float:right;font-size:15px;font-weight:700;color:#fff}#briefStats .metrics{font-size:11px;color:#aebfb7}
footer{left:auto;right:max(14px,env(safe-area-inset-right));transform:none}
@media(max-width:600px){#brief{bottom:76px;width:360px;gap:8px;padding:8px}#preview{width:96px;height:104px}#briefStats{font-size:11px}#briefStats b{font-size:14px}#briefStats .metrics{font-size:10px}}
@media(max-height:500px){#brief{bottom:10px;width:350px;padding:6px;gap:8px}#preview{width:96px;height:96px}#briefStats{font-size:11px}}

#brief{width:max-content;gap:10px;padding:6px 12px 6px 6px}#preview{width:154px;height:124px}#briefStats:empty{display:none}#briefStats .modifier{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:#e9db9c;white-space:nowrap}#briefStats svg{width:25px;height:25px;flex:none}
@media(max-width:600px),(max-height:500px){#preview{width:124px;height:100px}#briefStats .modifier{font-size:17px}#briefStats svg{width:22px;height:22px}}

#briefStats .building-status{max-width:145px;font-size:13px;line-height:1.35;color:#fff3cf;margin-top:4px}

#menu{padding-top:12px}
#menu .menu-title{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 -18px 10px}
#menu .menu-title .close{position:static}
#menu .menu-title #sound{margin:0}

#victory{position:fixed;inset:0;z-index:20;background:#14262b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:all}
#victory strong{color:#fff1bd;font-size:clamp(40px,9vw,100px);letter-spacing:.12em;text-shadow:0 4px #0004}
#victory .loading-tank{animation:victoryDrive 3.2s linear both}
@keyframes victoryDrive{from{transform:translateX(-45vw)}to{transform:translateX(45vw)}}
@media(prefers-reduced-motion:reduce){#victory .loading-tank{animation:none}}

/* Controls are tap targets, including the close glyph. */
button{-webkit-user-select:none;user-select:none;touch-action:manipulation}
#menu .close{width:48px;height:48px;display:grid;place-items:center;z-index:1}

#actions{flex-direction:column;align-items:center;gap:8px}#turn{margin:0;font-size:12px;font-weight:750;letter-spacing:2px;text-shadow:0 1px 4px #071b22,0 0 8px #071b22;pointer-events:none;user-select:none}

header{z-index:21}body.fighting header{visibility:visible}body.fighting header #level{visibility:hidden}
#menu #sound{width:48px;height:48px;padding:10px;display:grid;place-items:center}
#turnAnnouncement{position:fixed;inset:0;z-index:19;pointer-events:none;user-select:none;overflow:hidden}
#turnAnnouncement .turn-shade{position:absolute;inset:0;background:#090d11;opacity:0}
#turnAnnouncement strong{position:absolute;left:50%;top:50%;white-space:nowrap;color:#fff1bd;font-size:clamp(36px,8.5vw,100px);font-weight:850;letter-spacing:.08em;text-shadow:0 4px 0 #0007,0 2px 18px #000b;line-height:1.1;will-change:transform,opacity}
#turnAnnouncement[data-side="0"] strong{color:#dcefff}
#turnAnnouncement[data-phase="docked"] strong{will-change:auto}
body.fighting #turnAnnouncement{visibility:hidden}
#actions{display:grid;grid-template-columns:48px auto}#turn{grid-column:2}#undo{grid-column:1;grid-row:2;width:48px;height:48px;font-size:26px;padding:0}#end{grid-column:2;grid-row:2}

/* Keep contextual detail beside the controls, in the phone's bottom corner. */
@media(max-width:600px){
 footer{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));padding:0;gap:0}
 #actions{grid-template-columns:44px 88px;gap:6px}
 #actions #undo{width:44px;height:44px}
 #actions #end{width:88px;height:44px;padding:6px;font-size:11px}
 #turn{font-size:10px;letter-spacing:1px}
 #brief{left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));max-width:calc(100% - 162px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:4px;gap:4px;border-radius:10px}
 #preview{width:60px;height:60px;border-radius:7px}
 #briefStats .modifier{font-size:13px;gap:3px}
 #briefStats svg{width:16px;height:16px}
 #briefStats .building-status{font-size:10px;line-height:1.2;margin-top:3px;overflow-wrap:anywhere}
}

/* Battle status stays inside its own half, including narrow Safari viewports. */
#duel .panel{width:50%;min-width:0;padding: max(10px,env(safe-area-inset-top)) 12px 8px}
#duel small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(9px,2.4vw,12px)}
#duel .panel.right small{max-width:calc(100% - 44px)}
#duel b{font-size:clamp(32px,min(12vw,10vh),72px)}
#duel .pips{width: min(100%,167px);gap:clamp(1px,.6vw,3px)}
#duel .pips i{flex:1;min-width:0;width:auto;height:6px}
#duel .panel span{font-size:12px;min-height:12px}

#mergePrompt{position:fixed;z-index:5;transform:translate(-50%,-100%);padding:9px;border-radius:18px;background:#203732f5;box-shadow:0 4px 20px #0008;border:1px solid #ffffff60;color:#fff;text-align:center;user-select:none}#mergePrompt[hidden]{display:none}#mergePrompt>svg{display:block;margin:0 auto 5px}#mergePrompt>div{display:flex;gap:10px}#mergePrompt button{width:48px;height:48px;padding:0;border-radius:50%;font-size:28px;touch-action:manipulation}#mergeConfirm{background:#a3d6a4;color:#183b29}#mergeCancel{background:#56665e;color:white}

/* Cannon setup keeps direction and the resulting footprint on the battlefield. */
#cannonAim{position:fixed;z-index:6;width:1px;height:1px;user-select:none}
#cannonAim[hidden]{display:none}
#cannonAim>button{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;padding:13px;background:#34483f;color:#fff;border:2px solid #d5e5d9;box-shadow:0 4px 0 #182b24}
#cannonAim>button svg{display:block;width:34px;height:34px;transform-origin:center}
#cannonAim>button[aria-pressed="true"]{background:#edb462;color:#152c26;box-shadow:0 0 0 3px #fff6}
#cannonAim>div{display:flex;gap:5px;position:absolute;transform:translate(-50%,-50%)}
#cannonAim>div button{width:44px;height:44px;border-radius:50%;padding:0;font-size:26px}
#aimAccept{background:#a3d6a4;color:#183b29}
#aimCancel{background:#56665e;color:white}

#mergePrompt #mergeUnits{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:5px}
#mergeUnits img{width:64px;height:64px;padding:3px;border-radius:50%;background:#fff;object-fit:contain;box-shadow:0 2px 5px #0004}
#mergeUnits span{font-size:23px;font-weight:700}

/* Hide controls from the first HTML paint, including the shared menu layer. */
body.loading #menuButton.standard-menu-launcher{visibility:hidden!important;pointer-events:none!important}
body.loading>header,body.loading>footer{visibility:hidden}
#loadProgress{position:absolute;top:calc(50% + 96px);left:50%;transform:translateX(-50%);width:min(210px,64vw);height:7px;border:1px solid #91b6ae55;border-radius:0;background:#102724;overflow:hidden;opacity:0;animation:loadProgressIn .25s .8s ease-out forwards}
#loadProgress span{display:block;height:100%;width:100%;background:#70b5f5;border-radius:0;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.65,.3,1);animation:loadProgressActivity 1.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes loadProgressIn{to{opacity:1}}

/* Keep pending work visibly active without inventing completion percentages. */
@keyframes loadProgressActivity{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){#loadProgress span{animation:none;transition:none}}