:root{
  --bg0:#02070d;
  --ink:#cfeaff;
  --muted:#6f93a8;
  --line:rgba(120,200,255,.16);
  --accent:#39d0ff;
  --pink:#ff5ad0;
  --gold:#ffd35a;
  --goal:#7cff9b;
  --danger:#ff5a6a;
  --panel:rgba(6,20,30,.72);
  --panel2:rgba(10,28,42,.85);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0;height:100%;}
body{
  background:var(--bg0);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}

/* Stage = Spalte: Kopfzeile / Spielfeld / Fußzeile — die Leisten reservieren
   sich ihren Platz, statt das Spielfeld zu überlagern (wichtig auf Mobil) */
#stage{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column;}
#field{position:relative;flex:1;min-height:0;overflow:hidden;}
#game{position:absolute;inset:0;display:block;touch-action:none;}

/* ---- HUD-Overlay (nur flüchtige Anzeigen über dem Spielfeld) ------------ */
.hud{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
}
.hud button,.hud .clickable,.hud input{pointer-events:auto;}

/* Kopfzeile (eigene Layout-Zeile über dem Spielfeld) */
.topbar{
  flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:max(10px,env(safe-area-inset-top)) 12px 10px 12px;flex-wrap:wrap;
}
.topgroup{display:flex;gap:8px;align-items:center;min-width:0;flex:1 1 auto;}
.status{display:flex;gap:8px;align-items:center;}

.btn{
  font:600 13px/1 inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);
  padding:9px 12px;border-radius:10px;cursor:pointer;white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .15s,background .15s,transform .05s;
}
.btn:hover{border-color:var(--accent);}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
/* Links im Button-Look (z. B. ❓ Hilfe auf dem Titel) */
a.btn{text-decoration:none;display:inline-flex;align-items:center;}
.btn-primary{
  background:linear-gradient(180deg,rgba(57,208,255,.25),rgba(57,208,255,.1));
  border-color:var(--accent);
}
.btn-big{font-size:17px;padding:14px 34px;border-radius:14px;}
.lvl-name{font-size:12px;color:var(--muted);align-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.counter{
  font:700 14px/1 ui-monospace,Menlo,monospace;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);
  padding:10px 12px;border-radius:10px;
}
.counter.score{color:var(--gold);}
/* Bubble-Vorrat als Punkte: gefüllt = übrig, hohl = verbraucht */
.counter .dots{color:var(--accent);letter-spacing:2px;margin-right:7px;
  text-shadow:0 0 8px rgba(57,208,255,.6);}
.counter .dots i{color:rgba(255,255,255,.22);font-style:normal;text-shadow:none;}
.counter.last{
  color:#fff;border-color:var(--danger);
  animation:lastpulse .8s ease-in-out infinite;
}
@keyframes lastpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,106,0);}
  50%{box-shadow:0 0 14px 2px rgba(255,90,106,.55);}
}
.counter.bump{animation:bump .3s ease;}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Combo-Chip */
.combo{
  position:absolute;top:10px;right:12px;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--panel);border:1px solid var(--gold);border-radius:10px;
  padding:7px 12px 8px;color:var(--gold);
  font:800 16px/1 ui-monospace,Menlo,monospace;
  box-shadow:0 0 16px rgba(255,211,90,.35);
}
.combo.pop{animation:combopop .25s ease;}
@keyframes combopop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.combo-track{display:block;width:56px;height:3px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden;}
.combo-track b{display:block;height:100%;width:100%;background:var(--gold);border-radius:2px;}

/* Skill-Leiste: Zeile in der Fußleiste (überlappt das Spielfeld nicht) */
.skillbar{
  display:flex;gap:8px;justify-content:flex-end;align-items:center;
  padding-bottom:8px;
}
.skillbar:empty{display:none;}
.skill-btn{
  position:relative;width:52px;height:52px;border-radius:14px;
  font-size:22px;line-height:1;padding:0;text-align:center;
}
.skill-btn .uses{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;line-height:17px;
  border-radius:9px;font:700 10px/17px ui-monospace,Menlo,monospace;
  background:var(--accent);color:#03222e;padding:0 3px;
}
.skill-btn.spent{opacity:.4;filter:saturate(.3);}
.skill-btn.hot{border-color:var(--gold);box-shadow:0 0 16px rgba(255,211,90,.5);}

/* Level-Freischaltungs-Banner: groß, golden, blendet nach ~2,6 s aus */
.unlock-banner{
  position:absolute;top:34%;left:50%;z-index:6;pointer-events:none;
  transform:translate(-50%,-50%);
  font-weight:900;font-size:clamp(24px,7vw,46px);line-height:1.2;text-align:center;
  color:var(--gold);text-shadow:0 0 28px rgba(255,211,90,.85),0 2px 4px rgba(0,0,0,.6);
  animation:unlockpop 2.6s ease forwards;
}
@keyframes unlockpop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.18);}
  22%{transform:translate(-50%,-50%) scale(1);}
  78%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06);}
}

/* Hinweis */
.hint{
  margin-top:10px;color:var(--muted);font-size:13px;text-align:center;
  background:var(--panel);border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;max-width:90vw;
  transition:opacity .6s;
}
.hint.hide{opacity:0;}

/* Abschluss-Panel */
.complete{
  position:absolute;top:12%;left:50%;transform:translateX(-50%);
  width:min(380px,88vw);text-align:center;pointer-events:auto;
  background:var(--panel2);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);animation:pop .3s ease;
}
@keyframes pop{from{opacity:0;transform:translateX(-50%) scale(.9)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.complete-title{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.stars{font-size:36px;line-height:1.15;letter-spacing:.12em;color:rgba(255,255,255,.14);}
.stars span{display:inline-block;transition:none;}
.stars span.on{
  color:var(--gold);text-shadow:0 0 18px rgba(255,211,90,.75);
  animation:starslam .45s cubic-bezier(.2,2.2,.4,1);
}
@keyframes starslam{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
.complete-score{
  font-size:52px;font-weight:800;margin:2px 0 0;line-height:1;
  font-family:ui-monospace,Menlo,monospace;
  background:linear-gradient(180deg,#fff,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.complete-cov{font-size:14px;color:var(--muted);margin:4px 0 2px;}
.complete-sub{font-size:14px;color:var(--ink);min-height:20px;}
.complete-sub.record{color:var(--gold);font-weight:700;text-shadow:0 0 18px rgba(255,211,90,.5);}
.complete-rank{font-size:13px;color:var(--accent);min-height:18px;margin-bottom:12px;font-weight:700;}
.complete-rank.top{color:var(--gold);font-size:15px;text-shadow:0 0 14px rgba(255,211,90,.6);}
.complete-rank.dim{color:var(--muted);font-weight:400;}
.complete-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* Fußzeile: Skills + Belegungs-Skala (eigene Layout-Zeile unter dem Feld;
   unten Extra-Platz für das ZIEL-Label unter der Leiste) */
.scale{flex:none;padding:6px 14px max(20px,env(safe-area-inset-bottom)) 14px;}
.scale-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px;}
#covLabel{color:var(--accent);font-weight:700;}
#prLabel{color:var(--gold);font-weight:700;}
.track{
  position:relative;height:14px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:8px;
  background:linear-gradient(90deg,rgba(57,208,255,.5),var(--accent));
  box-shadow:0 0 16px rgba(57,208,255,.5);
  transition:background .25s,box-shadow .25s;
}
.fill.reached{
  background:linear-gradient(90deg,rgba(124,255,155,.5),var(--goal));
  box-shadow:0 0 18px rgba(124,255,155,.6);
}
.fill.near{animation:nearpulse .7s ease-in-out infinite;}
@keyframes nearpulse{
  0%,100%{box-shadow:0 0 10px rgba(57,208,255,.4);}
  50%{box-shadow:0 0 26px rgba(124,255,155,.85);}
}
.ticks i{position:absolute;top:0;bottom:0;width:1px;background:var(--line);}
.goal-marker{
  position:absolute;top:-4px;bottom:-4px;width:2px;left:60%;
  background:var(--goal);box-shadow:0 0 10px var(--goal);
}
.goal-marker span{
  position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--goal);font-weight:700;letter-spacing:.04em;
}
.pr-marker{
  position:absolute;top:-4px;bottom:-4px;width:2px;left:0%;
  background:var(--gold);box-shadow:0 0 10px var(--gold);transition:left .2s;
}
/* Das PR-Fähnchen kollidierte mit dem "Personal Record"-Label darüber —
   der goldene Strich + das Label rechts reichen zur Zuordnung. */
.pr-marker span{display:none;}

/* ---- Overlays ----------------------------------------------------------- */
.overlay{
  position:absolute;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(2,7,13,.66);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;justify-content:center;
}
.ov-inner{
  width:min(780px,100%);
  padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}
.ov-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ov-title{font-size:17px;font-weight:800;letter-spacing:.04em;}
.head-name{max-width:40%;overflow:hidden;text-overflow:ellipsis;}

/* Gesamtscore-Leiste am oberen Bildschirmrand (Titel + Level-Menü) */
.top-stats{
  position:absolute;top:0;left:0;right:0;z-index:25;
  display:flex;align-items:center;gap:10px;
  padding:max(8px,env(safe-area-inset-top)) 12px 8px 14px;
  background:rgba(4,14,22,.92);
  border-bottom:1px solid rgba(255,211,90,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.ts-score{
  font:800 15px/1.2 ui-monospace,Menlo,monospace;color:var(--gold);
  text-shadow:0 0 12px rgba(255,211,90,.45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ts-stars{
  font:800 14px/1 ui-monospace,Menlo,monospace;color:var(--gold);cursor:pointer;
  background:rgba(255,211,90,.1);border:1px solid rgba(255,211,90,.5);
  padding:8px 12px;border-radius:999px;white-space:nowrap;
  text-shadow:0 0 10px rgba(255,211,90,.5);
  transition:background .15s,box-shadow .15s,transform .05s;
}
.ts-stars:hover{background:rgba(255,211,90,.2);box-shadow:0 0 14px rgba(255,211,90,.4);}
.ts-stars:active{transform:scale(.95);}
.ts-spacer{flex:1;}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.lang-btn{
  font:700 11px/1 ui-monospace,Menlo,monospace;color:var(--muted);
  background:transparent;border:0;padding:8px 11px;cursor:pointer;
}
.lang-btn.active{background:rgba(57,208,255,.2);color:#fff;}
#ovTitle .ov-inner,#ovLevels .ov-inner{padding-top:calc(52px + env(safe-area-inset-top));}

/* Titel */
.title-inner{align-items:center;justify-content:center;text-align:center;margin:auto 0;gap:14px;}
.logo{
  margin:0;                               /* .logo ist auf dem Titel ein h1 */
  font-size:clamp(44px,10vw,86px);font-weight:900;letter-spacing:.02em;line-height:1;
  background:linear-gradient(180deg,#c9f6ff,var(--accent) 55%,#1a7fa8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(57,208,255,.35));
}
.logo span{
  background:linear-gradient(180deg,#ffd9f3,var(--pink) 55%,#a8347f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{color:var(--muted);font-size:15px;margin-top:-6px;}
.name-label{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:10px;}
#nameInput{
  font:700 18px/1 inherit;color:#fff;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;width:min(280px,80vw);outline:none;
  -webkit-user-select:text;user-select:text;
}
#nameInput:focus{border-color:var(--accent);box-shadow:0 0 14px rgba(57,208,255,.3);}
.title-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.footer-note{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;}

/* Ratgeber-Seiten unter dem Titel — dezent, aber echte Links (Suchmaschinen) */
.guide-links{
  margin-top:10px;max-width:420px;text-align:center;line-height:1.9;
  font-size:11px;color:var(--muted);
}
.guide-links a{color:var(--muted);text-decoration:none;}
.guide-links a:hover{color:var(--accent);text-decoration:underline;}

/* Impressum/Datenschutz-Link unten rechts auf dem Titel */
.legal-link{
  position:absolute;right:14px;bottom:max(12px,env(safe-area-inset-bottom));
  font-size:11px;color:var(--muted);text-decoration:none;
  padding:6px 8px;border-radius:8px;
}
.legal-link:hover{color:var(--accent);text-decoration:underline;}

/* Adminbereich-Link unten links — nur sichtbar für das Admin-Konto */
.admin-link{right:auto;left:14px;color:var(--gold);}
.admin-link:hover{color:var(--gold);}

/* schwebende Deko-Bubbles auf dem Titel */
.bub{
  position:absolute;border-radius:50%;pointer-events:none;
  border:2px solid rgba(57,208,255,.25);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.14),rgba(57,208,255,.05) 60%,transparent);
  animation:floatup linear infinite;
}
.b1{width:90px;height:90px;left:8%;bottom:-100px;animation-duration:11s;}
.b2{width:46px;height:46px;left:76%;bottom:-60px;animation-duration:8s;animation-delay:2s;border-color:rgba(255,90,208,.25);}
.b3{width:140px;height:140px;left:55%;bottom:-150px;animation-duration:15s;animation-delay:1s;}
.b4{width:28px;height:28px;left:28%;bottom:-40px;animation-duration:7s;animation-delay:4s;border-color:rgba(255,211,90,.3);}
@keyframes floatup{
  from{transform:translateY(0);opacity:0;}
  8%{opacity:1;}
  to{transform:translateY(-115vh);opacity:.15;}
}

/* Level-Raster */
.lv-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;padding-bottom:20px;
}
.lv-card{
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px;display:flex;flex-direction:column;gap:6px;min-height:96px;
  transition:border-color .15s,transform .08s,box-shadow .15s;
}
.lv-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.lv-card.cleared{border-color:rgba(124,255,155,.4);}
.lv-card.next{
  border-color:var(--accent);
  animation:nextglow 1.6s ease-in-out infinite;
}
@keyframes nextglow{
  0%,100%{box-shadow:0 0 0 0 rgba(57,208,255,0);}
  50%{box-shadow:0 0 18px 2px rgba(57,208,255,.45);}
}
.lv-card.locked{opacity:.45;cursor:not-allowed;filter:saturate(.4);}
.lv-card.locked:hover{border-color:var(--line);transform:none;}
.lv-card.deny{animation:deny .3s ease;}
@keyframes deny{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lv-top{display:flex;justify-content:space-between;align-items:baseline;}
.lv-num{font:800 22px/1 ui-monospace,Menlo,monospace;color:#fff;}
.lv-stars{font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.18);}
.lv-stars .on{color:var(--gold);text-shadow:0 0 8px rgba(255,211,90,.6);}
.lv-lock{font-size:16px;}
.lv-title{font-weight:700;font-size:13px;}
.lv-title.dim{color:var(--muted);}
.lv-sub{font-size:11px;color:var(--muted);margin-top:auto;}

/* Bestenliste */
.sc-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  font:700 12px/1 ui-monospace,Menlo,monospace;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:8px 12px;cursor:pointer;min-width:34px;text-align:center;
}
.chip.active{border-color:var(--accent);color:#fff;box-shadow:0 0 12px rgba(57,208,255,.35);}
.sc-list{display:flex;flex-direction:column;gap:6px;padding-bottom:6px;}
.sc-row{
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;font-size:14px;
}
.sc-row .rank{font:800 15px/1 ui-monospace,Menlo,monospace;color:var(--muted);width:34px;}
.sc-row.p1 .rank{color:var(--gold);}
.sc-row.p2 .rank{color:#d8e6f2;}
.sc-row.p3 .rank{color:#e0a05a;}
.sc-row .who{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-row .pts{font:700 14px/1 ui-monospace,Menlo,monospace;color:var(--accent);}
.sc-row.you{border-color:var(--gold);box-shadow:0 0 12px rgba(255,211,90,.25);}
.sc-row.you .who{color:var(--gold);}
/* „Neu"-Badge: Eintrag in den letzten 24 h neu/aktualisiert (highscores.php) */
.sc-row .new-badge{display:inline-block;vertical-align:middle;margin-left:7px;
  font:800 10px/1 system-ui,-apple-system,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  color:#03222e;background:var(--accent);padding:3px 6px;border-radius:6px;
  box-shadow:0 0 10px rgba(57,208,255,.45);animation:newpulse 1.8s ease-in-out infinite;}
@keyframes newpulse{0%,100%{opacity:1}50%{opacity:.62}}
@media(prefers-reduced-motion:reduce){.sc-row .new-badge{animation:none;}}
.sc-sep{text-align:center;color:var(--muted);font-size:12px;}
.sc-loading,.sc-empty{color:var(--muted);text-align:center;padding:26px 0;font-size:14px;}
.sc-note{color:var(--muted);font-size:12px;text-align:center;min-height:16px;}
.sc-login{align-self:center;margin-bottom:16px;}

/* Konto / Login (E-Mail-Code, kein Passwort) */
.account-inner{max-width:480px;}
.ac-box{
  display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;
}
.ac-head{font-size:16px;font-weight:800;}
.ac-text{font-size:13px;color:var(--muted);line-height:1.55;}
.ac-label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.ac-input{
  font:700 17px/1.2 inherit;color:#fff;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;width:100%;outline:none;
  -webkit-user-select:text;user-select:text;
}
.ac-input:focus{border-color:var(--accent);box-shadow:0 0 14px rgba(57,208,255,.3);}
.ac-input.code{
  text-align:center;letter-spacing:.4em;font-size:24px;
  font-family:ui-monospace,Menlo,monospace;
}
.ac-err{color:var(--danger);font-size:13px;font-weight:600;min-height:17px;}
.ac-err.ok{color:var(--goal);}
.ac-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.ac-link{
  background:none;border:none;color:var(--accent);cursor:pointer;
  font:600 13px/1 inherit;padding:6px 0;text-align:left;
}
.ac-link:disabled{color:var(--muted);cursor:default;}
.ac-user{font-size:22px;font-weight:800;color:var(--gold);word-break:break-all;}
.ac-mail{font-size:13px;color:var(--muted);word-break:break-all;}
.ac-sep{border-top:1px solid var(--line);margin:4px 0;}
.ac-link.danger{color:var(--danger);}
.btn-danger{
  border-color:var(--danger);color:#fff;
  background:linear-gradient(180deg,rgba(255,90,106,.28),rgba(255,90,106,.1));
}
.btn-danger:hover{border-color:#ff8090;}
.complete-rank.cta{cursor:pointer;text-decoration:underline;}

/* Shop */
.shop-head{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.shop-note{font-size:12px;color:var(--muted);margin-top:-6px;}
.shop-list{display:flex;flex-direction:column;gap:8px;}
.shop-card{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;
}
.shop-card.unlocked{border-color:rgba(124,255,155,.4);}
.shop-card.noted{border-color:rgba(255,211,90,.4);}
.shop-ic{font-size:28px;width:40px;text-align:center;flex-shrink:0;}
.shop-body{flex:1;min-width:0;}
.shop-name{font-weight:800;font-size:14px;}
.shop-desc{font-size:12px;color:var(--muted);margin-top:2px;}
.shop-state{
  font:700 12px/1.3 ui-monospace,Menlo,monospace;color:var(--muted);
  text-align:right;flex-shrink:0;max-width:110px;
}
.shop-card.unlocked .shop-state{color:var(--goal);}
.shop-card .btn{flex-shrink:0;}

@media (max-width:600px){
  .lv-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
  .complete{top:9%;}
  /* Touch-freundlich: größere Buttons & Chips auf dem Smartphone */
  .btn{padding:13px 16px;font-size:14px;border-radius:12px;}
  .btn-big{font-size:17px;padding:14px 34px;border-radius:14px;width:min(280px,80vw);}
  .topbar{gap:8px;}
  .counter{padding:12px 13px;font-size:13px;}
  .lvl-name{font-size:11px;}
  .chip{padding:10px 14px;font-size:13px;}
  .lang-btn{padding:10px 13px;}
  .skillbar{padding-bottom:6px;}
  .scale-labels{font-size:11px;margin-bottom:6px;}
}

/* ---- Rechtstexte (impressum.html / datenschutz.html) --------------------- */
body.legal-body{overflow:auto;-webkit-user-select:text;user-select:text;}
.legal-wrap{
  max-width:720px;margin:0 auto;
  padding:max(20px,env(safe-area-inset-top)) 18px max(40px,env(safe-area-inset-bottom));
}
.legal-wrap .back{display:inline-block;margin-bottom:18px;text-decoration:none;}
.legal-wrap h1{font-size:28px;margin:8px 0 4px;color:#fff;}
.legal-wrap h2{font-size:17px;margin:26px 0 8px;color:var(--accent);}
.legal-wrap p,.legal-wrap li{font-size:14px;line-height:1.65;color:var(--ink);}
.legal-wrap .updated{color:var(--muted);font-size:12px;margin-top:0;}
.legal-wrap a{color:var(--accent);}
.legal-wrap ul{padding-left:20px;}
.legal-wrap .legal-switch{
  margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}