/* Dunkel-elegant mit verspielten Akzenten (v15). Dunkel ist die Basis. */
:root{
  --bg:#131019; --bg2:#1c1730; --surface:#1e1b2b; --surface2:#272338;
  --ink:#f1eefb; --ink-soft:#a6a1bd; --line:#322d45;
  --accent:#ff6b6b; --accent2:#ff9a6b; --accent-soft:#2c1e2b; --accent-glow:rgba(255,107,107,.38);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --gold:#fbbf24;
  --r1:#f87171; --r2:#fbbf24; --r3:#34d399; --r4:#5b9dff;
}
body[data-lang="es"]{--accent:#ff6b6b; --accent2:#ff9a6b; --accent-soft:#2c1e26; --accent-glow:rgba(255,107,107,.38);}
body[data-lang="pt"]{--accent:#34d399; --accent2:#6ee7b7; --accent-soft:#132a22; --accent-glow:rgba(52,211,153,.34);}
body[data-lang="it"]{--accent:#5b9dff; --accent2:#8ab8ff; --accent-soft:#162336; --accent-glow:rgba(91,157,255,.34);}
body[data-lang="fr"]{--accent:#a78bfa; --accent2:#c9b3ff; --accent-soft:#211c38; --accent-glow:rgba(167,139,250,.38);}
body[data-lang="en"]{--accent:#fbbf24; --accent2:#fcd34d; --accent-soft:#2a2313; --accent-glow:rgba(251,191,36,.32);}
*{box-sizing:border-box;}
[hidden]{display:none !important;}  /* hidden-Attribut gewinnt IMMER (sonst überschreiben display:flex-Klassen es) */
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,sans-serif; line-height:1.5;
  max-width:640px; margin:0 auto;
  /* iOS: Notch/Home-Indikator respektieren (safe-area) */
  padding:env(safe-area-inset-top) calc(.9rem + env(safe-area-inset-right))
          calc(5rem + env(safe-area-inset-bottom)) calc(.9rem + env(safe-area-inset-left));
  -webkit-text-size-adjust:100%; overscroll-behavior-y:contain;
}
header{padding:.8rem 0 .4rem;}
/* iOS zoomt Formulare, wenn Schrift < 16px -> Mindestgröße erzwingen */
input, select, textarea{font-size:16px;}
.topbar{display:flex; justify-content:space-between; align-items:center;}
.brand{display:flex; gap:.6rem; align-items:center;}
.logo{
  background:var(--accent-soft); border:1px solid var(--line); border-radius:12px;
  width:2.5rem; height:2.5rem; display:grid; place-items:center; font-size:1.35rem; cursor:pointer;
}
.title{font-weight:800; font-size:1.1rem;}
.sub{font-size:.72rem; color:var(--ink-soft);}
.header-right{display:flex; gap:.45rem; align-items:center;}
.pill{
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:.25rem .6rem; font-size:.85rem; font-weight:700;
}
.goalbar{
  position:relative; height:1.35rem; background:var(--surface); border:1px solid var(--line);
  border-radius:99px; margin-top:.6rem; overflow:hidden;
}
.goalfill{
  height:100%; width:0%; background:var(--accent); border-radius:99px;
  transition:width .4s ease;
}
.goaltext{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
}
nav{display:flex; gap:.3rem; margin:.7rem 0 1rem;}
.tab{
  flex:1; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  padding:.45rem .2rem; border-radius:12px; font-size:.72rem; font-weight:600; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.1rem; position:relative;
}
.tab span{font-size:.68rem;}
.tab.active{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);}
.badge{
  position:absolute; top:-.35rem; right:.4rem;
  background:var(--accent); color:#fff; border-radius:99px; padding:0 .4rem;
  font-size:.68rem; font-weight:700;
}
.statline{color:var(--ink-soft); font-size:.85rem; margin:.2rem 0 .8rem;}
.card-box{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:1.4rem 1.2rem; text-align:center;
}
.topic{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.3rem;}
.term-row{display:flex; justify-content:center; align-items:center; gap:.5rem; margin:.4rem 0;}
.term{font-size:1.9rem; font-weight:800; text-wrap:balance;}
.prompt-de{font-size:1.4rem; font-weight:700; margin:.5rem 0;}
.new-flag{color:var(--warn); font-size:.7rem; font-weight:700; letter-spacing:.1em; margin:.2rem 0 .5rem;}
.speak{
  background:none; border:1px solid var(--line); border-radius:99px;
  font-size:1.05rem; padding:.25rem .55rem; cursor:pointer; color:var(--ink);
}
.speak.small{font-size:.85rem; padding:.1rem .4rem;}
.primary{
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:.7rem 1.3rem; font-size:1rem; font-weight:700; cursor:pointer;
}
.primary:disabled{opacity:.5;}
.ghost{background:none; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:.5rem .8rem; cursor:pointer;}
.btnrow{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem;}
.translation{font-size:1.25rem; font-weight:600; margin:.8rem 0 .3rem;}
.example{margin:.4rem 0 .1rem; font-style:italic;}
.example-de{font-size:.85rem; color:var(--ink-soft); margin-top:.15rem;}
.rating-row{display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-top:1.1rem;}
.rate{
  border:none; border-radius:14px; padding:.6rem .2rem; color:#fff; font-weight:700;
  font-size:1.25rem; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:.1rem; transition:transform .08s ease;
}
.rate span{font-size:.72rem;}
.rate:active{transform:scale(.93);}
.r1{background:var(--r1);} .r2{background:var(--r2);} .r3{background:var(--r3);} .r4{background:var(--r4);}
.mc-grid{display:grid; grid-template-columns:1fr; gap:.5rem; margin-top:.9rem;}
.mc{
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px;
  padding:.75rem .8rem; font-size:1rem; cursor:pointer; text-align:left; color:var(--ink);
}
.mc.correct{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, var(--surface));}
.mc.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 14%, var(--surface));}
.type-row{display:flex; gap:.5rem; margin-top:.9rem;}
.type-row input{flex:1; font-size:1.05rem; padding:.7rem .8rem; border-radius:12px;}
.feedback{margin-top:1rem; padding:.8rem; border-radius:12px; font-size:.95rem;}
.feedback.good{background:color-mix(in srgb, var(--ok) 14%, var(--surface)); border:1px solid var(--ok);}
.feedback.bad{background:color-mix(in srgb, var(--bad) 12%, var(--surface)); border:1px solid var(--bad);}
.xp-pop{color:var(--gold); font-weight:800;}
.summary p{margin:.4rem 0;}
.summary .big{font-size:1.5rem; font-weight:800;}
.speak-target{font-size:1.5rem; font-weight:700; margin:.6rem 0 .2rem; text-wrap:balance;}
.speak-result{margin-top:1rem; padding:.8rem; border-radius:12px; background:var(--bg); border:1px solid var(--line); font-size:.95rem;}
.speak-result .score{font-size:1.6rem; font-weight:800;}
.speak-result .w-ok{color:var(--ok); font-weight:600;}
.speak-result .w-bad{color:var(--bad); font-weight:700; text-decoration:underline dotted;}
.micinfo{text-align:left; margin-top:.8rem; font-size:.9rem;}
.micinfo code{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:.1rem .35rem; word-break:break-all;}
.micinfo ol{padding-left:1.2rem;}
#speakRec.rec, #exRec.rec{background:var(--bad); color:#fff; animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.6;}}
.hint{color:var(--ink-soft); font-size:.75rem; text-align:center; margin-top:.9rem;}
.mode-row{display:flex; gap:.5rem; justify-content:space-between; margin-bottom:.6rem;}
.scenario-row{margin-bottom:.6rem;}
.scenario-row select{width:100%;}
.scenario-row[hidden]{display:none;}
select,input{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:.45rem .55rem; font-size:.95rem;
}
.llm-hint{background:var(--accent-soft); border-radius:10px; padding:.6rem .8rem; font-size:.85rem; margin-bottom:.6rem;}
.messages{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:.8rem; min-height:42vh; max-height:54vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:.55rem;
}
.msg{max-width:85%; padding:.55rem .8rem; border-radius:12px; font-size:.95rem; white-space:pre-wrap; word-wrap:break-word;}
.msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px;}
.msg.bot{align-self:flex-start; background:var(--accent-soft); border-bottom-left-radius:4px;}
#chatForm{display:flex; gap:.45rem; margin-top:.7rem;}
#chatInput{flex:1; padding:.7rem .8rem; border-radius:12px;}
#micBtn{background:var(--surface); border:1px solid var(--line); border-radius:12px; font-size:1.1rem; padding:0 .7rem; cursor:pointer;}
#micBtn.rec{background:var(--bad); border-color:var(--bad);}
.expand-row{display:flex; gap:.45rem; margin-bottom:.7rem; flex-wrap:wrap;}
#topicInput{flex:1; min-width:9rem;}
.word-list{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.word-row{
  display:flex; justify-content:space-between; gap:.6rem;
  padding:.5rem .8rem; border-bottom:1px solid var(--line); font-size:.9rem;
}
.word-row:last-child{border-bottom:none;}
.word-row .es{font-weight:600;}
.word-row .de{color:var(--ink-soft); flex:1;}
.word-row .due{font-size:.75rem; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums;}
.word-row .due.now{color:var(--accent); font-weight:700;}
.word-row .del{
  background:none; border:none; color:var(--ink-soft); cursor:pointer;
  font-size:.85rem; padding:0 .1rem; line-height:1;
}
.word-row .del:hover{color:var(--bad);}
.search-row{margin-bottom:.6rem;}
.search-row input{width:100%; padding:.6rem .8rem; border-radius:12px; font-size:1rem;}
.bootstrap{margin-bottom:.8rem;}
.pron-note{
  display:inline-block; background:var(--accent-soft); border-radius:8px;
  padding:.2rem .6rem; font-size:.85rem; margin:.3rem 0;
}
.stats-box{font-size:.9rem;}
.stat-lang{display:flex; justify-content:space-between; gap:.6rem; padding:.25rem 0; flex-wrap:wrap;}
.stat-label{font-size:.72rem; color:var(--ink-soft); margin:.7rem 0 .25rem; letter-spacing:.04em;}
.bars{display:flex; gap:3px; align-items:flex-end; height:3rem;}
.bar{flex:1; background:var(--bg); border-radius:4px 4px 2px 2px; position:relative; height:100%; display:flex; align-items:flex-end; overflow:hidden;}
.bar .fill{width:100%; background:var(--accent); opacity:.55; border-radius:4px 4px 0 0; min-height:2px;}
.bar.today .fill{opacity:1;}
/* --- v5: Niveau-Karten --- */
.lefty{text-align:left;}
.level-grid{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.levelbtn{
  background:var(--bg); border:1.5px solid var(--line); border-radius:14px;
  padding:.7rem .6rem; cursor:pointer; color:var(--ink); text-align:left;
  font-size:1rem; line-height:1.3; transition:transform .08s ease;
}
.levelbtn:active{transform:scale(.96);}
.levelbtn b{display:block; margin-top:.15rem; font-size:.9rem;}
.levelbtn small{display:block; color:var(--ink-soft); font-size:.72rem; margin-top:.15rem;}
.levelbtn.active{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);}
.levelbtn:first-child{grid-column:1 / -1;}
/* --- v5: Chat-Korrekturen --- */
.msg.corrections{
  align-self:stretch; max-width:100%; background:var(--surface);
  border:1.5px solid var(--warn); border-radius:12px;
}
.k-title{font-size:.72rem; font-weight:800; letter-spacing:.06em; color:var(--warn); margin-bottom:.35rem;}
.k-row{padding:.3rem 0; border-top:1px dashed var(--line); font-size:.95rem;}
.k-row:first-of-type{border-top:none;}
.k-falsch{color:var(--bad); text-decoration:line-through; font-weight:600;}
.k-pfeil{color:var(--ink-soft);}
.k-richtig{color:var(--ok); font-weight:800;}
.k-grund{font-size:.78rem; color:var(--ink-soft); margin-top:.1rem;}
/* --- v5: spielerischer --- */
.primary{transition:transform .08s ease, filter .15s ease;}
.primary:active{transform:scale(.95);}
.primary:hover{filter:brightness(1.07);}
.goalfill{background:linear-gradient(90deg, var(--accent), var(--gold));}
.card-box{animation:cardin .22s ease-out;}
@keyframes cardin{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
.xp-pop{display:inline-block; animation:xppop .5s ease-out;}
@keyframes xppop{0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.25);} 100%{transform:scale(1); opacity:1;}}
.mc{transition:transform .08s ease;}
.mc:active{transform:scale(.97);}
@media (prefers-reduced-motion: reduce){
  .card-box,.xp-pop{animation:none;}
}
/* --- v7: Name + Reset --- */
#setName{flex:1; min-width:8rem;}
.small-btn{padding:.5rem .9rem; font-size:.9rem;}
.set-group.danger{border-color:var(--bad);}
.set-group.danger h3{color:var(--bad);}
.danger-btn{
  background:none; border:1.5px solid var(--bad); color:var(--bad);
  border-radius:12px; padding:.6rem 1rem; font-weight:700; cursor:pointer; width:100%;
  transition:background .15s ease, color .15s ease;
}
.danger-btn:hover{background:var(--bad); color:#fff;}
.danger-btn:active{transform:scale(.97);}
.reset-langs{display:flex; flex-direction:column; gap:.45rem; margin:.3rem 0 .7rem;}
.reset-langs[hidden]{display:none;}
.rl-item{display:flex; align-items:center; gap:.55rem; font-size:.95rem; cursor:pointer;}
.rl-item input{width:auto; margin:0; transform:scale(1.15);}
/* --- iOS-Installations-Hinweis --- */
.ios-install{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(.7rem + env(safe-area-inset-bottom));
  width:calc(100% - 1.6rem); max-width:600px; z-index:250;
  background:var(--surface); border:1px solid var(--accent); border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.18); padding:.7rem .9rem;
  display:flex; align-items:center; gap:.6rem; font-size:.85rem;
}
.ios-install[hidden]{display:none;}
.ios-install b{color:var(--accent);}
.ios-install button{background:none; border:none; color:var(--ink-soft); font-size:1rem; cursor:pointer; padding:.2rem;}
/* --- v8: Auth-Overlay --- */
.auth-overlay{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:grid; place-items:center; padding:1.2rem;
}
.auth-overlay[hidden]{display:none;}  /* sonst schlaegt display:grid das hidden-Attribut */
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:1.8rem 1.4rem; width:100%; max-width:360px; text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
}
.auth-logo{width:5.5rem; height:5.5rem; border-radius:22%; display:block; margin:0 auto;}
.auth-title{font-size:1.5rem; font-weight:800; margin:.4rem 0 .1rem;}
.auth-sub{color:var(--ink-soft); font-size:.85rem; margin:0 0 1.2rem;}
.auth-form{display:flex; flex-direction:column; gap:.6rem;}
.auth-form input{padding:.75rem .85rem; border-radius:12px; font-size:1rem; width:100%;}
.auth-btn{width:100%; margin-top:.3rem;}
.auth-info{font-size:.82rem; color:var(--ink-soft); text-align:left; margin:0 0 .3rem; line-height:1.4;}
.auth-err{color:var(--bad); font-size:.82rem; margin:.3rem 0 0;}
.auth-switch{font-size:.82rem; color:var(--ink-soft); margin:1rem 0 0; cursor:pointer;}
.auth-switch b{color:var(--accent);}
/* --- v8: Admin/Einladungen --- */
.invite-result{margin-top:.7rem; padding:.7rem; background:var(--bg); border:1px solid var(--line); border-radius:10px; font-size:.85rem; text-align:left;}
.invite-code{display:inline-block; font-size:1.1rem; font-weight:800; letter-spacing:.05em; color:var(--accent); margin:.3rem .5rem .3rem 0; word-break:break-all;}
.profile-list{margin-top:.8rem;}
.pl-title{font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; margin-bottom:.3rem;}
.pl-row{display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; border-top:1px solid var(--line); font-size:.92rem;}
.pl-row:first-of-type{border-top:none;}
.pl-tag{font-size:.72rem; color:var(--gold); font-weight:700;}
.pl-del{background:none; border:none; color:var(--bad); cursor:pointer; font-size:.8rem;}
.set-group{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin-bottom:.8rem;}
.set-group h3{margin:.1rem 0 .6rem; font-size:.95rem;}
.set-row{display:flex; align-items:center; gap:.6rem; margin:.45rem 0; font-size:.92rem; flex-wrap:wrap;}
.set-row label{flex:1; min-width:10rem;}
.lang-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.langbtn{
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px;
  padding:.7rem .5rem; font-size:.95rem; font-weight:600; cursor:pointer; color:var(--ink);
}
.langbtn.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:99;}
.toast{
  position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:10px;
  font-size:.9rem; max-width:90%; z-index:100;
}
button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion: no-preference){
  .msg{animation:pop .15s ease-out;}
  @keyframes pop{from{opacity:.4; transform:translateY(4px);} to{opacity:1; transform:none;}}
}

/* ==================== v15: DUNKEL-ELEGANT + VERSPIELT ==================== */
html{background:var(--bg);}
body{background:radial-gradient(135% 55% at 50% -6%, var(--bg2), var(--bg) 52%);}
body{font-family:"SF Pro Rounded","ui-rounded",system-ui,"Segoe UI",Roboto,sans-serif;}

/* Kopf */
.logo{
  background:var(--surface2); border:1px solid var(--line);
  box-shadow:0 0 0 1px var(--accent-glow), 0 8px 22px -8px var(--accent-glow);
}
.title{
  background:linear-gradient(110deg, var(--ink) 30%, var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-.015em; font-weight:800;
}
.pill{background:var(--surface2); border-color:var(--line);}
#levelBadge{box-shadow:0 0 14px -4px var(--accent-glow);}
.goalbar{background:var(--surface2); border-color:var(--line); height:1.5rem;}
.goalfill{background:linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow:0 0 14px var(--accent-glow);}

/* Navigation */
nav .tab{background:var(--surface); border-color:var(--line);}
.tab.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 8px 20px -8px var(--accent-glow);
}
.badge{background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 3px 10px -3px var(--accent-glow);}

/* Karten & Flächen */
.card-box{
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 14px 40px -16px rgba(0,0,0,.65);
}
.set-group{background:linear-gradient(180deg, var(--surface2), var(--surface)); border-color:var(--line); border-radius:16px;}
.messages{background:var(--surface2); border-color:var(--line);}
.word-list, .mc, .langbtn, .levelbtn, .set-group .invite-result, .speak-result, .micinfo{background:var(--surface2);}

/* Buttons */
.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff;
  box-shadow:0 10px 24px -10px var(--accent-glow);
}
.primary:hover{filter:brightness(1.08); box-shadow:0 12px 28px -8px var(--accent-glow);}
.ghost{background:var(--surface2); border-color:var(--line);}
.rate{box-shadow:0 8px 18px -10px rgba(0,0,0,.6);}
.rate:hover{filter:brightness(1.1);}

/* Chat */
.msg.bot{background:var(--surface); border:1px solid var(--line);}
.msg.user{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; border:none;}

/* Auswahl-Buttons aktiv */
.langbtn.active, .levelbtn.active{
  border-color:transparent; color:var(--ink);
  background:linear-gradient(160deg, var(--accent-soft), var(--surface2));
  box-shadow:inset 0 0 0 1.5px var(--accent), 0 6px 18px -10px var(--accent-glow);
}

/* Auth */
.auth-overlay{background:radial-gradient(135% 55% at 50% -6%, var(--bg2), var(--bg) 52%);}
.auth-card{
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--line);
  box-shadow:0 24px 70px -24px rgba(0,0,0,.75), 0 0 0 1px var(--accent-glow);
}
.auth-logo{filter:drop-shadow(0 6px 20px var(--accent-glow));}
.auth-title{
  background:linear-gradient(110deg, var(--ink) 30%, var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Toast dunkel */
.toast{background:var(--surface2); color:var(--ink); border:1px solid var(--line);}

/* ===== Tugo (Maskottchen) + Abzeichen, v18 ===== */
.tugo-card{
  display:flex; align-items:center; gap:14px; padding:12px;
  background:linear-gradient(160deg, var(--surface2), var(--surface));
  border:1px solid var(--line); border-radius:16px;
}
.tugo-card img{
  width:110px; height:110px; flex:0 0 auto;
  filter:drop-shadow(0 8px 22px var(--accent-glow));
}
.tugo-info{min-width:0;}
.tugo-stage{font-weight:800; letter-spacing:.2px;}
.tugo-line{
  margin-top:4px; font-size:.92em; color:var(--muted); font-style:italic;
}
.tugo-line::before{content:"\201E";} .tugo-line::after{content:"\201C";}
.tugo-progress{margin-top:6px; font-size:.85em; color:var(--muted);}
.badges-title{margin:14px 2px 8px; font-size:.95em; color:var(--ink);}
.badge-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
@media (max-width:420px){ .badge-grid{grid-template-columns:repeat(3, 1fr);} }
.badge-tile{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); text-align:center;
}
.badge-tile img{width:52px; height:52px;}
.badge-tile span{font-size:.68em; color:var(--muted); line-height:1.2;}
.badge-tile.unlocked{
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--accent), 0 6px 16px -10px var(--accent-glow);
}
.badge-tile.unlocked span{color:var(--ink);}
.badge-tile.locked img{filter:grayscale(1) brightness(.45); opacity:.75;}

/* ===== Tugo-Buddy (schwebend) + Sprechblase, v19 ===== */
.pill{cursor:pointer; -webkit-tap-highlight-color:transparent;}
button.pill{font-family:inherit; color:var(--ink);}
button.pill:active{transform:scale(.94);}
.tugo-buddy{
  position:fixed; z-index:150;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  right:calc(50% - min(320px, 50vw) + .8rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:.4rem;
  pointer-events:none;
}
.tugo-buddy-btn{
  pointer-events:auto; border:none; background:transparent; padding:0; cursor:pointer;
  width:72px; height:72px; filter:drop-shadow(0 6px 16px var(--accent-glow));
  animation:tugoIdle 4.5s ease-in-out infinite; transition:transform .15s;
}
.tugo-buddy-btn:active{transform:scale(.9);}
.tugo-buddy-btn img{width:100%; height:100%; object-fit:contain; display:block;}
@keyframes tugoIdle{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.tugo-buddy-btn.wave{animation:tugoWave .6s ease;}
@keyframes tugoWave{0%,100%{transform:rotate(0);}25%{transform:rotate(-9deg);}75%{transform:rotate(9deg);}}
.tugo-bubble{
  pointer-events:auto; max-width:min(240px, 66vw); margin-right:6px;
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--line); border-radius:16px 16px 4px 16px;
  padding:.6rem .75rem; font-size:.86rem; line-height:1.35; color:var(--ink);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7), 0 0 0 1px var(--accent-glow);
  animation:bubbleIn .22s ease; cursor:pointer;
}
.tugo-bubble b{color:var(--accent2);}
.tugo-bubble::after{
  content:""; position:absolute; margin:.15rem 0 0 0;
}
@keyframes bubbleIn{from{opacity:0; transform:translateY(6px) scale(.96);}to{opacity:1; transform:none;}}

/* ===== Vollbild-Feier Stufenaufstieg ===== */
.stage-celebrate{
  position:fixed; inset:0; z-index:260; display:grid; place-items:center;
  background:radial-gradient(120% 70% at 50% 30%, var(--bg2), rgba(10,8,16,.94));
  animation:bubbleIn .3s ease;
}
.stage-celebrate-inner{text-align:center; padding:2rem 1.5rem; max-width:340px;}
.stage-celebrate-inner img{
  width:180px; height:180px; object-fit:contain;
  filter:drop-shadow(0 12px 40px var(--accent-glow)); animation:tugoPop .6s ease;
}
@keyframes tugoPop{0%{transform:scale(.4); opacity:0;}60%{transform:scale(1.12);}100%{transform:scale(1);}}
.celebrate-badge{
  display:inline-block; margin:.4rem 0 .2rem; padding:.2rem .8rem; border-radius:99px;
  font-size:.8rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff;
}
.stage-celebrate-inner h2{
  margin:.2rem 0; font-size:1.7rem;
  background:linear-gradient(110deg, var(--ink) 30%, var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stage-celebrate-inner p{color:var(--ink-soft); font-style:italic; margin:.4rem 0 1.4rem;}
.stage-celebrate-inner .primary{width:100%;}

/* ===== Bestenliste + Anstupsen, v20 ===== */
.scoreboard{display:flex; flex-direction:column; gap:.4rem;}
.score-row{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
}
.score-row.me{
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--accent), 0 6px 16px -10px var(--accent-glow);
}
.score-rank{
  flex:0 0 1.6rem; text-align:center; font-weight:800; font-size:.95rem; color:var(--ink-soft);
}
.score-row.me .score-rank{color:var(--accent2);}
.score-ava{flex:0 0 40px; width:40px; height:40px; object-fit:contain;
  filter:drop-shadow(0 3px 8px var(--accent-glow));}
.score-main{flex:1 1 auto; min-width:0;}
.score-name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.score-name .you{color:var(--accent2); font-weight:800;}
.score-sub{font-size:.74rem; color:var(--ink-soft);}
.score-xp{flex:0 0 auto; font-weight:800; font-size:.92rem; text-align:right;}
.score-xp small{display:block; font-weight:600; font-size:.68rem; color:var(--ink-soft);}
.nudge-btn{
  flex:0 0 auto; border:1px solid var(--line); background:var(--surface2); color:var(--ink);
  border-radius:10px; padding:.35rem .5rem; font-size:1rem; cursor:pointer; line-height:1;
  transition:transform .12s, background .12s;
}
.nudge-btn:hover{background:var(--accent-soft);}
.nudge-btn:active{transform:scale(.88);}
.nudge-btn:disabled{opacity:.4; cursor:default;}

/* ===== Tugo-Stimmung bei Inaktivitaet (uebertrieben-witzig) + Streak-Schutz, v21 ===== */
.tugo-avatar{position:relative; flex:0 0 auto; width:110px; height:110px;}
.tugo-avatar img{width:110px; height:110px;}
.tugo-buddy-btn{position:relative;}
.tugo-decor{position:absolute; inset:0; pointer-events:none;}
.tugo-decor span{position:absolute; font-size:1.15rem; line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); animation:decorSway 3s ease-in-out infinite;}
.tugo-buddy-btn .tugo-decor span{font-size:.95rem;}
.tugo-decor .tl{top:-4px; left:-4px;} .tugo-decor .tr{top:-4px; right:-4px;}
.tugo-decor .bl{bottom:2px; left:-4px;} .tugo-decor .br{bottom:2px; right:-2px;}
.tugo-decor .cc{top:34%; left:34%;}
@keyframes decorSway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
img.mood-sad{filter:grayscale(.35) brightness(.9);}
img.mood-dusty{filter:grayscale(.6) sepia(.35) brightness(.82);}
img.mood-overgrown{filter:grayscale(.15) brightness(.88) contrast(1.05);}
.tugo-freeze{margin-top:6px; font-size:.82em; color:var(--ink-soft);}
.tugo-freeze b{color:#7fd7ff;}

/* ===== Tugo-Intro-Story beim App-Start (auf Schwarz, dann Fade), v24 ===== */
.tugo-intro{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:#000;                 /* schwarzes Video blendet nahtlos ein */
  pointer-events:auto;             /* tippen = überspringen */
  opacity:1; transition:opacity .55s ease;
}
.tugo-intro.fade{ opacity:0; }
.tugo-intro-stage{
  position:relative; width:min(92vw, 500px); aspect-ratio:4 / 3;   /* = Videoformat 640x480 */
}
.tugo-intro-stage video{ width:100%; height:100%; display:block; }
/* deckt das PixVerse-Wasserzeichen oben rechts ab (schwarz auf schwarz = unsichtbar) */
.wm-cover{ position:absolute; top:0; right:0; width:28%; height:14%; background:#000; }
@media (prefers-reduced-motion: reduce){ .tugo-intro{ display:none; } }

/* ===== Nachsprechen: Versuchs-Ergebnis (wiederholbar), v27 ===== */
.speak-attempt{
  margin:.7rem 0; padding:.6rem .8rem; border-radius:12px; font-size:.95rem; line-height:1.4;
  border:1px solid var(--line); background:var(--surface);
}
.speak-attempt.good{ border-color:var(--ok); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.speak-attempt.mid{ border-color:var(--warn); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.speak-attempt.bad{ border-color:var(--bad); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent); }
.speak-attempt b{ color:var(--ink); }

/* =====================================================================
   v30 — "Midnight Academic" Redesign (Stitch-Designsystem, real umgesetzt)
   Reiner Override-Layer am Dateiende: setzt Fonts/Flaechen/Buttons/Politur neu,
   Struktur + JS bleiben unangetastet. Per-Sprache-Akzent bleibt erhalten.
   ===================================================================== */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/HankenGrotesk-400.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/HankenGrotesk-500.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/HankenGrotesk-600.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/HankenGrotesk-700.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/Manrope-700.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/Manrope-800.woff2) format('woff2');}

:root{
  --font-body:'Hanken Grotesk', system-ui, "Segoe UI", Roboto, sans-serif;
  --font-head:'Manrope', system-ui, "Segoe UI", Roboto, sans-serif;
  --stroke:rgba(255,255,255,.06);
}
body{font-family:var(--font-body);}

/* Headlines in Manrope mit straffem Tracking */
.title, .auth-title, .term, .prompt-de, .speak-target,
.summary .big, .tugo-stage, #celebrateTitle, .stage-celebrate-inner h2,
.set-group h3, .celebrate-badge{
  font-family:var(--font-head);
  letter-spacing:-.02em;
}
.term{ font-size:2.25rem; font-weight:800; letter-spacing:-.03em; }
.title{ font-weight:800; }

/* Zahlen ruhig/tabellarisch */
.pill, .goaltext, .xp-pop, .badge, .word-row .due, .score-xp, #levelBadge, #streak{
  font-variant-numeric:tabular-nums;
}

/* Flaechen: feine 1px-Innenkante + weiche, getoente Schatten (Tonal Stacking) */
.card-box, .messages, .word-list, .set-group, .tugo-card, .badge-tile, .score-row{
  border-color:var(--stroke);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.55);
}
.card-box{ box-shadow:0 16px 44px -18px rgba(0,0,0,.72); }
.auth-card{ box-shadow:0 24px 70px -24px rgba(0,0,0,.8), 0 0 0 1px var(--stroke); }

/* Taktile Primaerbuttons: dunklere Unterkante = echtes "Druecken" */
.primary{
  border-bottom:3px solid color-mix(in srgb, var(--accent) 55%, #000 45%);
  box-shadow:0 8px 20px -10px var(--accent-glow);
}
.primary:active{ transform:translateY(2px) scale(.995); border-bottom-width:1px; }

/* Pill-Progress mit Glow */
.goalbar{ box-shadow:inset 0 0 0 1px var(--stroke); }
.goalfill{ box-shadow:0 0 16px -3px var(--accent-glow); }

/* Level-/Streak-Pills edler */
.pill{ background:color-mix(in srgb, var(--surface) 82%, transparent); border-color:var(--stroke); }

/* Aktiver Tab glowt dezent */
.tab.active{ box-shadow:0 8px 20px -12px var(--accent-glow); }

/* Fokus-Ring (Barrierefreiheit) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }