/* 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;
  touch-action: none;
}

#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; }

#battle-transition {
  position: fixed; inset: 0; z-index: 110;
  background: #000;
  opacity: 0;
  pointer-events: auto;
  will-change: opacity;
  transition: opacity 2s cubic-bezier(.45, 0, .55, 1);
}
#battle-transition[hidden] { display: none; }
#battle-transition.covered { opacity: 1; }
#battle-transition.revealing { opacity: 0; }

/* 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 */
/* Fluid: clamp/vmin, geclusterte Konsole (kein 32:9-Gummi), Tippziele ≥ 44 px.
   Vektor-Symbole, scharfe Kanten bei hoher DPI. IA aus Generals, Optik neu. */

#hud {
  --hud-pad: clamp(0.4rem, 0.8vmin, 0.85rem);
  --hud-gap: clamp(0.35rem, 0.7vmin, 0.7rem);
  --tile: clamp(2.75rem, 5.6vmin, 4.6rem);
  --console-max: min(68rem, 96vw);
  --steel-glow: rgba(90, 170, 255, .12);
  --panel-bg: linear-gradient(165deg, rgba(22, 28, 36, .97) 0%, rgba(10, 13, 18, .98) 55%, rgba(8, 10, 14, .99) 100%);
  --panel-edge: linear-gradient(135deg, rgba(232, 182, 76, .45), rgba(90, 170, 255, .22) 40%, rgba(61, 68, 78, .9));
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  font-size: clamp(11px, 1.15vmin, 14px);
}
#hud[hidden] { display: none; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(2.2rem, 4.2vmin, 2.75rem);
  display: flex; align-items: center; gap: clamp(0.5rem, 1.2vmin, 1.25rem);
  padding: 0 clamp(0.6rem, 1.4vmin, 1.1rem);
  background: linear-gradient(180deg, rgba(8, 11, 16, .92), rgba(8, 11, 16, .35) 70%, transparent);
  pointer-events: auto;
}
.res-icon { color: var(--amber); font-weight: 700; }
#res-money {
  font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em;
  font-size: clamp(1rem, 2.1vmin, 1.35rem); transition: color .12s, text-shadow .12s;
}
#res-income.broke { color: var(--amber); opacity: 1; }
#res-money.counting { color: var(--amber); text-shadow: 0 0 14px rgba(232, 182, 76, .5); }
.res-label { color: var(--text-dim); font-size: .72em; letter-spacing: .18em; }
.dim { color: var(--text-dim); font-size: .85em; }
.spacer { flex: 1; }

#climate {
  display: flex; align-items: baseline; gap: .65em;
  font-size: .9em; letter-spacing: .06em; color: var(--text-dim);
}
#climate[hidden] { display: none; }
#climate-clock {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1em;
  color: var(--amber); transition: color .8s linear;
}
#climate.night #climate-clock { color: #8fb0d8; }
#climate-weather { text-transform: uppercase; font-size: .78em; letter-spacing: .16em; }
#climate-next:not(:empty) {
  font-size: .78em; color: var(--amber); opacity: .85;
  border-left: 1px solid var(--line); padding-left: .65em;
  animation: climate-pulse 3.2s ease-in-out infinite;
}
@keyframes climate-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

#btn-settings, #btn-feedback {
  background: rgba(20, 26, 34, .7); border: 1px solid var(--line); color: var(--text-dim);
  width: max(2.2rem, 44px); height: max(2.2rem, 44px); min-width: 44px; min-height: 44px;
  cursor: pointer; font-size: 1.15em; line-height: 1;
  display: grid; place-items: center; border-radius: 2px;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
#btn-feedback { width: auto; padding: 0 12px; gap: 7px; font: 700 10px/1 inherit; letter-spacing: .14em; text-transform: uppercase; }
#btn-settings:hover, #btn-feedback:hover { color: var(--amber); border-color: var(--amber-dim); box-shadow: 0 0 12px rgba(232, 182, 76, .2); }

#feedback-dialog { position: fixed; inset: 0; z-index: 120; pointer-events: auto; display: grid; place-items: center; }
#feedback-dialog[hidden] { display: none; }
.feedback-backdrop { position: absolute; inset: 0; border: 0; background: radial-gradient(circle, rgba(15,22,30,.76), rgba(2,4,7,.94)); backdrop-filter: blur(7px); }
.feedback-window { position: relative; width: min(940px, 94vw); max-height: 94vh; overflow: auto; color: var(--text); background: linear-gradient(145deg, rgba(27,35,44,.99), rgba(8,12,17,.99)); border: 1px solid rgba(232,182,76,.48); box-shadow: 0 30px 100px #000, inset 3px 0 rgba(232,182,76,.55); }
.feedback-window header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(232,182,76,.12), transparent); }
.feedback-window header small { color: var(--amber-dim); letter-spacing: .28em; }.feedback-window h2 { margin: 3px 0 0; color: var(--amber); letter-spacing: .15em; text-transform: uppercase; }.feedback-window header button { border: 0; background: none; color: var(--text-dim); font-size: 27px; cursor: pointer; }
.feedback-privacy, .feedback-label, .feedback-attach { margin: 12px 20px; display: block; }.feedback-privacy { color: var(--text-dim); font-size: 12px; }.feedback-label { margin-bottom: 6px; font-weight: 700; }
#feedback-text { display: block; box-sizing: border-box; width: calc(100% - 40px); margin: 0 20px; resize: vertical; padding: 12px; color: #eef3f5; background: #0b1015; border: 1px solid #43505d; font: 14px/1.5 inherit; }
.feedback-attach input { accent-color: var(--amber); }.feedback-tools { display: flex; gap: 6px; padding: 8px 20px; flex-wrap: wrap; }.feedback-tools > span { flex: 1; }.feedback-tools button, .feedback-window footer button { padding: 8px 11px; border: 1px solid var(--line); background: #18212a; color: var(--text); cursor: pointer; font: 700 10px/1 inherit; letter-spacing: .08em; }.feedback-tools button.active { color: var(--amber); border-color: var(--amber); box-shadow: inset 0 -2px var(--amber); }
.feedback-canvas-wrap { display: grid; place-items: center; min-width: 0; margin: 0 20px; max-height: 44vh; overflow: hidden; background: #020304; border: 1px solid #394653; }#feedback-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 44vh; touch-action: none; cursor: crosshair; }
.feedback-canvas-wrap.zoomed { display: block; overflow: auto; }.feedback-canvas-wrap.zoomed #feedback-canvas { max-width: none; max-height: none; margin: auto; }
.feedback-color, .feedback-width { display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 10px; }.feedback-color input { width: 30px; height: 28px; padding: 1px; border: 1px solid var(--line); background: #111; }.feedback-width select { height: 28px; background: #111820; color: var(--text); border: 1px solid var(--line); }.feedback-zoom { display: flex; align-items: center; gap: 4px; }.feedback-zoom output { min-width: 38px; text-align: center; color: var(--amber-dim); font-size: 10px; }.feedback-tools .feedback-zoom button { padding: 7px 9px; }
.feedback-window footer { display: flex; align-items: center; gap: 8px; padding: 14px 20px; }.feedback-window footer output { flex: 1; color: var(--amber); font-size: 11px; overflow-wrap: anywhere; }.feedback-window footer button[type="submit"] { color: #111; border-color: #ffd36c; background: linear-gradient(#f1c65f,#b98528); }
@media (max-width: 600px) { #btn-feedback span { display:none; }.feedback-window footer { flex-wrap: wrap; }.feedback-window footer output { flex-basis: 100%; }.feedback-canvas-wrap, #feedback-canvas { max-height: 32vh; } }

#notices {
  position: absolute; top: clamp(2.6rem, 5.5vmin, 3.4rem); left: clamp(.6rem, 1.5vmin, 1.1rem);
  width: min(22rem, 42vw); display: flex; flex-direction: column; gap: .3rem;
}
.notice {
  background: rgba(12, 16, 22, .9); border-left: 3px solid var(--amber);
  padding: .4em .75em; font-size: .9em; letter-spacing: .02em;
  backdrop-filter: blur(6px); 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); }

/* ---- Kommandokonsole: geclustert, zentriert auf Ultrawide ---- */
#cmd-console {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--console-max);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--hud-gap);
  padding: var(--hud-pad);
  padding-bottom: max(var(--hud-pad), env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  container-type: inline-size;
  container-name: console;
}
#cmd-console > section { pointer-events: auto; position: relative; z-index: 1; }

.cmd-chrome {
  position: absolute; bottom: 0; height: 42%; width: 18%;
  pointer-events: none; z-index: 0; opacity: .55;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(90, 170, 255, .14), transparent 70%),
    linear-gradient(0deg, rgba(8, 12, 18, .85), transparent);
}
.cmd-chrome-l { left: -2%; }
.cmd-chrome-r { right: -2%; transform: scaleX(-1); }

#radar-panel, #cmd-core, #cmd-side {
  background: var(--panel-bg);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(232, 182, 76, .18),
    0 -8px 28px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative;
}
#radar-panel::before, #cmd-core::before, #cmd-side::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(90, 170, 255, .07), transparent 28%);
  opacity: .9;
}
#radar-panel {
  padding: var(--hud-pad);
  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%);
}
.panel-title {
  font-size: .68em; letter-spacing: .28em; color: var(--amber-dim);
  margin-bottom: .35em; padding-left: .15em; font-weight: 600;
}
.radar-frame {
  position: relative;
  width: clamp(7.5rem, 16vmin, 12.5rem);
  aspect-ratio: 1;
}
#minimap {
  display: block; width: 100%; height: 100%;
  border: 1px solid #06080c; cursor: pointer;
  image-rendering: auto; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .15);
}
.radar-bezel {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%, rgba(0,0,0,.15));
}

#cmd-core {
  display: flex; flex-direction: column; gap: .45em;
  padding: var(--hud-pad) clamp(.55rem, 1.1vmin, .9rem);
  min-width: 0;
  clip-path: polygon(.7rem 0, 100% 0, 100% 100%, 0 100%, 0 .7rem);
}

#cmd-economy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55em .75em;
  padding: .25em .15em .4em;
  border-bottom: 1px solid rgba(61, 68, 78, .55);
}
.eco-money {
  display: flex; align-items: baseline; gap: .35em;
  font-weight: 600; letter-spacing: .04em;
  white-space: nowrap;
}
.eco-units {
  display: flex; flex-direction: column; align-items: flex-end; gap: .1em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: .92em;
}

#power-bar { min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.power-track {
  position: relative; height: clamp(.35rem, .7vmin, .5rem);
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(61, 68, 78, .8);
  border-radius: 1px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
#power-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #1f8f4a, #5fd07a 55%, #9aefb0);
  box-shadow: 0 0 10px rgba(95, 208, 122, .45);
  transition: width .2s linear, background .25s;
}
#power-bar.low #power-fill {
  background: linear-gradient(90deg, #a85a12, #e8b64c 60%, #f0d080);
  box-shadow: 0 0 10px rgba(232, 182, 76, .4);
}
#power-bar.critical #power-fill {
  background: linear-gradient(90deg, #8a2418, #e05a3c 55%, #ff8a70);
  box-shadow: 0 0 10px rgba(224, 90, 60, .45);
  animation: power-crit 1.1s ease-in-out infinite;
}
@keyframes power-crit { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
#power-marker {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: #fff; opacity: .85; left: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, .7);
  transition: left .2s linear;
}
.power-meta {
  display: flex; justify-content: space-between; gap: .5em;
  font-size: .68em; letter-spacing: .14em; color: var(--text-dim);
}
#power-text { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

#cmd-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5em;
  align-items: stretch;
  min-height: calc(var(--tile) * 2 + .45rem);
}

#cmd-tabs {
  display: flex; flex-direction: column; gap: .3em;
  justify-content: center;
}
.cmd-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15em;
  min-width: max(2.75rem, 44px); min-height: max(2.75rem, 44px);
  padding: .3em .25em;
  background: linear-gradient(180deg, #2a323d, #151a21);
  border: 1px solid var(--line); color: var(--text-dim);
  cursor: pointer; font-family: inherit; font-size: .62em;
  letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .12s, color .12s, box-shadow .12s, background .12s;
}
.cmd-tab-icon { width: 1.35em; height: 1.35em; display: grid; place-items: center; }
.cmd-tab-icon svg { width: 1.2em; height: 1.2em; }
.cmd-tab:hover { color: var(--text); border-color: rgba(232, 182, 76, .45); }
.cmd-tab.active {
  color: var(--amber); border-color: var(--amber-dim);
  background: linear-gradient(180deg, #3a3424, #1c1810);
  box-shadow: inset 0 0 14px rgba(232, 182, 76, .16), 0 0 10px rgba(232, 182, 76, .12);
}

#command-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  grid-auto-rows: var(--tile);
  gap: .35em;
  align-content: start;
  max-height: calc(var(--tile) * 2 + .45rem);
  overflow: hidden;
}
/* Leerer Sockel: gehoert zur Kachelmatrix, ist aber kein Ziel. */
.cmd-socket {
  border: 1px dashed rgba(90, 100, 115, .35);
  background: rgba(10, 14, 19, .45);
  border-radius: 2px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .4);
}
.cmd-btn {
  position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0;
  cursor: pointer; padding: .2em;
  background:
    linear-gradient(160deg, rgba(70, 82, 98, .55), transparent 42%),
    linear-gradient(180deg, #2c3540, #12171d);
  border: 1px solid rgba(90, 100, 115, .55); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .1s;
  font-family: inherit; border-radius: 2px;
}
.cmd-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 35%);
}
.cmd-btn:hover {
  border-color: var(--amber);
  box-shadow: inset 0 0 18px rgba(232, 182, 76, .16), 0 0 12px rgba(232, 182, 76, .12);
  transform: translateY(-1px);
}
.cmd-btn:active { transform: translateY(0); }
.cmd-btn.disabled { opacity: .42; filter: grayscale(.55); }
.cmd-btn .cmd-icon {
  display: grid; place-items: center; flex: 1; min-height: 0;
  width: 70%;
}
.cmd-btn .cmd-icon svg { width: 100%; height: auto; max-height: 55%; }
.cmd-label {
  font-size: clamp(8px, 1.05vmin, 11px); letter-spacing: .04em;
  line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmd-cost { font-size: clamp(8px, 1vmin, 10px); color: var(--amber); font-variant-numeric: tabular-nums; }
.cmd-hotkey {
  position: absolute; top: 2px; right: 3px;
  font-size: clamp(7px, .9vmin, 9px); color: var(--text-dim); opacity: .75;
}
.cmd-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #2a9a55, var(--ok));
  box-shadow: 0 0 8px rgba(95, 208, 122, .55);
  transition: width .12s linear;
}

#cmd-specials {
  display: flex; flex-direction: column; gap: .3em; justify-content: center;
}
.spec-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15em;
  min-width: max(2.75rem, 44px); min-height: max(2.75rem, 44px);
  padding: .25em;
  background: linear-gradient(180deg, #2a323d, #151a21);
  border: 1px solid var(--line); color: var(--text-dim);
  cursor: pointer; font-family: inherit; font-size: .62em;
  letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .12s, color .12s, box-shadow .12s;
}
.spec-btn svg { width: 1.25em; height: 1.25em; }
.spec-btn:hover { color: var(--amber); border-color: var(--amber-dim); }
.spec-btn.active { color: var(--amber); border-color: var(--amber); box-shadow: inset 0 0 14px rgba(232, 182, 76, .2); }

#selection-info {
  min-width: 0; padding-top: .15em;
  border-top: 1px solid rgba(61, 68, 78, .4);
}
#sel-title {
  font-size: clamp(.85rem, 1.5vmin, 1.05rem); font-weight: 700;
  letter-spacing: .08em; color: var(--amber);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sel-sub {
  font-size: .8em; color: var(--text-dim); margin-top: .15em; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

#cmd-side {
  display: flex; flex-direction: column; gap: .45em;
  padding: var(--hud-pad);
  clip-path: polygon(0 .7rem, .7rem 0, 100% 0, 100% 100%, 0 100%);
  min-width: clamp(5.5rem, 12vmin, 8.5rem);
}
#prod-queue { flex: 1; min-height: 0; }
#queue-slots {
  display: flex; flex-direction: column; gap: .28em;
  max-height: calc(var(--tile) * 2.4); overflow: hidden;
}
.queue-slot {
  position: relative;
  width: 100%; aspect-ratio: 1.15;
  max-height: calc(var(--tile) * .95);
  background: linear-gradient(180deg, #252c36, #12161c);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
}
.queue-slot svg { width: 55%; height: auto; opacity: .9; }
.queue-slot .q-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--ok); box-shadow: 0 0 6px rgba(95, 208, 122, .5);
}
.queue-slot .q-n {
  position: absolute; top: 2px; right: 3px;
  font-size: .65em; color: var(--amber);
}
.queue-caption, #queue {
  font-size: .72em; color: var(--ok); margin-top: .3em; letter-spacing: .08em;
  min-height: 1em;
}
.queue-slot.empty {
  border-style: dashed; opacity: .35;
  background: transparent;
}

#general-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: .25em; padding-top: .35em;
  border-top: 1px solid rgba(61, 68, 78, .5);
}
.gen-rank { display: flex; gap: .12em; font-size: .75em; line-height: 1; }
.gen-rank .star { color: rgba(139, 147, 157, .45); text-shadow: none; }
.gen-rank .star.on { color: var(--amber); text-shadow: 0 0 8px rgba(232, 182, 76, .55); }
.gen-crest {
  width: clamp(2.8rem, 6.5vmin, 4.2rem);
  filter: drop-shadow(0 0 10px rgba(232, 182, 76, .25));
}
.gen-crest svg { width: 100%; height: auto; display: block; }
.gen-meta { text-align: center; }
.gen-title {
  font-size: .62em; letter-spacing: .22em; color: var(--amber-dim); font-weight: 600;
}
#gen-rank-label {
  font-size: .78em; color: var(--text); letter-spacing: .06em; margin-top: .1em;
}

#hints {
  position: absolute;
  bottom: calc(100% + .15rem);
  left: 50%; transform: translateX(-50%);
  font-size: clamp(10px, 1.1vmin, 12px); color: var(--text-dim); text-align: center; line-height: 1.55;
  background: rgba(8, 11, 16, .55); padding: .4em .9em; border: 1px solid rgba(61, 68, 78, .4);
  max-width: min(46vw, 36rem); backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ---- Telefon / schmal-hoch (~9:19) ---- */
@media (max-width: 720px), (max-aspect-ratio: 3/4) {
  #hud {
    --tile: clamp(2.75rem, 12vw, 3.4rem);
    --console-max: 100vw;
  }
  #hints { display: none; }
  #cmd-console {
    left: 0; right: 0; transform: none; width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "radar core"
      "side  core";
    align-items: stretch;
  }
  #radar-panel { grid-area: radar; align-self: end; }
  #cmd-core { grid-area: core; }
  #cmd-side {
    grid-area: side; flex-direction: row; align-items: stretch;
    min-width: 0; clip-path: none;
  }
  #prod-queue { flex: 1; }
  #queue-slots { flex-direction: row; max-height: none; flex-wrap: wrap; }
  .queue-slot { width: var(--tile); aspect-ratio: 1; max-height: none; }
  #general-panel { border-top: 0; border-left: 1px solid rgba(61, 68, 78, .5); padding: .2em .35em; min-width: 4.2rem; }
  #cmd-body { grid-template-columns: auto minmax(0, 1fr); }
  #cmd-specials { display: none; }
  #cmd-economy { grid-template-columns: 1fr; gap: .35em; }
  .eco-units { flex-direction: row; align-items: baseline; gap: .4em; justify-content: flex-start; }
  #sel-sub { display: none; }
  .cmd-tab span:not(.cmd-tab-icon) { display: none; }
  #notices { width: min(18rem, 88vw); }
  .set-row { grid-template-columns: 1fr 110px 44px; }
}

/* ---- Sehr schmal: nur Kernleiste ---- */
@media (max-width: 420px) {
  #cmd-console { grid-template-columns: 1fr; grid-template-areas: "core" "radar"; }
  #cmd-side { display: none; }
  .radar-frame { width: min(42vw, 8rem); }
  #cmd-tabs { flex-direction: row; }
  #cmd-body { grid-template-columns: 1fr; }
  #command-buttons { max-height: calc(var(--tile) * 2 + .45rem); }
}

/* ---- Ultrawide (32:9): Konsole bleibt geclustert, nicht gedehnt ---- */
@media (min-aspect-ratio: 21/9) {
  #hud { --console-max: min(58rem, 62vw); }
  #cmd-console {
    bottom: .4rem;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .55));
  }
  .cmd-chrome { width: 22%; opacity: .7; }
}

/* ---- Flache Fenster ---- */
@media (max-height: 520px) {
  #hud { --tile: clamp(2.5rem, 10vh, 3.2rem); }
  #hints { display: none; }
  #selection-info { display: none; }
  .radar-frame { width: clamp(5.5rem, 18vh, 8rem); }
}

/* ---- Container: enge Konsole ---- */
@container console (max-width: 42rem) {
  #cmd-economy { grid-template-columns: 1fr auto; }
  .eco-units { grid-column: 2; grid-row: 1; }
  #power-bar { grid-column: 1 / -1; }
}

/* --- 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); }
.save-card {
  padding: 12px; border: 1px solid rgba(232, 182, 76, .28); border-radius: 3px;
  background: linear-gradient(135deg, rgba(232, 182, 76, .08), rgba(21, 27, 34, .82));
  box-shadow: inset 3px 0 0 rgba(232, 182, 76, .6);
}
.save-meta { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; color: var(--text-dim); font-size: 11px; }
.save-meta strong { color: var(--text); font-size: 13px; letter-spacing: .08em; }
.save-meta span:last-child { grid-column: 1 / -1; color: var(--amber-dim); }
.save-meta.invalid { color: var(--danger); display: block; }
.save-actions { display: flex; gap: 8px; margin-top: 11px; }
.save-button {
  flex: 1; padding: 8px 12px; border: 1px solid var(--line); background: #1c252e;
  color: var(--text); font: 700 11px/1 inherit; letter-spacing: .14em; cursor: pointer;
}
.save-button.primary { border-color: var(--amber-dim); color: var(--amber); background: linear-gradient(#343228, #25241e); }
.save-button:hover:not(:disabled) { border-color: var(--amber); color: #fff; }
.save-button:disabled { opacity: .35; cursor: not-allowed; }
.save-button.share { width: 100%; margin-top: 8px; border-color: #46647b; color: #b9d8ed; }
.save-share-result { display: flex; gap: 6px; margin-top: 8px; }
.save-share-result[hidden] { display: none; }
.save-share-result input { min-width: 0; flex: 1; background: #10151a; border: 1px solid var(--line); color: var(--text-dim); padding: 6px; font: 10px/1.2 monospace; }
.save-share-result button { border: 1px solid var(--line); background: #252d35; color: var(--text); cursor: pointer; }

/* ---------------------------------------------------------------- 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; }