/* HUD im Geist der Original-Kommandoleiste: dunkles Metall, Bernstein-Akzente,
   abgeschraegte Ecken, technische Typo. Alles CSS - keine Bild-Assets. */

:root {
  --amber: #e8b64c;
  --amber-dim: #a07c2e;
  --steel-0: #14161a;
  --steel-1: #1d2126;
  --steel-2: #2a2f36;
  --line: #3d444e;
  --text: #d8dde3;
  --text-dim: #8b939d;
  --usa: #4d8fe0;
  --danger: #e05a3c;
  --ok: #5fd07a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #05070a;
  color: var(--text);
  font-family: "Segoe UI", "Roboto Condensed", system-ui, sans-serif;
  user-select: none;
  cursor: crosshair;
}

body.cursor-attack { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%23e05a3c' stroke-width='2.5'/%3E%3Cpath d='M16 1v8M16 23v8M1 16h8M23 16h8' stroke='%23e05a3c' stroke-width='2.5'/%3E%3C/svg%3E") 16 16, crosshair; }
/* Einnahme-Zeiger: Flagge statt Fadenkreuz - der Rechtsklick nimmt hier ein
   Gebaeude, er zerlegt es nicht. Gruen, weil rot in dieser Oberflaeche
   durchgehend 'Schaden' heisst. */
body.cursor-capture { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M9 29V4' stroke='%2358c46a' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 5h14l-3.5 5L24 15H10z' fill='%2358c46a'/%3E%3C/svg%3E") 9 29, pointer; }

/* Bau-Zeiger: Schraubenschluessel - der Rechtsklick baut hier wieder auf
   (Ruine des Oelturms) bzw. nimmt eine Baustelle wieder auf. Bernstein,
   weil weder Schaden (rot) noch Einnahme (gruen) gemeint ist. */
body.cursor-build { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M27.2 8.6a6.4 6.4 0 0 1-8.5 8.1L10 25.4a2.6 2.6 0 0 1-3.7-3.7l8.7-8.7a6.4 6.4 0 0 1 8.1-8.5l-3.8 3.8 0.6 3.3 3.3 0.6z' fill='none' stroke='%23e0a53c' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 24, pointer; }

/* Sperrzeichen (Ziel unerreichbar) - Ring mit Schraegbalken wie der
   GenericInvalid-Cursor des Originals (SCCNoAction). Der dunkle Unterstrich
   haelt das Zeichen auch ueber hellem Sand und im Sandsturm lesbar. */
body.cursor-no { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23140a08' stroke-width='5' stroke-linecap='round' opacity='0.85'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Cpath d='M8.9 8.9 23.1 23.1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff4a2e' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Cpath d='M8.9 8.9 23.1 23.1'/%3E%3C/g%3E%3C/svg%3E") 16 16, not-allowed; }

#viewport { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#selection-box {
  position: fixed;
  display: none;
  border: 1px solid var(--ok);
  background: rgba(95, 208, 122, 0.12);
  pointer-events: none;
  z-index: 40;
}

/* ------------------------------------------------------------- Ladebild */
/* Der deckende Vorhang, hinter dem die Szene aufgebaut wird. Er blendet weg,
   sobald wirklich etwas zu sehen ist - erst danach kommt die Marke. */

#loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, #1b232d 0%, #0a0e14 58%, #05070a 100%);
  /* ZWEI SEKUNDEN, nicht 0,9.
     Der Vorhang faellt in dem Moment, in dem das erste Bild steht - und genau
     in den ersten Sekunden danach kommt der Rest nach: Streugut wird
     eingeblendet, die Schlacht setzt sich, das Gelaende schaltet auf seine
     nahe Aufloesung. Bei 0,9 s sieht man dieses Nachziehen; bei 2 s liegt es
     noch unter dem Schwarz. Ein langsames Aufblenden ist ausserdem das
     staerkere Bild - der Titel taucht auf, statt zu erscheinen. */
  /* HALTEN, DANN AUFBLENDEN: 1,1 s schwarz, dann 2 s Blende.
     Der Vorhang faellt, sobald das erste Bild steht - aber gerade DANACH zieht
     der Rest nach: Streugut blendet ein, die Schlacht setzt sich, das Gelaende
     schaltet auf seine nahe Aufloesung, Texturen wandern zur Grafikkarte. Eine
     Blende, die sofort anfaengt, zeigt genau dieses Nachziehen. Die Haltezeit
     legt es unter das Schwarz; erst danach wird ueberhaupt etwas sichtbar.
     Sie kostet nichts, weil in dieser Sekunde ohnehin nichts zu sehen sein
     soll - und ein Titel, der auftaucht statt zu erscheinen, ist das
     staerkere Bild. */
  transition: opacity 2s ease 1.1s;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading.hidden { display: none; }
.load-inner { text-align: center; max-width: 560px; padding: 30px; }
.load-emblem {
  margin-bottom: 30px; opacity: .82;
  filter: drop-shadow(0 0 22px rgba(232, 182, 76, .28));
}
.load-bar {
  margin: 0 auto 12px; width: min(300px, 68vw); height: 3px;
  background: #10141a; border: 1px solid rgba(61, 68, 78, .8); overflow: hidden;
}
.load-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber-dim), var(--amber)); transition: width .25s; }
.load-status { color: var(--text-dim); font-size: 11px; letter-spacing: 3px; min-height: 18px; text-transform: uppercase; }

/* ---------------------------------------------------------- Titelbildschirm */
/* Liegt ueber der laufenden 3D-Szene. Deshalb: keine deckende Flaeche, sondern
   Verlaufsschleier, die genau dort abdunkeln, wo Schrift steht.
   z-index bewusst unter dem Optionsfenster (60) und ueber dem HUD (20). */

#title {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 3vh 22px;
  transition: opacity .38s ease;
}
#title[hidden] { display: none; }
#title.leaving { opacity: 0; pointer-events: none; }

/* Ein einziges Element traegt alle drei Schleier - eine Ebene, ein Compositing-
   Schritt. Oben nur leicht (der Himmel soll Himmel bleiben), in der Mitte ein
   weiches Oval unter dem Schriftzug, unten kraeftig fuer die Schaltflaechen.

   DER OBERE SCHLEIER LAG BEI 58 % UND HAT DIE INSZENIERUNG UEBERNOMMEN. Er
   sass genau auf der Sonne (Bildhoehe 18 %, dort zusammen mit dem Oval rund
   36 % Deckung) und hat sie von reinem Weiss auf 166 heruntergezogen - auf
   denselben Wert wie den Himmel daneben, der ebenfalls im Anschlag stand. Das
   Ergebnis war ein flaches, milchiges Grau ueber der ganzen oberen Bildhaelfte.
   Die Tonwerte kommen jetzt aus der Szene (Belichtung, Wolkendecke, siehe
   ui/titlescreen.js); hier bleibt nur so viel, wie das Markenzeichen am oberen
   Rand zum Lesen braucht. Unten und in der Mitte bleibt es unveraendert - dort
   geht es um die Lesbarkeit von Schriftzug und Schaltflaechen, nicht um die
   Bildstimmung. */
/* Abgeschwaecht nach Messung gegen die Vorlage: unser dunkles Ende war zu
   gross (5.5 % der Flaeche unter 6 % Helligkeit, Vorlage 3.3 %), und ein
   guter Teil davon kam aus genau dieser Folie - dem unteren Verlauf und dem
   Mittenoval. In der Vorlage traegt auch der Schatten noch Zeichnung; die
   Folie darf die Schrift stuetzen, aber nicht den Boden zulaufen lassen. */
/* Der obere Verlauf laeuft frueher aus (26/44 % -> 12/20 %): bei 26 % lagen
   auf Bildhoehe 15..20 % - genau auf der Sonnenscheibe - noch rund 10 %
   Folie. Multiplikativ deckelte das die Scheibe auf 90 % (gemessen RGB
   229/229, Vorlage 255/255): kein einziger Pixel des Messbereichs erreichte
   die Spitzwerte der Vorlage, p99 klemmte bei 82 gegen 87.3. */
#title::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 8, 11, .20) 0%, rgba(6, 8, 11, .03) 12%, rgba(6, 8, 11, 0) 20%),
    linear-gradient(0deg, rgba(4, 6, 9, .80) 0%, rgba(4, 6, 9, .27) 26%, rgba(4, 6, 9, 0) 52%),
    radial-gradient(ellipse 66% 50% at 50% 46%, rgba(4, 6, 9, .52) 0%, rgba(4, 6, 9, .14) 52%, rgba(4, 6, 9, 0) 78%);
}

.title-inner { position: relative; z-index: 2; width: min(1080px, 94vw); }

/* --- Einblendreihenfolge: Bild, Zeichen, Schriftzug, Schaltflaechen.
   Alles nur ueber opacity/transform - das kostet kein Layout und laeuft auf
   der Compositor-Ebene, waehrend daneben die Szene rendert. */
.brand-mark, .wordmark, .brand-rule, .brand-sub, .brand-tag,
.title-actions, .title-foot, .title-build {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, .84, .32, 1);
}
#title.reveal .brand-mark,
#title.reveal .wordmark,
#title.reveal .brand-rule,
#title.reveal .brand-sub,
#title.reveal .brand-tag,
#title.reveal .title-actions,
#title.reveal .title-foot,
#title.reveal .title-build { opacity: 1; transform: none; }

#title.reveal .brand-mark { transition-delay: .45s; }
#title.reveal .wordmark { transition-delay: .70s; }
#title.reveal .brand-rule { transition-delay: 1.10s; }
#title.reveal .brand-sub { transition-delay: 1.20s; }
#title.reveal .brand-tag { transition-delay: 1.42s; }
#title.reveal .title-actions { transition-delay: 1.62s; }
#title.reveal .title-foot,
#title.reveal .title-build { transition-delay: 1.86s; }

.brand-mark {
  margin-bottom: min(2.4vh, 20px);
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .8));
}

/* --- Der Schriftzug.
   Drei Ebenen uebereinander, damit er wie gegossenes Metall wirkt und nicht
   wie Text mit Schatten:
     ::before  dunkle Auspraegung nach unten (Tiefe, Schattenwurf)
     span      der eigentliche Koerper mit Metallverlauf
     ::after   warmes Kantenlicht auf der Oberkante (Abendsonne)
   Keine Schriftdatei - nur die schwersten schmalen Systemschnitte. */
.wordmark {
  position: relative;
  display: inline-block;
  font-family: Haettenschweiler, Impact, "Franklin Gothic Heavy", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: min(clamp(54px, 12.5vw, 146px), 21vh);
  line-height: .94;
  letter-spacing: .11em;
  text-indent: .11em;                 /* gleicht die Sperrung hinter dem letzten Zeichen aus */
  text-transform: uppercase;
  color: transparent;
  will-change: opacity, transform;
}
.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none;
}
/* Auspraegung: mehrere harte Versaetze ergeben eine Kante, der weiche Rest
   den Wurf auf den Untergrund. */
.wordmark::before {
  z-index: 1;
  color: #0b0906;
  text-shadow:
    0 1px 0 #17120b, 0 2px 0 #14100a, 0 3px 0 #100d08, 0 4px 0 #0c0a06,
    0 10px 24px rgba(0, 0, 0, .78), 0 2px 40px rgba(0, 0, 0, .6);
}
.wordmark span {
  position: relative; z-index: 2;
  /* Etwas tieferes, waermeres Gold als zuvor: gemessen standen unsere
     Buchstaben flaechig ueber 75 % Helligkeit und trugen damit spuerbar zum
     zu breiten hellen Ende bei (p95 78 gegen 69 der Vorlage) - deren
     Schriftzug ist satter und dunkler abgestuft. */
  background-image: linear-gradient(180deg,
    #ecd6a6 0%, #d6b87e 14%, #a98f62 32%, #7d6b4a 47%,
    #6f5f42 50%, #b89c6c 55%, #d9c08c 70%, #9c855c 88%, #7b6949 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .6px rgba(28, 21, 12, .55);
}
/* Kantenlicht: nur die oberen 40 % der Buchstaben bekommen einen warmen Saum,
   leicht nach oben versetzt - so als stuende die Sonne tief dahinter. */
.wordmark::after {
  z-index: 3;
  transform: translateY(-1.5px);
  background-image: linear-gradient(180deg,
    rgba(255, 226, 168, .80) 0%, rgba(255, 205, 130, .30) 26%, rgba(255, 200, 120, 0) 44%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Trennlinie mit Raute: setzt den Namen vom Beinamen ab. */
.brand-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: min(2vh, 16px) auto min(1.4vh, 11px);
  width: min(520px, 78%);
}
.brand-rule s { flex: 1; height: 1px; border: 0; }
.brand-rule s:first-child { background: linear-gradient(90deg, rgba(232, 182, 76, 0), rgba(232, 182, 76, .75)); }
.brand-rule s:last-child { background: linear-gradient(90deg, rgba(232, 182, 76, .75), rgba(232, 182, 76, 0)); }
.brand-rule i {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--amber); box-shadow: 0 0 10px rgba(232, 182, 76, .55);
}

.brand-sub {
  font-size: clamp(13px, 2.05vw, 25px);
  font-weight: 600; letter-spacing: .42em; text-indent: .42em;
  color: #cbd2d9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 0 26px rgba(0, 0, 0, .6);
}

.brand-tag {
  margin-top: min(2.2vh, 17px);
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: .2em; color: rgba(214, 205, 188, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .8);
}

/* --- Schaltflaechen: Stahlplatten mit abgeschraegten Ecken. */
.title-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: min(5vh, 44px);
}

.tbtn {
  position: relative; overflow: hidden;
  padding: 15px 32px; font-family: inherit;
  font-size: 14px; font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; cursor: pointer;
  color: #d6c9a8;
  background: linear-gradient(180deg, rgba(56, 66, 78, .90), rgba(17, 22, 28, .93));
  border: 1px solid rgba(122, 134, 148, .40);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition: color .16s, background .16s, border-color .16s, box-shadow .16s, transform .1s;
}
/* Der Akzentbalken links faehrt beim Ueberfahren auf - sichtbare Rueckmeldung
   ohne Farbfeuerwerk. */
.tbtn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber-dim); transition: width .16s ease, background .16s;
}
.tbtn.primary { min-width: min(300px, 74vw); color: var(--amber); }
.tbtn.ghost { color: #9aa4ae; background: linear-gradient(180deg, rgba(38, 45, 54, .78), rgba(14, 18, 23, .86)); }

.tbtn:hover, .tbtn:focus-visible {
  color: #fff5df; outline: none;
  background: linear-gradient(180deg, rgba(78, 92, 108, .95), rgba(26, 33, 41, .95));
  border-color: rgba(232, 182, 76, .55);
  box-shadow: 0 0 26px rgba(232, 182, 76, .16), inset 0 0 22px rgba(232, 182, 76, .10);
}
.tbtn:hover::before, .tbtn:focus-visible::before { width: 7px; background: var(--amber); }
.tbtn:active { transform: translateY(1px); }

/* --- Fusszeile: technische Herkunft links, Buildstempel rechts.
   Beides bewusst klein - es soll da sein, nicht auffallen. */
.title-foot, .title-build {
  position: absolute; bottom: 16px; z-index: 2;
  font-size: 10.5px; letter-spacing: .22em;
  color: rgba(216, 221, 227, .34);
}
.title-foot { left: 22px; text-align: left; max-width: 46vw; }
.title-build {
  right: 22px; text-transform: uppercase;
  color: rgba(232, 182, 76, .48);
  border-top: 1px solid rgba(232, 182, 76, .22); padding-top: 5px;
}
/* Pflichtangaben: "kaum sichtbar" war die Vorgabe, und das ist auch die
   richtige Gewichtung - sie muessen leicht erkennbar und unmittelbar
   erreichbar sein (§ 5 DDG), nicht betont. Deshalb dieselbe Zeile wie die
   Versionsangabe, nur noch etwas blasser; beim Ueberfahren treten sie
   deutlich hervor, damit sie sich auch anklicken lassen. */
.title-build a {
  color: rgba(232, 182, 76, .38);
  text-decoration: none; pointer-events: auto;
  transition: color .2s ease;
}
.title-build a:hover,
.title-build a:focus-visible { color: rgba(232, 182, 76, .95); text-decoration: underline; }
.title-build .sep { opacity: .4; margin: 0 3px; }

/* ------------------------------------------------------------------ HUD */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#hud[hidden] { display: none; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 42px;
  display: flex; align-items: center; gap: 22px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(12, 15, 19, .95), rgba(12, 15, 19, .62));
  border-bottom: 1px solid var(--line);
  pointer-events: auto;
}
.res { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.res-icon { color: var(--amber); font-size: 17px; }
#res-money { font-variant-numeric: tabular-nums; transition: color .12s; }
/* Kein Einkommen ist eine Aussage, keine Nebensache: die Null steht da, aber
   in Warnfarbe - ohne Oelturm kommt nichts nach. */
#res-income.broke { color: var(--amber); opacity: 1; }
#res-money.counting { color: var(--amber); text-shadow: 0 0 12px rgba(232, 182, 76, .45); }
.res-label { color: var(--text-dim); font-size: 11px; letter-spacing: 2px; }
.dim { color: var(--text-dim); font-size: 12px; }
.spacer { flex: 1; }

/* --- Uhrzeit und Wetterlage.
   Bewusst zurueckhaltend: das ist Beiwerk und darf die Ressourcenanzeige
   nicht ueberstrahlen. Nachts faerbt sich die Uhr kuehl ein - eine leise
   Rueckmeldung, dass die Tageszeit wirklich laeuft. */
#climate {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; letter-spacing: 1px; color: var(--text-dim);
}
#climate[hidden] { display: none; }
#climate-clock {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px;
  color: var(--amber); transition: color .8s linear;
}
#climate.night #climate-clock { color: #8fb0d8; }
#climate-weather { text-transform: uppercase; font-size: 11px; letter-spacing: 2px; }
#climate-next:not(:empty) {
  font-size: 11px; color: var(--amber); opacity: .85;
  border-left: 1px solid var(--line); padding-left: 10px;
  animation: climate-pulse 3.2s ease-in-out infinite;
}
@keyframes climate-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

#btn-settings {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  width: 28px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1;
}
#btn-settings:hover { color: var(--amber); border-color: var(--amber-dim); }

#notices {
  position: absolute; top: 56px; left: 16px; width: 320px;
  display: flex; flex-direction: column; gap: 5px;
}
.notice {
  background: rgba(16, 20, 26, .88); border-left: 3px solid var(--amber);
  padding: 6px 11px; font-size: 12.5px; letter-spacing: .4px;
  transition: opacity .7s, transform .7s;
}
.notice-warn { border-left-color: var(--danger); color: #ffbfae; }
.notice-good { border-left-color: var(--ok); }
.notice.fade { opacity: 0; transform: translateX(-14px); }

#bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 10px 10px; gap: 12px;
}

#radar-panel {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20, 24, 30, .96), rgba(12, 15, 19, .96));
  border: 1px solid var(--line); padding: 6px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.panel-title {
  font-size: 10px; letter-spacing: 4px; color: var(--amber-dim);
  margin-bottom: 5px; padding-left: 2px;
}
#minimap {
  display: block; width: 190px; height: 190px;
  border: 1px solid #0c0f13; cursor: pointer;
  image-rendering: auto;
}

#control-bar {
  pointer-events: auto;
  display: flex; align-items: stretch; gap: 12px;
  background: linear-gradient(180deg, rgba(20, 24, 30, .96), rgba(12, 15, 19, .96));
  border: 1px solid var(--line);
  padding: 9px 12px; min-width: 380px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
#selection-info { min-width: 210px; }
#sel-title { font-size: 15px; font-weight: 700; letter-spacing: 1.4px; color: var(--amber); }
#sel-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; max-width: 250px; }
#queue { font-size: 11px; color: var(--ok); margin-top: 5px; letter-spacing: 1px; }

#command-buttons { display: flex; gap: 8px; }
.cmd-btn {
  position: relative; width: 78px; height: 78px; cursor: pointer;
  background: linear-gradient(180deg, #333c47, #1a2027);
  border: 1px solid var(--line); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  overflow: hidden; transition: all .13s; font-family: inherit;
}
.cmd-btn:hover { border-color: var(--amber); box-shadow: inset 0 0 18px rgba(232, 182, 76, .18); }
.cmd-btn.disabled { opacity: .45; filter: grayscale(.6); }
.cmd-label { font-size: 10.5px; letter-spacing: 1px; }
.cmd-cost { font-size: 10px; color: var(--amber); }
.cmd-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--ok); transition: width .12s linear;
}

#hints {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.6;
  background: rgba(10, 13, 17, .55); padding: 6px 14px; border: 1px solid rgba(61, 68, 78, .5);
  max-width: 46vw;
}

/* ------------------------------------------------- Kleine Bildschirme */
/* Touch-Gesten stecken schon in der Kamera; hier bekommt das HUD die
   nötige Größe und Fingerfreundlichkeit. */

@media (max-width: 900px), (pointer: coarse) {
  #hints { display: none; }
  #minimap { width: 128px; height: 128px; }
  #control-bar { min-width: 0; padding: 7px 8px; gap: 8px; }
  #selection-info { min-width: 0; }
  #sel-sub { display: none; }
  .cmd-btn { width: 66px; height: 66px; }
  #topbar { height: 38px; gap: 12px; padding: 0 10px; }
  .res { font-size: 13px; }
  #btn-settings { width: 34px; height: 30px; }
  .set-row { grid-template-columns: 1fr 110px 44px; }
}

@media (max-height: 520px) {
  #radar-panel { transform: scale(0.85); transform-origin: bottom left; }
  #control-bar { transform: scale(0.85); transform-origin: bottom right; }
}

/* --- Titelbild auf schmalen Fenstern und im Hochformat.
   Die Groessen haengen ohnehin an clamp()/vh; hier wird nur das umgestellt,
   was sonst kollidiert: die Fusszeilen stapeln, die Schaltflaechen werden
   fingerbreit, und das Wappen weicht, wenn die Hoehe knapp wird. */
@media (max-width: 720px) {
  .brand-sub { letter-spacing: .3em; text-indent: .3em; }
  .brand-rule { width: min(360px, 84%); }
  .title-actions { flex-direction: column; align-items: stretch; gap: 11px; }
  .tbtn { padding: 16px 18px; font-size: 13px; letter-spacing: .22em; text-indent: .22em; }
  .tbtn.primary { min-width: 0; }
  .title-foot, .title-build {
    position: static; display: block; margin: 0 auto; max-width: none;
    text-align: center; border: 0; padding: 0;
  }
  .title-foot { order: 3; margin-top: 20px; }
  .title-build { order: 4; margin-top: 7px; }
  /* Inhalt nach unten: im Hochformat traegt die obere Bildhaelfte die
     Landschaft, unten steht das Menue - so wie auf einem Filmplakat. */
  #title { justify-content: flex-end; padding-bottom: 9vh; }
}

/* Flache Fenster: der Schriftzug frisst sonst die ganze Hoehe. */
@media (max-height: 560px) {
  .brand-mark { display: none; }
  .brand-tag { display: none; }
  .title-actions { margin-top: min(3.4vh, 24px); }
  #title { padding: 2vh 18px; }
}

/* --------------------------------------------------------- Einstellungen */

#settings-panel {
  display: none; position: fixed; z-index: 60;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); max-height: 82vh; overflow: auto;
  background: rgba(16, 20, 26, .97); border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
  pointer-events: auto;
}
.set-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #232b34, #171c22);
}
.set-header h2 { font-size: 15px; letter-spacing: 4px; color: var(--amber); font-weight: 700; }
#settings-close { background: none; border: none; color: var(--text-dim); font-size: 22px; cursor: pointer; }
#settings-close:hover { color: #fff; }
#settings-body { padding: 8px 16px 16px; }
.set-group { margin-top: 14px; }
.set-group h3 {
  font-size: 11px; letter-spacing: 3px; color: var(--amber-dim);
  border-bottom: 1px solid rgba(61, 68, 78, .6); padding-bottom: 5px; margin-bottom: 8px;
}
.set-row {
  display: grid; grid-template-columns: 1fr 160px 54px;
  align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px;
}
.set-row input[type="range"] { width: 100%; accent-color: var(--amber); }
.set-row select {
  background: #1c2128; color: var(--text); border: 1px solid var(--line);
  padding: 3px 6px; font-family: inherit; font-size: 12px;
}
.set-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--amber); justify-self: start; }
.set-value { color: var(--text-dim); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
.set-footer { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-dim); }

/* ---------------------------------------------------------------- Ende */

#gameover {
  display: none; position: fixed; inset: 0; z-index: 80;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle, rgba(6, 8, 11, .82), rgba(3, 4, 6, .96));
  pointer-events: auto;
}
#gameover h1 { font-size: 44px; letter-spacing: 10px; margin-bottom: 24px; }
#gameover h1.win { color: var(--ok); text-shadow: 0 0 40px rgba(95, 208, 122, .4); }
#gameover h1.lose { color: var(--danger); text-shadow: 0 0 40px rgba(224, 90, 60, .4); }
#gameover button {
  padding: 12px 30px; background: linear-gradient(180deg, #33404f, #1b232c);
  border: 1px solid var(--amber-dim); color: var(--amber);
  letter-spacing: 3px; cursor: pointer; font-size: 13px; font-family: inherit;
}
#gameover button:hover { color: #fff; }