/* ServicePoint0 (SPZ) — das ganze Aussehen der Seite.
 *
 * Bis zum 3.9.2026 stand das als <style>-Block mitten in index.html: 318
 * Zeilen, die man erst durchscrollen musste, um an das Markup zu kommen.
 * Herausgeloest in Schritt 1c (siehe FUNDAMENT.md).
 *
 * ⚠️ Hier steht das Aussehen der SEITE — Rahmen, Tasten, Menue, Overlays.
 * Das Aussehen des SPIELS steckt in den Pixelgrafiken (sprites/) und in
 * ui.js; im Canvas hat CSS nichts zu sagen.
 */
:root {
  /* Steuerung skaliert mit der kleineren Bildschirmseite (im Querformat = Höhe) */
  /* ⚠️ Seit dem 7.9.2026 14vmin statt 12 (Patrick: "das dpad ist etwas
     grösser"). Das ganze Kreuz misst damit 42 statt 36vmin und ist so groß wie
     eine A/B-Taste mal drei — auf einem Handy im Querformat rund ein Drittel
     der Bildhöhe. Es kostet Bild: `kameraRahmen` (bildschirm.js) misst nach,
     wie weit die Tasten hereinragen, und hält am Ortsrand genau so viel frei. */
  --dbtn: 14vmin;  /* D-Pad-Taste */
  --act: 14vmin;   /* A/B-Taste */
  /* Wie weit die Tasten vom Bildschirmrand wegstehen. ⚠️ Seit dem 6.9.2026
     füllt der Canvas den ganzen Bildschirm (bildschirm.js) — es gibt keine
     schwarzen Streifen mehr, in denen sie liegen könnten. Sie liegen jetzt AUF
     dem Bild und sind dafür nur noch Umrisse (Patrick: "die touch buttons dpad
     und AB start select sollen keine farben mehr haben nur noch umrisse und
     50% transparent").
     ⚠️ Seit dem 7.9.2026 8vmin statt 4 (Patrick: "die transparenten
     steuerbuttons sind zu sehr am rand aussen"). Am äußersten Rand liegt beim
     Handy im Querformat die abgerundete Ecke und der Griff der Hand — der
     Daumen kommt dort nur mit Verrenkung hin. Eine Handbreit weiter innen
     liegt er von selbst richtig.
     ⚠️ Dieselbe Zahl gilt für das Eingabe-Log und die Tastenliste unten: alles
     am Bildschirmrand steht in EINEM Rahmen, sonst sitzt die eine Ecke weiter
     draußen als die andere.
     ⚠️ Sie kostet Bild: `kameraRahmen` (bildschirm.js) misst nach, wie weit
     die Tasten hereinragen, und lässt am Ortsrand genau so viel frei. Wer sie
     erhöht, schiebt damit auch die Spielfigur weiter von den Rändern weg. */
  --tastenrand: 8vmin;
  /* Wie durchsichtig sie dabei sind. Eine Zahl für alle: wer sie ändert,
     ändert die ganze Steuerung und nicht eine Taste davon. */
  --tasten-deckung: 0.5;
  /* Die Farbe der Umrisse und der Beschriftung. Hell und farblos — eine bunte
     Taste über einem Bild ist ein Fleck, ein heller Strich ist eine Taste. */
  --tasten-strich: #dfe3ef;
}

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

/* Komplett fix & nicht scrollbar — nichts darf verrutschen */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  touch-action: none;
  background: #0e0e12;
  font-family: monospace;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Bühne = Viewport; Canvas mittig. dvh rechnet Androids URL-/Nav-Leiste raus. */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas: 256 Rasterpixel füllen proportional die volle Fensterhöhe.
   bildschirm.js passt die Breite ans Seitenverhältnis an. Beide Achsen
   bekommen denselben Faktor; Phaser darf keinen zweiten FIT anwenden.

   ⚠️ Bis zum 6.9.2026 stand hier ein Quadrat (`aspect-ratio: 1 / 1`) auf voller
   Höhe. Damit blieben links und rechts breite Streifen frei, und in einem
   nicht maximierten Browserfenster sah es aus, als wäre der Canvas
   abgeschnitten (Patrick). Jetzt gibt es keine Streifen mehr.
   ⚠️ `dvh` statt `vh`: Android rechnet damit seine ein- und ausfahrende
   Adressleiste heraus. Mit `vh` ragte der Canvas darunter. */
#game {
  width: 100vw;
  height: 100dvh;
}
#game canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Alle Bedien-Tasten sind FEST am Viewport verankert -> immer im Bild. */
.ctrl { position: fixed; z-index: 10; }

/* --- System-Tasten (Start / Select) oben in den Ecken ---
   Nur Umriss, keine Füllung: sie liegen jetzt über dem Bild. */
.sysbtn {
  padding: 1.4vmin 3.2vmin;
  font-family: monospace;
  font-size: 2.4vmin;
  letter-spacing: 0.15em;
  color: var(--tasten-strich);
  background: none;
  border: 0.4vmin solid var(--tasten-strich);
  border-radius: 999px;
  opacity: var(--tasten-deckung);
}
/* Gedrückt: kurz kräftiger statt eingefärbt — dieselbe Taste, nur deutlicher. */
.sysbtn:active { opacity: 0.85; }
/* Select links, Start rechts — dort, wo vorher der jeweilige Streifen war. */
#btn-select { top: var(--tastenrand); left:  var(--tastenrand); }
#btn-start  { top: var(--tastenrand); right: var(--tastenrand); }

/* --- D-Pad: am linken Bildschirmrand, dort wo der Daumen liegt ---
   ⚠️ Das ganze Quadrat ist EINE Tippflaeche zum Wischen (siehe controls.js) —
   auch die vier leeren Ecken. Die Pfeile darin nehmen deshalb selbst keine
   Finger mehr an (pointer-events: none), sonst faenge der angetippte Pfeil den
   Finger ein und das Gleiten zur naechsten Richtung kaeme nie an.

   ⚠️ Bis zum 6.9.2026 sass es mittig im schwarzen Streifen links neben dem
   Canvas. Den gibt es nicht mehr — es liegt jetzt AUF dem Bild und ist deshalb
   nur noch ein Umriss. Die Tippfläche bleibt dabei genau so groß wie vorher:
   sichtbar weniger, tastbar gleich viel. */
#dpad {
  left: var(--tastenrand);
  top: 58%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, var(--dbtn));
  grid-template-rows: repeat(3, var(--dbtn));
  touch-action: none;   /* kein Scrollen/Zoomen, wenn der Daumen darauf wischt */
  opacity: var(--tasten-deckung);
}
.dbtn {
  font-size: calc(var(--dbtn) * 0.45);
  color: var(--tasten-strich);
  background: none;
  border: 0.4vmin solid var(--tasten-strich);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* nur Bild — die Finger nimmt #dpad entgegen */
}
/* Welche Richtung gerade anliegt, setzt controls.js als Klasse. ⚠️ Ein heller
   Hauch statt einer Farbe: man muss sehen, was anliegt, aber das Bild darunter
   soll nicht verschwinden. */
.dbtn.an { background: rgba(223, 227, 239, 0.28); }
/* Inneres Border je Richtung weglassen -> nur der aeussere Kreuz-Umriss bleibt */
.dbtn.up    { grid-area: 1 / 2 / 2 / 3; border-bottom: none; border-radius: 1vmin 1vmin 0 0; }
.dbtn.left  { grid-area: 2 / 1 / 3 / 2; border-right:  none; border-radius: 1vmin 0 0 1vmin; }
/* Mittelfeld: ohne alles. ⚠️ Frueher hatte es dieselbe Fuellfarbe wie die
   Pfeile, damit das Kreuz zusammenhaengend wirkte. Ohne Fuellung braucht es
   das nicht mehr — der Umriss der vier Arme ergibt das Kreuz von selbst. */
.dbtn.mid   { grid-area: 2 / 2 / 3 / 3; background: none; border: none; }
.dbtn.right { grid-area: 2 / 3 / 3 / 4; border-left:   none; border-radius: 0 1vmin 1vmin 0; }
.dbtn.down  { grid-area: 3 / 2 / 4 / 3; border-top:    none; border-radius: 0 0 1vmin 1vmin; }

/* --- A / B: am rechten Bildschirmrand, diagonal versetzt --- */
#ab {
  right: var(--tastenrand);
  top: 58%;
  transform: translateY(-50%);
  width: calc(var(--act) * 2.25);
  height: calc(var(--act) * 2.05);
  opacity: var(--tasten-deckung);
}
/* ⚠️ Keine Farben mehr: A war rot, B gelb. Ueber dem Bild waren das zwei
   Klexe. Unterschieden werden sie jetzt an ihrem Buchstaben und an ihrer
   Lage — genau wie am echten Geraet. */
.actbtn {
  position: absolute;
  width: var(--act);
  height: var(--act);
  border-radius: 50%;
  font-size: calc(var(--act) * 0.4);
  font-weight: bold;
  color: var(--tasten-strich);
  background: none;
  border: 0.4vmin solid var(--tasten-strich);
}
.actbtn:active { background: rgba(223, 227, 239, 0.28); }
#btn-b { left: 0;  bottom: 0; } /* B unten-links */
#btn-a { right: 0; top: 0;    } /* A oben-rechts */

/* --- Log: erkannte Tastendruecke, ohne Hintergrund direkt in der rechten unteren Ecke --- */
#log {
  right: var(--tastenrand);
  bottom: var(--tastenrand);
  width: 26vmin;
  height: 13vmin;
  font-family: monospace;
  font-size: 1.7vmin;
  line-height: 1.5;
  color: #8de08d;
  text-align: right;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse; /* neueste Zeile unten */
  pointer-events: none; /* nur Anzeige, blockiert keine Klicks */
  /* ⚠️ Seit dem 6.9.2026 liegt auch das ueber dem Bild (der Canvas fuellt den
     ganzen Bildschirm). Dieselbe Deckung wie die Tasten — es ist eine
     Nebenanzeige und darf nichts zudecken. */
  opacity: var(--tasten-deckung);
}
#log .log-line { white-space: nowrap; }

/* --- Finger oder Tastatur? ---
   `controls.js` schreibt in `data-eingabe` am <body>, womit zuletzt
   gespielt wurde: eine Spieltaste auf der Tastatur schaltet auf
   "tastatur", ein Tipp mit dem Finger zurueck auf "finger".

   Im Tastatur-Betrieb verschwinden die Bildschirmtasten — man braucht sie
   nicht, und sie verdecken nur Platz. Dafuer kommt die Tastenliste links
   unten zum Vorschein, spiegelbildlich zum Eingabe-Log rechts unten.
   Startwert ist "finger", denn ohne Tastendruck weiss niemand, was fuer
   ein Geraet das ist — und ein Handy ohne sichtbare Tasten waere
   unbedienbar. */
body[data-eingabe="tastatur"] #dpad,
body[data-eingabe="tastatur"] #ab,
body[data-eingabe="tastatur"] #btn-start,
body[data-eingabe="tastatur"] #btn-select { display: none; }

#tasten {
  display: none;
  left: var(--tastenrand);
  bottom: var(--tastenrand);
  font-family: monospace;
  font-size: 1.7vmin;
  line-height: 1.6;
  pointer-events: none;   /* nur Anzeige, blockiert keine Klicks */
  opacity: var(--tasten-deckung);   /* liegt ueber dem Bild, siehe #log */
}
body[data-eingabe="tastatur"] #tasten { display: block; }
#tasten .tasten-titel {
  color: #6d7286;
  letter-spacing: 0.18em;
  margin-bottom: 0.6vmin;
}
#tasten .tasten-liste {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1.6vmin;
  white-space: nowrap;
}
#tasten .taste { color: #cfd2dc; }   /* was man drueckt */
#tasten .knopf { color: #7f86a8; }   /* was es im Spiel ist */

/* Querformat erzwingen: Hochformat blockieren */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0e0e12;
  color: #cfd2dc;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  text-align: center;
  font-size: 4vmin;
  z-index: 1000;
  padding: 8vmin;
}
#rotate-overlay .pause-hinweis { font-size: 2.8vmin; color: #8a8fa3; }
@media (orientation: portrait) {
  #stage, .ctrl { display: none; }
  /* ⚠️ Muss genauso "stark" geschrieben sein wie die Anzeige-Regel weiter
     oben (ID + Attribut + Element), sonst gewinnt die und die Tastenliste
     bliebe hinter dem Dreh-Hinweis stehen. */
  body[data-eingabe] #tasten { display: none; }
  #rotate-overlay { display: flex; }
}

/* --- Start-Menue (Overlay ueber dem ganzen Bildschirm) --- */
#menu-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 16, 0.72);
  z-index: 900;
}
#menu-overlay.hidden { display: none; }
#menu-box {
  max-height: 82vh;
  overflow-y: auto;
  background: #1d1f2a;
  border: 0.4vmin solid #3a3e50;
  border-radius: 1.6vmin;
  padding: 4vmin 4vmin 3vmin;
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  min-width: 58vmin;   /* Platz fuer die Ton-Regler */
}
#menu-title {
  color: #aeb3c6;
  font-size: 2.4vmin;
  letter-spacing: 0.4vmin;
  text-align: center;
  margin-bottom: 1vmin;
}
.menu-item {
  font-family: inherit;
  font-size: 2.6vmin;
  color: #e7e9f2;
  background: #2a2d38;
  border: 0.4vmin solid #3a3e50;
  border-radius: 1vmin;
  padding: 2.2vmin 3vmin;
  cursor: pointer;
}
.menu-item[hidden] { display: none; }
.menu-item:active { background: #3a3e50; }
/* Ton ist aus: Knopf bleibt lesbar, wirkt aber deutlich abgeschaltet */
.menu-item.aus { color: #8b90a4; background: #22242e; }

/* Ton-Regler im Menue. Aufbau: Name | Schieber | Wert, damit die Zahl
   immer an derselben Stelle steht und nicht mit dem Schieber wandert. */
.menu-regler {
  display: grid;
  grid-template-columns: 15vmin 1fr 7vmin;
  align-items: center;
  gap: 2vmin;
  padding: 0 1vmin;
  color: #aeb3c6;
  font-size: 2.2vmin;
}
.menu-regler input[type=range] {
  width: 100%;
  accent-color: #7f86a8;   /* passt zur gedaempften Menue-Schrift */
}
.menu-regler .wert { text-align: right; font-variant-numeric: tabular-nums; }
/* Bei ausgeschaltetem Ton sind die Regler wirkungslos — das soll man sehen */
.menu-regler.aus { opacity: 0.4; }

/* --- Figurenauswahl beim ersten Start --- */
#figur-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 16, 0.94);
  z-index: 950; /* ueber dem Menue, unter dem Hochformat-Hinweis */
}
#figur-overlay.hidden { display: none; }
#figur-box {
  background: #1d1f2a;
  border: 0.4vmin solid #3a3e50;
  border-radius: 1.6vmin;
  padding: 4vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vmin;
}
#figur-titel {
  color: #aeb3c6;
  font-size: 2.4vmin;
  letter-spacing: 0.4vmin;
}
#figur-reihe { display: flex; gap: 3vmin; }
.figur-item {
  font-family: inherit;
  font-size: 2.2vmin;
  color: #e7e9f2;
  background: #2a2d38;
  border: 0.4vmin solid #3a3e50;
  border-radius: 1vmin;
  padding: 2.4vmin 3.4vmin;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vmin;
}
.figur-item:active { background: #3a3e50; }
.controller-wahl { outline: 0.4vmin solid #ffd94a; outline-offset: 0.4vmin; }
/* Die Handheld-Tasten bleiben auch über den HTML-Menüs erreichbar. */
body:has(#menu-overlay:not(.hidden), #figur-overlay:not(.hidden)) #dpad,
body:has(#menu-overlay:not(.hidden), #figur-overlay:not(.hidden)) #ab,
body:has(#menu-overlay:not(.hidden), #figur-overlay:not(.hidden)) .sysbtn { z-index: 970; }
/* Die Figur gross und ohne Weichzeichner zeigen */
.figur-item img { height: 20vmin; image-rendering: pixelated; }
/* Rueckmeldung zu Spielstand speichern/laden. Solange nichts zu sagen ist,
   faellt die Zeile ganz weg — ein leeres Kaestchen wuerde im Flex-Menue
   sonst trotzdem einen Abstand aufreissen. */
#menu-hinweis { font-size: 2vmin; color: #8b90a4; text-align: center; }
#menu-hinweis:empty { display: none; }
#menu-hinweis.fehler { color: #f2a99e; }
/* Die Zeile zur ORYX-Cloud (menue.js): leise wie der Hinweis darueber, und
   ganz weg, solange das SDK aus ist (hidden). */
#menu-cloud { font-size: 2vmin; color: #8b90a4; text-align: center; }
#menu-cloud[hidden] { display: none; }
.menu-item.close { font-size: 2.2vmin; color: #aeb3c6; background: none; border: none; padding: 1vmin; }