/* KAWUZI: Oberflaeche.
   Dunkel, warm, wenig Kanten. Das Bild soll wirken, nicht die Leiste davor.
   Alle HUD-Elemente ab 124px von links, damit die beiden Arcade-Knoepfe
   oben links frei bleiben. */

:root {
  --gruen: #8ed06a;
  --gruen-hell: #b8e89a;
  --gold: #f0c246;
  --tuerkis: #7fe8ff;
  --rot: #e8543a;
  --dunkel: #0d1410;
  --panel: rgba(12, 20, 15, 0.9);
  --rand: rgba(142, 208, 106, 0.28);
  --schrift: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0f0c;
  color: #e8f0e4;
  font-family: var(--schrift);
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}

#view { display: block; width: 100vw; height: 100vh; cursor: none; }
body.unlocked #view { cursor: default; }

.hidden { display: none !important; }

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

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

#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  opacity: 0.85;
}
#crosshair span {
  position: absolute; background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
#crosshair span:nth-child(1) { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair span:nth-child(2) { left: 0; top: 10px; width: 22px; height: 2px; }
#crosshair.build span { background: var(--tuerkis); }
#crosshair.hit span { background: var(--rot); }

#vitals {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.vital { display: flex; align-items: center; gap: 9px; }
.vlabel { font-size: 17px; width: 22px; text-align: center; filter: drop-shadow(0 1px 2px #000); }
.vbar {
  width: 208px; height: 15px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.vbar.thin { height: 8px; width: 150px; }
.vfill { height: 100%; width: 100%; transition: width 0.16s ease-out; border-radius: 7px; }
.vfill.health { background: linear-gradient(90deg, #d8402a, #f07a4a); }
.vfill.stamina { background: linear-gradient(90deg, #d8a020, #f0d060); }
.vfill.breath { background: linear-gradient(90deg, #2a90d8, #7fe8ff); }
.vtxt { font-size: 13px; font-weight: bold; opacity: 0.9; text-shadow: 0 1px 3px #000; min-width: 30px; }

#topright {
  position: absolute; right: 18px; top: 16px;
  text-align: right; font-size: 13px; line-height: 1.65;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  opacity: 0.9;
}
#clock { font-size: 15px; font-weight: bold; }
#coords { opacity: 0.68; font-variant-numeric: tabular-nums; }
#moodline { opacity: 0.72; font-style: italic; }
#perf { opacity: 0.42; font-size: 11px; }

#modeline {
  position: absolute; left: 124px; top: 18px;
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13px; font-weight: bold;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

#hotbar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#hotbar-items { display: flex; gap: 6px; }
.slot {
  width: 54px; height: 54px;
  background: rgba(10, 18, 13, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s, border-color 0.12s;
}
.slot.on {
  border-color: var(--tuerkis);
  transform: translateY(-7px) scale(1.12);
  box-shadow: 0 0 18px rgba(127, 232, 255, 0.45);
}
#hotbar-hint {
  font-size: 12.5px; opacity: 0.86;
  background: var(--panel); border: 1px solid var(--rand);
  border-radius: 999px; padding: 4px 14px;
  text-shadow: 0 1px 2px #000;
}

#toasts {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--gruen);
  border-radius: 8px;
  padding: 8px 17px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  animation: toastIn 0.24s ease-out;
}
.toast.gold { border-left-color: var(--gold); color: #ffe9a8; }
.toast.rot { border-left-color: var(--rot); color: #ffc4b8; }
.toast.fade { opacity: 0; transition: opacity 0.5s, transform 0.5s; transform: translateY(-8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

#hitmark {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  opacity: 0; pointer-events: none;
  background:
    linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
  filter: drop-shadow(0 0 3px #000);
}
#hitmark.on { animation: hitPop 0.26s ease-out; }
@keyframes hitPop {
  0% { opacity: 1; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.35); }
}

#damage-flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(190, 30, 20, 0.62) 100%);
  opacity: 0; transition: opacity 0.28s;
}
#damage-flash.on { opacity: 1; transition: opacity 0.05s; }

/* ---------------- Lebensbalken der Wesen ---------------- */

#nameplates { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
.plate {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  font-size: 11.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  transition: opacity 0.2s;
}
.plate .pname { font-weight: bold; letter-spacing: 0.02em; margin-bottom: 2px; }
.plate .pbar {
  width: 62px; height: 6px; margin: 0 auto;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px; overflow: hidden;
}
.plate .pfill { height: 100%; background: linear-gradient(90deg, #62c03a, #9ae05a); border-radius: 3px; }
.plate.feind .pfill { background: linear-gradient(90deg, #d8342a, #f0764a); }
.plate.feind .pname { color: #ffb0a0; }
.plate.friedlich .pname { color: #cfe8b8; }
.plate.boss .pbar { width: 190px; height: 11px; }
.plate.boss .pname { font-size: 15px; color: var(--gold); }

/* ---------------- Vollbild-Fenster ---------------- */

#startscreen, #pausescreen, #deathscreen {
  position: fixed; inset: 0; z-index: 60;
  /* align-items: center wuerde bei zu hohem Inhalt den oberen Rand aus dem
     scrollbaren Bereich schieben: man kaeme runter, aber nie wieder hoch.
     flex-start plus margin auto zentriert, solange Platz ist, und scrollt
     sauber, wenn nicht. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 22px;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(40, 78, 48, 0.5), transparent 62%),
    linear-gradient(170deg, #0b140e 0%, #060a08 100%);
  overflow-y: auto;
}
#pausescreen, #deathscreen { background: rgba(5, 10, 7, 0.86); backdrop-filter: blur(5px); }

/* Rueckfrage: liegt ueber Pause und Tod (60), unter Optionen (80) und
   Joypad-Pruefbild (90). Gleicher Look wie die anderen Fenster. */
#bestaetigen {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(5, 10, 7, 0.78); backdrop-filter: blur(5px);
}
#bestaetigen.hidden { display: none; }
#best-text { opacity: 0.8; font-size: 14px; line-height: 1.5; margin: 0 auto 4px; max-width: 360px; }
button.danger:not(.ghost) {
  background: linear-gradient(160deg, var(--rot), #a83020);
  color: #fff5f0;
  box-shadow: 0 5px 18px rgba(232, 84, 58, 0.3);
}
button.danger:not(.ghost):hover { box-shadow: 0 8px 24px rgba(232, 84, 58, 0.42); }

.panel {
  margin: auto;
  max-width: 780px; width: 100%;
  background: rgba(11, 19, 14, 0.86);
  border: 1px solid var(--rand);
  border-radius: 18px;
  padding: 30px 34px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.panel.small { max-width: 430px; }

.logo {
  font-size: clamp(46px, 10vw, 88px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 6px;
}
.logo span { display: inline-block; animation: wiggle 4.2s ease-in-out infinite; }
.logo .k { color: #9ad86a; animation-delay: 0s; }
.logo .a { color: #b8e07a; animation-delay: 0.12s; }
.logo .w { color: #d8e06a; animation-delay: 0.24s; }
.logo .u { color: #f0c246; animation-delay: 0.36s; }
.logo .z { color: #f09a46; animation-delay: 0.48s; }
.logo .i { color: #e8743a; animation-delay: 0.6s; }
@keyframes wiggle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(-2deg); }
}

.tag { font-size: 16px; opacity: 0.74; margin-bottom: 18px; letter-spacing: 0.05em; }

.pitch {
  max-width: 560px; margin: 0 auto 20px;
  font-size: 14.5px; line-height: 1.65; opacity: 0.86; text-align: left;
}
.pitch p + p { margin-top: 9px; }

.ctrlgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; text-align: left; margin-bottom: 22px;
}
.ctrlcol {
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px; padding: 13px 15px;
  min-width: 0;
}
.ctrlcol h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gruen); margin-bottom: 9px; opacity: 0.9;
}
.ctrlcol .row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; padding: 2.5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.ctrlcol .row:last-of-type { border-bottom: none; }
.ctrlcol .row b { color: var(--gold); font-weight: 600; white-space: nowrap; }
.ctrlcol .row span { opacity: 0.68; text-align: right; }
.ctrlcol .note { font-size: 11.5px; opacity: 0.55; margin-top: 9px; line-height: 1.5; }

button {
  font-family: var(--schrift);
  font-size: 16px; font-weight: bold;
  letter-spacing: 0.08em;
  padding: 13px 34px;
  border: none; border-radius: 11px;
  background: linear-gradient(160deg, var(--gruen), #5a9c3a);
  color: #08160a;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(142, 208, 106, 0.3);
  transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
}
button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(142, 208, 106, 0.42); }
button:active { transform: translateY(0); }
button.ghost {
  background: transparent; color: #cfe4c4;
  border: 1px solid var(--rand);
  box-shadow: none; font-size: 13px; padding: 9px 17px; letter-spacing: 0.04em;
}
button.ghost:hover { background: rgba(142, 208, 106, 0.11); box-shadow: none; }
button.ghost.danger { border-color: rgba(232, 84, 58, 0.45); color: #f0a898; }

.btnrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 13px; }
.hintline { font-size: 12px; opacity: 0.44; margin-top: 13px; }

/* Fokusring der Pad-Schicht (js/ui/padmenu.js). Nur Leuchten und Kontur, kein
   Layoutsprung: outline folgt dem Radius, box-shadow legt den Schein drum. */
button.fokus,
#ns-name.fokus {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(8, 22, 10, 0.6), 0 0 26px rgba(240, 194, 70, 0.55);
}
button.ghost.fokus {
  color: #fff8dc;
  border-color: rgba(240, 194, 70, 0.7);
  background: rgba(240, 194, 70, 0.1);
}
button.fokus:hover { transform: none; }
/* Im Namensfeld tippen: tuerkis statt gold, damit man sieht, dass die Tasten
   jetzt ins Feld gehen und nicht mehr den Fokus bewegen. */
#ns-name:focus { outline: 3px solid var(--tuerkis); outline-offset: 3px; box-shadow: 0 0 20px rgba(127, 232, 255, 0.4); }

.panel h2 { font-size: 26px; margin-bottom: 13px; letter-spacing: 0.05em; }
.panel h2.dead { color: var(--rot); }
#death-text { opacity: 0.75; font-size: 14px; }

.statgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px;
  font-size: 13px; text-align: left; margin: 4px 0 8px;
}
.statgrid .k { opacity: 0.6; }
.statgrid .v { text-align: right; font-weight: bold; color: var(--gruen-hell); }

@media (max-width: 620px) {
  .panel { padding: 22px 18px 20px; }
  .pitch { font-size: 13.5px; }
  #vitals { left: 14px; bottom: 14px; }
  .vbar { width: 148px; }
  .slot { width: 44px; height: 44px; font-size: 21px; }
}

/* Bildrate und Version unten rechts. Das soll man im Spiel wirklich ablesen
   koennen, nicht erraten: eigene Flaeche, klare Schrift, fester Zeichenabstand. */
#fussleiste {
  position: absolute; right: 12px; bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(8, 14, 10, 0.72);
  border: 1px solid rgba(142, 208, 106, 0.22);
  backdrop-filter: blur(3px);
  font-family: var(--schrift);
  font-size: 14px; font-weight: bold;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}
#fussleiste .trenner { opacity: 0.3; font-weight: normal; }
#fps { color: #b8e89a; min-width: 62px; text-align: right; }
#fps.mittel { color: #f0d06a; }
#fps.schlecht { color: #f08a6a; }
#version { color: rgba(232, 240, 228, 0.72); font-weight: normal; font-size: 13px; }
@media (max-width: 620px) {
  #fussleiste { font-size: 12.5px; padding: 5px 10px; bottom: 8px; right: 8px; }
  #version { font-size: 11.5px; }
}

/* Version direkt am Logo. Muss man sofort sehen, ohne zu suchen. */
.logozeile {
  display: flex; align-items: baseline; justify-content: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.verbadge {
  font-size: clamp(15px, 2.6vw, 23px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #08160a;
  background: linear-gradient(160deg, var(--gold), #d89a2a);
  padding: 5px 14px;
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(240, 194, 70, 0.32);
  white-space: nowrap;
}

/* Modus-Auswahl auf dem Startbildschirm */
.startwahl {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 4px;
}
button.wahl { min-width: 250px; }
button.wahl.zweit {
  background: linear-gradient(160deg, #6ab0e0, #3a76b0);
  box-shadow: 0 5px 18px rgba(106, 176, 224, 0.28);
}
button.wahl.fokus {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  transform: translateY(-2px);
}
.hintline b { color: var(--gold); }

/* --- Spielstaende auf dem Startbildschirm --- */
.slotliste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.slot-karte {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 15px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.08);
  text-align: left; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.slot-karte:hover { background: rgba(142, 208, 106, 0.09); }
.slot-karte.fokus { border-color: var(--gold); background: rgba(240, 194, 70, 0.11); transform: translateX(3px); box-shadow: 0 0 18px rgba(240, 194, 70, 0.35); }
.slot-karte .nr {
  font-size: 21px; font-weight: 900; color: var(--gold);
  width: 30px; text-align: center; flex-shrink: 0;
}
.slot-karte .info { flex: 1; min-width: 0; }
.slot-karte .titel { font-size: 14.5px; font-weight: bold; }
.slot-karte .unten { font-size: 11.5px; opacity: 0.6; margin-top: 2px; }
.slot-karte.leer .titel { opacity: 0.45; font-weight: normal; font-style: italic; }
.slot-karte .marke {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); white-space: nowrap;
}
.slot-karte .marke.alt { background: rgba(240, 160, 58, 0.22); color: #ffcf8a; }

.startbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
button.wahl.ghost {
  background: transparent; color: #cfe4c4;
  border: 1px solid var(--rand); box-shadow: none;
}

/* --- Neues Spiel --- */
#neuespiel { text-align: left; }
.nsTitel { font-size: 18px; margin-bottom: 14px; text-align: center; letter-spacing: 0.04em; }
.nsBlock { margin-bottom: 14px; }
.nsLabel {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gruen); opacity: 0.9; margin-bottom: 7px;
}
.wahlreihe { display: flex; gap: 6px; flex-wrap: wrap; }
.wahlknopf {
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; font-family: var(--schrift);
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
  white-space: nowrap;
}
.wahlknopf.an { border-color: currentColor; background: rgba(255, 255, 255, 0.09); font-weight: bold; transform: translateY(-2px); }
.wahlknopf.fokus { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 18px rgba(240, 194, 70, 0.45); }
.nsText { font-size: 12.5px; opacity: 0.62; margin-top: 8px; line-height: 1.5; min-height: 34px; }
#ns-name {
  font-family: var(--schrift); font-size: 14px;
  background: rgba(0, 0, 0, 0.4); color: #e8f0e4;
  border: 1px solid var(--rand); border-radius: 9px;
  padding: 8px 12px; width: 220px;
}

/* Schwierigkeit im HUD */
#modeline .stufe { opacity: 0.7; font-weight: normal; margin-left: 8px; }

/* Mikrofon-Knopf: muss man sehen, nicht suchen. Sitzt oben rechts unter der Uhr. */
#micbtn {
  position: absolute; right: 16px; top: 96px;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: rgba(12, 20, 15, 0.86);
  border: 2px solid rgba(255, 255, 255, 0.14);
  color: #e8f0e4;
  font-family: var(--schrift); font-size: 13px; font-weight: bold;
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
#micbtn:hover { transform: translateY(-1px); }
#micbtn .mi { font-size: 17px; line-height: 1; filter: grayscale(1) opacity(0.55); }
#micbtn .mz { font-variant-numeric: tabular-nums; opacity: 0.6; }
#micbtn.an { border-color: var(--gold); background: rgba(240, 194, 70, 0.16); }
#micbtn.an .mi { filter: none; animation: micpuls 2.2s ease-in-out infinite; }
#micbtn.an .mz { opacity: 1; color: var(--gold); }
#micbtn.weg { opacity: 0.35; cursor: default; }
#micbtn.weg .mi { filter: grayscale(1) opacity(0.4); }
@keyframes micpuls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
@media (max-width: 620px) { #micbtn { top: 80px; right: 12px; padding: 6px 10px; font-size: 12px; } }

/* Auf dem Startbildschirm wird gescrollt, im Spiel nicht. */
#startscreen, #pausescreen, #deathscreen {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* --- Schnellschalter Qualitaet, linker Rand ------------------------------- */
/* Wer ruckelt, will sofort runterdrehen und weiterspielen, nicht erst ein
   Menue suchen. Deshalb liegt das hier immer offen und braucht genau einen
   Klick je Stufe. */
#qualleiste {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  z-index: 30;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 7px 6px;
  border-radius: 14px;
  background: rgba(8, 14, 10, 0.62);
  border: 1px solid rgba(142, 208, 106, 0.2);
  backdrop-filter: blur(3px);
  font-family: var(--schrift);
  user-select: none;
}
#qualleiste.hidden { display: none; }
#qualleiste button {
  appearance: none; cursor: pointer;
  background: rgba(142, 208, 106, 0.1);
  border: 1px solid rgba(142, 208, 106, 0.22);
  border-radius: 8px;
  color: #cfe8bd;
  font-size: 13px; line-height: 1;
  padding: 5px 0;
  transition: background 0.12s, color 0.12s;
}
#qualleiste button:hover { background: rgba(142, 208, 106, 0.26); color: #f2ffe8; }
#qualleiste button:disabled { opacity: 0.25; cursor: default; }
#qual-stufen { display: flex; flex-direction: column; gap: 3px; }
#qual-stufen .qstufe {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(232, 240, 228, 0.62);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
#qual-stufen .qstufe:hover { background: rgba(142, 208, 106, 0.16); color: #eaf6e2; }
#qual-stufen .qstufe.an {
  background: rgba(142, 208, 106, 0.22);
  border-color: rgba(142, 208, 106, 0.45);
  color: #f2ffe8; font-weight: bold;
}
#qual-stufen .qstufe .sym { font-size: 14px; }
/* Auf schmalen Schirmen bleiben nur die Zeichen, der Name faellt weg. */
@media (max-width: 720px) {
  #qual-stufen .qstufe .txt { display: none; }
  #qualleiste { left: 6px; padding: 5px 4px; }
}

/* --- Startort waehlen ------------------------------------------------------ */
#startort { margin: 14px 0 4px; }
#startort .ortkopf {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(232, 240, 228, 0.55);
  margin-bottom: 8px;
}
#startort .ortliste {
  display: flex; flex-wrap: wrap; gap: 8px;
}
#startort .ort {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 104px; padding: 11px 14px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(142, 208, 106, 0.08);
  border: 2px solid rgba(142, 208, 106, 0.2);
  color: rgba(232, 240, 228, 0.8);
  font-family: var(--schrift);
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
#startort .ort:hover { background: rgba(142, 208, 106, 0.2); transform: translateY(-2px); }
#startort .ort.an {
  background: rgba(142, 208, 106, 0.28);
  border-color: rgba(178, 232, 132, 0.85);
  color: #f4ffee;
  box-shadow: 0 0 0 3px rgba(142, 208, 106, 0.14);
}
#startort .ort.fokus { border-color: #f0c246; box-shadow: 0 0 0 3px rgba(240, 194, 70, 0.28), 0 0 18px rgba(240, 194, 70, 0.4); }
#startort .ort .sym { font-size: 26px; line-height: 1; }
#startort .ort .nam { font-size: 14px; font-weight: bold; letter-spacing: 0.02em; }
#startort .ort .sub { font-size: 11px; opacity: 0.6; }
#startort .ort.imbau {
  cursor: default; opacity: 0.42;
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
  border-color: rgba(232, 240, 228, 0.22);
}
#startort .ort.imbau:hover { transform: none; background: rgba(255, 255, 255, 0.06); }

/* --- Kampf: Ausdauer leer, Aufladen, Paradefenster ------------------------ */
.vfill.stamina.leer { background: linear-gradient(90deg, #a83020, #d85a3a); }
#crosshair.laedt span { background: #f0d060; box-shadow: 0 0 6px #f0d060; }
#crosshair.voll span { background: #ffb04a; box-shadow: 0 0 12px #ffb04a; }
#crosshair.parade span { background: #7fe8ff; box-shadow: 0 0 10px #7fe8ff; }