/* =========================================================================
   NEXUS DATA — cyberpunk theme
   Content: German. Colors are theme-able per screen/level via --accent.
   ========================================================================= */

:root {
  --bg:        #05070e;
  --bg2:       #0a1020;
  --ink:       #d7e6ff;
  --ink-dim:   #7f93b5;
  --panel:     rgba(10, 17, 32, 0.72);
  --panel-2:   rgba(12, 20, 38, 0.9);
  --edge:      rgba(120, 220, 255, 0.22);

  --cyan:   #35e6ff;
  --green:  #39ff88;
  --purple: #b25cff;
  --pink:   #ff2fb0;
  --yellow: #ffd21f;
  /* Info-Knopf: warm und deutlich abgesetzt vom grün-blauen Rest (allgemein.md) */
  --orange:     #ff8c1a;
  --orange-hot: #ff5e1a;
  --orange-soft: rgba(255, 140, 26, .18);

  --accent: var(--cyan);          /* overridden per screen/level */
  --accent-soft: rgba(53, 230, 255, 0.15);

  --radius: 14px;
  --shadow-neon: 0 0 18px var(--accent), 0 0 40px var(--accent-soft);
}

* { box-sizing: border-box; }

/* the [hidden] attribute must always win over display rules below */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: radial-gradient(1200px 700px at 50% -10%, #0e1830 0%, var(--bg) 60%, #02030a 100%);
  color: var(--ink);
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 17px;
  overflow-x: hidden;
}

/* ---- global background layers ---- */
#bg-grid, #bg-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
#bg-grid {
  background-image:
    linear-gradient(rgba(70, 140, 200, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 140, 200, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 40%, transparent 92%);
}
#bg-scanlines {
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,0.14) 3px 4px);
  opacity: 0.35;
}

/* =========================================================================
   Screens / router
   ========================================================================= */
#app { position: relative; z-index: 1; }

.screen {
  display: none;
  min-height: 100vh;
  padding: clamp(16px, 4vw, 48px);
  animation: screen-in 0.45s ease both;
}
.screen.active { display: flex; flex-direction: column; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; letter-spacing: 1px;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 12px 22px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn:hover:not(:disabled) { box-shadow: var(--shadow-neon); transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-neon { background: linear-gradient(180deg, var(--accent-soft), transparent); color: #fff; }
.btn-ghost { border-color: var(--edge); color: var(--ink-dim); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); box-shadow: none; border-color: var(--accent); }
.btn-lg { font-size: 1.15rem; padding: 16px 36px; }
.btn-sm { font-size: .8rem; padding: 8px 14px; }

/* --- Info-Knopf: orange, leuchtend, pulsierend (story/allgemein.md) -------
   Der Schein läuft über filter: drop-shadow und NICHT über box-shadow – .btn
   hat ein clip-path, das jeden box-shadow außerhalb des Polygons abschneidet.
   Außerdem setzt .btn-ghost:hover box-shadow auf none. */
.btn-info, .btn-ghost.btn-info {
  border-color: var(--orange); color: var(--orange);
  background: var(--orange-soft);
  animation: info-pulse 1.6s ease-in-out infinite;
}
.btn-info:hover:not(:disabled), .btn-ghost.btn-info:hover:not(:disabled) {
  color: #1a0d00; background: var(--orange); border-color: var(--orange-hot);
}
@keyframes info-pulse {
  0%, 100% { border-color: var(--orange);     color: var(--orange);
             filter: drop-shadow(0 0 3px var(--orange)); }
  50%      { border-color: var(--orange-hot); color: var(--orange-hot);
             filter: drop-shadow(0 0 12px var(--orange-hot)); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-info { animation: none; filter: drop-shadow(0 0 8px var(--orange)); }
}

/* =========================================================================
   Panels / titles / bars — shared
   ========================================================================= */
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 22px 24px;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02);
}
.panel-title {
  font-family: 'Orbitron', sans-serif; font-weight: 700;
  letter-spacing: 2px; color: var(--accent);
  text-shadow: 0 0 12px var(--accent-soft);
  border-bottom: 1px solid var(--edge);
  padding-bottom: 8px; margin-bottom: 16px;
  text-align: center;
}
.panel-title.small { font-size: .85rem; letter-spacing: 1.5px; }

.section-title {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  letter-spacing: 3px; text-align: center;
  color: var(--accent); text-shadow: var(--shadow-neon);
  margin: 0 0 6px;
}
.section-sub { text-align: center; color: var(--ink-dim); margin: 0 0 16px; }

.hint { color: var(--ink-dim); font-size: .85rem; text-align: center; margin: 10px 0 0; }
.hint code, code {
  font-family: 'Share Tech Mono', monospace; color: var(--yellow);
  background: rgba(255,210,31,.08); padding: 1px 6px; border-radius: 4px;
}
.form-error { color: var(--pink); text-align: center; font-weight: 600; margin: 4px 0; }

/* progress / quality bars */
.bar-wrap { display: flex; align-items: center; gap: 10px; font-family: 'Share Tech Mono', monospace; }
.bar-label { color: var(--ink-dim); font-size: .72rem; letter-spacing: 1px; min-width: 92px; }
.bar {
  flex: 1; height: 12px; background: rgba(255,255,255,.06);
  border: 1px solid var(--edge); border-radius: 8px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #fff6);
  box-shadow: 0 0 12px var(--accent);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.bar-fill.quality { background: linear-gradient(90deg, var(--pink), var(--yellow), var(--green)); }

/* =========================================================================
   HUD + persistent controls
   ========================================================================= */
/* Zwei feste Knoepfe oben rechts: Ton (Hauptschalter) und Musik.
   .topbtn traegt das gemeinsame Aussehen, die Position kommt je Knopf. */
.audio-toggle, .music-toggle {
  position: fixed; top: 14px; z-index: 50;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--panel);
  color: var(--ink); font-size: 1.1rem; cursor: pointer;
  backdrop-filter: blur(6px);
}
.audio-toggle { right: 16px; }
.music-toggle { right: 66px; }
.audio-toggle:hover, .music-toggle:hover:not(:disabled) { box-shadow: var(--shadow-neon); }
/* Zustand nicht nur ueber das Emoji: ausgeschaltet wird sichtbar gedaempft */
.music-toggle { overflow: hidden; }
/* Aus-Zustand sichtbar: gedimmt, gestrichelt und mit Schrägstrich */
.music-toggle.is-off { opacity: .5; border-style: dashed; }
.music-toggle.is-off::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px;
  background: var(--ink); transform: translate(-50%, -50%) rotate(-45deg); opacity: .85;
}
.music-toggle:disabled { opacity: .25; cursor: default; }

.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 116px 8px 18px;
  background: linear-gradient(180deg, rgba(5,8,18,.92), transparent);
  font-family: 'Share Tech Mono', monospace;
}
.hud-avatar-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.hud-avatar-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top center; border: 1px solid var(--accent); }
.hud-right { display: flex; gap: 18px; }
.hud-stat { color: var(--accent); font-size: 1rem; }

/* =========================================================================
   START screen
   ========================================================================= */
#screen-start {
  align-items: center; justify-content: center; text-align: center;
  --accent: var(--purple); --accent-soft: rgba(178,92,255,.18);
  position: relative;
}
/* Hintergrund = leuchtende Cyberpunk-Stadt. Der Mockup hat UI-Texte (inkl. „NEXUS DATA")
   eingebrannt; ein leichter Blur + zentrale Abdunklung maskiert diese, sodass der HTML-Titel
   nur EINMAL sauber erscheint und die Neon-Skyline an den Rändern klar leuchtet. */
/* Das Mockup hat Titel, Zielring, Button UND alle HUD-Ecktexte fest eingebrannt.
   Gezeigt wird deshalb der ZOOM auf die untere Bildhälfte: leuchtende Skyline und
   nasse Straße sind klar sichtbar, der eingebrannte Titelbereich liegt außerhalb
   des Ausschnitts. So bleibt die Stadt erkennbar (Spec „kein leerer, schwarzer
   Hintergrund") und der HTML-Titel erscheint trotzdem nur ein einziges Mal. */
#screen-start::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../media/startseite.jpeg') 50% 96% / 195% auto no-repeat;
  filter: brightness(.82) saturate(1.25) blur(1px);
}
#screen-start::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Mittelspalte deckend (dort liegen der eingebrannte Titel, der Zielring und
     der „SPIEL STARTEN"-Button), Ränder bleiben hell – so ist die Skyline zu
     sehen und trotzdem nichts doppelt. */
  background:
    radial-gradient(ellipse 46% 62% at 50% 45%,
      rgba(3,4,12,.985) 0%, rgba(3,4,12,.96) 42%, rgba(3,4,12,.6) 74%, transparent 100%),
    linear-gradient(180deg, rgba(3,4,12,.5) 0%, rgba(3,4,12,.1) 42%, rgba(3,4,12,.62) 100%);
}
.start-inner { position: relative; z-index: 1; max-width: 720px; }
.logo {
  font-family: 'Orbitron', sans-serif; font-weight: 900; margin: 0;
  line-height: .92; letter-spacing: 6px;
}
.logo-nexus { display: block; font-size: clamp(3rem, 12vw, 7rem); color: var(--purple);
  text-shadow: 0 0 18px var(--purple), 0 0 60px rgba(178,92,255,.5); }
.logo-data { display: block; font-size: clamp(1.6rem, 6vw, 3.4rem); color: var(--cyan);
  letter-spacing: clamp(10px, 5vw, 34px); text-shadow: 0 0 18px var(--cyan); }
.logo-ring {
  width: 90px; height: 90px; margin: 18px auto 6px; border-radius: 50%;
  border: 2px solid var(--cyan); position: relative; box-shadow: 0 0 24px var(--cyan);
}
.logo-ring::before, .logo-ring::after {
  content: ""; position: absolute; inset: 0; margin: auto; border-radius: 50%;
}
.logo-ring::before { width: 52px; height: 52px; border: 2px solid var(--pink); box-shadow: 0 0 16px var(--pink); }
.logo-ring::after { width: 14px; height: 14px; background: #fff; box-shadow: 0 0 18px #fff; }
.tagline { font-size: 1.2rem; color: var(--ink); margin: 6px 0 24px; }
/* Namensnennung für Fremd-Assets (CC BY). Erscheint nur, wenn das Asset
   wirklich ausgeliefert wird. */
.attrib { color: var(--ink-dim); font-size: .72rem; letter-spacing: .5px; margin: 6px 0 0; opacity: .8; }
.credits { margin: 12px 0 2px; color: var(--ink-dim); font-size: .85rem; letter-spacing: 1px; }
.start-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* HUD-flavor corners */
.corner {
  position: absolute; z-index: 2;
  font-family: 'Share Tech Mono', monospace; font-size: .72rem;
  color: rgba(53,230,255,.7); line-height: 1.5;
}
.corner-tl { top: 18px; left: 20px; writing-mode: vertical-rl; color: rgba(255,47,176,.8); letter-spacing: 2px; }
/* rechts an den beiden festen Knöpfen (Musik + Ton) vorbei */
.corner-tr { top: 18px; right: 116px; text-align: right; }
.corner-bl { bottom: 18px; left: 20px; }
.corner-br { bottom: 18px; right: 20px; text-align: right; }
.blink-warn { color: var(--pink); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
/* Instabile-Verbindungs-Status: Neon + realistisches Glitch-Flackern */
#start-connection { color: rgba(53,230,255,.9); text-shadow: 0 0 8px rgba(53,230,255,.7); animation: flicker 3.2s infinite; }
@keyframes flicker {
  0%,18%,22%,25%,53%,57%,83%,100% { opacity: 1; }
  20%,24%,55% { opacity: .3; }
  84%,86% { opacity: .55; }
}

/* =========================================================================
   LOGIN screen
   ========================================================================= */
#screen-login {
  align-items: center; justify-content: center; position: relative;
  --accent: var(--cyan); --accent-soft: rgba(53,230,255,.18);
}
#screen-login::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(53,230,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,230,255,.05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 80%);
}
.login-panel { width: min(560px, 92vw); text-align: center; border-color: var(--cyan); box-shadow: 0 0 40px rgba(53,230,255,.15), inset 0 0 30px rgba(0,0,0,.4); }
.login-lead { font-size: 1.35rem; font-weight: 600; margin: 6px 0 20px; }
.code-input {
  width: 100%; text-align: center; font-family: 'Share Tech Mono', monospace;
  font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: .3em; color: var(--cyan);
  background: rgba(0,0,0,.4); border: 2px solid var(--cyan); border-radius: 12px;
  padding: 14px; text-transform: uppercase; box-shadow: inset 0 0 20px rgba(53,230,255,.25);
}
.code-input:focus { outline: none; box-shadow: 0 0 24px var(--cyan), inset 0 0 20px rgba(53,230,255,.3); }
.name-input {
  width: 100%; margin-top: 12px; text-align: center; font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem; color: var(--ink); background: rgba(0,0,0,.35);
  border: 1px solid var(--edge); border-radius: 10px; padding: 10px;
}
.name-input:focus { outline: none; border-color: var(--cyan); }
#btn-login { margin-top: 18px; }
.login-panel .deco { display: none; }
.deco { position: absolute; font-size: clamp(2.4rem, 7vw, 4.5rem); opacity: .28; z-index: -1;
  filter: drop-shadow(0 0 14px var(--cyan)); }
.deco-pigeon { top: 12%; left: 8%; }
.deco-chest  { bottom: 10%; left: 10%; }
.deco-maze   { top: 14%; right: 9%; }
.deco-key    { bottom: 12%; right: 10%; }

/* =========================================================================
   AVATAR screen
   ========================================================================= */
#screen-avatar { --accent: var(--yellow); --accent-soft: rgba(255,210,31,.18); }
.avatar-head { text-align: center; }
.avatar-layout {
  display: grid; grid-template-columns: 200px 1fr 220px; gap: 18px;
  align-items: start; margin: 10px auto; width: min(1180px, 100%);
}
.side-panel { min-height: 260px; }
.abilities { list-style: none; padding: 0; margin: 0; }
.abilities li {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px dashed var(--edge); font-weight: 600;
}
.abilities li .ab-ico { color: var(--accent); font-size: 1.2rem; }
.avatar-info { line-height: 1.5; }

.avatar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.avatar-card {
  --c: var(--cyan);
  background: var(--panel); border: 1.5px solid var(--c); border-radius: var(--radius);
  padding: 12px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.avatar-card:hover { transform: translateY(-4px); box-shadow: 0 0 26px var(--c); }
.avatar-card.selected { box-shadow: 0 0 30px var(--c), inset 0 0 30px rgba(0,0,0,.4); transform: translateY(-4px); }
/* Eck-Band „AUSGEWÄHLT ✓".
   Vorher stand es bei top:22px und schwang durch die 35°-Drehung mit dem
   linken Ende über die obere Kartenkante – die Karte hat overflow:hidden,
   also fehlten die ersten Buchstaben („…GEWÄHLT ✓"). Das Band sitzt jetzt
   tiefer und weiter innen, damit das ganze Wort im sichtbaren Bereich liegt. */
.avatar-card.selected::after {
  content: "AUSGEWÄHLT ✓"; position: absolute; top: 40px; right: -46px;
  width: 200px; text-align: center;
  background: var(--c); color: #04060c; font-family: 'Orbitron'; font-weight: 700;
  font-size: .62rem; letter-spacing: 1px; padding: 5px 10px; transform: rotate(35deg);
  transform-origin: center; box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.avatar-portrait {
  width: 100%; aspect-ratio: 29/37; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 1px solid var(--c); background: #05080f;
}
/* Lerntyp direkt über dem Namen, in der Farbe des Avatars (story/avatar.md) */
.avatar-learn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 0;
}
.avatar-learn-tag {
  font-family: 'Orbitron'; font-size: .6rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--c);
  border: 1px solid var(--c); border-radius: 999px; padding: 2px 10px;
  background: rgba(255,255,255,.04);
}
.avatar-learn-btn {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid var(--c); color: var(--c);
  font-size: .85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.avatar-learn-btn:hover, .avatar-learn-btn:focus-visible {
  background: var(--c); color: #04060c; box-shadow: 0 0 12px var(--c);
}
.avatar-name { font-family: 'Orbitron'; font-weight: 900; text-align: center; margin: 6px 0 0; color: var(--c); letter-spacing: 2px; }
.avatar-role { text-align: center; color: var(--ink-dim); font-size: .8rem; letter-spacing: 2px; margin: 2px 0 8px; }
.avatar-skills { list-style: none; padding: 0; margin: 0 0 12px; font-size: .9rem; }
.avatar-skills li::before { content: "› "; color: var(--c); }
/* Der „AUSWÄHLEN"-Knopf ist entfallen – die Karte selbst ist das
   Bedienelement. Ohne sichtbaren Fokusring wäre der Tastaturweg blind. */
.avatar-card:focus-visible {
  outline: 3px solid var(--c); outline-offset: 3px;
  box-shadow: 0 0 26px var(--c);
}
.avatar-footer { display: flex; justify-content: space-between; margin-top: 8px; width: min(1180px, 100%); margin-inline: auto; }

/* =========================================================================
   INTRO screen
   ========================================================================= */
#screen-intro { align-items: center; justify-content: center; --accent: var(--yellow); --accent-soft: rgba(255,210,31,.16); }
.intro-panel { width: min(820px, 94vw); }
.intro-text { font-size: 1.28rem; line-height: 1.6; min-height: 8.5em; }
.intro-text .cursor { color: var(--accent); animation: blink 1s steps(2) infinite; }
.intro-quote {
  border-left: 3px solid var(--yellow); margin: 18px 0 0; padding: 12px 18px;
  color: var(--yellow); font-style: italic; font-size: 1.25rem;
  background: rgba(255,210,31,.06); animation: screen-in .6s ease both;
}
.intro-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }

/* =========================================================================
   MAP screen
   ========================================================================= */
#screen-map { --accent: var(--cyan); --accent-soft: rgba(53,230,255,.16); padding-top: 60px; }
.map-head { text-align: center; }
.map-progress { width: min(560px, 90vw); margin: 12px auto 0; }
/* Layout: gewählter Avatar links, Kacheln rechts */
.map-body { display: flex; gap: 18px; align-items: stretch; width: min(1120px, 100%); margin: 22px auto; flex: 1; }
.map-avatar {
  --c: var(--cyan); flex: 0 0 172px; align-self: flex-start;
  background: var(--panel); border: 1.5px solid var(--c); border-radius: var(--radius);
  padding: 14px; text-align: center; box-shadow: inset 0 0 26px rgba(0,0,0,.4), 0 0 22px var(--accent-soft);
}
.map-avatar-img { width: 100%; aspect-ratio: 29/37; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 1px solid var(--c); background: #05080f; }
.map-avatar-name { font-family: 'Orbitron'; font-weight: 900; letter-spacing: 2px; color: var(--c); margin-top: 8px; }
.map-avatar-role { color: var(--ink-dim); font-size: .72rem; letter-spacing: 2px; }

.map-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; flex: 1; align-content: start;
}
.map-tile {
  --c: var(--green);
  position: relative; background: var(--panel); border: 1.5px solid var(--c);
  border-radius: var(--radius); padding: 14px 14px 12px; cursor: pointer; overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; gap: 2px;
}
.map-tile:hover:not(.locked) { transform: translateY(-4px); box-shadow: 0 0 26px var(--c); }
.map-tile.locked { cursor: not-allowed; opacity: .5; filter: grayscale(.5); border-color: var(--edge); }
.map-tile.done { border-style: double; }
.tile-num { font-family: 'Orbitron'; font-size: 1.9rem; font-weight: 900; color: var(--c); text-shadow: 0 0 14px var(--c); line-height: 1; }
.tile-title { font-family: 'Orbitron'; font-weight: 700; letter-spacing: 1px; margin: 4px 0 0; font-size: .98rem; }
.tile-sub { color: var(--c); font-family: 'Rajdhani'; font-weight: 600; font-size: 1.05rem; line-height: 1.2; margin: 2px 0 6px; }
.tile-status { font-family: 'Share Tech Mono', monospace; font-size: .78rem; margin-top: auto; }
.tile-status.s-done { color: var(--green); }
.tile-status.s-open { display: inline-block; color: #04060c; background: var(--c); font-weight: 700;
  padding: 3px 12px; border-radius: 6px; box-shadow: 0 0 12px var(--c); align-self: flex-start; }
.tile-status.s-lock { color: var(--ink-dim); }
.tile-badge { position: absolute; top: 10px; right: 12px; font-size: 1.3rem; }
.map-footer { display: flex; justify-content: space-between; width: min(1120px, 100%); margin: 0 auto; }

@media (max-width: 720px) {
  .map-body { flex-direction: column; }
  .map-avatar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; text-align: left; }
  .map-avatar-img { width: 64px; }
}

/* =========================================================================
   LEVEL host
   ========================================================================= */
#screen-level { padding-top: 60px; }
.level-frame {
  width: min(980px, 100%); margin: 0 auto; background: var(--panel);
  border: 1.5px solid var(--accent); border-radius: var(--radius);
  padding: clamp(16px, 3vw, 30px); box-shadow: 0 0 40px var(--accent-soft), inset 0 0 40px rgba(0,0,0,.4);
  position: relative; overflow: hidden;
}
.level-eyebrow { font-family: 'Orbitron'; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-shadow: 0 0 12px var(--accent-soft); }
.level-subtitle { color: var(--ink-dim); letter-spacing: 3px; font-size: .85rem; text-transform: uppercase; }
.level-story { font-size: 1.08rem; line-height: 1.55; margin: 14px 0; border-left: 3px solid var(--accent); padding-left: 14px; }
.level-meta { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }

/* --- Aufgabenübersicht (ab v0.9.0) ---------------------------------------
   Nummerierte Schritte statt einer Aufzählung: der aktuelle Schritt ist
   hervorgehoben, erledigte sind abgehakt. Hilfe steht direkt daneben. */
.level-taskcard {
  flex: 1 1 340px; min-width: 280px;
  border: 1px solid var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.03);
}
.level-taskcard-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 8px;
}
.level-taskcard-title {
  font-family: 'Orbitron'; font-size: .74rem; letter-spacing: 1.5px; color: var(--accent);
}
.level-tasks { list-style: none; padding: 0; margin: 0; font-size: .92rem; color: var(--ink-dim); }
.level-tasks li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.level-task-nr {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Orbitron'; font-size: .7rem; font-weight: 700;
  background: rgba(255,255,255,.08); color: var(--ink-dim);
  border: 1px solid var(--accent-soft);
}
.level-task-nr.is-goal { background: none; border: none; font-size: .95rem; }
.level-tasks li.is-current { color: var(--ink); font-weight: 600; }
.level-tasks li.is-current .level-task-nr {
  background: var(--accent); color: #0d0d11; border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
}
.level-tasks li.done { color: var(--ink); }
/* Erledigt: die Nummer weicht dem Haken – Zustand nie nur über Farbe. */
.level-tasks li.done .level-task-nr {
  background: var(--green); color: #06210f; border-color: var(--green); font-size: 0;
}
.level-tasks li.done .level-task-nr::after { content: "✔"; font-size: .8rem; }
.level-tasks li.done .level-task-nr.is-goal { background: none; border: none; }
.level-tasks li.done .level-task-nr.is-goal::after { color: var(--green); font-size: .95rem; }
.level-bonushint {
  margin: 8px 0 0; font-size: .82rem; line-height: 1.4; color: var(--yellow);
  border-top: 1px dashed rgba(255,255,255,.12); padding-top: 7px;
}
.level-bonushint.is-done { color: var(--green); }

.level-bars { min-width: 240px; flex: 0 1 300px; }
/* Eigener Stacking-Context: alles, was ein Level intern übereinanderlegt
   (Panels, Award-Overlays, Navigation), bleibt damit garantiert UNTER dem
   Erfolgs-Overlay. Ohne diese Zeile deckte das Level-4-Award-Panel den
   „ZUM FINALE"-Knopf zu und machte ihn unklickbar. */
.level-body { margin: 8px 0 4px; position: relative; z-index: 0; }
.level-footer { display: flex; justify-content: space-between; margin-top: 18px; }
.level-help { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Instruktions-Banner (gemeinsam, akzentgefärbt) ---------------------- */
.instr-banner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 1.1rem; font-weight: 700; line-height: 1.35;
  color: var(--ink); background: var(--accent-soft);
  border: 1.5px solid var(--accent); border-radius: 12px; padding: 11px 15px;
  box-shadow: 0 0 16px var(--accent-soft);
}
.instr-banner-ico { font-size: 1.35rem; flex: 0 0 auto; }
.instr-banner.is-done { border-color: var(--green); color: #d8ffe9; box-shadow: 0 0 14px rgba(57,255,136,.3); }

/* --- Ruhige Hinweiszeile: „nur zum Verständnis, keine Aufgabe" (Level 1) --- */
.instr-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  border: 1px dashed var(--edge); background: rgba(255,255,255,.03);
  font-size: 1.02rem; line-height: 1.4; color: var(--ink);
}
.instr-note-ico { font-size: 1.2rem; flex: 0 0 auto; }
.instr-note-txt { flex: 1 1 240px; }
.instr-note-bonus { font-size: .84rem; color: var(--yellow); flex-basis: 100%; margin: 0; }

/* --- Ansage-Block: Überschrift + nummerierte Schritte (Level 2) ---------- */
.instr-brief {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 16px var(--accent-soft);
}
.instr-brief-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Orbitron'; font-weight: 700; font-size: 1.05rem; letter-spacing: 1px;
  color: var(--ink); text-transform: uppercase;
}
.instr-brief-ico { font-size: 1.3rem; }
.instr-brief-steps { margin: 8px 0 8px 4px; padding-left: 22px; font-size: 1rem; line-height: 1.5; }
.instr-brief-steps li { padding: 1px 0; }
.instr-brief-steps li::marker { color: var(--accent); font-weight: 700; }
/* --- Entscheidungsfrage: groß, fett, unübersehbar (Spec Level 2) --------- */
.instr-question {
  display: flex; align-items: flex-start; gap: 11px; margin: 12px 0 10px;
  font-size: 1.15rem; font-weight: 700; line-height: 1.4;
  color: var(--ink); background: var(--accent-soft);
  border: 2px solid var(--accent); border-radius: 12px; padding: 13px 16px;
  box-shadow: 0 0 18px var(--accent-soft);
}
.instr-question-ico { font-size: 1.4rem; flex: 0 0 auto; line-height: 1.2; }

/* --- Gleichwertige Auswahl: zwei Optionen, keine verrät die Lösung -------
   Beide Knöpfe sind identisch gestaltet; unterschieden werden sie nur durch
   das Buchstaben-Badge und den Text. Muster wie .city-btn in Level 4.      */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.choice-btn {
  cursor: pointer; text-align: left; background: rgba(0,0,0,.3);
  border: 2px solid var(--accent); color: var(--ink); border-radius: 11px;
  padding: 13px 14px; min-height: 62px;
  display: flex; align-items: center; gap: 11px;
  font-family: 'Rajdhani', sans-serif; font-size: .96rem; line-height: 1.35;
  transition: transform .12s, box-shadow .2s, background .2s;
}
.choice-btn-badge {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
  font-family: 'Orbitron'; font-weight: 700; font-size: .82rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.choice-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px var(--accent-soft); }
.choice-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* bereits erfolglos probiert – sichtbar, aber weiter benutzbar */
.choice-btn.is-tried { opacity: .55; border-style: dashed; }
.choice-btn.is-tried .choice-btn-badge::after { content: " ✖"; }
@media (max-width: 720px) { .choice-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .choice-btn:hover:not(:disabled) { transform: none; } }

.instr-brief-foot {
  border-top: 1px dashed rgba(255,255,255,.2); padding-top: 7px;
  font-family: 'Share Tech Mono', monospace; font-size: .85rem; letter-spacing: 1px;
  color: var(--accent);
}

/* --- generic mini-task widgets used inside levels --- */
.data-table { width: 100%; border-collapse: collapse; font-family: 'Share Tech Mono', monospace; font-size: .9rem; }
.data-table th, .data-table td { border: 1px solid var(--edge); padding: 8px 10px; text-align: left; }
.data-table th { color: var(--accent); background: rgba(255,255,255,.03); letter-spacing: 1px; }
.data-table td.cell { cursor: pointer; transition: background .15s; }
.data-table td.cell:hover { background: var(--accent-soft); }
.data-table td.bad-selected { outline: 2px solid var(--pink); background: rgba(255,47,176,.12); }
.data-table td.fixed { color: var(--green); background: rgba(57,255,136,.12); }

.field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.field-row label { color: var(--ink-dim); font-size: .85rem; min-width: 110px; }
.field-row select, .field-row input[type="text"], .field-row input[type="number"] {
  flex: 1; min-width: 180px; background: rgba(0,0,0,.4); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 8px; padding: 9px 11px;
  font-family: 'Share Tech Mono', monospace;
}
.field-row select:focus, .field-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--accent-soft); }

.token-hint { font-family: 'Share Tech Mono', monospace; color: var(--yellow); background: rgba(255,210,31,.08);
  border: 1px dashed var(--yellow); border-radius: 8px; padding: 8px 12px; display: inline-block; margin: 4px 0; }

.code-out {
  font-family: 'Share Tech Mono', monospace; font-size: .85rem; white-space: pre;
  background: #04070f; border: 1px solid var(--edge); border-radius: 10px;
  padding: 14px; overflow: auto; max-height: 260px; color: var(--green);
}
.code-out.err { color: var(--pink); border-color: var(--pink); }
.json-key { color: var(--cyan); } .json-str { color: var(--yellow); }
.json-num { color: var(--green); } .json-bool { color: var(--pink); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.choice-card {
  background: rgba(0,0,0,.3); border: 1.5px solid var(--edge); border-radius: 12px;
  padding: 14px; cursor: pointer; transition: transform .12s, box-shadow .2s, border-color .2s;
}
.choice-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.choice-card.selected { border-color: var(--accent); box-shadow: 0 0 22px var(--accent-soft); }
.choice-card h4 { font-family: 'Orbitron'; margin: 0 0 8px; font-size: .95rem; color: var(--accent); }
.choice-card .meta { font-family: 'Share Tech Mono', monospace; font-size: .78rem; color: var(--ink-dim); line-height: 1.7; }
.choice-card .chk { color: var(--green); } .choice-card .xmk { color: var(--pink); }

/* =========================================================================
   Level 3: Das Labyrinth der Lügen
   Dreistufiges Urteil + Fakten-Check, Avatar-Navigation (Mini-Map + Korridor),
   Schatztruhen-Finale. Alles ohne zusätzliche Bild-Assets.
   ========================================================================= */
.lb-root {
  --lb-bg: #0a0e17; --lb-cyan: #00f3ff; --lb-gold: #ffd700;
  --v-ok: #39ff14; --v-unclear: #f59e0b; --v-bad: #ef4444;
  position: relative; border-radius: 14px; padding: 12px;
  background:
    repeating-linear-gradient(0deg,  rgba(0,243,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(0,243,255,.05) 0 1px, transparent 1px 34px),
    var(--lb-bg);
  border: 1px solid rgba(0,243,255,.14);
}
.lb-hud {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 10px;
  font-family: 'Share Tech Mono', monospace; font-size: .82rem; color: var(--lb-cyan);
}
.lb-hud b { color: var(--lb-gold); font-weight: 700; }
.lb-hud .lb-score { margin-left: auto; color: var(--lb-gold); }
.lb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lb-stage { position: relative; display: grid; grid-template-columns: 1fr 250px; gap: 12px; margin-bottom: 12px; }
.lb-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 12px;
  background: url('../media/labyrinth.jpeg') center/cover no-repeat;
  opacity: .14; filter: blur(2px) saturate(.45); transition: opacity .8s, filter .8s;
}
.lb-root.finale-on .lb-stage::before { opacity: .3; filter: blur(1px) saturate(1.1); }

/* --- Korridor / Ego-Ansicht --------------------------------------------- */
.lb-corridor {
  position: relative; z-index: 1; height: clamp(300px, 42vh, 400px); overflow: hidden;
  border: 1px solid rgba(255,215,0,.3); border-radius: 12px; background: #04060d;
  perspective: 640px; perspective-origin: 50% 46%;
}
.lb-tunnel { position: absolute; inset: 0; transform-style: preserve-3d; }
.lb-surface { position: absolute; }
.lb-wall-l, .lb-wall-r {
  top: 0; height: 100%; width: 1200px;
  background:
    repeating-linear-gradient(90deg, rgba(255,215,0,.55) 0 2px, transparent 2px 96px),
    linear-gradient(180deg, rgba(0,243,255,.1), rgba(0,0,0,.85));
}
.lb-wall-l { left: 0;  transform-origin: left center;  transform: rotateY(72deg); }
.lb-wall-r { right: 0; transform-origin: right center; transform: rotateY(-72deg); }
.lb-floor, .lb-ceil {
  left: -40%; width: 180%; height: 520px;
  background:
    repeating-linear-gradient(0deg, rgba(0,243,255,.22) 0 2px, transparent 2px 80px),
    linear-gradient(180deg, rgba(0,243,255,.06), transparent);
}
.lb-floor { bottom: 0; transform-origin: center bottom; transform: rotateX(74deg); }
.lb-ceil  { top: 0;    transform-origin: center top;    transform: rotateX(-74deg); opacity: .5; }
.lb-vanish {
  position: absolute; left: 50%; top: 46%; width: 220px; height: 160px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .7;
  background: radial-gradient(circle, rgba(255,215,0,.35), transparent 68%); filter: blur(6px);
}
.lb-hero {
  position: absolute; left: 50%; bottom: 8%; width: clamp(72px, 13%, 104px); z-index: 3;
  transform: translateX(-50%); filter: drop-shadow(0 0 16px var(--lb-cyan));
}
.lb-station {
  position: absolute; top: 10px; left: 12px; z-index: 4; font-family: 'Share Tech Mono', monospace;
  font-size: .74rem; color: var(--lb-gold); background: rgba(3,6,14,.66);
  border: 1px solid rgba(255,215,0,.35); padding: 3px 10px; border-radius: 8px;
}
.lb-card {
  position: absolute; left: 50%; top: 40%; z-index: 4; width: min(400px, 84%);
  transform: translate(-50%, -50%); text-align: left;
  background: rgba(6,10,22,.93); border: 1.5px solid var(--lb-cyan); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 0 26px rgba(0,243,255,.3); opacity: 0;
}
.lb-card.in  { animation: lb-card-in  .45s cubic-bezier(.2,.9,.3,1) both; }
.lb-card.out { animation: lb-card-out .3s ease both; }
.lb-start {
  position: absolute; inset: 0; z-index: 6; cursor: pointer; display: flex;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(3,6,14,.6); backdrop-filter: blur(1px); transition: opacity .4s;
  font-family: 'Orbitron'; font-size: 1.05rem; color: var(--lb-gold); text-shadow: 0 0 16px rgba(255,215,0,.5);
}
.lb-start.gone { opacity: 0; pointer-events: none; }
.lb-start .lb-big { display: block; font-size: 2.6rem; margin-bottom: 8px; }

@keyframes lb-run-wall  { from { background-position-x: 0; }   to { background-position-x: -576px; } }
@keyframes lb-run-floor { from { background-position-y: 0; }   to { background-position-y: 480px; } }
@keyframes lb-run-glow  { 0%,100% { opacity: .7; } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.35); } }
@keyframes lb-bob       { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
@keyframes lb-card-in   { from { opacity: 0; transform: translate(-50%,-50%) scale(.72) rotateX(18deg); }
                          to   { opacity: 1; transform: translate(-50%,-50%) scale(1) rotateX(0); } }
@keyframes lb-card-out  { to { opacity: 0; transform: translate(-50%,-50%) scale(.6); } }
.lb-corridor.running .lb-wall-l,
.lb-corridor.running .lb-wall-r { animation: lb-run-wall 1.05s linear; }
.lb-corridor.running .lb-floor,
.lb-corridor.running .lb-ceil   { animation: lb-run-floor 1.05s linear; }
.lb-corridor.running .lb-vanish { animation: lb-run-glow 1.05s ease-in-out; }
.lb-corridor.running .lb-hero   { animation: lb-bob .34s ease-in-out infinite; }

/* --- Mini-Map (Vogelperspektive) ---------------------------------------- */
.lb-map {
  position: relative; z-index: 1; aspect-ratio: 1 / 1; align-self: start;
  border: 1px solid rgba(0,243,255,.3); border-radius: 12px; background: rgba(4,7,15,.86); overflow: hidden;
}
.lb-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); }
.lb-cell { border: 1px solid rgba(0,243,255,.06); }
.lb-cell.wall { background: rgba(255,215,0,.22); box-shadow: inset 0 0 8px rgba(255,215,0,.35); }
.lb-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-trail polyline {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  transition: stroke-dashoffset .95s cubic-bezier(.3,.8,.3,1);
}
.lb-trail .glow { stroke: var(--lb-cyan); stroke-width: 26; opacity: .35; filter: blur(4px); animation: lb-trail-pulse 2.4s ease-in-out infinite; }
.lb-trail .core { stroke: var(--lb-cyan); stroke-width: 8; filter: drop-shadow(0 0 6px var(--lb-cyan)); }
@keyframes lb-trail-pulse { 50% { opacity: .6; } }
.lb-goal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 1.5rem; filter: drop-shadow(0 0 10px var(--lb-gold)); z-index: 2;
}
.lb-pawn {
  position: absolute; width: 14.2857%; aspect-ratio: 1 / 1; z-index: 3;
  transform: translate(-50%,-50%);
  transition: left .95s cubic-bezier(.3,.8,.3,1), top .95s cubic-bezier(.3,.8,.3,1);
}
.lb-pawn img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: 50%; border: 2px solid var(--av, var(--lb-cyan));
  box-shadow: 0 0 12px var(--av, var(--lb-cyan)); background: #04060d;
}
.lb-maplabel {
  position: absolute; left: 6px; right: 6px; bottom: 5px; text-align: center;
  font-family: 'Share Tech Mono', monospace; font-size: .64rem; color: var(--lb-cyan);
  background: rgba(3,6,14,.72); border-radius: 6px; padding: 2px 4px;
}

/* --- Arbeitsbereich: Meldung, Fakten-Check, Urteil ----------------------- */
.lb-panel { background: rgba(4,7,15,.7); border: 1px solid rgba(0,243,255,.16); border-radius: 12px; padding: 12px 14px; }
.lb-post { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.lb-post-ico {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--edge);
}
.lb-post-name { font-family: 'Rajdhani'; font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.lb-verified { color: #35b6ff; }
.lb-unverified {
  color: var(--ink-dim); font-size: .8rem; border: 1px solid var(--edge); border-radius: 50%;
  width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
}
.lb-post-theme { font-family: 'Share Tech Mono', monospace; font-size: .7rem; color: var(--ink-dim); }
.lb-post-text { margin: 6px 0 0; line-height: 1.5; }

.lb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.lb-fact {
  background: rgba(0,243,255,.05); border: 1px solid rgba(0,243,255,.22);
  border-radius: 10px; padding: 8px 11px; animation: lb-fact-in .35s ease both;
}
.lb-fact:nth-child(1) { animation-delay: 0s; }
.lb-fact:nth-child(2) { animation-delay: .08s; }
.lb-fact:nth-child(3) { animation-delay: .16s; }
.lb-fact:nth-child(4) { animation-delay: .24s; }
.lb-fact-lbl { font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--lb-cyan); letter-spacing: .5px; margin-bottom: 3px; }
.lb-fact-txt { font-size: .88rem; line-height: 1.45; color: var(--ink); }
@keyframes lb-fact-in { from { opacity: 0; transform: translateY(6px); } }

.lb-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.lb-verdict {
  --v: var(--edge); cursor: pointer; text-align: center; line-height: 1.25;
  background: rgba(0,0,0,.32); border: 2px solid var(--v); color: var(--v);
  border-radius: 11px; padding: 10px 8px; font-family: 'Orbitron'; font-size: .74rem;
  letter-spacing: .5px; transition: transform .12s, box-shadow .2s, background .2s;
}
.lb-verdict .lb-verdict-ico { display: block; font-size: 1.3rem; margin-bottom: 4px; }
.lb-verdict .lb-verdict-key { display: block; font-family: 'Share Tech Mono', monospace; font-size: .64rem; opacity: .6; margin-top: 4px; }
.lb-verdict:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px var(--v); }
.lb-verdict:disabled { opacity: .4; cursor: default; }
/* kein color-mix() – ältere Schul-Laptops; JS setzt --v-soft passend zur Stufe */
.lb-verdict.is-correct { background: var(--v-soft, rgba(255,255,255,.12)); box-shadow: 0 0 24px var(--v); opacity: 1; }
.lb-verdict.shake { animation: shake .5s; }

.lb-help { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lb-help .pulse { animation: cta-pulse 1.4s infinite; }
.lb-help .used { opacity: .55; }
.lb-result {
  margin-top: 11px; border-left: 3px solid var(--v-ok); background: rgba(57,255,20,.07);
  border-radius: 0 9px 9px 0; padding: 10px 13px; animation: lb-fact-in .3s ease both;
}
.lb-result-txt { line-height: 1.5; margin: 0 0 9px; }
.lb-modal-note { color: var(--ink-dim); font-size: .85rem; border-top: 1px dashed var(--edge); padding-top: 8px; margin-top: 10px; }

/* --- Finale: Truhe, Golden Record, Partikel ------------------------------ */
.lb-finale {
  position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 18px;
  background: radial-gradient(circle at 50% 55%, rgba(255,215,0,.16), rgba(3,6,14,.94) 70%);
  animation: screen-in .4s ease both;
}
.lb-chest { position: relative; width: 120px; height: 100px; perspective: 420px; }
.lb-chest-box {
  position: absolute; left: 0; bottom: 0; width: 120px; height: 58px; border-radius: 6px;
  background: linear-gradient(180deg,#7a5b00,#2b2000); border: 2px solid var(--lb-gold);
  animation: lb-chest-glow 1.6s ease-in-out infinite;
}
.lb-chest-lid {
  position: absolute; left: 0; bottom: 56px; width: 120px; height: 44px;
  border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg,var(--lb-gold),#8a6a00);
  border: 2px solid var(--lb-gold); transform-origin: 50% 100%; transform: rotateX(0);
  transition: transform .7s cubic-bezier(.3,1.4,.4,1);
}
.lb-finale.open .lb-chest-lid { transform: rotateX(-118deg); }
@keyframes lb-chest-glow {
  0%,100% { box-shadow: 0 0 18px rgba(255,215,0,.45), inset 0 0 18px rgba(0,243,255,.25); }
  50%     { box-shadow: 0 0 40px rgba(255,215,0,.9), 0 0 70px rgba(0,243,255,.5), inset 0 0 18px rgba(0,243,255,.25); }
}
.lb-record {
  position: absolute; left: 50%; bottom: 34px; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; opacity: 0;
  background: radial-gradient(circle, #0a0e17 20%, var(--lb-gold) 22%, #0a0e17 34%, var(--lb-gold) 36%, #0a0e17 52%, var(--lb-gold) 54%);
  box-shadow: 0 0 26px var(--lb-gold); transform: translateX(-50%);
}
.lb-finale.open .lb-record { animation: lb-key-rise 1.3s .55s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes lb-key-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(.3) rotate(0deg); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(-120px) scale(1) rotate(360deg); }
}
.lb-spark {
  position: absolute; left: 50%; bottom: 70px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc, var(--lb-gold)); box-shadow: 0 0 10px var(--sc, var(--lb-gold)); opacity: 0;
}
.lb-finale.open .lb-spark { animation: lb-spark var(--dur,1.1s) var(--del,0s) ease-out forwards; }
@keyframes lb-spark {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.2); }
}
.lb-finale-title { font-family: 'Orbitron'; color: var(--lb-gold); letter-spacing: 1px; text-shadow: 0 0 18px var(--lb-gold); margin-top: 26px; }
.lb-finale-sub { color: var(--ink-dim); max-width: 480px; }
.lb-hero.cheer { animation: lb-cheer .9s ease-in-out 3; }
@keyframes lb-cheer {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  20%     { transform: translateX(-50%) translateY(-16px) rotate(-7deg); }
  50%     { transform: translateX(-50%) translateY(0) rotate(0deg); }
  75%     { transform: translateX(-50%) translateY(-12px) rotate(7deg); }
}

@keyframes shake {
  10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); }
}

@media (max-width: 820px) {
  .lb-stage { grid-template-columns: 1fr; }
  .lb-map { max-width: 320px; margin: 0 auto; width: 100%; }
  .lb-facts, .lb-verdicts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-root *, .lb-root *::before { animation: none !important; transition: none !important; }
}

.chart-box { background: rgba(0,0,0,.35); border: 1px solid var(--edge); border-radius: 12px; padding: 14px; margin: 10px 0; }
.chart-box canvas { max-height: 300px; }

.task-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }

/* --- Level 1: Open-Data-Portal (Datenbehörde) + internes Stadt-System --- */
.l1-root { --accent: #00f3ff; --accent-soft: rgba(0,243,255,.2); font-family: 'Share Tech Mono', monospace; }
.l1-portalbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.l1-url-label { color: #00f3ff; font-weight: 700; }
.l1-url { flex: 1; min-width: 200px; background: rgba(0,0,0,.5); border: 1px solid rgba(0,243,255,.5);
  border-radius: 8px; padding: 9px 11px; color: #cfefff; font-family: 'Share Tech Mono', monospace; }
.l1-url:focus { outline: none; border-color: #00f3ff; box-shadow: 0 0 12px rgba(0,243,255,.4); }
.l1-portal { border: 1px solid rgba(0,243,255,.4); border-radius: 12px; padding: 12px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(0,243,255,.06), transparent);
  box-shadow: inset 0 0 15px rgba(0,243,255,.12); animation: screen-in .35s ease both; }
.l1-portal-title { color: #00f3ff; letter-spacing: 1px; margin-bottom: 10px; text-shadow: 0 0 10px rgba(0,243,255,.5); }
.l1-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.l1-cat { background: rgba(0,243,255,.08); border: 1px solid rgba(0,243,255,.4); color: #cfefff;
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: .85rem; transition: .15s; }
.l1-cat:hover { background: rgba(0,243,255,.2); box-shadow: 0 0 12px rgba(0,243,255,.4); }
.l1-detail { border-top: 1px dashed rgba(0,243,255,.3); padding-top: 10px; min-height: 56px; }
.l1-detail .dim { color: var(--ink-dim); }
.l1-detail-head { color: #00f3ff; font-weight: 700; }
.l1-detail-val { font-size: 1.1rem; margin: 4px 0; }
.l1-detail-val b { color: #7fffd4; text-shadow: 0 0 8px rgba(127,255,212,.5); }
.l1-detail-meta { color: var(--ink-dim); font-size: .78rem; }
.l1-quality { margin: 6px 0 14px; }
/* Begründungstext im Fixbox-Bereich: normale Lesegröße statt .hint (klein
   und blass) – der Text erklärt, warum der Wert unmöglich ist. */
.l1-reason { font-size: 1rem; line-height: 1.5; margin: 8px 0 0; text-align: left; }
.l1-system-title { color: #00f3ff; letter-spacing: 1px; margin-bottom: 6px; }
.l1-system-table td.bad { color: #ff6b9d; font-weight: 700; }

/* --- Level 1: Cyber-Tauben-Terminal / Kartenflug / Scan / Dashboard --- */
.ct-stage { --ct-violet: #9d00ff; --ct-cyan: #00f0ff; }
.ct-terminal { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 14px; align-items: start; }
.ct-shelf-title, .ct-preview-title { font-family: 'Orbitron'; font-size: .78rem; letter-spacing: 1px; color: var(--ct-cyan); margin-bottom: 8px; }
.ct-tier { border: 1px solid rgba(157,0,255,.4); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(157,0,255,.05); transition: opacity .2s; }
.ct-tier.locked { opacity: .4; filter: grayscale(.5); }
.ct-tier-head { display: flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; color: #d9b3ff; font-size: .8rem; margin-bottom: 6px; }
.ct-tier-nr { width: 18px; height: 18px; border-radius: 50%; background: var(--ct-violet); color: #0d0d11; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; }
/* Hilfe-Knopf je Station – ersetzt den alten Hover-Tooltip (auf Touchgeräten
   kaum treffbar). Sichtbar, fokussierbar, mindestens 30 px hoch. */
.ct-help {
  margin-left: auto; flex: 0 0 auto; font-size: .68rem; letter-spacing: .5px;
  padding: 4px 9px; min-height: 30px; border-color: var(--ct-cyan); color: var(--ct-cyan);
}
.ct-help:hover, .ct-help:focus-visible { background: rgba(0,240,255,.14); box-shadow: 0 0 12px rgba(0,240,255,.4); }
.ct-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-opt { background: rgba(0,240,255,.06); border: 1px solid rgba(0,240,255,.35); color: #cfefff; border-radius: 7px;
  padding: 5px 9px; cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: .76rem; text-align: left; }
.ct-tier.locked .ct-opt { cursor: not-allowed; }
.ct-opt:hover { background: rgba(0,240,255,.16); }
.ct-opt.selected { border-color: var(--ct-violet); background: rgba(157,0,255,.22); box-shadow: 0 0 10px rgba(157,0,255,.5); color: #fff; }
/* Ausrüstungs-Hangar rechts: statisch von Beginn an, die Taube wird Schritt für
   Schritt bestückt (kein automatischer Einflug mehr). */
.ct-station { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; text-align: center; }
.ct-hangar-title { font-family: 'Orbitron'; font-size: .78rem; letter-spacing: 1px; color: var(--ct-cyan); }
.ct-hangar {
  position: relative; width: 100%; min-height: 190px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,240,255,.28); border-radius: 12px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,240,255,.14), transparent 70%), rgba(0,0,0,.25);
}
.ct-hangar .ct-bird { width: min(190px, 76%); mix-blend-mode: screen; filter: drop-shadow(0 0 22px rgba(0,240,255,.5)); transition: filter .3s; }
.ct-station.eq-url .ct-hangar .ct-bird { filter: drop-shadow(0 0 26px rgba(0,240,255,.75)); }
.ct-station.eq-token .ct-hangar .ct-bird { filter: drop-shadow(0 0 30px rgba(157,0,255,.8)); }
/* Pergamentrolle: liegt bereit und gleitet beim Token-Schritt in den Schnabel */
.ct-hangar-scroll {
  position: absolute; right: 6%; top: 8%; width: 62px; opacity: .45;
  filter: drop-shadow(0 0 12px rgba(255,210,31,.35));
  transition: opacity .3s;
}
.ct-hangar-scroll.load { animation: ct-scroll-load 1.1s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes ct-scroll-load {
  0%   { right: 6%;  top: 8%;  opacity: .45; transform: scale(1)   rotate(0deg); }
  100% { right: 44%; top: 46%; opacity: 1;   transform: scale(.62) rotate(14deg); }
}
.ct-hangar-status {
  font-family: 'Share Tech Mono', monospace; font-size: .78rem; color: var(--ink-dim);
  min-height: 2.4em; padding: 0 6px;
}
.ct-station.eq-token .ct-hangar-status { color: var(--green); }
.ct-preview { min-height: 68px; white-space: pre; }

.ct-map { position: relative; height: clamp(260px, 34vh, 340px); border: 1px solid rgba(0,240,255,.3); border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 82% 38%, rgba(157,0,255,.14), transparent 60%), #0d0d11; }
/* Isometrische Vektor-Stadtkarte (Inline-SVG, keine Bild-Assets) */
.ct-city { position: absolute; inset: 0; }
.ct-city svg { width: 100%; height: 100%; display: block; }
.ct-city-grid line { stroke: rgba(0,240,255,.1); stroke-width: 1; }
.ct-river { fill: rgba(0,240,255,.16); animation: ct-river-shimmer 6s ease-in-out infinite; }
@keyframes ct-river-shimmer { 50% { opacity: .55; } }
.ct-bridge { stroke: rgba(255,210,31,.5); stroke-width: 2; fill: rgba(255,210,31,.08); }
.ct-street { stroke: rgba(0,240,255,.5); stroke-width: 2; stroke-dasharray: 6 10; animation: ct-traffic 3s linear infinite; }
@keyframes ct-traffic { to { stroke-dashoffset: -32; } }
.ct-twr-l { fill: #150d28; } .ct-twr-r { fill: #241640; } .ct-twr-top { fill: #3a2168; }
.ct-win { fill: rgba(0,240,255,.55); }
.ct-tree { fill: rgba(57,255,136,.45); }
.ct-node { fill: none; stroke: var(--ct-cyan); stroke-width: 2; animation: ct-node-pulse 2.4s ease-in-out infinite; }
.ct-target { stroke: var(--ct-violet); stroke-width: 3; filter: drop-shadow(0 0 10px var(--ct-violet)); }
@keyframes ct-node-pulse { 50% { opacity: .45; } }
.ct-trail { fill: none; stroke: var(--ct-cyan); stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900;
  filter: drop-shadow(0 0 6px var(--ct-cyan)); opacity: .85; }
.ct-map.in-flight .ct-trail { animation: ct-trail-draw 1.6s ease-in-out forwards; }
@keyframes ct-trail-draw { to { stroke-dashoffset: 0; } }
.ct-server { position: absolute; right: 8%; top: 30%; font-size: 2.8rem; filter: drop-shadow(0 0 14px var(--ct-cyan)); }
.ct-map .ct-bird { position: absolute; left: -18%; top: 58%; width: 110px; mix-blend-mode: screen; z-index: 3; }
.ct-bird.flying { animation: ct-fly 1.6s ease-in-out forwards; }
/* 5 Stops: die Taube schlängelt sich zwischen Türmen hindurch und über eine Brücke */
@keyframes ct-fly {
  0%   { left: -18%; top: 62%; transform: rotate(0deg); }
  25%  { left: 12%;  top: 44%; transform: rotate(-6deg); }
  50%  { left: 34%;  top: 58%; transform: rotate(4deg); }
  75%  { left: 52%;  top: 34%; transform: rotate(-4deg); }
  100% { left: 64%;  top: 40%; transform: rotate(0deg); }
}
.ct-bird.failed { animation: ct-fail 1s ease forwards; }
@keyframes ct-fail { to { left: 34%; top: 72%; transform: rotate(12deg); opacity: .7; } }
.ct-bird.returning { animation: ct-return 1.3s ease forwards; }
@keyframes ct-return { from { left: 64%; top: 40%; } to { left: -18%; top: 60%; opacity: 0; } }
.ct-status { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: 'Share Tech Mono', monospace; color: var(--ct-cyan); }
.ct-error { text-align: center; padding: 16px; }
.ct-error-ico { font-size: 2.6rem; }
.ct-error-code { font-family: 'Orbitron'; color: var(--pink); font-weight: 700; margin: 6px 0 2px; }
.ct-error-msg { color: #ffd7ec; }
.ct-error-extra { color: var(--ink-dim); font-size: .85rem; margin: 6px 0 14px; }

.ct-chain-title { color: var(--ct-cyan); margin-bottom: 8px; }
.ct-rollwrap { position: relative; overflow: hidden; border: 1px solid rgba(255,80,80,.5); border-radius: 8px; background: #150808; }
.ct-paperroll { margin: 0; padding: 12px; white-space: nowrap; overflow: hidden; color: #ff9b9b; font-family: 'Share Tech Mono', monospace; font-size: .9rem; animation: ct-roll 9s linear infinite; }
@keyframes ct-roll { from { transform: translateX(4%); } to { transform: translateX(-45%); } }
.ct-streamerr { color: var(--pink); font-family: 'Share Tech Mono', monospace; margin: 8px 0; animation: blink 1s steps(2) infinite; }
.ct-laser { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--ct-violet); box-shadow: 0 0 16px var(--ct-violet); animation: ct-scan .95s ease forwards; }
@keyframes ct-scan { from { left: 0; } to { left: 100%; } }

/* Drei Spalten: Maschinen-Ansicht, Menschen-Ansicht und das Glossar
   nebeneinander (Spec: das Glossar steht neben den beiden Ansichten). */
.ct-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 10px 0; }
.ct-view-title { font-family: 'Orbitron'; font-size: .78rem; letter-spacing: 1px; color: var(--ct-cyan); margin-bottom: 6px; }
.ct-dash { display: flex; flex-direction: column; gap: 8px; }
.ct-card { display: flex; align-items: center; gap: 10px; background: rgba(157,0,255,.08); border: 1px solid rgba(157,0,255,.35); border-radius: 10px; padding: 8px 10px; }
.ct-card-ico { font-size: 1.4rem; }
.ct-card-lbl { font-weight: 700; color: #e6d8ff; }
.ct-card-val { margin-left: auto; font-family: 'Share Tech Mono', monospace; color: #ffb0c8; font-size: .85rem; }
.ct-explain { border-left: 3px solid var(--ct-cyan); background: rgba(0,240,255,.06); padding: 10px 14px; border-radius: 0 8px 8px 0; line-height: 1.55; margin: 6px 0 12px; }
/* Glossar im Ergebnis-Bildschirm: aufklappbar, damit es die beiden Ansichten
   daneben nicht erdrückt. Kostet keine Punkte. */
.ct-glossar { max-height: 340px; overflow-y: auto; }
.ct-glos-item { border-bottom: 1px dashed rgba(0,240,255,.22); padding: 5px 0; }
.ct-glos-item:last-child { border-bottom: none; }
.ct-glos-item > summary {
  cursor: pointer; color: var(--ct-cyan); font-size: .84rem; font-weight: 700;
  padding: 3px 0; list-style: none;
}
.ct-glos-item > summary::-webkit-details-marker { display: none; }
.ct-glos-item > summary::before { content: "▸ "; }
.ct-glos-item[open] > summary::before { content: "▾ "; }
.ct-glos-item p { margin: 4px 0 6px 14px; font-size: .84rem; line-height: 1.5; color: var(--ink-dim); }

/* Vergleichstabelle JSON ⇄ Dashboard, direkt unter den beiden Ansichten */
.ct-compare { margin: 4px 0 12px; }
.ct-compare-table th:first-child { width: 26%; color: var(--ct-cyan); }
.ct-compare-table td, .ct-compare-table th { font-size: .84rem; }

@media (max-width: 1020px) { .ct-views { grid-template-columns: 1fr 1fr; } .ct-glossar { grid-column: 1 / -1; max-height: none; } }
@media (max-width: 820px) { .ct-terminal, .ct-views { grid-template-columns: 1fr; } }

/* --- Level 2: Real-Life-Break-Overlay --- */
.l2-break { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 24px; background: rgba(3,6,14,.95); backdrop-filter: blur(3px); animation: screen-in .4s ease both; }
.l2-break-title { font-family: 'Orbitron'; color: var(--green); letter-spacing: 1px; font-size: 1.2rem; text-shadow: 0 0 14px var(--green); }
.l2-break-sub { color: var(--ink-dim); max-width: 540px; }
.l2-break-time { font-family: 'Orbitron'; font-size: 2.6rem; color: var(--cyan); text-shadow: 0 0 18px var(--cyan); margin: 4px 0; }
.l2-break-tips { list-style: none; padding: 0; margin: 6px 0 12px; text-align: left; columns: 2; column-gap: 28px; font-size: .92rem; }
.l2-break-tips li { padding: 3px 0; break-inside: avoid; }
@media (max-width: 560px) { .l2-break-tips { columns: 1; } }

/* cta-pulse: seit v0.8.0 kein Intro mehr, die Keyframe wird aber weiter von
   .lb-help .pulse und .token-hint.delivered genutzt. */
@keyframes cta-pulse { 50% { opacity: .45; } }

/* Schritt 5: Token fliegt in den Token-Speicher des Request-Builders */
.ct-tokenchip {
  position: absolute; z-index: 13; transform: translate(-50%, -50%); pointer-events: none;
  font-family: 'Share Tech Mono', monospace; font-size: .8rem; font-weight: 700;
  color: #04060c; background: var(--yellow); border-radius: 6px; padding: 3px 8px;
  box-shadow: 0 0 16px var(--yellow);
  transition: left .7s cubic-bezier(.4,.1,.2,1), top .7s cubic-bezier(.4,.1,.2,1), transform .7s, opacity .7s;
}
.token-hint.delivered { box-shadow: 0 0 14px var(--yellow); animation: cta-pulse .9s 2; }

/* Token-Speicher in Ebene 3 (die Auswahl bleibt beim Spieler → 401-Pfad erreichbar) */
.ct-slotrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
  font-family: 'Share Tech Mono', monospace; font-size: .7rem; color: var(--ink-dim);
}
.ct-token-slot { font-size: .74rem; padding: 4px 9px; margin: 0; opacity: .6; }
.ct-token-slot.filled { opacity: 1; color: #04060c; background: var(--yellow); border-style: solid; }

/* success overlay inside level
   z-index 20 statt 5: liegt zusammen mit dem Stacking-Context auf
   .level-body sicher über allem, was ein Level intern aufbaut. */
.level-success {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: rgba(3,6,14,.92); backdrop-filter: blur(3px); animation: screen-in .4s ease both;
}
.level-success .key-icon { font-size: 4.5rem; filter: drop-shadow(0 0 22px var(--yellow)); animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15);} 100% { transform: scale(1);} }
.level-success h3 { font-family: 'Orbitron'; color: var(--green); letter-spacing: 2px; margin: 0; text-shadow: 0 0 16px var(--green); }

/* Eigener Aktionsbereich: Avatar links, Weiter-Knopf rechts daneben.
   Der Knopf steht damit außerhalb des Fließtextes (Spec belohnung.md). */
.level-success-actions {
  display: flex; align-items: center; gap: 16px; margin-top: 6px;
  padding: 12px 18px; border: 1px solid var(--accent-soft); border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.level-success-avatar {
  width: 62px; height: 62px; border-radius: 12px; object-fit: cover;
  border: 2px solid var(--accent); box-shadow: 0 0 14px var(--accent-soft);
}
.level-success-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.level-success-note { font-size: .78rem; color: var(--ink-dim); letter-spacing: .5px; }

/* Pulsierender Neon-Blink für den zentralen Weiter-Knopf. Akzentgesteuert,
   damit er in jedem Level passt. */
.btn-cta { animation: cta-glow 1.7s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 10px var(--accent-soft); }
  50%      { box-shadow: 0 0 26px var(--accent), 0 0 44px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta { animation: none; box-shadow: 0 0 16px var(--accent-soft); }
  .level-success { animation: none; }
  .level-success .key-icon { animation: none; }
}

/* --- Sprachleiste: Vorlesen (Sprachsynthese) + Stimme der Bürger-KI (MP3) --- */
.voicebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid rgba(53,230,255,.3); background: rgba(53,230,255,.07);
}
.voicebar-ico { font-size: 1.05rem; }
.voicebar-label {
  font-family: 'Orbitron'; font-size: .68rem; letter-spacing: 1.5px;
  color: var(--cyan); margin-right: auto;
}
.nfo-voice:empty { display: none; }
.nfo-voice .voicebar { margin: 0 0 10px; }

/* =========================================================================
   Info-System (ℹ) · avatar-spezifische Wissens-Overlays · 0 Punkte
   ========================================================================= */
/* ============ „Über uns“ (Startseite) ============ */
/* Dezenter Knopf über den Hauptschaltflächen. Der Schein läuft über
   filter: drop-shadow – .btn hat ein clip-path, das box-shadow abschneidet. */
.btn-about {
  display: block; margin: 0 auto 14px; padding: 6px 20px; border-radius: 18px;
  background: transparent; border: 1px solid rgba(160,180,200,.4);
  color: rgba(190,205,220,.85); font-family: 'Orbitron'; font-size: .72rem;
  letter-spacing: 1.4px; cursor: pointer;
  transition: color .2s, border-color .2s, filter .2s;
}
.btn-about:hover, .btn-about:focus-visible {
  color: #8fe6ff; border-color: #8fe6ff; filter: drop-shadow(0 0 9px rgba(0,191,255,.65));
}

.about-overlay {
  position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(2,4,10,.8); backdrop-filter: blur(6px); animation: screen-in .25s ease both;
}
.about-overlay[hidden] { display: none; }
.about-box {
  position: relative; width: min(620px, 94vw); max-height: 90vh; overflow: auto;
  padding: 26px 28px 22px; border: 1.5px solid var(--cyan); border-radius: var(--radius, 14px);
  background: var(--panel-2); box-shadow: 0 0 48px rgba(0,191,255,.28), 0 0 60px rgba(0,0,0,.7);
  text-align: center;
}
.about-x {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--ink-dim); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.about-x:hover { color: var(--ink); }
.about-title {
  margin: 0 0 16px; font-family: 'Orbitron'; font-size: 1.05rem; line-height: 1.4;
  letter-spacing: 1px; color: var(--cyan);
}
.about-body { font-size: .92rem; line-height: 1.55; color: var(--ink); }
.about-body p { margin: 0 0 12px; }
.about-quote {
  margin: 0 0 12px; padding: 11px 15px; border-left: 3px solid var(--cyan);
  background: rgba(0,191,255,.07); border-radius: 0 10px 10px 0; text-align: left; font-style: italic;
}
.about-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: .82rem; color: var(--ink-dim); }
.about-link { color: var(--cyan); font-family: 'Share Tech Mono', monospace; word-break: break-word; }
.about-actions { margin: 6px 0 20px; }
/* Die Logos haben sehr verschiedene Seitenverhältnisse (1:1 und 4,7:1) –
   gemeinsame Höhe plus object-fit: contain, damit nichts verzerrt. */
.about-logos {
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 18px;
}
/* Beide Logos sind dunkel getönt und für helle Untergründe gezeichnet – auf dem
   dunklen Panel verlieren sie jede Kontur. Ein heller Streifen dahinter zeigt sie
   in ihren echten Farben, statt sie umzufärben. */
.about-logos { background: rgba(255,255,255,.92); border-radius: 12px; padding: 10px 22px; }
.about-logos img { max-width: 200px; object-fit: contain; }
/* odon.png ist quadratisch mit breitem Leerrand, mimikama.png ein randloser
   Schriftzug im Verhältnis 4,7:1 – gleiche Höhe ließe ODON winzig wirken. */
.about-logos img[src$="odon.png"]     { height: 76px; }
.about-logos img[src$="mimikama.png"] { height: 34px; }

.nfo-overlay {
  position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(2,4,10,.78); backdrop-filter: blur(5px); animation: screen-in .25s ease both;
}
.nfo-box {
  --c: var(--cyan);
  width: min(880px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  border: 1.5px solid var(--c); border-radius: var(--radius, 14px); background: var(--panel-2);
  box-shadow: 0 0 44px rgba(0,0,0,.6); overflow: hidden;
}
.nfo-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--edge); }
.nfo-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--c); flex: 0 0 auto; }
.nfo-head-txt { min-width: 0; }
.nfo-title { font-family: 'Orbitron'; font-size: .92rem; letter-spacing: 1px; color: var(--c); }
.nfo-term-line { font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--ink-dim); }
.nfo-free {
  margin-left: auto; flex: 0 0 auto; font-family: 'Share Tech Mono', monospace; font-size: .7rem;
  color: var(--green); border: 1px solid var(--green); border-radius: 20px; padding: 3px 10px;
}
.nfo-x { background: none; border: none; color: var(--ink-dim); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.nfo-x:hover { color: var(--ink); }
.nfo-body { flex: 1 1 auto; overflow: auto; padding: 14px; }
.nfo-bonus { border-top: 1px dashed var(--c); padding: 12px 14px; }
.nfo-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--edge); }
.nfo-steps { display: flex; gap: 6px; margin-right: auto; }
.nfo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--edge); }
.nfo-dot.on { background: var(--c); box-shadow: 0 0 8px var(--c); }
.nfo-hint { font-family: 'Share Tech Mono', monospace; font-size: .74rem; color: var(--ink-dim); margin: 0 0 10px; }

/* --- Lyra · Hologramm-Mindmap ------------------------------------------- */
.nfo-lyra { --c: #ff2fb0; }
.nfo-mindmap { display: block; width: 100%; max-width: 540px; margin: 0 auto;
  aspect-ratio: 100 / 68; filter: drop-shadow(0 0 10px rgba(0,243,255,.25)); }
/* Kanten sind zunächst blass und leuchten erst auf, wenn ihr Zielknoten
   erreicht ist – der Weg der Anfrage baut sich Schritt für Schritt auf. */
.nfo-edge { fill: none; stroke: rgba(0,255,255,.14); stroke-width: .4; stroke-dasharray: 3 2; }
.nfo-edge.lit { stroke: rgba(0,255,255,.6); stroke-width: .55; animation: nfo-flow 2.4s linear infinite; }
@keyframes nfo-flow { to { stroke-dashoffset: -20; } }
.nfo-node { cursor: pointer; }
.nfo-node circle { fill: rgba(4,7,15,.9); stroke: var(--nc, var(--cyan)); stroke-width: .8; transition: stroke-width .15s; }
.nfo-node:hover circle { stroke-width: 1.4; }
.nfo-node.seen circle { stroke-width: 1.4; filter: drop-shadow(0 0 6px var(--nc, var(--cyan))); }
/* Der Reihe nach: nur der nächste Knoten ist offen, spätere sind gesperrt. */
.nfo-node.locked { cursor: default; opacity: .32; }
.nfo-node.locked circle { stroke: var(--ink-dim); stroke-dasharray: 1.5 1.5; }
.nfo-node.is-next circle { stroke-width: 1.6; animation: nfo-next 1.5s ease-in-out infinite; }
@keyframes nfo-next {
  0%, 100% { filter: drop-shadow(0 0 3px var(--nc, var(--cyan))); }
  50%      { filter: drop-shadow(0 0 10px var(--nc, var(--cyan))); }
}
.nfo-node text { fill: var(--ink); font-size: 3.1px; text-anchor: middle; font-family: 'Rajdhani', sans-serif; }
.nfo-node.locked text { fill: var(--ink-dim); }
.nfo-node .nfo-node-ico { font-size: 5px; }
.nfo-node-cue { fill: var(--cyan); font-size: 2.5px; }
.nfo-nodetext {
  min-height: 42px; margin-top: 10px; border-left: 3px solid var(--c); background: rgba(255,47,176,.07);
  border-radius: 0 9px 9px 0; padding: 9px 12px; line-height: 1.5;
}
.nfo-analogy { display: flex; gap: 11px; align-items: flex-start; margin-top: 11px; border: 1px dashed var(--edge); border-radius: 10px; padding: 10px 12px; }
.nfo-analogy .ico { font-size: 1.6rem; }

/* --- Lennox · Funk-Kanal ------------------------------------------------ */
.nfo-lennox { --c: #ffd21f; }
.nfo-radio {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
  border: 1px dashed var(--c); border-radius: 12px; padding: 10px 13px; background: rgba(255,210,31,.05);
}
.nfo-radio-dial { font-family: 'Orbitron'; color: var(--c); text-shadow: 0 0 12px var(--c); font-size: .9rem; }
.nfo-eq { display: flex; gap: 3px; align-items: flex-end; height: 34px; }
.nfo-eq-bar { width: 5px; height: 6px; background: var(--c); border-radius: 2px; animation: nfo-eq .9s ease-in-out infinite; }
.nfo-eq-bar:nth-child(2) { animation-delay: -.1s; } .nfo-eq-bar:nth-child(3) { animation-delay: -.25s; }
.nfo-eq-bar:nth-child(4) { animation-delay: -.4s; } .nfo-eq-bar:nth-child(5) { animation-delay: -.55s; }
@keyframes nfo-eq { 0%,100% { height: 6px; } 50% { height: 30px; } }
.nfo-radio.idle .nfo-eq-bar { animation-play-state: paused; height: 4px; }
.nfo-transport { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.nfo-transcript {
  max-height: 250px; overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: .84rem;
  border: 1px solid var(--edge); border-radius: 10px; padding: 8px;
}
.nfo-line { opacity: .55; border-left: 2px solid transparent; padding: 4px 9px; transition: opacity .2s, background .2s; }
.nfo-line.active { opacity: 1; border-left-color: var(--c); background: rgba(255,210,31,.08); }
.nfo-line .who { color: var(--c); font-weight: 700; }
.nfo-noaudio { margin-top: 10px; border: 1px dashed var(--ink-dim); border-radius: 9px; padding: 8px 11px; color: var(--ink-dim); font-size: .86rem; }

/* --- Zen · Hacker-Terminal ---------------------------------------------- */
.nfo-zen { --c: #39ff88; }
.nfo-termpane { background: #04070f; border: 1px solid rgba(57,255,136,.35); border-radius: 10px; padding: 14px 16px; font-family: 'Share Tech Mono', monospace; }
.nfo-termbar { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; font-size: .72rem; color: var(--ink-dim); }
.nfo-termbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--edge); display: inline-block; }
.nfo-termbar i:first-child { background: #ef4444; } .nfo-termbar i:nth-child(2) { background: #f59e0b; } .nfo-termbar i:nth-child(3) { background: var(--green); }
.nfo-h { font-family: 'Orbitron'; color: var(--c); font-size: .84rem; letter-spacing: 1px; margin: 12px 0 6px; }
.nfo-h::before { content: "## "; opacity: .5; }
.nfo-h:first-child { margin-top: 0; }
.nfo-p { line-height: 1.55; margin: 0 0 8px; font-family: 'Rajdhani', sans-serif; font-size: .96rem; }
.nfo-ul { list-style: none; padding: 0; margin: 0 0 8px; }
.nfo-ul li { padding: 2px 0; }
.nfo-ul li::before { content: "· "; color: var(--c); }
.nfo-code { white-space: pre; color: var(--yellow); border-left: 2px solid var(--c); padding: 6px 0 6px 11px; margin: 0 0 9px; font-size: .82rem; overflow-x: auto; }
.nfo-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-bottom: 9px; font-size: .86rem; }
.nfo-kv dt { color: var(--cyan); } .nfo-kv dd { margin: 0; color: var(--ink); }
.nfo-prompt { color: var(--c); }
.nfo-prompt::after { content: "▊"; animation: blink 1s steps(2) infinite; }

/* --- Bonusfrage (alle drei Varianten) ----------------------------------- */
.nfo-bonus-q { font-family: 'Orbitron'; font-size: .84rem; color: var(--c); margin-bottom: 9px; }
.nfo-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.nfo-opts.rows { grid-template-columns: 1fr; }
.nfo-opt {
  background: rgba(0,0,0,.3); border: 1.5px solid var(--edge); color: var(--ink);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; font: inherit;
  transition: transform .12s, border-color .2s, box-shadow .2s;
}
.nfo-opt .ico { display: block; font-size: 1.5rem; margin-bottom: 4px; }
.nfo-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--c); }
.nfo-opt:disabled { opacity: .5; cursor: default; }
.nfo-opt.correct { border-color: var(--green); box-shadow: 0 0 18px rgba(57,255,136,.45); opacity: 1; }
.nfo-opt.wrong { border-color: var(--pink); animation: shake .5s; }
.nfo-award {
  display: inline-block; margin-left: 8px; font-family: 'Orbitron'; font-size: .8rem;
  color: #04060c; background: var(--yellow); border-radius: 20px; padding: 3px 11px;
  animation: nfo-award .7s ease both;
}
@keyframes nfo-award { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: none; opacity: 1; } }
.nfo-bonus-result { margin-top: 10px; line-height: 1.5; }
.nfo-bonus-result .ok { color: var(--green); } .nfo-bonus-result .no { color: var(--pink); }

@media (max-width: 640px) {
  .nfo-box { max-height: 94vh; }
  .nfo-opts { grid-template-columns: 1fr 1fr; }
  .nfo-transport { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nfo-edge, .nfo-eq-bar, .nfo-award, .nfo-node.is-next circle { animation: none !important; }
  .nfo-node.is-next circle { filter: drop-shadow(0 0 8px var(--nc, var(--cyan))); }
}

/* =========================================================================
   Level 4: Die Daten-Metropole — Bürger-Dashboard (Typwahl + Drag & Drop)
   ========================================================================= */
.l4-root { --l4-blue: #00BFFF; }
.l4-hud {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 10px;
  font-family: 'Share Tech Mono', monospace; font-size: .82rem; color: var(--l4-blue);
}
.l4-hud b { color: var(--yellow); font-weight: 700; }
.l4-hud .l4-score { margin-left: auto; color: var(--yellow); }
.l4-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.l4-task { background: rgba(0,191,255,.05); border: 1px solid rgba(0,191,255,.22); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.l4-task-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.l4-task-title { font-family: 'Orbitron'; font-size: .92rem; color: var(--l4-blue); }
.l4-task-quelle { font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--ink-dim); }
.l4-task-merkmal { font-size: .86rem; color: var(--ink-dim); margin-bottom: 10px; }

.l4-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.l4-type {
  cursor: pointer; text-align: center; line-height: 1.25; background: rgba(0,0,0,.32);
  border: 2px solid var(--edge); color: var(--ink); border-radius: 11px; padding: 12px 8px;
  font-family: 'Orbitron'; font-size: .78rem; letter-spacing: .5px;
  transition: transform .12s, box-shadow .2s, border-color .2s;
}
.l4-type .l4-type-ico { display: block; font-size: 1.5rem; margin-bottom: 5px; }
.l4-type .l4-type-key { display: block; font-family: 'Share Tech Mono', monospace; font-size: .62rem; opacity: .55; margin-top: 4px; }
.l4-type:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--l4-blue); box-shadow: 0 0 16px rgba(0,191,255,.4); }
.l4-type:disabled:not(.is-correct) { opacity: .35; cursor: default; }
.l4-type.is-correct { border-color: var(--green); box-shadow: 0 0 20px rgba(57,255,136,.4); color: var(--green); opacity: 1; }
.l4-type.is-reject { animation: l4-glitch-reject .42s cubic-bezier(.36,.07,.19,.97) both; }
/* Nach der Typwahl wird der gewählte Knopf selbst zum Ablageziel – die frühere
   zweite Reihe mit denselben Diagrammnamen ist entfallen. */
.l4-type.is-armed {
  border-color: var(--l4-blue); border-style: dashed; color: var(--l4-blue); opacity: 1;
  background: rgba(0,191,255,.08); box-shadow: 0 0 14px rgba(0,191,255,.35);
}
.l4-type.is-armed.is-correct { border-color: var(--green); color: var(--green); }
.l4-type.is-hover { border-style: solid; box-shadow: 0 0 24px rgba(0,191,255,.65); background: rgba(0,191,255,.16); }
.l4-type.is-dim { opacity: .3; }
.l4-type.is-built { text-align: left; font-family: inherit; }

/* Sprechblase unter dem Daten-Chip: sagt in einem Satz, was zu tun ist. */
.l4-bubble {
  position: relative; display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 12px; padding: 10px 13px; border-radius: 12px;
  border: 1px solid rgba(0,191,255,.45); background: rgba(0,191,255,.09);
  color: var(--ink); font-size: .86rem; line-height: 1.45;
}
.l4-bubble::before {
  content: ''; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px;
  background: rgba(10,26,38,1); border-left: 1px solid rgba(0,191,255,.45);
  border-top: 1px solid rgba(0,191,255,.45); transform: rotate(45deg);
}
.l4-bubble-ico { font-size: 1.05rem; line-height: 1.3; }

.l4-stage { position: relative; }
/* Instruktions-Banner: 1.15rem, fett, eigener Container mit Glow (Spec „3.1") */
.l4-banner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 1.15rem; font-weight: 700; line-height: 1.35;
  color: #eaf7ff; background: rgba(0,60,95,.55); border: 1.5px solid var(--l4-blue);
  border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 0 18px rgba(0,191,255,.35), inset 0 0 20px rgba(0,191,255,.08);
}
.l4-banner-ico { font-size: 1.4rem; flex: 0 0 auto; }
.l4-banner.is-active { animation: l4-banner-pulse 1.8s ease-in-out infinite; }
.l4-banner.is-done { border-color: var(--green); box-shadow: 0 0 14px rgba(57,255,136,.3); color: #d8ffe9; }
@keyframes l4-banner-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(0,191,255,.35), inset 0 0 20px rgba(0,191,255,.08); }
  50%     { box-shadow: 0 0 30px rgba(0,191,255,.7),  inset 0 0 20px rgba(0,191,255,.14); }
}

.l4-chipbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.l4-chip {
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab; font-family: 'Share Tech Mono', monospace; font-size: .86rem; color: #04121c;
  background: linear-gradient(180deg, var(--l4-blue), #0a7fb0); border: none; border-radius: 9px;
  padding: 10px 16px; box-shadow: 0 0 16px rgba(0,191,255,.5); position: relative; z-index: 5;
  transition: box-shadow .2s; will-change: transform;
}
.l4-chip.is-picked, .l4-chip:focus-visible { box-shadow: 0 0 24px rgba(0,191,255,.85); outline: 2px solid #fff; outline-offset: 2px; }
.l4-chip.is-dragging { cursor: grabbing; z-index: 40; transition: none; }
.l4-chip.is-snap { transition: transform .28s cubic-bezier(.2,.9,.3,1); }
.l4-chip.is-reject { animation: l4-glitch-reject .42s cubic-bezier(.36,.07,.19,.97) both; }
.l4-chip:disabled { opacity: .4; cursor: not-allowed; }
.l4-chip-hint { color: var(--ink-dim); font-size: .82rem; }

.l4-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; touch-action: none; }
.l4-slot {
  min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border: 2px dashed var(--edge); border-radius: 12px; color: var(--ink-dim);
  font-family: 'Share Tech Mono', monospace; font-size: .74rem; background: rgba(0,0,0,.2);
  transition: border-color .2s, box-shadow .2s, background .2s; cursor: pointer;
}
.l4-slot .l4-slot-ico { font-size: 1.6rem; opacity: .6; }
.l4-slot.is-armed { border-color: var(--l4-blue); border-style: solid; color: var(--l4-blue); box-shadow: 0 0 4px rgba(0,191,255,.25); background: rgba(0,191,255,.06); }
.l4-slot.is-armed .l4-slot-ico { opacity: 1; }
.l4-slot.is-hover { box-shadow: 0 0 22px rgba(0,191,255,.6); background: rgba(0,191,255,.14); }
.l4-slot.is-locked { opacity: .5; cursor: default; }
.l4-slot.is-built { grid-column: 1 / -1; border-style: solid; border-color: var(--green); background: rgba(0,0,0,.35); padding: 8px; cursor: default; min-height: 0; }

.l4-fallback { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 6px; }
.l4-fallback i { flex: 1; background: linear-gradient(180deg, var(--l4-blue), rgba(0,191,255,.15)); border-radius: 3px 3px 0 0; min-height: 3px; }
.l4-fallback-note { color: var(--ink-dim); font-size: .78rem; margin-top: 6px; }

.l4-ki { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; border-left: 3px solid var(--l4-blue); background: rgba(0,191,255,.06); border-radius: 0 9px 9px 0; padding: 10px 13px; animation: lb-fact-in .3s ease both; }
.l4-ki .l4-ki-ico { font-size: 1.3rem; }
.l4-ki-name { font-family: 'Orbitron'; font-size: .68rem; color: var(--l4-blue); letter-spacing: 1px; margin-bottom: 2px; }

.l4-gate { text-align: center; margin-top: 14px; }

@keyframes l4-glitch-reject {
  0%   { transform: translate3d(0,0,0);            box-shadow: 0 0 0 0 rgba(0,191,255,0); }
  12%  { transform: translate3d(7px,-2px,0)  skewX(-7deg);
         box-shadow: -5px 0 0 rgba(0,191,255,.75), 5px 0 0 rgba(255,47,176,.55); }
  26%  { transform: translate3d(-9px,1px,0)  skewX(6deg);
         box-shadow:  6px 0 0 rgba(0,191,255,.75), -6px 0 0 rgba(255,47,176,.5); }
  40%  { transform: translate3d(6px,2px,0)   skewX(-4deg); }
  56%  { transform: translate3d(-5px,-1px,0) skewX(3deg);
         box-shadow: -3px 0 0 rgba(0,191,255,.5), 3px 0 0 rgba(255,47,176,.35); }
  72%  { transform: translate3d(3px,0,0); }
  100% { transform: translate3d(0,0,0);            box-shadow: 0 0 18px rgba(0,191,255,.45); }
}

@media (max-width: 700px) {
  .l4-types, .l4-slots { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .l4-root *, .l4-root *::before { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Level 4: Die lebendige Cyber-Stadt — 360°-Panorama (Epilog nach den 3
   Diagrammen). Vier Parallax-Ebenen (Himmel · ferne Silhouette · Stadt ·
   Vordergrund), reines CSS/Inline-SVG, keine Bild-Assets. Jede Ebene besteht
   aus zwei identischen Kacheln nebeneinander -> keine Naht bei 0°/360°.
   ========================================================================= */
.city-stage {
  position: relative; height: clamp(360px, 52vh, 460px); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,120,180,.45); background: #bfe9fb; margin: 6px 0 12px;
}
.city-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
/* Jede Ebene belegt ein eigenes Höhenband, sonst verdeckt die vorderste
   (Vordergrund) alle dahinterliegenden. Reihenfolge im DOM = Maloberfläche. */
.city-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; will-change: transform; backface-visibility: hidden; }
.city-l-far  { bottom: auto; height: 74%; }
.city-l-fore { top: auto; height: 11%; }
.city-tile { position: absolute; top: 0; bottom: 0; will-change: transform; }

/* TAG-MODUS (Spec „2. Visuelle Überarbeitung"): heller Himmel statt Nachtkulisse –
   bessere Lesbarkeit, freundlichere Optik, weniger visuelle Ermüdung. */
.city-l-sky .city-tile {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.75) 0 26px, transparent 60px) 0 0/320px 200px,
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.5) 0 20px, transparent 52px) 60px 10px/380px 220px,
    linear-gradient(180deg, #8fd6f7 0%, #bfe9fb 46%, #e6f6fd 100%);
}
.city-l-far .city-tile {
  opacity: .5; background: #6f96b8;
  clip-path: polygon(0% 100%, 0% 60%, 5% 40%, 10% 65%, 16% 30%, 22% 55%, 28% 20%, 34% 50%, 40% 35%,
    46% 60%, 52% 25%, 58% 45%, 64% 15%, 70% 50%, 76% 30%, 82% 55%, 88% 20%, 94% 45%, 100% 60%, 100% 100%);
}
.city-art { position: absolute; inset: 0; }
/* ohne diese Regel behält das SVG sein Seitenverhältnis (2400:400) und ragt
   über die Kachelhöhe hinaus – preserveAspectRatio="none" soll es füllen */
.city-art svg { display: block; width: 100%; height: 100%; }
.city-twr-l { fill: #7f9db9; } .city-twr-r { fill: #b9d3e8; } .city-twr-top { fill: #dceaf5; }
.city-art svg rect, .city-art svg polygon { stroke: rgba(30,70,105,.35); stroke-width: 1; }
.city-art svg .city-win { stroke: none; }
.city-win { fill: rgba(20,90,140,.55); }
.city-vine { fill: #3fae63; }
.city-tree-c { fill: #2f9c58; } .city-tree-c2 { fill: #56c877; } .city-tree-trunk { fill: #6b4a2a; }
.city-flower-a { fill: #ff7fa6; } .city-flower-b { fill: #ffcf3f; } .city-flower-c { fill: #ffffff; }

.city-spots { position: absolute; inset: 0; }
/* über Grasband UND Avatar (der steht mittig bis ca. 18 % Höhe), damit die
   Beschriftung des vordersten Hotspots nicht verdeckt wird */
.city-spot {
  position: absolute; bottom: 24%; transform: translateX(-50%); background: none; border: none;
  padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* Auf hellem Grund brauchen die Marker dunkle Kontur + Schlagschatten (Spec „2.1") */
.city-spot-ring {
  --r: #0077b6; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--r);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 3px 10px rgba(0,0,0,.45), 0 0 14px var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: rgba(255,255,255,.92); position: relative;
  transition: transform .15s;
}
/* Unsichtbare Trefferfläche >= 44x44 px (Spec „Touch & Mobile UX").
   Über die GANZE Schaltfläche zentriert – vorher hing sie an top:0 und ließ
   das Tag-Label darunter außen vor. */
.city-spot::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 48px; min-height: 48px; height: 100%; transform: translate(-50%, -50%); }
.city-spot:hover .city-spot-ring,
.city-spot:focus-visible .city-spot-ring { transform: scale(1.15); }
.city-spot-ping { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--r); opacity: 0; }
.city-spot.is-near .city-spot-ping { animation: city-ping 2.2s ease-out infinite; opacity: 1; }
.city-spot-label {
  font-family: 'Share Tech Mono', monospace; font-size: .66rem; font-weight: 700; color: #10222e;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,60,90,.35); border-radius: 6px;
  padding: 1px 7px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.city-spot.is-open    { --r: #21a75b; }
.city-spot.is-blocked { --r: #1c62d6; }
.city-spot.is-wrong   { --r: #d98324; }
/* Erledigt: ausgegraut + grünes Haken-Badge (Spec „Erledigt-Status") */
.city-spot.is-done { opacity: .6; filter: grayscale(.8); cursor: default; }
.city-spot.is-done .city-spot-ring::after {
  content: "✓"; position: absolute; right: -7px; bottom: -7px;
  width: 18px; height: 18px; border-radius: 50%; background: #21a75b; color: #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); filter: none;
}
.city-spot.is-done:hover .city-spot-ring { transform: none; }
/* Die zweite Kachel-Kopie bleibt für Screenreader unsichtbar, muss aber
   klickbar sein: Ab Blickrichtung 262° ist SIE der sichtbare Hotspot – vorher
   ging dort jeder Klick ins Leere. Der Klick-Handler hängt an beiden Kopien. */
.city-spot[aria-hidden="true"] { pointer-events: auto; }

.city-life { position: absolute; inset: 0; pointer-events: none; }
.city-bee, .city-bird, .city-walker { position: absolute; will-change: transform; }
.city-bee { animation: city-bee var(--dur,7s) var(--del,0s) ease-in-out infinite; }
.city-bird { animation: city-fly var(--dur,13s) var(--del,0s) linear infinite; }
.city-walker { animation: city-walk var(--dur,19s) var(--del,0s) linear infinite; }
.city-walker.rev { animation-name: city-walk-rev; }

.city-l-fore .city-tile {
  background: repeating-linear-gradient(94deg, rgba(30,120,60,.14) 0 5px, transparent 5px 18px),
    linear-gradient(180deg, #63c07e 0%, #2e8a4d 100%);
}

/* Auf hellem Grund braucht das Avatar-Bild einen Rahmen, sonst steht ein
   nacktes dunkles Rechteck in der Szene. */
.city-hero {
  position: absolute; left: 50%; bottom: 2%; width: clamp(52px, 8%, 72px); z-index: 6;
  transform: translateX(-50%); border-radius: 12px; border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0,40,70,.45), 0 0 0 2px rgba(0,120,180,.5);
  background: #0a1020;
}
.city-hero.cheer { animation: city-cheer .9s ease-in-out 3; }
.city-hero.shock { animation: shake .5s; }

.city-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 8; width: 46px; height: 46px;
  border-radius: 50%; border: 2px solid rgba(0,120,180,.7); background: rgba(8,42,66,.85); color: #eaf7ff;
  font-size: 1.3rem; cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.city-nav.prev { left: 10px; } .city-nav.next { right: 10px; }
.city-nav:hover { box-shadow: 0 0 16px rgba(0,191,255,.5); }

/* Dauerhafte Bedien-Anweisung in der Stadt (Spec „Verbesserung der Daten Metropole"). */
.city-hint {
  /* Oben mittig – unten steht die Avatar-Figur im Weg. */
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 8;
  max-width: min(58%, 520px); text-align: center; font-size: .78rem; line-height: 1.35;
  color: #eaf7ff; background: rgba(8,42,66,.85); border: 1px solid rgba(0,191,255,.6);
  padding: 5px 13px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  pointer-events: none;
}
.city-progress {
  position: absolute; top: 10px; left: 10px; z-index: 8; font-family: 'Share Tech Mono', monospace;
  font-size: .78rem; font-weight: 700; color: #eaf7ff; background: rgba(8,42,66,.85);
  border: 1px solid rgba(0,191,255,.6); padding: 4px 11px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.city-compass {
  position: absolute; top: 10px; right: 10px; z-index: 8; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(0,120,180,.7); background: rgba(8,42,66,.85); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.city-compass-dial { position: absolute; inset: 0; will-change: transform; }
.city-compass-n {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: .55rem;
  color: var(--l4-blue); font-family: 'Share Tech Mono', monospace;
}
.city-compass-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--edge);
  transform: translate(-50%, -50%);
}
.city-compass-dot.is-done { background: var(--green); }

.city-glitch { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 9;
  background: repeating-linear-gradient(0deg, rgba(255,60,90,.30) 0 2px, transparent 2px 6px); }
.city-stage.is-glitch .city-glitch { animation: city-glitch-red .55s steps(12,end) both; }

.city-panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 10;
  transform: translate3d(0,100%,0); transition: transform .34s cubic-bezier(.2,.9,.3,1);
  background: rgba(4,8,18,.97); border-top: 1.5px solid var(--l4-blue); border-radius: 16px 16px 0 0;
  padding: 14px 16px; overflow-y: auto; backdrop-filter: blur(4px);
}
.city-panel.is-open { transform: translate3d(0,0,0); }
.city-panel-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.city-panel-ico { font-size: 1.6rem; }
.city-panel-head h3 { font-family: 'Orbitron'; font-size: .96rem; color: var(--l4-blue); margin: 0; }
.city-panel-count { margin-left: auto; font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--ink-dim); }
.city-panel-desc { line-height: 1.5; margin: 0 0 8px; }
.city-panel-detail { font-family: 'Share Tech Mono', monospace; font-size: .78rem; color: var(--ink-dim); border: 1px dashed var(--edge); border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; }
/* Die Frage ist die eigentliche Ansage – fett, groß und orange, damit sie
   auf dem dunklen Panel sofort ins Auge springt (Spec Level 4). */
.city-panel-q {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 1.25rem; font-weight: 700; line-height: 1.35;
  color: var(--orange); margin: 4px 0 12px;
  text-shadow: 0 0 12px rgba(255,140,26,.45);
}
.city-panel-q-ico { flex: 0 0 auto; }

.city-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.city-btn {
  --c: var(--edge); cursor: pointer; text-align: center; background: rgba(0,0,0,.3);
  border: 2px solid var(--c); color: var(--c); border-radius: 11px; padding: 12px 8px;
  min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Orbitron'; font-size: .84rem; letter-spacing: .5px; transition: transform .12s, box-shadow .2s;
}
/* Symbol zusätzlich zur Farbe – trägt die Bedeutung auch bei Farbfehlsichtigkeit */
.city-btn-ico {
  font-size: 1.15rem; font-weight: 900; line-height: 1; width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid var(--c); display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.city-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px var(--c); }
.city-btn:disabled { opacity: .4; cursor: default; }

.city-feedback { animation: lb-fact-in .3s ease both; }
.city-feedback-ki { border-radius: 0 9px 9px 0; padding: 10px 13px; margin-bottom: 8px; line-height: 1.5; border-left: 3px solid var(--edge); }
.city-panel.is-ok .city-feedback-ki { border-left-color: var(--green); background: rgba(57,255,136,.08); }
.city-panel.is-bad .city-feedback-ki { border-left-color: var(--pink); background: rgba(255,47,176,.08); }
.city-warn { border: 1px dashed #ff4d6d; border-radius: 9px; padding: 9px 12px; color: #ffc9d4; font-size: .86rem; margin-bottom: 8px; }
.city-law { color: var(--ink-dim); font-size: .78rem; }
.city-panel-foot { text-align: right; }

/* Kompakte Antwortzeile: ersetzt nach der Entscheidung die Frage und die beiden
   toten Knöpfe. Spart im nur ~294 px hohen Panel rund 85 px Höhe. */
.city-answer {
  --c: var(--edge);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 4px 0 10px; font-size: .88rem;
}
.city-answer-lbl { color: var(--ink-dim); }
.city-answer-val {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--c); border: 1.5px solid var(--c); border-radius: 20px; padding: 3px 12px 3px 4px;
  font-family: 'Orbitron'; font-size: .78rem; letter-spacing: .5px;
}
.city-answer-ico {
  font-size: .95rem; font-weight: 900; line-height: 1; width: 21px; height: 21px;
  border-radius: 50%; border: 1.5px solid var(--c); display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto;
}

/* Hinweis-Sprechblase. MUSS außerhalb der Bühne liegen: .city-stage hat
   overflow:hidden und .city-panel ein backdrop-filter, das position:fixed zu einem
   Kind-Koordinatensystem machen würde. Sie hängt deshalb an <body> – wie .toast. */
.city-scrollhint {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 95;
  max-width: 196px; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 2px solid var(--orange); border-radius: 14px;
  padding: 12px 16px; color: #ffe2c4; font-weight: 700; font-size: .88rem; line-height: 1.35;
  box-shadow: 0 0 26px rgba(255,140,26,.45);
  animation: city-hint-in .3s ease both, city-hint-pulse 1.8s ease-in-out .3s infinite;
}
.city-scrollhint:hover, .city-scrollhint:focus-visible {
  border-color: #ffb066; box-shadow: 0 0 34px rgba(255,140,26,.7);
}
.city-scrollhint-arrow { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; color: var(--orange); }
/* Spitze zeigt nach links auf das Panel */
.city-scrollhint::after {
  content: ''; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; background: var(--panel-2);
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}
@keyframes city-hint-in { from { opacity: 0; transform: translate(14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes city-hint-pulse {
  0%, 100% { box-shadow: 0 0 26px rgba(255,140,26,.45); }
  50%      { box-shadow: 0 0 40px rgba(255,140,26,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .city-scrollhint { animation: none; }
}

.city-finale {
  position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 18px;
  background: radial-gradient(circle at 50% 55%, rgba(0,191,255,.18), rgba(3,6,14,.94) 70%);
  animation: screen-in .4s ease both;
}
.city-finale-title { font-family: 'Orbitron'; color: var(--l4-blue); letter-spacing: 1px; text-shadow: 0 0 18px var(--l4-blue); }
.city-finale-sub { color: var(--ink-dim); max-width: 480px; }

@keyframes city-ping { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes city-bee {
  0%   { transform: translate3d(0,0,0)        rotate(0deg); }
  22%  { transform: translate3d(46px,-16px,0) rotate(9deg); }
  40%  { transform: translate3d(52px,-4px,0)  rotate(-6deg); }
  62%  { transform: translate3d(12px,-22px,0) rotate(7deg); }
  84%  { transform: translate3d(-28px,-8px,0) rotate(-8deg); }
  100% { transform: translate3d(0,0,0)        rotate(0deg); }
}
@keyframes city-fly {
  0%   { transform: translate3d(0,0,0)          scaleX(1);  opacity: 0; }
  8%   { opacity: .9; }
  30%  { transform: translate3d(150px,-34px,0)  scaleX(1); }
  55%  { transform: translate3d(300px,-8px,0)   scaleX(1); }
  80%  { transform: translate3d(440px,-40px,0)  scaleX(1); opacity: .9; }
  100% { transform: translate3d(560px,-12px,0)  scaleX(1); opacity: 0; }
}
@keyframes city-walk     { from { transform: translate3d(0,0,0)     scaleX(1);  } to { transform: translate3d(260px,0,0) scaleX(1);  } }
@keyframes city-walk-rev { from { transform: translate3d(260px,0,0) scaleX(-1); } to { transform: translate3d(0,0,0)     scaleX(-1); } }
@keyframes city-cheer {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  20%     { transform: translateX(-50%) translateY(-16px) rotate(-7deg); }
  50%     { transform: translateX(-50%) translateY(0) rotate(0deg); }
  75%     { transform: translateX(-50%) translateY(-12px) rotate(7deg); }
}
@keyframes city-glitch-red {
  0%,100% { opacity: 0; transform: translate3d(0,0,0); }
  10% { opacity: .55; transform: translate3d(-7px,2px,0); }
  22% { opacity: .2;  transform: translate3d(6px,-3px,0); }
  38% { opacity: .6;  transform: translate3d(-4px,1px,0); }
  60% { opacity: .15; }
  80% { opacity: .35; transform: translate3d(3px,0,0); }
}

@media (max-width: 720px) {
  .city-panel { height: 100%; border-radius: 0; }
  .city-choices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .city-stage .city-bee, .city-stage .city-bird, .city-stage .city-walker,
  .city-hero.cheer, .city-hero.shock, .city-spot-ping,
  .city-stage.is-glitch .city-glitch { animation: none !important; }
  .city-panel, .city-panel-foot ~ * { transition: none !important; }
}

/* =========================================================================
   Großes Finale — Zeremonie vor dem Zertifikat (überspringbar, wiederholbar)
   ========================================================================= */
#screen-finale { --accent: #00BFFF; --accent-soft: rgba(0,191,255,.16); align-items: center; padding-top: 50px; }
.fin-stage { position: relative; width: min(760px, 100%); text-align: center; margin: 0 auto; }
.fin-sky {
  position: absolute; inset: -40px -40px auto -40px; height: 260px; border-radius: 20px; z-index: -1;
  background: radial-gradient(circle at 50% 30%, rgba(0,191,255,.35), transparent 70%);
  opacity: 0; transition: opacity 1.4s ease;
}
.fin-stage.is-lit .fin-sky { opacity: 1; }
.fin-hero img { width: 96px; height: 118px; object-fit: cover; object-position: top center; border-radius: 12px;
  border: 2px solid var(--l4-blue, #00BFFF); filter: drop-shadow(0 0 18px rgba(0,191,255,.5)); }
.fin-speech {
  margin: 16px auto; max-width: 620px; border-left: 3px solid #00BFFF; background: rgba(0,191,255,.06);
  border-radius: 0 12px 12px 0; padding: 14px 18px; text-align: left; line-height: 1.6; opacity: 0;
  transition: opacity .6s ease;
}
.fin-speech.show { opacity: 1; }
.fin-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px;
  margin: 16px auto; max-width: 620px; opacity: 0; transition: opacity .6s ease;
  list-style: none; padding: 0; }
.fin-levels.show { opacity: 1; }
.fin-lvl { background: rgba(0,0,0,.3); border: 1px solid rgba(0,191,255,.3); border-radius: 10px; padding: 10px; }
.fin-lvl b { display: block; font-family: 'Orbitron'; font-size: .8rem; color: #00BFFF; margin-bottom: 3px; }
.fin-lvl span { font-size: .78rem; color: var(--ink-dim); }

.fin-trophy { position: relative; height: 160px; margin: 10px auto; width: 140px; opacity: 0; transition: opacity .5s ease; }
.fin-trophy.show { opacity: 1; }
.fin-cup {
  position: absolute; left: 50%; bottom: 0; width: 70px; height: 90px; transform: translateX(-50%);
  animation: fin-cup-rise 1.3s cubic-bezier(.2,.9,.3,1) both, fin-cup-spin 4s linear infinite 1.3s;
}
.fin-cup-bowl { position: absolute; left: 8px; top: 0; width: 54px; height: 46px; border-radius: 0 0 27px 27px / 0 0 40px 40px;
  background: linear-gradient(180deg,#00e0ff,#0071a8); box-shadow: 0 0 22px rgba(0,191,255,.7); }
.fin-cup-stem { position: absolute; left: 31px; top: 40px; width: 8px; height: 26px; background: linear-gradient(180deg,#00bfff,#0a5a80); }
.fin-cup-base { position: absolute; left: 15px; top: 64px; width: 40px; height: 10px; border-radius: 4px; background: #0a5a80; }
@keyframes fin-cup-rise { from { opacity: 0; transform: translateX(-50%) translateY(40px) scale(.4); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes fin-cup-spin { to { transform: translateX(-50%) rotate(360deg); } }

.fin-badge {
  display: inline-block; margin: 8px auto; font-family: 'Orbitron'; font-size: .84rem; letter-spacing: .5px;
  color: #04121c; background: linear-gradient(180deg,#00e0ff,#0090c4); border-radius: 24px; padding: 8px 20px;
  box-shadow: 0 0 20px rgba(0,191,255,.6); opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;
}
.fin-badge.show { opacity: 1; transform: scale(1); }
.fin-closing { font-style: italic; color: var(--ink); margin: 14px 0 20px; opacity: 0; transition: opacity .6s ease; }
.fin-closing.show { opacity: 1; }
.fin-actions { display: flex; gap: 12px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .fin-cup { animation: none !important; }
  .fin-sky, .fin-speech, .fin-levels, .fin-trophy, .fin-badge, .fin-closing { transition: none !important; }
}

/* =========================================================================
   REWARD / certificate
   ========================================================================= */
#screen-reward { --accent: var(--cyan); --accent-soft: rgba(53,230,255,.16); padding-top: 60px; align-items: center; }
.reward-inner { display: grid; grid-template-columns: minmax(320px, 560px) 320px; gap: 22px; width: min(920px, 100%); margin: 0 auto; align-items: start; }
.certificate {
  position: relative; background: linear-gradient(160deg, #0a1428, #060a16);
  border: 2px solid var(--yellow); border-radius: 16px; padding: 32px 28px; text-align: center;
  box-shadow: 0 0 50px rgba(255,210,31,.2), inset 0 0 40px rgba(0,0,0,.5);
}
.cert-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--yellow); }
.cert-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.cert-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.cert-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.cert-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.cert-seal {
  width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%;
  border: 2px solid var(--yellow); display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron'; font-size: .6rem; font-weight: 900; color: var(--yellow);
  line-height: 1.1; box-shadow: 0 0 20px rgba(255,210,31,.4);
}
.cert-title { font-family: 'Orbitron'; font-weight: 900; letter-spacing: 2px; color: var(--yellow); text-shadow: 0 0 18px rgba(255,210,31,.5); margin: 6px 0 0; font-size: clamp(1.1rem, 3.5vw, 1.7rem); }
.cert-sub { color: var(--ink-dim); letter-spacing: 3px; margin: 2px 0 14px; font-size: .8rem; }
.cert-avatar { width: 96px; height: 118px; object-fit: cover; object-position: top center; border-radius: 10px; border: 2px solid var(--yellow); }
.cert-line { color: var(--ink-dim); margin: 12px 0 0; }
.cert-name { font-family: 'Orbitron'; font-size: 1.6rem; font-weight: 700; margin: 2px 0 14px; color: #fff; }
.cert-stats { display: flex; justify-content: center; gap: 26px; margin: 8px 0 14px; }
.cert-stats div { display: flex; flex-direction: column; }
.cert-big { font-family: 'Orbitron'; font-size: 1.8rem; font-weight: 900; color: var(--yellow); }
.cert-stats label { color: var(--ink-dim); font-size: .72rem; letter-spacing: 1px; }
.cert-congrats { color: var(--green); font-weight: 700; margin: 10px 0 4px; line-height: 1.45; }
.cert-blurb { font-style: italic; color: var(--ink); }
.cert-award-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.cert-trophy-mini { font-size: 1.6rem; filter: drop-shadow(0 0 8px rgba(0,191,255,.6)); }
.cert-badge-mini { font-family: 'Share Tech Mono', monospace; font-size: .68rem; color: #00BFFF;
  border: 1px solid #00BFFF; border-radius: 16px; padding: 3px 10px; }
.cert-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 10px 0;
  text-align: left; font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--ink-dim);
  list-style: none; padding: 0; }
.cert-levels b { color: var(--yellow); }
.cert-foot { font-family: 'Share Tech Mono', monospace; color: var(--ink-dim); font-size: .8rem; margin-top: 12px; }

.reward-side { display: flex; flex-direction: column; gap: 16px; }

/* --- Klassen-Ranking (lokal, nach Klassencode gefiltert) --- */
.lb-own { color: var(--yellow); font-weight: 700; margin: 0 0 8px; font-size: .9rem; }
.lb-wrap { max-height: 260px; overflow: auto; }
.lb-table { width: 100%; border-collapse: collapse; font-family: 'Share Tech Mono', monospace; font-size: .8rem; }
.lb-table th {
  text-align: left; color: var(--accent); font-weight: 400; letter-spacing: 1px;
  border-bottom: 1px solid var(--edge); padding: 4px 6px; position: sticky; top: 0;
  background: var(--panel-2);
}
.lb-table td { padding: 4px 6px; border-bottom: 1px solid rgba(120,220,255,.08); }
.lb-table tr.me td { color: var(--yellow); background: rgba(255,210,31,.08); font-weight: 700; }
.lb-rank { white-space: nowrap; }
.lb-pts, .lb-ods { text-align: right; }
.lb-empty { color: var(--ink-dim); font-style: italic; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lb-io {
  width: 100%; margin-top: 8px; background: rgba(0,0,0,.45); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 8px; padding: 8px;
  font-family: 'Share Tech Mono', monospace; font-size: .72rem; resize: vertical;
}
.feedback { width: 100%; background: rgba(0,0,0,.4); color: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: 10px; font-family: 'Rajdhani'; resize: vertical; }
.saved-note { color: var(--green); margin-left: 10px; font-size: .85rem; }
.reward-buttons { display: flex; flex-direction: column; gap: 10px; }

/* =========================================================================
   Modal + toast
   ========================================================================= */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(2,4,10,.72); backdrop-filter: blur(4px); animation: screen-in .25s ease both; }
.modal-box { width: min(520px, 92vw); text-align: center; border-color: var(--cyan); }
.modal-body { line-height: 1.6; margin-bottom: 16px; text-align: left; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 20px; font-weight: 600; box-shadow: 0 0 24px var(--accent-soft);
  animation: toast-in .3s ease both;
}
.toast.warn { border-color: var(--pink); color: #ffd7ec; }
.toast.ok { border-color: var(--green); color: #ccffe2; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
  .avatar-layout { grid-template-columns: 1fr; }
  .side-panel { min-height: 0; }
  .avatar-cards { order: -1; }
  .reward-inner { grid-template-columns: 1fr; }
  .corner-tr { right: 116px; top: 62px; }
  /* Schmale Geräte: die Blase würde seitlich das Panel überdecken -> nach unten */
  .city-scrollhint {
    right: 12px; left: 12px; top: auto; bottom: 14px; transform: none;
    max-width: none; justify-content: center; text-align: center;
    animation: city-hint-pulse 1.8s ease-in-out infinite;
  }
  .city-scrollhint::after { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .avatar-cards { grid-template-columns: 1fr; }
  .level-meta { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   Print — only the certificate
   ========================================================================= */
@media print {
  #bg-grid, #bg-scanlines, .audio-toggle, .music-toggle, .hud, .no-print, .reward-side { display: none !important; }
  html, body { background: #fff; color: #000; }
  .screen { display: none !important; }
  #screen-reward.active { display: block !important; padding: 0; }
  .reward-inner { grid-template-columns: 1fr; }
  .certificate { border-color: #b8860b; box-shadow: none; background: #fff; color: #111; }
  .cert-title, .cert-big, .cert-seal, .cert-name { color: #b8860b !important; text-shadow: none !important; }
  .cert-line, .cert-sub, .cert-foot, .cert-stats label { color: #444 !important; }
  .cert-trophy-mini { filter: none !important; }
  .cert-badge-mini, .cert-levels b { color: #b8860b !important; border-color: #b8860b !important; }
  .cert-levels { color: #444 !important; }
  .cert-congrats { color: #1a6b3a !important; }
}