:root { --ink:#071119; --line:#405b68; --blue:#83ccef; --muted:#9eafb7; }
html,body { background:#080f13; color:#e6ecec; font-family:'Segoe UI',sans-serif; }
#brand { position:fixed;top:16px;left:22px;pointer-events:none;z-index:4; }
#brand strong { font-size:27px;letter-spacing:1.2px;font-weight:800;text-shadow:0 2px 5px #000; }
#brand em {font-style:normal;color:#dd5a4c;}
#brand small {display:block;font-size:9px;letter-spacing:3px;color:#a9bdc7;margin-top:1px;}
#hud {left:330px;right:20px;top:15px;max-width:none;gap:4px;justify-content:flex-end;}
.panel {background:linear-gradient(140deg,rgba(15,30,39,.96),rgba(6,16,22,.94));border:1px solid #314956;border-radius:2px;padding:5px 9px;font-size:10px;color:#a8b9c2;box-shadow:inset 0 1px #ffffff08;}
.panel b {color:#c4e9fb;font-size:12px;margin-left:5px;font-variant-numeric:tabular-nums;}
.panel.gold {border-color:#756e44;}.panel.gold b{color:#ecd38a;}
#buildbar {left:22px;bottom:24px;gap:6px;padding:10px;background:linear-gradient(135deg,#10212bee,#071016f5);border:1px solid #46616c;border-radius:3px;max-width:calc(100vw - 224px);box-shadow:0 10px 30px #0008;}
#buildbar button,#btnAtlas {background:linear-gradient(#243d48,#132732);border:1px solid #4d6872;border-radius:2px;color:#dbe7e9;font-size:11px;padding:12px 14px;letter-spacing:.2px;}
#buildbar button:hover:not(:disabled),#btnAtlas:hover {background:#345967;border-color:#86c8df;}
#buildbar button:disabled {background:#111e25;color:#697b85;border-color:#2c3f48;}
#btnAtlas {position:fixed;left:22px;top:85px;cursor:pointer;z-index:4;padding:8px 12px;font-size:10px;}
#artStatus {position:fixed;top:122px;left:23px;font-size:8px;letter-spacing:1.4px;color:#8aa8b6;pointer-events:none;}
#hint {bottom:99px;left:23px;transform:none;max-width:calc(100vw - 225px);background:#08151cdb;border:1px solid #304752;border-radius:2px;color:#b2c2c9;font-size:10px;padding:6px 10px;}
#ctxmenu {background:linear-gradient(130deg,#142833f7,#08141df7);border-color:#536e7b;border-radius:3px;}
#ctxmenu button{background:#25434b;border:1px solid #42616a;border-radius:2px;}
#ctxmenu button:hover:not(:disabled){background:#3b606a;}
#ctxmenu .ctx-title{color:#b5dded;}
#overlay {background:linear-gradient(#030b12b8,#030b12e0),url(menu-background.png) center/cover no-repeat;}
.card {background:linear-gradient(130deg,#1a2d36,#08141c);border-color:#5a7480;border-radius:4px;}
.card h1{letter-spacing:2px;}
#ovBtn {background:#315c72;border:1px solid #85bacb;border-radius:2px;}
#artGallery {width:min(1000px,94vw);max-height:90vh;padding:24px;background:linear-gradient(140deg,#132630,#070f16);color:#e1edf2;border:1px solid #5e7b8c;border-radius:5px;box-shadow:0 30px 100px #000b;}
#artGallery::backdrop {background:#02070dcc;backdrop-filter:blur(6px);}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.eyebrow{color:#87b6c9;font-size:10px;letter-spacing:2.5px;}
.gallery-heading h2{margin:6px 0 20px;font-size:26px;font-weight:500;}
#artGallery button{background:#142c38;border:1px solid #3c5d6e;color:#b8cdd9;padding:9px 12px;cursor:pointer;border-radius:2px;}
#artGallery button:hover,#artGallery button.active{background:#294b5b;border-color:#83bcd3;color:white;}
.gallery-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.direction-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
.direction-grid>div{display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at center,#26313960,#081018);border:1px solid #2a414f;padding:4px;}
.direction-grid canvas{width:100%;height:auto;}
.direction-grid span{font-size:10px;letter-spacing:1px;color:#a9cddd;padding:6px;}
.gallery-note{font-size:11px;color:#8aa4b2;margin-bottom:0;}
@media(max-width:1000px){#brand strong{font-size:22px;}#brand small{font-size:8px;letter-spacing:1.5px;}#hud{left:275px;}.panel{padding:3px 6px;font-size:9px;}.panel b{font-size:10px;}#buildbar button{padding:10px 9px;}#buildbar{max-width:calc(100vw - 206px);}#hint{bottom:126px;}.direction-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:650px){#brand{top:10px;left:12px;}#brand strong{font-size:19px;}#hud{top:61px;left:12px;right:12px;justify-content:flex-start;}#btnAtlas{top:12px;left:auto;right:12px;}#artStatus{display:none;}#buildbar{left:10px;bottom:10px;padding:6px;max-width:calc(100vw - 150px);}#buildbar button{font-size:10px;padding:8px;}#hint{left:10px;bottom:126px;font-size:9px;max-width:calc(100vw - 150px);}#artGallery{padding:15px;}.gallery-heading h2{font-size:21px;}.gallery-tabs button{font-size:10px;}}

.animation-controls{display:flex;gap:6px;margin:-4px 0 14px}.animation-controls button{font-size:11px;padding:7px 14px!important}.animation-controls::before{content:"ANIMATION";align-self:center;font-size:9px;letter-spacing:1.4px;color:#87a8b7;margin-right:8px}

.direction-grid.soldier-directions{grid-template-columns:repeat(4,minmax(0,1fr));}
.animation-controls{flex-wrap:wrap;}
@media(max-width:650px){.direction-grid.soldier-directions{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Tactical startup panel, matching the in-game command interface. */
#overlay .card {width:min(590px,calc(100vw - 32px));min-width:0;padding:30px;box-sizing:border-box;box-shadow:0 25px 100px #000b,inset 0 1px #bce8ff15;}
#overlay .card::before {content:'TAKTISCHE EINSATZZENTRALE';display:block;color:#86aebb;font-size:9px;letter-spacing:3px;margin-bottom:13px;}
#ovText {line-height:1.6;}
#loadingPanel {margin:23px 0 18px;padding:17px 18px;text-align:left;border:1px solid #35515f;background:linear-gradient(90deg,#83ccef04 1px,transparent 1px),linear-gradient(#83ccef04 1px,transparent 1px),#091820;background-size:20px 20px;position:relative;}
#loadingPanel::before {content:'';position:absolute;left:-1px;top:14px;width:3px;height:24px;background:#d0ab62;}
.loading-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px;}
#loadingTitle {font-size:11px;letter-spacing:.6px;color:#c0dae5;font-weight:600;}
#loadingPercent {font-size:12px;color:#e3c890;font-variant-numeric:tabular-nums;white-space:nowrap;}
#loadingProgress {display:block;appearance:none;-webkit-appearance:none;width:100%;height:9px;border:1px solid #385362;border-radius:0;background:#040c12;overflow:hidden;}
#loadingProgress::-webkit-progress-bar {background:#040c12;}
#loadingProgress::-webkit-progress-value {background:repeating-linear-gradient(90deg,#80c5dd 0,#80c5dd 12px,#4e8299 12px,#4e8299 14px);}
#loadingProgress::-moz-progress-bar {background:#80c5dd;}
#loadingDetail {margin:10px 0 0!important;min-height:30px;font-size:11px!important;line-height:1.5;color:#91aab7!important;}
#loadingPanel[data-state=ready] {border-color:#567469;}
#loadingPanel[data-state=ready]::before {background:#94b798;}
#loadingPanel[data-state=error] {border-color:#a76959;}
#loadingPanel[data-state=error]::before {background:#e47b65;}
#loadingPanel[data-state=error] #loadingTitle {color:#efad9e;}
#ovBtn {min-height:44px;margin-top:4px;}
#ovBtn:disabled,#btnAtlas:disabled {cursor:wait;opacity:.55;}
.diff-btn:disabled {cursor:wait;opacity:.5;}
@media(max-width:600px){#overlay .card{padding:22px 18px;}#loadingPanel{padding:14px 12px;}#ovBtn{width:100%;font-size:13px;}.loading-heading{align-items:flex-start;}}
@media(prefers-reduced-motion:reduce){#loadingProgress::-webkit-progress-value{transition:none;}}

#overlay .diff-btn {border-radius:2px;background:#172d38;border-color:#3d5a69;color:#b9ced8;}
#overlay .diff-btn.active {background:#315c72;border-color:#85bacb;color:#fff;}
#overlay .card h1 span {color:#dd5a4c;}

/* Player menu: save/load, info and rules. */
#btnMenu {position:fixed;left:22px;top:141px;z-index:12;cursor:pointer;padding:8px 12px;font-size:10px;letter-spacing:.2px;background:linear-gradient(#243d48,#132732);border:1px solid #4d6872;border-radius:2px;color:#dbe7e9;}
#btnMenu:hover {background:#345967;border-color:#86c8df;}
#btnFullscreen {position:fixed;left:22px;top:174px;z-index:12;cursor:pointer;padding:8px 12px;font-size:10px;letter-spacing:.2px;background:linear-gradient(#243d48,#132732);border:1px solid #4d6872;border-radius:2px;color:#dbe7e9;}
#btnFullscreen:hover {background:#345967;border-color:#86c8df;}
#gameMenu {width:min(760px,94vw);max-height:88vh;padding:0;background:linear-gradient(140deg,#132630,#070f16);color:#e1edf2;border:1px solid #5e7b8c;border-radius:5px;box-shadow:0 30px 100px #000b;overflow:auto;}
#gameMenu::backdrop {background:#02070dcc;backdrop-filter:blur(6px);}
.menu-head {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 0;}
.menu-head h2 {margin:0;font-size:22px;font-weight:500;letter-spacing:1px;}
#menuClose {background:#142c38;border:1px solid #3c5d6e;color:#b8cdd9;padding:8px 12px;cursor:pointer;border-radius:2px;}
#menuClose:hover {background:#294b5b;border-color:#83bcd3;color:#fff;}
.menu-tabs {display:flex;gap:6px;padding:16px 24px 0;flex-wrap:wrap;}
.menu-tabs button {background:#142c38;border:1px solid #3c5d6e;color:#b8cdd9;padding:9px 15px;cursor:pointer;border-radius:2px;font-size:13px;}
.menu-tabs button:hover {background:#294b5b;}
.menu-tabs button.active {background:#315c72;border-color:#85bacb;color:#fff;}
.menu-body {padding:18px 24px 24px;}
.menu-body section.hidden {display:none;}
.menu-body h3 {margin:0 0 10px;font-size:12px;letter-spacing:1.8px;color:#9ec4d4;text-transform:uppercase;}
.menu-stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:18px;}
.menu-stats .stat {display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:#0a171f;border:1px solid #2c4551;border-radius:2px;font-size:12px;color:#a8b9c2;}
.menu-stats .stat b {color:#c4e9fb;font-variant-numeric:tabular-nums;}
.menu-actions {display:flex;gap:8px;flex-wrap:wrap;}
.menu-actions button {background:#25434b;border:1px solid #42616a;color:#dbe7e9;padding:11px 16px;cursor:pointer;border-radius:2px;font-size:13px;font-weight:600;}
.menu-actions button:hover:not(:disabled) {background:#3b606a;border-color:#86c8df;}
.menu-actions button:disabled {background:#111e25;color:#697b85;border-color:#2c3f48;cursor:not-allowed;}
.menu-actions button.danger {background:#5a2a26;border-color:#8a4a42;color:#ffd9d1;}
.menu-actions button.danger:hover:not(:disabled) {background:#753832;}
.menu-note {margin:14px 0 0;font-size:12px;color:#8aa4b2;min-height:16px;}
.menu-body p {line-height:1.6;font-size:13px;color:#c2ccd6;}
.menu-body .lead {font-weight:700;color:#e8eaed;letter-spacing:.4px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin:16px 0 4px;}
.menu-body ul {margin:6px 0 12px;padding-left:20px;line-height:1.7;font-size:13px;color:#c2ccd6;}
.menu-body li b {color:#7cc4ff;}
.menu-body .menu-table {width:100%;border-collapse:collapse;font-size:12px;margin:6px 0 14px;}
.menu-body .menu-table th,.menu-body .menu-table td {text-align:left;padding:7px 10px;border-bottom:1px solid #263d49;}
.menu-body .menu-table th {color:#9ec4d4;font-weight:600;letter-spacing:.4px;}
.menu-body .menu-table td:last-child {color:#c4e9fb;white-space:nowrap;}
@media(max-width:650px){#btnMenu{top:52px;left:auto;right:12px;}#btnFullscreen{top:92px;left:auto;right:12px;}#artStatus{top:88px;left:23px;}}

/* Start screen: choose new game or load game. */
.start-actions {display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.start-actions #ovBtn {margin-top:0;}
#ovLoadBtn {min-height:44px;padding:10px 22px;font-size:15px;font-weight:600;cursor:pointer;border-radius:2px;background:#1d3b2c;color:#d6f0e0;border:1px solid #4f7a63;transition:background .15s,border-color .15s;}
#ovLoadBtn:hover:not(:disabled) {background:#295139;border-color:#7fc49b;}
#ovLoadBtn:disabled {background:#111e25;color:#697b85;border-color:#2c3f48;cursor:not-allowed;}
@media(max-width:600px){.start-actions{flex-direction:column;}.start-actions #ovBtn,.start-actions #ovLoadBtn{width:100%;}}

/* Graphics settings tab. */
.gfx-group {margin:0 0 18px;}
.gfx-label {display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#9ec4d4;margin-bottom:8px;}
.gfx-row {display:flex;gap:8px;flex-wrap:wrap;}
.gfx-preset,.gfx-fps,.gfx-res {background:#172d38;border:1px solid #3d5a69;color:#b9ced8;padding:9px 16px;cursor:pointer;border-radius:2px;font-size:13px;font-weight:600;}
.gfx-preset:hover,.gfx-fps:hover,.gfx-res:hover {background:#294b5b;border-color:#83bcd3;color:#fff;}
.gfx-preset.active,.gfx-fps.active,.gfx-res.active {background:#315c72;border-color:#85bacb;color:#fff;}
.gfx-checks {display:grid;gap:7px;}
.gfx-checks label {display:flex;align-items:center;gap:9px;font-size:13px;color:#c2ccd6;cursor:pointer;user-select:none;}
.gfx-checks input[type=checkbox] {width:16px;height:16px;accent-color:#4f9dc4;cursor:pointer;}
.gfx-checks label.gfx-strong {font-weight:700;color:#e8eaed;}
.gfx-checks label.gfx-strong b {color:#7cc4ff;}
.gfx-auto-options {margin-top:8px;padding-left:25px;gap:6px;}
.gfx-sub {font-size:11px;letter-spacing:1px;color:#8aa4b2;text-transform:uppercase;}
.gfx-readout {margin:12px 0 0;font-size:13px;color:#a8b9c2;}
.gfx-readout b {color:#c4e9fb;font-variant-numeric:tabular-nums;font-size:15px;}
.gfx-group.disabled {opacity:.45;pointer-events:none;}
/* Sound-Regler im Menü – gleiche Optik wie die Grafikgruppen. */
.snd-sliders {display:grid;gap:11px;}
.snd-row {display:flex;align-items:center;gap:12px;font-size:13px;color:#c2ccd6;user-select:none;}
.snd-row span {flex:0 0 158px;}
.snd-row input[type=range] {flex:1;height:4px;accent-color:#4f9dc4;cursor:pointer;}
.snd-row b {flex:0 0 54px;text-align:right;color:#c4e9fb;font-variant-numeric:tabular-nums;font-size:13px;}
#gameMenu .menu-note b {color:#7cc4ff;}
#fpsBadge {position:fixed;right:14px;bottom:12px;z-index:30;padding:5px 9px;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.5px;color:#c4e9fb;background:rgba(8,20,27,.82);border:1px solid #314956;border-radius:3px;pointer-events:none;}
#fpsBadge.hidden {display:none;}

/* Developer information is opt-in via the fresh command. */
body:not(.admin-mode) #hud .panel:not(.gold),
body:not(.admin-mode) #btnAtlas,
body:not(.admin-mode) #artStatus,
body:not(.admin-mode) #hint {display:none;}
body:not(.admin-mode) #btnMenu {top:85px;}
body:not(.admin-mode) #btnFullscreen {top:118px;}

/* Classic RTS command deck: framed cameos, clear names and separate costs. */
#buildbar {gap:6px;padding:25px 9px 9px;bottom:16px;border:2px solid #6c7567;border-top-color:#a1aa91;background:linear-gradient(135deg,#394137,#171e1c 65%);box-shadow:inset 0 0 0 2px #101612,0 5px 22px #0009;flex-wrap:nowrap;max-width:calc(100vw - 220px);}
#buildbar::before {content:'BASISBAU';position:absolute;top:6px;left:11px;font-size:9px;letter-spacing:2px;color:#d1d7b9;font-weight:700;}
#buildbar button.build-card {position:relative;display:flex;flex-direction:column;width:132px;min-width:0;padding:0;overflow:hidden;text-align:left;border:1px solid #818971;border-bottom:3px solid #a8ae77;background:#1c2724;border-radius:0;color:#f0f1dc;}
.build-portrait,#ctxmenu .production-card canvas {display:block;width:100%;height:72px;object-fit:contain;background:repeating-linear-gradient(0deg,#9bb59b06 0px,#9bb59b06 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at 50% 75%,#65715a,#26322b 70%);}
.build-name {display:block;font-weight:700;font-size:11px;padding:6px 7px 3px;line-height:1.25;}
.build-detail {display:block;font-size:9px;line-height:1.3;padding:0 7px 7px;min-height:30px;color:#c3c9a8;}
#buildbar button.build-card:hover:not(:disabled),#ctxmenu .production-card:hover:not(:disabled) {border-color:#e5d99c;background:#384b39;box-shadow:inset 0 0 12px #dce8a420;}
#buildbar button.build-card:disabled {background:#202823;color:#9ba492;border-color:#4c584a;}
#buildbar button.build-card:disabled canvas,#ctxmenu .production-card:disabled canvas {filter:grayscale(.85) brightness(.55);}
#buildbar button:focus-visible,#ctxmenu button:focus-visible {outline:2px solid #f1da83;outline-offset:2px;}
#hint {bottom:186px;}
#ctxmenu {width:284px;max-width:calc(100vw - 16px);max-height:calc(100vh - 24px);overflow-y:auto;padding:9px;gap:8px;border:2px solid #838b72;background:linear-gradient(135deg,#303b30f7,#121d19fc);box-shadow:inset 0 0 0 2px #111910,0 12px 30px #0009;}
#ctxmenu .ctx-title {color:#d5d9b3;border-color:#59634e;font-size:11px;}
.production-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.production-grid:empty {display:none;}
#ctxmenu button.production-card {position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid #737e63;border-bottom:3px solid #8da46d;border-radius:0;background:#1c2921;color:#e6ebd5;}
#ctxmenu .production-card canvas {height:83px;}
#ctxmenu .production-card:disabled {background:#1b241e;color:#9ca58c;border-color:#424f3d;}
.build-cost {display:block;padding:0 7px 6px;font-size:12px;color:#e6ce80;font-variant-numeric:tabular-nums;}
.build-cost small {font-size:8px;letter-spacing:1px;color:#aeb793;}
.queue-badge {position:absolute;top:5px;right:5px;background:#151f13;border:1px solid #bac68a;color:#e4efb2;font-size:11px;padding:2px 5px;}
@media(max-width:800px){#buildbar{left:10px;max-width:calc(100vw - 200px);}#buildbar button.build-card{width:112px;}.build-name{font-size:10px;}.build-detail{font-size:8px;}}
@media(max-width:650px){#buildbar{max-width:calc(100vw - 20px);bottom:8px;gap:4px;padding:23px 5px 5px;}#buildbar button.build-card{width:calc((100vw - 52px)/4);}.build-portrait{height:49px;}.build-name{font-size:9px;padding:4px;}.build-detail{font-size:8px;padding:0 4px 4px;min-height:32px;}#hint{bottom:150px;}body:not(.admin-mode) #btnMenu{top:52px;}body:not(.admin-mode) #btnFullscreen{top:85px;}}