/* ============ WORD HERO – Vokabeltrainer ============ */
:root{
  --bg:#0a0f2c; --bg2:#121a46; --card:#172158; --card2:#1f2c70; --line:#2c3b8c;
  --tx:#fff; --mut:#a9b4ea;
  --green:#22c55e; --green-d:#15803d;
  --red:#ef4444;   --red-d:#b91c1c;
  --yellow:#facc15;--yellow-d:#ca8a04;
  --blue:#3b82f6;  --blue-d:#1d4ed8;
  --orange:#f97316;--orange-d:#c2410c;
  --purple:#a855f7;--purple-d:#7e22ce;
  --r:20px;
  --st: env(safe-area-inset-top,0px);
  --sb: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--tx);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{background:radial-gradient(900px 520px at 50% -8%,#22339a 0%,var(--bg) 62%) fixed}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0}
input,textarea,select{font:inherit}
#app{max-width:560px;margin:0 auto;min-height:100vh}
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-top:var(--st)}
.content{flex:1;padding:12px 16px calc(100px + var(--sb))}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.muted{color:var(--mut)}
.small{font-size:13px}
h1,h2,h3{margin:0}
.hidden{display:none!important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:16px;
  font-weight:900;letter-spacing:.6px;text-transform:uppercase;font-size:16px;color:#fff;
  background:var(--c,var(--green));box-shadow:0 5px 0 var(--d,var(--green-d));
  transition:transform .08s,box-shadow .08s,filter .2s;user-select:none;-webkit-user-select:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d,var(--green-d))}
.btn:disabled{filter:grayscale(1) brightness(.55);pointer-events:none}
.btn.big{width:100%;font-size:18px;padding:17px}
.btn.sm{padding:9px 14px;font-size:13px;border-radius:12px;box-shadow:0 3px 0 var(--d)}
.btn-green{--c:var(--green);--d:var(--green-d)}
.btn-red{--c:var(--red);--d:var(--red-d)}
.btn-yellow{--c:var(--yellow);--d:var(--yellow-d);color:#3a2900}
.btn-blue{--c:var(--blue);--d:var(--blue-d)}
.btn-orange{--c:var(--orange);--d:var(--orange-d)}
.btn-purple{--c:var(--purple);--d:var(--purple-d)}
.btn-ghost{--c:#2a3672;--d:#18204d}

/* ---------- Top bar ---------- */
.top{display:flex;align-items:center;gap:10px;padding:10px 14px 6px;position:sticky;top:0;z-index:5;
  background:linear-gradient(var(--bg) 70%,transparent)}
.avatar{--c1:#e53935;--c2:#1e40af;width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:26px;background:radial-gradient(circle at 30% 25%,var(--c1),var(--c2));box-shadow:0 0 0 3px #fff2,0 4px 12px #0007;position:relative}
.avatar.xl{width:110px;height:110px;font-size:60px}
.avatar.lg{width:76px;height:76px;font-size:42px}
.who{flex:1;min-width:0}
.who b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl{font-size:12px;color:var(--mut);font-weight:700}
.xpbar{height:7px;border-radius:9px;background:#0006;margin-top:3px;overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),#f0abfc);border-radius:9px}
.chip{display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:14px;background:var(--card);font-weight:900;font-size:15px;border:2px solid var(--line);white-space:nowrap}
.chip.fire{color:#ffb547}
.chip.fire.off{filter:grayscale(1);opacity:.6}
.chip.coin{color:var(--yellow)}
.chip.bump{animation:bump .5s}
.gear{font-size:18px;opacity:.55;padding:6px}

/* ---------- Cards / sections ---------- */
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:2px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:0 8px 24px #0005}
.sec-title{font-size:13px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin:20px 4px 8px}

/* Mission */
.mission{position:relative;overflow:hidden;background:linear-gradient(160deg,#1e3fae,#162065 60%,#121a4a);border-color:#3b5bdb}
.mission::after{content:"";position:absolute;inset:auto -40px -70px auto;width:200px;height:200px;border-radius:50%;background:#ffffff0b}
.mission h2{font-size:22px}
.mission .sub{color:#c7d2fe;font-size:14px;margin-top:4px}
.stations{display:flex;align-items:center;justify-content:space-between;margin:18px 4px 18px;position:relative}
.stations::before{content:"";position:absolute;left:30px;right:30px;top:30px;height:6px;border-radius:6px;background:#0007}
.stations .bar{position:absolute;left:30px;top:30px;height:6px;border-radius:6px;background:var(--green);transition:width .6s}
.station{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:74px}
.station .dot{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#26337a;border:3px solid #3c4fa8;box-shadow:0 5px 0 #0006}
.station.done .dot{background:var(--green);border-color:#86efac}
.station.now .dot{background:var(--yellow);border-color:#fff;animation:pulse 1.6s infinite}
.station small{font-size:11px;font-weight:800;color:#c7d2fe;text-align:center;line-height:1.15}
.goal-done{display:flex;align-items:center;gap:10px;background:#16a34a33;border:2px solid #22c55e88;border-radius:14px;padding:10px 12px;margin-bottom:12px;font-weight:800}
.plan-info{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px;font-size:13px;color:#c7d2fe;font-weight:700}
.plan-info span{background:#0004;padding:5px 10px;border-radius:10px}

/* Challenges */
.chal{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card);border:2px solid var(--line);margin-bottom:8px}
.chal .ic{font-size:26px;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#0005;flex:none}
.chal .tx{flex:1;min-width:0}
.chal .tx b{font-size:15px;display:block}
.chal .pb{height:9px;border-radius:9px;background:#0006;margin-top:6px;overflow:hidden}
.chal .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--yellow));border-radius:9px}
.chal .rw{font-weight:900;color:var(--yellow);font-size:14px;white-space:nowrap}
.chal.ok{border-color:#22c55e;background:#14532d55}
.chal.ok .pb i{background:var(--green)}

/* Games */
.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-tile{position:relative;border-radius:18px;padding:16px 12px 14px;text-align:center;border:2px solid #ffffff22;box-shadow:0 6px 0 #0006;overflow:hidden}
.game-tile:active{transform:translateY(3px);box-shadow:0 3px 0 #0006}
.game-tile .ge{font-size:42px;display:block;filter:drop-shadow(0 4px 4px #0006)}
.game-tile b{display:block;margin-top:6px;font-size:15px}
.game-tile small{display:block;color:#ffffffcc;font-size:12px;margin-top:2px;font-weight:700}
.game-tile.pen{background:linear-gradient(160deg,#16a34a,#065f46)}
.game-tile.race{background:linear-gradient(160deg,#f97316,#9a3412)}
.game-tile.locked{filter:grayscale(.9) brightness(.6)}
.game-tile .lock{position:absolute;top:8px;right:10px;font-size:18px}

/* Week cup */
.week{display:flex;align-items:center;gap:12px}
.week .cup{font-size:40px}
.week .dots{display:flex;gap:6px;margin-top:6px}
.week .dots i{width:22px;height:22px;border-radius:50%;background:#0006;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;font-style:normal}
.week .dots i.on{background:var(--yellow);border-color:#fff8}

/* Bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;
  padding:8px 6px calc(8px + var(--sb));background:#0b1238f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--line);max-width:560px;margin:0 auto}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border-radius:12px;opacity:.6;min-width:58px}
.nav button span{font-size:25px}
.nav button small{font-size:11px;font-weight:800}
.nav button.on{opacity:1;background:#ffffff14}

/* ---------- Lesson ---------- */
.lesson{height:100vh;height:100dvh;min-height:0}
.l-top{display:flex;align-items:center;gap:12px;padding:12px 14px}
.x{font-size:22px;color:var(--mut);width:36px;height:36px;border-radius:50%;flex:none}
.pbar{flex:1;height:18px;border-radius:12px;background:#0007;position:relative;border:2px solid #ffffff14}
.pfill{position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:linear-gradient(90deg,#16a34a,#4ade80);transition:width .45s cubic-bezier(.3,1.3,.5,1);min-width:12px}
.pfill::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:4px;background:#ffffff55}
.pcar{position:absolute;top:50%;font-size:28px;transform:translate(-55%,-62%) scaleX(-1);transition:left .45s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 3px 2px #0008)}
.pflag{position:absolute;right:-6px;top:50%;transform:translateY(-60%);font-size:20px}
.combo{min-width:58px;text-align:center;font-weight:900;font-size:16px;padding:6px 8px;border-radius:12px;background:#0005;color:#fdba74;transition:transform .2s}
.combo.hot{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;animation:bump .4s}
.combo.zero{opacity:.35}
.l-body{flex:1;overflow-y:auto;padding:8px 18px 18px;-webkit-overflow-scrolling:touch}
.l-foot{padding:12px 18px calc(14px + var(--sb));border-top:2px solid #ffffff10;background:var(--bg)}
.ex-in{animation:slideIn .35s ease-out}
.ex-label{font-size:13px;font-weight:900;letter-spacing:1.2px;color:#93c5fd;text-transform:uppercase;margin:6px 0 14px}
.prompt{font-size:32px;font-weight:900;line-height:1.15;margin:4px 0 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;word-break:break-word}
.prompt.de::before{content:"🇩🇪";font-size:24px}
.prompt .spk{font-size:22px}
.sub{color:var(--mut);font-size:15px;margin:-10px 0 18px;line-height:1.35}
.spk{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--blue);box-shadow:0 4px 0 var(--blue-d);font-size:22px;flex:none}
.spk:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.spk.mini{width:34px;height:34px;font-size:16px;border-radius:10px;box-shadow:0 3px 0 var(--blue-d);vertical-align:middle;margin-left:6px}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{padding:16px 14px;border-radius:16px;background:var(--card);border:2px solid var(--line);box-shadow:0 4px 0 #0007;font-size:19px;font-weight:800;text-align:left;transition:transform .08s,background .15s,border-color .15s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #0007}
.opt.sel{border-color:#60a5fa;background:#1e3a8a}
.opt.right{border-color:#4ade80;background:#14532d}
.opt.wrong{border-color:#f87171;background:#7f1d1d;animation:shake .4s}
.opt.gone{visibility:hidden}
.ans-in{width:100%;padding:16px;border-radius:16px;border:3px solid var(--line);background:#0b1238;color:#fff;font-size:24px;font-weight:800;outline:none;letter-spacing:.5px}
.ans-in:focus{border-color:#60a5fa}
.ans-in.right{border-color:#4ade80}
.ans-in.wrong{border-color:#f87171;animation:shake .4s}
.hint-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.hint-show{margin-top:12px;font-size:20px;font-weight:800;letter-spacing:4px;color:#fde68a}
.joker{font-size:13px;font-weight:800;padding:8px 12px;border-radius:12px;background:#2a3672;border:2px solid #3b4aa0;color:#fde68a}
.joker:disabled{opacity:.4}

/* Intro */
.intro-card{background:linear-gradient(160deg,#1e3a8a,#172058);border:2px solid #3b5bdb;border-radius:24px;padding:22px 18px;text-align:center;box-shadow:0 10px 30px #0006}
.intro-new{display:inline-block;background:var(--yellow);color:#3a2900;font-weight:900;font-size:12px;letter-spacing:1px;padding:5px 12px;border-radius:20px;margin-bottom:14px}
.intro-de{font-size:22px;color:#c7d2fe;font-weight:800}
.intro-arrow{font-size:22px;margin:8px 0;opacity:.7}
.intro-en{font-size:38px;font-weight:900;display:inline-flex;align-items:center;gap:12px;padding:10px 18px;border-radius:18px;background:#0005}
.intro-sent{margin-top:18px;background:#0004;border-radius:16px;padding:12px;font-size:17px;font-weight:700;line-height:1.4}
.intro-sent span{display:block;color:var(--mut);font-weight:600;font-size:15px;margin-top:4px}

/* Letter tiles */
.slots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 22px;min-height:54px}
.slot{width:40px;height:50px;border-radius:12px;border:3px dashed #3b4aa0;display:grid;place-items:center;font-size:26px;font-weight:900;text-transform:lowercase;background:#0b1238}
.slot.filled{border-style:solid;border-color:#60a5fa;background:#1e3a8a;animation:pop .2s}
.slot.fixed{border:0;background:none;width:16px}
.slot.right{border-color:#4ade80;background:#14532d}
.slot.wrong{border-color:#f87171;background:#7f1d1d}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{width:50px;height:54px;border-radius:14px;background:#f8fafc;color:#0f172a;font-size:26px;font-weight:900;box-shadow:0 5px 0 #94a3b8;text-transform:lowercase}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 #94a3b8}
.tile.used{visibility:hidden}

/* Sentence builder */
.s-answer{min-height:112px;border-bottom:3px solid #ffffff22;border-top:3px solid #ffffff22;padding:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;margin-bottom:18px;background:repeating-linear-gradient(transparent 0 52px,#ffffff10 52px 54px)}
.s-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.word{padding:10px 14px;border-radius:14px;background:#f8fafc;color:#0f172a;font-size:19px;font-weight:800;box-shadow:0 4px 0 #94a3b8}
.word:active{transform:translateY(3px);box-shadow:0 1px 0 #94a3b8}
.word.used{visibility:hidden}
.s-answer .word{animation:pop .18s}
.s-answer.right .word{background:#bbf7d0}
.s-answer.wrong{animation:shake .4s}

/* Gap */
.gq{font-size:24px;font-weight:800;line-height:1.5;margin:4px 0 14px}
.gap{display:inline-block;min-width:90px;border-bottom:4px solid #60a5fa;color:#93c5fd;text-align:center;padding:0 6px}
.gap.right{border-color:#4ade80;color:#86efac}

/* Match */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match .col{display:grid;gap:10px;align-content:start}
.mcard{min-height:62px;padding:10px;border-radius:16px;background:var(--card);border:2px solid var(--line);box-shadow:0 4px 0 #0007;font-size:17px;font-weight:800;line-height:1.15;word-break:break-word}
.mcard.de{color:#e0e7ff}
.mcard.sel{border-color:#60a5fa;background:#1e3a8a}
.mcard.done{border-color:#22c55e;background:#14532d;opacity:.35;pointer-events:none;transform:scale(.96);transition:all .35s}
.mcard.wrong{border-color:#f87171;background:#7f1d1d;animation:shake .35s}

/* Feedback */
.fb{border-radius:18px;padding:14px 14px 16px;margin:-4px -4px 0;animation:up .25s ease-out}
.fb-ok{background:#14532d;border:2px solid #22c55e}
.fb-bad{background:#4c1010;border:2px solid #ef4444}
.fb-typo,.fb-hint{background:#4a3a06;border:2px solid #eab308}
.fb-head{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;margin-bottom:6px}
.fb-head .e{font-size:28px}
.fb-coins{margin-left:auto;color:var(--yellow);font-size:17px}
.fb-sol{font-size:17px;line-height:1.45;margin-bottom:12px}
.fb-sol b{font-size:19px}
.fb-sol .tip{margin-top:6px;color:#fde68a;font-size:15px}
.fb-sol .sub{margin:2px 0 0;font-size:14px}

/* ---------- Popups / modal / confetti ---------- */
.pop{position:fixed;left:50%;top:38%;z-index:100;transform:translate(-50%,-50%);pointer-events:none;
  min-width:250px;max-width:88vw;text-align:center;padding:18px 22px;border-radius:26px;
  background:linear-gradient(160deg,#4338ca,#1e1b4b);border:3px solid #a5b4fc;box-shadow:0 20px 60px #000a,0 0 0 6px #ffffff12;animation:popIn .45s cubic-bezier(.2,1.6,.4,1)}
.pop.out{animation:popOut .35s forwards}
.pop-emoji{font-size:58px;line-height:1;margin-bottom:6px;animation:wiggle 1s ease-in-out infinite}
.pop-title{font-size:26px;font-weight:900;letter-spacing:.5px;text-shadow:0 3px 0 #0006}
.pop-text{font-size:16px;font-weight:700;color:#e0e7ff;margin-top:6px;line-height:1.35}
.pop.gold{background:linear-gradient(160deg,#ca8a04,#713f12);border-color:#fde68a}
.pop.green{background:linear-gradient(160deg,#16a34a,#14532d);border-color:#86efac}
.pop.red{background:linear-gradient(160deg,#e11d48,#7f1d1d);border-color:#fda4af}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:99}
.modal-bg{position:fixed;inset:0;z-index:90;background:#020617cc;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.modal{width:100%;max-width:380px;background:linear-gradient(160deg,var(--card2),var(--card));border:2px solid var(--line);border-radius:26px;padding:22px;text-align:center;animation:popIn .35s cubic-bezier(.2,1.5,.4,1)}
.modal h2{font-size:22px;margin-bottom:6px}
.modal p{color:#c7d2fe;margin:6px 0 16px;line-height:1.4}
.m-emoji{font-size:64px;margin-bottom:6px}
.m-btns{display:grid;gap:10px;margin-top:14px}

/* ---------- Result / chest ---------- */
.result{text-align:center;padding:30px 20px calc(30px + var(--sb));justify-content:center;gap:6px}
.res-emoji{font-size:90px;animation:bounce 1.2s infinite}
.result h1{font-size:30px;margin:6px 0}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.res-stats div{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 4px}
.res-stats b{display:block;font-size:22px}
.res-stats small{color:var(--mut);font-weight:700;font-size:12px}
.res-coins{font-size:30px;font-weight:900;color:var(--yellow);margin:6px 0 2px}
.chest{font-size:84px;margin:10px auto 0;display:block;animation:wiggle 1.2s infinite;filter:drop-shadow(0 8px 10px #0008)}
.chest.open{animation:none;transform:scale(1.15)}
.chest-prize{min-height:60px;font-size:20px;font-weight:900;margin:8px 0 14px}
.big-streak{font-size:110px;line-height:1;animation:bounce 1.2s infinite}
.big-num{font-size:64px;font-weight:900;color:#fdba74;text-shadow:0 4px 0 #7c2d12}

/* ---------- Collections ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.item{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:2px solid var(--line);border-radius:18px;padding:14px 10px 12px;text-align:center;box-shadow:0 5px 0 #0006}
.item .ie{font-size:52px;display:block;height:64px;line-height:64px}
.item .ie.flip{transform:scaleX(-1)}
.item b{display:block;font-size:15px;margin-top:4px}
.item .stat{font-size:12px;color:var(--mut);font-weight:700;margin:4px 0 10px}
.item.owned{border-color:#4ade8088}
.item.active{border-color:var(--yellow);box-shadow:0 0 0 3px #facc1555,0 5px 0 #0006}
.item.locked .ie{filter:grayscale(.85) brightness(.8);opacity:.75}
.item .badge{position:absolute;top:8px;right:8px;font-size:11px;font-weight:900;background:var(--yellow);color:#3a2900;border-radius:10px;padding:3px 7px}
.speed{display:flex;gap:3px;justify-content:center;margin:6px 0 2px}
.speed i{width:12px;height:6px;border-radius:3px;background:#0007}
.speed i.on{background:var(--orange)}
.hero-head{display:flex;align-items:center;gap:16px}
.shop-row{display:flex;align-items:center;gap:12px}
.shop-row .se{font-size:36px}
.shop-row .st{flex:1}
.shop-row .st small{display:block;color:var(--mut);font-weight:700}

/* Football cards */
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fcard{position:relative;aspect-ratio:3/4.1;border-radius:14px;padding:8px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  color:#1c1917;box-shadow:0 5px 0 #0007,inset 0 0 0 3px #ffffff66;overflow:hidden}
.fcard::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,#ffffff66 45%,transparent 60%);transform:translateX(-100%);animation:shine 3.5s infinite}
.fcard.r-bronze{background:linear-gradient(160deg,#fdba74,#c2410c)}
.fcard.r-silber{background:linear-gradient(160deg,#f1f5f9,#94a3b8)}
.fcard.r-gold{background:linear-gradient(160deg,#fde68a,#ca8a04)}
.fcard.r-legende{background:linear-gradient(160deg,#f0abfc,#7c3aed 55%,#1e1b4b);color:#fff}
.fc-top{width:100%;display:flex;justify-content:space-between;font-weight:900;font-size:13px}
.fc-rating{font-size:18px}
.fc-emoji{font-size:40px;line-height:1}
.fc-name{font-size:12px;font-weight:900;line-height:1.1}
.fc-nick{font-size:10px;font-weight:700;opacity:.8;font-style:italic}
.fc-count{position:absolute;top:30px;right:6px;background:#0f172a;color:#fff;border-radius:8px;font-size:11px;font-weight:900;padding:2px 6px}
.fcard.empty{background:repeating-linear-gradient(45deg,#1b2560,#1b2560 8px,#1f2a6a 8px,#1f2a6a 16px);color:#ffffff40;box-shadow:inset 0 0 0 2px #ffffff20;justify-content:center;font-size:30px;font-weight:900}
.fcard.empty::before{display:none}
.pack-stage{display:flex;gap:14px;justify-content:center;margin:8px 0 18px;perspective:800px}
.flip{width:130px;aspect-ratio:3/4.1;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1);cursor:pointer}
.flip.open{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .back{display:grid;place-items:center;border-radius:14px;background:linear-gradient(160deg,#22c55e,#065f46);font-size:56px;box-shadow:0 6px 0 #0008,inset 0 0 0 4px #ffffff55;animation:wiggle 1.4s infinite}
.flip .front{transform:rotateY(180deg)}
.flip .front .fcard{height:100%}
.rar{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;margin-top:6px}

/* Trophies */
.troph{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tro{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 6px;text-align:center}
.tro .te{font-size:36px}
.tro b{display:block;font-size:12px;margin-top:4px;line-height:1.15}
.tro small{display:block;font-size:10px;color:var(--mut);margin-top:3px;line-height:1.2}
.tro.no .te{filter:grayscale(1) brightness(.45)}
.tro.no b{color:var(--mut)}
.tro.yes{border-color:#facc1588;background:linear-gradient(180deg,#3b2f0b,var(--card))}
.boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.boxes div{background:#0005;border-radius:14px;padding:10px 4px}
.boxes b{display:block;font-size:24px}
.boxes small{font-size:11px;color:var(--mut);font-weight:800}

/* ---------- Penalty game ---------- */
.game-top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.game-top h3{flex:1;font-size:18px}
.shots{display:flex;gap:5px}
.shots i{width:18px;height:18px;border-radius:50%;background:#0006;border:2px solid #ffffff33;font-style:normal;font-size:10px;display:grid;place-items:center}
.shots i.g{background:var(--green);border-color:#bbf7d0}
.shots i.m{background:var(--red);border-color:#fecaca}
.pitch{position:relative;margin:4px 12px 0;padding:18px 12px 110px;border-radius:24px;
  background:linear-gradient(180deg,#0f3d1f 0%,#15803d 35%,#16a34a 100%);overflow:hidden;box-shadow:inset 0 0 0 3px #ffffff22}
.pitch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 34px,#ffffff10 34px 68px)}
.pitch::after{content:"";position:absolute;left:50%;bottom:62px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff9}
.goal{position:relative;height:200px;border:7px solid #f8fafc;border-bottom:0;border-radius:8px 8px 0 0;
  background:repeating-linear-gradient(45deg,#ffffff22 0 2px,transparent 2px 14px),repeating-linear-gradient(-45deg,#ffffff22 0 2px,transparent 2px 14px),#0b2a16aa;box-shadow:0 6px 16px #0008}
.goal.shake{animation:netShake .5s}
.target{position:absolute;width:46%;min-height:58px;padding:8px 6px;border-radius:16px;background:#ffffffe8;color:#0f172a;font-weight:900;font-size:16px;line-height:1.1;box-shadow:0 4px 0 #0006;border:3px solid #fff;z-index:2}
.target::before{content:"🎯";position:absolute;top:-12px;left:-8px;font-size:18px}
.target.t0{left:3%;top:8px}.target.t1{right:3%;top:8px}.target.t2{left:3%;bottom:10px}.target.t3{right:3%;bottom:10px}
.target.right{background:#bbf7d0;border-color:#22c55e}
.target.wrong{background:#fecaca;border-color:#ef4444}
.keeper{position:absolute;left:50%;top:50%;font-size:64px;transform:translate(-50%,-40%);transition:all .45s cubic-bezier(.3,1.3,.5,1);z-index:3;filter:drop-shadow(0 6px 4px #0008)}
.ball{position:absolute;left:50%;bottom:44px;font-size:46px;margin-left:-23px;z-index:4;filter:drop-shadow(0 6px 4px #0008)}
.pen-q{text-align:center;padding:14px 16px}
.pen-q .muted{font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.pen-q .prompt{justify-content:center;margin:6px 0}
.shout{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:48px;font-weight:900;z-index:6;white-space:nowrap;-webkit-text-stroke:2px #0f172a;text-shadow:0 5px 0 #0f172a,0 0 24px #000;animation:popIn .35s cubic-bezier(.2,1.6,.4,1)}

/* ---------- Race game ---------- */
.track{position:relative;margin:6px 12px;border-radius:22px;padding:14px 0;background:#334155;box-shadow:inset 0 0 0 4px #1e293b;overflow:hidden}
.track::after{content:"";position:absolute;top:0;bottom:0;right:44px;width:16px;background:repeating-conic-gradient(#fff 0 25%,#111 0 50%) 0 0/8px 8px}
.lane{position:relative;height:66px;margin:0 12px;border-bottom:3px dashed #ffffff40}
.lane:last-child{border-bottom:0}
.rcar{position:absolute;left:0;top:50%;font-size:48px;transform:translateY(-55%);transition:left .35s ease-out;filter:drop-shadow(0 5px 3px #0009)}
.rcar .lab{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:900;background:#0009;padding:1px 6px;border-radius:6px;white-space:nowrap}
.flipx{display:inline-block;transform:scaleX(-1)}
.rot45{display:inline-block;transform:rotate(45deg)}
.race-q{padding:12px 16px}
.race-q .prompt{justify-content:center;margin:2px 0 14px;font-size:30px}
.countdown{position:fixed;inset:0;display:grid;place-items:center;font-size:120px;font-weight:900;z-index:80;background:#0008;text-shadow:0 6px 0 #000}
.countdown span{animation:popIn .5s cubic-bezier(.2,1.6,.4,1)}
.rival-info{text-align:center;color:var(--mut);font-weight:800;font-size:13px}

/* ---------- Onboarding / parent ---------- */
.logo{font-size:44px;font-weight:900;letter-spacing:1px;line-height:1;text-shadow:0 5px 0 #0008;margin-top:10px}
.logo span{color:var(--yellow)}
.tagline{color:#c7d2fe;font-weight:800;margin:8px 0 22px}
.field{width:100%;padding:15px 16px;border-radius:16px;border:3px solid var(--line);background:#0b1238;color:#fff;font-size:20px;font-weight:800;outline:none;text-align:center}
.field:focus{border-color:#60a5fa}
.pick-heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 22px;width:100%}
.pick-heroes button{padding:12px 4px;border-radius:18px;background:var(--card);border:3px solid var(--line)}
.pick-heroes button.sel{border-color:var(--yellow);background:#3b2f0b}
.pick-heroes .avatar{margin:0 auto 6px}
.pick-heroes b{font-size:13px}
.install-hint{background:#0b1238;border:2px dashed #3b4aa0;border-radius:16px;padding:12px;font-size:14px;color:#c7d2fe;line-height:1.4;margin-top:18px;text-align:left}
.ptop{display:flex;align-items:center;gap:10px;padding:12px 14px;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:2px solid var(--line)}
.ptop b{flex:1;font-size:18px}
.back{font-weight:800;color:#93c5fd;padding:6px 4px}
.pin-in{width:180px;padding:14px;border-radius:16px;border:3px solid var(--line);background:#0b1238;color:#fff;font-size:30px;letter-spacing:12px;text-align:center;outline:none;margin:16px 0}
.err{color:#fca5a5;font-weight:800;margin-top:10px;min-height:20px}
.parent .content{padding-bottom:60px}
details.pc{background:var(--card);border:2px solid var(--line);border-radius:18px;margin:10px 0;overflow:hidden}
details.pc summary{padding:15px 16px;font-weight:900;font-size:16px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
details.pc summary::-webkit-details-marker{display:none}
details.pc summary::after{content:"▾";margin-left:auto;color:var(--mut)}
details.pc[open] summary::after{content:"▴"}
details.pc .pcb{padding:0 16px 16px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpis div{background:#0005;border-radius:14px;padding:10px 6px;text-align:center}
.kpis b{display:block;font-size:22px}
.kpis small{color:var(--mut);font-size:11px;font-weight:800}
.chart{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:14px;padding-top:8px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.chart i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:#3b4aa0;min-height:3px}
.chart i.goal{background:var(--green)}
.chart small{font-size:9px;color:var(--mut);font-weight:700}
.wl{width:100%;border-collapse:collapse;font-size:14px}
.wl td{padding:7px 4px;border-bottom:1px solid #ffffff12;vertical-align:top}
.wl td:last-child{text-align:right;white-space:nowrap}
.stars{color:var(--yellow);letter-spacing:1px}
.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.row label{flex:1;font-weight:700}
.row select,.row input[type=text]{background:#0b1238;color:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 10px;font-weight:700;max-width:60%}
.sw{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:20px;background:#0007;border:2px solid var(--line);position:relative;flex:none;cursor:pointer;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.sw:checked{background:var(--green);border-color:#86efac}
.sw:checked::after{left:25px}
textarea.ta{width:100%;min-height:150px;background:#0b1238;color:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;font-size:15px;line-height:1.4;resize:vertical}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.note{font-size:13px;color:var(--mut);line-height:1.45;margin:8px 0}
code{background:#0007;padding:2px 6px;border-radius:6px;font-size:13px}

/* ---------- Animations ---------- */
@keyframes pulse{0%,100%{box-shadow:0 5px 0 #0006,0 0 0 0 #facc1599}50%{box-shadow:0 5px 0 #0006,0 0 0 12px #facc1500}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal{animation-name:popInM}
.countdown span{animation-name:popInM}
@keyframes popInM{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes popOut{to{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes netShake{0%,100%{transform:none}25%{transform:scale(1.03,0.97)}50%{transform:scale(.98,1.03)}75%{transform:scale(1.01,.99)}}
@media (max-width:360px){.prompt{font-size:27px}.opt{font-size:17px}.tile{width:44px;height:50px}.slot{width:34px;height:46px}}

/* ---------- Sammelkarten verdienen ---------- */
.pack-stage{flex-wrap:wrap}
.flipwrap{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(130px,27vw)}
.flipwrap .flip{width:100%}
.flipwrap .rar{opacity:0;transition:opacity .3s .4s;margin:0}
.flipwrap .flip.open ~ .rar{opacity:1}
.why{font-size:11px;color:var(--mut);font-weight:700;text-align:center;line-height:1.2}
.earn-list{display:grid;gap:6px;margin-top:10px}
.earn-list div{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;background:#0004;border-radius:12px;padding:8px 10px}
.earn-list span{font-size:20px;width:26px;text-align:center;flex:none}
.earn-list em{margin-left:auto;font-style:normal;color:var(--yellow);font-size:12px;font-weight:800;text-align:right}
.rchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rchip{font-size:11px;font-weight:900;padding:4px 9px;border-radius:10px;color:#1c1917}
.rchip.r-bronze{background:#fdba74}.rchip.r-silber{background:#e2e8f0}.rchip.r-gold{background:#fde68a}.rchip.r-legende{background:#c084fc;color:#fff}
.fcard.empty.e-silber{box-shadow:inset 0 0 0 2px #cbd5e170;color:#cbd5e170}
.fcard.empty.e-gold{box-shadow:inset 0 0 0 2px #facc15aa;color:#facc1590}
.fcard.empty.e-legende{box-shadow:inset 0 0 0 2px #c084fcbb;color:#c084fcaa}

/* ---------- Liga ---------- */
.liga-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(160deg,#9a3412,#4c1d95);border-color:#f59e0b99;color:#fff}
.lc-go{margin-left:auto;font-size:30px;color:#fde68a}
.liga-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.code-big{font-size:34px;font-weight:900;letter-spacing:7px;color:var(--yellow);font-family:ui-monospace,Menlo,monospace}
.seg{display:flex;background:#0006;border-radius:14px;padding:4px;margin:12px 0}
.seg button{flex:1;padding:10px;border-radius:10px;font-weight:900;font-size:14px;color:var(--mut)}
.seg button.on{background:var(--blue);color:#fff}
.lrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--card);border:2px solid var(--line);margin-bottom:8px}
.lrow.me{border-color:var(--yellow);background:#3b2f0b}
.lrank{width:34px;text-align:center;font-size:22px;font-weight:900;flex:none}
.avatar.sm{width:38px;height:38px;font-size:20px}
.lname{flex:1;min-width:0}
.lname b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lname small{color:var(--mut);font-size:12px;font-weight:700}
.lpts{text-align:right;font-weight:900;font-size:20px;color:var(--yellow)}
.lpts small{display:block;font-size:10px;color:var(--mut)}
.you{font-size:10px;background:var(--yellow);color:#3a2900;padding:2px 6px;border-radius:8px;vertical-align:middle}
.help-link{display:block;text-align:center;margin:18px auto 0;color:#93c5fd;font-weight:800;text-decoration:none;font-size:15px}
.nav button{min-width:50px;padding:4px 3px}
.nav button span{font-size:23px}
.nav button small{font-size:10px}

/* ---------- Freischaltung ---------- */
.unlock-hero{font-size:64px;text-align:center}
.price-tag{display:inline-block;background:var(--yellow);color:#3a2900;font-weight:900;border-radius:12px;padding:4px 12px;font-size:18px}
.perk{display:flex;gap:10px;align-items:center;font-weight:700;font-size:15px;margin:7px 0}
.perk span{font-size:20px;width:28px;text-align:center}

/* ---------- Profilbild ---------- */
button.avatar{border:0;padding:0;cursor:pointer}
.av-edit{position:absolute;right:-4px;bottom:-4px;font-size:12px;background:#0b1238;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;box-shadow:0 0 0 2px #2c3b8c}
.icon-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:6px 0 12px}
.icon-grid button{font-size:20px;aspect-ratio:1;border-radius:10px;background:#0b1238;border:2px solid transparent;min-width:0;overflow:hidden}
.icon-grid button.sel{border-color:var(--yellow);background:#3b2f0b}
.color-row{display:flex;justify-content:center;gap:8px}
.color-row button{width:30px;height:30px;border-radius:50%;border:3px solid transparent}
.color-row button.sel{border-color:#fff}

/* ---------- Album: neu ---------- */
.nav button.dot{position:relative}
.nav button.dot::after{content:"";position:absolute;top:3px;right:12px;width:11px;height:11px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #0b1238}
.newest{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 4px}
.newest .fcard{width:92px;flex:none}
.fcard.is-new{box-shadow:0 0 0 3px #ef4444,0 5px 0 #0007}
.fcard.is-new::after{content:"NEU";position:absolute;top:24px;left:50%;transform:translateX(-50%);background:#ef4444;color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:8px;z-index:2}

/* ---------- Vokabeln eintragen / Freigabe ---------- */
.lab{display:block;font-weight:800;margin:14px 2px 6px;color:#c7d2fe}
.field.left{text-align:left;font-size:18px}
.spell{font-size:13.5px;font-weight:700;margin:6px 2px 4px;min-height:18px;color:#fde68a;line-height:1.5}
.spell .ok{color:#86efac}
.fix{display:inline-block;margin:3px 4px 0 2px;padding:4px 10px;border-radius:10px;background:#1d4ed8;color:#fff;font-weight:800;font-size:13px}
.home-links{display:flex;flex-direction:column;align-items:center;margin-top:16px}
.linkbtn{color:#93c5fd;font-weight:800;font-size:15px;padding:8px}
.pill{display:inline-block;background:#facc15;color:#3a2900;border-radius:10px;padding:1px 8px;font-size:12px;margin-left:4px}
.appr{background:#0005;border-radius:14px;padding:10px 12px;margin:10px 0}
.appr input{width:100%;margin:5px 0;background:#0b1238;color:#fff;border:2px solid var(--line);border-radius:10px;padding:9px 10px;font-weight:700;font-size:15px}
.appr-h{margin-bottom:2px}

/* ---------- Start: Fuchs-Logo + Junge/Mädchen ---------- */
.fox-logo{font-size:76px;line-height:1;filter:drop-shadow(0 8px 10px #0008);animation:bounce 2.4s ease-in-out infinite}
.pick-theme{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.pick-theme button{padding:14px 8px;border-radius:18px;background:var(--card);border:3px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px}
.pick-theme button span{font-size:40px}
.pick-theme button b{font-size:16px}
.pick-theme button.sel{border-color:var(--yellow);background:#3b2f0b}
.pick-theme.small-pt button{padding:8px;flex-direction:row;justify-content:center;gap:8px}
.pick-theme.small-pt button span{font-size:22px}

/* ---------- Mädchen-Design ---------- */
body.t-m{--bg:#1a0b2e;--bg2:#2a0f45;--card:#3a1557;--card2:#4b1c6e;--line:#6d2a8f;--mut:#f0c8f7;
  background:radial-gradient(900px 520px at 50% -8%,#a3267f 0%,#1a0b2e 62%) fixed}
body.t-m .top{background:linear-gradient(var(--bg) 70%,transparent)}
body.t-m .mission{background:linear-gradient(160deg,#c026d3,#7c3aed 60%,#3b0764);border-color:#f0abfc}
body.t-m .mission .sub,body.t-m .station small,body.t-m .plan-info{color:#fbe3ff}
body.t-m .nav{background:#2a0f45f2}
body.t-m .ex-label{color:#f9a8d4}
body.t-m .intro-card{background:linear-gradient(160deg,#a21caf,#4c1d95);border-color:#f0abfc}
body.t-m .pfill{background:linear-gradient(90deg,#db2777,#f472b6)}
body.t-m .xpbar i{background:linear-gradient(90deg,#f472b6,#fde68a)}
body.t-m .game-tile.race{background:linear-gradient(160deg,#ec4899,#9d174d)}
body.t-m .game-tile.pen{background:linear-gradient(160deg,#10b981,#065f46)}
body.t-m .liga-card{background:linear-gradient(160deg,#db2777,#6d28d9);border-color:#f9a8d4}
body.t-m .ans-in,body.t-m .field,body.t-m .slot,body.t-m .pin-in,body.t-m textarea.ta,body.t-m .appr input,body.t-m .icon-grid button{background:#2a0f45}
body.t-m .opt.sel,body.t-m .mcard.sel{border-color:#f472b6;background:#831843}
body.t-m .station .dot{background:#5b2178;border-color:#a855f7}
body.t-m .chal{background:var(--card)}
body.t-m .help-link,body.t-m .linkbtn,body.t-m .back{color:#f9a8d4}
body.t-m .ptop{background:var(--bg)}

/* Feinschliff Vokabelfuchs */
.logo{font-size:clamp(30px,10vw,42px)}
body.t-m .pick-theme button.sel,body.t-m .pick-heroes button.sel,body.t-m .icon-grid button.sel{background:#831843;border-color:#fde047}
body.t-m .item.active{box-shadow:0 0 0 3px #f9a8d455,0 5px 0 #0006}
.field.wrong{border-color:#f87171;animation:shake .4s}
.pick-theme.wrong{animation:shake .4s}

/* ---------- Danke-Seite, Kauf-Suche, Listen-Upload ---------- */
.danke{max-width:560px;margin:0 auto}
.danke .fox-logo{margin:10px auto 0}
.code-big{margin:10px auto 8px;min-height:40px;display:flex;align-items:center;justify-content:center}
.code-txt{font-size:28px;font-weight:900;letter-spacing:3px;background:#0b1238;border:3px dashed var(--yellow);border-radius:14px;padding:8px 16px;color:var(--yellow)}
ol.steps{margin:10px 0 10px;padding-left:22px;line-height:1.5}
ol.steps li{margin:8px 0}
.hl{background:rgba(250,204,21,.15);color:var(--yellow);font-weight:800;border-radius:6px;padding:1px 6px}
.linkish{background:none;border:none;color:#93c5fd;text-decoration:underline;font-weight:700;font-size:14px;cursor:pointer;padding:4px}
.upl{background:rgba(255,255,255,.04);border:2px dashed var(--line);border-radius:14px;padding:14px;margin:10px 0}
.upl-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.igs-row{display:flex;gap:8px;margin-top:10px}
.igs-row input{flex:1;min-width:0;background:#0b1238;color:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 10px;font-weight:700}
.imp-box{background:rgba(34,197,94,.08);border:2px solid #22c55e;border-radius:14px;padding:12px;margin:10px 0}
.imp-box .wl{margin-top:8px}
details.sub{border-top:1px solid var(--line);margin-top:12px;padding-top:4px}
details.sub summary{font-weight:800;font-size:14px;padding:10px 0;cursor:pointer;color:var(--mut);list-style:none}
details.sub summary::-webkit-details-marker{display:none}
details.sub summary::before{content:"▸ "}
details.sub[open] summary::before{content:"▾ "}
details.pc details.sub summary::after{content:none}
body.t-m .code-txt,body.t-m .igs-row input{background:#2a0f45}

/* Links in Hinweisen und im Eltern-Bereich gut lesbar */
.note a,.pcb a,.card a:not(.btn){color:#93c5fd;font-weight:800;text-decoration:underline;text-underline-offset:2px}
body.t-m .note a,body.t-m .pcb a,body.t-m .card a:not(.btn){color:#f0abfc}
/* Danke-Seite: Fuchs und „Zur App“ mittig */
.danke .fox-logo{display:block;width:fit-content;margin:10px auto 0}
.danke > a.btn{display:flex;width:fit-content;min-width:200px;margin:8px auto 0}

/* ---------- Fuchs-Maskottchen ---------- */
.fox{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.fox-say{display:flex;align-items:flex-end;gap:10px;margin:6px 0 4px}
.fox-say .fox{width:62px;flex:0 0 62px;filter:drop-shadow(0 6px 10px #0007);animation:foxbob 3.2s ease-in-out infinite}
.fox-say .bubble{position:relative;flex:1;background:#fff;color:#1e1b4b;font-weight:800;font-size:15px;line-height:1.35;border-radius:18px 18px 18px 6px;padding:11px 14px;box-shadow:0 6px 18px #0005}
.fox-say .bubble::before{content:"";position:absolute;left:-7px;bottom:12px;border-style:solid;border-width:7px 8px 7px 0;border-color:transparent #fff transparent transparent}
@keyframes foxbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.fb-head .fb-fox{width:46px;flex:0 0 46px;font-size:0}
.fb-head .fb-fox .fox{animation:popIn .35s cubic-bezier(.2,1.5,.4,1);filter:drop-shadow(0 4px 6px #0006)}
.intro-card{position:relative}
.intro-card .intro-fox{position:absolute;width:52px;right:12px;top:10px;transform:rotate(10deg);filter:drop-shadow(0 6px 10px #0007)}
.res-fox{position:relative;width:128px;margin:0 auto 6px;animation:bounce 1.2s infinite}
.res-fox .res-badge{position:absolute;right:-16px;bottom:-6px;font-size:46px;filter:drop-shadow(0 4px 6px #0007)}
.goal-fox{display:flex;align-items:flex-end;justify-content:center;gap:2px}
.goal-fox .fox{width:104px;filter:drop-shadow(0 8px 12px #0007)}
.goal-fox .big-streak{font-size:96px}
.fox-logo .fox{width:104px;margin:0 auto}
.unlock-hero .fox{width:88px;margin:0 auto 4px}

/* Tierstall: bunte Kacheln hinter den Tieren */
.item .ie.tile{width:78px;height:78px;line-height:78px;margin:0 auto 2px;border-radius:50%;font-size:46px;background:radial-gradient(circle at 35% 28%,#ffffff 0%,var(--tb) 62%);box-shadow:inset 0 -5px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.35);border:3px solid #fff}
.item.locked .ie.tile{filter:saturate(.8);opacity:.95}