/* Freundschaftsspiel. Richtung: Pyjama-Party bei Nacht. Dunkles Indigo mit
   treibenden Lichtflecken, glasige Karten, Koralle/Mint/Zitrone als Akzente,
   runde Display-Schrift. Tagversion in Pastell. */
:root {
  --bg: #15112b; --bg2: #1f1a3d; --karte: rgba(255,255,255,.07); --karte-rand: rgba(255,255,255,.14); --karte-fest: #241e45;
  --ink: #f6f2ff; --ink2: #b9b0d6; --linie: rgba(255,255,255,.14);
  --akzent: #ff6b8b; --mint: #2fd1c2; --gelb: #ffd166; --lila: #8b7cff; --rot: #ff5c5c; --gruen: #3ddc97;
  --display: 'Baloo 2', 'Trebuchet MS', sans-serif; --text: 'Nunito', system-ui, sans-serif;
  --schatten: 0 10px 30px rgba(0,0,0,.35); --glas: blur(14px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f7f3ff; --bg2: #ece6fb; --karte: rgba(255,255,255,.75); --karte-rand: rgba(42,33,64,.08); --karte-fest: #ffffff; --ink: #2a2140; --ink2: #6b6283; --linie: rgba(42,33,64,.12); --akzent: #ff5a7d; --mint: #15b3a5; --gelb: #f5b400; --lila: #7a6cff; --rot: #e5484d; --gruen: #1e9e6a; --schatten: 0 10px 30px rgba(42,33,64,.12); color-scheme: light; } }
:root[data-theme="light"] { --bg: #f7f3ff; --bg2: #ece6fb; --karte: rgba(255,255,255,.75); --karte-rand: rgba(42,33,64,.08); --karte-fest: #ffffff; --ink: #2a2140; --ink2: #6b6283; --linie: rgba(42,33,64,.12); --akzent: #ff5a7d; --mint: #15b3a5; --gelb: #f5b400; --lila: #7a6cff; --rot: #e5484d; --gruen: #1e9e6a; --schatten: 0 10px 30px rgba(42,33,64,.12); color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--text); line-height: 1.45; -webkit-tap-highlight-color: transparent; overflow-x: hidden; position: relative; }
/* Treibende Lichtflecken */
.lichter { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lichter i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .35; animation: treiben 26s ease-in-out infinite alternate; }
.lichter i:nth-child(1) { background: var(--akzent); top: -30vmax; left: -20vmax; }
.lichter i:nth-child(2) { background: var(--mint); bottom: -35vmax; right: -25vmax; animation-duration: 31s; animation-delay: -8s; }
.lichter i:nth-child(3) { background: var(--lila); top: 30vh; left: 40vw; width: 40vmax; height: 40vmax; animation-duration: 37s; animation-delay: -15s; opacity: .25; }
@keyframes treiben { from { transform: translate(0, 0) scale(1); } to { transform: translate(12vw, -8vh) scale(1.15); } }
#app { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding-block: 10px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.versteckt { display: none !important; }
.bildschirm { animation: rein .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rein { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6) translateY(10px); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes schweben { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gelb) 70%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes stempel { 0% { opacity: 0; transform: scale(2.4) rotate(-18deg); } 70% { opacity: 1; transform: scale(.92) rotate(-12deg); } 100% { transform: scale(1) rotate(-12deg); } }
@keyframes punkte { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes balken { 0% { height: 20%; } 100% { height: 100%; } }
@keyframes gluehen { 0%, 100% { box-shadow: 0 0 24px color-mix(in srgb, var(--rot) 55%, transparent); } 50% { box-shadow: 0 0 60px color-mix(in srgb, var(--rot) 90%, transparent); } }
@keyframes schimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: .2px; text-wrap: balance; margin: 0; }
.titel { font-size: 2.1rem; margin: 2px 0 6px; }
h3 { font-size: 1.15rem; margin-bottom: 8px; }
h4 { font-size: .8rem; color: var(--ink2); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 1.5px; }
.erklaer { color: var(--ink2); margin: 0 0 14px; }
.hinweis { color: var(--ink2); font-size: .9rem; margin: 8px 0 0; }
.karte { background: var(--karte); border: 1px solid var(--karte-rand); backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas); border-radius: 22px; padding: 16px; margin: 12px 0; box-shadow: var(--schatten); }
.karte.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) { .karte.zwei-spalten { grid-template-columns: 1fr; } }
.knopf { border: none; border-radius: 16px; background: linear-gradient(135deg, var(--akzent), #ff8e72); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.1rem; padding: 12px 18px; box-shadow: 0 6px 18px color-mix(in srgb, var(--akzent) 45%, transparent); transition: transform .12s, box-shadow .12s; }
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(2px) scale(.98); box-shadow: 0 2px 8px color-mix(in srgb, var(--akzent) 35%, transparent); }
.knopf.gross { width: 100%; font-size: 1.35rem; padding: 15px; margin-top: 8px; }
.knopf.zweit { background: linear-gradient(135deg, var(--mint), #5be0d4); color: #063c37; box-shadow: 0 6px 18px color-mix(in srgb, var(--mint) 40%, transparent); }
.knopf[disabled] { opacity: .45; cursor: default; transform: none; }
.link { background: none; border: none; color: var(--mint); font-weight: 700; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; }
.link.klein { font-size: .9rem; }
.zurueckzeile { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.schalter-leiste { margin-left: auto; display: flex; gap: 6px; }
.rund { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--karte-rand); background: var(--karte); backdrop-filter: var(--glas); display: inline-grid; place-items: center; font-size: 1.1rem; vertical-align: middle; }
.rund.aus { opacity: .4; }

/* ── Hub ── */
.kopf-hub { text-align: center; padding: 28px 0 8px; }
.logo { font-family: var(--display); font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1; letter-spacing: -.5px; animation: pop .7s cubic-bezier(.2,.8,.2,1); }
.logo span { background: linear-gradient(90deg, var(--akzent), var(--gelb), var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: schimmer 6s linear infinite; }
.untertitel { color: var(--ink2); margin: 10px 0 0; }
.freundinnen { display: flex; justify-content: center; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.freundinnen .avatar { width: 50px; height: 50px; flex-basis: 50px; font-size: 1.1rem; border: 3px solid var(--karte-fest); box-shadow: var(--schatten); animation: schweben 5s ease-in-out infinite; }
.freundinnen .avatar:nth-child(2) { animation-delay: -1s; } .freundinnen .avatar:nth-child(3) { animation-delay: -2s; } .freundinnen .avatar:nth-child(4) { animation-delay: -3s; } .freundinnen .avatar:nth-child(5) { animation-delay: -4s; } .freundinnen .avatar:nth-child(6) { animation-delay: -2.5s; } .freundinnen .avatar:nth-child(7) { animation-delay: -1.5s; }
.spieleliste { display: grid; gap: 12px; margin-top: 14px; }
.spielkarte { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--karte); border: 1px solid var(--karte-rand); backdrop-filter: var(--glas); border-radius: 22px; padding: 14px; box-shadow: var(--schatten); color: var(--ink); transition: transform .15s; }
.spielkarte:not(.bald):hover { transform: translateY(-3px) rotate(-.5deg); }
.spielkarte-symbol { font-size: 2.2rem; width: 72px; height: 72px; display: grid; place-items: center; background: linear-gradient(135deg, var(--lila), var(--akzent)); border-radius: 18px; flex: 0 0 72px; overflow: hidden; }
.spielkarte-symbol img { width: 100%; height: 100%; object-fit: cover; }
.spielkarte-text { display: grid; gap: 2px; min-width: 0; }
.spielkarte-text b { font-family: var(--display); font-size: 1.4rem; }
.spielkarte-text small { color: var(--ink2); font-size: .9rem; }
.spielkarte-pfeil { margin-left: auto; font-size: 2rem; color: var(--akzent); }
.spielkarte.bald { opacity: .55; }

/* ── Avatare ── */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; flex: 0 0 36px; overflow: hidden; object-fit: cover; }
img.avatar { display: inline-block; }
.avatar.dran { animation: puls 1.4s infinite; }

/* ── Einstellungen: Wer bist du? (eine Wahl) und die anderen (KI / Freundin / nicht dabei) ── */
.ich-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 4px; }
.gesicht { flex: 0 0 23%; display: grid; justify-items: center; gap: 6px; background: none; border: none; padding: 4px 0; color: var(--ink); font-weight: 800; font-size: .9rem; position: relative; }
.gesicht .avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.3rem; border: 3px solid transparent; transition: transform .15s, border-color .15s, box-shadow .15s; }
.gesicht:active .avatar { transform: scale(.94); }
.gesicht.aktiv .avatar { border-color: var(--akzent); transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 35%, transparent); }
.gesicht.aktiv { color: var(--akzent); }
.gesicht .haken { position: absolute; top: -2px; right: calc(50% - 34px); width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: #fff; display: none; place-items: center; font-size: .9rem; border: 2px solid var(--karte-fest); }
.gesicht.aktiv .haken { display: grid; animation: pop .3s; }
.du-bist { text-align: center; font-family: var(--display); font-size: 1.35rem; margin: 12px 0 0; color: var(--akzent); }
.profil { margin-top: 12px; display: grid; grid-template-columns: 64px 1fr; gap: 8px 12px; align-items: center; }
.profil-foto { position: relative; width: 64px; height: 64px; cursor: pointer; display: block; }
.profil-foto .avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.4rem; border: 3px solid var(--karte-fest); box-shadow: var(--schatten); }
.profil-kamera { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; font-size: .85rem; border: 2px solid var(--karte-fest); }
.profil-felder { display: grid; gap: 6px; min-width: 0; }
.profil-felder input { width: 100%; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: var(--karte-fest); color: var(--ink); font: inherit; font-weight: 700; }
.profil-wahl { display: flex; gap: 6px; }
.profil-hinweis { grid-column: 1 / -1; margin: 0; }
.andere { display: grid; gap: 8px; }
.andere-zeile { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; background: var(--karte-fest); border: 1px solid var(--linie); border-radius: 16px; padding: 8px 10px; }
.andere-zeile .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.andere-zeile .wer { display: flex; align-items: baseline; gap: 6px; }
.andere-zeile .wer b { font-family: var(--display); font-size: 1.05rem; }
.andere-zeile .wer small { color: var(--ink2); }
.andere-zeile .wahlleiste { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; background: var(--bg2); border-radius: 12px; padding: 3px; }
.andere-zeile .wahlleiste button { border: none; border-radius: 10px; padding: 7px 4px; background: none; color: var(--ink2); font-weight: 800; font-size: .85rem; }
.andere-zeile .wahlleiste button.aktiv { background: var(--karte-fest); color: var(--ink); box-shadow: var(--schatten); }
.andere-zeile .wahlleiste button.aktiv.ki { color: var(--mint); }
.andere-zeile .wahlleiste button.aktiv.freundin { color: var(--akzent); }
.andere-zeile.aus { opacity: .55; }
/* ── Einstellungen ── */
.menschen { display: grid; gap: 8px; }
.mensch { display: flex; align-items: center; gap: 8px; }
.mensch input { flex: 1; min-width: 0; border: 1px solid var(--linie); border-radius: 12px; padding: 9px 12px; background: var(--karte-fest); }
.mensch .x { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; width: 36px; height: 36px; font-weight: 900; color: var(--ink2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px 6px 6px; background: var(--karte-fest); font-weight: 700; transition: transform .1s; }
.chip:active { transform: scale(.96); }
.chip.aktiv { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 18%, var(--karte-fest)); }
.chip .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .8rem; }
.chip.nur-text { padding: 6px 14px; }
.auswahl { display: grid; gap: 8px; }
.stufe { text-align: left; border: 1px solid var(--linie); border-radius: 16px; padding: 10px 12px; background: var(--karte-fest); display: grid; gap: 2px; }
.stufe b { font-family: var(--display); font-size: 1.05rem; }
.stufe small { color: var(--ink2); }
.stufe.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, var(--karte-fest)); }
.select { width: 100%; border: 1px solid var(--linie); border-radius: 12px; padding: 9px 12px; background: var(--karte-fest); }

/* ── Runde ── */
.rundenkopf { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.runde-nr { font-family: var(--display); font-size: 1.3rem; }
.runde-phase { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 999px; padding: 3px 10px; font-size: .85rem; font-weight: 700; color: var(--ink2); }
.rundenkopf .schalter-leiste { margin-left: auto; }
.wortkarten { display: grid; gap: 10px; perspective: 1200px; }
.wortkarte { position: relative; border-radius: 22px; padding: 18px; background: linear-gradient(135deg, var(--mint), #5be0d4); color: #063c37; box-shadow: var(--schatten); display: grid; gap: 4px; min-height: 120px; overflow: hidden; }
.wortkarte.imposter { background: linear-gradient(135deg, #ff5c7a, #ff9a62); color: #4a0f1c; animation: gluehen 2.2s ease-in-out infinite; }
.wortkarte.verdeckt { background: var(--karte); color: var(--ink); border: 1px dashed var(--linie); animation: none; }
.wortkarte .label { font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 900; opacity: .8; }
.wortkarte .wort { font-family: var(--display); font-size: 2rem; line-height: 1.1; }
.wortkarte.imposter .wort { font-size: 2.4rem; letter-spacing: 2px; }
.wortkarte .erklaerung { font-size: .9rem; opacity: .85; }
.wortkarte .knopfzeile { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wortkarte .knopf { font-size: 1rem; padding: 9px 14px; }
.wortkarte .wortbild { width: calc(100% + 36px); margin: -18px -18px 6px; max-height: 190px; object-fit: cover; display: block; }
/* Kompakt: nach dem Ansehen nur noch eine Zeile; Tippen klappt sie wieder auf */
.wortkarte.kompakt { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 10px 14px; cursor: pointer; animation: none; }
.wortkarte.kompakt .wortbild { display: none; }
.wortkarte.kompakt .erklaerung { display: none; }
.wortkarte.kompakt .label { font-size: .7rem; white-space: nowrap; }
.wortkarte.kompakt .wort { font-size: 1.3rem; letter-spacing: 0; }
.wortkarte.kompakt::after { content: '⌄'; margin-left: auto; font-size: 1.2rem; opacity: .7; }
/* Tippmodus: Tastatur offen, alles Wichtige muss darüber Platz haben */
body.tippen .punkte, body.tippen .rundenkopf .schalter-leiste { display: none; }
body.tippen .tafel { margin: 8px 0; }
body.tippen .tafel-gitter { gap: 4px 6px; }
body.tippen .tafel-gitter .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .75rem; }
body.tippen .feld.blase { padding: 4px 8px; }
body.tippen .feld .was { font-size: 1rem; }
body.tippen .aktion { position: sticky; bottom: 0; padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 3; }
/* Die Wortkarte erscheint bei Rundenstart direkt oben, ohne Tippen */
.erscheint { animation: auftauchen .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes auftauchen { 0% { opacity: 0; transform: translateY(-18px) scale(.94); } 60% { transform: translateY(4px) scale(1.01); } 100% { opacity: 1; transform: none; } }
.wortkarte .rolle { display: inline-block; justify-self: start; font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 900; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.35); margin-bottom: 2px; }
.wortkarte.imposter .rolle { background: rgba(255,255,255,.3); }
.wortkarte.fee { background: linear-gradient(135deg, #b78bff, #7fd8ff); color: #241a4a; }
.wortkarte.fee .rolle { background: rgba(255,255,255,.45); }
.fee-leiste { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: linear-gradient(135deg, #b78bff, #7fd8ff); color: #241a4a; border-radius: 16px; padding: 10px 14px; margin: 0 0 12px; font-weight: 800; }
.fee-leiste .wahl { flex: 1 1 100%; }
.fee-leiste .wahl button { color: var(--ink); }
.knopf.klein { padding: 8px 14px; font-size: .95rem; }
.fee-kasten { border: 2px solid #b78bff; }
.feezeile { margin: 0; font-size: 1rem; color: var(--ink2); }
.wortkarte.kompakt .rolle { display: none; }
.wortkarten .knopfzeile.mitte { display: flex; justify-content: center; margin-top: 10px; }
.eingabe .mikro { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte-fest); font-size: 1.25rem; display: grid; place-items: center; padding: 0; }
.eingabe .mikro.hoert { background: var(--rot); color: #fff; border-color: var(--rot); animation: puls 1.2s infinite; }
.tafel { margin: 14px 0; }
/* Gitter: Name links, je Hinweisrunde eine Spalte */
.tafel-gitter { display: grid; grid-template-columns: minmax(96px, auto) repeat(var(--runden, 2), minmax(0, 1fr)); gap: 8px; align-items: center; }
.tafel-kopf, .tafel-reihe { display: contents; }
.tafel-kopf span { font-family: var(--display); color: var(--ink2); font-size: .85rem; text-align: center; }
.tafel-gitter .wer { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tafel-gitter .wer b { font-family: var(--display); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tafel-gitter .avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: .9rem; }
.tafel-reihe.ich .wer b { color: var(--akzent); }
.feld { min-height: 40px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.feld.blase { background: var(--karte-fest); border: 1px solid var(--karte-rand); border-radius: 14px; padding: 6px 10px; box-shadow: var(--schatten); }
.feld.leer { border: 1px dashed var(--linie); border-radius: 14px; opacity: .5; }
.feld .was { font-family: var(--display); font-size: 1.15rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.feld .was.leise { opacity: .6; font-size: .95rem; }
.feld.neu { animation: pop .4s cubic-bezier(.2,.8,.2,1); }
.feld.dran { outline: 2px solid var(--gelb); }
.feld .spricht { margin-left: auto; }
/* „du“-Abzeichen: so sieht man überall, welche Figur man selbst ist */
/* Online-Raum: wer ist gerade da, welche Figur hat wer */
.online { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 10px 12px; margin-bottom: 12px; }
.online .titel-zeile { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.05rem; margin-bottom: 6px; }
.online .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 30%, transparent); }
.online .geraete { display: flex; flex-wrap: wrap; gap: 6px; }
.online .geraet { display: inline-flex; align-items: center; gap: 6px; background: var(--karte-fest); border: 1px solid var(--karte-rand); border-radius: 999px; padding: 3px 10px 3px 3px; font-weight: 700; font-size: .9rem; }
.online .geraet .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .75rem; }
.online .geraet.leer { opacity: .7; padding-left: 10px; }
.online .hinweis { margin: 6px 0 0; }
.gesicht.fremd .avatar { opacity: .45; filter: grayscale(.4); }
.gesicht .handy { position: absolute; top: -4px; left: calc(50% - 34px); width: 22px; height: 22px; border-radius: 50%; background: var(--karte-fest); border: 1px solid var(--linie); display: grid; place-items: center; font-size: .75rem; }
.du-marke { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--akzent); color: #fff; font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; vertical-align: middle; }
.eingabe-wer { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: .95rem; color: var(--ink2); }
.eingabe-wer b { color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.eingabe-wer .avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: .8rem; }
.zeile { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; animation: pop .4s cubic-bezier(.2,.8,.2,1); }
.zeile .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.zeile .blase { background: var(--karte-fest); border: 1px solid var(--karte-rand); border-radius: 18px 18px 18px 4px; padding: 8px 12px; box-shadow: var(--schatten); display: flex; align-items: center; gap: 10px; min-width: 0; }
.zeile .blase .wer { font-size: .72rem; font-weight: 900; color: var(--ink2); text-transform: uppercase; letter-spacing: .5px; }
.zeile .blase .was { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.zeile.dran .blase { outline: 2px solid var(--gelb); }
.tippt { display: inline-flex; gap: 4px; align-items: center; height: 1.3rem; }
.tippt i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink2); animation: punkte 1.2s infinite; }
.tippt i:nth-child(2) { animation-delay: .2s; } .tippt i:nth-child(3) { animation-delay: .4s; }
.spricht { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; margin-left: auto; }
.spricht i { width: 3px; height: 100%; background: var(--mint); border-radius: 2px; animation: balken .5s ease-in-out infinite alternate; }
.spricht i:nth-child(2) { animation-delay: .15s; } .spricht i:nth-child(3) { animation-delay: .3s; } .spricht i:nth-child(4) { animation-delay: .1s; }
.aktion { display: grid; gap: 10px; }
.eingabe { display: flex; gap: 8px; }
.eingabe input { flex: 1; min-width: 0; border: 2px solid var(--mint); border-radius: 16px; padding: 12px 14px; font-size: 1.15rem; background: var(--karte-fest); }
.fehler { color: var(--rot); font-weight: 700; min-height: 1.3em; margin: 0; }
.fehler.wackelt { animation: wackeln .4s; }
.weitergeben { background: var(--karte); border: 1px solid var(--karte-rand); backdrop-filter: var(--glas); border-radius: 22px; padding: 18px; text-align: center; box-shadow: var(--schatten); display: grid; gap: 8px; justify-items: center; animation: pop .4s; }
.weitergeben .avatar { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.6rem; }
.weitergeben b { font-family: var(--display); font-size: 1.35rem; }
.wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wahl button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 16px; padding: 10px; background: var(--karte-fest); font-weight: 700; text-align: left; transition: transform .12s; }
.wahl button:active { transform: scale(.96); }
.wahl button.gewaehlt { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--karte-fest)); transform: scale(1.03); }
.ergebnis { background: var(--karte); border: 1px solid var(--karte-rand); backdrop-filter: var(--glas); border-radius: 22px; padding: 22px 16px 16px; box-shadow: var(--schatten); display: grid; gap: 10px; animation: pop .45s; position: relative; }
.ergebnis .schlagzeile { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; }
.ergebnis .schlagzeile.gut { color: var(--gruen); }
.ergebnis .schlagzeile.schlecht { color: var(--rot); }
.ergebnis.wackelt { animation: wackeln .5s; }
.ergebnis .wortwar { margin: 0; font-size: 1.05rem; color: var(--ink2); }
.ergebnis .wortwar b { display: inline-block; margin-left: 2px; padding: 2px 12px; border-radius: 999px; background: var(--mint); color: #0b2a27; font-family: var(--display); font-size: 1.15rem; }
.stimmenliste { display: grid; gap: 6px; }
.stimme { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; }
.stimme .balken { height: 10px; background: var(--bg2); border-radius: 5px; overflow: hidden; }
.stimme .balken b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--akzent), var(--gelb)); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.stimme .zahl { font-weight: 900; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.stimme.imposterin .name::after { content: ' 🕵️‍♀️'; }
.stempelbild { position: absolute; right: 12px; top: -14px; font-family: var(--display); font-size: 1.15rem; color: var(--rot); border: 4px solid var(--rot); border-radius: 10px; padding: 2px 10px; transform: rotate(-12deg); animation: stempel .5s cubic-bezier(.2,.8,.2,1) both; letter-spacing: 2px; opacity: .9; }
.punkte { margin-top: 14px; }
.punkte table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.punkte td { padding: 6px 4px; border-bottom: 1px solid var(--linie); }
.punkte td.z { text-align: right; font-weight: 900; font-family: var(--display); font-size: 1.15rem; }
.punkte .plus { color: var(--gruen); font-weight: 900; font-size: .9rem; margin-left: 6px; animation: pop .5s; display: inline-block; }
.punkte .avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: .8rem; }
.spielername { display: inline-flex; align-items: center; gap: 8px; }
.sieger td { background: color-mix(in srgb, var(--gelb) 22%, transparent); }
.pokal { font-size: 3rem; text-align: center; animation: schweben 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .lichter { display: none; } }