/* Steel Front: battlefield first, with a thumb-reachable command deck. */
:root { color-scheme:dark; --bg:#0c151e; --surface:#14212c; --raised:#1d2e3b; --text:#edf4f5; --muted:#94a7b6; --accent:#d3f878; --cyan:#82d5ef; --danger:#ffa18e; --line:#c0d7e51a; --shadow:0 12px 36px #0005; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; background:var(--bg); color:var(--text); }
* { box-sizing:border-box; }
body,h1,h2,h3,p { margin:0; }
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; border:0; background:var(--raised); border-radius:14px; min-height:48px; transition:background .15s,transform .15s; }
button:active:not(:disabled) { transform:scale(.97); }
button:disabled { cursor:not-allowed; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none!important; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.eyebrow { display:block; font-size:10px; font-weight:750; letter-spacing:1.65px; color:var(--muted); line-height:1.5; }
.icon-button { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border-radius:50%; background:#ffffff08; }
.game-container { position:fixed; inset:0; height:100%; height:100dvh; display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background:radial-gradient(ellipse at 10% 0,#20343a80,transparent 50%),var(--bg); }
.top-bar { display:flex; align-items:center; gap:12px; min-height:80px; padding:12px 24px 8px; flex-shrink:0; }
.title-section { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { display:grid; place-items:center; color:var(--accent); background:#d3f87812; width:44px; height:48px; border-radius:16px 16px 20px 20px; }
.brand-mark .icon { width:29px; height:29px; }
h1 { font-size:19px; letter-spacing:1.8px; line-height:1.2; font-weight:850; white-space:nowrap; }
h1 span { display:block; font-size:8px; color:var(--muted); letter-spacing:3px; font-weight:650; margin-top:5px; }
.faction-badge { display:inline-flex; align-items:center; gap:5px; margin-left:12px; border-radius:20px; padding:7px 10px; font-size:9px; letter-spacing:.6px; background:#ffffff06; color:var(--muted); }
.faction-badge.allied { color:var(--cyan); }
.faction-badge.soviet { color:var(--danger); }
.status-bar { margin-left:auto; display:flex; flex-direction:column; gap:3px; text-align:right; min-width:0; }
.status-item { font-size:12px; color:var(--muted); }
#eraDisplay { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#powerStatus { display:none!important; }
#prestigeDisplay { font-size:10px; color:var(--accent); }
.control-section { flex-shrink:0; }
#pbAuth { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 12px; margin-top:18px; border-radius:14px; font-size:11px; background:#0002; color:var(--muted); flex-shrink:0; }
#pbAuthBtn { min-height:44px; border-radius:0; background:transparent; color:var(--cyan); font-size:11px; }
.resource-bar { display:flex; gap:10px; padding:0 24px 16px; flex-shrink:0; }
.resource-chip { display:flex; align-items:center; gap:10px; padding:10px 17px 10px 12px; min-width:115px; background:#ffffff06; border-radius:18px; }
.resource-chip>.icon { width:34px; height:34px; padding:7px; border-radius:50%; background:#ffffff08; }
.resource-caption { display:block; color:var(--muted); font-size:9px; margin-bottom:2px; }
.resource-chip strong { display:block; font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.credits .icon { color:var(--accent); }.ore .icon { color:#e7bb77; }.power .icon { color:var(--cyan); }.points .icon { color:#c0a8f9; }
.resource-chip.deficit { background:#e9654720; }.resource-chip.deficit strong,.resource-chip.deficit .icon { color:var(--danger); }
.main-area { display:flex; flex:1; min-height:0; gap:18px; padding:0 24px 20px; }
.board-area { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.canvas-board { display:none!important; }
.tactical-map-container { display:flex; flex:1; width:100%; min-height:0; position:relative; overflow:hidden; isolation:isolate; border-radius:28px; background:#182a25; box-shadow:var(--shadow); }
.tactical-map-canvas { display:block; width:100%; height:100%; min-height:0; touch-action:none; cursor:crosshair; }
.tactical-map-hud { position:absolute; z-index:2; inset:16px 16px auto; pointer-events:none; }
.tactical-hud-bar { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.wave-chip,.speed-controls,.base-health-bar { background:#0c1824ed; box-shadow:0 4px 16px #0003; }
.wave-chip { display:flex; gap:9px; align-items:center; min-height:48px; padding:0 14px; border-radius:18px; font-size:12px; }
.live-dot { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--accent); box-shadow:0 0 8px #d3f87855; }
#tacticalWaveInfo { font-weight:750; }#tacticalKills { color:var(--muted); font-size:10px; }
.speed-controls { display:flex; border-radius:18px; padding:3px; pointer-events:auto; }
.speed-btn { min-width:44px; min-height:44px; border-radius:14px; font-size:11px; background:transparent; color:var(--muted); }
.speed-btn.active { background:#d3f87820; color:var(--accent); }
.base-health-bar { position:absolute; top:78px; left:16px; width:132px; border-radius:11px; padding:8px 10px; z-index:2; pointer-events:none; }
.health-fill { height:4px; max-width:100%; border-radius:8px; background:var(--accent)!important; transition:width .3s; }
.base-health-bar.critical .health-fill { background:var(--danger)!important; }
.health-label { color:#c9d6dc; font-size:9px; letter-spacing:.4px; font-weight:650; margin-top:5px; }
.wave-countdown { position:absolute; top:78px; right:16px; z-index:2; max-width:50%; background:#0c1824ed; color:var(--accent); padding:9px 12px; border-radius:12px; font-size:10px; text-align:right; pointer-events:none; }
.wave-countdown.attacking { color:var(--danger); }
.battle-actions { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:7px; align-items:stretch; padding:6px; border-radius:24px; background:#0c1824ed; box-shadow:var(--shadow); max-width:calc(100% - 24px); }
.tower-bar,.deploy-bar { display:contents; }
.tower-btn,.deploy-btn,.overmap-toggle { min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; border-radius:18px; font-size:11px; font-weight:800; white-space:nowrap; }
#buildBtn { background:var(--accent); color:#23321a; min-width:114px; }#deployBtn { background:#263d4d; color:#c1e4f3; min-width:110px; }
.tb-icon:empty::after { content:'+'; font-size:23px; font-weight:400; }
.tb-icon img { display:block; width:24px!important; height:24px!important; object-fit:contain; }
.tower-btn.active,.deploy-btn.active,.overmap-toggle.active { box-shadow:inset 0 0 0 2px var(--accent); }
.utility-action { flex-direction:column; gap:3px; padding:6px 12px; font-size:9px; color:var(--muted); background:transparent; min-width:50px; }
.utility-action .icon { width:20px; height:20px; }
.superweapon-bar { display:flex; gap:6px; position:absolute; bottom:100px; right:16px; z-index:3; }
.sw-btn { position:relative; overflow:hidden; min-height:44px; padding:8px 12px; font-size:9px; font-weight:700; border-radius:14px; color:#dbc7ff; background:#201c32ec; }
.sw-btn:disabled { color:#a89fb8; }.sw-btn .sw-cooldown { position:absolute; bottom:0; left:0; height:3px; background:#c0a8f9; }
.tactical-map-legend { display:none; }
.minimap-area { display:flex; align-items:center; gap:12px; min-height:70px; padding:10px 4px 0; flex-shrink:0; }
.rival-intel { flex:1; min-width:0; }.rival-intel .eyebrow { color:#cbb89c; font-size:8px; letter-spacing:1.4px; }
#rivalStatusDisplay { display:block; margin-top:4px; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#battleButton { background:#d3f87812; color:var(--accent); min-width:130px; font-size:12px; font-weight:700; padding:0 16px; border-radius:16px; }
#battleButton span { margin-left:10px; }#battleButton:disabled { background:#ffffff04; color:var(--muted); }
.sidebar { width:348px; min-width:0; flex-shrink:0; display:flex; flex-direction:column; background:linear-gradient(160deg,#1b2b36,#121f2a 60%); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }
.command-header { display:flex; justify-content:space-between; align-items:center; padding:20px 18px 15px; gap:8px; }
.command-header h2 { font-size:18px; font-weight:700; letter-spacing:-.4px; margin-top:3px; }.command-header .eyebrow { font-size:8px; letter-spacing:1.7px; }
.panel-meta { font-size:10px; line-height:1.5; margin-top:5px; color:var(--muted); }.army-summary { white-space:pre-line; }
#panelToggle { display:none; }
.tab-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#435561 transparent; padding:0 12px 12px; }
.tab-pane { display:none; }.tab-pane.active { display:block; }
.item-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.item-grid button { display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; min-height:76px; width:100%; text-align:left; background:#ffffff06; position:relative; font-weight:650; }
.item-grid button>img { width:44px!important; height:44px!important; flex-shrink:0; object-fit:contain; padding:3px; background:#ffffff06; border-radius:13px; }
.btn-info { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; line-height:1.35; flex:1; }.btn-info>span:first-child { color:var(--text); }
.btn-cost { color:var(--accent); font-size:10px; font-weight:550; }
.item-grid button:not(:disabled)::after { content:'+'; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--accent); background:#d3f87812; font-size:18px; flex-shrink:0; font-weight:400; }
.item-grid button:disabled { background:#ffffff03; }.item-grid button:disabled>img { opacity:.5; }
.item-grid button:disabled .btn-info,.item-grid button:disabled .btn-cost { color:var(--muted); }
.item-grid .item-locked .btn-info>span:first-child { color:#a4b1bc; }.lock-reason { color:#9eabba; font-size:10px; font-weight:400; }
.item-grid .faction-locked { display:none; }
.tab-bar { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:10px 8px; gap:1px; background:#0b17218c; flex-shrink:0; }
.tab-btn { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; border-radius:14px; color:#91a5b4; background:transparent; padding:8px 0; font-size:8px; min-width:0; min-height:58px; }
.tab-btn .icon { width:21px; height:21px; }.tab-btn.active { color:var(--accent); background:#d3f8780e; }
.tab-btn.active::after { content:''; width:4px; height:4px; border-radius:50%; position:absolute; bottom:3px; background:var(--accent); }
#tab-map>div,#tab-overmap>div { font-size:12px!important; line-height:1.6; padding:8px!important; color:var(--text)!important; }
#tab-map>div>div,#tab-overmap>div>div { font-size:12px!important; color:var(--muted)!important; margin-bottom:12px!important; }
#tab-map>div>div[style*="font-weight"],#tab-overmap>div>div[style*="font-weight"] { color:var(--text)!important; font-size:10px!important; letter-spacing:1px; margin-top:18px; }
.overmap-info-panel { position:absolute; bottom:100px; left:16px; z-index:5; max-width:min(300px,calc(100% - 32px)); max-height:calc(100% - 190px); overflow-y:auto; overscroll-behavior:contain; border-radius:18px; background:#101e2af5; box-shadow:var(--shadow); padding:12px; font-size:12px; }
.overmap-info-panel:empty { display:none; }.overmap-info-panel button { min-height:44px; border-radius:12px; }
.tower-tooltip { position:fixed; z-index:20; background:#101e2af5; padding:16px; border-radius:20px; min-width:180px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; font-size:12px; box-shadow:var(--shadow); }
.tower-tooltip button { display:block; width:100%; margin-top:8px; min-height:44px; font-size:12px; }
.modal-overlay,.game-over-overlay { display:none; position:fixed; inset:0; z-index:1000; justify-content:center; align-items:center; padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:#060e18d9; backdrop-filter:blur(12px); }
.modal-overlay.visible,.game-over-overlay.visible { display:flex; }
.modal-content,.game-over-content { width:100%; max-width:580px; max-height:100%; overflow-y:auto; background:radial-gradient(ellipse at top left,#2c4249,transparent 60%),#14232f; border-radius:30px; padding:28px; box-shadow:0 24px 100px #0007; text-align:left; }
.modal-content h2,.game-over-content h2 { font-size:29px; letter-spacing:-.9px; margin-top:7px; margin-bottom:10px; line-height:1.1; }
.modal-subtitle { color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:24px; }
.tower-picker { max-width:620px; }.tower-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tower-picker-cell { display:grid; grid-template-columns:48px 1fr; align-content:start; column-gap:12px; padding:16px; text-align:left; border-radius:20px; background:#ffffff08; }
.tower-picker-icon { grid-row:span 2; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#ffffff06; }
.tower-picker-icon img { width:44px; height:44px; object-fit:contain; image-rendering:pixelated; }
.tower-picker-name { font-size:13px; font-weight:700; align-self:end; }.tower-picker-cost { font-size:11px; color:var(--accent); margin-top:4px; }
.tower-picker-role { grid-column:1/-1; font-size:11px; color:var(--muted); line-height:1.5; margin-top:12px; }
.tower-picker-cell.locked { background:#ffffff03; }.tower-picker-cell.locked .tower-picker-icon { opacity:.4; }
.tower-picker-cell.locked .tower-picker-cost,.tower-picker-cell.unaffordable .tower-picker-cost { color:#cbb89c; }.tower-picker-cell.locked .tower-picker-name { color:var(--muted); }
.picker-actions { margin-top:18px; }.picker-actions button { width:100%; background:#d3f87815; color:var(--accent); font-weight:650; }
.faction-selection { max-width:720px; }.faction-selection>h2 { font-size:42px; letter-spacing:-1.8px; margin-top:14px; }
#factionModal { background:linear-gradient(#0c151edb,#0c151ef0),url('overmap-bg.png') center/cover; }
.faction-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faction-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0; padding:22px; background:linear-gradient(145deg,#53393880,#ffffff03); border-radius:24px; }
.faction-card.allied { background:linear-gradient(145deg,#24506990,#ffffff03); }
.faction-emblem { width:62px; height:62px; border-radius:22px; display:grid; place-items:center; background:#ffa18e12; color:var(--danger); margin-bottom:24px; }
.faction-emblem .icon { width:34px; height:34px; }.allied .faction-emblem { background:#82d5ef15; color:var(--cyan); }
.faction-card .eyebrow { color:var(--danger); font-size:8px; }.allied .eyebrow { color:var(--cyan); }
.faction-card h3 { font-size:25px; letter-spacing:-.6px; margin:8px 0 14px; }
.faction-desc { font-size:12px; line-height:1.6; color:#b7c5ce; margin-bottom:16px; }.faction-bonus { font-size:11px; color:var(--accent); line-height:1.6; margin-bottom:16px; }
.faction-units { font-size:10px; color:var(--muted); line-height:1.6; margin-bottom:22px; }.faction-units span { color:#c9d6dd; }
.faction-choose { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:auto; font-size:12px; padding-top:16px; border-top:1px solid var(--line); }.faction-choose>span { font-size:22px; }
.game-over-overlay { z-index:3000; }.game-over-content { max-width:430px; }.game-over-content h2 { color:var(--danger); }.game-over-content.victory h2 { color:var(--accent); }
.game-over-stats { font-size:13px; line-height:1.9; padding:15px; margin:18px 0; border-radius:18px; background:#0002; }
.game-over-content>button,.confirm-actions button { padding:12px 20px; margin:4px 4px 0 0; color:var(--accent); background:#d3f87814; }
.game-menu { margin:auto; width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:28px; padding:24px; box-shadow:var(--shadow); }
.game-menu::backdrop { background:#060e18cc; backdrop-filter:blur(10px); }.menu-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.menu-heading h2 { font-size:21px; margin-top:6px; }
.menu-note { font-size:12px; color:var(--muted); line-height:1.6; margin:18px 0; }.game-menu>button { display:flex; justify-content:space-between; align-items:center; width:100%; padding:14px; margin-top:8px; font-size:13px; }.game-menu .danger { color:var(--danger); background:#ffa18e0a; }
.toast-container { position:fixed; top:max(90px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; width:max-content; max-width:calc(100vw - 32px); z-index:2000; pointer-events:none; }
.toast { border-radius:16px; background:#14232ff5; box-shadow:var(--shadow); color:var(--accent); padding:14px 20px; font-size:12px; line-height:1.4; animation:toast-in .2s ease-out,toast-out .3s 2.7s forwards; }.toast.warning { color:#f5d494; }.toast.error { color:var(--danger); }.toast.achievement { color:#d5b8ff; }
@keyframes toast-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }@keyframes toast-out { to { opacity:0; transform:translateY(-10px); } }
#tutorial-overlay { position:fixed; inset:0; z-index:5000; pointer-events:none; }#tutorial-backdrop { position:absolute; inset:0; background:#030b14bb; pointer-events:auto; }
.tutorial-highlight { position:relative; box-shadow:0 0 0 3px var(--accent),0 0 25px #d3f87844!important; border-radius:16px; }
#tutorial-tooltip { position:fixed; width:min(90vw,350px); background:#1b2e3c; border:1px solid #d3f87844; border-radius:24px; padding:18px; text-align:center; z-index:5002; pointer-events:auto; box-shadow:var(--shadow); max-height:calc(100dvh - 24px); overflow-y:auto; }
#tutorial-tooltip-icon { font-size:24px; margin-bottom:6px; }#tutorial-tooltip-title { font-size:17px; font-weight:750; color:var(--accent); margin-bottom:8px; }#tutorial-tooltip-text { font-size:12px; line-height:1.6; color:#c3d2dc; }
#tutorial-tooltip-footer { display:flex; gap:8px; align-items:center; margin-top:12px; color:var(--muted); font-size:11px; }#tutorial-step-indicator { margin-right:auto; white-space:nowrap; }#tutorial-skip { font-size:11px; min-width:60px; background:#ffffff08; }#tutorial-next { font-size:12px; font-weight:750; padding:0 14px; background:var(--accent); color:var(--bg); }
@media (max-height:700px) { #tutorial-tooltip { padding:12px; border-radius:18px; }#tutorial-tooltip-icon { display:none; }#tutorial-tooltip-title { font-size:15px; margin-bottom:5px; }#tutorial-tooltip-text { font-size:11px; line-height:1.5; }#tutorial-tooltip-footer { margin-top:8px; } }
/* Pickers remain touchable during action-gated onboarding. */
body.tutorial-picking #towerPickerModal,body.tutorial-picking #unitPickerModal { z-index:5100; }
@media (hover:hover) { button:hover:not(:disabled) { filter:brightness(1.13); }.item-grid button:hover:not(:disabled),.tower-picker-cell:hover:not(:disabled) { background:#ffffff0e; }.faction-card:hover { box-shadow:inset 0 0 0 1px #ffffff22; transform:translateY(-3px); } }
@media (max-width:1100px) and (min-width:900px) { .main-area { gap:12px; padding:0 16px 16px; }.sidebar { width:310px; }.faction-badge { display:none!important; } }
@media (max-width:899px) {
  .top-bar { min-height:65px; padding:8px 16px; gap:8px; }.brand-mark { width:34px; height:40px; border-radius:13px; }.brand-mark .icon { width:25px; height:25px; }.title-section { gap:9px; }
  h1 { font-size:14px; letter-spacing:1px; }h1 span { font-size:6px; letter-spacing:2.1px; }.faction-badge { display:none!important; }.status-bar { flex:1; }#eraDisplay { font-size:9px; }
  .resource-bar { padding:0 14px 12px; gap:5px; }.resource-chip { flex:1; min-width:0; gap:6px; padding:9px 7px; border-radius:14px; }.resource-chip>.icon { width:22px; height:22px; padding:2px; background:transparent; }.resource-caption { font-size:8px; }.resource-chip strong { font-size:12px; }
  .main-area { flex-direction:column; gap:0; padding:0; }.board-area { padding:0 10px; }.tactical-map-container { border-radius:24px; min-height:180px; }.tactical-map-hud { inset:10px 10px auto; }
  .wave-chip { min-height:44px; border-radius:16px; padding:0 10px; font-size:10px; gap:6px; }#tacticalKills { font-size:8px; }.speed-controls { padding:0; border-radius:16px; }.speed-btn { min-width:44px; }
  .base-health-bar { top:62px; left:10px; width:118px; padding:7px 9px; }.wave-countdown { top:62px; right:10px; font-size:9px; max-width:50%; padding:7px 9px; }
  .battle-actions { bottom:10px; padding:5px; border-radius:21px; gap:4px; max-width:calc(100% - 16px); }.tower-btn,.deploy-btn { min-height:52px; padding:8px 11px; gap:5px; font-size:10px; border-radius:16px; }#buildBtn,#deployBtn { min-width:92px; }.utility-action { min-width:46px; font-size:9px; padding:5px 8px; gap:2px; }
  .superweapon-bar { bottom:82px; right:10px; }.sw-btn { padding:6px 10px; font-size:8px; }.minimap-area { min-height:62px; padding:6px 4px; gap:8px; }#rivalStatusDisplay { font-size:9px; }#battleButton { font-size:11px; min-width:110px; padding:0 12px; border-radius:14px; }
  .sidebar { width:100%; flex:0 0 min(32dvh,285px); border-radius:26px 26px 0 0; box-shadow:0 -8px 32px #0002; }.command-header { padding:10px 16px 6px; min-height:60px; }.command-header h2 { font-size:16px; margin-top:1px; }#panelToggle { display:grid; width:44px; height:44px; min-height:44px; }
  .tab-content { padding:0 12px 8px; }.item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }.item-grid button { min-height:70px; padding:9px; gap:8px; border-radius:16px; }.item-grid button>img { width:34px!important; height:34px!important; padding:0; border-radius:10px; }.btn-info { font-size:10px; gap:3px; }.btn-cost,.lock-reason { font-size:9px; }.item-grid button:not(:disabled)::after { display:none; }
  .tab-bar { padding:6px 10px; }.tab-btn { font-size:9px; min-height:56px; padding:5px 0; gap:4px; }.sidebar.collapsed { flex-basis:68px; }.sidebar.collapsed .command-header,.sidebar.collapsed .tab-content { display:none; }.sidebar.collapsed .tab-bar { flex:1; }
  .modal-overlay,.game-over-overlay { align-items:flex-end; padding:max(12px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); }.modal-content,.game-over-content { border-radius:28px; padding:22px; }.modal-content h2 { font-size:27px; }
  .tower-picker-grid { gap:8px; }.tower-picker-cell { grid-template-columns:36px 1fr; padding:12px; column-gap:7px; border-radius:18px; }.tower-picker-icon { width:36px; height:40px; }.tower-picker-icon img { width:36px; height:36px; }.tower-picker-name { font-size:11px; }.tower-picker-cost,.tower-picker-role { font-size:10px; }
  .faction-selection>h2 { font-size:34px; }.faction-cards { gap:8px; }.faction-card { padding:16px 12px; border-radius:20px; }.faction-emblem { width:48px; height:48px; margin-bottom:20px; border-radius:17px; }.faction-card h3 { font-size:22px; }.faction-desc { font-size:11px; }.faction-bonus { font-size:10px; }.faction-units { display:none; }.faction-choose { font-size:10px; }#pbAuth { padding:0 16px; font-size:10px; }
}
@media (max-width:370px) { .brand-mark { display:none; }.top-bar { padding-inline:12px; }.resource-bar { padding-inline:10px; }.resource-chip { gap:4px; padding-inline:5px; }.resource-chip strong { font-size:11px; }.resource-chip>.icon { width:18px; }.wave-chip { gap:5px; padding:0 8px; }.wave-chip .live-dot { display:none; }#buildBtn,#deployBtn { min-width:82px; font-size:9px; }.utility-action { min-width:44px; }.tower-picker-cell { grid-template-columns:1fr; }.tower-picker-icon { grid-row:auto; margin-bottom:8px; }.tower-picker-role { grid-column:auto; } }
/* Landscape phones use a side deck; the battlefield keeps its full height. */
@media (orientation:landscape) and (max-height:560px) {
  .top-bar { min-height:48px; padding:0 12px; }.brand-mark { height:32px; width:32px; }h1 { font-size:12px; }h1 span { display:none; }
  .resource-bar { position:absolute; top:calc(4px + env(safe-area-inset-top)); left:max(200px,26%); right:65px; padding:0; gap:6px; }.resource-chip { flex:1; padding:4px 8px; min-width:0; }.resource-chip>.icon { width:20px; height:20px; padding:0; }.resource-caption { display:none; }.resource-chip strong { font-size:11px; }.status-bar { visibility:hidden; }
  .main-area { flex-direction:row; gap:8px; padding:0 8px 8px; }.board-area { padding:0; }.sidebar { width:260px; flex:0 0 260px; border-radius:22px; }.command-header { padding:8px 12px; min-height:46px; }.command-header h2 { font-size:14px; }.command-header .eyebrow,#panelToggle { display:none; }
  .sidebar.collapsed { flex-basis:260px; }.sidebar.collapsed .command-header { display:flex; }.sidebar.collapsed .tab-content { display:block; }.sidebar.collapsed .tab-bar { flex:0; }
  .item-grid { grid-template-columns:1fr; }.item-grid button { min-height:62px; }.tab-bar { grid-template-columns:repeat(3,minmax(0,1fr)); padding:3px; }.tab-btn { flex-direction:row; min-height:44px; gap:5px; font-size:8px; }.tab-btn .icon { width:16px; height:16px; }
  .minimap-area { min-height:50px; padding:2px 4px 0; }.rival-intel .eyebrow { display:none; }.tactical-map-container { min-height:120px; }.base-health-bar { top:61px; }.modal-overlay,.game-over-overlay { align-items:center; }.faction-emblem { display:none; }.faction-card h3 br { display:none; }.faction-card h3 { font-size:20px; }.faction-units { display:none; }
}
@media (orientation:landscape) and (max-width:700px) {
  .title-section h1 { display:none; }.resource-bar { left:60px; right:60px; }
  .sidebar,.sidebar.collapsed { width:210px; flex-basis:210px; }.tower-btn,.deploy-btn { padding:6px 8px; }#buildBtn,#deployBtn { min-width:78px; }.utility-action { min-width:44px; padding:5px 6px; }.battle-actions { gap:2px; }.tab-btn .icon { width:14px; height:14px; }
  .wave-chip { min-width:65px; padding:0 8px; }.wave-chip .live-dot,#tacticalKills { display:none; }.base-health-bar { top:10px; left:82px; width:94px; height:44px; display:flex; flex-direction:column; justify-content:center; }.health-label { font-size:8px; }.wave-countdown { top:auto; bottom:82px; font-size:8px; }
}
@media (orientation:portrait) and (max-height:700px) { .tactical-map-container { min-height:120px; }.command-header { padding-top:7px; }.panel-meta { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }