/* Flunkerfuchs v1.3 „Zauberwald“ */
@font-face { font-family: "Lilita"; src: url("fonts/lilita-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --nacht: #10231A; --gruen: #1D3729; --moos: #2F5A2A;
  --holz: #8B5A2B; --holz-hell: #B07A43; --holz-dunkel: #5A3416; --holz-tief: #3E220D;
  --pergament: #FBF3DF; --pergament2: #F0DFB8; --tinte: #3B2A1A; --leise: #7A6448;
  --gold: #FFD46B; --fuchs: #E0712B;
  --knopf: #4FB43A; --knopf2: #2F8A22; --knopf-rand: #1F6316;
  --rot: #C8432F; --ok: #3E9A2E;
  --radius: 18px; --schatten: 0 6px 18px rgba(0,0,0,.35);
  /* ältere Namen (Anleitung) */
  --sand: #E6D3A8; --sand-dunkel: #C9AE7C; --beige: #F5EFE3; --gruen-hell: #E3F0DA; --fuchs-hell: #FFE9C9; --karte: #FBF3DF;
  --titel: "Lilita", "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--nacht); color: var(--tinte);
  font: 600 18px/1.4 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
/* Zauberwald im Hintergrund (fest, funktioniert auch auf iPhone) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,24,16,.55), rgba(10,24,16,.35) 40%, rgba(10,24,16,.7)),
              url("img/wald-klein.webp") center / cover no-repeat;
}
@media (min-width: 900px) {
  body::before { background: linear-gradient(180deg, rgba(10,24,16,.5), rgba(10,24,16,.3) 40%, rgba(10,24,16,.65)), url("img/wald.webp") center / cover no-repeat; }
}
button, input, textarea { font: inherit; color: inherit; }

/* ---------- Holzschild-Logo */
.schild {
  display: inline-block; position: relative; padding: 6px 18px 8px; border-radius: 14px;
  background: repeating-linear-gradient(178deg, rgba(255,255,255,.05) 0 3px, rgba(0,0,0,.05) 3px 7px),
              linear-gradient(180deg, var(--holz-hell), var(--holz) 55%, #74461F);
  border: 3px solid var(--holz-dunkel);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 var(--holz-tief), 0 8px 18px rgba(0,0,0,.45);
  transform: rotate(-2deg);
  font-family: var(--titel); font-size: 40px; line-height: 1; letter-spacing: .5px; color: var(--gold);
  -webkit-text-stroke: 1.5px #5A2E0E; text-shadow: 0 3px 0 #5A2E0E, 0 5px 8px rgba(0,0,0,.35);
}
.schild::before { content: "🍃"; position: absolute; top: -16px; right: -10px; font-size: 26px; transform: rotate(20deg); -webkit-text-stroke: 0; text-shadow: none; }
.schild.klein { font-size: 22px; padding: 4px 11px 5px; border-width: 2px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 var(--holz-tief); -webkit-text-stroke: 1px #5A2E0E; text-shadow: 0 2px 0 #5A2E0E; }
.schild.klein::before { font-size: 15px; top: -10px; right: -7px; }
.band {
  display: inline-block; margin-top: 10px; padding: 4px 16px; border-radius: 6px;
  background: linear-gradient(180deg, var(--pergament), var(--pergament2)); color: var(--holz-dunkel);
  font: 800 13px/1.2 "Nunito", sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 3px 0 #C9AE7C, 0 5px 10px rgba(0,0,0,.3); transform: rotate(-1deg);
}

/* ---------- Kopf */
#kopf {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(16,35,26,.92), rgba(16,35,26,.78));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 2px solid rgba(255,212,107,.25);
  color: #fff; padding: 12px 16px 10px; padding-top: calc(12px + env(safe-area-inset-top));
}
.logo { text-decoration: none; }
#kopf-info { margin-left: auto; text-align: right; font-size: 14px; line-height: 1.25; color: #F3E6C8; }
#kopf-info b { font-family: var(--titel); font-size: 18px; letter-spacing: 2px; color: var(--gold); font-weight: 400; }
#kopf-info .runde { display: inline-block; margin-top: 2px; background: rgba(139,90,43,.85); border: 1px solid var(--holz-dunkel); border-radius: 8px; padding: 1px 8px; color: #fff; }
.icon-knopf { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #fff; font-size: 22px; width: 44px; height: 44px; cursor: pointer; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }

/* ---------- Texte direkt auf dem Wald (außerhalb von Karten) */
main > h1, main > h2, main > p, main > .leise, main > .mitte:not(.karte), main > .timer, main > .podium {
  color: #FFF6E0; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
main > p.leise, main > .mitte:not(.karte) .leise { color: #F3E6C8; }
main > h2 { font-family: var(--titel); font-weight: 400; font-size: 26px; }

/* ---------- Karten = Pergament */
.karte {
  background: linear-gradient(180deg, var(--pergament), #F6EACB);
  border: 2px solid #D9C28F; border-radius: var(--radius);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), var(--schatten);
  padding: 18px; margin-bottom: 16px;
}
h1 { font-family: var(--titel); font-weight: 400; font-size: 34px; margin: 4px 0 10px; color: var(--holz-dunkel); line-height: 1.1; }
h2 { font-family: var(--titel); font-weight: 400; font-size: 23px; margin: 0 0 10px; color: var(--gruen); letter-spacing: .3px; }
.leise { color: var(--leise); font-size: 15px; font-weight: 600; }
.mitte { text-align: center; }
.kat { display: inline-block; background: var(--moos); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.gross-emoji { font-size: 54px; line-height: 1; margin: 6px 0; }
.karte.fuchs { background: linear-gradient(180deg, #FFE9C9, #F9D9AE); border-color: #E3A867; }

/* Fragekarte: Pergament im Holzrahmen mit Eichel */
.karte.gruen {
  position: relative; margin-top: 22px; padding: 26px 18px 18px; text-align: center;
  border: 7px solid var(--holz);
  border-image: linear-gradient(180deg, var(--holz-hell), var(--holz-dunkel)) 1;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--holz-tief), inset 0 0 30px rgba(139,90,43,.18), var(--schatten);
}
.karte.gruen::before {
  content: "🌰"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px;
  background: radial-gradient(circle at 40% 35%, var(--holz-hell), var(--holz-dunkel)); border: 3px solid var(--holz-tief); border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.karte.gruen .kat { background: var(--holz); }
.frage { font-family: var(--titel); font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--tinte); letter-spacing: .2px; }
.loesung { margin-top: 14px; background: rgba(79,180,58,.12); border: 2px dashed var(--moos); border-radius: 12px; padding: 12px; text-align: left; }
.loesung.zu { cursor: pointer; text-align: center; font-weight: 800; color: var(--moos); }
.loesung .leise { color: var(--leise) !important; }

/* Fuchs-Maskottchen */
.maskottchen { display: block; width: 150px; height: 150px; margin: 4px auto 8px; border-radius: 50%; object-fit: cover;
  border: 5px solid var(--holz); box-shadow: 0 0 0 3px var(--holz-tief), 0 8px 20px rgba(0,0,0,.45); background: var(--pergament); }
.maskottchen.gross { width: 210px; height: 210px; }
.maskottchen.wackel { animation: wackel 2.4s ease-in-out infinite; }
@keyframes wackel { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3px); } }
.held { text-align: center; padding: 8px 0 14px; }
.held p { display: inline-block; background: rgba(16,35,26,.72); color: #FFF6E0 !important; border-radius: 12px; padding: 8px 12px; text-shadow: none; }

/* ---------- Knöpfe */
.knopf {
  display: block; width: 100%; border: 0; border-radius: 16px; padding: 16px 18px; margin: 10px 0 0;
  background: linear-gradient(180deg, var(--holz-hell), var(--holz)); color: #fff;
  font-family: var(--titel); font-weight: 400; font-size: 21px; letter-spacing: .4px; cursor: pointer; text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--holz-dunkel), 0 6px 12px rgba(0,0,0,.3); transition: transform .06s;
}
.knopf:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 var(--holz-dunkel); }
.knopf.fuchs { background: linear-gradient(180deg, #6CD04F, var(--knopf) 45%, var(--knopf2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--knopf-rand), 0 6px 14px rgba(0,0,0,.35); }
.knopf.fuchs:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 var(--knopf-rand); }
.knopf.hell { background: linear-gradient(180deg, #FFF8E8, var(--pergament2)); color: var(--holz-dunkel); text-shadow: none; box-shadow: inset 0 2px 0 #fff, 0 4px 0 #C9AE7C, 0 6px 12px rgba(0,0,0,.25); }
.knopf.rand { background: rgba(16,35,26,.55); color: #FFF6E0; border: 2px solid rgba(255,246,224,.6); box-shadow: none; }
.karte .knopf.rand { background: transparent; color: var(--holz-dunkel); border-color: var(--holz); }
.knopf:disabled { opacity: .5; cursor: default; filter: grayscale(.4); }
a.knopf { text-decoration: none; }
.zeile { display: flex; gap: 10px; }
.zeile > * { flex: 1; }

/* ---------- Eingaben */
input[type=text], textarea {
  width: 100%; border: 2px solid #D9C28F; border-radius: 12px; background: #FFFDF6; padding: 14px; font-size: 19px; font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(90,52,22,.12);
}
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--knopf2); box-shadow: 0 0 0 3px rgba(79,180,58,.25); }
textarea { min-height: 110px; resize: vertical; }
.code-feld { text-transform: uppercase; letter-spacing: 8px; font-family: var(--titel); font-weight: 400; text-align: center; font-size: 30px !important; }
label { display: block; font-weight: 800; margin: 12px 0 6px; color: var(--gruen); }
.zaehler { text-align: right; font-size: 13px; color: var(--leise); margin-top: 4px; }

/* ---------- Auswahl-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 2px solid #D9C28F; background: #FFFDF6; border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 800; cursor: pointer; }
.chip.an { background: linear-gradient(180deg, #6CD04F, var(--knopf2)); border-color: var(--knopf-rand); color: #fff; }

/* ---------- Spielfiguren (Tiere) */
.ava {
  --c: var(--fuchs); position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; background: var(--c);
  border: 3px solid var(--c); box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0,0,0,.35);
  font-size: 24px; line-height: 1; color: #fff; font-weight: 900;
}
.ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ava.s { width: 30px; height: 30px; font-size: 16px; border-width: 2px; }
.ava.l { width: 64px; height: 64px; font-size: 34px; }
.ava.xl { width: 84px; height: 84px; font-size: 44px; }

.tierwahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 4px; }
.tierwahl button {
  justify-content: flex-start; border: 0; background: transparent; padding: 4px 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800; color: var(--holz-dunkel); border-radius: 14px;
}
.tierwahl .ava { width: 100%; max-width: 62px; height: auto; aspect-ratio: 1; font-size: 30px; }
.tierwahl button.an { background: rgba(79,180,58,.18); }
.tierwahl button.an .ava { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--knopf), 0 4px 10px rgba(0,0,0,.35); transform: scale(1.06); }
.tierwahl button:disabled { opacity: .3; filter: grayscale(1); cursor: default; }

/* ---------- Lobby */
.qr { display: block; width: 190px; height: 190px; margin: 8px auto; border-radius: 12px; border: 4px solid var(--holz); }
.spielcode { font-family: var(--titel); font-size: 52px; letter-spacing: 12px; color: var(--holz-dunkel); text-align: center; line-height: 1.1; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #E2CFA3; font-weight: 800; }
.liste li:last-child { border-bottom: 0; }
.liste .wechseln { margin-left: auto; border: 2px solid var(--holz); background: transparent; color: var(--holz-dunkel); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 800; cursor: pointer; }
.punkt { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.mini { background: transparent; border: 0; color: var(--rot); font-size: 20px; cursor: pointer; margin-left: auto; }

/* ---------- Antworten: bunte Knöpfe */
.optionen { display: flex; flex-direction: column; gap: 10px; }
.opt {
  --o: #F6C945; --o2: #E3A91E; --ot: #4A3300;
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  background: var(--o);
  background: linear-gradient(180deg, color-mix(in srgb, var(--o) 82%, #fff), var(--o));
  border: 3px solid transparent; border-radius: 16px; padding: 12px 14px; color: var(--ot);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 var(--o2), 0 6px 12px rgba(0,0,0,.3);
  font-size: 19px; font-weight: 800; cursor: pointer; transition: transform .08s;
}
.opt:active { transform: translateY(2px); }
.optionen > .opt:nth-child(8n+1) { --o: #F6C945; --o2: #C99A17; --ot: #4A3300; }
.optionen > .opt:nth-child(8n+2) { --o: #F27A96; --o2: #C24968; --ot: #4D0F20; }
.optionen > .opt:nth-child(8n+3) { --o: #84CF6F; --o2: #4E9A3A; --ot: #173B0E; }
.optionen > .opt:nth-child(8n+4) { --o: #5E9BE6; --o2: #2F68B0; --ot: #0C2547; }
.optionen > .opt:nth-child(8n+5) { --o: #F5A04A; --o2: #C46F1B; --ot: #4A2400; }
.optionen > .opt:nth-child(8n+6) { --o: #B08AE6; --o2: #7A55B3; --ot: #2A1450; }
.optionen > .opt:nth-child(8n+7) { --o: #5CC9BA; --o2: #2C9486; --ot: #0B3B35; }
.optionen > .opt:nth-child(8n+8) { --o: #EB6F5B; --o2: #B5402E; --ot: #4A0F06; }
.opt .nr { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--ot);
  font-family: var(--titel); font-weight: 400; font-size: 20px; display: grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.opt .txt { flex: 1; }
.opt.gewaehlt { border-color: #fff; box-shadow: 0 0 0 4px var(--knopf), 0 0 22px rgba(108,208,79,.75), 0 4px 0 var(--o2); transform: scale(1.02); }
.opt.gewaehlt .nr { background: var(--knopf2); color: #fff; }
.opt.meins { opacity: .5; cursor: default; filter: grayscale(.5); }
.opt.vorlese { cursor: default; font-size: 21px; }
.opt.vorlese.stern { border-color: #fff; }
.opt.vorlese.stern .nr { background: var(--gold); color: var(--holz-dunkel); }
.opt .wer { font-size: 14px; font-weight: 700; opacity: .85; margin-top: 4px; }
/* Auflösung: Wahrheit leuchtet, Rest tritt zurück */
.optionen.aufgeloest > .opt { filter: saturate(.55) brightness(.92); }
.optionen.aufgeloest > .opt.wahr-auf { filter: none; border-color: #fff; box-shadow: 0 0 0 4px var(--gold), 0 0 26px rgba(255,212,107,.8), 0 4px 0 var(--o2); }
.opt.wahr-auf .nr { background: var(--ok); color: #fff; }
/* Prüfen-Liste (Vorleser): neutral */
.optionen.neutral > .opt { --o: #FFFDF6; --o2: #D9C28F; --ot: var(--tinte); background: #FFFDF6; border-color: #E2CFA3; }
.optionen.neutral > .opt.wahr-auf { --o: #DDF2D4; background: #DDF2D4; border-color: var(--ok); }
.etikett { display: inline-block; font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: var(--gruen); color: #fff; margin-left: 6px; vertical-align: middle; }
.etikett.fx { background: var(--fuchs); }
.etikett.ok { background: var(--ok); }

.joker { display: flex; align-items: center; gap: 12px; background: rgba(251,243,223,.95); border: 3px dashed var(--fuchs); border-radius: 16px; padding: 12px 14px; margin: 14px 0; cursor: pointer; }
.joker.an { background: linear-gradient(180deg, #F5A04A, var(--fuchs)); color: #fff; border-style: solid; border-color: #fff; }
.joker b { display: block; font-family: var(--titel); font-weight: 400; font-size: 19px; }

/* ---------- Timer */
.timer { font-family: var(--titel); font-size: 40px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px #5A2E0E; text-shadow: 0 3px 0 #5A2E0E; }
.karte .timer { color: var(--holz-dunkel); -webkit-text-stroke: 0; text-shadow: none; }
.timer.knapp { color: #FF6B4A !important; animation: puls 1s infinite; }
@keyframes puls { 50% { transform: scale(1.1); } }

/* ---------- Ergebnis */
.punkte-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #E2CFA3; }
.punkte-zeile:last-child { border-bottom: 0; }
.punkte-zeile .name { flex: 1; font-weight: 800; }
.punkte-zeile .plus { color: var(--ok); font-weight: 900; min-width: 46px; text-align: right; }
.punkte-zeile .plus.minus { color: var(--rot); }
.punkte-zeile .score { font-family: var(--titel); font-size: 22px; min-width: 52px; text-align: right; color: var(--holz-dunkel); }
.punkte-zeile .score::before { content: "⭐ "; font-size: 15px; }
.notiz { font-size: 13px; color: var(--leise); font-weight: 700; }
.meine-punkte { font-family: var(--titel); font-size: 56px; line-height: 1.1; color: var(--knopf2); }

/* ---------- Podium */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 26px 0 14px; }
.podium > div { flex: 1; max-width: 130px; text-align: center; border-radius: 14px 14px 0 0; padding: 10px 4px 8px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, var(--holz-hell), var(--holz-dunkel)); border: 2px solid var(--holz-tief); text-shadow: 0 1px 2px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.podium .p1 { height: 190px; background: linear-gradient(180deg, #FFE08A, #D9A62E); color: var(--holz-tief); text-shadow: none; }
.podium .p2 { height: 155px; background: linear-gradient(180deg, #F1F1F1, #A9A9A9); color: #333; text-shadow: none; }
.podium .p3 { height: 130px; }
.podium small { display: block; font-size: 24px; }
.podium .ava { margin-bottom: 4px; }

/* ---------- Spieler-Leiste unten */
#live {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(16,35,26,.82), rgba(10,22,16,.95));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 2px solid rgba(255,212,107,.3);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); overflow-x: auto; white-space: nowrap;
}
#live:empty { display: none; }
.sp {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 3px; padding: 6px 10px 6px 6px; vertical-align: top;
  background: rgba(24,44,70,.85); border: 2px solid rgba(255,255,255,.15); border-radius: 14px; color: #fff; min-width: 108px;
}
.sp .ava { width: 40px; height: 40px; font-size: 22px; }
.sp .st { position: absolute; right: -8px; bottom: -6px; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sp .info { display: flex; flex-direction: column; line-height: 1.15; }
.sp .nm { max-width: 76px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 800; }
.sp .pt { font-family: var(--titel); font-size: 17px; color: var(--gold); }
.sp .pt::before { content: "⭐ "; font-size: 12px; }
.sp.off { opacity: .45; }
.sp.vl { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,212,107,.5); }
.sp.ich { background: rgba(70,40,18,.9); }

/* ---------- Menü & Toast */
.overlay { position: fixed; inset: 0; z-index: 10; background: rgba(10,20,14,.6); display: flex; align-items: flex-end; justify-content: center; }
.overlay[hidden] { display: none; }
.blatt { background: linear-gradient(180deg, var(--pergament), #F3E4C2); width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
  border-radius: 22px 22px 0 0; border-top: 6px solid var(--holz); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.blatt h2 { margin-top: 4px; }
.regeln p { margin: 8px 0; }
.regeln ul { padding-left: 20px; margin: 6px 0; }
#toast { position: fixed; left: 50%; bottom: 130px; transform: translateX(-50%); z-index: 20; background: var(--holz-tief); color: #fff; padding: 12px 18px;
  border-radius: 12px; font-size: 16px; font-weight: 800; max-width: 90vw; text-align: center; border: 2px solid var(--gold); }

/* ---------- Spielfeld „Fuchsjagd“: Pfoten-Steine im Wald */
.karte.brett-karte {
  background: linear-gradient(180deg, rgba(16,40,24,.55), rgba(16,40,24,.75)), url("img/wald-klein.webp") center / cover;
  border: 4px solid var(--holz); color: #fff;
}
.brett-karte h2 { color: var(--gold); text-shadow: 0 2px 0 #3E220D; }
.brett-karte .leise { color: #F3E6C8 !important; }
.brett { position: relative; width: 100%; margin-top: 4px; }
.brett .feld { position: absolute; width: 10%; padding: 3px; }
.brett .f {
  height: 100%; border-radius: 45% 50% 42% 48%; position: relative;
  background: radial-gradient(circle at 35% 30%, #F2E6CF, #CDBB98 70%, #A8977A);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 4px rgba(0,0,0,.4);
  color: rgba(90,60,30,.55); font-size: 11px; font-weight: 900; display: grid; place-items: center; line-height: 1;
}
.brett .f::after { content: "🐾"; font-size: 13px; opacity: .28; }
.brett .f b { position: absolute; top: 2px; left: 5px; font-size: 10px; }
.brett .feld.ungerade .f { background: radial-gradient(circle at 35% 30%, #EADCC0, #C2AF8C 70%, #9F8D70); }
.brett .feld.fuenf .f { background: radial-gradient(circle at 35% 30%, #FFF0B8, #F0C755 70%, #C9962A); color: var(--holz-tief); }
.brett .feld.start .f::after, .brett .feld.ziel .f::after { opacity: 1; font-size: 18px; }
.brett .feld.start .f::after { content: "🏁"; }
.brett .feld.ziel .f::after { content: "🕳️"; }
.brett .figur {
  position: absolute; width: 8.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -58%);
  border: 2px solid var(--c, #fff); box-shadow: 0 0 0 2px #fff, 0 4px 6px rgba(0,0,0,.5); background: var(--c, #fff);
  color: #fff; font-size: 16px; display: grid; place-items: center; z-index: 2;
  transition: left 1.1s cubic-bezier(.3,1.4,.5,1), top 1.1s cubic-bezier(.3,1.4,.5,1);
}
.brett .figur img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.brett .figur.vorn { z-index: 3; }
.brett .figur.vorn::after { content: "👑"; position: absolute; top: -60%; font-size: 14px; }
.ton { margin-top: 10px; }

/* ---------- Fernseher-Ansicht */
body.tv { padding-bottom: 0; font-size: 24px; }
body.tv main { max-width: 1500px; }
body.tv .tv-raster { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
body.tv .frage { font-size: 48px; }
body.tv .opt { font-size: 32px; padding: 16px 22px; cursor: default; }
body.tv .opt .nr { width: 56px; height: 56px; font-size: 30px; }
body.tv .optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.tv .qr { width: 320px; height: 320px; }
body.tv .spielcode { font-size: 90px; }
body.tv #live { display: none; }
body.tv h1 { font-size: 50px; }
body.tv h2 { font-size: 30px; }
body.tv .timer { font-size: 80px; }
body.tv .karte.gruen { margin-top: 30px; }
body.tv .punkte-zeile .ava { width: 48px; height: 48px; }
body.tv .brett .figur { font-size: 26px; }
body.tv .brett .figur.vorn::after { font-size: 22px; }
body.tv .brett .f::after { font-size: 20px; }
body.tv .maskottchen { width: 220px; height: 220px; }
.tv-chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }
.tv-chips span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 20px; }
@media (max-width: 900px) { body.tv .tv-raster, body.tv .optionen { grid-template-columns: 1fr; } }

.einblenden { animation: rein .35s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .einblenden, .maskottchen.wackel, .timer.knapp { animation: none; } }