/* Persönliche Ansicht. Mobile first, Bezugsgröße 390 × 844.
   Am PC läuft dieselbe Seite als zentrierte Spalte (KONZEPT: Handy und Spiel-PC, gleiches Profil). */

/* ---------- Bühne ---------- */
body {
  min-height: 100dvh;
  background:
    url("../assets/gpt/textur-stein.jpg") center / 512px repeat,
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--grund-3), var(--grund-1) 60%, var(--grund-0));
  background-attachment: fixed;
}
.rahmen {
  width: min(100%, 480px);
  min-height: 100dvh;
  margin-inline: auto;
}
@media (min-width: 560px) {
  .rahmen {
    border-inline: 1px solid rgb(224 169 59 / 0.18);
    box-shadow: 0 0 80px rgb(0 0 0 / 0.7);
  }
}

/* ---------- Ansichten: genau eine ist sichtbar ---------- */
.ansicht, .uebernahme { display: none; }
.app { display: none; }
[data-ansicht="beitritt"] .ansicht[data-ansicht="beitritt"] { display: block; }
[data-ansicht="heute"] .app,
[data-ansicht="bingo"] .app,
[data-ansicht="upload"] .app,
[data-ansicht="profil"] .app,
[data-ansicht="dj"] .app,
[data-ansicht="rast"] .app,
[data-ansicht="schwoerung"] .app { display: flex; }
[data-ansicht="heute"] .ansicht[data-ansicht="heute"],
[data-ansicht="bingo"] .ansicht[data-ansicht="bingo"],
[data-ansicht="upload"] .ansicht[data-ansicht="upload"],
[data-ansicht="profil"] .ansicht[data-ansicht="profil"],
[data-ansicht="dj"] .ansicht[data-ansicht="dj"],
[data-ansicht="rast"] .ansicht[data-ansicht="rast"],
[data-ansicht="schwoerung"] .ansicht[data-ansicht="schwoerung"] { display: block; }
[data-ansicht="boss"] .uebernahme[data-ansicht="boss"],
[data-ansicht="chaos"] .uebernahme[data-ansicht="chaos"] { display: flex; }

/* Jede Ansicht fährt kurz von unten ein */
.ansicht, .uebernahme { animation: ansicht-rein 0.32s var(--wechsel-kurve) both; }
@keyframes ansicht-rein {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ================================================================
   Beitritt
   ================================================================ */
.ansicht--voll { min-height: 100dvh; padding: 32px 20px calc(24px + var(--szenen-luft)); }
.beitritt { display: grid; justify-items: center; text-align: center; gap: 10px; }
.beitritt__eyebrow {
  margin-top: 8px;
  font: 700 13px/1 var(--schrift-titel);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.beitritt__titel { font: 700 28px/1.15 var(--schrift-titel); color: var(--text); }
.beitritt__text { font-size: 16px; color: var(--text-leise); }

.pin { display: grid; gap: 16px; width: 100%; margin-top: 18px; }
.pin__felder { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; border: 0; }
.pin__ziffer {
  width: 62px;
  height: 78px;
  padding: 0;
  text-align: center;
  font: 700 38px/1 var(--schrift-titel);
  color: var(--gold-hell);
  background: rgb(0 0 0 / 0.5);
  border: 2px solid var(--gold-linie);
  border-radius: 6px;
  caret-color: var(--gold);
}
.pin__ziffer:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 2px; border-color: var(--gold); }
.pin__ziffer[aria-invalid="true"] { border-color: var(--fehler); color: var(--fehler); }
/* Fehlerhafte Eingabe schüttelt kurz */
.pin--falsch .pin__felder { animation: schuetteln 0.4s ease-in-out; }
@keyframes schuetteln {
  25% { transform: translateX(-8px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}
.pin__hilfe { font-size: 14px; color: var(--text-leise); }

.tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
}
.taste {
  min-height: 58px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--gold-linie);
  border-radius: 6px;
  font: 700 24px/1 var(--schrift-titel);
  color: var(--text);
  cursor: pointer;
}
.taste:active { translate: 0 2px; background: rgb(224 169 59 / 0.18); }
.taste--weg { font-size: 20px; color: var(--text-leise); }

.gesperrt {
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid var(--fehler);
  border-radius: var(--radius);
  background: rgb(229 112 95 / 0.12);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.gesperrt__titel { font: 700 18px/1.2 var(--schrift-titel); color: var(--fehler); margin-bottom: 4px; }
.gesperrt b { font-variant-numeric: tabular-nums; }

/* ================================================================
   Grundgerüst der angemeldeten Ansicht
   ================================================================ */
.app {
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: var(--szenen-luft);
}

.kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  background: linear-gradient(180deg, rgb(16 16 16 / 0.9), transparent);
}
.spieler-hex--klein { --h: 46px; }
.kopf__wer { min-width: 0; }
.kopf__name { font: 700 19px/1.1 var(--schrift-titel); color: var(--k, var(--gold)); }
.kopf__info { font-size: 14px; color: var(--text-leise); }
.kopf__level {
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid var(--gold-linie);
  border-radius: 3px;
  font: 700 14px/1.3 var(--schrift-titel);
  color: var(--text-leise);
  white-space: nowrap;
}
.kopf__level b { font-size: 19px; color: var(--gold); }

.band {
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-left: 4px solid var(--gold);
  background: rgb(224 169 59 / 0.12);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gold-hell);
}
.band[data-art="notfall"] { border-left-color: var(--fehler); background: rgb(229 112 95 / 0.14); color: var(--fehler); }

.inhalt { flex: 1; min-height: 0; padding: 4px 16px 20px; overflow-y: auto; }
.inhalt:focus { outline: none; }
.seitentitel { font: 700 24px/1.15 var(--schrift-titel); color: var(--gold); margin-bottom: 8px; }
.seitentext { font-size: 15px; line-height: 1.5; color: var(--text-leise); margin-bottom: 16px; }
.seitentext b { color: var(--text); }

/* ---------- Tab-Leiste ---------- */
.tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgb(10 10 10 / 0.95);
  border-top: 1px solid var(--gold-linie);
}
.tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: var(--tippziel);
  padding: 6px 4px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: 600 12px/1 var(--schrift-text);
  color: var(--text-leise);
  cursor: pointer;
}
.tab__zeichen { font-size: 19px; line-height: 1; }
.tab[aria-current="true"] { color: var(--gold); background: rgb(224 169 59 / 0.1); }

/* ================================================================
   Heute
   ================================================================ */
.vorkarte {
  margin-bottom: 18px;
  padding: 18px;
  text-align: center;
  background:
    linear-gradient(180deg, rgb(16 16 16 / 0.6), rgb(16 16 16 / 0.92)),
    url("../assets/blizzard/kulisse-wald-nacht.png") center / cover;
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius);
}
.vorkarte__eyebrow {
  font: 700 12px/1 var(--schrift-titel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.vorkarte__zeit {
  margin-top: 8px;
  font: 900 40px/1 var(--schrift-titel);
  font-variant-numeric: tabular-nums;
  background: var(--gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vorkarte__was { font-size: 15px; color: var(--text-leise); }
.vorkarte__teaser { margin: 12px 0 14px; font-size: 16px; font-style: italic; line-height: 1.4; }

/* ---------- Aufgabenkarte mit Aufdecken ---------- */
.karte { margin: 34px 0 18px; perspective: 1400px; }
.karte__dreh { position: relative; transform-style: preserve-3d; transition: transform 0.6s var(--wechsel-kurve); }
.karte:not(.karte--auf) .karte__dreh { transform: rotateY(180deg); }
.karte__vorn, .karte__rueck { backface-visibility: hidden; border-radius: 8px; }

.karte__rueck {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 0;
  overflow: hidden;
  transform: rotateY(180deg);
  border: 0;
  cursor: pointer;
}
.karte__rueck > img { width: 100%; height: 100%; object-fit: cover; }
.karte__rueck .ph__ersatz { /* Leder, Goldrand, Runenkreis */
  background:
    radial-gradient(circle at 50% 50%, transparent 0 58px, var(--gold) 59px 61px, transparent 62px 74px, rgb(224 169 59 / 0.5) 75px 76px, transparent 77px),
    radial-gradient(circle at 50% 50%, rgb(240 184 71 / 0.35), transparent 40%),
    linear-gradient(160deg, #4a2f1c, #24160d 60%, #150d08);
  box-shadow: inset 0 0 0 10px #1a110a, inset 0 0 0 12px var(--gold), inset 0 0 60px rgb(0 0 0 / 0.7);
}
.karte__rueckText {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  padding: 16px;
  font: 700 17px/1.25 var(--schrift-titel);
  color: var(--gold-hell);
  text-shadow: 0 2px 10px #000;
}
.karte__rueckText small { display: block; margin-top: 4px; font: 600 14px var(--schrift-text); color: var(--text-leise); }
.karte__rueck:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }

.karte__vorn {
  position: relative;
  padding: 50px 20px 18px;
  text-align: center;
  color: var(--tinte);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #f5e9c9, transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, var(--pergament) 55%, var(--pergament-rand) 100%);
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.65), inset 0 0 40px rgb(120 80 30 / 0.35);
}
.karte__vorn::before { /* innere Doppellinie */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(110 75 30 / 0.55);
  border-radius: 4px;
  pointer-events: none;
}
.karte__siegel {
  position: absolute;
  left: 50%;
  top: -38px;
  width: 82px;
  height: 82px;
  translate: -50% 0;
}
.karte__siegel > img { width: 100%; height: 100%; object-fit: contain; }
.karte__siegel .ph__ersatz {
  border-radius: 48% 52% 50% 50% / 53% 46% 54% 47%;
  background:
    radial-gradient(ellipse 16px 9px at 50% 52%, #2a0604 0 60%, transparent 64%),
    radial-gradient(ellipse 26px 16px at 50% 52%, transparent 0 70%, rgb(42 6 4 / 0.8) 72% 82%, transparent 86%),
    radial-gradient(circle at 50% 50%, transparent 0 28px, rgb(0 0 0 / 0.28) 29px 31px, transparent 32px),
    radial-gradient(circle at 35% 30%, #c6392d, #8e1b16 55%, #4d0b08);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.5);
}
.karte--auf .karte__siegel { animation: siegel-drauf 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s backwards; }
@keyframes siegel-drauf {
  from { opacity: 0; transform: scale(1.7) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}

.karte__eyebrow {
  font: 700 14px/1 var(--schrift-titel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinte-rot);
}
.karte__tags { margin-top: 8px; font-size: 15px; color: var(--tinte-leise); }
.karte__tags b { color: var(--tinte); }
.karte__text { margin-top: 10px; font-size: 19px; line-height: 1.4; font-weight: 600; }
.karte__zeit {
  margin-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px 10px;
  text-align: left;
  font-size: 15px;
}
.karte__zeit > span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.karte__zeit > b { justify-self: end; }
.karte__zeitbalken { grid-column: 1 / -1; height: 6px; background: rgb(90 60 25 / 0.25); }
.karte__zeitbalken > span { background: var(--tinte-rot); }
.karte__zeitbalken.balken--knapp > span { background: #b03018; }
.karte__ablauf { margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--tinte-leise); text-align: left; }
.karte__knoepfe { margin-top: 14px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.karte__status {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--tinte-linie);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tinte-rot);
}
.karte__status[data-art="abgelaufen"] { color: var(--tinte-leise); }

/* ---------- Bingo-Vorschau auf „Heute“ ---------- */
.vorschau { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.minibingo { display: grid; grid-template-columns: repeat(5, 22px); gap: 3px; }
.minibingo li { height: 22px; background: var(--grund-3); border: 1px solid #3d3d3d; border-radius: 2px; }
.minibingo .an { background: linear-gradient(180deg, #f5cf76, #c38a2a); border-color: #f5d27a; }
.minibingo .frei { background: radial-gradient(circle, var(--gold) 0 26%, var(--grund-3) 30%); }
.vorschau__text { font-size: 15px; line-height: 1.4; }
.vorschau__link {
  margin-top: 4px;
  padding: 10px 0;
  min-height: var(--tippziel);
  background: none;
  border: 0;
  font: 700 15px var(--schrift-text);
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vorschau__link::after { content: " →"; }

/* ---------- DJ-Kurzkarte ---------- */
.djkarte {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tippziel);
  margin-top: 14px;
  padding: 10px 14px;
  text-align: left;
  background: linear-gradient(90deg, rgb(48 48 48 / 0.85), rgb(24 24 24 / 0.5));
  border: 0;
  border-left: 5px solid var(--k, var(--gold));
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
  cursor: pointer;
}
.djkarte__text { flex: 1; }
.djkarte__text small { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-leise); }
.djkarte__text b { font: 700 19px/1.15 var(--schrift-titel); color: var(--k, var(--gold)); }
.djkarte__zeit { font: 700 20px/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }

/* ---------- Upload-Knopf ---------- */
.uploadknopf {
  margin-top: 14px;
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  text-align: left;
  color: #1d1405;
  background: linear-gradient(180deg, #f5cf76, #e0a93b 55%, #b57a22);
  border: 1px solid #f7dc9a;
  border-radius: var(--radius);
  box-shadow: 0 4px 0 #6f4a10, 0 14px 34px rgb(224 169 59 / 0.22);
  cursor: pointer;
}
.uploadknopf:active { translate: 0 2px; }
.uploadknopf__text { font: 700 21px/1.1 var(--schrift-titel); }
.uploadknopf__text small { display: block; margin-top: 4px; font: 600 14px var(--schrift-text); color: #3d2a0a; }

.kleinlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.kleinlink {
  flex: 1;
  min-height: var(--tippziel);
  padding: 10px 12px;
  background: none;
  border: 1px solid rgb(168 159 140 / 0.3);
  border-radius: 4px;
  font: 600 14px var(--schrift-text);
  color: var(--text-leise);
  cursor: pointer;
}
.kleinlink:hover { color: var(--text); border-color: var(--gold-linie); }

/* ================================================================
   Bingo
   ================================================================ */
.bingofeld {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.bingofeld li { display: grid; }
.bingofeld button {
  position: relative;
  min-height: 78px;
  width: 100%;
  padding: 5px 4px;
  overflow: hidden;
  background: var(--grund-2);
  border: 1px solid #3d3d3d;
  border-radius: 3px;
  font: 600 11px/1.2 var(--schrift-text);
  color: var(--text-leise);
  text-align: center;
  cursor: pointer;
  hyphens: auto;
}
.bingofeld button[aria-pressed="true"] {
  background: linear-gradient(180deg, #f5cf76, #c38a2a);
  border-color: #f5d27a;
  color: #241703;
  font-weight: 700;
}
.bingofeld .frei button {
  background: radial-gradient(circle, rgb(224 169 59 / 0.35) 0 40%, var(--grund-2) 44%);
  border-color: var(--gold-linie);
  color: var(--gold);
  cursor: default;
}
.bingofeld .voll button { box-shadow: inset 0 0 0 2px var(--gold-hell); }

.bingo__fuss { margin-top: 16px; display: grid; gap: 10px; }
.bingo__zaehler { font-size: 15px; color: var(--text-leise); }
.bingo__zaehler b { font: 700 20px var(--schrift-titel); color: var(--text); }
.reihe-status {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--gold);
  background: rgb(224 169 59 / 0.12);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gold-hell);
}
.reihe-status::before { content: "⏳ "; }

/* ================================================================
   Upload
   ================================================================ */
.uploadform { display: grid; gap: 18px; }
.aufnahme { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aufnahme__knopf {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 12px;
  text-align: center;
  color: #1d1405;
  background: linear-gradient(180deg, #f5cf76, #e0a93b 55%, #c38a2a);
  border: 1px solid #7a5212;
  border-radius: var(--radius);
  font: 700 15px/1.2 var(--schrift-text);
  cursor: pointer;
}
.aufnahme__knopf--rand { color: var(--text); background: rgb(255 255 255 / 0.06); border: 2px solid var(--gold-linie); }
.aufnahme__knopf input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aufnahme__knopf:has(input:focus-visible) { outline: 3px solid var(--gold-hell); outline-offset: 3px; }
.aufnahme__zeichen { font-size: 26px; line-height: 1; }

.vorschaubild {
  border: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--grund-0);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.6);
}
.vorschaubild img { width: 100%; max-height: 260px; object-fit: contain; }
.vorschaubild figcaption { padding: 8px; text-align: center; }

.beteiligte { border: 0; margin: 0; padding: 0; }
.beteiligte__liste { display: grid; gap: 8px; margin-top: 8px; }

.fortschritt { display: grid; gap: 6px; }
.fortschritt__text { font-size: 15px; color: var(--text-leise); }
.fortschritt__text b { color: var(--gold); font-variant-numeric: tabular-nums; }

.erfolg { display: grid; justify-items: center; gap: 16px; padding: 40px 0; text-align: center; }
.erfolg__titel { font: 700 22px/1.3 var(--schrift-titel); color: var(--gold); }
.erfolg__titel:focus { outline: none; }

/* ================================================================
   Profil
   ================================================================ */
.profilform { display: grid; gap: 18px; margin-bottom: 22px; }
.namenspaar { display: flex; gap: 8px; align-items: stretch; }
.namenspaar .feld__eingabe { flex: 1; }
.namenspaar__fest {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: rgb(224 169 59 / 0.12);
  border: 1px dashed var(--gold-linie);
  border-radius: 4px;
  font: 700 17px var(--schrift-titel);
  color: var(--gold);
  white-space: nowrap;
}
.rollenhinweis {
  padding: 10px 12px;
  border-left: 4px solid var(--gold);
  background: rgb(224 169 59 / 0.1);
  font-size: 15px;
  line-height: 1.4;
  color: var(--gold-hell);
}
.rollenhinweis:empty { display: none; }

.checkliste { margin-bottom: 18px; }
.checkliste .balken { margin-bottom: 12px; }
.checkliste__liste { display: grid; gap: 8px; }

.aufstellung { display: grid; gap: 10px; }
.aufstellung li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: rgb(0 0 0 / 0.25);
  border-radius: 4px;
}
.aufstellung .spieler-hex { --h: 42px; }
.aufstellung__name { font: 700 17px/1.15 var(--schrift-titel); color: var(--k); }
.aufstellung__klasse { font-size: 14px; color: var(--text-leise); }
.aufstellung__rolle {
  padding: 3px 10px;
  border: 1px solid var(--gold-linie);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.aufstellung__rolle[data-offen] { border-style: dashed; color: var(--text-leise); }

/* ================================================================
   DJ
   ================================================================ */
.djgross {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 18px;
  text-align: center;
  background: linear-gradient(180deg, rgb(48 48 48 / 0.7), rgb(16 16 16 / 0.7));
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius);
}
.djgross .spieler-hex { --h: 84px; margin-bottom: 6px; }
.djgross__label { font: 700 12px/1 var(--schrift-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-leise); }
.djgross__name { font: 700 30px/1.1 var(--schrift-titel); color: var(--k, var(--gold)); }
.djgross__timer { margin-top: 6px; font: 700 44px/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.djgross .balken { width: 100%; margin-top: 8px; }
.djgross__naechster { margin-top: 8px; font-size: 15px; color: var(--text-leise); }
.djgross__naechster b { color: var(--text); }

.stimmen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.stimme {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 92px;
  padding: 12px;
  background: rgb(255 255 255 / 0.05);
  border: 2px solid rgb(168 159 140 / 0.35);
  border-radius: var(--radius);
  font: 700 17px/1.2 var(--schrift-text);
  color: var(--text);
  cursor: pointer;
}
.stimme__zeichen { font-size: 24px; line-height: 1; }
.stimme b { font: 700 24px var(--schrift-titel); }
.stimme--hype[aria-pressed="true"] { border-color: var(--gold); background: rgb(224 169 59 / 0.18); color: var(--gold-hell); }
.stimme--buh[aria-pressed="true"] { border-color: var(--fehler); background: rgb(229 112 95 / 0.15); color: var(--fehler); }

.djhinweis {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--gold);
  background: rgb(224 169 59 / 0.1);
  font-size: 15px;
  line-height: 1.45;
  color: var(--gold-hell);
}

/* ================================================================
   Rast
   ================================================================ */
.rastbild {
  margin-bottom: 18px;
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.rastbild img { width: 100%; height: 150px; object-fit: cover; filter: brightness(0.75) saturate(0.85); }
.rast__knoepfe { display: grid; gap: 10px; margin-bottom: 20px; }
.schlafliste { display: grid; gap: 8px; font-size: 15px; }
.schlafliste li { display: flex; align-items: center; gap: 10px; color: var(--text-leise); }
.schlafliste li::before { content: "☾"; color: var(--gold); font-size: 18px; }
.schlafliste li[data-leer] { font-style: italic; }
.schlafliste li[data-leer]::before { content: ""; }

/* ================================================================
   Schwörung
   ================================================================ */
.schwurform { display: grid; gap: 14px; margin-bottom: 22px; }
.zaehler { justify-self: end; font-size: 14px; font-weight: 700; color: var(--text-leise); }
.schwurliste { display: grid; gap: 14px; }
.schwurliste li { border-left: 4px solid var(--k, var(--gold)); padding-left: 12px; }
.schwurliste b { display: block; font: 700 16px var(--schrift-titel); color: var(--k, var(--gold)); }
.schwurliste p { font-size: 16px; line-height: 1.4; font-style: italic; }

/* ================================================================
   Boss-Übernahme
   ================================================================ */
.uebernahme {
  position: relative;
  flex-direction: column;
  min-height: 100dvh;
  padding: 24px 18px calc(18px + var(--szenen-luft));
  overflow: hidden;
}
.bossgrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 45% at 50% 30%, rgb(240 140 50 / 0.3), transparent 70%),
    linear-gradient(180deg, rgb(74 13 8 / 0.6), rgb(12 6 6 / 0.95)),
    url("../assets/blizzard/kulisse-wald-nacht.png") 60% center / cover;
}
.bosskopf { text-align: center; margin-bottom: 14px; }
.bosskopf__stufe {
  font: 700 12px/1 var(--schrift-titel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.bosskopf__name { margin-top: 6px; font: 700 25px/1.15 var(--schrift-titel); color: var(--text); text-shadow: 0 2px 12px #000; }

.bossteil { display: none; flex: 1; flex-direction: column; gap: 14px; }
.bossteil--mitte { justify-content: center; align-items: center; text-align: center; }
[data-bossphase="bereit"] .bossteil[data-bossteil="bereit"],
[data-bossphase="countdown"] .bossteil[data-bossteil="countdown"],
[data-bossphase="kampf"] .bossteil[data-bossteil="kampf"],
[data-bossphase="sieg"] .bossteil[data-bossteil="ergebnis"],
[data-bossphase="niederlage"] .bossteil[data-bossteil="ergebnis"] { display: flex; }

.bossfigur { flex: 1; min-height: 180px; --etikett-x: 8px; --etikett-y: 8px; }
.bossfigur > img { width: 100%; height: 100%; object-fit: contain; }
.bossfigur .ph__ersatz { /* Silhouette, bis das GPT-Bild in assets/gpt/ liegt */
  place-self: center;
  width: 160px;
  height: 210px;
  background: linear-gradient(180deg, #6b5c48, #2a241e 55%, #151210);
  clip-path: polygon(50% 0, 78% 22%, 86% 100%, 14% 100%, 22% 22%);
  outline: 2px solid rgb(240 184 71 / 0.55);
  outline-offset: -2px;
  filter: drop-shadow(0 0 40px rgb(240 184 71 / 0.45));
}
.bossgeschichte { font-size: 16px; line-height: 1.45; font-style: italic; text-align: center; color: var(--text); text-shadow: 0 2px 8px #000; }
.bossbereit { text-align: center; font: 700 17px var(--schrift-titel); color: var(--gold); }
.bossknopf { min-height: 62px; font-size: 20px; }

.bosslabel { font: 700 16px/1 var(--schrift-titel); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hell); }
.bosszahl {
  font: 900 150px/1 var(--schrift-titel);
  background: var(--gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgb(240 150 50 / 0.6));
  animation: zahl-puls 1s ease-out infinite;
}
@keyframes zahl-puls { from { transform: scale(1.35); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.bossleben {
  position: relative;
  height: 28px;
  padding: 3px;
  background: var(--grund-0);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.6);
}
.bossleben > span { position: absolute; inset: 3px; transform-origin: left; }
.bossleben__nach { background: #f3e1c0; transition: transform 0.9s ease-out 0.25s; }
.bossleben__wert { background: linear-gradient(180deg, #e0553b, var(--blut) 55%, #6d1a10); transition: transform 0.2s linear; }
.bosszeile { display: flex; justify-content: space-between; font-size: 15px; color: var(--text-leise); }
.bosszeile b { font: 700 22px var(--schrift-titel); font-variant-numeric: tabular-nums; color: var(--text); }

.angriff {
  flex: none;
  align-self: center;
  margin-block: auto;      /* schiebt den Kreis zwischen Leiste und Hinweis in die Mitte */
  display: grid;
  place-content: center;
  gap: 4px;
  border: 4px solid #7a5212;
  border-radius: 50%;
  aspect-ratio: 1;
  width: min(100%, 268px);
  background: radial-gradient(circle at 50% 35%, #ffe7a3, #e0a93b 55%, #a8741f 100%);
  box-shadow: 0 10px 0 #6f4a10, 0 0 60px rgb(224 169 59 / 0.45);
  color: #1d1405;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.angriff:active { translate: 0 6px; box-shadow: 0 4px 0 #6f4a10, 0 0 40px rgb(224 169 59 / 0.35); }
.angriff__text { font: 900 34px/1 var(--schrift-titel); }
.angriff__zahl { font: 700 22px/1 var(--schrift-text); font-variant-numeric: tabular-nums; opacity: 0.75; }
.angriff[data-modus="halten"] .angriff__text { font-size: 28px; }
.angriff[data-haelt="true"] { animation: halten-puls 0.7s ease-in-out infinite; }
@keyframes halten-puls { 50% { box-shadow: 0 10px 0 #6f4a10, 0 0 90px rgb(255 231 163 / 0.8); } }
.angriff__hinweis { text-align: center; font-size: 15px; color: var(--text-leise); }

.haltewahl { text-align: center; }
.haltewahl__frage { font-size: 15px; color: var(--text-leise); margin-bottom: 8px; }
.haltewahl__knoepfe { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.haltewahl__knoepfe .knopf[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgb(224 169 59 / 0.15); }

.bossergebnis__titel { font: 900 40px/1.1 var(--schrift-titel); color: var(--gold); }
.bossergebnis__titel:focus { outline: none; }
.bossergebnis__titel[data-art="niederlage"] { color: var(--fehler); font-size: 30px; }
.bossergebnis__text { font-size: 17px; line-height: 1.45; max-width: 30ch; }
.bosszahlen { display: flex; gap: 28px; margin: 4px 0 8px; }
.bosszahlen dt { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); }
.bosszahlen dd { margin: 0; font: 700 30px var(--schrift-titel); color: var(--text); }

/* ================================================================
   Chaosfenster
   ================================================================ */
.chaosgrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgb(150 60 200 / 0.3), transparent 70%),
    linear-gradient(180deg, #1a0f24, #0b060f 70%);
}
.chaoskopf { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: 18px; }
.chaoskopf__eyebrow { font: 700 12px/1 var(--schrift-titel); letter-spacing: 0.24em; text-transform: uppercase; color: #d9a6ff; }
.chaoskopf__titel { font: 700 23px/1.2 var(--schrift-titel); color: var(--text); }
.chaoskopf__zeit {
  margin-top: 4px;
  font: 900 44px/1 var(--schrift-titel);
  font-variant-numeric: tabular-nums;
  color: var(--gold-hell);
}
.chaosteil { display: none; flex: 1; }
[data-chaosteil="ankuendigung"].chaosteil { flex-direction: column; gap: 18px; }
[data-chaos="ankuendigung"] .chaosteil[data-chaosteil="ankuendigung"],
[data-chaos="aufgabe"] .chaosteil[data-chaosteil="aufgabe"] { justify-content: center; }
[data-chaos="aufgabe"] .chaosteil[data-chaosteil="aufgabe"],
[data-chaos="raus"] .chaosteil[data-chaosteil="raus"] { display: flex; flex-direction: column; gap: 18px; }
.chaosregeln { display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.chaosregeln li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.chaosregeln li::before { content: "•"; color: #d9a6ff; text-align: center; }

.chaoskarte {
  padding: 22px 18px;
  text-align: center;
  background: linear-gradient(160deg, #2a1338, #14081d 70%);
  border: 2px solid #8b4fb5;
  border-radius: var(--radius);
  box-shadow: 0 0 40px rgb(150 60 200 / 0.35);
}
.chaoskarte__eyebrow { font: 700 13px/1 var(--schrift-titel); letter-spacing: 0.2em; text-transform: uppercase; color: #d9a6ff; }
.chaoskarte__text { margin: 12px 0; font-size: 20px; line-height: 1.4; font-weight: 600; }
.chaoskarte__fuss { font-size: 14px; color: var(--text-leise); }
.chaosraus__titel { font: 700 22px/1.2 var(--schrift-titel); color: var(--gold); margin-bottom: 8px; }
.chaosteil--aus { justify-content: center; text-align: center; font-size: 16px; line-height: 1.5; }
.chaosfuss { margin-top: 18px; }

/* ================================================================
   Abstimmungs-Sheet
   ================================================================ */
.sheet { position: fixed; inset: 0; z-index: 120; }
.sheet[hidden] { display: none; }
.sheet__schatten {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.72);
  border: 0;
  animation: nur-rein 0.25s both;
}
@keyframes nur-rein { from { opacity: 0; } }
.sheet__blatt {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(100%, 480px);
  max-height: 92dvh;
  overflow-y: auto;
  padding: 10px 18px calc(20px + var(--szenen-luft));
  background: linear-gradient(180deg, #262626, var(--grund-1) 40%);
  border-top: 2px solid var(--gold);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 60px rgb(0 0 0 / 0.8);
  animation: sheet-rein 0.38s var(--wechsel-kurve) both;
}
@keyframes sheet-rein { from { transform: translateY(100%); } }
.sheet__griff {
  display: block;
  width: 48px;
  height: 4px;
  margin: 0 auto 14px;
  background: rgb(224 169 59 / 0.5);
  border-radius: 999px;
}
.sheet__eyebrow { font: 700 12px/1 var(--schrift-titel); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.sheet__titel { margin-top: 6px; font: 400 19px/1.3 var(--schrift-text); color: var(--text); }
.sheet__titel:focus { outline: none; }
.sheet__titel b { font: 700 19px var(--schrift-titel); color: var(--k, var(--gold)); }
.sheet__aufgabe {
  margin: 14px 0 6px;
  padding: 14px 16px;
  background: rgb(0 0 0 / 0.35);
  border-left: 4px solid var(--gold);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}
.sheet__meta { font-size: 14px; color: var(--text-leise); }
.sheet__zeit { margin-top: 16px; display: grid; gap: 6px; font-size: 15px; color: var(--text-leise); }
.sheet__zeit b { color: var(--text); font-variant-numeric: tabular-nums; }
.sheet__schweigen { font-size: 14px; font-style: italic; }
.sheet__stand { display: flex; gap: 8px; margin-top: 14px; }
.stand {
  flex: 1;
  padding: 8px;
  text-align: center;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.05);
  font-size: 13px;
  color: var(--text-leise);
}
.stand b { display: block; font: 700 22px var(--schrift-titel); }
.stand--ja b { color: var(--erfolg); }
.stand--nein b { color: var(--fehler); }
.stand--offen b { color: var(--text); }
.sheet__knoepfe { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 16px; }
.sheet__knoepfe .knopf { min-height: 58px; font-size: 18px; }
.sheet__grund { margin-top: 16px; display: grid; gap: 12px; }
.sheet__grund .feld { gap: 8px; border: 0; margin: 0; padding: 0; }
.sheet__danach {
  margin-top: 16px;
  padding: 14px;
  border-left: 4px solid var(--erfolg);
  background: rgb(143 206 122 / 0.12);
  font-size: 16px;
  font-weight: 700;
  color: var(--erfolg);
}
.sheet__blatt > .knopf--leise { margin-top: 14px; }

/* ================================================================
   Weniger Bewegung
   Das Drehen der Aufgabenkarte bleibt als Zustandswechsel bestehen, läuft aber
   durch die Regel in basis.css sofort statt über 0,6 s. Die Drehung selbst darf
   nicht wegfallen: sie entscheidet, welche Kartenseite zu sehen ist.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .bosszahl { animation: none; }
}