:root{
  --nacht:#2b1d5c; --lila:#6c4bd8; --lila-hell:#efe9ff; --gold:#ffc83d; --gold-dunkel:#c98a00;
  --gruen:#21b26b; --gruen-hell:#e3f8ec; --rot:#ff6b6b; --rot-hell:#ffecec; --tinte:#241a3d; --grau:#6f6888;
  --papier:#fff8ea; --linie:#eadff8; --rund:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,#ffe9b8 0,transparent 45%),radial-gradient(circle at 100% 30%,#e4dbff 0,transparent 40%),var(--papier);color:var(--tinte);font:17px/1.45 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
h1,h2,h3,p{margin-top:0}
.kopf{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:10px max(16px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));background:var(--nacht);color:#fff;box-shadow:0 4px 18px #2b1d5c33}
.logo{background:none;border:0;color:#fff;font-weight:800;font-size:18px;padding:6px 0}
.denare{background:#ffffff1a;border-radius:99px;padding:6px 14px;font-weight:800;color:var(--gold);white-space:nowrap}
.denare.hupf{animation:hupf .5s}
main{max-width:640px;margin:0 auto;padding:20px 16px calc(40px + env(safe-area-inset-bottom))}
.laden{text-align:center;color:var(--grau);margin-top:60px}

/* Knöpfe */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:18px;padding:16px 20px;min-height:58px;font-weight:800;font-size:18px;color:#fff;background:var(--lila);box-shadow:0 5px 0 #4a2fb0;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #4a2fb0}
.btn.gold{background:var(--gold);color:#4a3000;box-shadow:0 5px 0 var(--gold-dunkel)}
.btn.gold:active{box-shadow:0 1px 0 var(--gold-dunkel)}
.btn.hell{background:#fff;color:var(--lila);box-shadow:0 5px 0 var(--linie);border:2px solid var(--linie)}
.btn.klein{min-height:46px;font-size:15px;padding:10px 14px}
.btn small{display:block;font-weight:600;font-size:13px;opacity:.85}
.btn .txt{text-align:left;line-height:1.2}
.stapel{display:grid;gap:14px}
.zurueck{background:none;border:0;color:var(--grau);font-weight:700;padding:4px 0 14px}

/* Start */
.buehne{position:relative;text-align:center;margin:4px 0 18px}
.buehne svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
.eule{transform-origin:50% 90%;animation:schweben 3s ease-in-out infinite}
.stern{animation:funkeln 2.2s ease-in-out infinite alternate}
.stern:nth-child(2){animation-delay:.7s}.stern:nth-child(3){animation-delay:1.3s}
.titel{font-size:clamp(30px,8vw,42px);line-height:1.05;letter-spacing:-.5px;margin:4px 0 8px}
.titel span{color:var(--lila)}
.untertitel{color:var(--grau);margin-bottom:20px}
.sprechblase{position:relative;background:#fff;border:2px solid var(--linie);border-radius:18px;padding:12px 16px;margin:0 0 18px;font-weight:600;text-align:left}
.sprechblase::before{content:"🦉";position:absolute;left:-6px;top:-16px;font-size:26px}
.sprechblase{padding-left:30px}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.kachel{background:#fff;border:2px solid var(--linie);border-radius:18px;padding:12px 8px;text-align:center}
.kachel b{display:block;font-size:24px}
.kachel span{font-size:12px;color:var(--grau);font-weight:600}

/* Spiel */
.leiste{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:10px;gap:8px}
.zaehler{display:flex;gap:8px}
.chip{border-radius:99px;padding:4px 11px;font-size:14px;background:#fff;border:2px solid var(--linie)}
.chip.ok{color:var(--gruen)}.chip.nein{color:#e04848}.chip.serie{color:#e8740c}
.weg{position:relative;height:46px;margin:6px 4px 18px}
.weg .bahn{position:absolute;left:0;right:0;top:26px;height:10px;border-radius:9px;background:repeating-linear-gradient(90deg,#d9cfb8 0 14px,#cfc3a6 14px 28px)}
.weg .fuell{position:absolute;left:0;top:26px;height:10px;border-radius:9px;background:linear-gradient(90deg,#ffd76a,var(--gold));transition:width .5s ease}
.weg .figur{position:absolute;top:0;font-size:28px;transform:translateX(-50%);transition:left .5s ease}
.weg .ziel{position:absolute;right:-4px;top:4px;font-size:26px}

.karte-wrap{perspective:1200px;margin-bottom:18px}
.karte{position:relative;min-height:300px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.karte.um{transform:rotateY(180deg)}
.seite{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:28px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 12px 30px #2b1d5c22}
.vorne{background:linear-gradient(160deg,#7b5cf0,#4b2fb8);color:#fff;border:4px solid #ffffff55}
.vorne .nr{position:absolute;top:14px;left:18px;font-size:13px;font-weight:700;opacity:.8}
.vorne .wort{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,11vw,58px);font-weight:700;letter-spacing:.5px;margin:6px 0 14px;overflow-wrap:anywhere;text-shadow:0 3px 0 #0002}
.vorne .auftrag{font-size:15px;opacity:.92;max-width:300px}
.hinten{background:#fff;border:4px solid var(--linie);transform:rotateY(180deg);overflow:auto}
.hinten .label{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--lila);margin-bottom:2px}
.hinten .formen{font-family:Georgia,serif;font-size:clamp(22px,6vw,28px);font-weight:700;margin-bottom:16px;overflow-wrap:anywhere}
.hinten .bedeutung{font-size:19px;font-weight:700;margin-bottom:10px}
.zusatz{display:inline-block;background:var(--lila-hell);color:var(--lila);border-radius:10px;padding:4px 10px;font-size:14px;font-weight:700;margin-bottom:10px}
.tipp{font-size:14px;color:var(--grau);max-width:420px}
.karte-wrap.wackeln{animation:wackeln .5s}
.karte-wrap.rein{animation:rein .45s ease-out}.space{height:12px}

.urteil{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn.ja{background:var(--gruen);box-shadow:0 5px 0 #138a50}
.btn.ja:active{box-shadow:0 1px 0 #138a50}
.btn.nein{background:var(--rot);box-shadow:0 5px 0 #d94b4b}
.btn.nein:active{box-shadow:0 1px 0 #d94b4b}
.frage{text-align:center;font-weight:800;margin:0 0 10px}
.pause{display:block;margin:20px auto 0;background:none;border:0;color:var(--grau);font-weight:700;font-size:14px}
.meldung{text-align:center;font-weight:800;min-height:26px;margin-bottom:6px}

/* Ergebnis */
.ring{position:relative;width:200px;height:200px;margin:10px auto 6px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .zahl{position:absolute;inset:0;display:grid;place-items:center;font-size:48px;font-weight:900}
.sterne{text-align:center;font-size:42px;letter-spacing:6px;margin-bottom:8px}
.sterne i{font-style:normal;display:inline-block;opacity:.18;filter:grayscale(1)}
.sterne i.an{opacity:1;filter:none;animation:plopp .5s backwards}
.sterne i.an:nth-child(2){animation-delay:.25s}.sterne i.an:nth-child(3){animation-delay:.5s}
.vergleich{text-align:center;font-weight:800;border-radius:16px;padding:12px;margin:8px 0 16px}
.vergleich.besser{background:var(--gruen-hell);color:#0f7a45}
.vergleich.gleich{background:var(--lila-hell);color:var(--lila)}
.vergleich.schlechter{background:#fff3df;color:#9a5a00}
.box{background:#fff;border:2px solid var(--linie);border-radius:var(--rund);padding:16px 18px;margin-bottom:16px}
.box h3{margin-bottom:8px}
.wortzeile{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--linie)}
.wortzeile:last-child{border:0}
.wortzeile b{font-family:Georgia,serif}
.wortzeile span{color:var(--grau);font-size:14px;text-align:right}
.mitte{text-align:center}

/* Verlauf */
.diagramm{display:flex;align-items:flex-end;gap:6px;height:180px;padding:8px 2px 0;overflow-x:auto;border-bottom:2px solid var(--linie)}
.saeule{flex:0 0 34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.saeule i{display:block;width:100%;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#9b82ff,var(--lila));animation:wachsen .6s ease-out backwards}
.saeule.kurz i{background:linear-gradient(180deg,#ffe08a,var(--gold))}
.saeule b{font-size:11px;margin-bottom:3px}
.achse{display:flex;gap:6px;overflow:hidden;padding:4px 2px 0;font-size:10px;color:var(--grau)}
.achse span{flex:0 0 34px;text-align:center}
.legende{font-size:13px;color:var(--grau);margin-top:8px}
.legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 10px;background:var(--lila)}
.legende i.k{background:var(--gold)}
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle td{padding:8px 4px;border-bottom:1px solid var(--linie)}
.tabelle td:last-child{text-align:right;font-weight:800}
.leer{color:var(--grau);text-align:center;padding:12px}
.suche{width:100%;font:inherit;font-size:16px;padding:13px 14px;border-radius:14px;border:2px solid var(--linie);margin-bottom:12px;background:#fff}
.vokabel{background:#fff;border:2px solid var(--linie);border-radius:18px;padding:14px 16px;margin-bottom:10px}
.vokabel .la{font-family:Georgia,serif;font-size:21px;font-weight:700}
.vokabel .fo{font-family:Georgia,serif;color:var(--lila);margin:2px 0 6px}

/* Effekte */
#effekte{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.konfetti{position:absolute;width:10px;height:14px;border-radius:3px;top:var(--y);left:var(--x);animation:konfetti 1.1s cubic-bezier(.2,.7,.4,1) forwards}
.plus{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:34px;font-weight:900;color:var(--gold-dunkel);text-shadow:0 2px 0 #fff;animation:plus 1s ease-out forwards}

@keyframes schweben{50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes funkeln{to{opacity:.2;transform:scale(.7)}}
@keyframes hupf{40%{transform:scale(1.3)}}
@keyframes wackeln{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes rein{from{opacity:0;transform:translateY(30px) scale(.95)}}
@keyframes plopp{from{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.3)}}
@keyframes wachsen{from{height:0!important}}
@keyframes konfetti{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@keyframes plus{from{opacity:0;transform:translate(-50%,-20%) scale(.6)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}to{opacity:0;transform:translate(-50%,-160%)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-width:600px){.karte{min-height:330px}}

/* Spracheingabe */
.rechts{display:flex;align-items:center;gap:8px}
.tonknopf{background:#ffffff1a;border:0;border-radius:99px;width:38px;height:38px;font-size:18px}
.btn.hoert{background:var(--rot);color:#fff;box-shadow:0 5px 0 #d94b4b;animation:puls 1.1s ease-in-out infinite}
.hoerbox{background:#fff;border:2px dashed var(--linie);border-radius:16px;padding:10px 14px;margin:0 0 14px;text-align:center;font-weight:600;color:var(--grau)}
.hoerbox.fehler{border-color:var(--rot);color:#b33}
.treffer{color:var(--gruen);background:var(--gruen-hell);border-radius:8px;padding:0 4px}
.fehlt{color:#e04848;background:var(--rot-hell);border-radius:8px;padding:0 4px;text-decoration:underline wavy #e04848 2px;text-underline-offset:5px}
.fehlt-leise{color:var(--grau)}
@keyframes puls{50%{transform:scale(1.03);box-shadow:0 5px 0 #d94b4b,0 0 0 10px #ff6b6b33}}