/* style.css — Rahmen um das Spiel: Anmeldung, Menüs, Einstellungen. */

:root {
  --bg:      #14101a;
  --bg2:     #1d1726;
  --plate:   #221b2e;
  --line:    #3d3350;
  --ink:     #ded6ec;
  --dim:     #948aa8;
  --amber:   #ffd76a;
  --acid:    #8ef0c0;
  --violet:  #a98ade;
  --orange:  #ff9a4a;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(1200px 700px at 20% -10%, #2b2140 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #1b3330 0%, transparent 55%),
    var(--bg);
  overflow: hidden;
}

#app { height: 100%; }

/* ── Bildschirme ─────────────────────────────────────────────────────────── */
.screen {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.screen.active { display: flex; }

.plate {
  width: min(560px, 100%);
  background: linear-gradient(180deg, var(--plate), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 30px 26px;
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.plate.small { width: min(400px, 100%); }

/* ── Logo ────────────────────────────────────────────────────────────────── */
.logo { display: block; margin-bottom: 18px; }
.logo-sm {
  display: block;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--acid); margin-bottom: 9px;
}
.logo-lg {
  display: block;
  font: 800 clamp(26px, 5.4vw, 40px)/1.05 ui-serif, Georgia, serif;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, var(--amber), var(--orange) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

h2 { font: 700 20px/1.2 ui-serif, Georgia, serif; margin-bottom: 18px; color: var(--amber); }

.lede { color: var(--dim); margin-bottom: 18px; font-size: 14px; }
.greeting { color: var(--dim); margin-bottom: 20px; font-size: 14px; }
.greeting b { color: var(--ink); font-weight: 600; }
.fine { margin-top: 22px; font-size: 11px; color: #6c6480; line-height: 1.5; }
.hint { margin-top: 8px; font-size: 12px; color: var(--dim); min-height: 32px; }

/* ── Formular ────────────────────────────────────────────────────────────── */
form { display: flex; gap: 10px; flex-wrap: wrap; }
input[type=text] {
  flex: 1 1 200px;
  background: #17121f;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
}
input[type=text]:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }

/* ── Schaltflächen ───────────────────────────────────────────────────────── */
.btn {
  appearance: none; cursor: pointer;
  background: #2c2440;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 9px;
  padding: 11px 18px;
  font: 600 14px/1 inherit;
  transition: background .14s, transform .08s, border-color .14s;
}
.btn:hover  { background: #3a3053; border-color: #55486e; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--amber), #e8ab3a);
  border-color: #b9862c; color: #241a05;
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--ink); background: #251e33; }
.btn[disabled] { opacity: .38; pointer-events: none; }

.menu { display: grid; gap: 9px; }

/* ── Bekannte Profile ────────────────────────────────────────────────────── */
.known { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.known button {
  cursor: pointer;
  background: #1b1626; border: 1px solid var(--line);
  color: var(--dim); border-radius: 999px;
  padding: 6px 13px; font: 500 12px/1 inherit;
}
.known button:hover { color: var(--amber); border-color: var(--amber); }

/* ── Spielstände ─────────────────────────────────────────────────────────── */
.slots { display: grid; gap: 7px; margin-top: 18px; }
.slot {
  display: flex; align-items: center; gap: 12px;
  background: #1a1523; border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 13px;
  cursor: pointer; text-align: left;
  color: var(--ink); font: inherit;
}
.slot:hover { border-color: var(--violet); background: #221b30; }
.slot .n { color: var(--violet); font-weight: 700; font-size: 12px; min-width: 18px; }
.slot .t { flex: 1; font-size: 13px; }
.slot .d { color: #6c6480; font-size: 11px; }
.slot.empty { color: #6c6480; }
.slot.empty .t { font-style: italic; }

/* ── Optionen ────────────────────────────────────────────────────────────── */
.opt { margin-bottom: 20px; }
.opt > label {
  display: block; margin-bottom: 8px;
  font: 600 11px/1 inherit; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; cursor: pointer;
  background: #1b1626; border: 1px solid var(--line);
  color: var(--dim); border-radius: 8px; padding: 10px 8px;
  font: 600 13px/1 inherit;
  transition: background .14s, color .14s, border-color .14s;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: #3a3053; border-color: var(--violet); color: var(--amber); }
.seg.wide button { font-size: 12px; }

/* ── Intro ───────────────────────────────────────────────────────────────── */
.screen.intro { background: #000; padding: 0; }
#intro-video { width: 100%; height: 100%; object-fit: contain; }
.sub {
  position: absolute; left: 50%; bottom: 7%;
  transform: translateX(-50%);
  width: min(880px, 88%);
  text-align: center;
  font: 600 clamp(15px, 2.2vw, 21px)/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 2px 5px #000, 0 0 16px rgba(0,0,0,.9);
  pointer-events: none;
}
/* Der Titel am Ende des Intros ist technisch ein Untertitel — nur so wechselt
   er mit der Sprache und bleibt aus dem Video heraus. Er sitzt deshalb in der
   Bildmitte statt unten und in gesperrten Versalien. */
.sub.titel {
  bottom: 50%;
  transform: translate(-50%, 50%);
  font: 700 clamp(22px, 4.4vw, 46px)/1.25 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  color: #ffd76a;
  text-shadow: 0 3px 18px #000, 0 0 40px rgba(0,0,0,.95);
}
.skip { position: absolute; right: 20px; bottom: 20px; }

/* ── Spielfläche ─────────────────────────────────────────────────────────── */
.screen.game { padding: 0; background: #08060c; }
.stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

#stage {
  display: block;
  width: min(100vw, calc(100vh * 320 / 312));
  height: auto;
  max-height: 100vh;
  background: #000;
  cursor: pointer;
  image-rendering: auto;
}
#stage.pixelated { image-rendering: pixelated; }

.hud { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; }
.chip {
  cursor: pointer;
  background: rgba(24,19,32,.86);
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 7px; padding: 6px 11px;
  font: 600 11px/1 inherit;
  backdrop-filter: blur(6px);
}
.chip:hover { color: var(--amber); border-color: var(--amber); }

/* ── Overlays ────────────────────────────────────────────────────────────── */
.overlay {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,4,10,.82);
  backdrop-filter: blur(5px);
  padding: 24px; z-index: 40;
}
.overlay.active { display: flex; }

.toast {
  margin-top: 12px; min-height: 18px;
  font-size: 12px; color: var(--acid); text-align: center;
}

#end-text { color: var(--dim); margin-bottom: 20px; font-size: 14px; }

/* ── Hinweis beim Start ohne Server ──────────────────────────────────────── */
#speicherort { margin-top: 14px; color: #6c6480; }
#speicherort.warn { color: var(--amber); }

.startfehler {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 32px;
  background: var(--bg); text-align: center;
}
.startfehler h2 { color: var(--amber); margin-bottom: 4px; }
.startfehler p  { color: var(--dim); max-width: 46ch; font-size: 14px; }
.startfehler b  { color: var(--ink); }
.startfehler code {
  display: block;
  background: #17121f; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 18px; margin: 4px 0;
  font: 600 14px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--acid);
}

@media (max-width: 560px) {
  .plate { padding: 22px 18px 20px; }
  .hud { top: 6px; right: 8px; }
}

/* ── Bühne: die Neufassung als Szenenkomödie ──────────────────────────────
   Kein Verbraster, keine Leinwand. Der Hintergrund ist bewegtes Bild aus
   denselben Aufnahmen wie das Intro, davor liegen nur Ziel, Satz und Wahl.
   Alles, was nicht gelesen werden muss, tritt zurück.                        */
/* Randlos: `.screen` bringt sonst 24px Polsterung mit, die den Hintergrund
   vom Rand abheben würde. Hier soll das Bild bis in die Ecken laufen.
   `display` NICHT hier setzen — sonst überschreibt es das `display:none`
   der Grundregel und der Bildschirm liegt dauerhaft über allem anderen.
   Die Positionierung kommt von `.screen` (position:absolute); das genügt
   als Bezugssystem für die absolut gesetzten Kinder. */
.buehne { overflow: hidden; background: #05060a; padding: 0; }
.screen.buehne.active { display: block; }

.bue-bg, .bue-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover; background-position: center;
}
/* Standbilder bekommen eine sehr langsame Fahrt, damit nie etwas stillsteht. */
.bue-bild.faehrt { animation: bueFahrt 38s ease-in-out infinite alternate; }
@keyframes bueFahrt {
  from { transform: scale(1.06) translate(-1.2%, -0.8%); }
  to   { transform: scale(1.14) translate(1.2%, 0.8%); }
}

/* Oben und unten abdunkeln, damit Text immer lesbar ist — auf jedem Bild. */
.bue-schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4,5,9,.80) 0%, rgba(4,5,9,0) 22%),
    linear-gradient(to top,    rgba(4,5,9,.92) 0%, rgba(4,5,9,.55) 26%, rgba(4,5,9,0) 46%);
}

.bue-kopf {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
}
/* Das Ziel steht dauerhaft im Bild. Wer es liest, weiss, was er will. */
.bue-ziel {
  flex: 1;
  font: 600 clamp(13px, 1.5vw, 16px)/1.35 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
  color: #ffd76a;
  text-shadow: 0 2px 10px #000;
}
.bue-ziel::before { content: '▸ '; opacity: .7; }

.bue-knopf {
  flex: none; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,8,16,.7); color: #cfc8dd;
  font: 700 13px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer; transition: background .15s, transform .15s, color .15s;
}
.bue-knopf:hover { background: rgba(40,32,58,.9); color: #ffd76a; transform: scale(1.06); }
.bue-notizknopf { width: 30px; padding: 0; font-size: 15px; }
.bue-notizknopf.neu { animation: bueNeu 1.4s ease-out 2; }
@keyframes bueNeu {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,106,0); }
  40%      { box-shadow: 0 0 0 7px rgba(255,215,106,.34); }
}

.bue-notizen {
  position: absolute; top: 58px; right: 22px; z-index: 4;
  width: min(420px, 74vw); max-height: 56vh; overflow-y: auto;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(10,8,16,.94); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  font: 400 14px/1.5 ui-sans-serif, system-ui, sans-serif; color: #d8d2e4;
}
.bue-notizen p { margin: 0 0 9px; padding-left: 15px; position: relative; }
.bue-notizen p::before { content: '•'; position: absolute; left: 0; color: #ffd76a; }
.bue-notizen p:last-child { margin-bottom: 0; }
.bue-notizen .bue-leer { color: #8a83a0; font-style: italic; padding-left: 0; }
.bue-notizen .bue-leer::before { content: none; }

.bue-fuss {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(18px, 5vw, 64px) clamp(20px, 4vh, 40px);
  display: flex; flex-direction: column; gap: 14px;
}

/* Der gesprochene Satz. Name in Figurenfarbe, Satz gross und ruhig. */
.bue-text { min-height: 3.2em; }
.bue-wer {
  display: block; margin-bottom: 5px;
  font: 700 clamp(12px, 1.4vw, 15px)/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}
.bue-satz {
  display: block; max-width: 62ch;
  font: 400 clamp(17px, 2.3vw, 26px)/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #fff; text-shadow: 0 2px 12px #000, 0 0 30px rgba(0,0,0,.85);
}
.bue-satz.denkt { font-style: italic; color: #cfc8dd; }        /* Gedanken */
.bue-satz.laut  { font-weight: 700; letter-spacing: .01em; }   /* Gebrüll  */
.bue-frage {
  display: block; max-width: 62ch;
  font: 600 clamp(16px, 2vw, 22px)/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #ffd76a; text-shadow: 0 2px 12px #000;
}

.bue-wahl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bue-option {
  max-width: 62ch; text-align: left; cursor: pointer;
  padding: 11px 17px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(12,10,20,.82);
  color: #e8e3f2;
  font: 400 clamp(14px, 1.7vw, 18px)/1.35 ui-sans-serif, system-ui, sans-serif;
  transition: background .14s, border-color .14s, transform .14s;
}
.bue-option:hover {
  background: rgba(58,47,74,.95); border-color: #ffd76a; transform: translateX(4px);
}
.bue-ding::before { content: '☞ '; color: #ffd76a; }

.bue-weiter {
  position: absolute; right: clamp(18px, 5vw, 64px); bottom: clamp(20px, 4vh, 40px);
  font: 500 13px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #8a83a0; pointer-events: none;
  animation: bueBlink 1.9s ease-in-out infinite;
}
@keyframes bueBlink { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* ── The Rise of the Gartenzwerg ───────────────────────────────────────────
   Ein Bild, drei Zustände, übereinandergelegt und übergeblendet. Alles
   Bedienbare liegt darüber. Nichts wird ins Bild montiert — deshalb stimmen
   Maßstab, Perspektive und Licht immer.                                      */
.rasen { overflow: hidden; background: #0a0c08; padding: 0; }
.screen.rasen.active { display: block; }

.ra-buehne { position: absolute; inset: 0; }
.ra-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; -webkit-user-drag: none;
}
.ra-b, .ra-c { opacity: 0; transition: opacity 1.1s ease; }

/* Klickflächen: unauffällig, bis der Zeiger darüber steht. Der Rasen soll
   nicht aussehen wie ein Formular. */
.ra-flaechen { position: absolute; inset: 0; }
.ra-flaeche {
  position: absolute; cursor: pointer; border: 0; background: none; padding: 0;
  border-radius: 10px;
}
.ra-punkt {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 5px rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.6);
  animation: raPuls 2.6s ease-in-out infinite;
}
.ra-flaeche.schlimm .ra-punkt {
  background: #ff8a6a; box-shadow: 0 0 0 5px rgba(255,138,106,.3), 0 2px 10px rgba(0,0,0,.7);
  animation-duration: 1.2s;
}
@keyframes raPuls { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }
.ra-name {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 14px);
  white-space: nowrap; opacity: 0; transition: opacity .16s;
  background: rgba(8,10,6,.9); color: #fff; border-radius: 7px;
  padding: 5px 10px; font: 600 13px/1 ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
}
.ra-flaeche:hover { background: rgba(255,255,255,.10); }
.ra-flaeche:hover .ra-name { opacity: 1; }
.ra-flaeche.aktiv { background: rgba(255,215,106,.16); box-shadow: inset 0 0 0 2px rgba(255,215,106,.6); }

/* ── Kopfleiste: Perfektion und Befehle ─────────────────────────────────── */
.ra-kopf {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; gap: 26px;
  padding: 18px 22px;
  background: linear-gradient(to bottom, rgba(6,8,5,.82), transparent);
}
.ra-label {
  font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #a9b39c;
  margin-bottom: 6px;
}
.ra-messwert { flex: 0 1 320px; }
.ra-balken {
  height: 9px; border-radius: 5px; overflow: hidden;
  background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.ra-fuell {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #8ec06a, #cfe08a);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.ra-fuell.voll { background: linear-gradient(90deg, #cfd8c4, #ffffff); }
.ra-zahl {
  margin-top: 5px;
  font: 700 15px/1 ui-sans-serif, system-ui, sans-serif; color: #fff;
  text-shadow: 0 2px 8px #000;
}
.ra-befehle { flex: none; }
.ra-punkte { display: flex; gap: 4px; }
.ra-punkte i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.ra-punkte i.da { background: #ffd76a; box-shadow: 0 0 6px rgba(255,215,106,.6); }
.ra-knopf.ra-menue {
  margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(8,10,6,.7);
  color: #cfd8c4; font: 700 14px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
}
.ra-knopf.ra-menue:hover { background: rgba(30,38,24,.9); color: #ffd76a; }

/* ── Fussleiste: was Gnorbert sagt, und was du befehlen kannst ──────────── */
.ra-fuss {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(18px, 5vw, 60px) clamp(18px, 3.5vh, 34px);
  background: linear-gradient(to top, rgba(6,8,5,.92) 0%, rgba(6,8,5,.6) 55%, transparent 100%);
  display: flex; flex-direction: column; gap: 13px;
}
.ra-satz {
  min-height: 2.6em; max-width: 60ch;
  font: 500 clamp(16px, 2.1vw, 24px)/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #fff; text-shadow: 0 2px 12px #000;
}
.ra-satz.neu { animation: raRein .34s ease-out; }
@keyframes raRein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.ra-mittel { display: flex; flex-wrap: wrap; gap: 9px; }
.ra-mittelknopf {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 10px 15px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(10,14,8,.86);
  color: #e8ecdf; text-align: left;
  transition: background .14s, border-color .14s, transform .14s;
}
.ra-mittelknopf:hover:not(.zuteuer) {
  background: rgba(46,58,34,.95); border-color: #ffd76a; transform: translateY(-2px);
}
.ra-mittelknopf.zuteuer { opacity: .35; cursor: not-allowed; }
.ra-zeichen {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,215,106,.14); color: #ffd76a;
  font: 700 16px/1 ui-sans-serif, system-ui, sans-serif;
}
.ra-mtext { display: flex; flex-direction: column; gap: 2px; }
.ra-mtext b { font: 700 14px/1.2 ui-sans-serif, system-ui, sans-serif; }
.ra-mtext small { font: 400 12px/1.3 ui-sans-serif, system-ui, sans-serif; color: #9fa894; }
.ra-kosten { flex: none; color: #ffd76a; font-size: 9px; letter-spacing: 1px; }

/* ── Titel: das Kinoplakat als Startseite ──────────────────────────────────
   Die Seite öffnet als Filmplakat. Ein grosser Knopf, alles andere tritt
   zurück. Das Plakat ist hochkant; auf breiten Fenstern zeigt der Anschnitt
   die Statue, der Text sitzt im unteren Drittel auf einem Verlauf.          */
.screen.titel {
  padding: 0;
  background: #05060a url('../assets/titel.jpg') center top / cover no-repeat;
  align-items: flex-end; justify-content: center;
}
.screen.titel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(4,5,9,.96) 30%, rgba(4,5,9,.55) 55%, rgba(4,5,9,0) 75%),
    linear-gradient(to bottom, rgba(4,5,9,.35), rgba(4,5,9,0) 22%);
}
.titel-inhalt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 24px clamp(30px, 7vh, 72px);
  text-align: center;
}
.titel-klein {
  display: block;
  font: 600 clamp(10px, 1.2vw, 13px)/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
  color: #8ef0c0; margin-bottom: 10px;
  text-shadow: 0 2px 8px #000;
}
.titel-gross {
  display: block;
  font: 800 clamp(30px, 5.6vw, 58px)/1.05 ui-serif, Georgia, serif;
  letter-spacing: .01em;
  background: linear-gradient(100deg, #ffd76a, #ff9a4a 55%, #a98ade);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,.85));
}
.titel-spielen {
  margin-top: 10px; cursor: pointer;
  padding: 17px 58px; border-radius: 14px;
  border: 1px solid #b9862c;
  background: linear-gradient(180deg, #ffd76a, #e8ab3a);
  color: #241a05;
  font: 800 clamp(18px, 2.2vw, 24px)/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 60px rgba(255,215,106,.18);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.titel-spielen:hover {
  transform: translateY(-2px) scale(1.02); filter: brightness(1.08);
  box-shadow: 0 18px 54px rgba(0,0,0,.65), 0 0 80px rgba(255,215,106,.3);
}
.titel-spielen:active { transform: translateY(0) scale(.99); }
.titel-weiter {
  cursor: pointer; border: 1px solid rgba(255,255,255,.3); border-radius: 10px;
  background: rgba(10,8,16,.66); color: #e8e3f2;
  padding: 10px 26px;
  font: 600 14px/1 ui-sans-serif, system-ui, sans-serif;
  transition: background .14s, border-color .14s;
}
.titel-weiter:hover { background: rgba(46,38,64,.85); border-color: #ffd76a; }
.titel-weiter[hidden] { display: none; }
.titel-neben { display: flex; gap: 20px; margin-top: 8px; }
.titel-neben button {
  cursor: pointer; border: 0; background: none;
  color: #a49bbb; font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 2px 6px #000;
  transition: color .14s;
}
.titel-neben button:hover { color: #ffd76a; }
.titel-neben button[hidden] { display: none; }

/* ── Klickpunkte im Bild (Bühne) ───────────────────────────────────────────
   Die Finde-Momente liegen als pulsierende Punkte auf dem Ort selbst —
   Point-and-Click statt Textliste. Optik wie im Bonus-Level, damit sich
   beide Spiele wie ein Werk anfühlen.                                       */
.bue-spots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bue-spot {
  position: absolute; pointer-events: auto; cursor: pointer;
  border: 0; background: none; padding: 0; border-radius: 12px;
}
.bue-spot-punkt {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: rgba(255,215,106,.95);
  box-shadow: 0 0 0 6px rgba(255,215,106,.22), 0 2px 10px rgba(0,0,0,.7);
  animation: bueSpotPuls 2.4s ease-in-out infinite;
}
@keyframes bueSpotPuls {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.3); opacity: 1; }
}
.bue-spot-name {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 16px);
  white-space: nowrap; opacity: 0; transition: opacity .15s;
  background: rgba(8,6,12,.92); color: #fff; border-radius: 8px;
  padding: 6px 12px; font: 600 14px/1 ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
}
.bue-spot:hover { background: rgba(255,215,106,.12); }
.bue-spot:hover .bue-spot-name { opacity: 1; }