:root{color-scheme:dark;--bg:#101820;--panel:#18232d;--line:#2c3d4b;--text:#e7edf0;--muted:#9eafbc;--gold:#edc477;--mint:#8fd2a6;font-family:'DM Sans',system-ui,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{min-height:36px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#23323f;color:var(--text);cursor:pointer}button:hover:not(:disabled){border-color:var(--gold);background:#2d3e4c}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button.primary{background:var(--gold);border-color:var(--gold);color:#172028;font-weight:700}.quiet{background:transparent;color:var(--muted)}input,select{min-width:0;border:1px solid var(--line);border-radius:6px;background:#111b24;color:var(--text);padding:9px}input[type=checkbox]{accent-color:var(--gold);margin:0;width:auto}a{color:var(--gold);text-decoration:none}[hidden]{display:none!important}h1,h2,p{margin:0}h1,h2,.tw-brand,.match-brand{font-family:'Space Grotesk',system-ui,sans-serif}h1{font-size:38px;letter-spacing:-1px}h2{font-size:17px}p{color:var(--muted);line-height:1.55}small{color:var(--muted)}
/* Entry and lobby retain ordinary document flow. */
.tw-header{display:flex;align-items:center;gap:28px;padding:16px 28px;border-bottom:1px solid var(--line);background:#131d26}.tw-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;letter-spacing:2px}.tw-mode{font-size:12px;letter-spacing:2px;color:var(--muted)}.tw-mode b{font-size:9px;color:var(--gold);border:1px solid #746142;border-radius:4px;padding:3px 5px;margin-left:5px}.back-link{margin-left:auto;font-size:12px}main{max-width:1420px;margin:auto;padding:20px 28px 40px}.connection{font-size:11px;color:var(--muted);text-align:right;margin-bottom:12px}.connection.offline{color:#ffb197}.preview-link{font-size:12px}.message{border:1px solid #795345;color:#ffd3bd;border-radius:8px;background:#30251f;padding:10px 14px}.entry{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:70px;padding:50px}.eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold);margin-bottom:12px}.intro h1{font-size:clamp(36px,4vw,58px);line-height:1.12;margin-bottom:24px}.intro>p{max-width:480px;font-size:17px}.steps{display:flex;gap:24px;margin-top:36px;color:var(--muted);font-size:12px}.steps b{display:block;font-size:21px;font-weight:400;color:var(--gold);margin-bottom:8px}.entry-card{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.entry-card h2{font-size:23px;margin-bottom:22px}.entry-card label{display:block;margin:14px 0 7px;font-size:12px;color:var(--muted)}.entry-card input{width:100%;padding:12px}.entry-card>.primary{width:100%;margin-top:14px}.divider{font-size:11px;text-align:center;color:var(--muted);padding-top:22px}.join-row{display:flex;gap:8px}.join-row input{min-width:0;text-transform:uppercase;letter-spacing:3px}.fine-print{font-size:11px;margin-top:22px}.lobby{max-width:950px;margin:28px auto 60px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px}.invite{display:grid;gap:7px;text-align:center}.invite span{font-size:9px;letter-spacing:2px;color:var(--muted)}.invite strong{font-size:28px;color:var(--gold);letter-spacing:5px}.invite button{font-size:11px}.lobby-players{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none}.lobby-players li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow-wrap:anywhere}.lobby-players small{white-space:nowrap}.is-ready{color:var(--mint)}.lobby-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 12px}.hint{font-size:11px;line-height:1.45;color:var(--muted)}.rules{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:12px;color:var(--muted)}.rules summary{cursor:pointer;padding:8px 0}.rules p{margin:10px 0;max-width:1000px}footer{display:flex;justify-content:space-between;padding:22px 28px;border-top:1px solid var(--line);font-size:10px;letter-spacing:1px;color:var(--muted)}
/* The complete match owns one viewport. Only the map takes the flexible middle. */
body:has(#match:not([hidden])){height:100dvh;overflow:hidden}
body:has(#match:not([hidden]))>.tw-header,body:has(#match:not([hidden])) :is(footer,.rules,.preview-link){display:none}
body:has(#match:not([hidden])) main{max-width:none;height:100%;width:100%;margin:0;padding:0;display:flex;flex-direction:column;min-height:0}
body:has(#match:not([hidden])) .connection{position:fixed;z-index:20;top:57px;left:50%;transform:translateX(-50%);margin:0;padding:5px 10px;background:#30251f;border-radius:5px;pointer-events:none}
body:has(#match:not([hidden])) .connection:not(.offline){display:none}
#message:not([hidden]){position:fixed;z-index:30;top:62px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);width:max-content;box-shadow:0 5px 20px #0006;font-size:12px}
#match:not([hidden]){height:100%;min-height:0;display:flex;flex-direction:column}
.match-toolbar{flex:none;display:flex;align-items:center;gap:20px;min-height:57px;padding:8px 14px;background:#131d26;border-bottom:1px solid var(--line)}
.match-brand{display:flex;align-items:center;gap:8px;flex:none;color:var(--text);font-size:12px;font-weight:700;letter-spacing:1px;white-space:nowrap}.match-brand small{display:block;margin-top:2px;font-size:7px;letter-spacing:1.4px;font-weight:400}.match-brand img{display:block;flex:none}
.resources{display:flex;align-items:center;gap:18px;flex:none;padding-left:18px;border-left:1px solid var(--line)}.resources>span{display:grid;grid-template-columns:auto auto;gap:1px 5px;align-items:baseline;color:var(--muted);font-size:9px;line-height:13px;white-space:nowrap}.resources small{font-size:8px}.resources strong{grid-column:1/-1;font-size:19px;line-height:21px;font-weight:650;color:var(--gold);font-variant-numeric:tabular-nums}.resources>span:last-child strong{color:var(--mint)}
.match-heading{margin-left:auto;display:flex;align-items:center;gap:15px;min-width:0}.match-heading h1{font-family:inherit;font-size:11px;letter-spacing:0;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-clock{display:grid;text-align:right;gap:1px;flex:none}.match-clock strong{font-size:16px;font-variant-numeric:tabular-nums}.match-clock span{font-size:8px;color:var(--muted)}
#previewBanner{display:flex;flex-direction:column;gap:2px;font-size:7px;letter-spacing:1px;color:var(--gold);white-space:nowrap}#previewBanner a{font-size:10px;letter-spacing:0}.design-link{font-size:10px;white-space:nowrap}#leaveMatch{font-size:10px;min-height:30px;padding:5px 8px;white-space:nowrap}
.result{position:absolute;z-index:8;top:65px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;padding:12px 20px;border:1px solid #587c60;border-radius:8px;background:#253b31;font-size:16px;box-shadow:0 5px 20px #0008}
.match-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 280px;gap:12px;flex:1;min-height:0;width:100%;padding:10px 12px 12px;align-items:start}
.panel{min-width:0;padding:11px;background:var(--panel);border:1px solid var(--line);border-radius:9px}.panel-heading{display:flex;justify-content:space-between;align-items:baseline;gap:6px;flex:none}.panel-heading h2{font-size:12px}.panel-heading>span{font-size:8px;color:var(--muted);white-space:nowrap}
.arsenal{display:flex;flex-direction:column;gap:10px;height:100%;max-height:820px;min-height:0}.catalog{display:grid;min-width:0}.arsenal>.catalog{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:5px;flex:1;min-height:0}.catalog button{position:relative;text-align:left;min-width:0}.arsenal .catalog button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;padding:5px 3px 5px 55px;min-height:0;border-left:2px solid var(--tower-color)}.arsenal .catalog button strong{font-size:9px;line-height:11px;overflow-wrap:anywhere}.arsenal .catalog button b{font-size:10px;line-height:12px;color:var(--gold);white-space:nowrap}.arsenal .catalog button small{display:none}.arsenal .catalog button.active{border-color:var(--gold);background:#33372e}.tower-icon{position:absolute;width:48px;height:48px;left:3px;top:50%;transform:translateY(-50%);pointer-events:none}
.selection{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none;border-top:1px solid var(--line);padding-top:9px;min-width:0}.selection>strong{grid-column:1/-1;font-size:10px;line-height:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection>button{min-height:30px;padding:5px 3px;font-size:9px}.selection>#towerDetails{grid-column:1/-1;min-width:0}.tower-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0}.tower-stats>div{padding:4px 5px;background:#111d27;border:1px solid #2b3c49;border-radius:4px;min-width:0}.tower-stats dt{font-size:8px;line-height:11px;color:var(--muted)}.tower-stats dd{margin:1px 0 0;font-size:11px;line-height:14px;font-weight:650;font-variant-numeric:tabular-nums}.tower-effects{font-size:9px;line-height:12px;margin-top:6px;color:var(--mint);overflow-wrap:anywhere}.tower-stats-note{font-size:8px;line-height:11px;margin-top:4px;overflow-wrap:anywhere}
.board-panel{display:grid;grid-template-rows:30px minmax(0,1fr) 18px;height:100%;min-height:0;min-width:0;gap:4px}.board-heading{display:flex;align-items:center;gap:9px;min-width:0}.board-identity{display:flex;align-items:center;gap:10px;min-width:0}.board-heading h2{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-label{color:var(--muted);font-size:10px;white-space:nowrap}.route-label b:first-child{color:var(--mint)}.route-label b:last-child{color:#edaa73}#ring-select{min-height:27px;max-width:250px;width:36%;margin-left:auto;padding:4px 22px 4px 7px;font-size:10px}.route-toggle{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted);white-space:nowrap}#boardExpand{min-height:26px;width:28px;padding:0;font-size:18px;line-height:22px}.board-stage{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;background:#0c151c;border-radius:5px}#warBoard{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:100%;margin:0;aspect-ratio:27/23;background:#111e27;border:0;touch-action:none;cursor:crosshair}.board-hint{font-size:9px;line-height:18px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-panel:fullscreen{height:100dvh;width:100dvw;padding:8px;background:var(--bg)}
.building-console{max-height:100%;min-height:0}.building-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:13px}.building-tabs button{min-width:0;min-height:37px;padding:5px 1px;font-size:9px;white-space:nowrap}.building-tabs button[aria-selected=true]{border-color:var(--gold);color:var(--gold);background:#35362c}.building-content{display:flex;flex-direction:column;gap:10px;min-width:0}.building-content h2{font-size:14px}.building-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.building-heading>b{font-size:12px;color:var(--gold)}.base-building{min-width:0}.base-building>p{font-size:10px;line-height:15px;margin:4px 0 9px}.building-progress{display:none}.building-content>button,.base-building>button{width:100%;min-height:34px;padding:7px 8px;text-align:left;font-size:10px}.base-building>button+button{margin-top:7px}.base-building>small{display:block;margin-top:10px;color:var(--mint);font-size:10px}.building-help{font-size:11px;line-height:1.5}.building-content>small{font-size:11px;color:var(--mint)}.target{font-size:10px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gold)}.unit-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.unit-tiers button{min-height:26px;padding:4px;font-size:10px}.unit-tiers button.active{border-color:var(--gold);color:var(--gold);background:#32382e}.unit-tiers button.locked{color:var(--muted)}#tierHint{display:none}#sendTools{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(44px,6.5vh,76px);gap:6px}#sendTools button{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 8px;min-height:0;border-top:2px solid var(--mint)}#sendTools button strong{font-size:11px;line-height:13px}#sendTools button b{font-size:13px;line-height:15px;color:var(--gold)}#sendTools button small{display:none}.income-clock{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;font-size:10px;color:var(--muted)}.income-clock strong{font-size:16px;color:var(--gold)}.stats{display:flex;justify-content:space-between;gap:5px;font-size:9px;color:var(--muted)}.stats b{font-weight:600;color:var(--text)}#mobileControls{display:none!important}
@media(min-width:761px) and (max-width:1200px){.match-toolbar{gap:12px;padding-left:10px;padding-right:10px}.match-grid{grid-template-columns:225px minmax(0,1fr) 250px;gap:8px;padding:8px}.match-brand{font-size:10px}.match-brand img{width:23px;height:23px}.resources{padding-left:12px;gap:12px}.match-heading h1{max-width:130px}.design-link{display:none}.board-identity{gap:4px}.board-heading{gap:5px}.board-heading h2{font-size:10px}.route-label{display:none}.route-toggle{font-size:8px}#ring-select{width:44%;font-size:9px}.panel{padding:9px}.arsenal .catalog button{padding-left:46px;font-size:8px}.tower-icon{width:39px;height:39px}.building-tabs button{font-size:8px}.building-content{gap:8px}}
@media(min-width:761px) and (max-height:850px){.arsenal{gap:7px}.selection{gap:4px;padding-top:6px}.tower-stats>div{padding:3px 4px}.tower-stats dt{font-size:7px;line-height:9px}.tower-stats dd{font-size:10px;line-height:12px}.tower-effects{font-size:8px;line-height:10px;margin-top:4px}.tower-stats-note{font-size:7px;line-height:9px;margin-top:3px}.selection>strong{font-size:9px;line-height:12px}.selection>button{min-height:28px;font-size:8px}.building-content{gap:8px}.building-tabs{margin-bottom:10px}}
@media(min-width:761px) and (max-height:700px){.match-toolbar{min-height:46px;padding-top:5px;padding-bottom:5px}.match-heading h1{font-size:10px}.match-clock strong{font-size:14px}.resources strong{font-size:17px;line-height:18px}.match-grid{padding-top:7px;padding-bottom:7px}.arsenal>.catalog{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}.arsenal .catalog button{padding:3px 2px 3px 25px;gap:1px}.arsenal .catalog button strong{font-size:7px;line-height:9px}.arsenal .catalog button b{font-size:8px;line-height:10px}.tower-icon{width:21px;height:21px;left:1px}.tower-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.building-tabs{margin-bottom:8px}.building-tabs button{min-height:30px;font-size:8px}.building-content{gap:6px}.building-heading h2{font-size:12px}.base-building>p{font-size:9px;margin:3px 0 6px}.building-content>button,.base-building>button{min-height:29px;font-size:9px;padding:5px 6px}#sendTools{gap:4px;grid-auto-rows:clamp(34px,6.5vh,44px)}#sendTools button strong{font-size:10px}#sendTools button b{font-size:11px}.stats{font-size:8px}}
/* Portrait phones keep the full board above two compact command decks. */
@media(max-width:760px){
 .tw-header{padding:12px;gap:10px}.tw-brand{font-size:12px;gap:5px}.tw-brand img{width:25px;height:25px}.tw-mode{font-size:9px;letter-spacing:1px}.back-link{font-size:10px}main{padding:15px}.entry{grid-template-columns:1fr;gap:25px;padding:20px 0}.intro h1{font-size:38px}.intro>p{font-size:15px}.steps{gap:18px;margin-top:25px}.entry-card{padding:24px}.section-heading{align-items:flex-start;gap:12px}.lobby-players{grid-template-columns:1fr}.invite strong{font-size:22px}.invite button{max-width:150px;font-size:9px}.lobby h1{font-size:29px}footer span{display:none}
 .match-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:3px 8px;min-height:56px;padding:4px 7px}.match-brand{grid-column:1;grid-row:1;font-size:9px;letter-spacing:.3px;gap:4px}.match-brand small{display:none}.match-brand img{width:19px;height:19px}.resources{grid-column:2/-1;grid-row:1;padding:0;border:0;gap:12px}.resources>span{display:flex;align-items:center;gap:3px;font-size:7px;line-height:18px}.resources small{display:none}.resources strong{font-size:13px;line-height:18px}.match-heading{grid-column:1;grid-row:2;margin:0;gap:0;justify-content:flex-start}.match-heading h1,.match-clock span,.design-link{display:none}.match-clock strong{font-size:11px;line-height:20px}.match-clock{display:block}#previewBanner{grid-column:2;grid-row:2;flex-direction:row;align-items:center;font-size:6px;gap:4px;letter-spacing:.3px}#previewBanner a{font-size:8px}#leaveMatch{grid-column:3;grid-row:2;min-height:21px;padding:2px 5px;font-size:8px}
 .match-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;gap:5px;padding:4px 6px 6px}.board-panel{grid-row:1;grid-column:1;grid-template-rows:25px minmax(0,1fr) 12px;gap:2px}.board-heading{gap:5px}.board-heading h2{font-size:9px}.board-identity{gap:4px}.route-label{display:none}#ring-select{max-width:190px;width:45%;font-size:8px;min-height:23px;padding:3px 14px 3px 4px}.route-toggle{font-size:8px;gap:2px}.route-toggle input{width:11px;height:11px}#boardExpand{width:23px;min-height:22px;line-height:18px;font-size:16px}.board-hint{font-size:7px;line-height:12px}
 .arsenal{grid-row:2;grid-column:1;height:auto;max-height:none;display:block;padding:5px}.panel-heading{display:none}.arsenal>.catalog{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,37px);gap:3px}.arsenal .catalog button{padding:2px;justify-content:center;gap:1px}.arsenal .catalog button strong{font-size:7px;line-height:9px}.arsenal .catalog button b{font-size:8px;line-height:9px}.tower-icon{width:14px;height:14px;left:auto;right:1px;top:auto;bottom:1px;transform:none}.selection{margin-top:4px;padding-top:4px;gap:3px}.selection>strong{font-size:8px;line-height:10px}.selection>button{min-height:22px;font-size:8px;padding:3px}.tower-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.tower-stats>div{padding:2px 3px}.tower-stats dt{font-size:7px;line-height:8px}.tower-stats dd{font-size:9px;line-height:10px;margin:0}.tower-effects{font-size:7px;line-height:9px;margin-top:3px}.tower-stats-note{font-size:6px;line-height:8px;margin-top:2px}
 .building-console{grid-row:3;grid-column:1;padding:5px}.building-tabs{gap:4px;margin-bottom:5px}.building-tabs button{min-height:25px;padding:3px;font-size:9px}.building-content{gap:5px}.barracks-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}.barracks-content>.base-building{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:6px}.building-heading{gap:5px}.building-heading h2{font-size:10px}.building-heading>b{font-size:9px}.base-building>p{display:none}.barracks-content>.base-building>button{width:auto;min-height:22px;padding:3px 4px;font-size:8px}.barracks-content>.target{grid-column:1;grid-row:2;font-size:8px;line-height:20px}.barracks-content>.unit-tiers{grid-column:2;grid-row:2;gap:3px}.unit-tiers button{min-height:20px;padding:2px 7px;font-size:8px}#sendTools{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:31px;gap:3px}#sendTools button{padding:3px 5px;gap:0;border-top-width:1px}#sendTools button strong{font-size:8px;line-height:10px}#sendTools button b{font-size:9px;line-height:10px}.income-clock,.stats{display:none}.building-help{font-size:10px;line-height:13px}.building-content>button,.base-building>button{min-height:26px;font-size:9px;padding:4px 6px}.base-building>small,.building-content>small{font-size:9px}.base-building>small{margin-top:6px}.technology .building-heading{margin-bottom:5px}
}
/* Short landscape windows use the same controls with compact six-column tools. */
@media(min-width:761px) and (max-height:480px){
 .match-toolbar{gap:10px;min-height:42px;padding:4px 8px}.match-heading h1{display:none}.resources{gap:10px;padding-left:10px}.resources>span{font-size:8px}.resources strong{font-size:14px;line-height:16px}.match-clock span{display:none}.match-clock strong{font-size:12px}.match-brand{font-size:9px}.match-brand small{display:none}.match-brand img{width:20px;height:20px}#previewBanner{font-size:6px}#previewBanner a{font-size:8px}#leaveMatch{font-size:8px;min-height:26px}.match-grid{grid-template-columns:190px minmax(0,1fr) 225px;gap:6px;padding:5px 6px}.panel{padding:5px}.arsenal{gap:5px;max-height:100%}.panel-heading{display:none}.arsenal>.catalog{flex:none;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,36px);gap:2px}.arsenal .catalog button{padding:1px;gap:0}.arsenal .catalog button strong{font-size:6px;line-height:8px}.arsenal .catalog button b{font-size:7px;line-height:9px}.tower-icon{width:10px;height:10px;left:auto;right:0;top:auto;bottom:0;transform:none}.selection{padding-top:4px;gap:2px}.selection>strong{font-size:8px;line-height:10px}.selection>button{min-height:22px;font-size:7px;padding:2px}.tower-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.tower-stats>div{padding:1px 2px}.tower-stats dt{font-size:6px;line-height:8px}.tower-stats dd{font-size:8px;line-height:10px}.tower-effects{font-size:7px;line-height:9px}.tower-stats-note{font-size:6px;line-height:8px}.board-panel{grid-template-rows:25px minmax(0,1fr) 12px;gap:2px}.board-heading{gap:4px}.board-heading h2{font-size:9px}#ring-select{min-height:22px;font-size:8px;padding:3px 15px 3px 4px}.route-toggle{font-size:7px}.route-toggle input{width:10px;height:10px}#boardExpand{min-height:22px;width:23px;font-size:16px}.board-hint{font-size:7px;line-height:12px}.building-tabs{margin-bottom:6px}.building-tabs button{min-height:26px;font-size:8px;padding:3px 1px}.building-content{gap:5px}.barracks-content .building-heading,.barracks-content .base-building>p{display:none}.building-content>button,.base-building>button{min-height:25px;padding:4px 5px;font-size:8px}.target{font-size:8px;line-height:12px}.unit-tiers button{min-height:22px;padding:2px;font-size:8px}#sendTools{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:31px;gap:3px}#sendTools button{padding:2px;gap:0}#sendTools button strong{font-size:7px;line-height:9px}#sendTools button b{font-size:8px;line-height:10px}.income-clock{padding-top:4px;font-size:8px}.income-clock strong{font-size:12px}.stats{font-size:7px}.building-help{font-size:9px;line-height:12px}.building-content h2{font-size:12px}.building-content>small,.base-building>small{font-size:9px}
}
/* Desktop portraits use the full card width so tower names remain intact. */
@media(min-width:1201px) and (min-height:851px){
 .arsenal .catalog button{align-items:center;padding:5px 3px;gap:2px;text-align:center}
 .arsenal .catalog button strong{font-size:9px;line-height:11px;white-space:nowrap;overflow-wrap:normal}
 .arsenal .catalog .tower-icon{position:static;width:52px;height:52px;transform:none;flex:none}
 .arsenal:has(#towerDetails:not([hidden])) .catalog button{padding-top:3px;padding-bottom:3px;gap:1px}
 .arsenal:has(#towerDetails:not([hidden])) .catalog .tower-icon{width:38px;height:38px}
}

/* Equal surrounding frame; available map space and artwork stay unchanged. */
.board-stage{position:relative;isolation:isolate;background:transparent}
.board-stage::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--board-frame-width,100%);height:var(--board-frame-height,100%);max-width:100%;max-height:100%;background:#0c151c;border-radius:5px;pointer-events:none;z-index:0}
#warBoard{position:relative;z-index:1}

/* Align desktop controls with the visible frame and leave a 20px gutter. */
@media(min-width:761px){
 .match-grid{--sidebar-gap:20px;column-gap:var(--sidebar-gap)}
 .match-grid>.arsenal{transform:translate(var(--sidebar-dock,0px),var(--sidebar-drop,0px));height:calc(100% - var(--sidebar-drop,0px));max-height:min(820px,calc(100% - var(--sidebar-drop,0px)))}
 .match-grid>.building-console{transform:translate(calc(-1 * var(--sidebar-dock,0px)),var(--sidebar-drop,0px));max-height:calc(100% - var(--sidebar-drop,0px))}
 .board-heading,.board-hint{padding-inline:var(--board-frame-inset-x,0px)}
 .match-grid:has(.board-panel:fullscreen)>.panel{transform:none}
}
/* At compact desktop sizes the lowered console uses two unit rows. */
@media(min-width:761px) and (max-width:1000px) and (min-height:481px) and (max-height:650px){
 .building-console #sendTools{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:44px}
 .building-console #sendTools button{padding:3px;gap:1px}
 .building-console #sendTools button strong{font-size:8px;line-height:10px;overflow-wrap:anywhere}
 .building-console #sendTools button b{font-size:10px;line-height:11px}
}

/* Unit information stays visible, including on unavailable units. */
#sendTools{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:5px}
#sendTools button{display:grid;grid-template-columns:1fr auto;align-content:start;align-items:start;gap:3px 4px;padding:7px;min-height:94px;text-align:left}
#sendTools button strong{font-size:11px;line-height:14px;overflow-wrap:anywhere}
#sendTools button b{font-size:11px;line-height:14px;white-space:nowrap}
#sendTools button small{display:block;grid-column:1/-1;font-size:10px;line-height:14px;color:#d2dce6;white-space:pre-line}
#sendTools .unit-ability{grid-column:1/-1;font-size:10px;line-height:13px;color:#95d3c5;white-space:pre-line;overflow-wrap:anywhere}
#sendTools button:disabled{opacity:1;border-color:#35434c;border-top-color:#57786e;background:#182129;cursor:not-allowed}
@media(min-width:761px) and (max-height:850px){
 .building-content{gap:5px}.building-tabs{margin-bottom:6px}
 .base-building>p{display:none}
 #sendTools button{min-height:83px;padding:5px;gap:2px 3px}
 #sendTools button small,#sendTools .unit-ability{font-size:9px;line-height:12px}
}
@media(max-width:760px){
 #sendTools{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:3px}
 #sendTools button{min-height:94px;padding:4px;gap:2px;grid-template-columns:1fr}
 #sendTools button strong,#sendTools button b{font-size:10px;line-height:12px}
 #sendTools button small,#sendTools .unit-ability{font-size:9px;line-height:11px}
}
@media(min-width:761px) and (max-width:1000px) and (max-height:650px){
 .building-console #sendTools{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
 .building-console #sendTools button{min-height:65px;padding:3px;gap:1px 2px}
 .building-console #sendTools button strong,.building-console #sendTools button b{font-size:9px;line-height:10px}
 .building-console #sendTools button small,.building-console #sendTools .unit-ability{font-size:8px;line-height:10px}
 .building-console .income-clock,.building-console .stats{display:none}
}
@media(min-width:761px){
 .match-grid>.building-console{max-height:none;transform:translate(calc(-1 * var(--sidebar-dock,0px)),var(--console-drop,0px))}
}
@media(min-width:761px) and (max-height:480px){
 .match-grid{grid-template-columns:190px minmax(0,1fr) 280px}
 .building-console #sendTools button{min-height:55px}
 .building-console .building-content{gap:3px}
 .building-console .building-tabs{margin-bottom:3px}
 .building-console .target{display:none}
 .building-console .base-building>button{min-height:20px;padding:3px}
 .building-console .unit-tiers button{min-height:18px;padding:2px}
}
@media(min-width:761px) and (max-height:480px){
 .match-grid{grid-template-columns:190px minmax(0,1fr) 320px}
 .building-console #tierHint{margin:0;font-size:8px;line-height:10px}
}
@media(min-width:761px) and (max-height:480px){
 .building-console #sendTools{gap:2px}
 .building-console #sendTools button{padding:2px;gap:0 2px;min-height:52px}
 .building-console .building-progress{display:none}
}
#newPreviewMap{min-height:26px;padding:4px 8px;font-size:10px;white-space:nowrap;color:var(--mint)}
@media(max-width:760px),(max-height:480px){#newPreviewMap{min-height:22px;padding:3px 5px;font-size:9px}}
/* Docked panels can overlap the stage's unused transparent area on narrow maps. */
.match-grid>.panel{position:relative;z-index:2}
/* Keep the map usable while editing on short phones; selection/removal stay visible. */
@media(max-width:760px) and (max-height:700px){.preview-mode #towerDetails{display:none}}
.preview-mode #message{pointer-events:none}
#sendTools .unit-art{display:none}
.research-tracks{display:grid;gap:7px;min-width:0}
.research-tracks button{width:100%;text-align:left;white-space:pre-line;line-height:1.5;font-size:10px;padding:9px 10px;min-height:58px}
.research-tracks button:disabled{opacity:1;color:var(--muted);background:#182129}
.research-category{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-top:3px}
.technology .research-tracks{margin-top:10px}
@media(max-height:850px){.research-tracks{gap:5px}.research-tracks button{padding:6px 8px;font-size:9px;min-height:48px}.technology .research-tracks{margin-top:6px}}
/* Defense and stock values remain readable within five unit rows. */
@media(min-width:761px) and (max-height:1000px){
 .building-content{gap:5px}.building-tabs{margin-bottom:6px}
 .base-building>p{display:none}
 #sendTools button{min-height:83px;padding:5px;gap:2px 3px}
 #sendTools button strong,#sendTools button b{font-size:10px;line-height:12px}
 #sendTools button small,#sendTools .unit-ability{font-size:9px;line-height:12px}
}
/* Short landscape screens wrap the same unit stats naturally into two lines. */
@media(min-width:761px) and (max-height:480px){
 .building-console .research-tracks{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .building-console .research-tracks button{min-height:48px;padding:4px;font-size:8px;line-height:1.3}
 .building-console .research-category{grid-column:1/-1}
 .building-console #researchSummary,.building-console #defenseSummary{font-size:8px;line-height:11px}
}
@media(min-width:761px) and (max-height:480px){
 .building-console #sendTools button{min-height:0}
 .building-console #sendTools button small{white-space:normal}
}
@media(max-width:760px) and (max-height:700px){
 .building-console #sendTools{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 .building-console #sendTools button{min-height:0;padding:3px 2px;gap:1px}
 .building-console #sendTools button strong,.building-console #sendTools button b{font-size:8px;line-height:10px}
 .building-console #sendTools button small,.building-console #sendTools .unit-ability{font-size:7px;line-height:9px}
 .building-console #sendTools button small{white-space:normal}
}