/* ===================== Grundlagen ===================== */
:root{
  --bg:#0b1020; --bg2:#141b36;
  --panel:rgba(255,255,255,.055);
  --rand:rgba(255,255,255,.13);
  --text:#eef2ff; --schwach:#a4aec9;
  --gold:#ffcc33; --blau:#3d7dff; --gruen:#4fd18b; --lila:#8a5cff;
  --radius:18px;
  --schatten:0 18px 50px rgba(0,0,0,.45);
  --tippziel:48px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 15% -10%, #26326e 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #4a1e5c 0%, transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  /* Touch/iPad */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior-y:none;
}
input,select,textarea{-webkit-user-select:text; user-select:text}

#sternenhimmel{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.38), transparent),
    radial-gradient(2px 2px at 45% 70%, rgba(255,255,255,.32), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 10% 85%, rgba(255,255,255,.28), transparent),
    radial-gradient(1.5px 1.5px at 60% 92%, rgba(255,255,255,.34), transparent);
  animation:funkeln 6s ease-in-out infinite alternate;
}
@keyframes funkeln{from{opacity:.35}to{opacity:.85}}

main{position:relative; z-index:1; padding:20px clamp(12px,3vw,36px) 80px; max-width:1500px; margin:0 auto}
h1,h2,h3{margin:0 0 .4em; letter-spacing:.3px}
h2{font-size:1.2rem}
h3{font-size:.82rem; color:var(--schwach); text-transform:uppercase; letter-spacing:1.2px; margin:22px 0 10px}

/* ===================== Kopfzeile ===================== */
.kopf{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px clamp(12px,3vw,36px);
  padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(10,14,30,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rand);
}
.marke{display:flex; align-items:center; gap:11px; margin-right:auto}
.marke h1{font-size:1.1rem; margin:0; background:linear-gradient(90deg,#fff,#ffd76a);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.untertitel{margin:1px 0 0; font-size:.7rem; color:var(--schwach)}
.logo-wesen{
  width:38px; height:38px; border-radius:12px; flex:none; display:block;
  background:linear-gradient(145deg,#ffd76a,#ff8b4d 55%,#c31432);
  box-shadow:0 0 18px rgba(255,180,70,.45); position:relative;
  animation:logo-wippen 3.4s ease-in-out infinite;
}
.logo-wesen::before,.logo-wesen::after{
  content:''; position:absolute; top:13px; width:7px; height:9px; border-radius:50%; background:#1a1024;
}
.logo-wesen::before{left:9px} .logo-wesen::after{right:9px}
@keyframes logo-wippen{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

.reiter{display:flex; gap:4px; background:rgba(255,255,255,.06); padding:4px;
  border-radius:999px; border:1px solid var(--rand); overflow-x:auto; max-width:100%}
.reiter-knopf{
  border:0; background:transparent; color:var(--schwach); cursor:pointer;
  padding:10px 17px; border-radius:999px; font:inherit; font-weight:700; font-size:.85rem;
  transition:.25s; white-space:nowrap; min-height:var(--tippziel);
}
.reiter-knopf.aktiv{background:linear-gradient(135deg,var(--blau),var(--lila)); color:#fff;
  box-shadow:0 6px 18px rgba(61,125,255,.4)}

.kopf-rechts{display:flex; align-items:center; gap:9px}
.sterne-anzeige{
  display:flex; align-items:center; gap:6px; background:rgba(255,204,51,.13);
  border:1px solid rgba(255,204,51,.35); padding:9px 14px; border-radius:999px;
  font-weight:900; color:var(--gold); font-size:.92rem;
}
.stern-icon{filter:drop-shadow(0 0 6px rgba(255,204,51,.6))}
.icon-knopf{
  border:1px solid var(--rand); background:rgba(255,255,255,.06); color:var(--text);
  width:var(--tippziel); height:var(--tippziel); border-radius:13px; cursor:pointer;
  font-size:1.05rem; transition:.18s; flex:none;
}
.icon-knopf:active{transform:scale(.92); background:rgba(255,255,255,.2)}

/* ===================== Ansichten ===================== */
.ansicht{display:none; animation:rein .4s ease}
.ansicht.aktiv{display:block}
@keyframes rein{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.panel{
  background:var(--panel); border:1px solid var(--rand); border-radius:var(--radius);
  padding:20px; backdrop-filter:blur(10px); box-shadow:var(--schatten);
}
.hinweis{color:var(--schwach); font-size:.88rem; margin:0 0 16px; line-height:1.5}

/* ===================== Season-Banner ===================== */
.season-banner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(138,92,255,.28), rgba(61,125,255,.16) 55%, rgba(255,204,51,.16));
  border:1px solid var(--rand); border-radius:var(--radius);
  padding:18px 22px; margin-bottom:20px; position:relative; overflow:hidden;
}
.season-banner::after{
  content:''; position:absolute; inset:-40%;
  background:linear-gradient(115deg,transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%);
  animation:glanz-lauf 5s linear infinite; pointer-events:none;
}
@keyframes glanz-lauf{from{transform:translateX(-55%)}to{transform:translateX(55%)}}
.season-text{flex:1; min-width:220px; position:relative}
.season-marke{font-size:.7rem; font-weight:900; letter-spacing:2.5px; color:var(--gold)}
.season-banner h2{font-size:1.6rem; margin:2px 0 4px}
#season-info{margin:0; font-size:.85rem; color:var(--schwach)}
.season-rechts{position:relative; display:grid; gap:6px; justify-items:end}
.season-countdown{margin:0; font-size:.72rem; color:var(--schwach)}
.season-wahl{
  background:rgba(10,14,30,.7); border:1px solid var(--rand); color:var(--text);
  padding:11px 14px; border-radius:12px; font:inherit; font-size:.85rem; min-height:var(--tippziel);
}

/* ===================== Lern-Raster ===================== */
.lern-raster{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.rechte-spalte{display:grid; gap:18px}
.statistik-panel{grid-column:1 / -1}
@media(max-width:900px){.lern-raster{grid-template-columns:1fr}}
.hinweis.klein{font-size:.8rem; margin-bottom:10px}
.season-spruch{margin:0 0 4px; font-size:.88rem; color:#e6ecff; font-style:italic}

/* ---- Niveau ---- */
.niveau-liste{display:grid; gap:9px}
.niveau-zeile{display:flex; align-items:center; gap:10px; font-size:.84rem}
.nv-icon{font-size:1rem; width:22px; text-align:center}
.nv-name{min-width:68px; font-weight:700}
.nv-bar{flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.11); overflow:hidden}
.nv-bar i{display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.9,.3,1);
  background:linear-gradient(90deg,#4fd18b,#5aa9ff 55%,#ffcc33)}
.nv-stufe{min-width:72px; text-align:right; font-weight:800; color:var(--gold); font-size:.78rem}

/* ---- Season-Vorschau ---- */
.vorschau-panel{position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(138,92,255,.2), rgba(255,204,51,.1))}
.vorschau-panel::after{content:''; position:absolute; inset:-40%;
  background:linear-gradient(115deg,transparent 42%, rgba(255,255,255,.1) 50%, transparent 58%);
  animation:glanz-lauf 6s linear infinite; pointer-events:none}
.vorschau-inhalt{display:flex; gap:16px; align-items:center; flex-wrap:wrap; position:relative}
.vorschau-text{flex:1; min-width:190px}
.vorschau-marke{font-size:.65rem; font-weight:900; letter-spacing:2px; color:var(--gold)}
.vorschau-text h3{margin:3px 0 6px; font-size:1.2rem; color:var(--text);
  text-transform:none; letter-spacing:0}
.vorschau-text p{margin:0 0 5px; font-size:.82rem; color:var(--schwach); line-height:1.5}
.vorschau-packs strong{color:var(--text)}
.vorschau-countdown strong{color:var(--gold); font-size:1rem}
.vorschau-wesen{display:flex; gap:8px}
.vorschau-wesen-feld{width:64px; text-align:center; opacity:.85}
.vorschau-wesen-feld svg{width:100%; display:block; filter:blur(1px)}
.vorschau-wesen-feld span{font-size:.62rem; color:var(--schwach); font-weight:800}

/* Schritte 0/4 */
.schritte{display:flex; gap:9px; margin:6px 0 8px}
.schritte i{
  flex:1; height:14px; border-radius:99px; background:rgba(255,255,255,.1);
  border:1px solid var(--rand); transition:.35s;
}
.schritte i.voll{
  background:linear-gradient(90deg,var(--gruen),var(--gold));
  box-shadow:0 0 14px rgba(79,209,139,.55); border-color:transparent;
  animation:schritt-pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes schritt-pop{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.schritt-text{font-size:.82rem; color:var(--schwach); margin:0 0 16px}
.schritt-text span{color:var(--gold); font-weight:900}

/* ===================== Knöpfe ===================== */
.gross-knopf{
  width:100%; border:0; cursor:pointer; font:inherit; color:#fff;
  padding:16px 22px; border-radius:16px; display:grid; gap:2px; min-height:var(--tippziel);
  background:linear-gradient(135deg,#ff4d4d,#c31432 55%, #7b1fa2 100%);
  box-shadow:0 14px 34px rgba(195,20,50,.4);
  transition:transform .16s, box-shadow .16s; position:relative; overflow:hidden;
}
.gross-knopf span{font-size:1.05rem; font-weight:900}
.gross-knopf small{font-size:.73rem; opacity:.85}
.gross-knopf:active{transform:scale(.97)}
.gross-knopf::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  animation:knopf-glanz 3s linear infinite; pointer-events:none;
}
@keyframes knopf-glanz{from{left:-60%}to{left:130%}}
.gross-knopf.klein{width:auto; padding:13px 24px; border-radius:13px}
.gross-knopf.klein span{font-size:.92rem}
.gross-knopf.blau{background:linear-gradient(135deg,#3d7dff,#8a5cff); box-shadow:0 14px 34px rgba(61,125,255,.4)}

.text-knopf{
  border:1px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  padding:13px 20px; border-radius:13px; cursor:pointer; font:inherit; font-weight:700;
  font-size:.86rem; transition:.18s; min-height:var(--tippziel);
}
.text-knopf:active{transform:scale(.96); background:rgba(255,255,255,.18)}
.text-knopf.gefahr{color:#ff9a9a; border-color:rgba(255,120,120,.3)}
.knopf-reihe{display:flex; gap:10px; flex-wrap:wrap}

/* ===================== Segmente & Schalter ===================== */
.wahl-zeile{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.wahl-label{font-size:.8rem; color:var(--schwach); font-weight:700; min-width:52px}
.segment{display:flex; gap:4px; background:rgba(255,255,255,.06); padding:4px;
  border-radius:13px; border:1px solid var(--rand); flex-wrap:wrap}
.segment button{
  border:0; background:transparent; color:var(--schwach); cursor:pointer;
  padding:11px 16px; border-radius:10px; font:inherit; font-size:.82rem; font-weight:700;
  transition:.18s; min-height:44px;
}
.segment button.aktiv{background:rgba(255,255,255,.2); color:#fff}
.segment.klein button{padding:10px 13px; font-size:.78rem}

.schalter{display:flex; align-items:center; gap:11px; margin-top:16px; cursor:pointer;
  font-size:.86rem; color:var(--schwach); min-height:var(--tippziel)}
.schalter input{width:22px; height:22px; accent-color:var(--gruen); cursor:pointer}

/* ===================== Pack-Regal ===================== */
.pack-regal{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.pack-regal{grid-template-columns:1fr}}
.regal-pack{
  border:1px solid var(--rand); border-radius:16px; padding:14px; text-align:center;
  background:rgba(255,255,255,.05); display:grid; gap:10px; justify-items:center;
  transition:.2s; position:relative; overflow:hidden;
}
.regal-pack.hat{border-color:rgba(255,204,51,.45); background:rgba(255,204,51,.09)}
.regal-pack .pack-bild{width:96px; height:136px; border-radius:12px; position:relative; overflow:hidden;
  border:2px solid rgba(255,255,255,.35); display:grid; place-items:center; gap:2px;
  box-shadow:0 12px 28px rgba(0,0,0,.45)}
.regal-pack .pack-bild span{position:relative; font-weight:900; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.regal-pack .pack-name{font-weight:900; font-size:.95rem}
.regal-pack .pack-menge{font-size:.78rem; color:var(--schwach)}
.regal-pack .pack-menge b{color:var(--gold); font-size:1.1rem}
.regal-pack .pack-elemente{font-size:.72rem; color:var(--schwach); line-height:1.4}
.regal-pack button{width:100%}
.regal-pack button:disabled{opacity:.4; cursor:default; box-shadow:none}
.regal-pack button:disabled::after{display:none}

/* ===================== Statistik ===================== */
.statistik-raster{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
@media(max-width:820px){.statistik-raster{grid-template-columns:repeat(3,1fr)}}
.stat{background:rgba(255,255,255,.05); border:1px solid var(--rand);
  border-radius:14px; padding:13px 8px; text-align:center}
.stat b{display:block; font-size:1.35rem; color:var(--gold); font-weight:900}
.stat span{font-size:.68rem; color:var(--schwach)}

.seltenheits-liste{display:grid; gap:8px}
.seltenheits-zeile{display:flex; align-items:center; gap:10px; font-size:.85rem}
.seltenheits-zeile .sym{font-size:1rem; width:20px; text-align:center}
.seltenheits-zeile .name{flex:1}
.seltenheits-zeile .bar{height:6px; flex:1; max-width:150px; border-radius:99px;
  background:rgba(255,255,255,.1); overflow:hidden}
.seltenheits-zeile .bar i{display:block; height:100%; border-radius:99px; transition:width .5s}
.seltenheits-zeile .wert{font-weight:800; color:var(--schwach); min-width:52px; text-align:right}

.besondere-liste{display:flex; gap:9px; flex-wrap:wrap; min-height:40px}
.besondere-chip{
  display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.07);
  border:1px solid var(--rand); border-radius:11px; padding:7px 12px; font-size:.8rem; cursor:pointer;
}
.besondere-chip.aa{border-color:rgba(90,169,255,.5); background:rgba(90,169,255,.12)}
.besondere-chip.fa{border-color:rgba(255,204,51,.55); background:rgba(255,204,51,.12)}
.leer-text{color:var(--schwach); font-size:.84rem}

/* ===================== Album ===================== */
.album-kopf{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.album-kopf h2{margin:0}
.album-zahl{color:var(--gold); font-size:.92rem; margin-left:6px}
.album-werkzeuge{display:flex; gap:9px; margin-left:auto; flex-wrap:wrap}
#album-suche{
  background:rgba(255,255,255,.07); border:1px solid var(--rand); color:var(--text);
  padding:11px 14px; border-radius:12px; font:inherit; font-size:.85rem; min-width:180px;
  min-height:var(--tippziel);
}
#album-suche::placeholder{color:var(--schwach)}

.balken-gross{height:10px; background:rgba(255,255,255,.1); border-radius:99px;
  overflow:hidden; margin-bottom:18px}
.balken-gross i{display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--blau),var(--gruen) 50%, var(--gold));
  box-shadow:0 0 18px rgba(255,204,51,.45); transition:width .7s cubic-bezier(.2,.9,.3,1)}

.album-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(102px,1fr)); gap:10px}
.album-feld{
  aspect-ratio:.8; border-radius:14px; border:1px solid var(--rand);
  background:rgba(255,255,255,.045); display:grid; place-items:center; position:relative;
  cursor:pointer; transition:transform .18s, box-shadow .18s; padding:4px; overflow:hidden;
}
.album-feld:active{transform:scale(.94)}
.album-feld svg{width:100%; height:74%; display:block}
.album-feld .nr{position:absolute; top:4px; left:7px; font-size:.6rem; color:var(--schwach); font-weight:800}
.album-feld .nm{font-size:.66rem; text-align:center; line-height:1.1; color:var(--text); font-weight:700;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.album-feld.fehlend .nm{color:var(--schwach); opacity:.5}
.album-feld.fehlend svg{opacity:.55}
.album-feld .punkt{position:absolute; top:4px; right:7px; font-size:.72rem}
.album-feld .anzahl{position:absolute; bottom:3px; right:6px; font-size:.58rem; font-weight:900;
  color:var(--gold); background:rgba(0,0,0,.45); padding:1px 5px; border-radius:6px}
.album-feld .var-marke{position:absolute; bottom:3px; left:5px; display:flex; gap:3px}
.album-feld .var-marke i{font-style:normal; font-size:.5rem; font-weight:900; padding:1px 4px;
  border-radius:4px; background:var(--blau); color:#fff}
.album-feld .var-marke i.fa{background:var(--gold); color:#3a2a00}
.album-feld.neu::before{content:'NEU'; position:absolute; top:4px; right:5px; z-index:3;
  background:var(--gruen); color:#052; font-size:.52rem; font-weight:900;
  padding:2px 5px; border-radius:5px}
.album-feld.s-episch{border-color:rgba(199,125,255,.5); box-shadow:0 0 16px rgba(199,125,255,.22)}
.album-feld.s-legendaer{border-color:rgba(255,204,51,.6); box-shadow:0 0 20px rgba(255,204,51,.3)}
.album-feld.fehlend.s-episch,.album-feld.fehlend.s-legendaer{border-color:var(--rand); box-shadow:none}

/* ===================== Shop ===================== */
.shop-kopf{margin-bottom:20px}
.sterne-gross{display:inline-flex; align-items:center; gap:9px; font-size:1.15rem; font-weight:900;
  color:var(--gold); background:rgba(255,204,51,.12); border:1px solid rgba(255,204,51,.35);
  padding:11px 20px; border-radius:999px}
.shop-inhalt{display:grid; gap:26px}
.shop-gruppe h3{margin-top:0}
.shop-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:13px}
.shop-karte{
  border:1px solid var(--rand); border-radius:16px; padding:16px; background:rgba(255,255,255,.05);
  display:grid; gap:9px; align-content:start; transition:.2s; position:relative; overflow:hidden;
}
.shop-karte.aktiv{border-color:var(--gruen); background:rgba(79,209,139,.1)}
.shop-karte.gekauft:not(.aktiv){border-color:rgba(90,169,255,.4)}
.shop-vorschau{height:74px; border-radius:11px; overflow:hidden; position:relative; border:1px solid var(--rand)}
.shop-karte b{font-size:.95rem}
.shop-karte p{margin:0; font-size:.77rem; color:var(--schwach); line-height:1.45}
.shop-preis{display:flex; align-items:center; gap:6px; font-weight:900; color:var(--gold); font-size:.88rem}
.shop-karte button{width:100%}
.shop-karte button:disabled{opacity:.45; cursor:default}
.shop-marke{position:absolute; top:10px; right:10px; font-size:.6rem; font-weight:900;
  padding:3px 8px; border-radius:6px; background:var(--gruen); color:#052}

/* ===================== Overlays ===================== */
.overlay{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px;
  background:rgba(6,9,20,.85); backdrop-filter:blur(8px); animation:rein .28s ease;
  overflow-y:auto; overscroll-behavior:contain;
}
.overlay.dunkel{background:radial-gradient(circle at 50% 45%, rgba(40,20,80,.88), rgba(4,6,15,.97))}

/* ---- Aufgabe ---- */
.aufgabe-hintergrund{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.aufgabe-box{
  width:min(560px,100%); position:relative;
  background:linear-gradient(160deg,rgba(26,34,71,.96),rgba(19,25,54,.96));
  border:1px solid var(--rand); border-radius:22px; padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:box-rein .4s cubic-bezier(.2,1.2,.4,1);
  max-height:calc(100dvh - 36px); overflow-y:auto;
}
@keyframes box-rein{from{transform:scale(.88) translateY(18px); opacity:0}to{transform:none; opacity:1}}
.aufgabe-kopf{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.chip{background:rgba(255,255,255,.09); padding:8px 14px; border-radius:99px;
  font-size:.76rem; color:var(--schwach); font-weight:800}
.chip.blau{background:linear-gradient(135deg,var(--blau),var(--lila)); color:#fff}
#vorlesen-knopf{margin-left:auto}
#vorlesen-knopf.spricht{background:var(--gruen); color:#052; animation:neu-puls 1s infinite}

.mini-schritte{display:flex; gap:6px; margin-bottom:14px}
.mini-schritte i{flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,.12); transition:.3s}
.mini-schritte i.voll{background:linear-gradient(90deg,var(--gruen),var(--gold))}

.aufgabe-anweisung{color:var(--schwach); font-size:.88rem; margin:0 0 8px}

/* Lesetext (Anton-Stil) */
.aufgabe-lesetext{
  background:rgba(255,255,255,.94); color:#1c2233; border-radius:14px;
  padding:16px 18px; margin:0 0 14px; font-size:1.06rem; line-height:1.65;
  font-weight:600; letter-spacing:.2px; border-left:6px solid var(--blau);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

.aufgabe-frage{
  font-size:clamp(1.5rem,5vw,2.3rem); font-weight:900; text-align:center; padding:20px 12px;
  background:rgba(255,255,255,.06); border-radius:16px; margin-bottom:14px; line-height:1.35;
  border:1px solid var(--rand);
}
.aufgabe-frage.englisch{color:var(--gold); letter-spacing:.5px}
.aufgabe-frage.bilderzeile{font-size:clamp(1.6rem,6vw,2.6rem); letter-spacing:6px; line-height:1.5}

.aufgabe-hilfe{
  display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap;
  background:rgba(255,204,51,.13); border:1px solid rgba(255,204,51,.4);
  border-radius:14px; padding:12px 16px; margin-bottom:14px;
  animation:box-rein .3s cubic-bezier(.2,1.2,.4,1);
}
.hilfe-bild{font-size:2.6rem; line-height:1}
.hilfe-text{font-size:.86rem; color:#ffe9a8; font-weight:700; text-align:center}

.antworten{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.antworten.lang{grid-template-columns:1fr}
.antworten.lang .antwort{font-size:.95rem; padding:16px 14px; text-align:left; line-height:1.4}
@media(max-width:440px){.antworten{grid-template-columns:1fr}}

/* Bild-Antworten */
.antworten.bild-antworten{grid-template-columns:1fr 1fr; gap:12px}
.bild-antwort{
  border:2px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  border-radius:16px; cursor:pointer; font:inherit; transition:.15s;
  display:grid; gap:6px; place-items:center; padding:16px 10px; min-height:112px;
}
.bild-antwort .ba-bild{font-size:2.8rem; line-height:1.1}
.bild-antwort .ba-text{font-size:.86rem; font-weight:800}
.bild-antwort:active:not(:disabled){transform:scale(.95)}
.bild-antwort:disabled{cursor:default}
.bild-antwort.richtig{background:linear-gradient(135deg,#2fbf71,#14894c); border-color:#4fd18b;
  color:#fff; animation:puls-gruen .5s ease}
.bild-antwort.falsch{background:linear-gradient(135deg,#c0392b,#7b1d14); border-color:#ff7a6a;
  animation:wackeln .4s ease}
.antwort{
  border:2px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  padding:20px 12px; border-radius:15px; cursor:pointer; font:inherit; font-size:1.1rem;
  font-weight:800; transition:.15s; min-height:62px;
}
.antwort:active:not(:disabled){transform:scale(.96)}
.antwort:disabled{cursor:default}
.antwort.richtig{background:linear-gradient(135deg,#2fbf71,#14894c); border-color:#4fd18b;
  color:#fff; animation:puls-gruen .5s ease}
.antwort.falsch{background:linear-gradient(135deg,#c0392b,#7b1d14); border-color:#ff7a6a;
  animation:wackeln .4s ease}
@keyframes puls-gruen{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.aufgabe-feedback{text-align:center; font-weight:800; min-height:22px; margin:13px 0 0; font-size:.92rem}

/* Aufgaben-Hintergründe aus dem Shop */
.hg-teilchen{position:absolute; border-radius:50%; animation:hg-steigen linear infinite}
@keyframes hg-steigen{from{transform:translateY(0) scale(1); opacity:.75}
  to{transform:translateY(-110vh) scale(.4); opacity:0}}
.hg-sterne{background:radial-gradient(circle at 30% 20%, rgba(90,120,255,.25), transparent 60%)}
.hg-vulkan{background:linear-gradient(0deg, rgba(200,40,20,.4), transparent 65%)}
.hg-tiefsee{background:linear-gradient(0deg, rgba(10,60,120,.55), transparent 70%)}
.hg-dschungel{background:linear-gradient(0deg, rgba(20,90,40,.45), transparent 68%)}
.hg-neon{background:linear-gradient(120deg, rgba(255,0,140,.22), rgba(0,220,255,.22))}

/* ---- Pack öffnen ---- */
.oeffnen-buehne{width:min(1150px,100%); display:grid; place-items:center; padding:10px 0}
.oeffnen-hinweis{color:var(--schwach); font-size:.9rem; margin-bottom:18px; text-align:center;
  animation:atmen 2s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.55}50%{opacity:1}}
.pack-schritt{display:grid; place-items:center; perspective:900px}

.pack-objekt{
  width:214px; height:302px; border-radius:16px; position:relative; overflow:hidden;
  border:2px solid rgba(255,255,255,.35); cursor:pointer;
  box-shadow:0 24px 55px rgba(0,0,0,.55), inset 0 0 60px rgba(255,255,255,.1);
  display:grid; place-items:center; animation:pack-schweben 3.6s ease-in-out infinite;
}
@keyframes pack-schweben{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-13px) rotate(2deg)}
}
.pack-glanz{position:absolute; inset:-40%;
  background:linear-gradient(115deg,transparent 38%, rgba(255,255,255,.7) 48%, transparent 58%);
  animation:glanz-lauf 3s linear infinite}
.pack-inhalt{position:relative; display:grid; justify-items:center; gap:8px;
  text-shadow:0 3px 12px rgba(0,0,0,.6); padding:10px}
.pack-logo{width:76px; height:76px; border-radius:22px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.5); font-size:2.1rem}
.pack-titel{font-size:1.5rem; font-weight:900; letter-spacing:2px; color:#fff; text-align:center}
.pack-season{font-size:.68rem; letter-spacing:2.5px; color:rgba(255,255,255,.9); font-weight:800}
.pack-sub{font-size:.8rem; letter-spacing:1.5px; color:#fff; font-weight:900;
  background:rgba(0,0,0,.35); padding:4px 12px; border-radius:99px}

.pack-objekt.reisst{animation:pack-zittern .45s ease-in-out 2}
@keyframes pack-zittern{
  0%,100%{transform:translate(0) rotate(0)} 20%{transform:translate(-9px,4px) rotate(-4deg)}
  40%{transform:translate(9px,-5px) rotate(4deg)} 60%{transform:translate(-7px,-3px) rotate(-3deg)}
  80%{transform:translate(7px,4px) rotate(3deg)}
}
.pack-objekt.weg-standard{animation:pack-weg .5s ease forwards}
@keyframes pack-weg{to{transform:scale(1.7); opacity:0; filter:blur(8px)}}
.pack-objekt.weg-explosion{animation:pack-knall .55s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes pack-knall{40%{transform:scale(1.3) rotate(6deg)}to{transform:scale(3.2); opacity:0; filter:brightness(3) blur(14px)}}
.pack-objekt.weg-wirbel{animation:pack-wirbel .8s cubic-bezier(.5,0,.7,1) forwards}
@keyframes pack-wirbel{to{transform:rotate(920deg) scale(.02); opacity:0}}
.pack-objekt.weg-regenbogen{animation:pack-regen .7s ease forwards}
@keyframes pack-regen{
  30%{filter:hue-rotate(180deg) brightness(1.8)}
  60%{filter:hue-rotate(360deg) brightness(2.6)}
  to{transform:scale(2.2); opacity:0; filter:hue-rotate(520deg) brightness(4) blur(12px)}
}

.karten-schritt{display:grid; justify-items:center; width:100%}
.karten-stapel{display:flex; gap:13px; justify-content:center; flex-wrap:wrap;
  perspective:1400px; min-height:320px}
.oeffnen-leiste{display:flex; gap:12px; align-items:center; justify-content:center;
  margin-top:22px; flex-wrap:wrap}

/* ===================== KARTE ===================== */
.karte{
  width:194px; height:272px; position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,.9,.3,1.1); cursor:pointer;
  animation:karte-flieg .55s cubic-bezier(.2,1.2,.4,1) backwards;
}
@keyframes karte-flieg{
  from{transform:translateY(150px) scale(.5) rotate(-16deg); opacity:0}
  to{transform:none; opacity:1}
}
.karte.umgedreht{transform:rotateY(180deg)}
.karte-seite{position:absolute; inset:0; border-radius:14px; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.55)}

/* Rückseiten */
.karte-rueck{border:5px solid #f2f2f2; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg,#2b3a8f,#14194a 60%,#0a0d2b)}
.karte-rueck.r-gold{border-color:#f7e3a8;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 7px, transparent 7px 14px),
    linear-gradient(150deg,#c9962c,#ffdf85 45%,#8a6516)}
.karte-rueck.r-neon{border-color:#ff6ad5;
  background:repeating-linear-gradient(-35deg, rgba(255,255,255,.08) 0 9px, transparent 9px 18px),
    linear-gradient(160deg,#2b0f4a,#ff2e9a 55%,#00d9ff)}
.karte-rueck.r-kosmos{border-color:#b8c6ff;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 12%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.3), transparent 10%),
    radial-gradient(circle at 50% 80%, rgba(160,120,255,.5), transparent 45%),
    linear-gradient(160deg,#160c3d,#3b1d7a 60%,#080520)}
.rueck-zeichen{width:86px; height:86px; border-radius:26px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:4px solid rgba(255,255,255,.75); font-size:2.4rem;
  box-shadow:0 0 28px rgba(255,255,255,.3)}

/* Vorderseite */
.karte-vor{
  transform:rotateY(180deg); border:5px solid #f4d78a; padding:7px;
  background:linear-gradient(165deg, var(--t1,#888), var(--t2,#444));
  display:flex; flex-direction:column;
}
.karte.d-silber .karte-vor{border-color:#dde3ec}
.karte.d-holz .karte-vor{border-color:#9c6b3f}
.karte.d-prisma .karte-vor{border-color:#ffb3f0;
  border-image:linear-gradient(60deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff,#c77dff) 1}

.karte-kopf{display:flex; align-items:baseline; gap:5px; color:#141414; padding:0 3px 3px}
.karte-name{font-weight:900; font-size:.92rem; flex:1; line-height:1.05;
  text-shadow:0 1px 0 rgba(255,255,255,.35); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.karte-kp{font-weight:900; font-size:.88rem; color:#a3121b; white-space:nowrap}
.karte-kp small{font-size:.58rem}
.karte-stufe{font-size:.55rem; font-weight:900; background:rgba(0,0,0,.22); color:#fff;
  padding:2px 6px; border-radius:99px}

.karte-bild{
  height:44%; border:3px solid #d9b45c; border-radius:6px; margin:0 1px;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.9), rgba(255,255,255,.42));
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.karte.d-silber .karte-bild{border-color:#c8d0dc}
.karte.d-holz .karte-bild{border-color:#8a5f38}
.karte-bild svg{width:100%; height:100%; display:block}

.karte-text{flex:1; margin:5px 1px 0; display:flex; flex-direction:column; gap:3px;
  background:rgba(255,255,255,.72); border-radius:5px; padding:5px 6px; color:#1a1a1a}
.angriff{display:flex; align-items:center; gap:5px; font-size:.62rem}
.angriff .a-name{font-weight:900; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.angriff .a-kosten{font-size:.6rem}
.angriff .a-schaden{font-weight:900; color:#a3121b}
.karte-wissen{font-size:.52rem; font-style:italic; color:#3d3d3d; line-height:1.25;
  border-top:1px solid rgba(0,0,0,.14); padding-top:3px; margin-top:auto}
.karte-masse{font-size:.5rem; color:#555; display:flex; gap:7px}

.karte-fuss{display:flex; align-items:center; gap:5px; padding:4px 4px 1px; color:#141414}
.typ-chip{background:rgba(255,255,255,.8); border-radius:99px; padding:2px 7px;
  font-size:.58rem; font-weight:900; display:flex; align-items:center; gap:3px}
.karte-nr{margin-left:auto; font-size:.55rem; font-weight:800; opacity:.75}
.seltenheit-sym{font-size:.82rem; font-weight:900}
.art-marke{font-size:.52rem; font-weight:900; padding:2px 6px; border-radius:5px;
  background:#1b2340; color:#fff}

/* --- Alt-Art: großes Bild, Szenen-Hintergrund --- */
.karte.art-altart .karte-bild{height:64%; border-width:2px}
.karte.art-altart .karte-text{background:rgba(255,255,255,.8)}
.karte.art-altart .karte-wissen{display:none}
.karte.art-altart .karte-bild::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 115%, rgba(255,255,255,.85), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(255,255,255,.5) 0 6deg, transparent 6deg 12deg);
}
.karte.art-altart .karte-bild svg{position:relative}

/* --- Full-Art: Bild über die ganze Karte --- */
.karte.art-fullart .karte-vor{padding:0}
.karte.art-fullart .karte-bild{
  position:absolute; inset:0; height:auto; border:0; border-radius:9px; margin:0;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.5), transparent 62%);
}
.karte.art-fullart .karte-bild svg{width:118%; height:118%; margin:-9%}
.karte.art-fullart .karte-kopf{position:relative; z-index:2; padding:8px 9px 0; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.85)}
.karte.art-fullart .karte-kp{color:#ffd76a}
.karte.art-fullart .karte-text{position:relative; z-index:2; flex:0 0 auto; margin:auto 7px 0;
  background:rgba(12,14,28,.78); color:#fff; backdrop-filter:blur(3px)}
.karte.art-fullart .karte-wissen{margin-top:3px}
.karte.art-fullart .karte-wissen{color:#d7ddf0; border-top-color:rgba(255,255,255,.2)}
.karte.art-fullart .karte-masse{color:#b9c2da}
.karte.art-fullart .angriff .a-schaden{color:#ff9a9a}
.karte.art-fullart .karte-fuss{position:relative; z-index:2; padding:4px 9px 7px; color:#fff}
.karte.art-fullart .typ-chip{background:rgba(0,0,0,.55); color:#fff}
.karte.art-fullart .karte-nr{color:#e2e7f5}

/* --- Glitzer nach Seltenheit --- */
.glitzer{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:9px}
.glitzer::before{
  content:''; position:absolute; inset:-50%;
  background:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.55) 40%,
    rgba(255,120,220,.4) 47%, rgba(120,220,255,.4) 54%, rgba(255,255,160,.45) 62%, transparent 76%);
  background-size:230% 230%; mix-blend-mode:color-dodge; opacity:0;
}
.karte[data-glitzer="1"] .glitzer::before{opacity:.55}
.karte[data-glitzer="2"] .glitzer::before{opacity:.8}
.karte[data-glitzer="3"] .glitzer::before{opacity:1}
.funke{position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 7px 2px rgba(255,255,255,.9); animation:funke-blitz 2.4s ease-in-out infinite}
@keyframes funke-blitz{
  0%,100%{transform:scale(0); opacity:0}
  45%{transform:scale(1.25); opacity:1}
  70%{transform:scale(0); opacity:0}
}
.karte[data-glitzer="2"] .karte-vor,.karte[data-glitzer="3"] .karte-vor{
  animation:karte-leuchten 2.4s ease-in-out infinite}
@keyframes karte-leuchten{
  0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 20px rgba(255,215,120,.3)}
  50%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 46px rgba(255,215,120,.75)}
}
.karte[data-seltenheit="legendaer"] .karte-vor{border-color:#ffd34d}
.karte[data-seltenheit="episch"] .karte-vor{border-color:#d8a8ff}

.neu-abzeichen{
  position:absolute; top:30px; left:8px; z-index:6;
  background:linear-gradient(135deg,#4fd18b,#0f9b5c); color:#fff; font-size:.66rem;
  font-weight:900; padding:4px 9px; border-radius:8px; transform:rotate(9deg);
  box-shadow:0 6px 16px rgba(0,0,0,.45); animation:neu-puls 1.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes neu-puls{0%,100%{transform:rotate(9deg) scale(1)}50%{transform:rotate(9deg) scale(1.12)}}
.karte.art-fullart .neu-abzeichen{top:8px; left:auto; right:8px}

.strahlen{position:absolute; inset:-60px; border-radius:50%; pointer-events:none; opacity:0; z-index:-1;
  background:conic-gradient(from 0deg, transparent 0 8deg, rgba(255,225,140,.55) 8deg 16deg, transparent 16deg 24deg)}
.karte.enthuellt .strahlen{animation:strahlen-burst 1s ease-out}
@keyframes strahlen-burst{
  0%{opacity:0; transform:scale(.4) rotate(0)} 30%{opacity:.95}
  100%{opacity:0; transform:scale(1.6) rotate(120deg)}
}
@keyframes buehne-beben{
  0%,100%{transform:translate(0)} 20%{transform:translate(-8px,5px)}
  40%{transform:translate(8px,-6px)} 60%{transform:translate(-6px,-4px)} 80%{transform:translate(6px,5px)}
}
.beben{animation:buehne-beben .45s ease}

/* ---- Belohnung nach 4 Aufgaben ---- */
.belohnung{text-align:center; display:grid; justify-items:center; gap:14px; width:min(620px,100%)}
.belohnung h2{font-size:1.6rem; margin:0;
  background:linear-gradient(90deg,#fff,var(--gold)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.belohnung-pack{display:grid; place-items:center}
.belohnung-pack .pack-objekt{width:160px; height:226px; cursor:default}
.belohnung-pack .pack-titel{font-size:1.1rem}
.belohnung-pack .pack-logo{width:56px; height:56px; font-size:1.5rem; border-radius:16px}
.belohnung-text{margin:0; color:var(--schwach); font-size:.92rem; line-height:1.6}
.belohnung-text strong{color:var(--gold)}
.belohnung-frage{margin:2px 0 0; font-weight:900; font-size:1rem}

/* ---- Zusammenfassung ---- */
.zusammenfassung{text-align:center; width:min(920px,100%)}
.zusammenfassung h2{font-size:1.55rem; margin-bottom:8px;
  background:linear-gradient(90deg,#fff,var(--gold)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.sterne-gewinn{color:var(--gold); font-weight:900; margin:0 0 18px; font-size:.95rem; min-height:20px}
.zusammenfassung-karten{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-bottom:22px}
.mini-karte{width:106px; border-radius:12px; padding:7px; border:2px solid var(--rand);
  background:rgba(255,255,255,.07); cursor:pointer; transition:.18s; position:relative}
.mini-karte:active{transform:scale(.95)}
.mini-karte svg{width:100%; height:64px; display:block}
.mini-karte b{display:block; font-size:.68rem; margin-top:3px}
.mini-karte span{font-size:.6rem; color:var(--schwach)}
.mini-karte.neu{border-color:var(--gruen); box-shadow:0 0 16px rgba(79,209,139,.35)}
.mini-karte.neu::after{content:'NEU'; position:absolute; top:-8px; right:-6px; background:var(--gruen);
  color:#052; font-size:.54rem; font-weight:900; padding:2px 6px; border-radius:6px}
.mini-karte .var{position:absolute; top:-8px; left:-6px; font-size:.54rem; font-weight:900;
  padding:2px 6px; border-radius:6px; background:var(--blau); color:#fff}
.mini-karte .var.fa{background:var(--gold); color:#3a2a00}
.zusammenfassung-leiste{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

/* ---- Detail ---- */
.detail-huelle{display:grid; place-items:center; gap:14px; position:relative; width:min(760px,100%)}
.detail-huelle .karte{width:290px; height:406px; cursor:default}
.detail-huelle .karte-name{font-size:1.3rem}
.detail-huelle .karte-kp{font-size:1.25rem}
.detail-huelle .angriff{font-size:.9rem}
.detail-huelle .karte-wissen{font-size:.75rem}
.detail-huelle .karte-masse{font-size:.7rem}
.detail-huelle .typ-chip{font-size:.8rem; padding:4px 11px}
.detail-huelle .karte-nr{font-size:.75rem}
.detail-huelle .karte-stufe{font-size:.72rem}
.detail-zu{position:absolute; top:-6px; right:0; z-index:5}
.blaetter-knopf{position:absolute; top:50%; transform:translateY(-50%);
  border:1px solid var(--rand); background:rgba(255,255,255,.1); color:#fff;
  width:56px; height:56px; border-radius:50%; font-size:2rem; cursor:pointer; line-height:1}
.blaetter-knopf:active{transform:translateY(-50%) scale(.9)}
.blaetter-knopf.links{left:0} .blaetter-knopf.rechts{right:0}
@media(max-width:720px){.blaetter-knopf{width:48px;height:48px;font-size:1.6rem}
  .blaetter-knopf.links{left:-4px}.blaetter-knopf.rechts{right:-4px}}
.detail-varianten{display:flex; gap:9px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid var(--rand); border-radius:14px; padding:11px 16px}
.var-knopf{border:1px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  padding:9px 15px; border-radius:10px; cursor:pointer; font:inherit; font-size:.78rem; font-weight:800}
.var-knopf.aktiv{background:var(--blau); border-color:var(--blau); color:#fff}
.var-knopf:disabled{opacity:.35; cursor:default}
.detail-info{background:rgba(255,255,255,.07); border:1px solid var(--rand); border-radius:13px;
  padding:11px 18px; display:flex; gap:18px; font-size:.82rem; flex-wrap:wrap; justify-content:center}
.detail-info b{color:var(--gold)}

/* Entwicklungsreihe */
.detail-reihe{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--rand); border-radius:14px; padding:10px 16px}
.reihe-titel{font-size:.7rem; font-weight:900; letter-spacing:1.4px; color:var(--schwach);
  text-transform:uppercase; width:100%; text-align:center}
.reihe-pfeil{color:var(--schwach); font-size:1.1rem}
.reihe-glied{background:transparent; border:2px solid transparent; border-radius:12px;
  cursor:pointer; padding:4px; display:grid; justify-items:center; gap:1px; color:var(--text); font:inherit}
.reihe-glied svg{width:56px; display:block}
.reihe-glied span{font-size:.62rem; font-weight:800}
.reihe-glied.aktiv{border-color:var(--gold); background:rgba(255,204,51,.12)}
.reihe-glied.fehlt{opacity:.5}
.reihe-glied:active{transform:scale(.94)}

/* Neuigkeiten */
.neuigkeiten-inhalt h3{color:var(--gold); text-transform:none; letter-spacing:0; font-size:1rem; margin-top:14px}
.neuigkeiten-inhalt ul{margin:0; padding-left:20px; color:var(--schwach); font-size:.88rem; line-height:1.7}
.neuigkeiten-inhalt li{margin-bottom:3px}

/* ===================== Urkunde ===================== */
.urkunde-huelle{display:grid; place-items:center; gap:16px}
.gesperrt-panel{max-width:560px; text-align:center}
.schloss{font-size:3.2rem; margin-bottom:8px; animation:logo-wippen 3s ease-in-out infinite}
.gesperrt-zahl{color:var(--schwach); font-size:.88rem}
.gesperrt-zahl span{color:var(--gold); font-weight:900}
.urkunde-frei{display:grid; gap:15px; justify-items:center; width:100%}
.namens-zeile{display:flex; gap:11px; align-items:center; flex-wrap:wrap; justify-content:center}
.namens-zeile label{font-weight:700; font-size:.88rem}
#urkunde-name{background:rgba(255,255,255,.08); border:1px solid var(--rand); color:var(--text);
  padding:13px 16px; border-radius:12px; font:inherit; font-size:1rem; min-width:210px;
  min-height:var(--tippziel)}
#urkunde-leinwand{width:100%; max-width:1000px; height:auto; border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.6); background:#fff}

/* ===================== Konfetti & Toast ===================== */
#konfetti{position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden}
.schnipsel{position:absolute; width:11px; height:16px; border-radius:2px; animation:fallen linear forwards}
@keyframes fallen{
  from{transform:translateY(-20px) rotate(0); opacity:1}
  to{transform:translateY(105vh) rotate(720deg); opacity:.15}
}
.toast{
  position:fixed; left:50%; transform:translateX(-50%); z-index:300;
  bottom:calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(135deg,#1d2a5c,#2b1b55); border:1px solid var(--rand);
  color:#fff; padding:14px 24px; border-radius:14px; font-weight:800; font-size:.9rem;
  box-shadow:0 16px 40px rgba(0,0,0,.5); animation:toast-rein .35s cubic-bezier(.2,1.3,.4,1);
  max-width:calc(100vw - 32px); text-align:center;
}
@keyframes toast-rein{from{transform:translate(-50%,24px); opacity:0}to{transform:translate(-50%,0); opacity:1}}

/* ===================== Touch / kleine Geräte ===================== */
@media (hover:hover) and (pointer:fine){
  .reiter-knopf:hover{color:#fff}
  .segment button:hover{color:#fff}
  .icon-knopf:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
  .gross-knopf:hover{transform:translateY(-3px) scale(1.012)}
  .text-knopf:hover{background:rgba(255,255,255,.16)}
  .album-feld:hover{transform:translateY(-6px) scale(1.05); box-shadow:0 14px 30px rgba(0,0,0,.5); z-index:2}
  .antwort:hover:not(:disabled){background:rgba(255,255,255,.17); transform:translateY(-3px); border-color:var(--blau)}
  .mini-karte:hover{transform:translateY(-6px); background:rgba(255,255,255,.15)}
  .blaetter-knopf:hover{background:rgba(255,255,255,.24)}
  .shop-karte:hover{transform:translateY(-4px)}
  .besondere-chip:hover{background:rgba(255,255,255,.16)}
}
@media(max-width:700px){
  .kopf{gap:10px} .marke-text{display:none}
  .reiter{order:3; width:100%; justify-content:space-between}
  .reiter-knopf{flex:1; padding:11px 8px; font-size:.8rem; text-align:center}
  .karten-stapel{gap:9px} .karte{width:150px; height:212px}
  .karte-name{font-size:.78rem} .karte-kp{font-size:.76rem}
  .angriff{font-size:.56rem} .karte-wissen{font-size:.47rem}
  .season-banner h2{font-size:1.3rem}
  .detail-huelle .karte{width:248px; height:348px}
  main{padding-bottom:90px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ===================== Version 4: Konto, Tausch, Pause ===================== */

/* Kopfleiste */
.spielzeit{display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.07);
  border:1px solid var(--rand); padding:9px 13px; border-radius:999px;
  font-weight:800; font-size:.82rem; color:var(--schwach)}
.spielzeit.knapp{border-color:rgba(255,180,80,.5); color:#ffcb7a; background:rgba(255,180,80,.12)}
.konto-chip{background:rgba(90,169,255,.16); border:1px solid rgba(90,169,255,.4);
  color:#cfe3ff; padding:9px 14px; border-radius:999px; font-weight:800; font-size:.8rem;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:820px){.spielzeit{display:none} .konto-chip{display:none}}

/* Anmeldung */
.aufgabe-box.schmal{width:min(420px,100%)}
.aufgabe-box.schmal h2{font-size:1.3rem; margin:8px 0 12px}
.feld-zeile{display:grid; gap:5px; margin-bottom:12px}
.feld-zeile label{font-size:.78rem; color:var(--schwach); font-weight:700}
.feld-zeile input{background:rgba(255,255,255,.08); border:1px solid var(--rand); color:var(--text);
  padding:13px 15px; border-radius:12px; font:inherit; font-size:.95rem; min-height:var(--tippziel)}
.feld-zeile input:focus{outline:2px solid var(--blau); outline-offset:1px}
#anmeldung-wechsel{margin-bottom:16px; flex-wrap:wrap}
.anmeldung-fehler{color:#ff9a9a; font-size:.84rem; font-weight:700; min-height:18px; margin:0 0 10px}

/* Pause */
.pause-overlay{background:radial-gradient(circle at 50% 40%, rgba(30,60,50,.96), rgba(4,10,8,.99)); z-index:400}
.pause-box{text-align:center; max-width:440px; display:grid; gap:14px; justify-items:center; padding:20px}
.pause-gesicht{font-size:4.5rem; animation:logo-wippen 3s ease-in-out infinite}
.pause-box h2{font-size:1.7rem; margin:0;
  background:linear-gradient(90deg,#fff,#8ff0c0); -webkit-background-clip:text; background-clip:text; color:transparent}
.pause-box p{margin:0; color:#c8d8d0; font-size:.95rem; line-height:1.6}
.pause-klein{font-size:.82rem !important; color:#8fa89c !important}
.pause-uhr-huelle{position:relative; width:150px; height:150px; display:grid; place-items:center; margin:6px 0}
.pause-kreis{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#4fd18b calc(var(--anteil,0) * 360deg), rgba(255,255,255,.12) 0);
  mask:radial-gradient(circle, transparent 62%, #000 63%);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%)}
.pause-uhr{font-size:2.3rem; font-weight:900; color:#8ff0c0; font-variant-numeric:tabular-nums}

/* Stufenanzeige */
.nv-zaehler{min-width:46px; text-align:right; font-size:.7rem; color:var(--schwach); font-weight:700}

/* Tausch */
.tausch-inhalt{display:grid; gap:18px}
.tausch-liste{display:grid; gap:9px}
.tausch-zeile{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--rand); border-radius:14px; padding:9px 13px}
.tz-bild{width:52px; flex:none}
.tz-bild svg{width:100%; display:block}
.tz-text{flex:1; display:grid}
.tz-text b{font-size:.92rem}
.tz-text span{font-size:.72rem; color:var(--schwach)}
.tausch-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:11px}
.tausch-karte{border:1px solid var(--rand); background:rgba(255,255,255,.05); border-radius:14px;
  padding:8px 6px; display:grid; justify-items:center; gap:2px; cursor:pointer; color:var(--text);
  font:inherit; transition:.18s}
.tausch-karte svg{width:100%; max-width:76px; display:block}
.tausch-karte b{font-size:.76rem}
.tausch-karte span{font-size:.66rem; color:var(--schwach)}
.tausch-karte .tk-aktion{margin-top:4px; font-size:.66rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg,var(--blau),var(--lila)); padding:4px 10px; border-radius:99px}
.tausch-karte.passend{cursor:default}
.tausch-karte.passend .tk-aktion{background:rgba(255,204,51,.2); color:var(--gold)}
.tausch-karte:active{transform:scale(.95)}

/* Bonus-Karte */
.bonus-karte .karte-vor.bonus-vor{
  background:linear-gradient(160deg,#ffd76a,#ff9d3c 55%,#c9622c);
  display:grid; place-items:center; border-color:#fff0c0}
.bonus-inhalt{display:grid; justify-items:center; gap:2px; position:relative; z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.4)}
.bonus-stern{font-size:3.2rem; animation:neu-puls 1.4s ease-in-out infinite}
.bonus-zahl{font-size:2rem; color:#fff; font-weight:900}
.bonus-text{font-size:.74rem; font-weight:900; color:#5a3200; letter-spacing:1px}
.mini-karte.bonus{border-color:rgba(255,204,51,.6); background:rgba(255,204,51,.12)}
.mini-bonus{font-size:2.6rem; line-height:1.2}

/* Unikat */
.art-marke.unikat{background:linear-gradient(135deg,#ffd24a,#ff6ad5); color:#2a1030}
.mini-karte.unikat{border-color:#ffd24a; box-shadow:0 0 22px rgba(255,210,74,.45)}
.mini-karte .var.uni{background:linear-gradient(135deg,#ffd24a,#ff6ad5); color:#2a1030}
.album-feld .var-marke i.uni{background:linear-gradient(135deg,#ffd24a,#ff6ad5); color:#2a1030}
.besondere-chip.uni{border-color:#ffd24a; background:rgba(255,210,74,.15)}
.karte[data-glitzer="4"] .karte-vor{animation:unikat-leuchten 2s ease-in-out infinite}
@keyframes unikat-leuchten{
  0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 24px rgba(255,210,74,.6)}
  50%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 60px rgba(255,120,220,.9)}
}
.karte[data-glitzer="4"] .glitzer::before{opacity:1; animation:holo-wandern 3s linear infinite}
@keyframes holo-wandern{from{background-position:0% 50%}to{background-position:200% 50%}}

/* Kartenränder */
.kartenrand{position:absolute; inset:0; pointer-events:none; border-radius:9px; z-index:3}
.karte.rand-punkte .kartenrand{
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) top/100% 3px no-repeat,
             repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) bottom/100% 3px no-repeat,
             repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) left/3px 100% no-repeat,
             repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) right/3px 100% no-repeat;
  opacity:.75}
.karte.rand-zacken .kartenrand{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.9) 0 5px, transparent 5px 10px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:4px; opacity:.55}
.karte.rand-foliengold .kartenrand{
  background:linear-gradient(115deg,#c9962c,#ffe9a3 45%,#c9962c 60%,#fff6d0 80%,#c9962c);
  background-size:250% 100%; animation:rand-wandern 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:4px}
.karte.rand-regenbogen .kartenrand{
  background:linear-gradient(90deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff,#c77dff,#ff6ad5);
  background-size:300% 100%; animation:rand-wandern 5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px}
.karte.rand-sternen .kartenrand{
  background:radial-gradient(circle, #fff 1px, transparent 1.6px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:6px;
  animation:rand-funkeln 2.2s ease-in-out infinite}
.karte.rand-flammen .kartenrand{
  background:linear-gradient(0deg,#ff3c00,#ffb03a 40%,#ffe14d 70%,#ff6b2c);
  background-size:100% 250%; animation:rand-lodern 2.4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px}
@keyframes rand-wandern{from{background-position:0% 50%}to{background-position:250% 50%}}
@keyframes rand-lodern{from{background-position:50% 0%}to{background-position:50% 250%}}
@keyframes rand-funkeln{0%,100%{opacity:.45}50%{opacity:1}}

/* Karten-Designs neu */
.karte.d-obsidian .karte-vor{border-color:#1a1a24;
  box-shadow:inset 0 0 0 2px rgba(255,210,90,.5), 0 16px 40px rgba(0,0,0,.6)}
.karte.d-eis .karte-vor{border-color:#bdf0ff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 16px 40px rgba(0,0,0,.5)}

/* Shop-Extras */
.karte.extra-aura[data-glitzer="2"] .karte-vor,
.karte.extra-aura[data-glitzer="3"] .karte-vor,
.karte.extra-aura[data-glitzer="4"] .karte-vor{filter:drop-shadow(0 0 14px rgba(180,140,255,.75))}
.karte.extra-thron[data-seltenheit="legendaer"] .strahlen{opacity:.5;
  animation:thron-dreh 9s linear infinite;
  background:conic-gradient(from 0deg, transparent 0 6deg, rgba(255,215,110,.7) 6deg 12deg, transparent 12deg 18deg)}
@keyframes thron-dreh{to{transform:rotate(360deg)}}

.rand-vorschau{position:absolute; inset:0; background:linear-gradient(160deg,#3a4468,#222a45);
  display:grid; place-items:center}
.rand-vorschau span{width:62%; height:62%; border-radius:6px; display:block}
.rand-vorschau.rand-standard span{border:2px solid #8b93ad}
.rand-vorschau.rand-punkte span{border:3px dotted #fff}
.rand-vorschau.rand-zacken span{border:3px dashed #fff}
.rand-vorschau.rand-foliengold span{border:4px solid #ffd966}
.rand-vorschau.rand-regenbogen span{border:4px solid; border-image:linear-gradient(90deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff) 1}
.rand-vorschau.rand-sternen span{border:4px double #fff}
.rand-vorschau.rand-flammen span{border:4px solid #ff7a2c; box-shadow:0 0 14px #ff7a2c}
.extra-vorschau{position:absolute; inset:0; display:grid; place-items:center; font-size:2rem;
  background:rgba(255,255,255,.05)}
.extra-vorschau.extra-aura{background:radial-gradient(circle,#6b4bb8,#1b1030)}
.extra-vorschau.extra-thron{background:radial-gradient(circle,#c9962c,#2a1d05)}
.extra-vorschau.extra-funkeln{background:radial-gradient(circle,#3d5aa8,#101838)}

/* ---- Aufgaben-Overlay aufgeräumt ---- */
.aufgabe-kopf{justify-content:space-between; flex-wrap:nowrap}
.kopf-werkzeuge{display:flex; gap:7px; margin-left:auto}
#vorlesen-knopf{margin-left:0}
.aufgabe-leiste{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.aufgabe-leiste .mini-schritte{flex:1; margin:0}
.leiste-info{font-size:.72rem; color:var(--schwach); font-weight:700; white-space:nowrap}
.leiste-info b{color:var(--gold)}
@media(max-width:460px){ .leiste-info{font-size:.66rem} }

.feld-hilfe{font-size:.72rem; color:var(--schwach); line-height:1.45; margin-top:2px}

/* ===================== Beta-Kennzeichnung & Rechtliches ===================== */
.beta-marke{
  font-size:.52rem; font-weight:900; letter-spacing:1.4px; vertical-align:middle;
  background:linear-gradient(135deg,#ff8b4d,#c31432); color:#fff;
  padding:3px 7px; border-radius:6px; margin-left:6px;
  -webkit-text-fill-color:#fff; box-shadow:0 3px 10px rgba(195,20,50,.4);
}

.fusszeile{
  margin-top:40px; padding:22px clamp(14px,3vw,28px);
  border-top:1px solid var(--rand); background:rgba(255,255,255,.035);
  border-radius:var(--radius); display:grid; gap:12px; justify-items:center; text-align:center;
}
.fuss-hinweis{margin:0; font-size:.8rem; color:var(--schwach); line-height:1.6; max-width:720px}
.fuss-hinweis strong{color:#ffcb7a}
.fuss-nav{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.fuss-nav a{color:var(--schwach); font-size:.85rem; font-weight:700; text-decoration:none;
  padding:9px 4px; min-height:var(--tippziel); display:flex; align-items:center}
.fuss-nav a:hover{color:var(--text); text-decoration:underline}

/* Willkommens-Hinweis */
.willkommen-punkte{display:grid; gap:12px; margin:4px 0 16px}
.wp{display:flex; gap:12px; align-items:flex-start; font-size:.86rem;
  color:var(--schwach); line-height:1.55}
.wp b{color:var(--text)}
.wp-zeichen{font-size:1.4rem; line-height:1.2; flex:none}
.willkommen-recht{text-align:center; font-size:.8rem; margin:0 0 16px}
.willkommen-recht a{color:var(--schwach)}

/* Rechtsseiten (Impressum, Datenschutz) */
body.rechtsseite{padding:0}
.rechts-huelle{max-width:820px; margin:0 auto; padding:26px clamp(14px,4vw,34px) 70px;
  position:relative; z-index:1}
.zurueck-link{display:inline-flex; align-items:center; min-height:var(--tippziel);
  color:var(--schwach); text-decoration:none; font-weight:700; font-size:.88rem; margin-bottom:10px}
.zurueck-link:hover{color:var(--text)}
.rechts-text{background:var(--panel); border:1px solid var(--rand); border-radius:var(--radius);
  padding:clamp(20px,4vw,36px); backdrop-filter:blur(10px); box-shadow:var(--schatten);
  -webkit-user-select:text; user-select:text}
.rechts-text h1{font-size:1.7rem; margin:0 0 22px;
  background:linear-gradient(90deg,#fff,#ffd76a); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.rechts-text h2{font-size:1.02rem; margin:26px 0 8px; color:var(--text);
  text-transform:none; letter-spacing:0}
.rechts-text p{margin:0 0 12px; font-size:.9rem; line-height:1.7; color:#ccd5ea}
.rechts-text ul{margin:0 0 14px; padding-left:22px; font-size:.9rem; line-height:1.8; color:#ccd5ea}
.rechts-text li{margin-bottom:4px}
.rechts-text a{color:#8ab6ff}
.rechts-text code{background:rgba(255,255,255,.1); padding:1px 6px; border-radius:5px;
  font-size:.84em; color:#ffd76a}
.rechts-text strong{color:var(--text)}
.stand{margin-top:28px !important; font-size:.8rem !important; color:var(--schwach) !important;
  font-style:italic}
.fuss-links{margin-top:18px !important; padding-top:16px; border-top:1px solid var(--rand);
  font-size:.86rem !important}

.hinweis-kasten{border-radius:14px; padding:16px 20px; margin:20px 0;
  border:1px solid var(--rand); background:rgba(255,255,255,.05)}
.hinweis-kasten h2{margin-top:0 !important}
.hinweis-kasten p:last-child{margin-bottom:0}
.hinweis-kasten.beta{border-color:rgba(255,139,77,.45); background:rgba(255,139,77,.1)}
.hinweis-kasten.ki{border-color:rgba(138,92,255,.45); background:rgba(138,92,255,.1)}
.hinweis-kasten.gut{border-color:rgba(79,209,139,.45); background:rgba(79,209,139,.1)}

/* ===================== Version 5: Season 2, Glück, Bestenliste ===================== */

/* 10 Schritte bis zum Pack */
.schritte{gap:5px}
.schritte i{height:12px}
.mini-schritte{gap:4px}

/* Belohnung: zwei Packs, Bonus-Sterne */
.belohnung-packs{display:flex; gap:16px; justify-content:center; align-items:center}
.belohnung-packs.doppelt .pack-objekt:first-child{transform:rotate(-7deg)}
.belohnung-packs.doppelt .pack-objekt:last-child{transform:rotate(7deg)}
.belohnung-bonus{margin-top:12px; font-size:1.5rem; font-weight:900; color:var(--gold);
  text-shadow:0 0 18px rgba(255,204,51,.7); animation:neu-puls 1.2s ease-in-out infinite}

/* Halloween-Thema für die ganze Seite, sobald Season 2 gewählt ist */
body.thema-halloween{
  background:
    radial-gradient(1000px 650px at 12% -10%, #4a1f78 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #7a3310 0%, transparent 55%),
    linear-gradient(180deg,#0e0818 0%, #1c0f2e 100%);
  background-attachment:fixed;
}
body.thema-halloween .season-banner{
  background:linear-gradient(120deg, rgba(123,63,209,.4), rgba(255,138,31,.25) 60%, rgba(20,10,36,.4));
  border-color:rgba(255,138,31,.35)
}
body.thema-halloween .season-banner::before{
  content:'🦇  🎃  🦇'; position:absolute; right:clamp(160px,28vw,340px); top:14px;
  font-size:1.3rem; letter-spacing:10px; opacity:.55; animation:fledermaus-schweben 5s ease-in-out infinite;
  pointer-events:none
}
@keyframes fledermaus-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body.thema-halloween .season-marke{color:#ff9a3c}
body.thema-halloween .reiter-knopf.aktiv{background:linear-gradient(135deg,#ff8a1f,#7b3fd1);
  box-shadow:0 6px 18px rgba(255,138,31,.35)}
body.thema-halloween .gross-knopf:not(.blau){background:linear-gradient(135deg,#ff8a1f,#c2410c 55%,#6b21a8)}
body.thema-halloween .schritte i.voll,
body.thema-halloween .mini-schritte i.voll{background:linear-gradient(90deg,#ff8a1f,#b16cff)}
@media(max-width:700px){body.thema-halloween .season-banner::before{display:none}}

/* Karten aus Season 2 */
.karte.thema-halloween .karte-vor{background:linear-gradient(165deg, var(--t1,#888) 0%, #2a1540 88%)}
.karte.thema-halloween .karte-bild{
  background:
    radial-gradient(circle at 78% 22%, #fff4c2 0 9%, rgba(255,244,194,.25) 10%, transparent 17%),
    linear-gradient(180deg,#2d1a52 0%, #6b3a8c 62%, #e8843a 100%)}
.karte.thema-halloween.art-fullart .karte-bild{
  background:
    radial-gradient(circle at 80% 18%, #fff4c2 0 7%, transparent 13%),
    linear-gradient(180deg,#1a0f33 0%, #4a2470 60%, #c2621f 100%)}
.karte.thema-halloween .karte-text{background:rgba(255,248,238,.85)}
.karte.thema-halloween .karte-kopf .karte-name{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Shop */
.shop-season{position:absolute; top:10px; left:10px; font-size:.6rem; font-weight:900;
  padding:3px 8px; border-radius:6px; background:linear-gradient(135deg,#ff8a1f,#7b3fd1); color:#fff; z-index:2}
.shop-karte.saison-artikel{border-color:rgba(255,138,31,.35)}

/* Tausch */
.tausch-info{padding:14px 18px; background:rgba(123,63,209,.14); border-color:rgba(177,108,255,.35)}
.tausch-bald{text-align:center}
.tausch-bald-icon{font-size:3rem; display:block; margin-bottom:6px; animation:fledermaus-schweben 3s ease-in-out infinite}

/* Bestenliste */
.bestenliste-inhalt{display:grid; gap:16px}
.bestenliste-raster{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:820px){.bestenliste-raster{grid-template-columns:1fr}}
.bl-liste{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.bl-zeile{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--rand); border-radius:12px; padding:10px 14px; font-size:.92rem}
.bl-zeile.ich{border-color:var(--gold); background:rgba(255,204,51,.12)}
.bl-platz{min-width:30px; text-align:center; font-weight:900; font-size:1.05rem}
.bl-name{flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bl-wert{font-weight:900; color:var(--gold)}
.bl-urkunden{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.bl-urkunden i{font-style:normal; font-size:.72rem; font-weight:900; padding:3px 8px; border-radius:7px;
  background:rgba(255,255,255,.1)}
.bl-meins{margin:14px 0 0; font-size:.86rem; color:var(--schwach)}
.bl-meins strong{color:var(--gold)}
.bl-versteckt{text-align:center}
.anmeldung-schalter{margin:0 0 10px; font-size:.82rem}

/* Flatternde Tiere bei Pack-Animationen */
.schwarm-tier{position:absolute; animation:schwarm-flug 2.2s cubic-bezier(.3,.6,.4,1) forwards; will-change:transform}
@keyframes schwarm-flug{
  0%{transform:translate(0,0) scale(.4); opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--dx), var(--dy)) scale(1.2) rotate(20deg); opacity:0}
}
.pack-objekt.weg-feuerwerk{animation:pack-weg .45s ease forwards}
.pack-objekt.weg-fledermausschwarm{animation:pack-davon 1.1s cubic-bezier(.5,0,.6,1) forwards}
@keyframes pack-davon{30%{transform:translateY(12px) rotate(-6deg)}100%{transform:translate(40vw,-70vh) rotate(35deg) scale(.3); opacity:0}}
.pack-objekt.weg-geisterspuk{animation:pack-geist 1.1s ease forwards}
@keyframes pack-geist{50%{opacity:.35; filter:blur(2px) brightness(1.6)}100%{opacity:0; transform:translateY(-60px) scale(1.15); filter:blur(10px)}}

/* Neue Aufgaben-Hintergründe */
.hg-weltall{background:radial-gradient(circle at 75% 25%, rgba(255,155,224,.28), transparent 35%), linear-gradient(160deg,rgba(10,6,32,.7),rgba(42,22,96,.55))}
.hg-polarlicht{background:linear-gradient(170deg, transparent 20%, rgba(29,122,90,.4) 50%, rgba(90,63,168,.35) 75%, transparent)}
.hg-wolkenschloss{background:linear-gradient(180deg,rgba(255,179,107,.3),rgba(185,216,255,.25))}
.hg-lavahoehle{background:radial-gradient(circle at 50% 120%, rgba(255,106,44,.55), transparent 60%)}
.hg-kristallhoehle{background:linear-gradient(135deg,rgba(74,58,138,.45),rgba(122,214,255,.3))}
.hg-kuerbisfeld{background:radial-gradient(circle at 80% 18%, rgba(255,243,176,.35), transparent 15%), linear-gradient(180deg, transparent 55%, rgba(63,90,29,.45))}
.hg-spukschloss{background:radial-gradient(circle at 20% 20%, rgba(255,243,176,.3), transparent 14%), linear-gradient(180deg,rgba(42,20,80,.6),rgba(18,10,36,.6))}

/* Neue Kartenrückseiten */
.karte-rueck.r-holo{border-color:#fff;
  background:linear-gradient(115deg,#ff6ad5,#ffd93d 25%,#4fd18b 45%,#5aa9ff 65%,#c77dff 85%,#ff6ad5);
  background-size:250% 250%; animation:rand-wandern 6s linear infinite}
.karte-rueck.r-kuerbis{border-color:#ffb36b;
  background:radial-gradient(circle at 50% 50%, #ff8a1f 0 30%, transparent 31%), repeating-linear-gradient(90deg,#2a1540 0 12px,#3a1f5c 12px 24px)}
.karte-rueck.r-fledermaus{border-color:#c8b8ff;
  background:radial-gradient(circle at 50% 45%, #fff4c2 0 28%, #ffe38a 29%, transparent 31%), linear-gradient(180deg,#120a24,#3a1f5c)}
.karte-rueck.r-spinnennetz{border-color:#d8d8e8;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.22) 0 2deg, transparent 2deg 30deg),
             repeating-radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(255,255,255,.2) 15px 16px), #1a1426}

/* Neue Kartendesigns */
.karte.d-diamant .karte-vor{border-color:#e8f6ff;
  box-shadow:inset 0 0 0 2px rgba(120,200,255,.8), 0 0 18px rgba(180,230,255,.55), 0 16px 40px rgba(0,0,0,.5)}
.karte.d-kuerbisrahmen .karte-vor{border-color:#ff8a1f; box-shadow:inset 0 0 0 3px #6b2fa8, 0 16px 40px rgba(0,0,0,.5)}
.karte.d-mondnacht .karte-vor{border-color:#c8d2ff; box-shadow:inset 0 0 0 2px #1b2a6b, 0 0 16px rgba(200,210,255,.35), 0 16px 40px rgba(0,0,0,.5)}

/* Neue Kartenränder */
.karte.rand-blitze .kartenrand{
  background:repeating-linear-gradient(60deg, #ffe14d 0 3px, transparent 3px 14px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px; animation:rand-funkeln .9s steps(2) infinite}
.karte.rand-spinnweben .kartenrand{
  background:
    radial-gradient(circle at 0 0, transparent 0 10px, rgba(255,255,255,.55) 11px 12px, transparent 13px 20px, rgba(255,255,255,.45) 21px 22px, transparent 23px) top left/46px 46px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 0 10px, rgba(255,255,255,.55) 11px 12px, transparent 13px 20px, rgba(255,255,255,.45) 21px 22px, transparent 23px) bottom right/46px 46px no-repeat}
.karte.rand-kerzenschein .kartenrand{
  background:linear-gradient(0deg,#ffb13b,#ffe7a0 50%,#ff8a1f); background-size:100% 300%;
  animation:rand-lodern 1.6s ease-in-out infinite alternate;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:4px; filter:drop-shadow(0 0 6px #ffb13b)}

/* Neue große Stücke */
.karte.extra-galaxie[data-seltenheit="episch"] .karte-bild,
.karte.extra-galaxie[data-seltenheit="legendaer"] .karte-bild{
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 40% 75%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 65%, #ffe6ff 0 1px, transparent 2px),
    radial-gradient(ellipse at 60% 50%, rgba(199,125,255,.55), transparent 55%),
    linear-gradient(160deg,#0a0620,#2a1660 60%,#5a1f6e)}
.geister-schweif{position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; border-radius:9px}
.geister-schweif i{position:absolute; font-style:normal; font-size:1rem; opacity:0; animation:geist-kreisen 4.5s ease-in-out infinite}
.geister-schweif i:nth-child(1){left:8%; top:30%}
.geister-schweif i:nth-child(2){right:10%; top:12%; animation-delay:1.5s}
.geister-schweif i:nth-child(3){left:45%; bottom:26%; animation-delay:3s}
@keyframes geist-kreisen{0%,100%{opacity:0; transform:translateY(8px)}40%{opacity:.85}60%{opacity:.85; transform:translateY(-10px)}}
.extra-vorschau.extra-geisterschweif{background:radial-gradient(circle,#4a2470,#120a24)}
.extra-vorschau.extra-galaxie{background:radial-gradient(circle,#5a1f6e,#0a0620)}
.extra-vorschau.extra-regenbogenholo{background:linear-gradient(120deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff,#c77dff)}
.rand-vorschau.rand-blitze span{border:4px dashed #ffe14d}
.rand-vorschau.rand-spinnweben span{border:3px dotted #e8e8f4; border-radius:14px}
.rand-vorschau.rand-kerzenschein span{border:4px solid #ffb13b; box-shadow:0 0 14px #ffb13b}