@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #060b12;
  --bg-2: #0a1420;
  --panel: rgba(9, 19, 30, .91);
  --panel-2: rgba(13, 27, 42, .92);
  --line: rgba(135, 182, 216, .16);
  --line-bright: rgba(108, 221, 255, .44);
  --text: #edf7ff;
  --muted: #7992a6;
  --muted-2: #507089;
  --cyan: #5de5ff;
  --cyan-2: #1bb3dd;
  --gold: #ffbf5a;
  --gold-2: #e88c22;
  --red: #ff6377;
  --green: #64e0a2;
  --shadow: 0 22px 65px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Barlow Condensed', system-ui, sans-serif; letter-spacing: .02em; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.hidden { display: none !important; }
.noise { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.app-shell { min-height: 100vh; }
.screen { min-height: 100vh; position: relative; }

/* Main menu */
.menu-screen { isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 37%, rgba(18, 68, 91, .38), transparent 45%), linear-gradient(180deg, #06101b 0%, #07111c 47%, #04080e 100%); }
.menu-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(2, 6, 10, .72), transparent 45%, rgba(2, 6, 10, .66)), linear-gradient(0deg, rgba(3, 7, 11, .95), transparent 33%); }
.menu-skyline { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.moon { position: absolute; top: 11%; left: 52%; width: min(30vw, 310px); aspect-ratio: 1; border-radius: 50%; opacity: .18; background: radial-gradient(circle at 35% 32%, #b7ecff, #2c7c9b 42%, transparent 70%); filter: blur(2px); box-shadow: 0 0 90px rgba(43, 210, 255, .32); }
.skyline { position: absolute; left: -5%; right: -5%; bottom: -1%; height: 45%; clip-path: polygon(0 75%, 4% 72%, 7% 79%, 10% 59%, 13% 72%, 16% 49%, 19% 73%, 22% 65%, 25% 80%, 29% 55%, 32% 68%, 35% 50%, 38% 77%, 41% 65%, 45% 71%, 49% 42%, 53% 70%, 56% 56%, 59% 77%, 63% 58%, 66% 76%, 70% 47%, 73% 67%, 76% 58%, 80% 73%, 83% 49%, 87% 68%, 91% 59%, 95% 78%, 100% 69%, 100% 100%, 0 100%); }
.skyline-back { opacity: .42; background: linear-gradient(180deg, #0d2d42, #06141f); filter: blur(1px); transform: scale(1.03); }
.skyline-front { opacity: .86; background: linear-gradient(180deg, #091b2b, #03070c); transform: translateY(5%); }
.particle-field { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle, rgba(98, 225, 255, .7) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255, 191, 90, .42) 0 1px, transparent 1.5px); background-size: 130px 160px, 210px 220px; background-position: 20px 30px, 100px 80px; animation: drift 18s linear infinite; }
.warning-lights { position: absolute; left: 0; right: 0; bottom: 17%; display: flex; justify-content: space-around; opacity: .6; }
.warning-lights i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: blink 2.4s infinite; }
.warning-lights i:nth-child(2) { animation-delay: .7s; }.warning-lights i:nth-child(3) { animation-delay: 1.4s; }.warning-lights i:nth-child(4) { animation-delay: .3s; }.warning-lights i:nth-child(5) { animation-delay: 1.8s; }
.menu-content { width: min(1120px, 92vw); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); align-items: center; gap: clamp(24px, 6vw, 100px); transform: translateY(-2vh); }
.brand-lockup { text-align: center; animation: brand-in 1.1s both cubic-bezier(.2, .76, .25, 1); }
.brand-kicker, .eyebrow, .section-label { color: var(--cyan); font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .18em; }
.brand-kicker { opacity: .78; margin-bottom: 12px; }
.brand-logo { width: min(640px, 100%); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .56)); animation: logo-pulse 5s ease-in-out infinite 1.2s; }
.brand-tagline { color: #9fc2d6; font-size: clamp(16px, 2vw, 22px); margin-top: 8px; letter-spacing: .1em; text-transform: uppercase; }
.menu-actions { animation: menu-in 1s .45s both cubic-bezier(.2, .76, .25, 1); width: min(360px, 100%); justify-self: center; }
.menu-button { width: 100%; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); background: linear-gradient(100deg, rgba(11, 27, 42, .92), rgba(10, 18, 30, .72)); padding: 14px 18px; margin: 9px 0; text-align: left; border-radius: 5px; box-shadow: 0 10px 22px rgba(0, 0, 0, .2); transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; }
.menu-button:hover { transform: translateX(6px); border-color: var(--line-bright); background: linear-gradient(100deg, rgba(17, 51, 70, .96), rgba(12, 27, 41, .88)); box-shadow: 0 0 24px rgba(41, 188, 224, .13); }
.menu-button.primary { border-color: rgba(255, 191, 90, .48); background: linear-gradient(100deg, rgba(107, 65, 21, .7), rgba(12, 29, 42, .9)); }
.menu-button.primary:hover { border-color: var(--gold); }
.button-icon { color: var(--cyan); font-size: 22px; width: 22px; text-align: center; }
.primary .button-icon { color: var(--gold); }
.menu-button strong { display: block; font-size: 21px; text-transform: uppercase; letter-spacing: .08em; }.menu-button small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; letter-spacing: .04em; }
.menu-secondary { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; display: flex; justify-content: center; gap: 17px; flex-wrap: wrap; }
.text-button, .footer-icon { color: var(--muted); background: none; border: 0; padding: 4px; letter-spacing: .08em; font-size: 13px; transition: color .18s; }.text-button:hover, .footer-icon:hover { color: var(--text); }
.menu-footer { position: absolute; bottom: 24px; left: 4vw; right: 4vw; display: flex; justify-content: space-between; color: var(--muted-2); font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .14em; }.footer-icon { margin-left: 12px; font-size: 15px; }

/* Game shell */
.game-screen { background: radial-gradient(circle at 55% 8%, rgba(15, 67, 88, .24), transparent 32%), var(--bg); }
.topbar { height: 72px; border-bottom: 1px solid var(--line); background: rgba(5, 12, 20, .93); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 4; backdrop-filter: blur(16px); }
.topbar-brand { display: flex; align-items: baseline; gap: 11px; font-weight: 700; letter-spacing: .17em; font-size: 17px; white-space: nowrap; }.topbar-brand small { color: var(--muted); font-family: 'Space Mono', monospace; letter-spacing: .08em; font-size: 9px; }
.mini-mark { width: 30px; height: 30px; border: 1px solid rgba(93, 229, 255, .6); color: var(--cyan); background: rgba(20, 89, 110, .22); border-radius: 3px; font-weight: 700; }
.resource-bar { display: flex; gap: 10px; margin-left: auto; margin-right: 24px; }.resource-chip { min-width: 108px; border: 1px solid var(--line); background: rgba(10, 26, 40, .75); padding: 6px 10px; display: flex; gap: 8px; align-items: center; border-radius: 4px; }.resource-symbol { font-size: 18px; color: var(--cyan); }.resource-chip.money .resource-symbol { color: var(--gold); }.resource-chip.core .resource-symbol { color: #c897ff; }.resource-chip.scrap .resource-symbol { color: #b8c5d0; }.resource-chip.energy .resource-symbol { color: #78f2ff; }.resource-chip b { display: block; font-family: 'Space Mono', monospace; font-size: 12px; }.resource-chip small { color: var(--muted); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.topbar-actions { display: flex; gap: 8px; }
.icon-button { border: 1px solid var(--line); background: rgba(11, 27, 40, .8); min-width: 34px; height: 34px; border-radius: 3px; color: var(--muted); }.icon-button:hover { border-color: var(--line-bright); color: var(--text); }
.command-layout { max-width: 1740px; margin: 0 auto; padding: 26px 28px 35px; display: grid; grid-template-columns: 260px minmax(480px, 1fr) 330px; gap: 18px; }
.panel { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); border-radius: 5px; }.left-rail, .right-rail { min-width: 0; }.left-rail { padding: 18px 16px; align-self: start; }.right-rail { display: grid; align-content: start; gap: 18px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.panel-heading h2, .battlefield-header h1 { margin: 4px 0 0; font-size: 23px; font-weight: 600; letter-spacing: .03em; }.eyebrow { color: var(--muted); font-size: 9px; }.status-dot { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .08em; color: var(--green); }.status-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }.hq-card { margin-top: 20px; padding: 13px; border: 1px solid rgba(93, 229, 255, .2); background: linear-gradient(135deg, rgba(16, 59, 72, .4), rgba(8, 19, 31, .7)); }.hq-top { display: flex; gap: 11px; align-items: center; }.hq-icon { width: 37px; height: 37px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(255, 191, 90, .4); border-radius: 4px; font-size: 22px; }.hq-top strong { display: block; font-size: 18px; }.meter { background: rgba(3, 8, 13, .8); height: 6px; margin: 14px 0 7px; overflow: hidden; border-radius: 5px; }.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); box-shadow: 0 0 12px rgba(93, 229, 255, .55); transition: width .3s; }.hq-meta { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; color: var(--muted); font-size: 8px; }.rail-section { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 20px; }.section-label { color: var(--muted); font-size: 9px; margin-bottom: 10px; }.objectives { display: grid; gap: 9px; }.objective { display: grid; grid-template-columns: 13px 1fr; gap: 8px; color: #bed4e0; font-size: 14px; line-height: 1.05; }.objective i { width: 8px; height: 8px; border: 1px solid var(--cyan); margin-top: 4px; border-radius: 50%; }.objective.complete { color: var(--muted); text-decoration: line-through; }.objective.complete i { background: var(--green); border-color: var(--green); }.objective small { color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }.systems-list { display: grid; gap: 5px; }.system-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; background: rgba(4, 11, 17, .42); font-size: 13px; }.system-row span:last-child { color: var(--cyan); font-family: 'Space Mono', monospace; font-size: 9px; }.wide-button { width: 100%; border: 1px solid var(--line-bright); background: rgba(23, 69, 85, .62); color: var(--text); min-height: 38px; border-radius: 3px; padding: 8px 10px; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; transition: background .18s, border-color .18s, transform .18s; }.wide-button:hover:not(:disabled) { background: rgba(38, 115, 132, .78); transform: translateY(-1px); }.wide-button span { color: var(--cyan); margin-right: 5px; }.wide-button b { color: var(--gold); float: right; font-family: 'Space Mono', monospace; font-size: 10px; }.wide-button.accent { margin-top: 14px; border-color: rgba(255, 191, 90, .55); background: linear-gradient(100deg, rgba(127, 77, 24, .7), rgba(47, 50, 32, .7)); }.wide-button.accent:hover:not(:disabled) { background: linear-gradient(100deg, rgba(171, 103, 28, .78), rgba(62, 64, 34, .8)); }.wide-button.ghost { margin-top: 22px; border-color: var(--line); background: rgba(7, 17, 27, .72); color: var(--muted); text-align: left; text-transform: none; }.wide-button.ghost small { display: block; margin-left: 24px; color: var(--muted-2); }.wide-button:disabled { cursor: not-allowed; opacity: .42; filter: saturate(.5); }

/* Battlefield */
.battlefield-panel { min-width: 0; padding: 19px; display: flex; flex-direction: column; min-height: 690px; }.battlefield-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }.wave-readout { text-align: right; }.wave-readout strong { display: block; font-family: 'Space Mono', monospace; color: var(--gold); font-size: 32px; line-height: 1; }.wave-state { color: var(--muted); font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .12em; }.wave-state.live { color: var(--green); }.battlefield-wrap { position: relative; min-height: 500px; flex: 1; border: 1px solid rgba(93, 229, 255, .24); overflow: hidden; background: radial-gradient(circle at 55% 50%, rgba(16, 84, 95, .33), transparent 39%), linear-gradient(145deg, #081d2b, #06121c 52%, #0b1621); }.battlefield-wrap::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(95, 208, 232, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 208, 232, .07) 1px, transparent 1px); background-size: 46px 46px; opacity: .5; }.battlefield { position: absolute; inset: 10% 9%; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); gap: 8px; z-index: 1; }.grid-cell { position: relative; min-height: 55px; border: 1px solid rgba(93, 229, 255, .13); background: rgba(8, 29, 43, .45); transition: border-color .18s, background .18s, transform .18s; }.grid-cell.buildable:hover { border-color: var(--cyan); background: rgba(55, 159, 178, .24); transform: scale(1.02); cursor: pointer; }.grid-cell.core-cell { border-color: rgba(255, 191, 90, .68); background: radial-gradient(circle, rgba(255, 191, 90, .2), rgba(18, 44, 48, .75)); }.grid-cell.core-cell::after { content: 'HQ'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-family: 'Space Mono', monospace; font-size: 12px; text-shadow: 0 0 12px var(--gold); }.grid-cell.wall-cell { background: linear-gradient(180deg, rgba(103, 132, 147, .45), rgba(31, 53, 64, .7)); border-color: rgba(171, 202, 214, .42); }.grid-cell.wall-cell::after { content: '▰'; position: absolute; inset: 0; display: grid; place-items: center; color: #c6e0e8; opacity: .62; }.grid-cell.tower-cell { border-color: rgba(93, 229, 255, .52); background: radial-gradient(circle, rgba(93, 229, 255, .2), rgba(7, 30, 43, .7)); }.grid-cell.tower-cell::after { content: attr(data-icon); position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--cyan); filter: drop-shadow(0 0 7px rgba(93, 229, 255, .68)); }.grid-cell.building-cell { border-color: rgba(255, 191, 90, .38); background: radial-gradient(circle, rgba(255, 191, 90, .17), rgba(25, 33, 32, .65)); }.grid-cell.building-cell::after { content: attr(data-icon); position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; color: var(--gold); }.grid-cell.selected-cell { box-shadow: inset 0 0 0 2px var(--gold), 0 0 20px rgba(255, 191, 90, .17); }
.lane-label { position: absolute; z-index: 2; left: 2%; color: rgba(144, 211, 227, .47); font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: .08em; transform: rotate(-90deg); transform-origin: left top; }.lane-top { top: 31%; }.lane-mid { top: 51%; }.lane-bottom { top: 72%; }.enemy-layer { position: absolute; inset: 10% 9%; z-index: 3; pointer-events: none; }.enemy { position: absolute; width: 23px; height: 23px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; background: #c44259; border: 1px solid #ff9b9e; box-shadow: 0 0 14px rgba(255, 82, 106, .46); transform: translate(-50%, -50%); transition: left .18s linear; }.enemy.armored { background: #776d52; border-color: #ffe0a2; }.enemy.swarm { border-radius: 50%; background: #a32a78; }.enemy.flying { background: #265e9a; border-color: #79d5ff; }.enemy.boss { width: 42px; height: 42px; background: #6b2d84; border-color: #e88cff; box-shadow: 0 0 28px rgba(221, 92, 255, .65); }.enemy-hp { position: absolute; left: 50%; top: -7px; width: 35px; height: 3px; background: rgba(0, 0, 0, .7); transform: translateX(-50%); }.enemy-hp span { display: block; height: 100%; background: var(--red); }.battlefield-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 85px rgba(0, 0, 0, .56); }.battlefield-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; }.combat-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.battle-controls { display: flex; gap: 8px; min-width: 210px; }.battle-controls .wide-button { flex: 1; }

/* Right rail */
.build-panel, .upgrade-panel, .feed-panel { padding: 16px; }.queue-count, .level-badge { color: var(--cyan); font-family: 'Space Mono', monospace; font-size: 9px; border: 1px solid rgba(93, 229, 255, .3); padding: 4px 6px; white-space: nowrap; }.build-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 15px; }.build-option { min-height: 65px; border: 1px solid var(--line); background: rgba(7, 19, 30, .68); padding: 7px; text-align: left; border-radius: 3px; position: relative; transition: border-color .18s, background .18s; }.build-option:hover:not(:disabled) { border-color: var(--cyan); background: rgba(18, 59, 76, .72); }.build-option:disabled { opacity: .45; cursor: not-allowed; }.build-option .build-icon { font-size: 20px; display: block; color: var(--cyan); line-height: 1; }.build-option.building .build-icon { color: var(--gold); }.build-option strong { display: block; font-size: 13px; margin-top: 4px; }.build-option small { color: var(--muted); font-family: 'Space Mono', monospace; font-size: 8px; }.selected-copy { color: #9bb3c3; font-size: 14px; line-height: 1.3; margin: 14px 0; }.upgrade-stat { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }.upgrade-stat strong { color: var(--green); font-family: 'Space Mono', monospace; font-size: 9px; }.meter.large { height: 8px; margin: 8px 0 0; }.upgrade-branches { display: grid; gap: 6px; margin-top: 14px; }.branch { padding: 8px; border-left: 2px solid var(--cyan-2); background: rgba(7, 24, 35, .64); font-size: 12px; }.branch strong { display: block; }.branch small { display: block; color: var(--muted); margin-top: 2px; font-size: 10px; }.activity-feed { display: grid; gap: 9px; margin-top: 13px; max-height: 145px; overflow: auto; }.feed-item { color: #a9c2d0; font-size: 12px; padding-left: 12px; border-left: 2px solid var(--cyan-2); }.feed-item small { display: block; color: var(--muted-2); font-family: 'Space Mono', monospace; font-size: 8px; margin-top: 2px; }

/* Dialogs and toasts */
.modal-root { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(1, 5, 9, .75); backdrop-filter: blur(10px); }.modal-card { width: min(650px, 100%); max-height: min(760px, 92vh); overflow: auto; border: 1px solid var(--line-bright); background: linear-gradient(150deg, rgba(14, 33, 49, .98), rgba(5, 13, 21, .98)); box-shadow: 0 30px 100px rgba(0, 0, 0, .62); padding: 23px; border-radius: 5px; animation: modal-in .24s ease-out; }.modal-card h2 { margin: 4px 0 6px; font-size: 30px; }.modal-card p { color: #9bb3c3; line-height: 1.45; }.modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 16px; }.close-button { border: 1px solid var(--line); background: transparent; color: var(--muted); width: 30px; height: 30px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }.modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.modal-tile { border: 1px solid var(--line); background: rgba(6, 17, 27, .7); padding: 13px; }.modal-tile strong { color: var(--cyan); display: block; font-size: 16px; }.modal-tile small { color: var(--muted); display: block; margin-top: 3px; line-height: 1.25; }.save-slot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: rgba(6, 17, 27, .7); padding: 12px; margin: 8px 0; }.save-slot strong { display: block; }.save-slot small { color: var(--muted); display: block; }.save-slot button { border: 1px solid var(--line-bright); background: rgba(17, 67, 83, .7); padding: 6px 10px; font-size: 11px; text-transform: uppercase; }.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); color: #c7dae5; }.toggle { width: 38px; height: 20px; border: 1px solid var(--line-bright); border-radius: 20px; padding: 2px; background: rgba(13, 46, 60, .8); }.toggle::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); transition: transform .2s; }.toggle.off::after { transform: translateX(0); background: var(--muted); }.toggle.on::after { transform: translateX(16px); }.offline-reward { text-align: center; padding: 13px 0 4px; }.offline-reward .reward-number { color: var(--gold); font-family: 'Space Mono', monospace; font-size: 30px; }.offline-reward .reward-label { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }.toast-stack { position: fixed; z-index: 30; right: 24px; bottom: 24px; display: grid; gap: 8px; width: min(350px, calc(100vw - 48px)); }.toast { border: 1px solid var(--line-bright); border-left: 3px solid var(--cyan); background: rgba(7, 20, 31, .96); padding: 11px 13px; color: #c9e3ed; box-shadow: var(--shadow); animation: toast-in .25s ease-out; }.toast.gold { border-left-color: var(--gold); }.toast strong { display: block; color: var(--text); }.toast small { display: block; color: var(--muted); margin-top: 3px; }

@keyframes brand-in { from { opacity: 0; transform: translateY(25px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }
@keyframes logo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(62, 208, 241, .18)); } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-130px, 80px, 0); } }
@keyframes blink { 0%, 35%, 100% { opacity: .18; } 45%, 65% { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(13px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: none; } }

@media (max-width: 1220px) { .command-layout { grid-template-columns: 230px minmax(420px, 1fr); }.right-rail { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; align-items: start; }.feed-panel { grid-column: span 1; } }
@media (max-width: 900px) { .menu-content { grid-template-columns: 1fr; gap: 18px; }.brand-logo { max-width: 580px; }.menu-actions { width: min(390px, 92vw); }.command-layout { grid-template-columns: 1fr; padding: 15px; }.left-rail { order: 2; }.battlefield-panel { order: 1; min-height: 650px; }.right-rail { order: 3; grid-column: auto; grid-template-columns: 1fr 1fr; }.feed-panel { grid-column: span 2; }.resource-bar { gap: 4px; margin-right: 8px; }.resource-chip { min-width: 78px; padding: 5px 6px; }.resource-chip small { display: none; }.topbar { padding: 0 14px; }.topbar-brand small { display: none; } }
@media (max-width: 600px) { .menu-content { transform: translateY(-1vh); }.brand-kicker { font-size: 8px; }.brand-tagline { font-size: 13px; }.menu-secondary { gap: 12px; }.menu-footer { font-size: 7px; bottom: 14px; }.resource-chip { min-width: 0; border: 0; background: transparent; }.resource-symbol { font-size: 15px; }.resource-chip b { font-size: 10px; }.topbar-brand span { display: none; }.topbar { height: 62px; }.command-layout { padding: 10px; }.battlefield-panel { padding: 12px; min-height: 580px; }.battlefield-wrap { min-height: 390px; }.battlefield { gap: 5px; inset: 14% 8%; }.grid-cell { min-height: 38px; }.battlefield-footer { display: block; }.battle-controls { margin-top: 12px; }.right-rail { grid-template-columns: 1fr; }.feed-panel { grid-column: auto; }.modal-grid { grid-template-columns: 1fr; }.modal-card { padding: 17px; }.battlefield-header h1 { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Visual asset pass + one-screen command layout */
html, body { height: 100%; overflow: hidden; }
.game-screen { height: 100vh; overflow: hidden; }
.topbar { height: 64px; }
.command-layout { height: calc(100vh - 64px); min-height: 0; padding: 14px 18px 16px; grid-template-columns: 228px minmax(0, 1fr) 314px; gap: 14px; overflow: hidden; }
.left-rail { height: 100%; padding: 14px 12px; overflow: hidden; }
.battlefield-panel { min-height: 0; height: 100%; padding: 14px; }
.battlefield-header { margin-bottom: 10px; }
.battlefield-header h1 { font-size: 21px; }
.battlefield-wrap { min-height: 0; height: 100%; background: linear-gradient(90deg, rgba(2, 10, 17, .28), rgba(2, 10, 17, .05) 55%, rgba(2, 10, 17, .26)), url('/outputs/battlefield-background.png') center / cover no-repeat; }
.battlefield-wrap::before { opacity: .12; background-size: 52px 52px; }
.battlefield { inset: 7% 5%; gap: 7px; }
.grid-cell { min-height: 0; background: rgba(6, 23, 33, .16); border-color: rgba(134, 224, 239, .2); }
.grid-cell.core-cell { background: rgba(10, 65, 76, .14); }
.grid-cell.wall-cell { background: rgba(62, 79, 83, .22); }
.grid-cell.tower-cell, .grid-cell.building-cell { background: rgba(9, 44, 57, .18); }
.grid-cell.tower-cell::after, .grid-cell.building-cell::after { content: none; }
.entity-art { display: block; position: absolute; inset: 5%; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .72)); z-index: 2; }
.tower-art, .build-visual { background-image: url('/outputs/tower-sprite-sheet.png'); background-size: 400% 300%; }
.tower-machine { background-position: 0% 0%; }.tower-cannon { background-position: 33.333% 0%; }.tower-sniper { background-position: 66.666% 0%; }.tower-flame { background-position: 100% 0%; }.tower-tesla { background-position: 0% 50%; }.tower-freeze { background-position: 33.333% 50%; }.tower-missile { background-position: 66.666% 50%; }.tower-drone { background-position: 100% 50%; }.tower-railgun { background-position: 0% 100%; }.tower-orbital { background-position: 33.333% 100%; }
.building-art { inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 191, 90, .8), rgba(63, 101, 105, .55) 48%, rgba(5, 12, 18, .2) 52%); border: 2px solid rgba(255, 191, 90, .58); box-shadow: 0 0 16px rgba(255, 191, 90, .24); }.building-workshop { background: radial-gradient(circle, rgba(255, 151, 64, .8), rgba(91, 82, 63, .55) 48%, rgba(5, 12, 18, .2) 52%); }.building-radar { background: radial-gradient(circle, rgba(93, 229, 255, .8), rgba(34, 82, 93, .55) 48%, rgba(5, 12, 18, .2) 52%); border-color: rgba(93, 229, 255, .6); }.building-shield { background: radial-gradient(circle, rgba(157, 122, 255, .8), rgba(57, 57, 94, .55) 48%, rgba(5, 12, 18, .2) 52%); border-color: rgba(194, 153, 255, .6); }
.build-options { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }.build-option { min-height: 55px; padding: 4px 5px; overflow: hidden; }.build-visual { display: block; width: 37px; height: 27px; margin: -2px auto 1px; background-repeat: no-repeat; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .72)); }.build-option strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.build-option small { font-size: 7px; }.build-option.building .build-visual { background-image: none; background-size: auto; inset: auto; width: 24px; height: 24px; border-width: 1px; margin: 0 auto 2px; }
.right-rail { min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }.build-panel { flex: 0 0 auto; padding: 11px; }.upgrade-panel { flex: 1 1 auto; min-height: 0; padding: 11px; overflow: hidden; }.feed-panel { flex: 0 0 94px; padding: 10px; overflow: hidden; }.feed-panel .activity-feed { max-height: 50px; margin-top: 5px; }.feed-item { font-size: 10px; }.upgrade-panel .selected-copy { font-size: 12px; margin: 8px 0; }.upgrade-panel .upgrade-branches { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }.upgrade-panel .branch { padding: 5px; font-size: 10px; min-width: 0; }.upgrade-panel .branch small { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.upgrade-panel .wide-button.accent { margin-top: 8px; min-height: 30px; }.hq-card { margin-top: 12px; padding: 10px; }.rail-section { padding-top: 10px; margin-top: 12px; }.objective { font-size: 12px; }.objective small { font-size: 8px; }.systems-list { gap: 3px; }.system-row { padding: 5px; font-size: 11px; }.wide-button.ghost { margin-top: 12px; min-height: 34px; }.battlefield-footer { margin-top: 9px; }.combat-status { font-size: 11px; }.battle-controls { min-width: 260px; }.battle-controls .icon-button { min-width: 42px; font-size: 10px; }
.enemy-art { position: absolute; inset: -45%; background-image: url('/outputs/enemy-sprite-sheet.png'); background-size: 400% 200%; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .74)); }.enemy-runner { background-position: 0% 0%; }.enemy-swarm { background-position: 33.333% 0%; }.enemy-armored { background-position: 66.666% 0%; }.enemy-flying { background-position: 100% 0%; }.enemy-healer { background-position: 0% 100%; }.enemy-burrower { background-position: 33.333% 100%; }.enemy-emp { background-position: 66.666% 100%; }.enemy-splitter { background-position: 66.666% 0%; }.enemy-boss { background-position: 100% 100%; }
.enemy { width: 29px; height: 29px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.enemy.armored, .enemy.swarm, .enemy.flying, .enemy.boss { background: transparent; border: 0; }.enemy.boss { width: 54px; height: 54px; }.enemy-hp { top: -5px; width: 38px; z-index: 4; }.enemy.boss .enemy-hp { width: 55px; top: -3px; }.enemy.hit .enemy-art { animation: enemy-hit .14s ease-out; filter: brightness(1.9) drop-shadow(0 0 9px rgba(255, 99, 119, .9)); }
.projectile { position: absolute; z-index: 5; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan), 0 0 18px rgba(93, 229, 255, .8); transform: translate(-50%, -50%); animation: projectile-flight .22s linear forwards; pointer-events: none; }.projectile-cannon, .projectile-missile { width: 10px; height: 10px; background: var(--gold); box-shadow: 0 0 13px var(--gold); }.projectile-flame { width: 12px; height: 5px; border-radius: 50%; background: #ff7434; box-shadow: 0 0 14px #ff7434; }.projectile-freeze { background: #a1edff; box-shadow: 0 0 12px #a1edff; }.projectile-orbital { width: 14px; height: 14px; background: #fff0ac; }.impact { position: absolute; z-index: 6; width: 24px; height: 24px; transform: translate(-50%, -50%); border: 2px solid var(--cyan); border-radius: 50%; animation: impact-pop .24s ease-out forwards; pointer-events: none; }.impact-cannon, .impact-missile, .impact-orbital { border-color: var(--gold); }.impact-flame { border-color: #ff7434; }
.firing { animation: tower-fire .16s ease-out; }
@keyframes projectile-flight { from { transform: translate(-50%, -50%) translate(0, 0); opacity: 1; } to { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); opacity: .72; } }
@keyframes impact-pop { from { opacity: 1; transform: translate(-50%, -50%) scale(.35); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.65); } }
@keyframes enemy-hit { 0%, 100% { transform: translate(-50%, -50%); } 45% { transform: translate(-50%, -50%) scale(1.14) translateX(2px); } }
@keyframes tower-fire { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); filter: brightness(1.8) drop-shadow(0 0 12px rgba(93, 229, 255, .8)); } }

@media (max-width: 1220px) and (min-width: 901px) { .command-layout { grid-template-columns: 205px minmax(0, 1fr) 280px; padding-left: 12px; padding-right: 12px; gap: 10px; }.resource-chip { min-width: 84px; }.resource-bar { gap: 4px; margin-right: 8px; } }
@media (max-width: 900px) { html, body { overflow: auto; }.game-screen { height: auto; min-height: 100vh; overflow: visible; }.command-layout { height: auto; overflow: visible; grid-template-columns: 1fr; }.battlefield-panel { height: 600px; }.left-rail, .right-rail { height: auto; overflow: visible; }.right-rail { display: grid; grid-template-columns: 1fr; }.upgrade-panel { overflow: visible; }.feed-panel { flex: none; } }

/* Align the tactical cells with the fortified floor in the background art. */
#battlefield { inset: 8% 5% 8% 24%; gap: 6px; }
#battlefield .grid-cell { border-color: rgba(133, 231, 248, .46); background: rgba(4, 19, 28, .18); box-shadow: inset 0 0 0 1px rgba(9, 25, 34, .25); }
#battlefield .grid-cell.tower-cell, #battlefield .grid-cell.building-cell { background: rgba(12, 59, 70, .28); }
#battlefield .grid-cell.wall-cell { background: rgba(42, 66, 72, .28); border-color: rgba(192, 224, 230, .58); }
#battlefield .grid-cell.core-cell { background: rgba(255, 191, 90, .18); }
#battlefield .grid-cell.buildable { border-color: rgba(114, 238, 255, .72); background: rgba(44, 139, 155, .24); }
#battlefield .grid-cell.buildable:hover { background: rgba(72, 188, 202, .34); }
.battlefield-wrap { background-position: 92% center; }
@media (max-width: 900px) { .battlefield-wrap { background-position: center; } #battlefield { inset: 12% 8%; gap: 5px; } }

/* The generated battlefield was laid out against the real 8x5 tactical map.
   Keep the CSS board on that same pad field instead of stretching it over the
   surrounding walls and approach lanes. */
.battlefield-wrap {
  background-image: linear-gradient(90deg, rgba(2, 10, 17, .2), rgba(2, 10, 17, .02) 55%, rgba(2, 10, 17, .18)), url('/outputs/battlefield-grid-background.png');
  /* Stretch this deliberately composed board to the wrapper so its pad
     coordinates do not change when a wide browser crops the image differently. */
  background-size: 100% 100%;
  background-position: center;
}
#battlefield { inset: 17% 12% 30% 37%; gap: 6px; }
#battlefield .grid-cell {
  border: 1.5px solid rgba(164, 240, 252, .86);
  background: rgba(3, 16, 25, .48);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .48), 0 0 10px rgba(43, 207, 232, .1);
}
#battlefield .grid-cell.tower-cell,
#battlefield .grid-cell.building-cell {
  background: rgba(4, 24, 35, .78);
  border-color: rgba(127, 239, 255, .98);
  box-shadow: inset 0 0 0 2px rgba(65, 180, 203, .22), 0 0 15px rgba(43, 207, 232, .16);
}
#battlefield .grid-cell.wall-cell {
  background: rgba(52, 69, 76, .76);
  border-color: rgba(224, 242, 247, .9);
  box-shadow: inset 0 0 0 2px rgba(197, 225, 232, .2), 0 0 9px rgba(197, 225, 232, .12);
}
#battlefield .grid-cell.core-cell {
  background: radial-gradient(circle, rgba(255, 198, 95, .34), rgba(88, 53, 17, .72) 72%);
  border-color: rgba(255, 214, 116, 1);
  box-shadow: inset 0 0 0 2px rgba(255, 214, 116, .28), 0 0 20px rgba(255, 191, 90, .32);
}
#battlefield .grid-cell.core-cell::before {
  content: '';
  position: absolute;
  inset: 17%;
  border: 2px solid rgba(255, 225, 151, .72);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 191, 90, .65), inset 0 0 10px rgba(255, 191, 90, .42);
  pointer-events: none;
}
#battlefield .grid-cell.buildable {
  border-color: rgba(170, 249, 255, 1);
  background: rgba(38, 137, 154, .48);
  box-shadow: inset 0 0 0 2px rgba(115, 236, 255, .26), 0 0 14px rgba(93, 229, 255, .2);
}
#battlefield .grid-cell.buildable:hover { background: rgba(72, 188, 202, .62); }
#battlefield .entity-art {
  inset: 8%;
  filter: brightness(1.22) saturate(1.12) drop-shadow(0 4px 6px rgba(0, 0, 0, .96)) drop-shadow(0 0 5px rgba(93, 229, 255, .22));
}
#battlefield .building-art { inset: 15%; }
@media (max-width: 900px) {
  .battlefield-wrap { background-position: center; }
  #battlefield { inset: 17% 12% 30% 37%; gap: 5px; }
}

/* Route-defense rebuild --------------------------------------------------- */
.battlefield-wrap {
  isolation: isolate;
  background-image: linear-gradient(rgba(2, 8, 13, .04), rgba(2, 8, 13, .12)), url('/outputs/battlefield-route-background.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.battlefield-wrap::before {
  z-index: 1;
  opacity: 1;
  background: radial-gradient(circle at 52% 48%, transparent 48%, rgba(1, 5, 9, .2) 100%);
  pointer-events: none;
}
#battlefield {
  inset: 0;
  display: block;
  z-index: 4;
}
.enemy-layer {
  inset: 0;
  z-index: 6;
  overflow: hidden;
}
.route-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.route-shadow,
.route-energy { fill: none; vector-effect: non-scaling-stroke; }
.route-shadow { stroke: rgba(0, 0, 0, .2); stroke-width: 7; }
.route-energy {
  stroke: rgba(101, 236, 255, .34);
  stroke-width: 1.2;
  stroke-dasharray: 5 12;
  filter: drop-shadow(0 0 5px rgba(93, 229, 255, .75));
  animation: route-flow 2.2s linear infinite;
}
.route-marker {
  position: absolute;
  z-index: 7;
  color: rgba(181, 239, 250, .82);
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  letter-spacing: .18em;
  text-shadow: 0 1px 5px #000;
  pointer-events: none;
}
.route-entry { left: 1.4%; top: 17%; }
.route-exit { right: 1.6%; top: 52%; color: rgba(255, 201, 104, .92); }

#battlefield .build-pad {
  position: absolute;
  left: calc(var(--pad-x) * 1%);
  top: calc(var(--pad-y) * 1%);
  width: 6%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(134, 232, 247, .62);
  background: radial-gradient(circle, rgba(5, 19, 27, .58) 0 58%, rgba(34, 125, 143, .18) 60% 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .46), 0 0 11px rgba(93, 229, 255, .13);
  overflow: visible;
  z-index: 2;
}
#battlefield .build-pad.empty-pad::before {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(147, 234, 247, .36);
  font: 500 13px/1 'Space Mono', monospace;
}
#battlefield .build-pad:hover,
#battlefield .build-pad.buildable {
  border-color: rgba(168, 249, 255, .98);
  background: radial-gradient(circle, rgba(10, 39, 50, .74), rgba(51, 184, 204, .34));
  box-shadow: inset 0 0 0 2px rgba(109, 235, 255, .25), 0 0 17px rgba(93, 229, 255, .34);
}
#battlefield .build-pad.buildable {
  cursor: crosshair;
  animation: pad-ready 1.35s ease-in-out infinite;
}
#battlefield .build-pad.tower-cell,
#battlefield .build-pad.building-cell {
  border-color: rgba(126, 238, 255, .78);
  background: radial-gradient(circle, rgba(3, 15, 23, .76), rgba(10, 45, 57, .48));
  box-shadow: inset 0 0 0 2px rgba(44, 164, 187, .24), 0 0 14px rgba(50, 217, 239, .2);
}
#battlefield .build-pad.selected-cell {
  border-color: rgba(255, 203, 99, 1);
  box-shadow: inset 0 0 0 2px rgba(255, 203, 99, .4), 0 0 22px rgba(255, 188, 72, .55);
}
#battlefield .build-pad .entity-art {
  inset: -30%;
  filter: brightness(1.28) saturate(1.18) drop-shadow(0 6px 7px rgba(0, 0, 0, .95)) drop-shadow(0 0 7px rgba(93, 229, 255, .28));
  transform: rotate(var(--aim-angle, 0deg));
  transform-origin: 50% 58%;
  transition: transform .14s ease-out, filter .12s;
}
#battlefield .build-pad .building-art {
  inset: 8%;
  transform: none;
}
#battlefield .build-pad.pad-firing::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 3%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #dffcff;
  box-shadow: 0 0 9px #fff, 0 0 18px rgba(93, 229, 255, .95);
  animation: muzzle-flash .14s ease-out forwards;
  z-index: 8;
  pointer-events: none;
}
#battlefield .entity-art.firing { animation: tower-recoil .16s ease-out; }

.field-hq {
  position: absolute;
  right: .8%;
  top: 61.5%;
  width: 8.5%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 184, 66, .8);
  background: radial-gradient(circle, rgba(255, 216, 118, .8), rgba(167, 58, 15, .5) 42%, rgba(13, 20, 28, .22) 70%);
  box-shadow: inset 0 0 18px rgba(255, 239, 178, .32), 0 0 26px rgba(255, 126, 35, .38);
  color: #fff0ba;
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 3;
}
.field-hq span { font: 700 10px/1 'Space Mono', monospace; letter-spacing: .08em; }
.field-hq small { margin-top: 3px; color: var(--gold); font: 7px/1 'Space Mono', monospace; }
.field-hq.selected-cell { box-shadow: inset 0 0 18px rgba(255, 239, 178, .42), 0 0 34px rgba(255, 177, 65, .72); }

.enemy {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: left .055s linear, top .055s linear;
  will-change: left, top;
  z-index: 7;
}
.enemy.boss { width: 58px; height: 58px; background: transparent; border: 0; }
.enemy-art {
  inset: -46%;
  transform: rotate(var(--enemy-angle, 0deg));
  transform-origin: center;
  animation: enemy-march .5s ease-in-out infinite alternate;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .9)) drop-shadow(0 0 5px rgba(255, 70, 91, .38));
}
.enemy.flying .enemy-art { animation-duration: .3s; }
.enemy.boss .enemy-art { inset: -32%; filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .95)) drop-shadow(0 0 13px rgba(223, 94, 255, .72)); }
.enemy.hit .enemy-art {
  animation: enemy-hit-route .15s ease-out;
  filter: brightness(2.05) saturate(.7) drop-shadow(0 0 11px rgba(255, 240, 192, .95));
}
.enemy-hp { top: -8px; width: 42px; height: 4px; border: 1px solid rgba(0, 0, 0, .65); }
.enemy.boss .enemy-hp { width: 64px; }

.projectile {
  animation: none;
  pointer-events: none;
  z-index: 10;
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, var(--cyan));
  box-shadow: 0 0 8px var(--cyan), -8px 0 12px rgba(93, 229, 255, .6);
}
.projectile::after {
  content: '';
  position: absolute;
  right: 80%;
  top: 50%;
  width: 19px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .65;
}
.projectile-cannon { width: 11px; height: 11px; background: #ffb849; box-shadow: 0 0 12px #ff9633; }
.projectile-flame { width: 23px; height: 8px; background: linear-gradient(90deg, #ff4b1f, #ffe26b); box-shadow: 0 0 14px #ff6b28; }
.projectile-freeze { width: 12px; height: 12px; background: #d8fbff; box-shadow: 0 0 14px #72e8ff; }
.projectile-missile { width: 20px; height: 7px; background: linear-gradient(90deg, #ff7c28, #d7e7ea); box-shadow: -9px 0 15px rgba(255, 105, 31, .9); }
.projectile-drone { width: 13px; height: 9px; border-radius: 40%; background: #a2fbff; box-shadow: 0 0 11px rgba(93, 229, 255, .9); }
.projectile-orbital { width: 18px; height: 18px; border-radius: 50%; background: #fff2a9; box-shadow: 0 0 18px #fff, 0 0 34px #ff9d35; }

.beam {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  z-index: 11;
  pointer-events: none;
  animation: beam-flash .16s ease-out forwards;
}
.beam-sniper { height: 2px; background: #ffe9a0; box-shadow: 0 0 7px #ffd65f; }
.beam-tesla { height: 4px; background: repeating-linear-gradient(90deg, #eaffff 0 7px, #54dfff 7px 11px, transparent 11px 15px); box-shadow: 0 0 10px #42dcff; }
.beam-railgun { height: 6px; background: linear-gradient(90deg, #fff, #63f5ff 55%, transparent); box-shadow: 0 0 12px #8ffaff, 0 0 24px rgba(93, 229, 255, .86); }

.impact {
  width: 34px;
  height: 34px;
  border-width: 3px;
  animation: impact-bloom .36s cubic-bezier(.15,.7,.2,1) forwards;
}
.impact-flame { border-color: #ff7a32; background: radial-gradient(circle, rgba(255, 216, 84, .75), rgba(255, 71, 24, .2) 48%, transparent 70%); }
.impact-cannon, .impact-missile { width: 48px; height: 48px; border-color: #ffc55f; background: radial-gradient(circle, rgba(255, 241, 174, .84), rgba(255, 91, 26, .22) 46%, transparent 72%); }
.impact-tesla { border-color: #8ef7ff; box-shadow: inset 0 0 15px #42dcff, 0 0 15px #42dcff; }
.impact-freeze { border-color: #c8fbff; background: radial-gradient(circle, rgba(181, 247, 255, .55), transparent 68%); }
.impact-railgun { width: 52px; height: 52px; border-color: #d6feff; }
.impact-orbital { width: 86px; height: 86px; border-color: #fff0a0; background: radial-gradient(circle, rgba(255, 255, 224, .88), rgba(255, 139, 48, .28) 38%, transparent 72%); }
.damage-number {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff3b8;
  font: 700 11px/1 'Space Mono', monospace;
  text-shadow: 0 2px 4px #000, 0 0 7px rgba(255, 183, 68, .8);
  z-index: 12;
  pointer-events: none;
  animation: damage-rise .72s ease-out forwards;
}
.damage-tesla, .damage-freeze { color: #c9fbff; }

@keyframes route-flow { to { stroke-dashoffset: -34; } }
@keyframes pad-ready { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.09); } }
@keyframes muzzle-flash { from { opacity: 1; transform: translate(-50%, -50%) scale(.6); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
@keyframes tower-recoil { 0%, 100% { transform: rotate(var(--aim-angle, 0deg)) scale(1); } 40% { transform: rotate(var(--aim-angle, 0deg)) scale(1.16) translateY(3px); filter: brightness(1.8) drop-shadow(0 0 12px rgba(93, 229, 255, .9)); } }
@keyframes enemy-march { from { transform: rotate(var(--enemy-angle, 0deg)) translateY(-1px); } to { transform: rotate(var(--enemy-angle, 0deg)) translateY(2px); } }
@keyframes enemy-hit-route { 0%, 100% { transform: rotate(var(--enemy-angle, 0deg)) scale(1); } 45% { transform: rotate(var(--enemy-angle, 0deg)) scale(1.2); } }
@keyframes beam-flash { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 25% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; } }
@keyframes impact-bloom { from { opacity: 1; transform: translate(-50%, -50%) scale(.25); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }

/* Tower combat telemetry and structure damage -------------------------------- */
.tower-hp { position: absolute; left: 13%; right: 13%; bottom: -8%; height: 4px; border: 1px solid rgba(8, 17, 25, .9); background: rgba(7, 13, 18, .9); border-radius: 5px; overflow: hidden; z-index: 7; pointer-events: none; }
.tower-hp span { display: block; height: 100%; background: linear-gradient(90deg, #ff445d, #ffc45b 62%, #7dffbc); transition: width .18s ease; }
.tower-damaged { border-color: rgba(255, 82, 85, .9) !important; }
.tower-damaged .entity-art { filter: saturate(.7) drop-shadow(0 0 7px rgba(255, 76, 71, .65)); }
.locked-build { filter: saturate(.35); opacity: .56 !important; }
.locked-build small { color: #ffb667 !important; }
.enemy.stopped .enemy-art { animation: enemy-brace .45s ease-in-out infinite alternate; }
.enemy.attacking .enemy-art { filter: drop-shadow(0 0 8px rgba(255, 63, 71, .95)); animation: enemy-attack .28s ease-in-out infinite alternate; }
.tower-hit-ring { position: absolute; z-index: 8; width: 34px; height: 34px; transform: translate(-50%, -50%); border: 2px solid #ff5364; border-radius: 50%; box-shadow: inset 0 0 12px rgba(255, 70, 75, .8), 0 0 18px rgba(255, 70, 75, .8); animation: tower-hit-pop .4s ease-out forwards; pointer-events: none; }
.damage-tower { color: #ff6a73 !important; text-shadow: 0 0 8px rgba(255, 59, 66, .8); }

#tower-inspector { position: absolute; left: var(--inspector-x); top: var(--inspector-y); z-index: 30; width: min(260px, 29%); min-width: 205px; padding: 13px 14px 14px; border: 1px solid rgba(93, 229, 255, .52); border-radius: 7px; background: linear-gradient(145deg, rgba(8, 24, 37, .98), rgba(4, 12, 21, .98)); box-shadow: 0 14px 36px rgba(0, 0, 0, .48), 0 0 28px rgba(35, 193, 226, .12); transform: translate(0, -50%); animation: inspector-in .18s ease-out both; pointer-events: auto; }
.inspector-kicker { color: #6ce3f8; font: 9px/1 'Space Mono', monospace; letter-spacing: .16em; }
.inspector-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.inspector-title strong { font-size: 18px; }
.inspector-title span { color: #ffc55f; font: 10px 'Space Mono', monospace; border: 1px solid rgba(255, 197, 95, .5); padding: 4px 5px; }
.tower-inspector p { color: #9bb3c3; font-size: 11px; line-height: 1.35; margin: 8px 0 10px; }
.inspector-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.inspector-stats > div { padding: 6px 7px; background: rgba(8, 38, 53, .65); border: 1px solid rgba(74, 172, 194, .2); }
.inspector-stats small { display: block; color: #718b9c; font: 8px 'Space Mono', monospace; letter-spacing: .08em; }
.inspector-stats b { display: block; color: #e8f9ff; font: 11px 'Space Mono', monospace; margin-top: 3px; }
.inspector-stats i { color: #77ffb5; font-style: normal; }
.inspector-branch { color: #7ca4b5; font-size: 10px; margin: 9px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector-upgrade { min-height: 34px; font-size: 10px; padding: 6px 9px; }
.inspector-upgrade b { margin-left: auto; color: #ffca67; font: 9px 'Space Mono', monospace; }
.inspector-locked { padding: 9px; border: 1px solid rgba(255, 177, 95, .38); color: #ffc071; font: 9px 'Space Mono', monospace; text-align: center; background: rgba(74, 39, 19, .3); }
.inspector-close { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border: 0; color: #8ca9b9; background: transparent; font-size: 19px; cursor: pointer; }
.inspector-close:hover { color: #fff; }

#battlefield .tower-cell.pad-firing .tower-machine { animation: machine-fire .15s ease-out; }
#battlefield .tower-cell.pad-firing .tower-cannon { animation: cannon-fire .26s ease-out; }
#battlefield .tower-cell.pad-firing .tower-sniper { animation: sniper-fire .3s ease-out; }
#battlefield .tower-cell.pad-firing .tower-flame { animation: flame-fire .2s ease-out; }
#battlefield .tower-cell.pad-firing .tower-tesla { animation: tesla-fire .25s ease-out; }
#battlefield .tower-cell.pad-firing .tower-freeze { animation: freeze-fire .35s ease-out; }
#battlefield .tower-cell.pad-firing .tower-missile { animation: missile-fire .34s ease-out; }
#battlefield .tower-cell.pad-firing .tower-drone { animation: drone-fire .23s ease-out; }
#battlefield .tower-cell.pad-firing .tower-railgun { animation: railgun-fire .36s ease-out; }
#battlefield .tower-cell.pad-firing .tower-orbital { animation: orbital-fire .5s ease-out; }
.projectile-machine { width: 7px; height: 4px; border-radius: 1px; background: #9ff9ff; box-shadow: 0 0 9px #5ee6ff; }
.projectile-sniper { width: 4px; height: 4px; background: #fff4a3; box-shadow: 0 0 12px #ffe56e; }
.impact-machine { width: 16px; height: 16px; border-color: #78ebff; }
.impact-sniper { width: 19px; height: 19px; border-color: #fff1a3; }
.impact-drone { border-color: #9efff6; box-shadow: inset 0 0 10px rgba(108, 242, 255, .55), 0 0 14px rgba(108, 242, 255, .65); }

@keyframes inspector-in { from { opacity: 0; transform: translate(0, -46%) scale(.97); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes enemy-brace { from { transform: translate(-50%, -50%) rotate(var(--enemy-angle)) scale(1); } to { transform: translate(-50%, -50%) rotate(var(--enemy-angle)) scale(1.09, .92); } }
@keyframes enemy-attack { from { transform: translate(-50%, -50%) rotate(var(--enemy-angle)) translateX(0); } to { transform: translate(-50%, -50%) rotate(var(--enemy-angle)) translateX(4px); } }
@keyframes tower-hit-pop { from { opacity: 1; transform: translate(-50%, -50%) scale(.42); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }
@keyframes machine-fire { 0%,100% { transform: translateY(0); } 35% { transform: translateX(-2px) rotate(-2deg); } }
@keyframes cannon-fire { 0%,100% { transform: translateY(0); } 28% { transform: translateY(2px) scale(1.05); } }
@keyframes sniper-fire { 0%,100% { filter: brightness(1); } 30% { filter: brightness(2.3) drop-shadow(0 0 10px #fff2a6); } }
@keyframes flame-fire { 0%,100% { transform: scale(1); } 40% { transform: scale(1.08) rotate(-4deg); } }
@keyframes tesla-fire { 0%,100% { filter: brightness(1); } 40% { filter: brightness(2) drop-shadow(0 0 12px #58ebff); } }
@keyframes freeze-fire { 0%,100% { transform: scale(1); } 40% { transform: scale(1.1); filter: brightness(1.6); } }
@keyframes missile-fire { 0%,100% { transform: translateY(0); } 32% { transform: translateY(2px) rotate(-3deg); } }
@keyframes drone-fire { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes railgun-fire { 0%,100% { filter: brightness(1); } 24% { filter: brightness(2.8) drop-shadow(0 0 15px #a6faff); } }
@keyframes orbital-fire { 0%,100% { transform: scale(1); } 32% { transform: scale(1.14); filter: brightness(2) drop-shadow(0 0 16px #ffcf64); } }

@media (max-width: 1050px) {
  #tower-inspector { width: 220px; min-width: 0; }
  .inspector-stats b { font-size: 9px; }
}

/* Idle industry update: every action remains inside the viewport. */
.hq-icon { width: 42px; height: 44px; border: 0; background: transparent; }
.hq-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 7px rgba(255, 178, 65, .25)); }
.field-hq { background: rgba(4, 14, 23, .12); border-color: rgba(255, 199, 92, .3); overflow: visible; }
.field-hq img { position: absolute; inset: -38% -18% -4%; width: 136%; height: 142%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 9px rgba(255, 162, 42, .5)); animation: hq-reactor 3.8s ease-in-out infinite; }
.field-hq span, .field-hq small { position: relative; top: 68%; text-shadow: 0 1px 5px #000; z-index: 2; }
.field-hq span { font-size: 8px; }
.field-hq small { font-size: 7px; }
.brand-logo { width: min(710px, 100%); }
.brand-lockup { animation: brand-in 1.3s cubic-bezier(.2,.7,.2,1) both; }
.topbar-actions { gap: 5px; }
.topbar-actions .icon-button { width: 33px; min-width: 33px; }
.resource-bar { margin-right: 12px; }
.right-rail { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.build-panel { padding: 11px; }
.construction-tabs, .detail-tabs { display: flex; gap: 4px; }
.construction-tabs { margin-top: 9px; }
.construction-tabs button, .detail-tabs button { flex: 1; min-width: 0; background: rgba(7, 21, 33, .7); border: 1px solid var(--line); color: var(--muted); border-radius: 3px; padding: 6px 3px; font-size: 10px; letter-spacing: .03em; }
.construction-tabs button[aria-pressed="true"], .detail-tabs button[aria-selected="true"] { color: var(--cyan); background: rgba(30, 107, 128, .27); border-color: rgba(93, 229, 255, .5); }
.build-options { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 7px; gap: 5px; min-height: 118px; align-content: start; }
.build-option { min-height: 56px; }
.build-option small { white-space: normal; font-size: 7px; }
.right-detail-panel { min-height: 0; display: flex; flex-direction: column; padding: 10px; overflow: hidden; }
.detail-tabs { flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.detail-tabs button { font-size: 11px; padding: 7px 3px; }
#contract-badge:not(:empty) { display: inline-block; min-width: 14px; border-radius: 8px; background: #f3bf5c; color: #172330; font-size: 9px; }
.detail-view { min-height: 0; flex: 1; padding: 10px 0 0; overflow: visible; }
.detail-view.hidden { display: none; }
.upgrade-panel .panel-heading h2 { font-size: 22px; }
.upgrade-panel .selected-copy { font-size: 12px; line-height: 1.25; margin: 8px 0; }
.upgrade-stat { gap: 8px; align-items: flex-start; }
.upgrade-stat > span { flex-shrink: 0; }
.upgrade-stat > strong { font-size: 8px; text-align: right; white-space: normal; }
.upgrade-panel .wide-button.accent { margin-top: 8px; min-height: 34px; }
.upgrade-panel .upgrade-branches { grid-template-columns: 1fr; gap: 4px; margin-top: 8px; }
.upgrade-panel .branch { display: flex; justify-content: space-between; gap: 6px; padding: 5px 7px; min-height: 26px; font-size: 11px; }
.upgrade-panel .branch strong { font-weight: 500; }
.upgrade-panel .branch small { font-size: 8px; margin: 2px 0 0; }
.system-repair { width: 100%; padding: 7px; margin-top: 8px; border: 1px solid rgba(255, 171, 66, .4); background: rgba(112, 68, 22, .2); color: var(--gold); font-size: 11px; }
.system-repair[hidden] { display: none; }
.feed-panel { flex: 1; }
.feed-panel .activity-feed { max-height: none; margin-top: 12px; gap: 10px; overflow: visible; }
.feed-item { font-size: 12px; }
.contracts-panel h2 { font-size: 21px; margin: 5px 0 9px; }
.contract-date { margin: 5px 0 12px; font-size: 10px; color: var(--muted); }
.objective-heading { display: flex; justify-content: space-between; font-size: 8px; }
#objective-cycle { color: var(--cyan); letter-spacing: .04em; }
.objectives { gap: 7px; }
.objective { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 11px; }
.objective strong { font-weight: 500; }
.objective small { font-size: 8px; line-height: 1.35; }
.objective button { border: 1px solid rgba(255, 201, 93, .4); color: #ffca6e; background: rgba(107, 71, 25, .35); border-radius: 3px; min-width: 26px; min-height: 27px; padding: 4px 5px; font-size: 8px; }
.objective button:disabled { opacity: .38; cursor: default; background: transparent; }
.objective.reward-ready { color: #ecf8ee; }
.objective.reward-ready i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 189, 75, .5); }
.objective.claimed { opacity: .5; }
.objective.claimed i { background: var(--green); border-color: var(--green); }
.contracts-panel .objective { border: 1px solid var(--line); background: rgba(8, 27, 39, .7); padding: 10px 8px; margin-bottom: 9px; }
.treasury-button { width: 100%; margin-top: 11px; border: 1px solid rgba(255, 189, 75, .36); border-radius: 4px; padding: 9px; background: linear-gradient(110deg, rgba(103, 71, 22, .24), rgba(12, 44, 53, .56)); text-align: left; }
.treasury-button > span { display: block; font: 8px 'Space Mono', monospace; color: #a18b62; letter-spacing: .08em; }
.treasury-button strong { display: block; color: var(--gold); font: 14px 'Space Mono', monospace; margin: 5px 0; }
.treasury-button small { display: block; color: #8fb9c3; font-size: 10px; }
.treasury-button.ready { border-color: rgba(255, 200, 98, .65); }
.economy-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.economy-summary > div { background: rgba(14, 51, 67, .5); padding: 13px; border: 1px solid var(--line); }
.economy-summary strong { display: block; color: var(--gold); font: 22px 'Space Mono', monospace; }
.economy-summary small { color: var(--muted); }
.economy-note { font-size: 12px; }
.production-breakdown > div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.production-breakdown b { color: var(--cyan); font: 10px 'Space Mono', monospace; }
.economy-upgrades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.economy-upgrades .wide-button { margin-top: 10px; font-size: 10px; min-height: 32px; }
.economy-actions { display: flex; gap: 10px; margin-top: 14px; }
.economy-actions .wide-button { margin-top: 0; text-align: center; font-size: 10px; }

/* Separate the fixed foundation from the animated turret head. */
#battlefield .tower-motion { position: absolute; inset: -30%; pointer-events: none; }
#battlefield .tower-motion .entity-art, #battlefield .tower-motion .tower-base-art { position: absolute; inset: 0; }
#battlefield .tower-base-art { clip-path: inset(57% 0 0 0); z-index: 1; filter: brightness(1.22) drop-shadow(0 5px 5px #000); }
#battlefield .tower-motion .tower-rotor-art { clip-path: inset(0 0 38% 0); transform-origin: 50% 57%; animation: turret-scan 6s ease-in-out infinite; animation-delay: var(--idle-delay); }
#battlefield .placed-cannon .tower-rotor-art { animation-duration: 9s; }
#battlefield .placed-sniper .tower-rotor-art { animation-name: sniper-scan; animation-duration: 12s; }
#battlefield .placed-flame .tower-rotor-art { animation-duration: 4s; }
#battlefield .placed-missile .tower-rotor-art { animation-name: missile-scan; animation-duration: 8s; }
#battlefield .placed-railgun .tower-rotor-art { animation-duration: 11s; }
#battlefield .tower-cell.tracking .tower-rotor-art { animation: none; transform: rotate(var(--aim-angle, 0deg)); transition: transform .13s linear; }
#battlefield .tower-motion .tower-tesla { animation: coil-idle 1.6s ease-in-out infinite; transform: none; }
#battlefield .tower-motion .tower-freeze { animation: cryo-idle 3s ease-in-out infinite; transform: none; }
#battlefield .tower-motion .tower-drone { animation: drone-idle 2.5s ease-in-out infinite; transform: none; }
#battlefield .tower-motion .tower-orbital { animation: beacon-idle 5s ease-in-out infinite; transform: none; }
#battlefield .tower-motion .tower-salvage { animation: salvage-idle 3s ease-in-out infinite; transform: none; }
#battlefield .tower-cell.pad-firing .entity-art, #battlefield .entity-art.firing { animation-name: inherit; }
.tower-energy { position: absolute; inset: 30%; z-index: 3; pointer-events: none; border-radius: 50%; opacity: .4; }
.energy-tesla { border: 1px dashed #91fcff; box-shadow: 0 0 12px #66e6ff; animation: energy-orbit 4s linear infinite; }
.energy-freeze { inset: 13%; border: 1px dotted #b9f9ff; box-shadow: inset 0 0 8px #74cded; animation: cryo-ring 3s ease-out infinite; }
.energy-drone::before, .energy-drone::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 2px; background: #a0f8ff; box-shadow: 0 0 7px #68efff; }
.energy-drone::before { left: -50%; top: 0; }.energy-drone::after { right: -50%; bottom: 0; }.energy-drone { animation: energy-orbit 6s linear infinite; }
.energy-orbital { inset: 4%; border: 1px solid rgba(255, 210, 97, .5); border-left-color: transparent; border-right-color: transparent; animation: energy-orbit 9s linear infinite; }
.energy-salvage { box-shadow: 0 0 12px #ffc756; animation: salvage-credit 2s ease-in-out infinite; }
.pad-level { position: absolute; right: -10%; top: -12%; min-width: 15px; font: 8px 'Space Mono', monospace; border: 1px solid rgba(93, 229, 255, .48); padding: 2px 3px; background: rgba(4, 18, 25, .9); color: #98eafb; z-index: 9; }
.tower-art.tower-salvage { background: url('/outputs/salvage-tower.png') center / contain no-repeat; }
.build-visual.tower-salvage { background-size: contain; }
.projectile-salvage { width: 11px; height: 6px; background: #ffc557; box-shadow: 0 0 11px #ffd45b; }
.impact-salvage { border-color: #ffce64; background: radial-gradient(circle, rgba(255, 225, 127, .5), transparent 70%); }
.structure-burst { position: absolute; z-index: 15; width: 54px; height: 54px; transform: translate(-50%, -50%); pointer-events: none; border: 2px solid #77ebff; border-radius: 50%; animation: structure-ring 1s ease-out forwards; }
.structure-burst b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 8px 'Space Mono', monospace; color: #acfbff; white-space: nowrap; text-shadow: 0 0 7px #3acbec; }
.structure-burst i { position: absolute; left: 50%; top: 50%; height: 4px; width: 3px; background: #b6fcff; transform: rotate(var(--burst-angle)) translateY(25px); animation: structure-spark 1s ease-out forwards; }
.burst-upgrade { border-color: #ffca6b; box-shadow: 0 0 18px rgba(255, 202, 107, .6); }.burst-upgrade b { color: #ffe097; }.burst-upgrade i { background: #ffe8a4; }
#tower-inspector { transform: none; width: 232px; min-width: 0; animation: inspector-open .17s ease-out; }
.inspector-title { padding-right: 4px; }
.inspector-title span { margin-right: 13px; }
.inspector-hull { margin-top: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; color: #75929d; font: 8px 'Space Mono', monospace; }
.inspector-hull strong { color: #9dfbb8; }.inspector-hull small { flex: 1 0 100%; color: #ffcf74; }
.inspector-locked { margin-top: 9px; }.inspector-locked small { display: block; margin-top: 6px; color: #9daeb3; }
@keyframes turret-scan { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(28deg); } }
@keyframes sniper-scan { 0%,40%,100% { transform: rotate(-13deg); } 60%,80% { transform: rotate(22deg); } }
@keyframes missile-scan { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-2px); } }
@keyframes coil-idle { 0%,100% { filter: brightness(1.12) drop-shadow(0 0 5px #2ecfff); } 50% { filter: brightness(1.6) drop-shadow(0 0 11px #7aeaff); } }
@keyframes cryo-idle { 0%,100% { filter: brightness(1.2); } 50% { filter: brightness(1.45) drop-shadow(0 0 8px #c0f7ff); } }
@keyframes drone-idle { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes beacon-idle { 0%,100% { filter: brightness(1.1); transform: rotate(-3deg); } 50% { filter: brightness(1.55) drop-shadow(0 0 8px #ffdc7c); transform: rotate(3deg); } }
@keyframes salvage-idle { 0%,100% { transform: translateY(0); filter: brightness(1.18); } 50% { transform: translateY(-2px); filter: brightness(1.5) drop-shadow(0 0 7px #eeb964); } }
@keyframes hq-reactor { 0%,100% { filter: brightness(1) drop-shadow(0 0 7px #d48d39); } 50% { filter: brightness(1.24) drop-shadow(0 0 13px #ecad4c); } }
@keyframes energy-orbit { to { transform: rotate(360deg); } }
@keyframes cryo-ring { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes salvage-credit { 0%,100% { opacity: .15; } 50% { opacity: .7; transform: translateY(-7px); } }
@keyframes structure-ring { 0% { opacity: 1; scale: .6; } 50% { opacity: 1; } 100% { opacity: 0; scale: 2; } }
@keyframes structure-spark { from { transform: rotate(var(--burst-angle)) translateY(15px); opacity: 1; } to { transform: rotate(var(--burst-angle)) translateY(42px); opacity: 0; } }
@keyframes inspector-open { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes brand-in { from { opacity: 0; transform: translateY(15px) scale(.95); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
.reduced-motion .tower-motion *, .reduced-motion .field-hq img, .reduced-motion .brand-lockup { animation: none !important; transition: none !important; }
@media (max-height: 790px) and (min-width: 901px) {
  .left-rail { padding: 11px 10px; }.left-rail h2 { font-size: 20px; }.hq-card { margin-top: 10px; padding: 8px; }.hq-meta { font-size: 7px; }
  .rail-section { margin-top: 10px; padding-top: 9px; }.section-label { margin-bottom: 7px; }.system-row { padding: 4px; }.systems-list { gap: 2px; }.treasury-button { padding: 7px; margin-top: 9px; }.wide-button.ghost { margin-top: 9px; }
  .right-detail-panel { padding: 9px; }.detail-tabs { padding-bottom: 7px; }.upgrade-panel .selected-copy { font-size: 11px; }.upgrade-panel .branch { font-size: 10px; min-height: 25px; }
}
@media (max-height: 650px) and (min-width: 901px) {
  .command-layout { padding-top: 8px; padding-bottom: 8px; }.left-rail .hq-meta { display: none; }.hq-card .meter { margin-top: 8px; }.hq-card { margin-top: 7px; }.rail-section { margin-top: 8px; padding-top: 7px; }.left-rail h2 { font-size: 18px; }.hq-top strong { font-size: 16px; }
  .system-row { font-size: 10px; padding: 3px; }.treasury-button strong { font-size: 12px; margin: 3px 0; }.treasury-button > span { font-size: 7px; }.treasury-button small { font-size: 9px; }.left-rail .wide-button.ghost { min-height: 29px; padding: 5px; font-size: 10px; }.objective { font-size: 10px; }.objective small { font-size: 7px; }.objectives { gap: 5px; }
  .build-panel { padding: 8px; }.build-panel h2 { font-size: 20px; }.construction-tabs { margin-top: 6px; }.build-options { min-height: 102px; }.build-option { min-height: 48px; }.build-visual { height: 23px; }.build-option strong { font-size: 10px; }
  .upgrade-panel .panel-heading h2 { font-size: 19px; }.upgrade-panel .selected-copy { font-size: 10px; margin: 6px 0; }.upgrade-panel .upgrade-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }.upgrade-panel .branch { display: block; padding: 4px; min-height: 31px; font-size: 9px; }.upgrade-panel .branch small { display: none; }.upgrade-panel .wide-button.accent { min-height: 29px; padding: 6px; }.detail-view { padding-top: 7px; }
  .upgrade-panel:has(.system-repair:not([hidden])) .selected-copy { display: none; }
  .upgrade-panel .system-repair { margin-top: 5px; padding: 5px; font-size: 10px; }
}
@media (max-width: 900px) {
  .right-rail { grid-template-rows: auto auto; }.right-detail-panel { min-height: 325px; }.economy-upgrades { grid-template-columns: 1fr; }.economy-summary strong { font-size: 18px; }
}
@keyframes damage-rise { from { opacity: 0; transform: translate(-50%, -25%) scale(.8); } 18% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -180%) scale(1.08); } }
@keyframes field-shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -1px); } }
.battlefield-wrap.battle-shake { animation: field-shake .22s linear; }

body.reduced-motion .route-energy,
body.reduced-motion #battlefield .build-pad.buildable,
body.reduced-motion .enemy-art { animation: none; }

@media (max-width: 900px) {
  #battlefield { inset: 0; }
  #battlefield .build-pad { width: 6.5%; }
  .route-marker { display: none; }
}