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

:root { --bg:#0c1416; --panel:#111d20; --panel-2:#162528; --line:#294044; --muted:#71878a; --text:#dbe5df; --cream:#f0e9d8; --orange:#ef8957; --orange-2:#ffc58d; --green:#9bc29a; --teal:#7fb3ad; --danger:#df6c67; --mono:'DM Mono',monospace; --sans:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:13px; letter-spacing:.02em; }
button { font:inherit; color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 51% 11%, #17282a 0, var(--bg) 37rem); }
.topbar { min-height:78px; padding:16px 28px; border-bottom:1px solid #26383b; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand-lockup,.topbar-meta,.turn-readout,.empire-title-row,.panel-heading,.board-toolbar,.board-tools,.map-legend,.event-strip,.intel-row,.footer-shortcuts { display:flex; align-items:center; }
.brand-lockup { gap:12px; }.brand-mark { border:1px solid var(--orange); color:var(--orange); width:38px;height:38px;display:grid;place-items:center;font:500 14px var(--mono); box-shadow:inset 0 0 0 3px #151e20; }
.brand-name { color:var(--cream); font-size:16px; font-weight:700; letter-spacing:.14em; }.brand-name span { color:var(--orange); }.brand-subtitle { color:var(--muted); margin-top:2px; font:10px var(--mono); letter-spacing:.08em; }
.topbar-meta { gap:12px; }.turn-readout { gap:9px; color:var(--muted); font:10px var(--mono); letter-spacing:.08em; }.turn-readout strong { color:var(--cream); margin-left:3px; font-weight:500; }.status-dot { width:6px;height:6px;background:var(--orange);border-radius:50%; box-shadow:0 0 10px var(--orange); }
.button { border:1px solid var(--line); background:transparent; padding:10px 14px; font-size:11px; letter-spacing:.08em; font-weight:600; transition:.2s; }.button:hover { border-color:var(--orange); color:var(--orange-2); }.button-accent { background:var(--orange); color:#231713; border-color:var(--orange); }.button-accent:hover { color:#211815; background:#ff9e6e; }.shortcut { color:inherit; opacity:.65; margin-left:6px; font:10px var(--mono); }
.game-layout { display:grid; grid-template-columns:245px minmax(500px,1fr) 245px; gap:19px; max-width:1536px; margin:0 auto; padding:21px 28px 18px; }.left-rail,.right-rail { display:flex; flex-direction:column; gap:14px; min-width:0; }.panel { background:linear-gradient(145deg,#142225 0%,#101b1e 100%); border:1px solid var(--line); padding:16px; box-shadow:0 12px 30px #00000015; }.panel-kicker,.panel-heading,.log-label { font:10px var(--mono); letter-spacing:.12em; color:var(--muted); }.empire-title-row { justify-content:space-between; margin-top:10px; }.empire-title-row h1 { color:var(--cream); font-size:17px; line-height:1.15; letter-spacing:.06em; margin:0; }.flag { color:var(--orange); font-size:20px; }.motto { color:#849896; font-size:11px; margin:7px 0 17px; font-style:italic; }
.resource-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding-top:12px; gap:13px 5px; }.resource { display:grid; grid-template-columns:24px 1fr; column-gap:6px; }.resource-icon { grid-row:span 2; font:17px var(--mono); color:var(--orange); }.resource-name { color:var(--muted); font:9px var(--mono); letter-spacing:.08em; }.resource-value { color:var(--cream); font:15px var(--mono); margin-top:1px; }.resource-rate { color:var(--green); font:9px var(--mono); }
.panel-heading { justify-content:space-between; margin-bottom:13px; }.count { color:var(--orange); font:10px var(--mono); }.science-badge { color:var(--orange-2); font:11px var(--mono); }.objective { display:flex; gap:9px; padding:8px 0; border-top:1px solid #223538; font-size:11px; line-height:1.3; }.objective:first-child { border-top:0; }.objective-check { color:var(--muted); font:13px var(--mono); }.objective.done .objective-check { color:var(--green); }.objective.done .objective-text { color:#79908b; text-decoration:line-through; }.objective-text small { display:block;color:var(--muted);font:9px var(--mono);margin-top:2px; }.tech-panel { flex:1; }.tech { padding:10px 0; border-top:1px solid #223538; }.tech:first-child { border-top:0; padding-top:0; }.tech-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; }.tech-name { color:var(--cream); }.tech-state { font:9px var(--mono); color:var(--muted); }.tech.active .tech-state { color:var(--orange); }.tech.done .tech-state { color:var(--green); }.tech-progress { height:3px;background:#253a3c;margin-top:8px;overflow:hidden; }.tech-progress span { display:block;height:100%;background:var(--orange); }.tech.done .tech-progress span { background:var(--green); }
.board-column { min-width:0; }.board-toolbar { justify-content:space-between; min-height:35px; }.board-title { color:var(--cream); font:11px var(--mono); letter-spacing:.12em; }.live-mark { color:var(--orange); font-size:9px; margin-right:7px; }.map-size { color:var(--muted); margin-left:8px; font-size:9px; }.board-tools { gap:9px; }.hint-key { color:#62787b;font:9px var(--mono); }.icon-button { border:1px solid var(--line); color:var(--muted); background:var(--panel); width:26px;height:26px; }.icon-button:hover { color:var(--orange);border-color:var(--orange); }
.map-frame { background:#0b1517; border:1px solid var(--line); padding:14px 13px 13px; box-shadow:0 0 0 5px #0b1517, 0 0 0 6px #263d40, 0 20px 50px #00000042; margin:5px 5px 0; }.map-coordinate-row { margin-left:25px; display:grid; grid-template-columns:repeat(16,1fr); color:#476265; font:9px var(--mono); text-align:center; padding-bottom:7px; }.map-body { display:grid; grid-template-columns:25px 1fr; }.map-side-coords { display:grid; grid-template-rows:repeat(11,1fr); color:#476265; font:9px var(--mono); text-align:left; align-items:center; }.map-grid { display:grid; grid-template-columns:repeat(16,minmax(20px,1fr)); grid-template-rows:repeat(11,minmax(31px,1fr)); border:1px solid #263c3e; background:#0f2021; }.map-cell { position:relative; display:grid; place-items:center; min-height:31px; border-right:1px solid #1b3335; border-bottom:1px solid #1b3335; color:#6d9b89; font:16px var(--mono); transition:background .15s, color .15s; user-select:none; }.map-cell:hover { background:#254141; }.map-cell.water { color:#4f8890; background:#10292d; }.map-cell.mountain { color:#9a9e83; background:#1c2928; }.map-cell.forest { color:#5e9273; background:#112622; }.map-cell.hills { color:#ae956e; }.map-cell.desert { color:#9d8c63; background:#29251c; }.map-cell.fog { color:#203436;background:#0d181a; }.map-cell.selected { background:#314f4a; box-shadow:inset 0 0 0 1px var(--orange); z-index:2; }.map-cell.moveable { background:#193831; cursor:crosshair; }.map-cell.attackable { background:#4c2928; color:var(--danger); cursor:crosshair; }.map-cell .unit-glyph { color:var(--cream); font-weight:500; text-shadow:0 0 9px currentColor; }.map-cell .unit-glyph.player { color:var(--orange-2); }.map-cell .unit-glyph.enemy { color:var(--danger); }.map-cell .city-glyph { position:absolute; bottom:2px; right:3px; font-size:11px; color:var(--orange); }.map-cell .city-glyph.enemy-city { color:var(--danger); }.map-cell .health-dot { position:absolute; top:3px; right:4px; font-size:7px; color:var(--green); }.map-cell .tile-label { position:absolute; bottom:3px; left:4px; color:#3b5b5a;font-size:7px; }
.map-legend { gap:15px; padding:14px 6px 10px; flex-wrap:wrap; color:#82918e; font:9px var(--mono); }.legend-swatch { font-style:normal;font-size:13px;margin-right:4px; }.player-swatch { color:var(--orange-2); }.enemy-swatch { color:var(--danger); }.city-swatch { color:var(--orange); }.terrain-swatch { color:#6d9b89; }.event-strip { gap:12px; border:1px solid #344b45; background:#182824; padding:11px 13px; color:var(--green); min-height:55px; }.event-icon { color:var(--orange);font-size:19px; }.event-strip strong { display:block; font:10px var(--mono); letter-spacing:.1em; color:var(--orange-2); margin-bottom:3px; }.event-strip span:not(.event-icon):not(.event-turn) { font-size:11px;color:#9caba1; }.event-turn { margin-left:auto; align-self:flex-start; color:#6a807b; font:9px var(--mono); }
.selection-panel { min-height:168px; }.selection-empty { color:#6d8283; font-size:12px; line-height:1.5; padding:15px 0 5px; }.selection-empty .empty-glyph { color:#3f6765; font:27px var(--mono); display:block; margin-bottom:10px; }.unit-card-head { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px; }.unit-avatar { width:37px;height:37px;display:grid;place-items:center; color:var(--orange-2);font:21px var(--mono);border:1px solid #7e644f;background:#26251e; }.unit-card-head h2 { color:var(--cream);font-size:14px;letter-spacing:.05em;margin:0; }.unit-card-head small { display:block;color:var(--muted);font:9px var(--mono);margin-top:4px; }.unit-stats { display:grid; grid-template-columns:repeat(3,1fr); padding-top:12px; }.unit-stat { border-right:1px solid var(--line);padding-left:8px; }.unit-stat:first-child { padding-left:0; }.unit-stat:last-child { border:0; }.unit-stat label { display:block;color:var(--muted);font:9px var(--mono); }.unit-stat strong { display:block;color:var(--cream);font:14px var(--mono);margin-top:4px; }.unit-stat strong.green { color:var(--green); }.city-card .unit-avatar { color:var(--orange); }.city-card-head { display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:10px; }.city-card h2 { margin:0;color:var(--cream);font-size:15px; }.city-card p { color:var(--muted);font:9px var(--mono);margin:4px 0 0; }.city-level { color:var(--orange);font:10px var(--mono); }.production-line { display:flex;justify-content:space-between;margin-top:12px;font-size:11px; }.production-line span { color:var(--muted); }.production-line strong { color:var(--orange-2);font:11px var(--mono); }.city-progress { height:5px;background:#253a3c;margin-top:7px; }.city-progress span { display:block;height:100%;background:var(--orange); }.yield-row { display:flex;gap:11px;color:var(--muted);font:9px var(--mono);margin-top:10px; }.yield-row b { color:var(--green);font-weight:400; }
.action-panel { padding-bottom:14px; }.action-turn { font-size:9px; }.action-buttons { display:grid; gap:7px; }.action-button { display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#152326;padding:10px 11px;text-align:left;font-size:11px; }.action-button:hover:not(:disabled) { border-color:var(--orange);background:#203032; }.action-button:disabled { opacity:.38;cursor:not-allowed; }.action-button .action-glyph { width:21px;color:var(--orange);font:15px var(--mono); }.action-button .action-key { color:#688082;font:9px var(--mono); }.action-note { color:#637879;font-size:10px;line-height:1.4;margin-top:12px; }.intel-panel { margin-top:auto; }.signal { color:var(--green);font-size:10px;letter-spacing:-2px; }.intel-row { justify-content:space-between;font:9px var(--mono);color:var(--muted);margin-top:12px; }.intel-row strong { color:var(--green);font-weight:400; }.meter { height:3px;background:#26393a;margin-top:6px; }.meter span { display:block;height:100%;background:var(--orange); }.meter.green span { background:var(--green); }
.bottom-bar { border-top:1px solid #26383b; min-height:59px; padding:10px 28px; display:grid; grid-template-columns:170px 1fr auto; align-items:center; gap:20px; background:#0d1719; }.log-label { color:var(--orange); }.log-lines { color:#92a09b;font:10px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.log-lines span { margin-right:20px; }.log-lines span::before { content:'›';color:var(--orange);margin-right:6px; }.footer-shortcuts { gap:13px;color:#566d6f;font:9px var(--mono); }.footer-shortcuts kbd { color:#b8c5bc;border:1px solid #385052;padding:2px 4px;margin-right:3px;font:9px var(--mono); }
.modal-backdrop { position:fixed;inset:0;background:#071011cc;display:grid;place-items:center;z-index:20; }.hidden { display:none; }.modal { width:min(440px,calc(100vw - 34px));border:1px solid var(--line);background:#142326;padding:23px;box-shadow:0 20px 80px #000; }.modal h2 { margin:0 0 12px;color:var(--cream);font-size:18px; }.modal p,.modal li { color:#9aaba5;font-size:12px;line-height:1.55; }.modal ul { padding-left:19px; }.modal-close { float:right;border:0;background:none;color:var(--muted);font-size:18px; }.modal .button { margin-top:9px; }
@media (max-width:1150px) { .game-layout { grid-template-columns:210px minmax(430px,1fr) 210px;gap:12px;padding-left:16px;padding-right:16px; }.topbar {padding-left:16px;padding-right:16px;}.footer-shortcuts {display:none;}.bottom-bar{grid-template-columns:170px 1fr;} }
@media (max-width:850px) { .topbar {align-items:flex-start;}.topbar-meta {flex-wrap:wrap;justify-content:flex-end;}.turn-readout {width:100%;justify-content:flex-end;}.game-layout {grid-template-columns:1fr;max-width:700px;}.left-rail,.right-rail {display:grid;grid-template-columns:1fr 1fr;align-items:start;}.tech-panel,.intel-panel {grid-column:span 2;}.selection-panel {min-height:0;}.board-column{grid-row:1;}.bottom-bar{grid-template-columns:1fr;padding-left:16px;padding-right:16px;}.log-label{display:none;} }
@media (max-width:560px) { .brand-name {font-size:13px;}.brand-subtitle{font-size:8px;}.topbar{flex-direction:column;}.topbar-meta{width:100%;justify-content:space-between;}.turn-readout{width:auto;order:3;}.button{padding:9px 8px;font-size:9px;}.game-layout{padding:13px 8px;}.map-frame{margin-left:2px;margin-right:2px;padding-left:5px;padding-right:5px;overflow-x:auto;}.map-frame > *{min-width:550px;}.map-legend{gap:8px;font-size:8px;}.left-rail,.right-rail{display:flex;}.tech-panel,.intel-panel{grid-column:auto;}.footer-shortcuts{display:none;} }