/* Cyber-Tower-Defense - eigene Spiel-Styles (Prefix cyber_) */
/* Layout-Prinzip: HUD-Zeile oben, Brett in der Mitte, Bau-Menü unten -
   alles in eigenen Zeilen (Flex-Spalte), NICHTS überlappt das Spielfeld.
   Im Vollbild wird das Brett per JS in den freien Bereich eingepasst
   (funktioniert in jedem Seitenverhältnis: 16:9, 18:9, 4:3, Handy ...).
   Das HUD ist em-basiert und skaliert im Vollbild mit der Screenhöhe.

   Farbwelt des Spiels: Terminal-Optik in Navy/Cyan (#7FE7D2). Leiste,
   Menü und Brett bleiben immer dunkel - unabhängig vom Seiten-Theme.
   Die JUPI-Leiste folgt trotzdem der Plattform-Vorgabe 3.13.2: links
   „← Alle Spiele", mittig Spiel-Logo + Name, rechts Werkzeuge. */

/* ---------- Seite: Terminal-Dunkel in beiden Themes ----------
   Das Spiel ist ein dunkler Terminal-Raum - die Seite bleibt darum immer
   dunkel (Vorbild Stadt im Wandel). Die Leiste und der Fuß bekommen
   Theme-Farben, das Brett sowieso. */
body.jupi.cyber_body {
  background:
    radial-gradient(1200px 600px at 10% -10%, #123043 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #0d2b3a 0%, transparent 55%),
    #08151f;
  color: #dbeaf5;
}
body.jupi.cyber_body .jupi_container > .jupi_main { background: transparent; }
body.jupi.cyber_body .jupi_container > .jupi_footer {
  background: #0a1a27;
  border-top: 1px solid rgba(127, 231, 210, .22);
}
body.jupi.cyber_body .jupi_footer_text { color: #8fb8d4; }
body.jupi.cyber_body .jupi_footer_text a { color: #7FE7D2; }

/* ---------- Spielfeld-Konsole ---------- */
/* Grid-Blowout-Fix: ohne min-width:0 wuerde das 960px-Canvas die
   .jupi_main-Gridspalte auf 1024px aufblaehen (Abschneiden rechts) */
.jupi_main { min-width: 0; }
.cyber_stage {
  position: relative;
  min-width: 0;
  margin: 0 auto;
  max-width: min(60rem, 100%);    /* 960 px, aber nie breiter als die Seite */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 30, 50, .35), 0 0 0 1px rgba(127, 231, 210, .18);
  background: #0A1624;
}
.cyber_buehne {
  display: flex;
  flex-direction: column;
  font-size: 10px;                /* 1em = 10px; Vollbild skaliert unten */
  line-height: 1.35;
}
.cyber_canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  touch-action: manipulation;
  cursor: crosshair;
}

/* ---------- Vollbild: die Buehne fuellt den Schirm (jedes
   Seitenverhältnis), das Brett wird per JS zentriert eingepasst ---------- */
.cyber_buehne:fullscreen,
.cyber_buehne:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #0A1624;
  font-size: max(9px, calc(100vh / 60));   /* HUD skaliert mit, bleibt lesbar */
}
.cyber_buehne:fullscreen .cyber_canvas,
.cyber_buehne:-webkit-full-screen .cyber_canvas {
  /* Größe setzt passeCanvasAn() per Inline-Style (seitenverhältnis-treu) */
  width: auto;
  height: auto;
  max-width: none;
}

/* ---------- Spielfläche (Brett + kurze Overlays), bekommt den Restplatz ---------- */
.cyber_spielfeld {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;                  /* darf schrumpfen, damit das Brett passt */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(23, 86, 110, .35) 0%, transparent 70%),
    #0F2438;
}

/* ---------- HUD oben: Punkte + Steuerung (eigene Zeile) ---------- */
.cyber_hud {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.2em;
  align-items: center;
  justify-content: space-between;
  padding: .55em .8em;
  background: linear-gradient(180deg, #0C1E31 0%, #091626 100%);
  border-bottom: 1px solid rgba(127, 231, 210, .3);
  color: #eaf4ff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.cyber_hud_stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.4em;
  align-items: center;
}
.cyber_stat {
  display: flex;
  flex-direction: column;
  min-width: 3.4em;
  text-align: center;
}
.cyber_stat label {
  font-size: .78em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6fc8c0;
  font-weight: 700;
}
.cyber_stat span {
  font-size: 1.4em;
  font-weight: 800;
  color: #cfe8ff;
  line-height: 1.15;
  text-shadow: 0 0 12px rgba(127, 231, 210, .25);
}
.cyber_stat.cyber_warn span { color: #ff8a80; text-shadow: 0 0 12px rgba(239, 83, 80, .4); }
.cyber_integrität { min-width: 8em; }
.cyber_integrität span { font-size: 1.1em; }
.cyber_bar {
  height: .6em;
  background: #16283c;
  border: 1px solid rgba(127, 231, 210, .25);
  border-radius: 999em;
  overflow: hidden;
  margin-top: .2em;
}
.cyber_bar_fill {
  height: 100%;
  width: 100%;
  border-radius: 999em;
  background: linear-gradient(90deg, #43A047, #66bb6a);
  transition: width .25s ease, background .25s ease;
}
.cyber_hud_btns {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  align-items: center;
  justify-content: flex-end;
}
.cyber_btn_start {
  padding: .45em 1em;
  font-size: 1.15em;
  white-space: nowrap;
  min-height: 40px;
}
/* ---------- Spiel-Knöpfe in Neon-Optik (auch im Dark Mode) ----------
   Die Plattform-CSS faerbt `.jupi_btn` im Dark Mode orange
   (`html[data-theme="dark"] .jupi_btn`, Spezifitaet 0,2,0). Jede
   Eigenfarbe des Spiels braucht darum einen gleich spezifischen
   Override - sonst faellt der Knopf im Dark Mode aus dem Bild. */
.cyber_btn {
  background: linear-gradient(135deg, #7FE7D2 0%, #35b9a6 100%);
  color: #04202a;
  box-shadow: 0 4px 14px rgba(53, 185, 166, .35);
}
.cyber_btn:hover { background: linear-gradient(135deg, #96f0dd 0%, #46c9b5 100%); }
html[data-theme="dark"] .cyber_btn {
  background: linear-gradient(135deg, #7FE7D2 0%, #35b9a6 100%);
  color: #04202a;
  box-shadow: 0 4px 14px rgba(53, 185, 166, .35);
}
html[data-theme="dark"] .cyber_btn:hover {
  background: linear-gradient(135deg, #96f0dd 0%, #46c9b5 100%);
}
.cyber_select_klein {
  font-size: 1.05em;
  padding: .25em .4em;
  min-height: 40px;
  background: #0d2136;
  color: #cfe8ff;
  border: 1px solid rgba(127, 231, 210, .4);
}
.cyber_select_klein:focus { outline: none; border-color: #7FE7D2; box-shadow: 0 0 0 3px rgba(127, 231, 210, .2); }
.cyber_select_klein option { background: #0d2136; color: #eaf4ff; }
html[data-theme="dark"] .cyber_select_klein {
  background: #0d2136;
  color: #cfe8ff;
  border-color: rgba(127, 231, 210, .4);
}
.cyber_btn_klein {
  border: 1px solid rgba(127, 231, 210, .32);
  cursor: pointer;
  border-radius: 999em;
  padding: .4em .75em;
  font-weight: 700;
  font-size: 1.1em;
  background: rgba(127, 231, 210, .12);
  color: #cfe8ff;
  min-height: 40px;               /* Bedienziel 3.13.5 (HUD-Schrift skaliert im Vollbild, die Mindestgroesse bleibt) */
  min-width: 40px;
  transition: background .14s, border-color .14s;
}
.cyber_btn_klein:hover { background: rgba(127, 231, 210, .26); border-color: rgba(127, 231, 210, .7); }
.cyber_btn_klein.cyber_aktiv {
  background: linear-gradient(135deg, #7FE7D2, #35b9a6);
  border-color: #7FE7D2;
  color: #04202a;
}

/* ---------- Bau-Menü unten: Auswahl + Funkverkehr + Konsole (eigene Zeile) ---------- */
.cyber_hud_unten {
  background: linear-gradient(180deg, #071522 0%, #050d17 100%);
  border-top: 1px solid rgba(120, 220, 255, .45);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .55);
}
.cyber_auswahl {
  display: flex;
  align-items: center;
  gap: .6em;
  flex-wrap: wrap;
  justify-content: center;
  padding: .35em .9em;
  border-bottom: 1px dashed rgba(255, 224, 130, .35);
  background: rgba(48, 42, 14, .6);
  font-size: 1.05em;
  color: #fff8e1;
}
.cyber_auswahl[hidden] { display: none; }
.cyber_auswahl .jupi_btn { padding: .3em .8em; font-size: .95em; min-height: 40px; }
.cyber_auswahl_hinweis {
  margin-left: auto;
  font-size: .82em;
  color: #9fc3de;
  opacity: .85;
}
@media (max-width: 48rem) {
  .cyber_auswahl_hinweis { display: none; }   /* auf dem Handy zu lang */
}
.cyber_auswahl .cyber_verkauf { background: #eceff1; color: #b71c1c; }
html[data-theme="dark"] .cyber_auswahl .cyber_verkauf,
html[data-theme="dark"] .cyber_auswahl .cyber_verkauf:hover {
  background: #eceff1;
  color: #b71c1c;
}
.cyber_tipp {
  margin: 0;
  padding: .35em .9em;
  border-bottom: 1px solid rgba(120, 220, 255, .18);
  color: #cfe8ff;
  font-size: 1.05em;
}
.cyber_tipp strong { color: #8FE9FF; }

/* ---------- Konsole: zwei Spalten mit abgeschrägten Ecken ----------
   Der Neon-Look der Referenz: eine dünne, leuchtende Kante läuft auch über
   die abgeschnittenen Ecken. Erreicht mit zwei Schichten - die äußere ist
   der Rahmen (hell), die innere liegt 1 px eingerückt und trägt die
   dunkle Fläche (gleicher clip-path, 1 px kleiner). */
.cyber_konsole {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  align-items: stretch;
  padding: .5em .7em .7em;
}
.cyber_panel {
  flex: 1 1 17rem;
  min-width: 0;
  padding: 1px;                                   /* Rahmenstärke */
  background: rgba(125, 215, 255, .5);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
/* Die Verteidigungen brauchen mehr Platz als das Bestiarium */
.cyber_konsole .cyber_panel:first-child { flex: 2.2 1 30rem; }
.cyber_panel_innen {
  height: 100%;
  padding: .45em .55em .55em;
  background: linear-gradient(160deg, rgba(13, 38, 64, .92) 0%, rgba(6, 18, 32, .95) 100%);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.cyber_panel_titel {
  margin: 0 0 .35em;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7FE7FF;
  text-shadow: 0 0 12px rgba(90, 220, 255, .5);
}
/* ---------- Turmkarten: Neon-Karten mit abgeschrägten Ecken ---------- */
.cyber_towerbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 8 Türme = 2 saubere Reihen */
  gap: .4em;
}
.cyber_towerbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  min-width: 0;
  padding: 1px;                                  /* Rahmenstärke */
  background: rgba(125, 215, 255, .45);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background .14s, filter .14s;
}
.cyber_towerbtn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: linear-gradient(165deg, rgba(14, 42, 70, .95) 0%, rgba(6, 18, 32, .97) 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.cyber_towerbtn > * { position: relative; z-index: 1; }
.cyber_towerbtn:hover { background: rgba(150, 230, 255, .85); }
.cyber_towerbtn:hover img { filter: drop-shadow(0 0 10px var(--tf, rgba(127, 231, 210, .8))); }
.cyber_towerbtn img {
  width: 3.2em;
  height: 3.2em;
  margin-top: .2em;
  object-fit: contain;
  filter: drop-shadow(0 0 7px var(--tf, rgba(127, 231, 210, .55)));
}
.cyber_t_text { display: flex; flex-direction: column; min-width: 0; padding: 0 .25em .3em; }
.cyber_t_name {
  font-weight: 800;
  font-size: .82em;
  color: var(--tf, #cfe8ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cyber_t_info {
  font-size: .72em;
  color: #8fb8d4;
  white-space: nowrap;
}
.cyber_t_info b { color: #fdd835; }
.cyber_towerbtn.cyber_aktiv {
  background: rgba(150, 240, 255, .95);
  filter: drop-shadow(0 0 10px rgba(90, 220, 255, .55));
}
.cyber_towerbtn.cyber_teuer { opacity: .55; cursor: not-allowed; }
/* Gesperrte Türme: abgedunkelt mit Schloss-Hinweis */
.cyber_towerbtn.cyber_gesperrt { cursor: not-allowed; }
.cyber_towerbtn.cyber_gesperrt img,
.cyber_towerbtn.cyber_gesperrt .cyber_t_text { opacity: .32; filter: grayscale(.8); }
.cyber_sperre {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .2em;
  background: rgba(9, 22, 38, .78);
  color: #ffd54f;
  font-weight: 800;
  font-size: .8em;
  line-height: 1.2;
}
.cyber_sperre[hidden] { display: none; }

/* ---------- Gefahren-Chips (Bestiarium) ----------
   Kleine Neon-Karten wie im Referenzbild. Ein Klick zeigt den Merksatz
   der Gefahr im Funkverkehr (kein zusätzliches Fenster). */
.cyber_gefahren {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 6 Gefahren = 2 Reihen */
  gap: .4em;
}
.cyber_gefahr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  padding: 1px;
  background: rgba(255, 110, 130, .5);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  font-family: inherit;
  transition: background .14s, filter .14s;
}
.cyber_gefahr::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: linear-gradient(165deg, rgba(38, 18, 32, .95) 0%, rgba(16, 12, 24, .97) 100%);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.cyber_gefahr > * { position: relative; z-index: 1; }
.cyber_gefahr:hover { background: rgba(255, 150, 165, .9); filter: drop-shadow(0 0 8px rgba(255, 90, 110, .45)); }
.cyber_gefahr img {
  width: 2.9em;
  height: 2.9em;
  margin-top: .2em;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(255, 90, 90, .45));
}
.cyber_gefahr span {
  padding: 0 .25em .3em;
  font-size: .74em;
  font-weight: 800;
  color: #ffb3bd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Lern-Toasts (kurz über dem Brett, durchlässig für Klicks) ---------- */
.cyber_toasts {
  position: absolute;
  left: 50%;
  bottom: .8em;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: .35em;
  align-items: center;
  pointer-events: none;
  width: 90%;
}
.cyber_toast {
  background: rgba(10, 27, 45, .95);
  color: #fff;
  border-left: 5px solid #7FE7D2;
  border-radius: .6em;
  padding: .4em .9em;
  font-size: 1em;
  line-height: 1.35;
  max-width: 40em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 18px rgba(127, 231, 210, .12);
  animation: cyber_toast_rein .25s ease;
}
.cyber_toast.cyber_toast_gut { border-left-color: #66bb6a; }
.cyber_toast.cyber_toast_schlecht { border-left-color: #ef5350; }
@keyframes cyber_toast_rein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Ende-Karte (über dem Brett, nur solange nötig) ---------- */
.cyber_overlays {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;           /* Klicks gehen durchs Feld */
}
.cyber_overlays > * { pointer-events: auto; }
.cyber_card {
  line-height: 1.45;
  background: linear-gradient(160deg, rgba(12, 36, 56, .97), rgba(7, 20, 34, .98));
  color: #eaf4ff;
  border: 1px solid rgba(127, 231, 210, .45);
  border-radius: 1.1em;
  padding: 1.1em 1.4em;
  max-width: 44em;
  max-height: 96%;
  overflow: auto;
  text-align: center;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .6), 0 0 26px rgba(127, 231, 210, .14);
}
.cyber_card h3 {
  margin: .1em 0 .5em;
  font-size: 1.5em;
  color: #7FE7D2;
  text-shadow: 0 0 18px rgba(127, 231, 210, .3);
}
.cyber_card p { font-size: 1em; }
.cyber_card table {
  margin: .6em auto;
  border-collapse: collapse;
  font-size: .92em;
}
.cyber_card td {
  padding: .22em .6em;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  text-align: left;
}
.cyber_card td:first-child { white-space: nowrap; }
.cyber_card td:last-child { color: #9fc3de; white-space: nowrap; }
.cyber_sterne { font-size: 2em; margin: .2em 0; }
.cyber_handbuch {
  text-align: left;
  background: rgba(127, 231, 210, .08);
  border-left: 4px solid #7FE7D2;
  border-radius: .7em;
  padding: .55em .8em;
  margin: .5em 0;
  font-size: .9em;
}
.cyber_handbuch div { margin: .18em 0; }
.cyber_card_row {
  display: flex;
  gap: .6em;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .6em;
}

/* ---------- Drei-Zonen-JUPI-Leiste in der Optik des Spiels (GUI 3.13.2) ----------
   Aufbau wie Neumark 1400 und Stadt im Wandel: links „← Alle Spiele",
   mittig Spiel-Logo + Name (+ Claim), rechts Menü-Knopf und Dark-Mode-Pill.
   Die POSITIONEN der Knöpfe bleiben exakt wie in der Plattform-Vorgabe -
   nur die OPTIK ist an das Spiel angepasst: Terminal-Leiste in Navy/Cyan,
   die wie das Brett immer dunkel bleibt (unabhängig vom Seiten-Theme).
   Kein Schul- und kein jupi-Wortlogo in der Leiste (3.13.2) - der
   Schul-Bezug lebt im Fuß, das jupi-Logo auf der Startseite.
   Bedienziele >= 40 px (Zurueck-Pille, Menü-Knopf, Pill-Switch). */
.cyber_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  z-index: 70;                       /* über dem Start-Menü (z-index 60) */
  color: #d9f6ff;
  background:
    linear-gradient(180deg, rgba(127, 231, 210, .10) 0%, rgba(127, 231, 210, 0) 55%),
    linear-gradient(135deg, #06131f 0%, #0a2133 48%, #0c3b47 100%);
  border-bottom: 1px solid rgba(127, 231, 210, .35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(127, 231, 210, .14) inset;
}
.cyber_header .cyber_zone_links {
  display: flex;
  align-items: center;
  justify-self: start;
}
.cyber_header .jupi_nav_back {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .45rem .85rem;
  line-height: 1.2;
  font-size: .88rem;
  font-weight: 800;
  min-height: 40px;                  /* Bedienziel 3.13.5 */
  color: #7FE7D2;
  background: rgba(127, 231, 210, .10);
  border: 1px solid rgba(127, 231, 210, .45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: background .16s, color .16s, transform .16s;
}
.cyber_header .jupi_nav_back:hover {
  background: rgba(127, 231, 210, .22);
  color: #dcfff8;
  transform: translateY(-1px);
}
.cyber_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .65rem;
  min-width: 0;
}
.cyber_brand img {
  display: block;
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: .55rem;
  box-shadow: 0 0 0 1px rgba(127, 231, 210, .5), 0 0 16px rgba(127, 231, 210, .3);
}
.cyber_brand_text {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1px;                                   /* Rahmenstärke */
  background: rgba(125, 215, 255, .45);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.cyber_brand_text::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: rgba(5, 18, 30, .5);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.cyber_brand_text > * { position: relative; z-index: 1; }
.cyber_brand h1 {
  margin: 0;
  padding: .12rem .55rem 0;
  color: #f2fbff;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(127, 231, 210, .35);
}
.cyber_claim {
  padding: 0 .55rem .18rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5fd8c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cyber_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.cyber_leiste_knopf {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  min-width: 40px;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(127, 231, 210, .45);
  background: rgba(127, 231, 210, .10);
  color: #7FE7D2;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s;
}
.cyber_leiste_knopf:hover {
  background: rgba(127, 231, 210, .22);
  color: #dcfff8;
  transform: translateY(-1px);
}
.cyber_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  padding: 0;
  background: rgba(127, 231, 210, .14);
  border-color: rgba(127, 231, 210, .45);
}
.cyber_header .jupi_theme_switch:hover { background: rgba(127, 231, 210, .26); }
html[data-theme="dark"] .cyber_header .jupi_theme_switch { background: rgba(0, 0, 0, .35); }
.cyber_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
html[data-theme="dark"] .cyber_header .jts_thumb { left: calc(100% - 36px); }
.cyber_header .jts_sun { left: 9px; }
.cyber_header .jts_moon { right: 9px; }
/* Dark Mode: die Leiste bleibt in der Spieloptik (Navy/Cyan) - die
   Plattform-Regel (Anthrazit/Orange) wird hier bewusst überschrieben,
   weil das Spiel in beiden Themes gleich aussieht. */
html[data-theme="dark"] .cyber_header {
  background:
    linear-gradient(180deg, rgba(127, 231, 210, .10) 0%, rgba(127, 231, 210, 0) 55%),
    linear-gradient(135deg, #06131f 0%, #0a2133 48%, #0c3b47 100%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 1px 0 rgba(127, 231, 210, .14) inset;
}
html[data-theme="dark"] .cyber_header .jupi_nav_back {
  background: rgba(127, 231, 210, .10);
  color: #7FE7D2;
  border-color: rgba(127, 231, 210, .45);
}
html[data-theme="dark"] .cyber_header .jupi_nav_back:hover {
  background: rgba(127, 231, 210, .22);
  color: #dcfff8;
}

/* Handy: Marke oben ueber die volle Breite, Zurueck + Schalter darunter */
@media (max-width: 48rem) {
  .cyber_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem;
    padding: .45rem .5rem;
  }
  .cyber_brand { grid-row: 1; grid-column: 1 / -1; }
  .cyber_brand img { width: 36px; height: 36px; }
  .cyber_brand h1 { font-size: 1.05rem; }
  .cyber_claim { font-size: .58rem; }
  .cyber_header .cyber_zone_links { grid-row: 2; grid-column: 1; }
  .cyber_header .jupi_nav_back { font-size: .85rem; }
  .cyber_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
}

/* ---------- Start-Menü (Title-Screen, GUI 3.13.3 Typ 4) ----------
   Aufbau wie Neumark 1400 und Stadt im Wandel: Held oben (Logo, Titel,
   Kurztext, Lernsatz), darunter zwei Spalten (Spiel starten | Wissen &
   Optionen), unten das Wissens-Handbuch als Aufklapper. Die Karte bleibt
   bewusst IMMER dunkel (wie das Brett) - unabhängig vom Seiten-Theme. */
.cyber_start {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(24, 92, 120, .55) 0%, transparent 62%),
    radial-gradient(760px 460px at 10% 112%, rgba(10, 66, 88, .50) 0%, transparent 60%),
    rgba(4, 11, 20, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.8rem 1rem 1rem;        /* oben Platz fuer die Leiste lassen */
}
.cyber_start[hidden] { display: none; }
.cyber_start_karte {
  width: 100%;
  max-width: 58rem;
  max-height: calc(100vh - 5.8rem);  /* Handy: Karte notfalls scrollbar */
  overflow: auto;
  background: linear-gradient(160deg, rgba(12, 36, 56, .97) 0%, rgba(7, 20, 34, .98) 100%);
  color: #e8f6ff;
  border: 1px solid rgba(127, 231, 210, .35);
  border-radius: 1.3rem;
  padding: 1.4rem 1.5rem;
  text-align: left;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
/* ---------- Held: Logo + Titel + Lernsatz ---------- */
.cyber_start_hero {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.cyber_start_logo {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 0 1px rgba(127, 231, 210, .45), 0 0 28px rgba(127, 231, 210, .32);
}
.cyber_start_hero_text { min-width: 0; }
.cyber_start_eyebrow {
  display: block;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5fd8c8;
}
.cyber_start_karte h2 {
  margin: .15rem 0 .35rem;
  font-size: 1.7rem;
  line-height: 1.15;
  color: #eafcff;
  letter-spacing: -.01em;
  text-shadow: 0 0 20px rgba(127, 231, 210, .28);
}
.cyber_start_unter {
  margin: 0 0 .55rem;
  font-size: .95rem;
  line-height: 1.5;
  color: #b7d6ea;
}
.cyber_lernsatz {
  margin: 0;
  padding: .55rem .8rem;
  border-left: 4px solid #7FE7D2;
  border-radius: .55rem;
  background: rgba(127, 231, 210, .09);
  font-size: .9rem;
  line-height: 1.5;
  color: #d7ecfb;
}
/* ---------- Zwei Spalten: Spielen | Wissen & Optionen ---------- */
.cyber_start_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.1rem;
}
.cyber_start_spalte {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .85rem .9rem;
  border: 1px solid rgba(127, 231, 210, .2);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .035);
}
.cyber_start_spalte h3 {
  margin: 0 0 .1rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7FE7D2;
}
.cyber_start_hinweis { font-size: .76rem; color: #8fb8d4; }
/* ---------- Menü-Knöpfe im Titelbildschirm ---------- */
.cyber_haupt_btn {
  min-height: 48px;
  padding: .6rem 1.2rem;
  border: none;
  border-radius: .8rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  color: #04202a;
  background: linear-gradient(135deg, #7FE7D2 0%, #35b9a6 100%);
  box-shadow: 0 8px 22px rgba(53, 185, 166, .35);
  transition: transform .14s, box-shadow .14s, filter .14s;
}
.cyber_haupt_btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(53, 185, 166, .45);
}
.cyber_haupt_btn:active { transform: translateY(0); }
.cyber_menue_btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: .5rem .8rem;
  text-align: left;
  border: 1px solid rgba(127, 231, 210, .28);
  border-radius: .7rem;
  background: rgba(127, 231, 210, .07);
  color: #d7ecfb;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .14s;
}
.cyber_menue_btn:hover {
  background: rgba(127, 231, 210, .16);
  border-color: rgba(127, 231, 210, .6);
  transform: translateX(2px);
}
.cyber_menue_btn[hidden] { display: none; }   /* display:flex sonst gewinnt */
.cyber_menue_klein { min-height: 40px; font-size: .86rem; padding: .45rem .75rem; }
/* ---------- Netzwerk-Wahl (drei Stufen) ---------- */
.cyber_stufen_wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr));
  gap: .45rem;
}
.cyber_stufen_btn {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-height: 56px;
  padding: .5rem .6rem;
  border: 1px solid rgba(127, 231, 210, .3);
  border-radius: .7rem;
  background: rgba(10, 28, 44, .8);
  color: #cfe8ff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .14s;
}
.cyber_stufen_btn b { font-size: .9rem; color: #eafcff; }
.cyber_stufen_btn small { font-size: .68rem; color: #8fb8d4; }
.cyber_stufen_btn:hover { border-color: rgba(127, 231, 210, .65); transform: translateY(-2px); }
.cyber_stufen_btn.cyber_aktiv {
  border-color: #7FE7D2;
  background: rgba(127, 231, 210, .16);
  box-shadow: 0 0 0 1px rgba(127, 231, 210, .4), 0 6px 18px rgba(53, 185, 166, .22);
}
.cyber_stufen_btn.cyber_aktiv b { color: #7FE7D2; }
.cyber_start_opt_zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .15rem;
}
.cyber_best_hinweis { font-size: .76rem; color: #8fb8d4; }
/* ---------- Wissens-Handbuch (Aufklapper) ---------- */
.cyber_start_wissen {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}
.cyber_start_info {
  border: 1px solid rgba(127, 231, 210, .26);
  border-radius: .75rem;
  background: rgba(46, 109, 163, .14);
  padding: .5rem .85rem;
}
.cyber_start_info summary {
  cursor: pointer;
  font-weight: 800;
  color: #9fd8ef;
  list-style-position: inside;
}
.cyber_start_info[open] summary { color: #7FE7D2; }
.cyber_start_info p {
  margin: .5rem 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #d7ecfb;
}
.cyber_start_info table {
  margin: .55rem 0 0;
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.cyber_start_info td {
  padding: .22rem .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
}
.cyber_start_info td:first-child { white-space: nowrap; }
.cyber_start_info td:last-child { color: #9fc3de; white-space: nowrap; }
.cyber_start_info th {
  text-align: left;
  padding: .25rem .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #9fd0f5;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------- Dark Mode (nur Seitenelemente, das Feld ist immer dunkel) ---------- */

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 48rem) {
  /* Konsole stapelt sich, Karten werden zur Icon-Leiste */
  .cyber_konsole { gap: .4em; padding: .35em .4em .5em; }
  .cyber_panel { flex: 1 1 100%; }
  .cyber_panel_innen { padding: .35em .4em .4em; }
  .cyber_panel_titel { font-size: .66rem; margin-bottom: .25em; }
  .cyber_towerbar, .cyber_gefahren { gap: .3em; }
  .cyber_towerbtn img { width: 2.8em; height: 2.8em; }
  .cyber_towerbtn .cyber_t_text { display: none; }
  /* Die sechs Gefahren passen in eine Reihe - so bleibt das Brett groß */
  .cyber_gefahren { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cyber_gefahr img { width: 2.1em; height: 2.1em; }
  .cyber_gefahr span { display: none; }
  .cyber_sperre { font-size: .7em; }
  .cyber_stat { min-width: 2.8em; }
  .cyber_stat span { font-size: 1.15em; }
  .cyber_integrität { min-width: 6.5em; }
  /* Titelbildschirm: Held und Spalten stapeln sich */
  .cyber_start { padding: 6.6rem .6rem .6rem; }
  .cyber_start_karte { padding: 1rem .9rem; max-height: calc(100vh - 7.2rem); }
  .cyber_start_hero { flex-direction: column; gap: .7rem; }
  .cyber_start_logo { width: 4.4rem; height: 4.4rem; }
  .cyber_start_karte h2 { font-size: 1.4rem; }
  .cyber_start_grid { grid-template-columns: 1fr; gap: .7rem; }
  .cyber_start_info td:last-child { white-space: normal; }
}