:root {
  --nacht: #1d1442;
  --nacht2: #2d1f66;
  --gold: #f6c343;
  --gold-dunkel: #c98f12;
  --rot: #e63946;
  --gruen: #2bb673;
  --pergament: #f4e4bc;
  --pergament-dunkel: #d9c08a;
  --tinte: #3b2a14;
  --weiss: #fffdf7;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 0%, var(--nacht2), var(--nacht) 70%);
  color: var(--weiss);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea { user-select: text; -webkit-user-select: text; }

/* ---------- HUD ---------- */
#hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(29, 20, 66, 0.98), rgba(29, 20, 66, 0.88));
  border-bottom: 2px solid rgba(246, 195, 67, 0.35);
  backdrop-filter: blur(6px);
}
.wappen-klein { width: 38px; height: 44px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.hud-name { flex: 1; min-width: 0; font-weight: 800; font-size: 0.95rem; line-height: 1.1; }
.hud-name small { display: block; font-weight: 500; opacity: 0.7; font-size: 0.72rem; }
.hud-wert {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 4px 10px 4px 5px;
  font-weight: 800;
  font-size: 0.95rem;
}
.hud-wert svg { width: 22px; height: 22px; }
.hud-wert.puls { animation: hudPuls .4s ease; }
@keyframes hudPuls { 50% { transform: scale(1.25); } }
.hud-rose { width: 38px; height: 38px; flex: none; }
.ton-knopf { background: none; border: 0; color: var(--weiss); opacity: .75; padding: 4px; }
.ton-knopf svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Ansicht ---------- */
#view { padding: 12px 12px 96px; max-width: 560px; margin: 0 auto; }

.kapitel-wahl {
  display: flex; gap: 6px; margin-bottom: 10px;
  background: rgba(255,255,255,.08); border-radius: 14px; padding: 4px;
}
.kapitel-wahl button {
  flex: 1; border: 0; border-radius: 10px; padding: 9px 4px;
  background: none; color: var(--weiss); font-weight: 700; font-size: .85rem; opacity: .65;
}
.kapitel-wahl button.aktiv {
  opacity: 1;
  background: linear-gradient(180deg, var(--gold), var(--gold-dunkel));
  color: var(--tinte);
  box-shadow: 0 3px 0 #8a5d00;
}
.kapitel-wahl button .haken { color: var(--gruen); }

.kapitel-kopf { text-align: center; margin: 4px 0 10px; }
.kapitel-kopf h2 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 1.6rem; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.kapitel-kopf p { margin: 2px 0 0; opacity: .75; font-size: .85rem; }

.fortschritt { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin: 8px 0 12px; }
.fortschritt div { height: 100%; background: linear-gradient(90deg, var(--gold), #ff8a3d); border-radius: 99px; transition: width .6s ease; }

/* ---------- Karte ---------- */
.karte-rahmen {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(150,100,30,.25), transparent 50%),
    linear-gradient(135deg, #f7e8c4, #ecd29a);
  box-shadow: 0 0 0 4px #8a5d22, 0 0 0 7px var(--gold-dunkel), 0 14px 30px rgba(0,0,0,.5);
}
.karte-rahmen svg.karte { display: block; width: 100%; height: auto; }

.karte text { font-family: Georgia, serif; font-weight: 700; paint-order: stroke; stroke: #f7e8c4; stroke-width: 4px; stroke-linejoin: round; fill: var(--tinte); }
.karte .titel-band text { stroke: none; fill: #fff6dc; font-style: italic; }

.weg-basis { fill: none; stroke: #7a5426; stroke-width: 3.5; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .7; }
.weg-fertig { fill: none; stroke: var(--rot); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 8; animation: wegLauf 1.2s linear infinite; }
@keyframes wegLauf { to { stroke-dashoffset: -20; } }
.schiene { fill: none; stroke: #5b3b1a; stroke-width: 7; stroke-linecap: round; opacity: .25; }

.halt { cursor: pointer; }
.halt .kreis { stroke: #fff; stroke-width: 3; }
.halt.gesperrt .kreis { fill: #9b8a6a; }
.halt.offen .kreis { fill: var(--rot); }
.halt.fertig .kreis { fill: var(--gruen); }
.halt .nr { fill: #fff; stroke: none; font-family: system-ui, sans-serif; font-weight: 900; font-size: 15px; }
.halt .puls { fill: none; stroke: var(--rot); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: puls 1.4s ease-out infinite; }
@keyframes puls { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.halt .zeit { font-size: 10px; font-family: system-ui, sans-serif; font-weight: 600; fill: #6b4d24; }

.wild { cursor: pointer; }
.wild .glanz { transform-box: fill-box; transform-origin: center; animation: funkeln 1.6s ease-in-out infinite; }
@keyframes funkeln { 0%, 100% { transform: scale(.85) rotate(0deg); } 50% { transform: scale(1.15) rotate(20deg); } }
.wild .ring { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: puls 1.8s ease-out infinite; }

.mover .wackeln { animation: wackeln 0.5s ease-in-out infinite alternate; }
@keyframes wackeln { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.mover .rad { transform-box: fill-box; transform-origin: center; animation: drehen .6s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.mover .dampf { fill: #fff; opacity: 0; animation: dampf 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mover .dampf:nth-of-type(2) { animation-delay: .6s; }
.mover .dampf:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes dampf { 0% { opacity: .9; transform: translate(0,0) scale(.5); } 100% { opacity: 0; transform: translate(-14px,-22px) scale(1.8); } }
.mover .blase { animation: huepfen 1s ease-in-out infinite; }
@keyframes huepfen { 50% { transform: translateY(-5px); } }
.mover { cursor: pointer; }

.wasser { animation: wellen 6s ease-in-out infinite alternate; }
@keyframes wellen { to { transform: translateX(-12px); } }
.wolke { animation: ziehen 40s linear infinite; }
@keyframes ziehen { from { transform: translateX(-80px); } to { transform: translateX(440px); } }

.weiter-knopf { margin-top: 14px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: block; width: 100%;
  border: 0; border-radius: 14px;
  padding: 14px 16px;
  font-size: 1.05rem; font-weight: 800;
  color: var(--tinte);
  background: linear-gradient(180deg, #ffd96b, var(--gold-dunkel));
  box-shadow: 0 5px 0 #8a5d00, 0 8px 14px rgba(0,0,0,.25);
  margin: 10px 0;
  cursor: pointer;
  transition: transform .08s;
}
.knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a5d00; }
.knopf.rot { color: #fff; background: linear-gradient(180deg, #ff6b75, #c1121f); box-shadow: 0 5px 0 #7d0a14, 0 8px 14px rgba(0,0,0,.25); }
.knopf.gruen { color: #fff; background: linear-gradient(180deg, #4fdc96, #1f8f57); box-shadow: 0 5px 0 #11603a, 0 8px 14px rgba(0,0,0,.25); }
.knopf.leise { background: rgba(255,255,255,.12); color: var(--weiss); box-shadow: none; font-weight: 600; font-size: .9rem; padding: 10px; }
.knopf:disabled { opacity: .5; }

/* ---------- Sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 6, 30, .6);
  animation: einblenden .2s ease;
}
.sheet[hidden], .overlay[hidden], .toast[hidden] { display: none; }
@keyframes einblenden { from { opacity: 0; } }
.sheet-inhalt {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #fdf3d8, var(--pergament));
  color: var(--tinte);
  border-radius: 24px 24px 0 0;
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.4);
  animation: hochfahren .35s cubic-bezier(.2,1.3,.4,1);
}
@keyframes hochfahren { from { transform: translateY(100%); } }
.sheet-kopf { display: flex; align-items: flex-start; gap: 10px; }
.sheet-kopf h2 { flex: 1; margin: 0; font-family: Georgia, serif; font-size: 1.45rem; }
.sheet-kopf .zeit { font-size: .8rem; color: #8a6a3a; font-weight: 700; }
.zu { border: 0; background: rgba(0,0,0,.08); border-radius: 50%; width: 36px; height: 36px; font-size: 1.2rem; color: var(--tinte); }
.story { font-style: italic; background: rgba(255,255,255,.5); border-left: 4px solid var(--gold-dunkel); padding: 10px 12px; border-radius: 8px; margin: 12px 0; line-height: 1.45; }
.aufgaben-punkte { display: flex; gap: 6px; margin: 6px 0 12px; }
.aufgaben-punkte span { flex: 1; height: 7px; border-radius: 9px; background: rgba(0,0,0,.12); }
.aufgaben-punkte span.fertig { background: var(--gruen); }
.aufgaben-punkte span.jetzt { background: var(--gold-dunkel); animation: blinken 1s infinite alternate; }
@keyframes blinken { to { opacity: .4; } }

.aufgabe { animation: reinrutschen .35s ease; }
@keyframes reinrutschen { from { opacity: 0; transform: translateX(30px); } }
.aufgabe h3 { margin: 0 0 6px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #a0702a; }
.aufgabe .frage { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0 0 12px; }
.lohn { float: right; display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--gold-dunkel); }
.lohn svg { width: 18px; height: 18px; }

.optionen { display: grid; gap: 10px; }
.option {
  border: 3px solid #e2c98e; background: #fffaf0; color: var(--tinte);
  border-radius: 14px; padding: 14px; font-size: 1.02rem; font-weight: 700; text-align: left;
  box-shadow: 0 4px 0 #d4b675;
  cursor: pointer;
}
.option:active { transform: translateY(3px); box-shadow: 0 1px 0 #d4b675; }
.option.falsch { border-color: var(--rot); background: #ffe3e5; animation: schuetteln .4s; }
.option.richtig { border-color: var(--gruen); background: #dcfbe9; animation: hops .4s; }
@keyframes schuetteln { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes hops { 50% { transform: scale(1.05); } }

.eingabe {
  width: 100%; font-size: 1.1rem; padding: 14px; border-radius: 14px;
  border: 3px solid #e2c98e; background: #fffaf0; color: var(--tinte); font-weight: 600;
}
.eingabe.falsch { border-color: var(--rot); animation: schuetteln .4s; }
textarea.eingabe { min-height: 90px; resize: vertical; font-family: inherit; }
.tipp { background: #fff4c7; border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: .95rem; }
.knopf-reihe { display: flex; gap: 8px; }
.knopf-reihe .knopf { flex: 1; }

.sortier-ziel { display: grid; gap: 6px; margin-bottom: 12px; min-height: 40px; }
.sortier-ziel div { background: #dcfbe9; border-radius: 10px; padding: 8px 10px; font-weight: 700; animation: hops .3s; }
.sortier-ziel div b { color: var(--gruen); margin-right: 6px; }
.sortier-quelle { display: grid; gap: 8px; }

.erledigt-liste { list-style: none; padding: 0; margin: 0; }
.erledigt-liste li { padding: 8px 0; border-bottom: 1px dashed #d9c08a; }

/* ---------- Wappen-Editor ---------- */
.farben, .symbole { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.farbe { width: 42px; height: 42px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.farbe.aktiv, .symbol.aktiv { outline: 4px solid var(--gold-dunkel); outline-offset: 2px; }
.symbol { width: 48px; height: 48px; border-radius: 12px; border: 0; background: #fffaf0; box-shadow: 0 3px 0 #d4b675; }
.symbol svg { width: 28px; height: 28px; fill: var(--tinte); }
.wappen-vorschau { display: flex; justify-content: center; margin: 6px 0; }
.wappen-vorschau svg { width: 90px; height: 104px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); animation: hops .4s; }

/* ---------- Overlay (Fangen, Belohnung) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(80, 50, 170, .95), rgba(10, 6, 30, .97));
  text-align: center;
  animation: einblenden .25s ease;
  justify-content: flex-start;
  overflow-y: auto;
}
.overlay::before, .overlay::after { content: ""; margin: auto; }
.overlay h2 { font-family: Georgia, serif; font-size: 1.7rem; margin: 0 0 6px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.overlay p { max-width: 340px; line-height: 1.45; margin: 6px auto; }
.overlay .knopf { max-width: 320px; }
.strahlen {
  position: absolute; width: 520px; height: 520px; left: 50%; top: 40%;
  margin: -260px 0 0 -260px; z-index: -1;
  background: repeating-conic-gradient(rgba(246,195,67,.18) 0 10deg, transparent 10deg 20deg);
  border-radius: 50%;
  animation: drehen 14s linear infinite;
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}

.fang-arena { position: relative; width: 240px; height: 240px; margin: 14px auto; }
.fang-figur { position: absolute; inset: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 900; color: rgba(255,255,255,.9); animation: schweben 1.6s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-10px); } }
.fang-ring { position: absolute; inset: 50px; border-radius: 50%; border: 6px solid var(--gold); box-shadow: 0 0 18px var(--gold); animation: schrumpfen 1.3s ease-in-out infinite alternate; }
@keyframes schrumpfen { from { transform: scale(2); border-color: #ff6b75; } to { transform: scale(.55); border-color: #4fdc96; } }
.fang-arena.daneben { animation: schuetteln .4s; }
.fang-arena.treffer .fang-ring { animation: none; transform: scale(1); border-color: #fff; }

.karte-figur {
  width: 210px; margin: 10px auto; padding: 16px 14px;
  border-radius: 18px; color: #fff; text-align: center;
  box-shadow: 0 0 0 4px rgba(255,255,255,.8), 0 10px 30px rgba(0,0,0,.5);
  animation: kartenDreh .7s cubic-bezier(.2,1.4,.4,1);
}
@keyframes kartenDreh { from { transform: rotateY(90deg) scale(.6); } }
.karte-figur .avatar { width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; font-weight: 900; background: rgba(255,255,255,.22); border: 4px solid rgba(255,255,255,.85); }
.karte-figur .sterne { color: #fff3b0; font-size: 1.3rem; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,220,100,.9); }
.karte-figur.selten { animation: kartenDreh .7s cubic-bezier(.2,1.4,.4,1), glanzRand 1.5s ease-in-out infinite alternate; }
@keyframes glanzRand { to { box-shadow: 0 0 0 4px #fff3b0, 0 0 40px 8px rgba(246,195,67,.9); } }

.rosenteil-gross svg { width: 180px; height: 180px; animation: kartenDreh .9s cubic-bezier(.2,1.4,.4,1); filter: drop-shadow(0 0 20px rgba(246,195,67,.7)); }

/* ---------- Sammlung ---------- */
.sammel-kopf { text-align: center; margin-bottom: 12px; }
.sammel-kopf .gross { font-size: 2.6rem; font-weight: 900; color: var(--gold); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.mini-karte {
  border: 0; border-radius: 14px; padding: 10px 6px; color: #fff; text-align: center;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
  min-height: 132px;
}
.mini-karte .avatar { width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; background: rgba(255,255,255,.22); border: 3px solid rgba(255,255,255,.8); }
.mini-karte .n { font-weight: 800; font-size: .82rem; line-height: 1.1; }
.mini-karte .s { color: #fff3b0; font-size: .8rem; }
.mini-karte.unbekannt { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.mini-karte.unbekannt .avatar { background: rgba(0,0,0,.25); border-style: dashed; }

/* ---------- Schatz ---------- */
.schatz-rose { display: flex; justify-content: center; margin: 4px 0 10px; }
.schatz-rose svg { width: 210px; height: 210px; filter: drop-shadow(0 0 22px rgba(246,195,67,.45)); }
.schatz-rose.komplett svg { animation: leuchten 2.4s ease-in-out infinite alternate; }
@keyframes leuchten { to { transform: scale(1.05); filter: drop-shadow(0 0 34px rgba(246,195,67,.95)); } }
.panel { background: rgba(255,255,255,.08); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; }
.panel h3 { margin: 0 0 8px; color: var(--gold); font-family: Georgia, serif; font-size: 1.2rem; }
.teil-liste { list-style: none; margin: 0; padding: 0; }
.teil-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.teil-liste li.fehlt { opacity: .4; }
.teil-liste svg { width: 34px; height: 34px; flex: none; }
.statistik { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.statistik div { background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px; text-align: center; }
.statistik b { display: block; font-size: 1.7rem; color: var(--gold); }
details { border-bottom: 1px solid rgba(255,255,255,.1); padding: 8px 0; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 6px 0 0; opacity: .9; line-height: 1.4; }

/* ---------- Boss ---------- */
.boss-buehne { text-align: center; margin: 6px 0 12px; }
.boss-buehne svg { width: 140px; height: 140px; animation: schweben 2s ease-in-out infinite; }
.boss-buehne.treffer svg { animation: getroffen .45s; }
@keyframes getroffen { 20% { transform: translateX(-12px) rotate(-8deg); filter: brightness(2.5); } 60% { transform: translateX(10px) rotate(6deg); } }
.leben { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.leben span { width: 34px; height: 12px; border-radius: 6px; background: #7b2cbf; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); transition: all .3s; }
.leben span.weg { background: rgba(0,0,0,.15); box-shadow: none; }
.sheet-inhalt.boss-modus { background: linear-gradient(180deg, #3a1d6e, #1d1442); color: var(--weiss); }
.sheet-inhalt.boss-modus .zu { color: #fff; background: rgba(255,255,255,.12); }
.sheet-inhalt.boss-modus .story { background: rgba(255,255,255,.08); }
.sheet-inhalt.boss-modus .option { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.wackel { animation: schuetteln .4s; }

/* ---------- Navigation ---------- */
#nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex;
  background: rgba(20, 13, 48, .96);
  border-top: 2px solid rgba(246,195,67,.3);
  padding-bottom: env(safe-area-inset-bottom);
}
#nav button {
  flex: 1; background: none; border: 0; color: rgba(255,255,255,.55);
  padding: 9px 4px 10px; font-size: .75rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#nav svg { width: 24px; height: 24px; fill: currentColor; }
#nav button.aktiv { color: var(--gold); }

/* ---------- Toast & Effekte ---------- */
.toast {
  position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; z-index: 80;
  transform: translateX(-50%);
  background: var(--weiss); color: var(--tinte);
  padding: 10px 16px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  animation: toastRein .3s ease;
  max-width: 90vw; text-align: center;
}
@keyframes toastRein { from { transform: translate(-50%, -20px); opacity: 0; } }

#konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

.muenze-flug {
  position: fixed; z-index: 95; width: 26px; height: 26px; pointer-events: none;
  transition: transform .7s cubic-bezier(.5,-0.4,.7,1), opacity .7s;
}

.bildschirm-wackeln { animation: schuetteln .4s; }

/* ---------- Rückmeldung & Erklärungen ---------- */
.rueckmeldung { min-height: 0; margin: 10px 0 0; font-weight: 800; color: #b3122a; font-size: 1.02rem; }
.rueckmeldung:empty { display: none; }
.rueckmeldung.zeigen { animation: schuetteln .4s; background: #ffe3e5; border-radius: 12px; padding: 10px 12px; }
.sheet-inhalt.rot-blitz { animation: rotBlitz .5s; }
@keyframes rotBlitz { 30% { box-shadow: inset 0 0 0 6px rgba(230, 57, 70, .8), 0 -10px 30px rgba(0,0,0,.4); } }
.info-box {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: #dcfbe9; border: 3px solid var(--gruen); color: #0f4d2c;
  line-height: 1.45; animation: reinrutschen .4s ease;
}
.info-box .knopf { margin-bottom: 0; }
.frage-bild { display: flex; justify-content: center; margin: 4px 0 12px; }
.frage-bild svg { width: 150px; height: 150px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }

.sheet-inhalt .knopf.leise {
  background: #fff; color: var(--tinte); font-weight: 800; font-size: .95rem;
  border: 3px dashed var(--gold-dunkel); box-shadow: 0 3px 0 #d4b675;
}
.sheet-inhalt.boss-modus .knopf.leise { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- Sortieren ---------- */
.sortier-liste { display: grid; gap: 8px; margin-bottom: 4px; }
.sortier-item {
  display: flex; align-items: center; gap: 10px;
  background: #fffaf0; border: 3px solid #e2c98e; border-radius: 14px;
  padding: 12px; font-weight: 700; box-shadow: 0 4px 0 #d4b675;
  touch-action: none; cursor: grab; transition: transform .18s ease;
  position: relative;
}
.sortier-item .griff { width: 22px; height: 22px; flex: none; color: #a0702a; }
.sortier-item.zieht { transition: none; z-index: 3; box-shadow: 0 12px 24px rgba(0,0,0,.25); border-color: var(--gold-dunkel); cursor: grabbing; }
.sortier-item.ok { border-color: var(--gruen); background: #dcfbe9; }
.sortier-item.nein { border-color: var(--rot); background: #ffe3e5; }
.zeitleiste { display: grid; gap: 8px; margin: 8px 0 4px; }
.zeitzeile { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.6); border-radius: 10px; padding: 8px 10px; }
.zeitzeile > b { flex: none; background: var(--gruen); color: #fff; border-radius: 8px; padding: 2px 6px; font-size: .9rem; }

/* ---------- Karten-Duell ---------- */
.zu-fortschritt { display: flex; justify-content: space-between; font-weight: 800; font-size: .85rem; color: #8a6a3a; margin-bottom: 8px; }
.zu-karte {
  min-height: 110px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: #fffaf0; border: 3px solid #e2c98e; border-radius: 18px; padding: 18px;
  font-size: 1.2rem; font-weight: 800; line-height: 1.35;
  box-shadow: 0 6px 0 #d4b675, 0 10px 20px rgba(0,0,0,.12);
  animation: kartenDreh .45s cubic-bezier(.2,1.3,.4,1);
}
.zu-karte.ok { border-color: var(--gruen); background: #dcfbe9; animation: hops .4s; }
.zu-karte.nein { border-color: var(--rot); background: #ffe3e5; animation: schuetteln .4s; }
.zu-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.zu-knoepfe .knopf { font-size: .92rem; padding: 14px 8px; line-height: 1.2; }
.knopf.zu-links { color: #fff; background: linear-gradient(180deg, #a66bd6, #6c3483); box-shadow: 0 5px 0 #43205a, 0 8px 14px rgba(0,0,0,.25); }
.zu-erklaerung { border-radius: 14px; padding: 12px 14px; line-height: 1.45; margin-top: 4px; }
.zu-erklaerung.ok { background: #dcfbe9; color: #0f4d2c; }
.zu-erklaerung.nein { background: #ffe3e5; color: #7d0a14; }
.vergleich { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 8px 0; font-size: .9rem; }
.vergleich th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: 0 6px; }
.vergleich th:first-child { color: #6c3483; }
.vergleich td { background: rgba(255,255,255,.65); padding: 8px; vertical-align: top; line-height: 1.35; }
.vergleich td:first-child { border-radius: 10px 0 0 10px; border-left: 4px solid #a66bd6; }
.vergleich td:last-child { border-radius: 0 10px 10px 0; border-left: 4px solid var(--gold-dunkel); }
.oekumene { background: rgba(255,255,255,.65); border-radius: 12px; padding: 10px 12px; margin: 10px 0 0; }
.evangelisch-liste { max-width: 360px; margin: 6px auto 0; text-align: left; background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 14px; font-size: .92rem; }
.evangelisch-liste ul, .evangelisch-punkte { margin: 6px 0 0; padding-left: 20px; line-height: 1.45; }
.evangelisch-punkte li { margin-bottom: 6px; }

/* ---------- Bonus, Werkstatt, Disputation, Tresor, Raid ---------- */
.bonus-liste { background: linear-gradient(135deg, #efe2ff, #fff4d6); border-radius: 16px; padding: 10px 12px; margin: 12px 0; }
.bonus-liste h3 { margin: 0 0 8px; color: #6c3483; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.bonus-knopf { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; background: #fff; color: var(--tinte); box-shadow: 0 3px 0 #d4c0ef; font-size: .95rem; }
.bonus-knopf > span:first-child { width: 30px; height: 30px; border-radius: 50%; background: #8e44ad; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; }
.bonus-knopf small { display: block; color: #8a6a3a; font-weight: 600; }
.bonus-knopf.fertig { opacity: .6; box-shadow: none; }
.bonus-knopf.fertig > span:first-child { background: var(--gruen); }
.sheet-inhalt.bonus-modus { background: linear-gradient(180deg, #f4ebff, var(--pergament)); }
.bibelzitat { margin: 0 0 8px; padding: 12px 14px; border-left: 4px solid #8e44ad; background: rgba(255,255,255,.7); border-radius: 0 12px 12px 0; font-family: Georgia, serif; font-style: italic; line-height: 1.5; }
.bibel-link { display: inline-block; font-weight: 800; color: #6c3483; text-decoration: none; background: #efe2ff; border-radius: 999px; padding: 6px 12px; margin: 2px 0; }
.bibel-link.hell { background: rgba(255,255,255,.18); color: #fff; margin: 8px 0; }
.disp-seite { border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,.6); border: 2px solid #e2c98e; }
.disp-seite.eigene { border-color: var(--gruen); background: #dcfbe9; }
.disp-seite ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.4; }
.disp-uhr { text-align: center; font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; color: #c1121f; min-height: 0; }
.disp-uhr:empty { display: none; }
.tresor-feld { background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.tresor-feld p { margin: 6px 0; font-weight: 700; }
.eingabe.richtig-feld { border-color: var(--gruen); background: #dcfbe9; }
.raid-balken { height: 14px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; margin: 8px auto 4px; max-width: 260px; }
.raid-balken div { height: 100%; background: linear-gradient(90deg, #c77dff, #7b2cbf); transition: width .6s ease; }

.halt .bonus-stern { animation: huepfen 1.2s ease-in-out infinite; }
.wild.legendaer .glanz { animation: funkeln 1s ease-in-out infinite; filter: drop-shadow(0 0 6px #c77dff); }
.sonder { cursor: pointer; }
.sonder .ring { fill: none; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: puls 1.8s ease-out infinite; }
.sonder .huepf { animation: huepfen 1.4s ease-in-out infinite; }
.vorschau { cursor: pointer; }

/* ---------- Sammlung: Gold, Legendär, Lesen, Tausch ---------- */
.karte-figur { position: relative; }
.etikett { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #8e44ad; color: #fff; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.etikett.gold { background: #c98f12; }
.karte-figur.golden { animation: kartenDreh .7s cubic-bezier(.2,1.4,.4,1), glanzRand 1.2s ease-in-out infinite alternate; }
.mini-karte { position: relative; }
.mini-karte.golden { box-shadow: 0 0 0 3px #f6c343, 0 0 16px rgba(246,195,67,.8); }
.mini-karte.legendaer { box-shadow: 0 0 0 3px #c77dff, 0 0 16px rgba(199,125,255,.8); }
.lese-punkt { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 2px #fff; animation: blinken .9s infinite alternate; }
.woche-banner { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; color: #fff; background: linear-gradient(135deg, #2bb673, #1f6f8b); box-shadow: 0 4px 0 rgba(0,0,0,.3); font-size: .9rem; line-height: 1.35; }
.woche-banner .mini-figur { width: 54px; height: 64px; flex: none; margin: 0; }
.hinweis-klein { font-size: .82rem; opacity: .75; text-align: center; margin: 6px 0 10px; line-height: 1.4; }
.lese-box { max-width: 320px; margin: 6px auto; background: rgba(255,255,255,.1); border-radius: 16px; padding: 12px; }
.lese-box .option { background: rgba(255,255,255,.95); }
.tauschcode { font-family: ui-monospace, Menlo, monospace; font-size: 2.6rem; font-weight: 900; letter-spacing: .25em; background: #fff; color: var(--tinte); border-radius: 16px; padding: 10px 18px; margin: 10px auto; box-shadow: 0 0 30px rgba(246,195,67,.7); }
.tausch-eingabe { max-width: 240px; text-align: center; font-size: 1.8rem; letter-spacing: .2em; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }

/* ---------- Rangliste & Abzeichen ---------- */
.rangliste { list-style: none; margin: 0; padding: 0; }
.rangliste li { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border-radius: 14px; padding: 8px 12px; margin-bottom: 8px; }
.rangliste li.eigene { background: rgba(246,195,67,.22); box-shadow: inset 0 0 0 2px var(--gold); }
.rangliste li:nth-child(1) .platz { background: #f6c343; color: var(--tinte); }
.rangliste li:nth-child(2) .platz { background: #d8d8d8; color: var(--tinte); }
.rangliste li:nth-child(3) .platz { background: #cd8a4b; color: #fff; }
.platz { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; }
.rang-wappen { width: 30px; height: 35px; flex: none; }
.rang-name { flex: 1; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.rang-name small { display: block; font-weight: 500; opacity: .7; }
.rang-werte { text-align: right; font-size: .82rem; line-height: 1.25; }
.rang-werte b { font-size: 1.3rem; color: var(--gold); }
.raid-info { background: rgba(123,44,191,.35); }
.abzeichen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.abzeichen { text-align: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 6px; opacity: .5; }
.abzeichen.hat { opacity: 1; background: rgba(255,255,255,.1); }
.abzeichen svg { width: 40px; height: 46px; }
.abzeichen b { display: block; font-size: .8rem; margin-top: 2px; }
.abzeichen small { display: block; font-size: .7rem; opacity: .75; line-height: 1.2; }

/* ---------- Kampf-Rückmeldung ---------- */
button { touch-action: manipulation; }
.option.loesung { border-color: var(--gruen); background: #dcfbe9; box-shadow: 0 0 0 3px rgba(43,182,115,.5); animation: hops .5s .3s; }
.sheet-inhalt.boss-modus .option.richtig,
.sheet-inhalt.boss-modus .option.loesung { background: #2bb673; border-color: #a7f3c9; color: #fff; }
.sheet-inhalt.boss-modus .option.falsch { background: #c1121f; border-color: #ff9aa2; color: #fff; }
.sheet-inhalt.boss-modus .option:disabled { opacity: 1; }
.sheet-inhalt.boss-modus .option:disabled:not(.richtig):not(.falsch):not(.loesung) { opacity: .45; }
.kampf-banner {
  position: fixed; left: 50%; top: 38%; z-index: 85;
  transform: translate(-50%, -50%);
  min-width: 240px; max-width: 88vw; text-align: center;
  padding: 16px 22px; border-radius: 22px; color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.85);
  animation: bannerRein .35s cubic-bezier(.2,1.6,.4,1);
  pointer-events: none;
}
.kampf-banner b { display: block; font-family: Georgia, serif; font-style: italic; font-size: 2.3rem; line-height: 1.1; }
.kampf-banner span { display: block; margin-top: 6px; font-weight: 800; font-size: 1.05rem; }
.kampf-banner.ok { background: linear-gradient(180deg, #4fdc96, #1f8f57); }
.kampf-banner.nein { background: linear-gradient(180deg, #ff6b75, #b3122a); }
@keyframes bannerRein { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }

/* ---------- Gezeichnete Figuren ---------- */
.avatar-figur { width: 130px; height: 150px; margin: -6px auto 2px; }
.avatar-figur svg, .mini-figur svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.mini-figur { width: 64px; height: 76px; margin: 0 auto 4px; }
.figur-svg.silhouette { filter: brightness(0) opacity(.45) !important; }

/* ---------- AR-Fangen ---------- */
.overlay.ar {
  display: block; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 25%, #5b8fe0, #2d1f66 60%, #1d1442);
  touch-action: none;
}
.overlay.ar video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.overlay.ar.mit-kamera video { opacity: 1; }
.ar-kopf {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  padding: calc(14px + env(safe-area-inset-top)) 60px 14px;
  background: linear-gradient(180deg, rgba(10,6,30,.75), transparent);
  text-align: center;
}
.ar-kopf h2 { font-size: 1.35rem; }
.ar-kopf p { margin: 4px auto 0; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.ar-figur { position: absolute; left: 0; top: 0; width: 130px; height: 150px; z-index: 2; will-change: transform; }
.ar-figur svg { width: 130px; height: 150px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.55)); animation: schweben 1.6s ease-in-out infinite; }
.ar-figur .fang-ring { inset: 18px 8px 8px; }
.ar-figur.gefangen svg { animation: einsaugenSvg .9s ease-in forwards; }
@keyframes einsaugenSvg { 40% { transform: scale(1.2); filter: brightness(2.5); } 100% { transform: scale(0); opacity: 0; } }
.ar-figur.gefangen .fang-ring { animation: none; transform: scale(.2); opacity: 0; transition: all .6s; }
.ar-rose {
  position: absolute; left: calc(50% - 42px); bottom: calc(90px + env(safe-area-inset-bottom));
  width: 84px; height: 84px; z-index: 5; touch-action: none; cursor: grab;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation: roseWippen 1.4s ease-in-out infinite;
}
.ar-rose svg { width: 100%; height: 100%; }
.ar-rose.fliegt { animation: none; transition: transform .48s cubic-bezier(.15,.7,.35,1); }
.ar-rose.daneben { transition: transform .6s ease-in, opacity .6s; opacity: 0; }
@keyframes roseWippen { 50% { transform: translateY(-6px); } }
.ar-pfeil {
  position: absolute; top: 46%; z-index: 4;
  background: rgba(230, 57, 70, .92); color: #fff; font-weight: 900;
  padding: 10px 14px; border-radius: 999px; animation: huepfen .8s ease-in-out infinite;
}
.ar-pfeil.links { left: 10px; }
.ar-pfeil.rechts { right: 10px; }
.ar-pfeil[hidden] { display: none; }
.ar-wertung {
  position: absolute; left: 0; right: 0; top: 52%; z-index: 6; text-align: center;
  font-family: Georgia, serif; font-size: 2.2rem; font-weight: 900; font-style: italic;
  color: var(--gold); text-shadow: 0 3px 0 #8a5d00, 0 0 20px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.4);
}
.ar-wertung.zeigen { animation: wertungRein .6s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes wertungRein { to { opacity: 1; transform: scale(1); } }
.ar-knopf {
  position: absolute; z-index: 6; border: 0; color: #fff; font-weight: 800;
  background: rgba(10,6,30,.6); border: 2px solid rgba(255,255,255,.3);
}
.ar-zu { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; border-radius: 50%; font-size: 1.2rem; }
.ar-kamera { left: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); border-radius: 999px; padding: 8px 14px; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}