/* KOPF AN KOPF – Quiz-Duell im LUXVIS Game Center
   Leitbild: TV-Quizstudio am Abend. Zwei Scheinwerfer in den Farben der Spieler, eine Lampentafel für die Antworten. */

@font-face { font-family: 'Unbounded'; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/unbounded-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/unbounded-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(../fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(../fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --nacht: #15113a;
  --nacht2: #1e1951;
  --nacht3: #2a2368;
  --tief: #0d0a27;
  --linie: rgba(255, 255, 255, .11);
  --text: #fff5e4;
  --text2: rgba(255, 245, 228, .66);
  --richtig: #3ee07f;
  --falsch: #ff4d5e;
  --ich: #ff4f9a;
  --du: #ffd23f;
  --k: #ffd23f;
  --dunkel: #160f30;      /* Schrift auf farbigen Flächen */
  --anzeige: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --lese: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--nacht); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--nacht); color: var(--text);
  font: 500 16px/1.45 var(--lese);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* zwei Scheinwerfer: links die eigene Farbe, rechts die des Gegners */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 52% at -6% -4%, rgba(255, 79, 154, .26), transparent 70%),
    radial-gradient(70% 52% at 106% -4%, rgba(255, 210, 63, .2), transparent 70%);
  background:
    radial-gradient(70% 52% at -6% -4%, color-mix(in srgb, var(--ich) 30%, transparent), transparent 70%),
    radial-gradient(70% 52% at 106% -4%, color-mix(in srgb, var(--du) 24%, transparent), transparent 70%),
    radial-gradient(90% 40% at 50% 108%, rgba(118, 88, 255, .2), transparent 72%);
  transition: background .6s;
}
body::after { /* feines Bühnenraster am Boden */
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(transparent, #000 90%); mask-image: linear-gradient(transparent, #000 90%);
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
h1, h2, h3, p, ol { margin: 0; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic .voll { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------------ Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: linear-gradient(var(--nacht) 55%, rgba(21, 17, 58, 0));
}
.zurueck-gc, .gegner-chip, .ton-knopf, .kopf-code {
  height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .075);
  display: inline-flex; align-items: center; gap: 7px;
}
.zurueck-gc { padding: 0 15px 0 9px; color: var(--text); text-decoration: none; font: 600 12.5px var(--anzeige); letter-spacing: .01em; }
.zurueck-gc:hover { background: rgba(255, 255, 255, .13); }
.kopf-code { padding: 0 12px; font: 700 12.5px var(--anzeige); letter-spacing: .16em; color: var(--text2); height: 32px; }
.kopf-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; min-width: 0; }
.gegner-chip { padding: 0 14px 0 12px; font: 650 13.5px var(--lese); min-width: 0; }
.gegner-chip .gc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.gegner-chip .gc-st { color: var(--text2); font-weight: 500; white-space: nowrap; }
.gegner-chip .punkt { width: 9px; height: 9px; border-radius: 50%; background: #807aa3; flex: none; }
.gegner-chip.da .punkt { background: var(--richtig); box-shadow: 0 0 9px var(--richtig); }
.gegner-chip.hinten .punkt { background: #ffbe3b; }
.gegner-chip.weg .punkt { background: #807aa3; }
.gegner-chip.unklar .punkt { background: #ffb02e; animation: puls 1.2s infinite; }
.ton-knopf { width: 40px; justify-content: center; color: var(--text); }
.ton-knopf:hover { background: rgba(255, 255, 255, .13); }

.stoerung {
  position: sticky; top: calc(62px + env(safe-area-inset-top)); z-index: 19;
  margin: 0 auto 8px; max-width: 568px; width: calc(100% - 32px);
  display: flex; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 16px;
  background: #ffb02e; color: #1d1300; font: 650 14px/1.35 var(--lese);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.stoerung[hidden] { display: none; }
.dreh { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(0, 0, 0, .25); border-top-color: #1d1300; animation: dreh .8s linear infinite; flex: none; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Bühne */
.buehne { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: 6px 16px calc(40px + env(safe-area-inset-bottom)); }
.v { display: grid; gap: 18px; animation: ansicht .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ansicht { from { opacity: 0; transform: translateY(10px); } }

/* Wortmarke: zwei „KOPF“, die sich schräg gegenüberstehen */
.marke {
  display: grid; width: fit-content; margin: 0 auto;
  font: 900 clamp(58px, 18.5vw, 118px)/.84 var(--anzeige); text-transform: uppercase; letter-spacing: -.035em;
}
.marke .m1 { justify-self: start; padding-right: .62em; color: var(--ich); text-shadow: 0 0 .5em color-mix(in srgb, var(--ich) 40%, transparent); }
.marke .m3 { justify-self: end; padding-left: .62em; color: var(--du); text-shadow: 0 0 .5em color-mix(in srgb, var(--du) 36%, transparent); }
.marke .m2 {
  justify-self: center; margin: .14em 0 .16em;
  font-size: .25em; font-weight: 700; letter-spacing: .24em; line-height: 1;
  padding: .42em .7em .42em .94em; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .28); color: var(--text);
}
.marke.klein { font-size: 42px; }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border-radius: 999px;
  font: 650 15px/1.15 var(--anzeige); letter-spacing: .005em; text-align: center;
  transition: transform .12s, background .2s, box-shadow .2s, opacity .2s;
}
.knopf:active:not(:disabled) { transform: scale(.97); }
.knopf .ic { width: 21px; height: 21px; stroke-width: 2.1; }
.knopf.haupt { background: var(--ich); color: var(--dunkel); box-shadow: 0 8px 28px color-mix(in srgb, var(--ich) 35%, transparent); }
.knopf.haupt[style*="--k"] { background: var(--k); box-shadow: 0 8px 28px color-mix(in srgb, var(--k) 35%, transparent); }
.knopf.haupt:hover { filter: brightness(1.06); }
.knopf.zweit { background: rgba(255, 255, 255, .07); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.knopf.zweit:hover { background: rgba(255, 255, 255, .12); }
.knopf.leise { min-height: 44px; color: var(--text2); font: 600 14px var(--lese); justify-self: center; padding: 0 14px; }
.knopf.leise:hover { color: var(--text); }
.knopf.gross { min-height: 62px; font-size: 17px; width: 100%; }
.knopf.leuchten { animation: leuchten 1.6s ease-in-out infinite; }
@keyframes leuchten { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ich) 28%, transparent), 0 8px 34px color-mix(in srgb, var(--ich) 50%, transparent); } }
.reihe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reihe .knopf { flex: 1 1 200px; }

/* ------------------------------------------------------------------ Start */
.v-start { gap: 16px; }
.start-buehne { text-align: center; padding: 16px 0 8px; }
.unterzeile { margin: 18px auto 0; max-width: 31ch; color: var(--text2); font: 500 16.5px/1.5 var(--lese); text-wrap: balance; }
.karte { padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1.5px var(--linie); }
label { display: block; margin-bottom: 9px; color: var(--text2); font: 600 13.5px var(--lese); }
input {
  width: 100%; height: 56px; padding: 0 16px; border-radius: 15px;
  border: 1.5px solid rgba(255, 255, 255, .15); background: rgba(8, 6, 28, .55);
  font: 650 18px var(--lese); color: var(--text);
}
input::placeholder { color: rgba(255, 245, 228, .35); }
input:focus { outline: none; border-color: var(--ich); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ich) 24%, transparent); }
.farben { display: flex; gap: 11px; margin-top: 15px; flex-wrap: wrap; }
.farbe { width: 38px; height: 38px; border-radius: 50%; background: var(--f); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); transition: box-shadow .15s, transform .15s; }
.farbe[aria-checked="true"] { box-shadow: 0 0 0 3px var(--nacht), 0 0 0 5.5px var(--f); transform: scale(1.04); }
.beitritt { padding: 2px 0; }
.beitritt-reihe { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#code { font: 750 21px var(--anzeige); letter-spacing: .32em; text-transform: uppercase; text-align: center; padding-left: calc(16px + .32em); }
#code::placeholder { letter-spacing: .12em; font-weight: 500; }
.beitritt .knopf { padding: 0 20px; }
.zurueck-duell { width: 100%; }
.zurueck-duell b { letter-spacing: .12em; }
.meldung { min-height: 1.3em; color: #ff9aa3; font: 650 15px/1.4 var(--lese); text-align: center; }
.meldung:empty { display: none; }
.regeln { padding: 4px 2px; }
.regeln summary { cursor: pointer; color: var(--text2); font: 650 15px var(--lese); list-style: none; display: flex; align-items: center; gap: 8px; justify-content: center; }
.regeln summary::-webkit-details-marker { display: none; }
.regeln summary::after { content: '+'; font: 600 18px var(--anzeige); color: var(--text2); }
.regeln[open] summary::after { content: '–'; }
.regeln ol { margin-top: 14px; padding-left: 22px; display: grid; gap: 9px; color: var(--text2); line-height: 1.5; }
.regeln li::marker { font: 700 13px var(--anzeige); color: var(--ich); }

/* ------------------------------------------------------------------ Warten */
.warten { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 8px; color: var(--text2); font: 650 15.5px/1.35 var(--lese); text-align: center; }
.warten.gross { font-size: 17px; padding: 40px 0; }
.puls { width: 12px; height: 12px; border-radius: 50%; background: var(--du); flex: none; animation: puls 1.5s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--du) 65%, transparent); } 100% { box-shadow: 0 0 0 15px transparent; } }
.v-verbinde, .v-laden { padding-top: 12vh; text-align: center; }
.laden-text { color: var(--text2); margin-top: 26px; }

/* ------------------------------------------------------------------ Lobby: die Lampentafel mit dem Code */
.v-lobby { text-align: center; padding-top: 4vh; }
.lobby-titel { color: var(--text2); font: 650 16px/1.45 var(--lese); }
.code-tafel {
  display: flex; gap: clamp(6px, 2vw, 12px); justify-content: center;
  padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 22px);
  border-radius: 28px; background: var(--tief);
  border: 7px dotted var(--ich);
  box-shadow: 0 0 0 4px var(--tief), 0 0 50px color-mix(in srgb, var(--ich) 28%, transparent);
  animation: lampen 1.1s steps(1) infinite;
}
@keyframes lampen { 50% { border-color: var(--du); box-shadow: 0 0 0 4px var(--tief), 0 0 50px color-mix(in srgb, var(--du) 28%, transparent); } }
.code-tafel span {
  width: clamp(44px, 13.6vw, 66px); height: clamp(60px, 18vw, 86px); display: grid; place-items: center;
  border-radius: 14px; background: linear-gradient(#2d2674, #1b1650);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
  font: 800 clamp(28px, 9vw, 46px) var(--anzeige); color: var(--text);
  animation: kippen .55s calc(var(--i) * 90ms + 120ms) cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes kippen { from { transform: rotateX(90deg); opacity: 0; } }
.feintext { color: var(--text2); font-size: 14.5px; line-height: 1.5; max-width: 40ch; margin: 0 auto; }

/* ------------------------------------------------------------------ Duellkopf */
.duellkopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.spieler { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spieler.du { justify-content: flex-end; text-align: right; }
.nm { font: 700 15px var(--lese); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--f); color: var(--dunkel); font: 800 17px var(--anzeige);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 0 22px color-mix(in srgb, var(--f) 50%, transparent);
}
.ava.klein { width: 26px; height: 26px; font-size: 11.5px; box-shadow: none; }
.stand { display: flex; align-items: baseline; gap: 7px; font: 800 36px/1 var(--anzeige); }
.stand b:first-child { color: var(--ich); }
.stand b:last-child { color: var(--du); }
.stand i { color: var(--text2); font-style: normal; font-weight: 500; }

/* ------------------------------------------------------------------ Tafel */
.tafel { list-style: none; display: grid; gap: 6px; padding: 12px; border-radius: 26px; background: rgba(9, 7, 32, .6); box-shadow: inset 0 0 0 1.5px var(--linie); }
.zeile {
  display: grid; grid-template-columns: 20px 1fr minmax(112px, 1.25fr) 1fr; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 10px; border-radius: 17px;
}
.zeile.jetzt { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.zeile.spaeter { opacity: .55; }
.rnr { font: 700 12px var(--anzeige); color: var(--text2); text-align: center; }
.birnen { display: flex; gap: 6px; }
.zeile .birnen.ich { justify-content: flex-end; }
.birne {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #3b3474, #201a4d);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08);
}
.birne .ic { width: 14px; height: 14px; stroke-width: 3.2; }
.birne.richtig { background: radial-gradient(circle at 35% 30%, #b4ffd0, var(--richtig) 60%); color: #08321a; box-shadow: 0 0 13px color-mix(in srgb, var(--richtig) 70%, transparent); }
.birne.falsch { background: radial-gradient(circle at 35% 30%, #ffc0c6, var(--falsch) 60%); color: #3a0710; box-shadow: 0 0 13px color-mix(in srgb, var(--falsch) 65%, transparent); }
.birne.verdeckt { background: radial-gradient(circle at 35% 30%, #ffffff, #c6bff0 65%); box-shadow: 0 0 11px rgba(255, 255, 255, .4); }
.kat {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px;
  padding: 6px 10px; border-radius: 13px; text-align: center;
  background: color-mix(in srgb, var(--k) 19%, transparent); color: var(--k);
  font: 650 11.5px/1.15 var(--anzeige);
}
.kat .ic { width: 18px; height: 18px; }
.kat.offen { color: var(--text2); background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .13); font-weight: 500; }
.zeile.jetzt .kat.offen { color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.tafel-aktion { display: grid; gap: 10px; }
.vorschlaege { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mini-kat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); font: 600 12px var(--anzeige); }
.mini-kat .ic { width: 16px; height: 16px; }
.bilanz { text-align: center; color: var(--text2); font: 600 13.5px var(--lese); }
.banner { padding: 16px; border-radius: 20px; background: rgba(255, 176, 46, .13); box-shadow: inset 0 0 0 1.5px rgba(255, 176, 46, .4); color: var(--text); font: 600 15px/1.45 var(--lese); text-align: center; display: grid; gap: 12px; }

/* ------------------------------------------------------------------ Kategoriewahl */
.titel { text-align: center; font: 700 clamp(18px, 4.8vw, 22px)/1.3 var(--anzeige); text-wrap: balance; }
.titel .ic { display: inline-block; width: 24px; height: 24px; color: var(--k); vertical-align: -4px; margin-right: 8px; }
.kat-wahl { display: grid; gap: 14px; }
.kat-karte {
  display: grid; grid-template-columns: 66px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 3px; align-items: center;
  padding: 18px; border-radius: 24px; text-align: left; color: var(--text);
  background: linear-gradient(115deg, color-mix(in srgb, var(--k) 28%, var(--nacht2)), var(--nacht2) 72%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 55%, transparent);
  transition: transform .25s cubic-bezier(.2, 1.3, .4, 1), opacity .25s, box-shadow .25s;
  animation: rein .45s calc(var(--i) * 85ms) cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes rein { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.kat-karte:hover { transform: translateY(-2px); }
.kk-icon { grid-row: span 2; width: 66px; height: 66px; border-radius: 19px; display: grid; place-items: center; background: var(--k); color: var(--dunkel); }
.kk-icon .ic { width: 36px; height: 36px; stroke-width: 2; }
.kk-name { font: 700 19px/1.2 var(--anzeige); align-self: end; }
.kk-info { color: var(--text2); font: 550 14px var(--lese); align-self: start; }
.kat-karte.gewaehlt { transform: scale(1.035); box-shadow: inset 0 0 0 2.5px var(--k), 0 0 46px color-mix(in srgb, var(--k) 45%, transparent); }
.kat-karte.aus { opacity: .25; transform: scale(.97); }

/* ------------------------------------------------------------------ Frage */
.v-frage { gap: 16px; }
.frage-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kat-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--k) 20%, transparent); color: var(--k); font: 650 12.5px var(--anzeige); }
.fortschritt { color: var(--text2); font: 650 13.5px var(--lese); }
.frage-karte {
  position: relative; display: flex; align-items: center; min-height: 160px;
  padding: 30px 22px 26px; border-radius: 26px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--k) 22%, var(--nacht2)), var(--nacht2) 75%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 48%, transparent), 0 18px 50px rgba(0, 0, 0, .3);
  animation: karte .5s cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes karte { from { opacity: 0; transform: translateY(14px) rotate(-.6deg); } }
.frage { font: 700 clamp(20px, 5.5vw, 27px)/1.32 var(--lese); text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; }
.stufe { position: absolute; top: -12px; left: 20px; padding: 5px 11px; border-radius: 999px; background: var(--k); color: var(--dunkel); font: 650 10.5px var(--anzeige); letter-spacing: .03em; }
.antworten { display: grid; gap: 10px; }
.antwort {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px;
  padding: 11px 14px 11px 11px; border-radius: 19px; text-align: left;
  background: var(--nacht2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1);
  font: 650 17px/1.3 var(--lese); color: var(--text);
  transition: transform .14s, box-shadow .2s, background .25s, opacity .3s;
  animation: rein .4s calc(var(--i) * 60ms + 120ms) cubic-bezier(.2, .9, .3, 1) both;
}
.antwort:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--k); transform: translateY(-1px); }
.antwort:active:not(:disabled) { transform: scale(.985); }
.buchst { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--k) 22%, transparent); color: var(--k); font: 750 15px var(--anzeige); }
.antwort .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.antwort.richtig { background: color-mix(in srgb, var(--richtig) 20%, var(--nacht2)); box-shadow: inset 0 0 0 2px var(--richtig); opacity: 1; }
.antwort.richtig .buchst { background: var(--richtig); color: #08321a; }
.antwort.falsch { background: color-mix(in srgb, var(--falsch) 20%, var(--nacht2)); box-shadow: inset 0 0 0 2px var(--falsch); }
.antwort.falsch .buchst { background: var(--falsch); color: #3a0710; }
.antwort.aus { opacity: .42; }
.antwort.meine.richtig { animation: jubel .55s cubic-bezier(.2, 1.6, .4, 1); }
.antwort.meine.falsch { animation: wackeln .42s; }
@keyframes jubel { 40% { transform: scale(1.035); } }
@keyframes wackeln { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.symbol { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.antwort.richtig .symbol { background: var(--richtig); color: #08321a; }
.antwort.falsch .symbol { background: var(--falsch); color: #3a0710; }
.symbol .ic { width: 17px; height: 17px; stroke-width: 3.2; }
.gegner-marke {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--f); color: var(--dunkel); font: 800 12.5px var(--anzeige);
  box-shadow: 0 0 0 3px var(--nacht2), 0 0 14px color-mix(in srgb, var(--f) 60%, transparent);
  animation: plopp .4s cubic-bezier(.2, 1.8, .4, 1) both;
}
@keyframes plopp { from { transform: scale(0); } }
.frage-unten { display: grid; gap: 12px; min-height: 120px; align-content: start; }
.gegner-status { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text2); font: 600 14.5px var(--lese); min-height: 34px; }
.gegner-status.fertig { color: var(--text); }

/* ------------------------------------------------------------------ Rundenwertung und Rückblick */
.rueck-liste { list-style: none; display: grid; gap: 10px; padding: 0; }
.rueck { padding: 14px 16px; border-radius: 19px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1.5px var(--linie); }
.rf { font: 650 15px/1.4 var(--lese); }
.ra { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; color: var(--richtig); font: 700 14.5px/1.35 var(--lese); }
.ra .ic { width: 17px; height: 17px; stroke-width: 2.8; margin-top: 1px; }
.rs { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 11px; }
.rsp { display: flex; align-items: center; gap: 7px; color: var(--text2); font: 550 13.5px var(--lese); min-width: 0; }
.rm { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 12px var(--anzeige); }
.rm.richtig { background: var(--richtig); color: #08321a; }
.rm.falsch { background: var(--falsch); color: #3a0710; }
.rm.offen { background: rgba(255, 255, 255, .1); color: var(--text2); }
.rm .ic { width: 13px; height: 13px; stroke-width: 3.4; }
.falsch-text { text-decoration: line-through; text-decoration-color: rgba(255, 77, 94, .8); overflow-wrap: anywhere; }
.runde-unten { display: grid; gap: 12px; }
.runden-satz { text-align: center; font: 650 16px var(--lese); }
.runden-satz b { font: 800 18px var(--anzeige); margin-left: 6px; }

/* ------------------------------------------------------------------ Ergebnis */
.v-ende { text-align: center; padding-top: 2vh; }
.ende-krone { display: grid; place-items: center; }
.ende-krone .ic { width: 74px; height: 74px; stroke-width: 1.6; color: #ffd23f; filter: drop-shadow(0 0 18px rgba(255, 210, 63, .55)); animation: krone .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.niederlage .ende-krone .ic { color: var(--du); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--du) 50%, transparent)); }
.remis .ende-krone .ic { color: var(--text); filter: none; }
@keyframes krone { from { transform: translateY(-30px) scale(.4); opacity: 0; } }
.ende-titel { font: 900 clamp(32px, 10vw, 56px)/1.04 var(--anzeige); letter-spacing: -.02em; text-wrap: balance; }
.sieg .ende-titel { color: var(--ich); text-shadow: 0 0 .6em color-mix(in srgb, var(--ich) 40%, transparent); }
.niederlage .ende-titel { color: var(--du); }
.ende-stand { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.ende-stand > i { font: 600 40px/1 var(--anzeige); color: var(--text2); font-style: normal; padding-bottom: .55em; }
.es { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.es b { font: 900 clamp(52px, 15vw, 76px)/1 var(--anzeige); order: 3; }
.es .ava { order: 1; }
.es span { order: 2; font: 700 14.5px var(--lese); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es.ich b { color: var(--ich); }
.es.du b { color: var(--du); }
.ende-aktion { display: grid; gap: 10px; }
.revanche-ruf { font: 700 16px var(--lese); color: var(--du); }
.rueckblick { text-align: left; }
.rueckblick summary { cursor: pointer; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); font: 650 15px var(--lese); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.rueckblick summary::-webkit-details-marker { display: none; }
.rueckblick summary::after { content: '+'; font: 600 18px var(--anzeige); color: var(--text2); }
.rueckblick[open] summary::after { content: '–'; }
.rb-runde { margin-top: 16px; display: grid; gap: 10px; }
.rb-runde h3 { display: flex; align-items: center; gap: 8px; color: var(--k); font: 700 14px var(--anzeige); }
.rb-runde h3 .ic { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ Hinweis, Dialog, Konfetti */
.hinweis {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px;
  background: var(--text); color: var(--nacht); font: 700 14.5px/1.3 var(--lese); text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  transition: opacity .25s, transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.hinweis.an { opacity: 1; transform: translate(-50%, 0); }
.dialog { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 26, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog[hidden] { display: none; }
.dialog-box { width: min(420px, 100%); padding: 24px; border-radius: 26px; background: var(--nacht2); box-shadow: inset 0 0 0 1.5px var(--linie), 0 30px 80px rgba(0, 0, 0, .5); display: grid; gap: 20px; text-align: center; font: 600 16px/1.5 var(--lese); animation: ansicht .3s both; }
.konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }

/* ------------------------------------------------------------------ schmale Handys */
@media (max-width: 420px) {
  .zurueck-gc span { display: none; }
  .zurueck-gc { padding: 0 11px; }
  .gegner-chip .gc-st { display: none; }
  .zeile { grid-template-columns: 16px 1fr minmax(96px, 1.2fr) 1fr; gap: 7px; padding: 8px 6px; }
  .birnen { gap: 4px; }
  .birne { width: 21px; height: 21px; }
  .birne .ic { width: 12px; height: 12px; }
  .kat { font-size: 10.5px; gap: 5px; padding: 6px 7px; }
  .kat .ic { width: 16px; height: 16px; }
  .stand { font-size: 30px; }
  .ava { width: 36px; height: 36px; font-size: 15px; }
  .nm { font-size: 14px; }
  .antwort { font-size: 16px; min-height: 60px; }
}
@media (max-width: 350px) {
  .kat span { display: none; }
  .zeile { grid-template-columns: 14px 1fr 48px 1fr; }
}
@media (min-width: 900px) {
  .buehne { padding-top: 18px; max-width: 660px; }
  .v-start { gap: 18px; }
  .frage { font-size: 29px; }
  .antwort { font-size: 18px; min-height: 68px; }
  .zeile { min-height: 62px; }
  .birne { width: 27px; height: 27px; }
  .kat { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* bereits beantwortete Fragen und getroffene Wahl nicht erneut einblenden */
.antwort:disabled { animation: none; }
.antwort.meine.richtig { animation: jubel .55s cubic-bezier(.2, 1.6, .4, 1); }
.antwort.meine.falsch { animation: wackeln .42s; }
.kat-karte.gewaehlt, .kat-karte.aus { animation: none; }