:root {
  --tief: #050a14;
  --tafel: #0a1628;
  --tafel-hell: #0f1f38;
  --linie: #1d3354;
  --linie-hell: #2b4a74;
  --text: #d7e4f5;
  --leise: #7d93b8;
  --cyan: #4de3ff;
  --pink: #ff5d8f;
  --gold: #ffd166;
  --rot: #ff4d5e;

  --stufe-plankton: #8fb3c9;
  --stufe-zuSchlau: #c08cff;
  --stufe-schwarm: #4de3ff;
  --stufe-selten: #57e389;
  --stufe-tiefgang: #ffb454;
  --stufe-krillion: #ffd166;

  --pixel: 'VT323', ui-monospace, monospace;
  --logo: 'Pixelify Sans', ui-monospace, monospace;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --kante: 0 0 0 2px var(--tief), 0 0 0 4px var(--linie);
  --schatten: 0 6px 0 rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--tief);
  color: var(--text);
  font: 15px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none; /* VT323 hat nur einen Schnitt; kein künstliches Fett */
  /* VT323 ist sehr klein geschnitten; so wirkt sie gleich groß wie die übrigen Schriften. */
  font-size-adjust: 0.52;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

#meer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: -2;
}
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- Grundbausteine ---------- */

.etikett {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--leise);
  text-transform: uppercase;
}
.hinweis { font-size: 12px; color: var(--leise); margin: 10px 0 0; text-align: center; }

.tafel {
  background: rgba(10, 22, 40, 0.92);
  box-shadow: var(--kante), var(--schatten);
  padding: 18px 20px 20px;
  margin: 0 auto 22px;
  width: min(560px, 100%);
}
.tafel-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tafel-kopf h2 {
  font: 600 13px var(--pixel);
  letter-spacing: 0.2em;
  margin: 0;
  white-space: nowrap;
}
.tafel-kopf::after {
  content: '';
  flex: 1;
  order: 1;
  border-top: 2px dotted var(--linie-hell);
}
.tafel-kopf > :not(h2) { order: 2; }
.zaehler { font: 600 13px var(--pixel); color: var(--cyan); }

.knopf, .knopf-gross, .knopf-leise, .knopf-icon, .knopf-senden {
  border: 0;
  background: none;
  font-family: var(--pixel);
  letter-spacing: 0.14em;
  transition: transform 80ms, background 120ms, color 120ms;
}
.knopf {
  background: var(--tafel-hell);
  box-shadow: 0 0 0 2px var(--linie-hell);
  padding: 10px 16px;
  font-size: 13px;
}
.knopf:hover { background: #16304f; color: var(--cyan); }
.knopf:active, .knopf-gross:active { transform: translateY(2px); }
.knopf-gross {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--tief);
  background: var(--cyan);
  box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--cyan), 0 5px 0 4px #157a8f;
}
.knopf-gross:hover { background: #8cefff; }
.knopf-gross.knopf-zweit { background: var(--gold); box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--gold), 0 5px 0 4px #9a7420; }
.knopf-gross.knopf-zweit:hover { background: #ffe29a; }
.solo-text { margin: 0 0 16px; font-size: 13px; color: var(--leise); }
.knopf-gross:disabled {
  background: var(--tafel-hell);
  color: var(--leise);
  box-shadow: 0 0 0 2px var(--linie-hell);
  cursor: not-allowed;
  transform: none;
}
.knopf-leise {
  display: block;
  margin: 14px auto 0;
  color: var(--leise);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.knopf-leise:hover { color: var(--pink); }
.knopf-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--tafel);
  box-shadow: 0 0 0 2px var(--linie);
  font-size: 15px;
  font-weight: 700;
  color: var(--leise);
}
.knopf-icon:hover { color: var(--cyan); box-shadow: 0 0 0 2px var(--linie-hell); }

.feld { display: block; margin-bottom: 14px; }
.feld input, .code-zeile input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--tief);
  border: 2px solid var(--linie);
  outline: none;
  font-size: 16px;
}
.feld input:focus, .code-zeile input:focus { border-color: var(--cyan); }
input::placeholder { color: var(--leise); opacity: 0.6; }

.segmente {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.segmente button {
  border: 0;
  padding: 10px 6px;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie);
  font: 600 13px var(--pixel);
  letter-spacing: 0.08em;
  color: var(--leise);
}
.segmente button[aria-checked='true'] {
  color: var(--cyan);
  box-shadow: 0 0 0 2px var(--cyan);
  background: rgba(77, 227, 255, 0.08);
}

.code-zeile { display: flex; gap: 10px; }
.code-zeile input {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font: 700 20px var(--pixel);
  text-align: center;
}
.code-zeile .knopf { flex-shrink: 0; }

/* ---------- Kopfleiste ---------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
}
.marke {
  font: 700 16px var(--logo);
  letter-spacing: 0.16em;
  color: var(--text);
  text-decoration: none;
}
.marke:hover { color: var(--gold); }
.leiste-mitte { font: 600 14px var(--pixel); letter-spacing: 0.2em; }
.leiste-mitte b { color: var(--gold); margin-left: 6px; }
.leiste-rechts { display: flex; gap: 10px; }

/* ---------- Start ---------- */

.ansicht { padding: 10px 16px 60px; }
.titel { text-align: center; margin: 12px auto 30px; max-width: 560px; }
#titelFisch {
  width: 128px;
  height: 88px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto -6px;
}
.logo {
  position: relative;
  margin: 0;
  font: 700 clamp(44px, 10vw, 76px) / 1 var(--logo);
  letter-spacing: 0.06em;
  color: #f6f9ff;
  text-shadow: 3px 0 0 rgba(255, 93, 143, 0.75), -3px 0 0 rgba(77, 227, 255, 0.75), 0 6px 0 rgba(0, 0, 0, 0.4);
}
.unterzeile {
  margin: 10px 0 18px;
  font: 600 16px var(--pixel);
  letter-spacing: 0.6em;
  color: var(--cyan);
}
.einleitung { color: #a9bcd8; font-size: 14px; margin: 0; }

.figuren {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.figur {
  border: 0;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie);
  padding: 10px 2px 8px;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.figur img { width: 40px; height: 46px; object-fit: contain; image-rendering: pixelated; filter: saturate(0.5) brightness(0.75); transition: filter 120ms, transform 120ms; }
.figur span { font-size: 9px; letter-spacing: 0.1em; color: var(--leise); text-transform: uppercase; }
.figur:hover img { filter: none; transform: translateY(-2px); }
.figur[aria-checked='true'] { box-shadow: 0 0 0 2px var(--cyan); background: rgba(77, 227, 255, 0.07); }
.figur[aria-checked='true'] img { filter: none; }
.figur[aria-checked='true'] span { color: var(--text); }
.figur[aria-disabled='true'] { opacity: 0.35; }

/* ---------- Lobby ---------- */

.lobby-code { text-align: center; }
.grosser-code {
  font: 700 64px/1.1 var(--pixel);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: var(--gold);
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
  margin: 4px 0 12px;
}
.plaetze { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.platz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie);
  min-height: 56px;
}
.platz img { width: 34px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.platz b { font: 600 17px var(--pixel); letter-spacing: 0.05em; }
.platz .marken { margin-left: auto; display: flex; gap: 6px; }
.platz.frei { box-shadow: none; background: transparent; border: 2px dashed var(--linie); justify-content: center; color: var(--leise); font-size: 13px; }
.platz.du { box-shadow: 0 0 0 2px var(--cyan); }
.marke-klein {
  font: 600 10px var(--pixel);
  letter-spacing: 0.14em;
  padding: 3px 7px;
  background: var(--tafel-hell);
  color: var(--leise);
}
.marke-klein.host { color: var(--gold); }
.marke-klein.weg { color: var(--rot); }

.regler { display: grid; gap: 12px; }
.regel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
}
.regel-name { font-size: 14px; }
.regel-name small { display: block; font-size: 11px; color: var(--leise); }
.stepper { display: flex; align-items: center; box-shadow: 0 0 0 2px var(--linie); background: var(--tief); }
.stepper button { border: 0; background: none; width: 34px; height: 34px; font: 700 16px var(--pixel); color: var(--cyan); }
.stepper button:hover:not(:disabled) { background: var(--tafel-hell); }
.stepper button:disabled { color: var(--linie-hell); cursor: default; }
.stepper output { min-width: 74px; text-align: center; font: 600 15px var(--pixel); letter-spacing: 0.05em; }
.lobby-aktion { width: min(560px, 100%); margin: 8px auto 0; }

/* ---------- Spiel ---------- */

.ansicht-spiel {
  display: grid;
  grid-template-columns: 1fr 240px;
  /* Feste Kartenzeile: Wächst die Karte (z. B. durch die Auflösung), bleibt die Bühne gleich groß
     und die Figuren bleiben an ihrem Platz. Die Karte ragt dann über die Bühne. */
  grid-template-rows: 112px 1fr auto;
  grid-template-areas: 'frage verlauf' 'buehne verlauf' 'dock verlauf';
  gap: 14px 22px;
  height: calc(100vh - 58px);
  height: calc(100dvh - 58px);
  padding: 0 22px 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.frage {
  grid-area: frage;
  justify-self: center;
  align-self: start;
  position: relative;
  z-index: 3;
  width: min(680px, 100%);
  text-align: center;
  background: rgba(10, 22, 40, 0.92);
  box-shadow: var(--kante), var(--schatten);
  padding: 14px 22px 16px;
  transition: transform 200ms;
}
.frage h2 {
  margin: 6px 0 0;
  font: 600 clamp(20px, 2.6vw, 30px) / 1.25 var(--pixel);
  letter-spacing: 0.02em;
}
.frage.neu { animation: frage-rein 500ms cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes frage-rein { from { transform: translateY(-14px) scale(0.96); opacity: 0; } }
.aufloesung { margin-top: 12px; padding-top: 12px; border-top: 2px dotted var(--linie-hell); font-size: 13px; color: var(--leise); }
.aufloesung b { font-weight: 600; }
.aufloesung .perle { color: var(--stufe-krillion); }

.buehne { grid-area: buehne; position: relative; min-height: 300px; }
#buehneCanvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sitze { position: absolute; inset: 0; }

.sitz {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  width: 150px;
  transition: opacity 300ms, filter 300ms;
}
.sitz-figur { width: 60px; height: 70px; image-rendering: pixelated; object-fit: contain; transition: transform 200ms; }
.sitz.dran .sitz-figur { animation: wippen 900ms ease-in-out infinite; }
@keyframes wippen { 50% { transform: translateY(-4px); } }
.sitz.getroffen .sitz-figur { animation: getroffen 600ms steps(6); }
@keyframes getroffen { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); filter: brightness(3); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); filter: brightness(2); } 80% { transform: translateX(3px); } }
.sitz.raus { opacity: 0.35; filter: grayscale(1); }
.sitz.raus .sitz-figur { transform: rotate(180deg); }
.sitz.weg .sitz-figur { opacity: 0.4; }

.schild {
  margin-top: 8px;
  padding: 7px 10px 8px;
  background: rgba(5, 10, 20, 0.88);
  box-shadow: 0 0 0 2px var(--linie);
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 110px;
}
.sitz.dran .schild { box-shadow: 0 0 0 2px var(--gold); }
.sitz.du .schild-name::after { content: ' (du)'; color: var(--leise); font-size: 11px; }
.schild-name { font: 600 15px var(--pixel); letter-spacing: 0.04em; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.herzen { display: flex; gap: 3px; height: 11px; }
.herz { width: 12px; height: 11px; color: var(--pink); }
.herz svg { display: block; width: 100%; height: 100%; }
.herz.leer { color: #22365a; }
.herz.weg { animation: herz-weg 800ms ease-out; }
@keyframes herz-weg { 0% { color: #fff; transform: scale(1.9); } 40% { transform: scale(0.6) translateY(4px); } }
.herz.neu { animation: herz-neu 700ms cubic-bezier(0.2, 1.7, 0.4, 1); }
@keyframes herz-neu { from { transform: scale(0.1); } }
.meter { width: 84px; height: 5px; background: #13243f; position: relative; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--cyan); transition: width 400ms steps(8); }
.meter.voll i { background: var(--gold); }

.blase {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 12px 6px;
  background: #f4f7ff;
  color: var(--tief);
  font: 600 16px var(--pixel);
  box-shadow: 0 0 0 2px var(--tief), 0 4px 0 2px rgba(0, 0, 0, 0.3);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.blase::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: #f4f7ff;
}
.blase.tippt { background: rgba(244, 247, 255, 0.85); }
.blase.tippt span::after { content: '▍'; animation: blinken 900ms steps(1) infinite; color: var(--leise); }
@keyframes blinken { 50% { opacity: 0; } }
.blase.falsch { background: #3a0f1c; color: #ffb3c4; animation: wackeln 380ms; }
.blase.falsch::after { border-top-color: #3a0f1c; }
.blase .stufe { display: block; font: 600 10px var(--mono); letter-spacing: 0.14em; margin-top: 2px; text-transform: uppercase; }
@keyframes wackeln { 20% { transform: translateX(calc(-50% - 6px)); } 40% { transform: translateX(calc(-50% + 6px)); } 60% { transform: translateX(calc(-50% - 3px)); } 80% { transform: translateX(calc(-50% + 3px)); } }

.flieger {
  position: absolute;
  pointer-events: none;
  font: 700 15px var(--pixel);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: translate(-50%, 0);
  animation: fliegen 1400ms ease-out forwards;
  text-shadow: 0 2px 0 var(--tief);
}
@keyframes fliegen { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -46px); } }

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 140px var(--pixel);
  color: var(--gold);
  text-shadow: 0 8px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.countdown.tick { animation: zaehlen 900ms ease-out; }
@keyframes zaehlen { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; transform: scale(1); } }

.verlauf {
  grid-area: verlauf;
  align-self: start;
  margin-top: 0;
  background: rgba(10, 22, 40, 0.85);
  box-shadow: var(--kante);
  padding: 16px 16px 10px;
  max-height: 100%;
  overflow: auto;
}
.verlauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.verlauf li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid #13243f;
}
.verlauf li i { width: 8px; height: 8px; background: currentColor; }
.verlauf li span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf li small { grid-column: 2; color: var(--leise); font-size: 11px; margin-top: -3px; }
.verlauf li.neu { animation: liste-rein 400ms ease-out; }
@keyframes liste-rein { from { background: rgba(77, 227, 255, 0.15); } }
.verlauf li.verlauf-leer { display: block; border: 0; color: var(--leise); font-size: 12px; padding: 4px 0 8px; }

.dock {
  grid-area: dock;
  justify-self: center;
  width: min(620px, 100%);
  position: relative;
}
.dock-status {
  text-align: center;
  font: 600 13px var(--pixel);
  letter-spacing: 0.16em;
  color: var(--leise);
  margin-bottom: 8px;
  min-height: 18px;
}
.dock-status b { color: var(--gold); font-weight: 600; }
.dock-aendern {
  font: inherit;
  letter-spacing: inherit;
  color: var(--gold);
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 10px;
  cursor: pointer;
}
.dock-zeile {
  display: flex;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie-hell), var(--schatten);
}
.dock input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  padding: 16px 18px;
  font: 600 22px var(--pixel);
  letter-spacing: 0.03em;
}
.dock input:disabled { color: var(--leise); }
.knopf-senden { width: 64px; font-size: 22px; color: var(--cyan); background: var(--tafel-hell); }
.knopf-senden:disabled { color: var(--linie-hell); cursor: default; }
.dock.aktiv .dock-zeile { box-shadow: 0 0 0 2px var(--cyan), var(--schatten); }
.dock.aktiv.heiss .dock-zeile { box-shadow: 0 0 0 2px var(--pink), var(--schatten); }
.dock.wackelt { animation: dock-wackeln 380ms; }
@keyframes dock-wackeln { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.lunte { height: 4px; margin-top: 8px; background: #0a1322; overflow: hidden; }
.lunte-glut { height: 100%; width: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(0); }
.dock.heiss .lunte-glut { background: var(--pink); animation: glimmen 400ms steps(2) infinite; }
@keyframes glimmen { 50% { opacity: 0.5; } }

/* ---------- Spielmodus-Wahl ---------- */

.modi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modus {
  border: 0;
  text-align: left;
  padding: 14px 14px 12px;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie);
  display: grid;
  gap: 6px;
  align-content: start;
}
.modus b { font: 700 15px var(--pixel); letter-spacing: 0.12em; color: var(--leise); }
.modus span { font-size: 12px; line-height: 1.45; color: var(--leise); }
.modus[aria-checked='true'] { box-shadow: 0 0 0 2px var(--cyan); background: rgba(77, 227, 255, 0.07); }
.modus[aria-checked='true'] b { color: var(--cyan); }
.modus[aria-checked='true'] span { color: var(--text); }
.modus:disabled { cursor: default; }
.modus:disabled:not([aria-checked='true']) { opacity: 0.45; }

/* ---------- Tiefsee-Duell ---------- */

.ansicht-duell {
  position: relative;
  display: grid;
  gap: 18px;
  justify-items: center;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 4px;
}
.duell-fortschritt { display: flex; gap: 6px; }
.duell-fortschritt i { width: 14px; height: 14px; background: #13243f; box-shadow: 0 0 0 2px var(--tief); }
.duell-fortschritt i.fertig { background: var(--linie-hell); }
.duell-fortschritt i.jetzt { background: var(--pink); }
.duell-zeit { margin-top: 14px; }
.ansicht-duell .frage { width: 100%; grid-area: auto; }
.ansicht-duell .dock { grid-area: auto; width: min(620px, 100%); }
.duell-dock.eingeloggt .dock-zeile { box-shadow: 0 0 0 2px var(--stufe-selten), var(--schatten); }
.duell-mitte { width: min(620px, 100%); display: grid; gap: 16px; }
.duell-spieler { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duell-spieler li {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 14px;
  background: rgba(5, 10, 20, 0.88);
  box-shadow: 0 0 0 2px var(--linie);
}
.duell-spieler li.du { box-shadow: 0 0 0 2px var(--cyan); }
.duell-spieler img { width: 34px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.duell-spieler b { font: 600 16px var(--pixel); }
.duell-spieler .punkte { font: 700 20px var(--pixel); color: var(--gold); text-align: right; }
.duell-spieler .zustand { grid-column: 2 / 4; font-size: 13px; color: var(--leise); min-height: 18px; }
.duell-spieler .zustand.fertig { color: var(--stufe-selten); }
.duell-spieler .antwort { font: 600 15px var(--pixel); color: var(--text); }
.duell-spieler .antwort small { font: 500 11px var(--mono); letter-spacing: 0.1em; margin-left: 8px; text-transform: uppercase; }
.duell-spieler .plus { color: var(--gold); margin-left: 8px; font-family: var(--pixel); }
.duell-spieler .crash { color: var(--pink); font-size: 11px; letter-spacing: 0.1em; margin-left: 8px; }
.duell-spieler li.aufgedeckt { animation: liste-rein 500ms ease-out both; }
.duell-aufloesung {
  font-size: 13px;
  color: var(--leise);
  text-align: center;
  padding: 12px 16px;
  border-top: 2px dotted var(--linie-hell);
}
.duell-aufloesung .perle { color: var(--stufe-krillion); }
.ansicht-duell .countdown { position: fixed; inset: 0; z-index: 30; }
.duell-zeit.heiss .lunte-glut { background: var(--pink); animation: glimmen 400ms steps(2) infinite; }
.sieger-punkte { margin: 0; font: 600 16px var(--pixel); letter-spacing: 0.12em; color: var(--cyan); }
.end-punkte { font-size: 14px; color: var(--gold); margin-left: 8px; }
.regeln-zwischen { font-size: 13px; color: var(--leise); margin: -6px 0 18px; }
.regeln-zwischen b { color: var(--cyan); font-weight: 600; }

/* ---------- Ende ---------- */

.sieger { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sieger img { width: 90px; height: 104px; image-rendering: pixelated; object-fit: contain; animation: wippen 1100ms ease-in-out infinite; }
.sieger-name { font: 700 44px var(--pixel); margin: 4px 0 0; color: var(--gold); text-shadow: 0 5px 0 rgba(0, 0, 0, 0.4); }
.tabelle { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tabelle li {
  display: grid;
  grid-template-columns: 34px 46px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--linie);
}
.tabelle li:first-child { box-shadow: 0 0 0 2px var(--gold); }
.tabelle .rang { font: 700 24px var(--pixel); color: var(--leise); }
.tabelle li:first-child .rang { color: var(--gold); }
.tabelle img { width: 34px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.tabelle b { font: 600 17px var(--pixel); }
.tabelle .zahlen { grid-column: 3; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--leise); }
.tabelle .zahlen em { font-style: normal; color: var(--text); }
.tabelle .beste { grid-column: 3; font-size: 12px; color: var(--leise); }

/* ---------- Dialog & Meldung ---------- */

.dialog {
  border: 0;
  padding: 18px 22px 22px;
  width: min(520px, calc(100% - 32px));
  background: var(--tafel);
  color: var(--text);
  box-shadow: var(--kante), 0 20px 60px rgba(0, 0, 0, 0.6);
}
.dialog::backdrop { background: rgba(2, 6, 14, 0.75); }
.regeln { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; }
.regeln li::marker { color: var(--cyan); font-family: var(--pixel); }
.stufen-legende { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; margin: 0; font-size: 13px; }
.stufen-legende dt { font: 600 14px var(--pixel); }
.stufen-legende dd { margin: 0; color: var(--leise); }
.stufen-legende .pkt { text-align: right; color: var(--text); font-family: var(--pixel); }

.meldung {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 12px 18px;
  background: #2a0d18;
  color: #ffd0dc;
  box-shadow: 0 0 0 2px var(--pink), var(--schatten);
  font-size: 14px;
  max-width: calc(100% - 32px);
}
.meldung.gut { background: #0c2a22; color: #c9f7da; box-shadow: 0 0 0 2px var(--stufe-selten), var(--schatten); }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 860px) {
  .ansicht-spiel {
    grid-template-columns: 1fr;
    grid-template-areas: 'frage' 'buehne' 'dock' 'verlauf';
    grid-template-rows: auto minmax(320px, 1fr) auto auto;
    height: auto;
    min-height: calc(100dvh - 58px);
    padding: 0 16px 20px;
  }
  .verlauf { max-height: 220px; }
  .sitz { width: 110px; }
  .sitz-figur { width: 44px; height: 52px; }
  .schild { min-width: 90px; padding: 5px 8px 6px; }
  .schild-name { font-size: 13px; max-width: 100px; }
  .blase { font-size: 14px; max-width: 170px; }
}
@media (max-width: 520px) {
  .modi { grid-template-columns: 1fr; }
  .figuren { grid-template-columns: repeat(4, 1fr); }
  .grosser-code { font-size: 48px; }
  .leiste { padding: 10px 16px; }
  .marke { font-size: 13px; }
  .dock input { font-size: 18px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- Einzelspieler: Tagestauchgang ---------- */

.solo-endlos { display: block; width: 100%; margin-top: 12px; }
body.tg-aktiv { overflow: hidden; }
body.tg-aktiv .leiste { position: fixed; left: 0; right: 0; }
.ansicht-tauchgang { position: fixed; inset: 0; padding: 0; overflow: hidden; }

.tg-welt { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.tg-dunkel { position: absolute; inset: 0; background: #01040a; opacity: 0; pointer-events: none; }
.tg-oberflaeche {
  position: absolute;
  left: 0; right: 0; top: -420px; height: 420px;
  background: linear-gradient(#7fb7d8, #b4daec 55%, #e4f3f9);
}
.tg-sonne { position: absolute; right: 16%; top: 215px; width: 60px; image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(255, 210, 120, 0.7)); }
.tg-wolke { position: absolute; image-rendering: pixelated; opacity: 0.95; animation: wolke linear infinite alternate; }
@keyframes wolke { to { transform: translateX(60px); } }
.tg-boot { position: absolute; left: 24%; bottom: -8px; width: 190px; image-rendering: pixelated; transform-origin: 50% 100%; animation: schaukeln 3.4s ease-in-out infinite; }
@keyframes schaukeln { 50% { transform: translateY(3px) rotate(-1.5deg); } }
.tg-schnur { position: absolute; left: calc(24% + 157px); top: 100%; width: 2px; height: 90px; background: linear-gradient(rgba(215, 228, 245, 0.8), rgba(215, 228, 245, 0)); }
.tg-wellen { position: absolute; left: 0; right: 0; top: -6px; height: 12px; background-repeat: repeat-x; image-rendering: pixelated; animation: wellen 6s linear infinite; }
@keyframes wellen { to { background-position: 24px 0; } }

.tg-lineal { position: absolute; top: 0; right: 0; width: 70px; height: 100%; border-left: 1px solid rgba(125, 147, 184, 0.25); }
.tg-lineal i { position: absolute; right: 0; width: 8px; height: 1px; background: rgba(125, 147, 184, 0.35); }
.tg-lineal i.gross { width: 16px; background: rgba(125, 147, 184, 0.7); }
.tg-lineal i.gross::after { content: attr(data-m); position: absolute; right: 22px; top: -7px; font-size: 10px; color: var(--leise); white-space: nowrap; }
.tg-du {
  position: absolute; left: -4px; transform: translate(-100%, -50%);
  font: 600 10px var(--pixel); letter-spacing: 0.12em; color: var(--pink);
}
.tg-du::after { content: ' ◀'; }

.tg-zone { position: absolute; font-size: 12px; letter-spacing: 0.06em; color: rgba(160, 190, 225, 0.55); white-space: nowrap; transform: translateY(-50%); }
.tg-zone.links { left: 4%; }
.tg-zone.rechts { right: 90px; }
.tg-zone.gross { font: 600 14px var(--pixel); letter-spacing: 0.24em; color: rgba(200, 220, 245, 0.7); }

.tg-linie {
  position: absolute; left: 6%; right: 80px; height: 0;
  border-top: 2px dashed currentColor; opacity: 0.85;
  animation: linie-rein 500ms ease-out both;
}
.tg-linie span { position: absolute; right: 0; top: -22px; display: flex; align-items: center; gap: 6px; font: 600 11px var(--pixel); letter-spacing: 0.14em; }
.tg-linie img { height: 14px; image-rendering: pixelated; }
@keyframes linie-rein { from { opacity: 0; transform: scaleX(0.6); } }

.tg-taucher { position: absolute; left: 14%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.tg-taucher img { height: 72px; image-rendering: pixelated; animation: wippen 1.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(77, 227, 255, 0.25)); }
.tg-schild {
  position: absolute; left: 100%; top: 50%; margin-left: 18px; transform: translateY(-50%) rotate(-4deg);
  background: #f4f7ff; color: var(--tief); padding: 6px 12px 5px; white-space: nowrap;
  font: 600 16px var(--pixel); box-shadow: 0 0 0 2px var(--tief), 0 4px 0 2px rgba(0, 0, 0, 0.3);
}

.tg-hud {
  position: absolute; top: 58px; left: 0; right: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px;
  padding: 0 20px; pointer-events: none;
}
.tg-anzeige {
  justify-self: start; display: grid; gap: 2px; min-width: 110px;
  padding: 8px 14px 10px; background: rgba(5, 10, 20, 0.85); box-shadow: var(--kante);
}
.tg-anzeige.rechts { justify-self: end; text-align: right; }
.tg-anzeige b { font: 700 24px var(--pixel); color: var(--cyan); }
.tg-anzeige.rechts b { color: var(--pink); }
.tg-mitte { display: grid; justify-items: center; gap: 5px; padding: 6px 14px 8px; background: rgba(5, 10, 20, 0.85); box-shadow: var(--kante); }
.tg-fortschritt { display: flex; gap: 5px; }
.tg-fortschritt i { width: 14px; height: 14px; background: #13243f; box-shadow: 0 0 0 2px var(--tief); }
.tg-fortschritt i.jetzt { background: var(--pink); animation: glimmen 900ms steps(2) infinite; }

.tg-karte {
  position: absolute; z-index: 4; left: 50%; top: 22%; transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); padding: 20px 24px 18px;
  background: rgba(8, 18, 34, 0.94); box-shadow: var(--kante), var(--schatten);
}
.tg-karte.neu { animation: frage-rein 500ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.tg-karte .etikett { color: var(--pink); }
.tg-karte h2 { margin: 10px 0 12px; font: 600 clamp(22px, 3vw, 30px) / 1.3 var(--pixel); }
.tg-unter { margin: 0; font-size: 12px; color: var(--leise); letter-spacing: 0.08em; }
.tg-status {
  position: absolute; z-index: 4; left: 50%; bottom: 90px; transform: translateX(-50%); margin: 0;
  padding: 8px 16px; background: rgba(5, 10, 20, 0.85); box-shadow: var(--kante);
  font-size: 13px; color: var(--leise); letter-spacing: 0.06em; white-space: nowrap;
}
.tg-status b { color: var(--cyan); }

.tg-dock {
  position: absolute; z-index: 4; left: 50%; bottom: 60px; transform: translateX(-50%);
  width: min(620px, calc(100% - 32px)); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
}
.tg-uhr { position: relative; width: 52px; height: 52px; }
.tg-uhr svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tg-uhr .ring { fill: rgba(5, 10, 20, 0.9); stroke: #13243f; stroke-width: 3; }
.tg-uhr .bogen { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 113; stroke-dashoffset: 0; }
.tg-dock.heiss .tg-uhr .bogen { stroke: var(--pink); }
.tg-uhr b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px var(--pixel); color: var(--cyan); }
.tg-dock.heiss .tg-uhr b { color: var(--pink); }
.tg-dock input {
  min-width: 0; padding: 15px 16px; border: 0; outline: none;
  background: rgba(5, 10, 20, 0.92); box-shadow: 0 0 0 2px var(--cyan), var(--schatten);
  font: 600 20px var(--pixel);
}
.tg-dock.heiss input { box-shadow: 0 0 0 2px var(--pink), var(--schatten); }
.tg-tauchen { border: 0; padding: 0 20px; height: 52px; background: var(--pink); color: var(--tief); font: 700 15px var(--pixel); letter-spacing: 0.16em; box-shadow: 0 4px 0 #a8325a; }
.tg-tauchen:active { transform: translateY(2px); }
.tg-hinweis { grid-column: 1 / -1; margin: 0; min-height: 18px; text-align: center; font-size: 13px; color: #ffb3c4; }
.tg-dock.wackelt { animation: tg-wackeln 380ms; }
@keyframes tg-wackeln { 20% { transform: translateX(calc(-50% - 8px)); } 40% { transform: translateX(calc(-50% + 8px)); } 60% { transform: translateX(calc(-50% - 4px)); } 80% { transform: translateX(calc(-50% + 4px)); } }

.tg-ergebnis {
  position: absolute; z-index: 4; left: 50%; top: 18%; transform: translateX(-50%);
  width: min(520px, calc(100% - 32px)); text-align: center; display: grid; justify-items: center; gap: 2px;
  padding: 26px 24px 24px; background: rgba(4, 9, 18, 0.9); box-shadow: var(--kante), var(--schatten);
}
.tg-ergebnis.neu { animation: frage-rein 600ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.tg-ergebnis img { height: 56px; image-rendering: pixelated; margin-bottom: 8px; filter: drop-shadow(0 0 12px currentColor); }
.tg-ergebnis h2 { margin: 0; font: 700 40px var(--pixel); letter-spacing: 0.12em; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.tg-erg-antwort { margin: 10px 0 4px; font: 600 20px var(--pixel); }
.tg-erg-punkte { margin: 6px 0; font: 600 18px var(--pixel); color: var(--text); }
.tg-erg-text { margin: 4px 0 0; font-size: 13px; color: var(--leise); }
.tg-erg-perle { margin: 10px 0 0; font-size: 13px; color: var(--leise); min-height: 18px; }
.tg-erg-perle b { color: var(--stufe-krillion); font-weight: 600; }
.tg-weiter { margin-top: 22px; padding: 14px 30px; font-size: 15px; box-shadow: 0 0 0 2px var(--pink); background: rgba(5, 10, 20, 0.9); }

.tg-auswertung {
  position: absolute; z-index: 6; inset: 58px 0 0; overflow-y: auto;
  background: linear-gradient(rgba(3, 7, 15, 0.86), rgba(3, 7, 15, 0.96));
  padding: 24px 16px 60px;
}
.tg-auswertung > * { width: min(560px, 100%); margin-left: auto; margin-right: auto; }
.tg-aw-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.marke-aw { font: 700 20px var(--logo); letter-spacing: 0.1em; text-shadow: 2px 0 0 rgba(255, 93, 143, 0.7), -2px 0 0 rgba(77, 227, 255, 0.7); }
.tg-aw-punkte { display: flex; align-items: baseline; gap: 14px; }
.tg-aw-punkte b { font: 700 76px/1 var(--pixel); }
.tg-aw-punkte span { font: 600 15px var(--pixel); color: var(--cyan); }
.tg-aw-band { margin: 6px auto 16px; font: 600 15px var(--pixel); }
.tg-kurve { display: block; width: 100%; height: auto; margin-top: 6px; }
.tg-kurve .flaeche { fill: rgba(77, 227, 255, 0.12); }
.tg-kurve .linie { fill: none; stroke: var(--cyan); stroke-width: 1.5; }
.tg-kurve .achse { stroke: var(--linie-hell); }
.tg-kurve text { fill: var(--leise); font: 8px var(--mono); }
.tg-kurve .du { stroke: var(--pink); stroke-width: 1.5; }
.tg-kurve .du-punkt { fill: var(--pink); }
.tg-kurve .du-text { fill: var(--pink); font: 600 8px var(--pixel); }
.tg-aw-prozent { margin: 8px auto 0; font: 600 13px var(--pixel); letter-spacing: 0.14em; color: var(--cyan); }
.tg-aw-prozent.leise { color: var(--leise); letter-spacing: 0.04em; font: 13px var(--mono); }
.tg-aw-block { margin-top: 28px; }
.tg-log { display: block; width: 100%; height: auto; }
.tg-log text { fill: var(--leise); font: 9px var(--mono); }
.tg-log .leer { fill: none; stroke: var(--linie-hell); stroke-dasharray: 2 3; }
.tg-log image { image-rendering: pixelated; }
.tg-baender { margin: 0; display: grid; gap: 4px; }
.tg-baender div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 6px 10px; font-size: 13px; opacity: 0.55; }
.tg-baender div.an { opacity: 1; background: rgba(77, 227, 255, 0.07); box-shadow: 0 0 0 2px var(--linie-hell); }
.tg-baender dt { font: 600 13px var(--pixel); }
.tg-baender dd { margin: 0; }
.tg-aw-knoepfe { display: grid; gap: 12px; margin-top: 28px; }
.tg-aw-knoepfe .knopf { padding: 14px; }
.tg-rangliste, .tg-fang { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tg-rangliste li { display: grid; grid-template-columns: 28px 30px 1fr auto 44px; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(5, 10, 20, 0.8); box-shadow: 0 0 0 2px var(--linie); }
.tg-rangliste li.du { box-shadow: 0 0 0 2px var(--cyan); }
.tg-rangliste .rang { font: 700 15px var(--pixel); color: var(--leise); }
.tg-rangliste img { height: 30px; image-rendering: pixelated; justify-self: center; }
.tg-rangliste b { font: 600 15px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-rangliste .zeichen { font-size: 12px; letter-spacing: 1px; }
.tg-rangliste .pkt, .tg-fang .pkt { font: 700 16px var(--pixel); color: var(--gold); text-align: right; }
.tg-fang li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 10px 12px; background: rgba(5, 10, 20, 0.8); box-shadow: 0 0 0 2px var(--linie); }
.tg-fang .nr { font: 700 15px var(--pixel); color: var(--leise); }
.tg-fang small { display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--leise); }
.tg-fang b { display: block; margin-top: 3px; font: 600 17px var(--pixel); }
.tg-fang em { display: block; font-style: normal; font-size: 12px; color: var(--leise); margin-top: 2px; }
.tg-logbuch { margin: 0; font: 600 13px var(--pixel); letter-spacing: 0.1em; color: var(--leise); }
.tg-logbuch b, .tg-naechster b { color: var(--text); }
.tg-naechster { margin: 10px 0 0; font: 600 13px var(--pixel); letter-spacing: 0.1em; color: var(--leise); }

@media (max-width: 640px) {
  .tg-hud { padding: 0 12px; gap: 8px; }
  .tg-anzeige { min-width: 0; padding: 6px 10px 8px; }
  .tg-anzeige b { font-size: 18px; }
  .tg-fortschritt i { width: 10px; height: 10px; }
  .tg-mitte .etikett { font-size: 9px; }
  .tg-karte { top: 19%; }
  .tg-zone { display: none; }
  .tg-zone.gross { display: block; font-size: 11px; }
  .tg-lineal { width: 44px; }
  .tg-linie { right: 50px; }
  .tg-taucher { left: 18%; }
  .tg-taucher img { height: 54px; }
  .tg-dock { grid-template-columns: auto 1fr; bottom: 24px; }
  .tg-tauchen { grid-column: 1 / -1; height: 46px; }
  .tg-ergebnis h2 { font-size: 30px; }
  .tg-aw-punkte b { font-size: 60px; }
}

.feier { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; image-rendering: pixelated; }

/* Große Fragen wie im Original: VT323 mit einem Pixel Versatz wirkt kräftig und bleibt scharf. */
.frage h2, .tg-karte h2, .tg-ergebnis h2, .sieger-name, .grosser-code, .tg-aw-punkte b {
  text-shadow: 1px 0 0 currentColor;
  letter-spacing: 0.02em;
}

/* Umschalter in der Lobby */
.regel-wahl { grid-template-columns: 1fr; }
.wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl button { flex: 1 1 0; min-width: 120px; border: 0; padding: 9px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 15px var(--pixel); letter-spacing: 0.08em; color: var(--leise); }
.wahl button[aria-checked='true'] { color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); background: rgba(77, 227, 255, 0.08); }
.wahl button:disabled { cursor: default; }
.wahl button:disabled:not([aria-checked='true']) { opacity: 0.5; }

/* Tiefsee-Speed */
.duell-spieler li.speed-zeile { grid-template-columns: 46px 1fr auto; }
.speed-balken { grid-column: 2 / 4; height: 8px; background: #13243f; box-shadow: 0 0 0 2px var(--tief); overflow: hidden; }
.speed-balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--stufe-selten)); transition: width 300ms steps(10); }
.duell-spieler li.du .speed-balken i { background: linear-gradient(90deg, var(--pink), var(--gold)); }
.duell-spieler .combo { margin-left: 8px; font: 15px var(--pixel); color: var(--pink); }
.duell-aufloesung .feed { display: inline-block; margin: 2px 8px; white-space: nowrap; }
.duell-aufloesung .feed b { color: var(--text); font-weight: 500; }

/* ---------- Münzen & Shop ---------- */

.muenze {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  background: radial-gradient(circle at 35% 35%, #fff6d6 0 18%, #ffd166 19% 55%, #c9962a 56% 70%, transparent 71%);
  image-rendering: pixelated;
}
.muenz-knopf {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 0; background: var(--tafel); box-shadow: 0 0 0 2px var(--linie);
  font: 18px var(--pixel); color: var(--gold);
}
.muenz-knopf:hover { box-shadow: 0 0 0 2px var(--gold); }
.muenz-knopf b { font-weight: 400; }
.muenz-gewinn { margin: 8px auto 0; font: 18px var(--pixel); color: var(--gold); text-align: center; }

.figur { position: relative; }
.figur .preis { position: absolute; top: 4px; right: 5px; font: 13px var(--pixel); font-style: normal; color: var(--gold); }
.figur.gesperrt img { filter: grayscale(1) brightness(0.45); }
.figur.gesperrt span { opacity: 0.6; }

.dialog.shop { width: min(720px, calc(100% - 32px)); }
.shop-stand { display: flex; align-items: center; gap: 6px; font: 20px var(--pixel); color: var(--gold); }
.shop-stand b { font-weight: 400; }
.shop-info { margin: -4px 0 16px; font-size: 13px; color: var(--leise); }
.shop-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.shop-figur { display: grid; justify-items: center; gap: 4px; padding: 12px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.shop-figur.gewaehlt { box-shadow: 0 0 0 2px var(--cyan); }
.shop-figur img { width: 50px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.shop-figur.gesperrt img { filter: grayscale(1) brightness(0.5); }
.shop-figur b { font: 18px var(--pixel); font-weight: 400; }
.shop-figur small { font-size: 11px; color: var(--leise); }
.shop-figur .knopf { width: 100%; margin-top: 6px; padding: 8px 6px; font-size: 14px; }
.shop-figur .knopf.kaufen { color: var(--gold); box-shadow: 0 0 0 2px #9a7420; }
.shop-figur .knopf:disabled { opacity: 0.5; cursor: default; }

/* ---------- Gleiche Welle ---------- */

.modi { grid-template-columns: repeat(3, 1fr); }
.duell-spieler li.welle-team { grid-template-columns: auto 1fr auto; }
.welle-figuren { display: flex; gap: 2px; }
.welle-figuren img { width: 30px; height: 36px; }
.duell-spieler li.treffer { box-shadow: 0 0 0 2px var(--stufe-selten); animation: liste-rein 500ms ease-out both; }
.duell-spieler li.daneben { opacity: 0.75; }
.duell-spieler .trenner { margin: 0 8px; color: var(--leise); }
.duell-spieler .mit { margin-left: 8px; font-size: 12px; color: var(--leise); }
.duell-spieler li.treffer .plus { color: var(--stufe-selten); }
#duellKarte.welle h2 { font-size: clamp(26px, 4vw, 40px); }

/* ---------- Launcher ---------- */

.spiele-tafel { width: min(760px, 100%); }
.spiele { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.spiel { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 16px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.spiel:hover { box-shadow: 0 0 0 2px var(--linie-hell); }
.spiel-typ { font: 13px var(--pixel); letter-spacing: 0.16em; color: var(--pink); }
.spiel h3 { margin: 0; font: 28px var(--pixel); letter-spacing: 0.06em; text-shadow: 1px 0 0 currentColor; }
.spiel p { margin: 0 0 10px; font-size: 13px; color: var(--leise); }
.spiel .knopf-gross { font-size: 18px; padding: 12px; }
.spiel.solo .solo-endlos { margin-top: 8px; }
@media (max-width: 640px) { .spiele { grid-template-columns: 1fr; } }

/* Abgabesperre direkt nach Erhalt des Kugelfischs */
.dock.gesperrt .dock-zeile { box-shadow: 0 0 0 2px var(--linie-hell), var(--schatten); }
.dock.gesperrt .knopf-senden { color: var(--linie-hell); }
.dock.gesperrt .knopf-senden::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; animation: sperre 1s linear forwards; }
.knopf-senden { position: relative; }
@keyframes sperre { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Tiefsee-Duell als gemeinsamer Tauchgang ---------- */

.ts-boot { position: absolute; bottom: -5px; width: 114px; transform: translateX(-50%); image-rendering: pixelated; animation: schaukeln 3.4s ease-in-out infinite; }
.ts-taucher { z-index: 2; }
.ts-taucher img { height: 60px; }
.ts-name { font: 15px var(--pixel); letter-spacing: 0.08em; text-shadow: 0 2px 0 var(--tief); white-space: nowrap; }
.ts-schild { left: 50%; top: auto; bottom: 100%; margin: 0 0 8px; transform: translateX(-50%) rotate(-3deg); font-size: 15px; }
.ts-schild small { font: 12px var(--mono); color: #4d6b80; }
.ts-zone { left: 50% !important; transform: translate(-50%, -50%); }
.ts-rangliste {
  position: absolute; z-index: 5; top: 128px; left: 16px; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 4px; min-width: 190px;
}
.ts-rangliste li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 5px 10px; background: rgba(5, 10, 20, 0.85); box-shadow: 0 0 0 2px var(--linie); font-size: 12px; }
.ts-rangliste li.du { box-shadow: 0 0 0 2px var(--cyan); }
.ts-rangliste img { height: 26px; image-rendering: pixelated; justify-self: center; }
.ts-rangliste b { font: 16px var(--pixel); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-rangliste span { color: var(--leise); white-space: nowrap; }
.tg-dock.ohne-uhr { grid-template-columns: 1fr auto auto; }
.tg-dock.ohne-uhr .tg-uhr { display: none; }
.tg-dock.eingeloggt input { box-shadow: 0 0 0 2px var(--stufe-selten), var(--schatten); }
.ts-skip { height: 52px; padding: 0 14px; font-size: 13px; }
.ansicht-tiefsee .countdown { position: absolute; inset: 0; z-index: 6; }
.ts-auswertung .tabelle li { background: rgba(5, 10, 20, 0.9); }
@media (max-width: 640px) {
  .ts-rangliste { top: auto; bottom: 150px; left: 8px; min-width: 0; }
  .ts-rangliste li { grid-template-columns: 22px auto auto; padding: 3px 8px; }
  .tg-dock.ohne-uhr { grid-template-columns: 1fr auto; }
  .ts-skip { grid-column: 1 / -1; height: 40px; }
  .ts-boot { width: 84px; }
}
.tg-karte.unten { top: auto; bottom: 36px; }
.tg-karte.unten h2 { font-size: 22px; margin: 6px 0; }

@media (max-width: 860px) {
  .ansicht-spiel { grid-template-rows: 112px minmax(320px, 1fr) auto auto; }
}

/* ---------- Münzen-Dialog: Reiter, Casino, Börse ---------- */

.dialog.shop { width: min(860px, calc(100% - 32px)); max-height: calc(100vh - 40px); }
.reiter { display: flex; gap: 6px; margin: -4px 0 14px; }
.reiter button { flex: 1; border: 0; padding: 9px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 17px var(--pixel); letter-spacing: 0.12em; color: var(--leise); }
.reiter button[aria-selected='true'] { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: rgba(255, 209, 102, 0.07); }

.einsatz-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.einsatz-zeile input, .zahl-wette input, .handel input { width: 90px; padding: 9px 10px; background: var(--tief); border: 2px solid var(--linie); color: var(--text); font: 18px var(--pixel); outline: none; }
.einsatz-zeile input:focus, .zahl-wette input:focus, .handel input:focus { border-color: var(--gold); }
.einsatz-zeile .knopf { padding: 8px 12px; }
.casino-ergebnis { margin: 12px 0; padding: 10px 14px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 17px var(--pixel); text-align: center; }
.casino-ergebnis.gewonnen { color: var(--stufe-selten); box-shadow: 0 0 0 2px var(--stufe-selten); }
.casino-ergebnis.verloren { color: #ffb3c4; }
.casino-spiele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.casino-spiel { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.casino-spiel h3 { margin: 0; font: 22px var(--pixel); letter-spacing: 0.1em; color: var(--gold); text-align: center; }
.walzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.walze { display: grid; place-items: center; height: 74px; background: #f4f7ff; box-shadow: inset 0 0 0 3px #13243f; }
.walze img { width: 56px; image-rendering: pixelated; }
.auszahlung { margin: 0; font-size: 11px; color: var(--leise); line-height: 1.7; }
.auszahlung img { height: 12px; vertical-align: -2px; image-rendering: pixelated; }
.roulette-feld { display: grid; place-items: center; height: 74px; font: 44px var(--pixel); background: #13243f; box-shadow: inset 0 0 0 3px var(--linie); }
.roulette-feld.rot { background: #a8203a; }
.roulette-feld.schwarz { background: #0a0a10; }
.roulette-feld.gruen { background: #1d7a43; }
.roulette-wetten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.roulette-wetten .knopf { padding: 7px 2px; font-size: 12px; letter-spacing: 0.04em; }
.roulette-wetten .wette-rot { color: #ff8099; }
.zahl-wette { display: flex; gap: 6px; }
.zahl-wette .knopf { flex: 1; }
.muenzwurf-muenze { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6 0 12%, #ffd166 13% 62%, #c9962a 63%); color: #5a3e08; font: 20px var(--pixel); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4); }
.muenzwurf-muenze.dreht { animation: muenze-drehen 900ms ease-out; }
@keyframes muenze-drehen { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(900deg) translateY(-40px); } 100% { transform: rotateY(1800deg) translateY(0); } }
.muenzwurf-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.depot-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 16px var(--pixel); color: var(--leise); }
.depot-zeile b { color: var(--text); font-weight: 400; }
.boerse-raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-top: 12px; }
.aktien-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 48vh; overflow-y: auto; }
.aktien-liste li { display: grid; grid-template-columns: 48px 1fr 70px 62px 64px 44px; align-items: center; gap: 8px; padding: 7px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); cursor: pointer; font-size: 12px; }
.aktien-liste li.gewaehlt { box-shadow: 0 0 0 2px var(--gold); }
.aktien-liste b { font: 16px var(--pixel); font-weight: 400; color: var(--gold); }
.aktie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aktien-liste .kurs { font: 15px var(--pixel); text-align: right; }
.aktien-liste em { font-style: normal; color: var(--cyan); text-align: right; }
.plus { color: var(--stufe-selten); }
.minus { color: #ff8099; }
svg.mini, svg.gross { width: 100%; height: auto; }
svg.mini path, svg.gross path { fill: none; stroke-width: 1.5; stroke: currentColor; }
svg.gross { background: #07101e; box-shadow: inset 0 0 0 2px var(--linie); }
.aktie-detail { display: grid; gap: 8px; align-content: start; padding: 12px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.aktie-kopf { display: flex; justify-content: space-between; gap: 8px; }
.aktie-kopf b { font: 20px var(--pixel); font-weight: 400; }
.aktie-kopf span { font-size: 12px; color: var(--leise); }
.aktie-kurs { font: 30px var(--pixel); }
.aktie-kurs small { font: 14px var(--mono); }
.aktie-detail .hinweis { margin: 0; text-align: left; }
.handel { display: flex; flex-wrap: wrap; gap: 6px; }
.handel .knopf { flex: 1; padding: 9px 6px; }
.handel .kaufen { color: var(--gold); box-shadow: 0 0 0 2px #9a7420; }
.news { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.news li { padding: 6px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.news b { color: var(--gold); font-weight: 600; margin-right: 6px; }
.news .leise { color: var(--leise); }
@media (max-width: 760px) {
  .casino-spiele, .boerse-raster { grid-template-columns: 1fr; }
  .aktien-liste li { grid-template-columns: 44px 1fr 60px 56px; }
  .aktien-liste li svg, .aktien-liste li em { display: none; }
}

/* ---------- Startseite: Casino, Börse, Shop ---------- */

.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.extra { display: grid; gap: 2px; text-align: left; border: 0; padding: 12px 14px; background: var(--tafel); box-shadow: 0 0 0 2px var(--linie); transition: box-shadow 120ms, transform 120ms; }
.extra:hover { box-shadow: 0 0 0 2px var(--gold); transform: translateY(-2px); }
.extra b { font: 20px var(--pixel); font-weight: 400; letter-spacing: 0.08em; color: var(--gold); }
.extra span { font-size: 11px; color: var(--leise); }
@media (max-width: 640px) { .extras { grid-template-columns: 1fr; } }

/* ---------- Casino- und Börsen-Seiten ---------- */

.ansicht-casino { width: min(960px, calc(100% - 32px)); margin: 24px auto 60px; }
.casino-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.casino-kopf h1 { margin: 0; font: 40px var(--logo); color: var(--gold); text-shadow: 0 4px 0 #6b4c0e; letter-spacing: 0.04em; }
.casino-kopf p { margin: 0; color: var(--leise); font-size: 13px; }
#casinoInhalt, #boerseTafel { display: grid; gap: 12px; padding: 18px; background: rgba(10, 22, 40, 0.92); box-shadow: var(--kante), var(--schatten); }
.casino-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.casino-kachel { display: grid; justify-items: center; gap: 6px; border: 0; padding: 22px 12px 18px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); transition: box-shadow 120ms, transform 120ms; }
.casino-kachel:hover { box-shadow: 0 0 0 2px var(--gold); transform: translateY(-3px); }
.casino-kachel img { height: 64px; image-rendering: pixelated; }
.casino-kachel b { font: 24px var(--pixel); font-weight: 400; letter-spacing: 0.1em; color: var(--gold); }
.casino-kachel span { font-size: 12px; color: var(--leise); }
.casino-kachel.gross { grid-column: span 2; background: linear-gradient(135deg, #1a0f2e, var(--tief)); }

.automat { display: grid; gap: 14px; justify-items: center; }
.automat-fenster { display: grid; grid-template-columns: repeat(3, 110px); gap: 8px; padding: 12px; background: #2a0f1c; box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #6b4c0e; }
.automat .walze { height: 100px; overflow: hidden; display: block; }
.walze-band { display: grid; }
.walze-band img { width: 100%; height: 100px; object-fit: contain; padding: 14px; image-rendering: pixelated; }
.automat .auszahlung { font-size: 13px; }
.automat .auszahlung td { padding: 0 10px; }

.kessel { position: relative; height: 64px; overflow: hidden; background: #2a1a08; box-shadow: 0 0 0 3px var(--gold); }
.kessel-band { display: flex; height: 100%; }
.kessel-band span { flex: 0 0 56px; display: grid; place-items: center; font: 26px var(--pixel); color: #fff; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.4); }
.kessel-zeiger { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.kessel-band .rot, .roulette .feld.rot { background: #a8203a; }
.kessel-band .schwarz, .roulette .feld.schwarz { background: #0a0a10; }
.kessel-band .gruen, .roulette .feld.gruen { background: #1d7a43; }
.roulette { display: grid; gap: 10px; }
.roulette-tisch { display: grid; grid-template-columns: 44px repeat(12, 1fr); grid-template-rows: repeat(3, 40px); grid-auto-flow: column; gap: 3px; padding: 8px; background: #0e4a2a; box-shadow: 0 0 0 3px #6b4c0e; }
.roulette-tisch .null { grid-row: 1 / span 3; }
.roulette .feld { border: 0; color: #fff; font: 20px var(--pixel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.roulette .feld:hover { filter: brightness(1.4); }
.roulette .feld:disabled { cursor: default; }
.roulette .feld.treffer { box-shadow: inset 0 0 0 3px var(--gold); animation: pulsieren 600ms 3; }
@keyframes pulsieren { 50% { filter: brightness(1.8); } }
.roulette-aussen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.roulette .feld.aussen { padding: 9px 4px; background: #0e4a2a; font-size: 17px; }

.blackjack { display: grid; gap: 14px; padding: 18px; background: #0e4a2a; box-shadow: 0 0 0 3px #6b4c0e; }
.bj-reihe { display: grid; gap: 8px; }
.bj-reihe .etikett b { color: #fff; margin-left: 6px; }
.bj-karten { display: flex; gap: 8px; min-height: 104px; }
.karte { position: relative; display: grid; place-items: center; width: 72px; height: 104px; background: #f4f7ff; color: #10131c; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); animation: karte-rein 300ms calc(var(--i) * 90ms) both; }
.karte.rot { color: #c41e3a; }
.karte b { position: absolute; top: 4px; left: 7px; font: 22px var(--pixel); }
.karte b.unten { top: auto; left: auto; bottom: 4px; right: 7px; transform: rotate(180deg); }
.karte span { font-size: 34px; }
.karte.verdeckt { background: repeating-linear-gradient(45deg, #1d3354 0 6px, #2b4a74 6px 12px); box-shadow: inset 0 0 0 4px #f4f7ff, 0 4px 0 rgba(0, 0, 0, 0.35); }
@keyframes karte-rein { from { opacity: 0; transform: translateY(-30px) rotate(-8deg); } }
.bj-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bj-knoepfe .knopf { flex: 1; padding: 12px; }

.muenzwurf { display: grid; gap: 14px; justify-items: center; padding: 14px 0; }
.muenzwurf .muenzwurf-muenze { width: 130px; height: 130px; font-size: 26px; }
.muenzwurf .muenzwurf-wahl { width: min(420px, 100%); }

.kisten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kiste { display: grid; gap: 8px; align-content: start; padding: 14px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.kiste h3 { margin: 0; text-align: center; font: 24px var(--pixel); font-weight: 400; letter-spacing: 0.08em; }
.kiste ul { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 2px; }
.kiste li { display: flex; justify-content: space-between; }
.kiste-bild { height: 90px; display: grid; place-items: center; }
.kiste-bild i { width: 72px; height: 56px; background: linear-gradient(#8a5a2b 0 40%, #3a2410 40% 46%, #7a4b20 46%); box-shadow: 0 0 0 4px #2a1808, inset 0 0 0 4px var(--kistenfarbe, var(--gold)); animation: wippen 1.6s ease-in-out infinite; }
.kiste-muschel { --kistenfarbe: #b8c7da; }
.kiste-perle { --kistenfarbe: #c08cff; }
.kiste-tiefsee { --kistenfarbe: #ff5d8f; }
.kiste-tiefsee .kiste-bild i { background: linear-gradient(#2a1a4a 0 40%, #120a22 40% 46%, #24163f 46%); }
.spinner { position: relative; height: 120px; overflow: hidden; background: #07101e; box-shadow: 0 0 0 2px var(--linie); }
.spinner-band { display: flex; height: 100%; }
.los { flex: 0 0 110px; display: grid; place-items: center; border-bottom: 5px solid var(--farbe); background: linear-gradient(transparent 50%, color-mix(in srgb, var(--farbe) 22%, transparent)); box-shadow: inset -2px 0 0 #0a1628; }
.los img { max-width: 70px; max-height: 80px; image-rendering: pixelated; }
.los .text { font: 17px var(--pixel); text-align: center; padding: 4px; line-height: 1.1; }
.spinner-zeiger { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.loot-ergebnis { display: grid; justify-items: center; gap: 4px; padding: 20px; background: radial-gradient(circle, color-mix(in srgb, var(--farbe) 25%, transparent), transparent 70%); animation: herz-neu 600ms cubic-bezier(0.2, 1.7, 0.4, 1); }
.loot-ergebnis img { height: 120px; image-rendering: pixelated; }
.loot-ergebnis > span { font: 18px var(--pixel); letter-spacing: 0.2em; }
.loot-ergebnis b { font: 34px var(--pixel); font-weight: 400; }
.loot-ergebnis em { font-style: normal; color: var(--leise); font-size: 13px; }
.loot-ergebnis .kos-vorschau { font-size: 32px; min-height: 80px; }
@media (max-width: 760px) {
  .kisten { grid-template-columns: 1fr; }
  .casino-kachel.gross { grid-column: auto; }
  .automat-fenster { grid-template-columns: repeat(3, 80px); }
  .roulette-tisch { grid-template-columns: 30px repeat(12, 1fr); }
  .roulette .feld { font-size: 15px; }
}

/* ---------- Kosmetik ---------- */

.kiste-icon { display: inline-block; width: 12px; height: 10px; vertical-align: -1px; background: linear-gradient(#c9962a 0 40%, #5a3e08 40% 50%, #ffd166 50%); box-shadow: 0 0 0 1px #2a1808; }
.kiste-icon.ecke { position: absolute; top: 6px; right: 6px; }
.shop-figur, .kos-item { position: relative; }
.kos-status { font-size: 11px; color: var(--leise); text-align: center; margin-top: 6px; }
.kosmetik-raster { display: grid; gap: 16px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.kos-gruppe h3 { margin: 0 0 8px; font: 18px var(--pixel); font-weight: 400; letter-spacing: 0.14em; color: var(--gold); }
.kos-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kos-item { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); text-align: center; }
.kos-item.aktiv { box-shadow: 0 0 0 2px var(--farbe); }
.kos-item b { font: 17px var(--pixel); font-weight: 400; }
.kos-item small { font-size: 11px; }
.kos-item .knopf { width: 100%; padding: 7px 6px; font-size: 13px; margin-top: 4px; }
.kos-item .knopf.kaufen { color: var(--gold); box-shadow: 0 0 0 2px #9a7420; }
.kos-item .knopf:disabled { opacity: 0.5; cursor: default; }
.kos-vorschau { display: grid; place-items: center; min-height: 44px; font: 20px var(--pixel); }
.kos-vorschau-pet { height: 44px; image-rendering: pixelated; }
.kos-schild { padding: 4px 10px; background: rgba(5, 10, 20, 0.88); box-shadow: 0 0 0 2px var(--linie); }
.kos-titel { display: block; font: 600 9px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sitz-oben { position: relative; }
.kos-pet { position: absolute; right: -22px; bottom: 0; height: 26px; image-rendering: pixelated; animation: wippen 1.4s ease-in-out infinite; }
.kos-pet-klein { height: 14px; margin-left: 6px; vertical-align: -2px; image-rendering: pixelated; }

/* Leuchtende Namen */
.kos-name-name-cyan { color: #4de3ff; text-shadow: 0 0 8px #4de3ff; }
.kos-name-name-pink { color: #ff8fb3; text-shadow: 0 0 8px #ff5d8f; }
.kos-name-name-gift { color: #8dff6a; text-shadow: 0 0 8px #3fd14a; }
.kos-name-name-eis { color: #e3fbff; text-shadow: 0 0 6px #9ad8f0, 0 0 14px #4da8ff; }
.kos-name-name-gold { color: #ffd166; text-shadow: 0 0 8px #ffb000, 0 1px 0 #6b4c0e; }
.kos-name-name-feuer { color: #ffb454; text-shadow: 0 0 6px #ff4d1a, 0 -2px 10px #ff2a00; animation: flackern 1.2s steps(3) infinite; }
.kos-name-name-tiefsee { color: #7fe8ff; animation: tiefsee-glimmen 3s ease-in-out infinite; }
.kos-name-name-regenbogen, .kos-name-name-mythos {
  background: linear-gradient(90deg, #ff5d8f, #ffd166, #57e389, #4de3ff, #c08cff, #ff5d8f) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: regenbogen 2.5s linear infinite;
}
.kos-name-name-mythos { filter: drop-shadow(0 0 6px #ff5d8f) drop-shadow(0 0 2px #fff); }
.kos-name-name-glitch { color: #fff; text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; animation: glitch 900ms steps(2) infinite; }
@keyframes flackern { 50% { text-shadow: 0 0 10px #ff4d1a, 0 -3px 14px #ff7a00; } }
@keyframes tiefsee-glimmen { 50% { text-shadow: 0 0 12px #4de3ff, 0 0 2px #fff; color: #c8f6ff; } }
@keyframes regenbogen { to { background-position: 200% 0; } }
@keyframes glitch { 33% { text-shadow: -2px 0 #ff2a6d, 2px 1px #05d9e8; } 66% { text-shadow: 1px -1px #ff2a6d, -1px 0 #05d9e8; } }

/* Rahmen ums Namensschild */
.kos-rahmen-rahmen-gold { box-shadow: 0 0 0 2px #ffd166, 0 0 0 4px #6b4c0e !important; }
.kos-rahmen-rahmen-neon { box-shadow: 0 0 0 2px #4de3ff, 0 0 14px #4de3ff !important; }
.kos-rahmen-rahmen-feuer { box-shadow: 0 0 0 2px #ff7a00, 0 -4px 14px #ff4d1a !important; }
.kos-rahmen-rahmen-perle { box-shadow: 0 0 0 2px #fff3d0, 0 0 0 4px #c9b38a, 0 0 10px #fff3d0 !important; }
.kos-rahmen-rahmen-abyss { box-shadow: 0 0 0 2px #7a4fc2, 0 0 18px #7a4fc2, inset 0 0 12px #2a0f5a !important; }
.kos-rahmen-rahmen-regenbogen { animation: regenbogen-rahmen 2s linear infinite; }
@keyframes regenbogen-rahmen {
  0%, 100% { box-shadow: 0 0 0 2px #ff5d8f, 0 0 12px #ff5d8f; } 25% { box-shadow: 0 0 0 2px #ffd166, 0 0 12px #ffd166; }
  50% { box-shadow: 0 0 0 2px #57e389, 0 0 12px #57e389; } 75% { box-shadow: 0 0 0 2px #4de3ff, 0 0 12px #c08cff; }
}

/* ---------- Emotes ---------- */

.emote-knopf { color: var(--gold); }
.emote-leiste { position: fixed; top: 64px; right: 16px; z-index: 40; display: grid; grid-template-columns: repeat(3, auto); gap: 6px; max-width: min(460px, calc(100% - 32px)); padding: 10px; background: var(--tafel); box-shadow: var(--kante), var(--schatten); }
.emote-leiste button { border: 0; padding: 7px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 16px var(--pixel); white-space: nowrap; }
.emote-leiste button:hover { box-shadow: 0 0 0 2px var(--gold); }
.emote-leiste .mehr { grid-column: 1 / -1; color: var(--leise); font-size: 13px; }
.emote-leiste .seltenheit-selten { color: #4de3ff; }
.emote-leiste .seltenheit-episch { color: #c08cff; }
.emote-leiste .seltenheit-legendaer { color: #ffd166; }
.emote-leiste .seltenheit-mythisch { color: #ff5d8f; }
.emote-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: grid; gap: 6px; pointer-events: none; }
.emote-toast { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--tafel); box-shadow: var(--kante); font: 16px var(--pixel); animation: toast-rein 250ms ease-out, toast-raus 300ms 2.3s forwards; }
.emote-toast b { font-weight: 400; color: var(--gold); font-size: 20px; }
@keyframes toast-rein { from { transform: translateX(-30px); opacity: 0; } }
@keyframes toast-raus { to { opacity: 0; } }
.blase.emote { background: var(--gold); color: #2a1a08; font-family: var(--pixel); font-size: 20px; }
.blase.emote::after { border-top-color: var(--gold); }
.emote-blase { display: inline-block; padding: 4px 10px; background: var(--gold); color: #2a1a08; font: 18px var(--pixel); }

/* ---------- Flugzeug (Crash) ---------- */

.flug { display: grid; gap: 12px; }
.flug-himmel { position: relative; height: 300px; overflow: hidden; background: linear-gradient(#07101e, #0f2a4a 70%, #1d4a6e); box-shadow: 0 0 0 2px var(--linie); }
.flug-himmel canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.flug-faktor { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font: 72px var(--logo); color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); pointer-events: none; }
.flug-faktor.weg { color: var(--rot); }
.flug-faktor.raus { color: var(--stufe-selten); }
.flug-verlauf { display: flex; flex-wrap: wrap; gap: 4px; font: 15px var(--pixel); }
.flug-verlauf span { padding: 2px 8px; background: var(--tief); box-shadow: 0 0 0 1px var(--linie); }
.flug-verlauf .hoch { color: var(--stufe-selten); }
.flug-verlauf .tief { color: #ff8099; }
.flug-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flug-knoepfe .knopf-gross { flex: 1; }
.flug-auto { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--leise); }
.flug-auto input { width: 80px; padding: 8px; background: var(--tief); border: 2px solid var(--linie); color: var(--text); font: 17px var(--pixel); }

/* Weiter nach dem Aufdecken */
.weiter-knopf { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; border: 0; padding: 12px 26px; background: var(--gold); color: #2a1a08; font: 22px var(--pixel); letter-spacing: 0.1em; box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--gold), 0 5px 0 4px #9a7420; animation: herz-neu 300ms ease-out; }
.weiter-knopf:disabled { background: var(--tafel); color: var(--leise); box-shadow: 0 0 0 2px var(--linie); cursor: default; }

/* ---------- Hauptmenü oben ---------- */

.haupt-nav { display: flex; gap: 4px; margin: 0 auto; }
.haupt-nav button { border: 0; padding: 6px 14px; background: transparent; color: var(--leise); font: 19px var(--pixel); letter-spacing: 0.12em; box-shadow: inset 0 -2px 0 transparent; }
.haupt-nav button:hover { color: var(--text); }
.haupt-nav button[aria-current] { color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 760px) {
  .haupt-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; justify-content: space-around; padding: 6px 4px; background: var(--tafel); box-shadow: 0 -2px 0 var(--linie); }
  .haupt-nav button { padding: 6px 4px; font-size: 16px; }
  body[data-ansicht='start'], body[data-ansicht='spind'], body[data-ansicht='freunde'], body[data-ansicht='shop'], body[data-ansicht='casino'], body[data-ansicht='boerse'] { padding-bottom: 56px; }
}

/* ---------- Bühne auf der Startseite ---------- */

.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.start-buehne { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: center; }
.podest { position: relative; display: grid; place-items: end center; height: 280px; border: 0; padding: 0 0 26px; background: radial-gradient(ellipse at 50% 100%, rgba(77, 227, 255, 0.16), transparent 65%); cursor: pointer; }
.podest.gross { height: 360px; cursor: default; }
.podest-licht { position: absolute; left: 50%; top: 0; bottom: 20px; width: 180px; transform: translateX(-50%); background: linear-gradient(rgba(255, 255, 255, 0.08), transparent 80%); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); pointer-events: none; }
.podest-figur { position: relative; z-index: 1; max-height: 200px; max-width: 200px; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)); animation: atmen 2.4s ease-in-out infinite; }
.podest.gross .podest-figur { max-height: 260px; max-width: 260px; }
.podest-figur.rein { animation: figur-rein 420ms cubic-bezier(0.2, 1.6, 0.4, 1), atmen 2.4s 420ms ease-in-out infinite; }
.podest-pet { position: absolute; z-index: 2; bottom: 30px; right: 18%; height: 42px; image-rendering: pixelated; animation: wippen 1.4s ease-in-out infinite; }
.podest-sockel { position: absolute; bottom: 8px; left: 50%; width: 170px; height: 26px; transform: translateX(-50%); background: linear-gradient(#2b4a74 0 40%, #13243f 40%); box-shadow: 0 0 0 3px var(--tief), 0 0 24px rgba(77, 227, 255, 0.25); }
.podest:hover .podest-figur { filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)) brightness(1.15); }
@keyframes atmen { 50% { transform: translateY(-5px); } }
@keyframes figur-rein { from { transform: translateY(30px) scale(0.6); opacity: 0; } }
.start-rechts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: center; min-width: 0; }
.namensschild { justify-self: start; display: grid; gap: 2px; padding: 8px 14px; background: rgba(5, 10, 20, 0.88); box-shadow: 0 0 0 2px var(--linie); }
.namensschild-name { font: 34px var(--pixel); font-weight: 400; letter-spacing: 0.04em; }
.namensschild-name.leer { color: var(--leise); }
.namensschild-skin { font-size: 11px; color: var(--leise); letter-spacing: 0.12em; text-transform: uppercase; }
.start-rechts .feld { margin: 0; }
.konto-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 20px; }
.konto-zeile .knopf-leise { padding: 6px 12px; }
.konto-zeile .knopf-leise.warnung { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.konto-hinweis { font-size: 11px; color: var(--leise); }
@media (max-width: 640px) {
  .start-buehne { grid-template-columns: 1fr; }
  .podest { height: 220px; }
  .podest-figur { max-height: 150px; }
}

/* ---------- Spind ---------- */

.ansicht-spind { width: min(1100px, calc(100% - 32px)); margin: 24px auto 60px; }
.spind { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.spind-vorschau { position: sticky; top: 76px; display: grid; justify-items: center; gap: 6px; padding: 18px; background: rgba(10, 22, 40, 0.92); box-shadow: var(--kante), var(--schatten); }
.spind-name { font: 32px var(--pixel); font-weight: 400; letter-spacing: 0.06em; text-align: center; }
.spind-seltenheit { font: 16px var(--pixel); letter-spacing: 0.2em; }
.spind-vorschau .knopf-gross { width: 100%; margin-top: 8px; }
.spind-liste { padding: 18px; background: rgba(10, 22, 40, 0.92); box-shadow: var(--kante), var(--schatten); }
.spind-filter { display: flex; gap: 6px; margin-bottom: 14px; }
.spind-filter button { flex: 1; border: 0; padding: 8px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 17px var(--pixel); letter-spacing: 0.12em; color: var(--leise); }
.spind-filter button[aria-selected='true'] { color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.spind .figuren { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: none; }
.spind .figur { padding: 12px 4px 8px; box-shadow: 0 0 0 2px var(--linie), inset 0 -4px 0 var(--farbe, var(--linie)); }
.spind .figur img { width: 56px; height: 64px; }
.spind .figur span { font-size: 10px; }
.spind .figur[aria-checked='true'] { box-shadow: 0 0 0 2px var(--cyan), inset 0 -4px 0 var(--farbe, var(--cyan)); }
.spind .figur .preis { font-style: normal; font-size: 10px; color: var(--gold); }
@media (max-width: 760px) {
  .spind { grid-template-columns: 1fr; }
  .spind-vorschau { position: static; }
  .podest.gross { height: 240px; }
}

/* ---------- Passwort ---------- */

.passwort-dialog { width: min(420px, calc(100% - 32px)); }
.passwort-dialog h2 { margin: 0 0 6px; font: 26px var(--pixel); letter-spacing: 0.1em; color: var(--gold); }
.passwort-dialog .hinweis { text-align: left; margin: 0 0 12px; }
.passwort-dialog input { width: 100%; padding: 11px 12px; background: var(--tief); border: 2px solid var(--linie); color: var(--text); font: 20px var(--mono); outline: none; }
.passwort-dialog input:focus { border-color: var(--gold); }
.passwort-fehler { min-height: 18px; margin: 6px 0; font-size: 12px; color: #ff8099; }
.passwort-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.passwort-knoepfe .knopf-gross { padding: 10px 26px; }

/* ---------- Kritzeln ---------- */

.ansicht-kritzeln { width: min(1240px, calc(100% - 24px)); margin: 14px auto 30px; display: grid; gap: 10px; }
.kritzel-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(10, 22, 40, 0.92); box-shadow: var(--kante); }
.kritzel-wort { display: grid; justify-items: center; font: 30px var(--pixel); letter-spacing: 0.08em; text-align: center; }
.kritzel-wort b { font-weight: 400; color: var(--gold); }
.kritzel-wort small { font: 11px var(--mono); color: var(--leise); letter-spacing: 0.12em; text-transform: uppercase; }
.kritzel-wort .maske { letter-spacing: 0.3em; }
.kritzel-wort .maske i { font-style: normal; color: var(--cyan); }
.kritzel-uhr { justify-self: end; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tief); box-shadow: 0 0 0 3px var(--cyan); font: 26px var(--pixel); font-weight: 400; }
.kritzel-uhr:empty { visibility: hidden; }
.kritzel-uhr.knapp { box-shadow: 0 0 0 3px var(--rot); color: var(--rot); animation: pulsieren 1s infinite; }
.kritzel-raster { display: grid; grid-template-columns: 200px 1fr 280px; gap: 10px; align-items: start; }
.kritzel-spieler { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kritzel-spieler li { display: grid; grid-template-columns: 22px 28px 1fr auto 16px; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(10, 22, 40, 0.92); box-shadow: 0 0 0 2px var(--linie); font-size: 12px; }
.kritzel-spieler li.zeichnet { box-shadow: 0 0 0 2px var(--gold); }
.kritzel-spieler li.geraten { background: rgba(87, 227, 137, 0.15); box-shadow: 0 0 0 2px var(--stufe-selten); }
.kritzel-spieler li.weg { opacity: 0.45; }
.kritzel-spieler img { height: 28px; image-rendering: pixelated; }
.kritzel-spieler b { font: 17px var(--pixel); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kritzel-spieler .rang { color: var(--leise); }
.kritzel-spieler .pkt { font: 17px var(--pixel); color: var(--gold); }
.kritzel-spieler i { font-style: normal; color: var(--stufe-selten); }
.kritzel-spieler i.stift { color: var(--gold); }
.kritzel-mitte { display: grid; gap: 8px; }
.kritzel-rahmen { position: relative; box-shadow: 0 0 0 3px var(--linie), var(--schatten); background: #fff; }
#kritzelFlaeche { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: none; }
.ich-zeichne #kritzelFlaeche { cursor: crosshair; }
.kritzel-wahl { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; background: rgba(5, 10, 20, 0.88); text-align: center; }
.kritzel-wahl p { margin: 0; font: 24px var(--pixel); color: var(--text); }
.kritzel-wahl div { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kritzel-wahl img { justify-self: center; height: 72px; image-rendering: pixelated; }
.kritzel-aufloesung { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 16px; background: rgba(5, 10, 20, 0.86); text-align: center; animation: aufloesung-rein 0.35s ease-out; }
.kritzel-aufloesung[hidden] { display: none; }
.kritzel-aufloesung small { font: 12px var(--mono); color: var(--leise); letter-spacing: 0.14em; }
.kritzel-aufloesung .wort { font: 40px var(--pixel); font-weight: 400; color: var(--gold); line-height: 1; }
.kritzel-aufloesung .niemand { margin: 0; font: 18px var(--pixel); color: var(--rot); }
.kritzel-aufloesung ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; width: min(320px, 100%); max-height: 260px; overflow-y: auto; }
.kritzel-aufloesung li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; font: 18px var(--pixel); color: var(--leise); background: rgba(255, 255, 255, 0.04); }
.kritzel-aufloesung li.plus { color: var(--text); }
.kritzel-aufloesung li.plus b { color: var(--stufe-selten); }
.kritzel-aufloesung li.ich { box-shadow: 0 0 0 1px var(--cyan); }
.kritzel-aufloesung li b { font-weight: 400; }
.kritzel-aufloesung li i { font-style: normal; color: var(--gold); }
.kritzel-aufloesung .zeitleiste { width: min(320px, 100%); height: 4px; margin-top: 8px; background: rgba(255, 255, 255, 0.1); }
.kritzel-aufloesung .zeitleiste i { display: block; height: 100%; background: var(--cyan); transform-origin: left; animation: leiste-ab linear forwards; }
@keyframes aufloesung-rein { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes leiste-ab { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.kritzel-hinweis { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; padding: 6px 12px; background: var(--gold); color: #2a1a08; font: 18px var(--pixel); opacity: 0; pointer-events: none; }
.kritzel-hinweis.neu { animation: hinweis-blitz 2.2s ease-out; }
@keyframes hinweis-blitz { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.kritzel-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; background: rgba(10, 22, 40, 0.92); box-shadow: 0 0 0 2px var(--linie); }
.kritzel-farben { display: grid; grid-template-columns: repeat(8, 24px); gap: 3px; }
.kritzel-farbe { width: 24px; height: 24px; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.kritzel-farbe.aktiv { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.1); }
.kritzel-dicken { display: flex; gap: 3px; }
.kritzel-dicke { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.kritzel-dicke i { display: block; border-radius: 50%; background: var(--text); }
.kritzel-dicke.aktiv { box-shadow: 0 0 0 2px var(--gold); }
.kritzel-werkzeuge .knopf { padding: 7px 12px; }
.kritzel-werkzeuge .knopf.aktiv { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.kritzel-gruppe { display: flex; gap: 4px; }
.kritzel-werkzeug { min-width: 40px; font-size: 18px; line-height: 1; }
.kritzel-rad-feld { position: relative; }
.kritzel-farbrad { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: conic-gradient(from 90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: 0 0 0 2px var(--linie); }
.kritzel-farbrad i { width: 18px; height: 18px; border-radius: 50%; background: var(--wahl, #10131c); box-shadow: 0 0 0 2px #fff; }
.kritzel-farbrad[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--gold); }
.kritzel-rad { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 20; display: grid; gap: 8px; width: 204px; padding: 12px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie), var(--schatten); }
.kritzel-rad[hidden] { display: none; }
.kritzel-rad-kreis { position: relative; width: 180px; height: 180px; }
.kritzel-rad-kreis canvas { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; touch-action: none; }
.kritzel-rad-kreis i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000; pointer-events: none; }
#kritzelHelligkeit { width: 100%; height: 14px; margin: 0; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, #000, var(--hell, #fff)); box-shadow: 0 0 0 1px var(--linie); cursor: pointer; }
#kritzelHelligkeit::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 20px; background: #fff; box-shadow: 0 0 0 2px #000; }
#kritzelHelligkeit::-moz-range-thumb { width: 10px; height: 20px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 0 0 2px #000; }
#kritzelRadWahl { padding: 6px; text-align: center; font: 16px var(--mono); font-weight: 400; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ich-zeichne #kritzelFlaeche[data-werkzeug="fuellen"] { cursor: cell; }
.ich-zeichne #kritzelFlaeche[data-werkzeug="pipette"] { cursor: copy; }
.kritzel-chat-spalte { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; min-height: 360px; }
.kritzel-chat { list-style: none; margin: 0; padding: 8px; overflow-y: auto; max-height: 520px; background: rgba(10, 22, 40, 0.92); box-shadow: 0 0 0 2px var(--linie); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.kritzel-chat li { overflow-wrap: anywhere; }
.kritzel-chat b { color: var(--cyan); font-weight: 600; margin-right: 4px; }
.kritzel-chat li.geraten { color: var(--stufe-selten); }
.kritzel-chat li.geraten b { color: var(--stufe-selten); }
.kritzel-chat li.geraten span { color: var(--gold); }
.kritzel-chat li.wissend { color: #a6e8b8; font-style: italic; }
.kritzel-form { display: flex; gap: 6px; }
.kritzel-form input { flex: 1; min-width: 0; padding: 10px 12px; background: var(--tief); border: 2px solid var(--linie); color: var(--text); font: 18px var(--pixel); outline: none; }
.kritzel-form input:focus { border-color: var(--cyan); }
.kritzel-form input:disabled { opacity: 0.5; }
@media (max-width: 980px) {
  .kritzel-raster { grid-template-columns: 1fr; }
  .kritzel-spieler { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); order: 2; }
  .kritzel-chat-spalte { min-height: 0; order: 3; }
  .kritzel-chat { max-height: 180px; }
  .kritzel-wort { font-size: 22px; }
}

/* ---------- Startseite: Spielen-Knopf und Modus-Kacheln ---------- */

.spielen-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
.gewaehlt-karte { display: grid; gap: 2px; text-align: left; border: 0; padding: 10px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--farbe, var(--gold)) 22%, var(--tief)), var(--tief)); box-shadow: 0 0 0 2px var(--farbe, var(--gold)); }
.gewaehlt-karte { min-width: 0; }
.gewaehlt-karte b { overflow-wrap: anywhere; font: 26px var(--pixel); font-weight: 400; letter-spacing: 0.06em; color: var(--farbe, var(--gold)); }
.gewaehlt-karte small { font-size: 10px; color: var(--leise); letter-spacing: 0.14em; }
.gewaehlt-karte:hover small { color: var(--text); }
.spielen-knopf { font-size: 26px; }
#beitretenForm { align-items: center; flex-wrap: wrap; }
#beitretenForm .etikett { flex-basis: 100%; }
#beitretenForm input { flex: 1; min-width: 0; }

.spielwahl { width: min(960px, calc(100% - 32px)); margin: 18px auto 0; }
.reihe-titel { margin: 18px 0 8px; font: 20px var(--pixel); font-weight: 400; letter-spacing: 0.16em; color: var(--leise); }
.modus-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.modus-kachel { position: relative; display: grid; align-content: end; gap: 4px; min-height: 150px; border: 0; padding: 14px; text-align: left; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--farbe) 30%, var(--tafel)) 0%, var(--tafel) 60%);
  box-shadow: 0 0 0 2px var(--linie); transition: transform 120ms, box-shadow 120ms; }
.modus-kachel::before { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--farbe) 35%, transparent) 0 6px, transparent 6px 14px); opacity: 0.5; }
.modus-kachel:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--farbe); }
.modus-kachel[aria-checked='true'] { box-shadow: 0 0 0 3px var(--farbe), 0 0 24px color-mix(in srgb, var(--farbe) 40%, transparent); }
.modus-kachel .etikett { color: var(--farbe); }
.modus-kachel b { font: 28px var(--pixel); font-weight: 400; letter-spacing: 0.05em; color: var(--text); }
.modus-kachel > span:last-child { font-size: 12px; color: #a9bcd8; line-height: 1.4; }
.modus-kachel.neu::after { content: 'NEU'; position: absolute; top: 10px; right: 10px; padding: 2px 8px; background: var(--farbe); color: #2a1a08; font: 14px var(--pixel); letter-spacing: 0.1em; }
@media (max-width: 640px) {
  .spielen-block { grid-template-columns: 1fr; }
  .modus-kachel { min-height: 120px; }
}

/* ---------- Freunde ---------- */

.nav-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 4px; background: var(--pink); color: #fff; font: 13px var(--pixel); font-style: normal; vertical-align: 2px; }
.ansicht-freunde #freundeInhalt { padding: 18px; background: rgba(10, 22, 40, 0.92); box-shadow: var(--kante), var(--schatten); }
.freunde-seite { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.freunde-links { display: grid; gap: 16px; }
.freund-form { display: grid; gap: 6px; }
.freund-form input { flex: 1; min-width: 0; }
.freund-anfragen { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.freund-anfragen li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.freund-anfragen b { font: 18px var(--pixel); font-weight: 400; }
.freund-anfragen span { display: flex; gap: 4px; align-items: center; }
.freund-anfragen small { color: var(--leise); font-size: 11px; }
.freund-anfragen .knopf { padding: 5px 9px; font-size: 13px; }
.freund-anfragen .knopf.kaufen { color: var(--gold); box-shadow: 0 0 0 2px #9a7420; }
.freunde-liste ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.freund { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.freund img { height: 48px; image-rendering: pixelated; justify-self: center; }
.freund.offline img { filter: grayscale(1) brightness(0.6); }
.freund b { display: block; font: 22px var(--pixel); font-weight: 400; }
.freund small { font-size: 12px; color: var(--leise); }
.freund .punkt { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: #4a5160; vertical-align: 0; }
.freund.online .punkt { background: var(--stufe-selten); box-shadow: 0 0 6px var(--stufe-selten); }
.freund.im-raum { box-shadow: 0 0 0 2px var(--gold); }
.freund.im-raum .punkt { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.freund.im-raum small { color: var(--gold); }
.freund-knoepfe { display: flex; gap: 6px; align-items: center; }
.freund-knoepfe .knopf-gross { padding: 8px 16px; font-size: 17px; }
.freunde-leer, .freunde-leer-text { text-align: center; color: var(--leise); }
.freunde-leer { display: grid; justify-items: center; gap: 8px; padding: 30px 10px; }
.freunde-leer b { font: 24px var(--pixel); font-weight: 400; color: var(--text); }
.freunde-leer p { margin: 0 0 8px; font-size: 13px; }
@media (max-width: 760px) { .freunde-seite { grid-template-columns: 1fr; } }

.lobby-freunde { margin-top: 14px; }
.lobby-freunde ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.lobby-freunde li { display: grid; grid-template-columns: 30px auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.lobby-freunde img { height: 30px; image-rendering: pixelated; }
.lobby-freunde b { font: 18px var(--pixel); font-weight: 400; }
.lobby-freunde small { font-size: 11px; color: var(--leise); }
.lobby-freunde .knopf { padding: 6px 12px; font-size: 13px; }

.einladungen { position: fixed; top: 64px; right: 16px; z-index: 45; display: grid; gap: 8px; width: min(320px, calc(100% - 32px)); }
.einladung { display: grid; gap: 4px; padding: 12px 14px; background: var(--tafel); box-shadow: 0 0 0 2px var(--gold), var(--schatten); font-size: 13px; animation: toast-rein 250ms ease-out; }
.einladung b { font: 22px var(--pixel); font-weight: 400; color: var(--gold); }
.einladung small { color: var(--leise); }
.einladung span { display: flex; gap: 6px; margin-top: 6px; }
.einladung .knopf-gross { flex: 1; padding: 8px; font-size: 17px; }

/* Sieg- und Niederlage-Sounds, Bundles */
.kos-sound { gap: 6px; grid-auto-flow: column; padding: 4px 14px; color: var(--cyan); background: none; border: 2px solid var(--linie); cursor: pointer; }
.kos-sound:hover { border-color: var(--farbe, var(--cyan)); }
.kos-sound img { width: 24px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.shop-figur.bundle { box-shadow: 0 0 0 2px var(--farbe, var(--gold)); }
.shop-figur.bundle img { filter: none; }
.bundle-band { position: absolute; top: 6px; left: 6px; padding: 1px 6px; font-size: 10px; letter-spacing: 0.1em; color: var(--tief); background: var(--farbe, var(--gold)); }
.shop-figur .bundle-alt { text-decoration: line-through; }
.shop-figur .knopf.knopf-hoeren { margin-top: 2px; padding: 5px 6px; font-size: 12px; }

/* ---------- Shop als eigene Seite ---------- */

.ansicht-shop .casino-kopf .shop-stand { margin-left: auto; font-size: 26px; }
.ansicht-shop .reiter { margin: 0 0 12px; }
.ansicht-shop .shop-info { margin: 0 0 14px; }
.ansicht-shop .shop-raster, .ansicht-shop .kosmetik-raster { max-height: none; overflow: visible; }

/* ---------- Spind: Kategorien ---------- */

.spind-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.spind-reiter button { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; padding: 7px 10px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 15px var(--pixel); letter-spacing: 0.1em; color: var(--leise); }
.spind-reiter button[aria-selected='true'] { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: rgba(255, 209, 102, 0.07); }
.spind-zahl { font-style: normal; font-size: 11px; padding: 0 5px; background: rgba(255, 255, 255, 0.08); }
.spind-vorschau .namensschild { justify-self: center; text-align: center; max-width: 100%; }
.spind-vorschau .namensschild-name { font-size: 28px; overflow-wrap: anywhere; }
.spind-sounds { margin: 0; min-height: 1em; font-size: 12px; color: var(--leise); text-align: center; }
.spind-kosmetik { max-height: none; overflow: visible; }
.spind-leer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--leise); font-size: 13px; }
.spind-leer .knopf { padding: 6px 12px; font-size: 14px; }

/* ---------- INFO-Knopf (Börse, Casino, Shop, Spind) ---------- */

.info-knopf { margin-left: auto; flex: none; }
.info-dialog { width: min(600px, calc(100% - 32px)); }
.info-dialog .regeln b { color: var(--cyan); font-weight: 600; }
.info-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.info-tabelle th, .info-tabelle td { padding: 5px 6px; text-align: right; border-bottom: 1px dotted var(--linie-hell); }
.info-tabelle th:first-child { text-align: left; }
.info-tabelle thead th { color: var(--leise); font-weight: 500; }
.info-tabelle td:nth-child(2) { color: var(--gold); }
.regeln-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.regeln-reiter button { padding: 5px 9px; font: 600 12px var(--pixel); letter-spacing: 0.06em; color: var(--leise); background: var(--tief); border: 0; box-shadow: 0 0 0 2px var(--linie); cursor: pointer; }
.regeln-reiter button[aria-selected="true"] { color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }

/* ---------- Angelsteg ---------- */
.angel-koeder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.angel-koeder-wahl { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border: 0; color: var(--text); background: var(--tief); box-shadow: 0 0 0 2px var(--linie); font: 16px var(--pixel); cursor: pointer; }
.angel-koeder-wahl small { font-size: 12px; color: var(--leise); text-align: center; }
.angel-koeder-wahl span { color: var(--gold); }
.angel-koeder-wahl[aria-checked="true"] { box-shadow: 0 0 0 2px var(--gold); }
.angel-koeder-wahl:disabled { opacity: 0.55; cursor: default; }
.angel-steg { position: relative; margin: 0 0 12px; box-shadow: 0 0 0 3px #5a3a22, 0 0 0 6px #9a6b3e; }
.angel-steg canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; touch-action: none; user-select: none; -webkit-user-select: none; }
.angel-fang { position: absolute; inset: 12px; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center; background: rgba(40, 26, 14, 0.9); box-shadow: 0 0 0 3px var(--farbe, #9a6b3e); font: 18px var(--pixel); animation: angel-auftauchen 400ms ease-out; pointer-events: none; }
.angel-fang img { max-height: 70px; image-rendering: pixelated; }
.angel-fang b { font-size: 24px; }
.angel-fang em { font-style: normal; color: #e8d9b8; font-size: 15px; }
.angel-knopf { width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.angel-knopf.angel-halten { background: #7dea6a; }
.angel-eimer, .angel-buch { margin-top: 18px; }
.angel-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.angel-eimer ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; }
.angel-eimer li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--tief); box-shadow: inset 3px 0 0 var(--farbe, var(--linie)), 0 0 0 2px var(--linie); }
.angel-eimer li.leer { justify-content: center; color: var(--leise); }
.angel-eimer li img { width: 40px; image-rendering: pixelated; }
.angel-eimer li span { display: grid; flex: 1; }
.angel-eimer li small { color: var(--leise); }
.angel-buch-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.angel-buch-eintrag { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; background: var(--tief); box-shadow: 0 0 0 2px var(--farbe, var(--linie)); text-align: center; font-size: 12px; }
.angel-buch-eintrag img { height: 24px; image-rendering: pixelated; }
.angel-buch-eintrag em { font-style: normal; color: var(--leise); font-size: 11px; }
.angel-buch-eintrag.unbekannt { box-shadow: 0 0 0 2px var(--linie); color: var(--leise); }
@keyframes angel-auftauchen { from { transform: translateY(30px); opacity: 0; } }
@media (max-width: 480px) { .angel-koeder small { display: none; } }
#infoInhalt { overflow-x: auto; }

/* ---------- Level & XP ---------- */
.level-abzeichen {
  display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px;
  background: var(--tafel); box-shadow: 0 0 0 2px var(--linie);
  font: 18px var(--pixel); color: var(--cyan); position: relative;
}
.level-abzeichen[hidden] { display: none; }
.level-abzeichen small { font-size: 13px; color: var(--leise); }
.level-abzeichen b { font-weight: 400; }
.level-mini { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: var(--linie); }
.level-mini i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 0.6s; }
.level-zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 4px; min-width: 200px; }
.level-zeile[hidden] { display: none; }
.level-zeile b { font: 18px var(--pixel); font-weight: 400; color: var(--cyan); }
.level-zeile small { font: 15px var(--pixel); color: var(--leise); white-space: nowrap; }
.level-balken { height: 8px; background: var(--linie); box-shadow: 0 0 0 1px var(--linie-hell); overflow: hidden; }
.level-balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #9ff1ff); transition: width 0.6s; }
.xp-gewinn { font-weight: 400; color: var(--cyan); }
@media (max-width: 520px) { .level-abzeichen small { display: none; } }

/* ---------- Rangliste (verdiente Münzen) ---------- */

.rang-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 12px 16px; margin-bottom: 18px; background: var(--tafel); box-shadow: var(--kante); }
.rang-stats > div { display: grid; gap: 2px; }
.rang-stats b { font: 26px var(--pixel); font-weight: 400; color: var(--text); }
.rang-stats .rang-muenzen { font-size: 26px; }
.rang-ich { margin: 0 0 0 auto; font-size: 13px; color: var(--leise); }
.rang-ich b { font: 20px var(--pixel); color: var(--gold); }
.rang-ich .rang-muenzen { font-size: 18px; }
.rang-muenzen { display: inline-flex; align-items: center; gap: 6px; font: 20px var(--pixel); color: var(--gold); white-space: nowrap; }
.rang-level { font: 14px var(--pixel); letter-spacing: 0.06em; padding: 1px 6px; color: var(--cyan); box-shadow: 0 0 0 2px #1b5566; background: rgba(77, 227, 255, 0.08); white-space: nowrap; }

.rang-podest { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; }
.rang-podest-platz { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.rang-figur { display: grid; place-items: center; padding: 6px 10px; }
.rang-figur img { height: 84px; image-rendering: pixelated; animation: wippen 1300ms ease-in-out infinite; }
.p1 .rang-figur img { height: 110px; }
.p2 .rang-figur img { animation-delay: -400ms; }
.p3 .rang-figur img { animation-delay: -800ms; }
.rang-podest-platz .rang-name { font: 24px var(--pixel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p1 .rang-name { font-size: 28px; color: var(--gold); }
.rang-sockel { width: 100%; display: grid; justify-items: center; align-content: start; gap: 6px; padding-top: 10px; background: linear-gradient(var(--tafel-hell), var(--tafel)); box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--linie); }
.rang-sockel b { font: 44px var(--logo); line-height: 1; color: var(--leise); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4); }
.p1 .rang-sockel { height: 130px; box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--gold), 0 0 26px rgba(255, 209, 102, 0.25); }
.p1 .rang-sockel b { color: var(--gold); text-shadow: 0 4px 0 #6b4c0e; font-size: 56px; }
.p2 .rang-sockel { height: 96px; }
.p2 .rang-sockel b { color: #d7e4f5; }
.p3 .rang-sockel { height: 72px; }
.p3 .rang-sockel b { color: #e09a5a; }
.rang-podest-platz.leer .rang-sockel { opacity: 0.35; }
.rang-podest-platz.du .rang-name::after { content: ' (DU)'; font-size: 0.6em; color: var(--cyan); }
.rang-krone { position: absolute; top: -18px; left: 50%; width: 36px; height: 22px; transform: translateX(-50%); background: var(--gold); filter: drop-shadow(0 3px 0 #6b4c0e);
  clip-path: polygon(0 100%, 0 20%, 22% 55%, 50% 0, 78% 55%, 100% 20%, 100% 100%); animation: wippen 1300ms ease-in-out infinite; }

.rang-liste { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.rang-zeile { display: grid; grid-template-columns: 44px 44px 1fr auto auto; align-items: center; gap: 12px; padding: 6px 14px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.rang-zeile:hover { box-shadow: 0 0 0 2px var(--linie-hell); }
.rang-zeile.du { background: rgba(77, 227, 255, 0.07); box-shadow: 0 0 0 2px var(--cyan); }
.rang-nr { font: 26px var(--pixel); color: var(--leise); text-align: right; }
.rang-avatar { display: grid; place-items: center; height: 44px; }
.rang-avatar { overflow: hidden; }
.rang-avatar img { max-height: 40px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.rang-zeile .rang-name { font: 22px var(--pixel); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-du { margin-left: 8px; font: 600 10px var(--mono); letter-spacing: 0.14em; color: var(--cyan); }
.rang-zeile .rang-muenzen { min-width: 84px; justify-content: flex-end; }
.rang-luecke { text-align: center; color: var(--leise); letter-spacing: 0.4em; padding: 2px 0; }

@media (max-width: 640px) {
  .rang-ich { margin-left: 0; flex-basis: 100%; }
  .rang-podest { gap: 6px; }
  .rang-figur img { height: 60px; }
  .p1 .rang-figur img { height: 78px; }
  .rang-podest-platz .rang-name { font-size: 18px; }
  .p1 .rang-name { font-size: 20px; }
  .rang-podest-platz .rang-muenzen { font-size: 16px; }
  .rang-sockel b { font-size: 32px; }
  .p1 .rang-sockel b { font-size: 40px; }
  .p1 .rang-sockel { height: 100px; }
  .p2 .rang-sockel { height: 74px; }
  .p3 .rang-sockel { height: 56px; }
  .rang-zeile { grid-template-columns: 30px 34px 1fr auto; gap: 8px; padding: 6px 10px; }
  .rang-zeile .rang-level { display: none; }
  .rang-zeile .rang-muenzen { min-width: 0; }
}

/* Ranglisten-Reiter */
.rang-reiter { flex-wrap: wrap; margin: 0 0 16px; }
.rang-reiter button { flex: 1 1 auto; min-width: 90px; cursor: pointer; }
.rang-reiter button:hover { color: var(--text); }
.rang-zusatz { display: block; font: 12px var(--mono); letter-spacing: 0.02em; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang-podest-platz .rang-zusatz { margin-top: -4px; }
.rang-sterne { font-style: normal; margin-left: 4px; color: var(--gold); }
.rang-tab-pech .rang-wert, .rang-tab-pech .rang-stats .rang-muenzen { color: var(--rot); }
.rang-tab-pech .rang-podest-platz.p1 .rang-name { color: var(--rot); }
.rang-tab-angeln .rang-wert { color: var(--cyan); }
@media (max-width: 640px) {
  .rang-reiter button { min-width: 0; flex-basis: calc(33% - 6px); font-size: 15px; letter-spacing: 0.06em; padding: 8px 4px; }
}