/* ============================================================
   SALZPENNER LÜNEBURG — Premium Grunge-Look (v2)
   ============================================================ */

:root {
  --bg: #16140f;
  --panel: #262219;
  --panel2: #322c20;
  --panel3: #3d3526;
  --border: #4a4234;
  --border-hi: #6a5d42;
  --text: #f0e8d4;
  --muted: #a89d84;
  --accent: #ffd76a;
  --accent2: #c4972f;
  --good: #8fc855;
  --bad: #e06a52;
  --beer: #f5a623;
  --map-fill: #3a4a35;
  --map-sel: #5a6b45;
  --map-here: #6b5a2a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255, 215, 106, .07), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(61, 90, 107, .12), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 60px, rgba(0, 0, 0, .14) 60px 61px),
    var(--bg);
  color: var(--text);
  font-family: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo, .logo-big, .act-timer, .crew-total-rate {
  font-family: 'Alfa Slab One', 'Arial Black', serif;
  font-weight: 400;
  letter-spacing: .5px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 10px; }

/* ---------- Header mit Hero-Artwork ---------- */
.topbar {
  position: relative; overflow: hidden;
  border: 2px solid var(--border); border-radius: 14px;
  margin-bottom: 8px; min-height: 92px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.topbar-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  filter: brightness(.62) saturate(1.1);
}
.topbar-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; min-height: 92px;
  background: linear-gradient(90deg, rgba(22, 20, 15, .82) 0%, rgba(22, 20, 15, .35) 45%, rgba(22, 20, 15, .75) 100%);
}
.emblem {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--accent2); cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 215, 106, .35);
  transition: transform .2s;
}
.emblem:hover { transform: scale(1.08) rotate(-4deg); }
.logo {
  font-size: 1.7rem; color: var(--accent); cursor: pointer; white-space: nowrap;
  text-shadow: 2px 3px 0 #000, 0 0 24px rgba(255, 215, 106, .4);
}
.logo-city { color: #d8cdb2; font-size: .8rem; letter-spacing: 5px; display: block; margin-top: -4px; }
.ticker {
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-style: italic; color: #d8cdb2; font-size: .88rem;
  text-shadow: 1px 1px 2px #000;
}
.tick-in { animation: tickIn .5s ease; }
@keyframes tickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sound-btn {
  background: rgba(0, 0, 0, .4); border: 1px solid var(--border-hi); border-radius: 10px;
  font-size: 1.1rem; padding: 6px 10px; cursor: pointer; transition: all .15s;
}
.sound-btn:hover { border-color: var(--accent); transform: scale(1.08); }

/* ---------- Statusleiste ---------- */
.statbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px;
  padding: 8px 10px; margin-bottom: 8px;
  position: sticky; top: 6px; z-index: 50;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 9px;
  padding: 5px 12px; min-width: 105px; flex: 1; text-align: center;
  transition: border-color .3s;
}
.stat b { font-size: .98rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat b.counting { color: #aff07a; text-shadow: 0 0 10px rgba(143, 200, 85, .7); }
.stat small { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: 1px; }
.stat .rate { color: var(--good); text-transform: none; letter-spacing: 0; }
.stat.full { border-color: var(--bad); animation: pulseWarn 1.2s infinite; }
@keyframes pulseWarn { 50% { box-shadow: 0 0 12px rgba(224, 106, 82, .55); } }
.stat-ico { font-size: .92rem; }
.districtname { font-size: .8rem !important; }
.bar {
  width: 92px; height: 11px; background: #12100b; border-radius: 6px;
  border: 1px solid var(--border); overflow: hidden; margin: 3px 0;
}
.small-bar { width: 150px; }
.bar-fill {
  height: 100%; transition: width .6s ease;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%);
  background-size: 14px 14px;
  animation: barStripes 1.2s linear infinite;
}
@keyframes barStripes { to { background-position: 14px 0; } }
.bar-fill.hp { background-color: #d95f4a; }
.bar-fill.xp { background-color: var(--accent2); }
.bar-fill.hunger { background-color: #d97f3a; }

/* ---------- Layout ---------- */
.main { display: flex; gap: 8px; align-items: flex-start; }
.side {
  width: 222px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.side-avatar { text-align: center; padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 6px; }
.avatar-img {
  border-radius: 14px; border: 2px solid var(--border-hi); object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.side-name { font-weight: 700; color: var(--accent); font-size: 1.05rem; margin-top: 6px; }
.side-rank { color: var(--muted); font-style: italic; font-size: .8rem; }

.nav-btn {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 10px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: .88rem; transition: all .15s;
  display: flex; align-items: center; gap: 6px;
}
.nav-btn:hover { background: var(--panel3); border-color: var(--accent2); transform: translateX(3px); }
.nav-btn.active {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #1a1813; font-weight: 700; border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 215, 106, .35);
}
.nav-badge {
  margin-left: auto; font-size: .66rem; background: rgba(0, 0, 0, .35);
  border-radius: 8px; padding: 2px 7px; color: var(--good); font-weight: 700;
}
.nav-btn.active .nav-badge { color: #1a4d0e; background: rgba(255, 255, 255, .35); }

.view { flex: 1; min-width: 0; }
.view h2 {
  color: var(--accent); margin-bottom: 10px; font-size: 1.3rem;
  text-shadow: 2px 2px 0 #000;
}
.view h2 small { font-family: 'Rubik', sans-serif; font-weight: 400; letter-spacing: 0; font-size: .85rem; }
.view h3 { color: var(--accent); margin-bottom: 8px; font-size: .98rem; letter-spacing: .3px; }
.shop-title { margin: 14px 2px 8px; }

.card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.cols { display: flex; gap: 10px; flex-wrap: wrap; }
.cols > .card { flex: 1; min-width: 290px; }
.muted { color: var(--muted); }
p { margin-bottom: 8px; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border: 2px solid #8a6a1a; border-radius: 9px; color: #221c10;
  font-weight: 700; font-family: inherit; font-size: .92rem;
  padding: 8px 16px; cursor: pointer; transition: all .12s;
  box-shadow: 0 3px 0 #6b5215, 0 5px 10px rgba(0, 0, 0, .4);
}
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 0 #6b5215, 0 7px 14px rgba(0, 0, 0, .4); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #6b5215; }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.btn.big { font-size: 1.08rem; padding: 13px 26px; width: 100%; margin-top: 8px; }
.btn.small { font-size: .8rem; padding: 5px 11px; }
.btn.ghost { background: transparent; color: var(--muted); border-color: var(--border); box-shadow: none; }
.btn.glow, .buybtn.can { animation: glowPulse 1.6s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 3px 0 #6b5215, 0 0 6px rgba(255, 215, 106, .3); }
  50% { box-shadow: 0 3px 0 #6b5215, 0 0 22px rgba(255, 215, 106, .75); }
}
.btn.dur { display: flex; flex-direction: column; padding: 10px; }
.btn.dur small { font-weight: 400; font-size: .72rem; opacity: .78; }
.dur-grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.dur-grid .btn { flex: 1; min-width: 108px; }

/* ---------- Tabellen ---------- */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 4px 6px; border-bottom: 1px dashed #3a342a; font-size: .9rem; }
.kv td:first-child { color: var(--muted); width: 45%; }
.kv tr:hover { background: rgba(255, 255, 255, .03); }

.ranking { width: 100%; border-collapse: collapse; }
.ranking th { text-align: left; color: var(--muted); border-bottom: 2px solid var(--border); padding: 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.ranking td { padding: 7px 6px; border-bottom: 1px dashed #3a342a; }
.ranking tr.top3 td { background: rgba(255, 215, 106, .05); }
.ranking tr.me td { background: rgba(255, 215, 106, .14); color: var(--accent); font-weight: 700; }

/* ---------- Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 9px; margin-bottom: 16px; }
.shop-item {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px;
  padding: 10px; display: flex; gap: 10px; transition: all .15s;
}
.shop-item:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.shop-item.owned { border-color: var(--good); }
.shop-img { flex-shrink: 0; }
.shop-img .iimg, .crew-img .iimg {
  width: 62px; height: 62px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--border-hi); display: block;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.iemo { font-size: 2.2rem; display: flex; width: 62px; height: 62px; align-items: center; justify-content: center; }
.shop-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.shop-body b { font-size: .92rem; }
.shop-body small { line-height: 1.3; }
.shop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 6px; flex-wrap: wrap; }
.shop-effect { color: var(--good); font-size: .76rem; font-weight: 700; }
/* Globale Buff-Leiste (aktive Spezialtränke) */
.buffbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.buffbar:empty { display: none; }
.buff-chip { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(180deg, #2c2718, #211d12);
  border: 1px solid #5a4a1f; border-radius: 12px; padding: 2px 9px; font-size: .8rem; cursor: pointer; box-shadow: 0 0 8px rgba(240,192,64,.18); }
.buff-chip:hover { border-color: var(--accent); }
.buff-chip .buff-ico { font-size: .95rem; }
.buff-chip .ei { width: 1em; height: 1em; vertical-align: -2px; }
.buff-chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
/* Spezialtrank-Tab */
.pot-gold { text-align: center; font-size: 1.05rem; padding: 10px; }
.pot-item.pot-active { border-color: var(--accent); box-shadow: 0 0 10px rgba(240,192,64,.25); }
.pot-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
.pot-rest { color: var(--accent); font-size: .76rem; font-weight: 800; }
.pot-on { color: var(--good); }
.owned-tag { color: var(--good); font-size: .8rem; font-weight: 700; }

/* ---------- Crew (Idle) ---------- */
.crew-total { text-align: center; }
.crew-total-rate { font-size: 2rem; color: var(--good); text-shadow: 0 0 18px rgba(143, 200, 85, .45); }
.crew-total-rate small { font-size: .9rem; color: var(--muted); font-family: 'Rubik', sans-serif; margin-left: 6px; }
.crew-list { display: flex; flex-direction: column; gap: 8px; }
.crew-row {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px; padding: 10px 14px;
  transition: all .15s;
}
.crew-row:hover { border-color: var(--border-hi); }
.crew-row.hired { border-color: #5a7a3a; }
.crew-img { position: relative; flex-shrink: 0; }
.crew-count {
  position: absolute; bottom: -6px; right: -8px;
  background: var(--good); color: #14290a; font-weight: 800; font-size: .78rem;
  border-radius: 10px; padding: 2px 8px; border: 2px solid var(--panel);
}
.crew-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crew-buy { text-align: center; line-height: 1.15; min-width: 110px; }
.crew-buy small { font-weight: 400; }

/* ---------- Kampf ---------- */
.fight-list { display: flex; flex-direction: column; gap: 6px; }
.fight-row {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 11px; padding: 8px 14px;
  transition: all .15s;
}
.fight-row:hover { border-color: var(--bad); }
.fight-who { flex: 1; display: flex; flex-direction: column; }
.fight-who small { color: var(--muted); }
.fight-loot { color: var(--muted); }

/* ---------- Aktivität ---------- */
.act-box {
  margin-top: 8px; background: rgba(0, 0, 0, .3); border: 2px dashed var(--accent2);
  border-radius: 10px; padding: 10px; text-align: center; font-size: .84rem;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.act-box.idle { border-color: var(--border); color: var(--muted); }
.act-box.jail { border-color: var(--bad); animation: pulseWarn 1.5s infinite; }
.act-timer { font-size: 1.35rem; color: var(--accent); }
.act-bar { width: 100%; height: 9px; background: #12100b; border-radius: 5px; overflow: hidden; }
.act-bar-fill {
  height: 100%; background: var(--accent); transition: width 1s linear;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%);
  background-size: 12px 12px; animation: barStripes 1s linear infinite;
}

/* ---------- Nächstes Ziel ---------- */
.goal-strip {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 215, 106, .1), rgba(255, 215, 106, .02));
  border: 2px solid var(--border-hi); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px; transition: all .15s;
}
.goal-strip:hover { border-color: var(--accent); }
.goal-ico { font-size: 1.7rem; }
.goal-info { flex: 1; }
.goal-info small { color: var(--muted); display: block; }
.goal-bar { width: 100%; margin-top: 4px; }
.goal-pct { font-weight: 800; color: var(--accent); font-size: 1.1rem; }

/* ---------- Pfandautomat ---------- */
.pfand-card { text-align: center; }
.pfand-machine {
  width: 220px; margin: 0 auto 14px;
  background: linear-gradient(180deg, #4a5a4a, #2d382d);
  border: 3px solid #1d241d; border-radius: 14px; padding: 16px;
  transition: all .3s;
}
.pfand-machine.ready { box-shadow: 0 0 26px rgba(106, 255, 106, .25); }
.pfand-screen {
  background: #0d1f0d; color: #6aff6a; font-family: 'Courier New', monospace;
  font-weight: 700; padding: 10px; border-radius: 6px; border: 2px solid #050f05;
  font-size: 1rem; line-height: 1.5; text-shadow: 0 0 7px #6aff6a99;
}
.pfand-slot { width: 90px; height: 26px; background: #0a0a0a; border-radius: 13px; margin: 12px auto 0; border: 2px solid #1d241d; }

/* ---------- Karte & Stadtteile ---------- */
.citymap { width: 100%; height: auto; display: block; }
.map-card { padding: 8px; }
.map-cols > .card:last-child { min-width: 280px; max-width: 400px; }
.map-district:hover ellipse { filter: brightness(1.35); }
.district-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.dstars { background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; font-size: .78rem; }
.dstars b { color: var(--accent); letter-spacing: 1px; }
.district-photo {
  width: 100%; max-height: 210px; object-fit: cover; object-position: center;
  border-radius: 10px; border: 1px solid var(--border-hi); margin-bottom: 10px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .4);
}
.district-card { padding: 0; overflow: hidden; }
.district-card .district-photo { border-radius: 0; border: none; margin: 0; max-height: 190px; }
.district-card-body { padding: 12px 16px 14px; }

/* ---------- Übersicht ---------- */
.ov-avatar { text-align: center; margin: 8px 0; }
.totals { display: flex; flex-wrap: wrap; gap: 8px; }
.totals span { background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: .84rem; }
.dog-row { display: flex; gap: 12px; align-items: flex-start; }
.dog-img { width: 70px !important; height: 70px !important; }

/* ---------- Erfolge ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px; }
.ach-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  filter: saturate(.55); opacity: .85; transition: all .2s;
}
.ach-card .bar { width: 100%; }
.ach-card.done {
  filter: none; opacity: 1; border-color: var(--accent2);
  box-shadow: 0 0 16px rgba(255, 215, 106, .18);
}
.ach-big { font-size: 2.2rem; }
.ach-card.done .ach-big { text-shadow: 0 0 16px rgba(255, 215, 106, .8); }
.ach-reward { color: var(--good); font-weight: 700; }

/* ---------- Bank ---------- */
.bank-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.bank-actions .name-input { width: 140px; margin: 0; }

/* ---------- Tagebuch ---------- */
.log-row { padding: 6px 4px; border-bottom: 1px dashed #3a342a; line-height: 1.4; font-size: .9rem; }
.log-time { color: var(--muted); margin-right: 8px; font-family: 'Courier New', monospace; }

/* ---------- Startbildschirm ---------- */
.start-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.start-box {
  max-width: 680px; width: 100%; background: var(--panel); border: 3px solid var(--border);
  border-radius: 18px; overflow: hidden; text-align: center;
  box-shadow: 0 14px 50px rgba(0, 0, 0, .65);
}
.start-hero { position: relative; min-height: 150px; }
.start-hero img { width: 100%; height: 215px; object-fit: cover; display: block; filter: brightness(.8); }
.start-hero-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; background: linear-gradient(180deg, transparent 30%, rgba(22, 20, 15, .92) 96%);
}
.logo-big {
  font-size: clamp(1.35rem, 8.5vw, 2.9rem); color: var(--accent); letter-spacing: 1px;
  white-space: nowrap; max-width: 100%;
  text-shadow: 3px 4px 0 #000, 0 0 36px rgba(255, 215, 106, .5);
}
.logo-sub { color: #d8cdb2; letter-spacing: 6px; text-transform: uppercase; font-size: .8rem; }
.start-inner { padding: 22px 28px 28px; }
.start-intro { text-align: left; line-height: 1.55; margin-bottom: 18px; }
.start-avatars { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.start-avatar {
  border: 2px solid var(--border); border-radius: 14px; padding: 8px; cursor: pointer;
  background: var(--panel2); transition: all .15s;
}
.start-avatar:hover { border-color: var(--accent2); transform: translateY(-3px); }
.start-avatar.sel { border-color: var(--accent); background: var(--panel3); box-shadow: 0 0 16px rgba(255, 215, 106, .35); }
.start-avatar .avatar-img { border: none; box-shadow: none; }
.av-name { font-size: .75rem; color: var(--muted); margin-top: 4px; }
.name-input {
  width: 100%; padding: 11px 14px; border-radius: 9px; border: 2px solid var(--border);
  background: #14110c; color: var(--text); font-family: inherit; font-size: 1rem; margin-bottom: 4px;
}
.name-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 215, 106, .25); }

/* ---------- Floating Numbers & Partikel ---------- */
#floaters { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.floater {
  position: absolute; top: 38%;
  font-family: 'Alfa Slab One', serif; font-size: 1.5rem; color: var(--accent);
  text-shadow: 2px 2px 0 #000, 0 0 14px rgba(255, 215, 106, .6);
  animation: floatUp 2s ease-out forwards;
}
.floater.gold { color: #ffd76a; }
.floater.good { color: var(--good); text-shadow: 2px 2px 0 #000, 0 0 14px rgba(143, 200, 85, .6); }
.floater.bad { color: var(--bad); text-shadow: 2px 2px 0 #000, 0 0 14px rgba(224, 106, 82, .6); }
.floater.beer { color: var(--beer); text-shadow: 2px 2px 0 #000, 0 0 14px rgba(245, 166, 35, .6); }
.floater.passive { font-size: 1.05rem; color: #aff07a; opacity: .9; }
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(20px) scale(.7); }
  15% { opacity: 1; transform: translateY(0) scale(1.12); }
  30% { transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-110px) scale(.92); }
}
.spark {
  position: absolute; top: 42%; font-size: 1.4rem;
  animation: sparkFly 1.2s ease-out forwards;
}
@keyframes sparkFly {
  0% { opacity: 1; transform: translate(0, 0) scale(.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(40deg); }
}
.confetto {
  position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(var(--rot)); opacity: .7; }
}

/* ---------- Modals ---------- */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(8, 7, 4, .75); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 300;
  opacity: 0; transition: opacity .25s; padding: 16px;
}
#modal-overlay.show { opacity: 1; }
.modal-card {
  background: linear-gradient(180deg, var(--panel3), var(--panel));
  border: 3px solid var(--accent2); border-radius: 18px;
  max-width: 460px; width: 100%; padding: 0 22px 22px; text-align: center;
  box-shadow: 0 0 50px rgba(255, 215, 106, .25), 0 20px 60px rgba(0, 0, 0, .7);
  transform: scale(.85); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}
#modal-overlay.show .modal-card { transform: scale(1); }
.modal-hero { width: calc(100% + 44px); margin: 0 -22px 14px; height: 130px; object-fit: cover; display: block; }
.modal-title { color: var(--text); font-size: 1.45rem; margin-bottom: 10px; text-shadow: 2px 2px 0 #000; }
.modal-title.gold { color: var(--accent); font-size: 2rem; text-shadow: 2px 3px 0 #000, 0 0 26px rgba(255, 215, 106, .6); }
.modal-sub { color: var(--muted); margin-bottom: 12px; }
.lvlup-burst { font-size: 3.4rem; margin-top: 18px; animation: lvlBounce 1s ease infinite alternate; }
@keyframes lvlBounce { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.18) rotate(6deg); } }
.wb-row {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px;
}
.wb-row > div { flex: 1; }
.wb-row small { color: var(--muted); display: block; line-height: 1.3; }
.wb-ico { font-size: 1.5rem; }
.wb-val { color: var(--good); font-weight: 800; white-space: nowrap; }
.wb-row.daily { border-color: var(--accent2); }

/* ---------- Toasts ---------- */
#toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 250; max-width: 390px; }
.toast {
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
  border: 2px solid var(--accent2); border-left-width: 6px;
  border-radius: 10px; padding: 10px 14px; font-size: .88rem;
  opacity: 0; transform: translateX(40px); transition: all .35s cubic-bezier(.34, 1.3, .64, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.good { border-color: var(--good); }
.toast.bad { border-color: var(--bad); }
.toast.achieve { border-color: var(--accent); box-shadow: 0 0 24px rgba(255, 215, 106, .35); }
.ach-pop { display: flex; gap: 10px; align-items: center; }
.ach-ico { font-size: 1.9rem; }

/* ---------- Footer ---------- */
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 14px 0 24px; }
.foot a { color: var(--accent2); }

/* ---------- Hero-Card (Penner im Mittelpunkt) ---------- */
.hero-card { text-align: center; padding: 18px 16px; }
.hero-av { position: relative; display: inline-block; }
.hero-av .avatar-img {
  border-radius: 50%; border: 3px solid var(--accent2);
  box-shadow: 0 0 26px rgba(255, 215, 106, .3), 0 8px 22px rgba(0, 0, 0, .5);
}
.hero-lvl {
  position: absolute; bottom: 2px; right: -10px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #221c10; font-weight: 800; font-size: .85rem;
  border-radius: 12px; padding: 3px 10px; border: 2px solid var(--panel);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.hero-name { font-family: 'Alfa Slab One', serif; font-size: 1.35rem; color: var(--accent); margin-top: 10px; text-shadow: 2px 2px 0 #000; }
.hero-rank { color: var(--muted); font-style: italic; font-size: .85rem; margin-bottom: 8px; }
.hero-xp { width: min(300px, 80%); margin: 0 auto 4px; }
.quick-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
  margin-top: 14px; max-width: 560px; margin-left: auto; margin-right: auto;
}
.btn.quick {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 6px; font-size: .82rem;
}
.btn.quick span { font-size: 1.5rem; }

/* ---------- Mobile: Bottom-Nav & Sheet ---------- */
.bottom-nav { display: none; }
#sheet-overlay {
  position: fixed; inset: 0; background: rgba(8, 7, 4, .65); z-index: 280;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
#sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--panel3), var(--panel));
  border-top: 3px solid var(--accent2); border-radius: 20px 20px 0 0;
  padding: 10px 14px calc(96px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.34, 1.2, .64, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
}
#sheet-overlay.open .sheet { transform: translateY(0); }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--border-hi); margin: 2px auto 12px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-btn {
  background: rgba(0, 0, 0, .28); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px; font-size: 1.4rem; transition: all .15s;
}
.sheet-btn small { font-size: .68rem; color: var(--muted); }
.sheet-btn.active { border-color: var(--accent); background: rgba(255, 215, 106, .12); }
.sheet-btn.active small { color: var(--accent); }
.sheet-foot { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

/* ---------- Responsive: App-Style auf dem Smartphone ---------- */
@media (max-width: 780px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .wrap { padding: 6px; }
  .main { flex-direction: column; align-items: stretch; } /* stretch: .view füllt Breite, Subtabs scrollen statt zu überlaufen */
  .side { display: none; }              /* Sidebar → Bottom-Nav */
  .foot { display: none; }
  .ticker { display: none; }

  /* Kompakter Header */
  .topbar { min-height: 56px; border-radius: 12px; }
  .topbar-content { min-height: 56px; padding: 7px 12px; gap: 10px; }
  .emblem { width: 40px; height: 40px; }
  .logo { font-size: 1.12rem; }
  .logo-city { font-size: .62rem; letter-spacing: 3px; }

  /* Kompakter HUD: 3 Spalten, klein */
  .statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 6px; position: static; }
  .stat { min-width: 0; padding: 4px 4px; }
  .stat b { font-size: .8rem; }
  .stat small { font-size: .56rem; }
  .bar { width: 100%; }

  /* Inhalte */
  .view h2 { font-size: 1.08rem; }
  .cols > .card { min-width: 100%; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .btn.quick { padding: 14px 6px; font-size: .9rem; }
  .dur-grid .btn { min-width: calc(50% - 4px); }
  .shop-grid, .ach-grid { grid-template-columns: 1fr 1fr; }
  .shop-item { flex-direction: column; align-items: center; text-align: center; }
  .shop-foot { justify-content: center; }
  .crew-row { flex-wrap: wrap; }
  .crew-buy { flex: 1; }
  .map-cols > .card:last-child { max-width: none; }
  #toasts { bottom: calc(96px + env(safe-area-inset-bottom)); right: 8px; left: 8px; max-width: none; }
  .modal-card { max-width: 94vw; }

  /* Bottom-Tab-Bar */
  .bottom-nav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  }
  .mob-activity {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(180deg, var(--panel3), var(--panel2));
    border-top: 2px dashed var(--accent2);
    padding: 5px 12px; font-size: .82rem;
  }
  .mob-activity:empty { display: none; }
  .mob-act-time { font-family: 'Courier New', monospace; color: var(--accent); }
  .tabs {
    display: flex;
    background: linear-gradient(180deg, #2e2920, #1d1a13);
    border-top: 2px solid var(--border-hi);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .55);
  }
  .tab {
    flex: 1; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    color: var(--muted); font-family: inherit; padding: 4px 0;
    transition: all .15s;
  }
  .tab-ico { font-size: 1.45rem; filter: grayscale(.6) brightness(.85); transition: all .15s; }
  .tab small { font-size: .6rem; letter-spacing: .3px; }
  .tab.active { color: var(--accent); }
  .tab.active .tab-ico { filter: none; transform: translateY(-2px) scale(1.12); }
  .tab.active small { font-weight: 700; }
}

@media (max-width: 420px) {
  .shop-grid, .ach-grid { grid-template-columns: 1fr; }
  .start-avatars { gap: 6px; }
  .start-avatar .avatar-img { width: 64px !important; height: 64px !important; }
}

/* ---------- Auth & Clan ---------- */
.auth-sect { margin-top: 16px; }
.auth-divider { color: var(--muted); font-size: .78rem; letter-spacing: 1px; margin-bottom: 10px; }
.auth-buttons { display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 20px; }
/* Login-First-Startscreen */
.auth-primary { margin: 10px 0 4px; }
.login-or { text-align: center; margin: 16px 0 12px; position: relative; }
.start-login-lead { margin-top: 6px; }
.start-back { display: inline-block; margin: 2px 0 8px; font-size: .85rem; text-decoration: none; }
.start-back:hover { color: var(--accent); }
.apple-btn {
  background: #000; color: #fff; border: 2px solid #333;
  border-radius: 20px; width: 270px; padding: 9px 16px; box-shadow: none;
}
.apple-btn:hover:not(:disabled) { filter: brightness(1.25); }
.clan-form { display: flex; flex-wrap: wrap; gap: 8px; }
.clan-form .name-input { flex: 1; min-width: 170px; margin: 0; }
.clan-tag-input { max-width: 110px; text-transform: uppercase; }
.clan-pips { color: var(--accent); letter-spacing: 2px; font-size: .8rem; margin-left: 4px; }
.clan-head { text-align: center; }
.clan-head .bank-actions { justify-content: center; }
/* Clan: Verwaltung, Einladungen, Rollen */
.clan-admin .set-row { border-bottom: 1px dashed #3a342a; }
.clan-invite-form { display: flex; gap: 8px; padding-top: 12px; }
.clan-invite-form .name-input { flex: 1; min-width: 0; margin: 0; }
.clan-pending { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clan-pending-chip { background: #2a2620; border: 1px solid #4a4030; border-radius: 12px; padding: 2px 8px; font-size: .8rem; }
.clan-pending-chip a { color: #d98; text-decoration: none; margin-left: 4px; font-weight: 800; }
.clan-invites-card .clan-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #3a342a; }
.clan-invites-card .clan-invite-row:last-child { border-bottom: none; }
.clan-members td.clan-mem-badge { width: 1.6em; text-align: center; font-size: 1.05rem; }
.clan-members td.clan-mem-actions { white-space: nowrap; text-align: right; }
.btn.tiny { padding: 3px 7px; font-size: .82rem; line-height: 1.1; min-width: 0; margin-left: 4px; }

/* ---------- Charakter-Editor ---------- */
.creator { display: flex; gap: 16px; align-items: flex-start; text-align: left; margin-bottom: 10px; }
.creator-preview {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 14px; padding: 10px;
}
.creator-rows { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cr-label { width: 86px; flex-shrink: 0; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--border); transition: all .12s;
}
.swatch:hover { transform: scale(1.15); }
.swatch.sel { border-color: var(--accent); box-shadow: 0 0 8px rgba(255, 215, 106, .6); }
.chip {
  background: rgba(0, 0, 0, .3); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text); font-family: inherit; font-size: .76rem; padding: 4px 10px; cursor: pointer;
  transition: all .12s;
}
.chip:hover { border-color: var(--accent2); }
.chip.sel { background: var(--accent2); color: #221c10; font-weight: 700; border-color: var(--accent); }
.avatar-svg { display: inline-block; }

/* ---------- Barbier ---------- */
.barber-preview { text-align: center; min-width: 260px; }
.barber-preview .creator-rows { text-align: left; }
.barber-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.barber-tile {
  background: rgba(0, 0, 0, .25); border: 2px solid var(--border); border-radius: 12px;
  padding: 8px 4px 6px; text-align: center; cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.barber-tile:hover:not(.locked) { border-color: var(--accent2); transform: translateY(-2px); }
.barber-tile.equipped { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 215, 106, .3); }
.barber-tile.locked { opacity: .55; cursor: not-allowed; filter: saturate(.4); }
.barber-tag { font-size: .64rem; color: var(--muted); font-weight: 700; }
.equipped-tag { color: var(--accent); }
.price-tag { color: var(--bad); }
.price-tag.can { color: var(--good); }
.locked-tag { color: #c9a227; }

/* ---------- Profilseite & Designs ---------- */
.profile-card { padding: 18px; }
.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-id { flex: 1; min-width: 200px; }
.profile-id .hero-name { font-size: 1.5rem; margin-top: 0; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-chips span {
  background: rgba(0, 0, 0, .3); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; font-size: .8rem;
}
.profile-bio {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(0, 0, 0, .22); border-left: 4px solid var(--accent2);
  font-style: italic; font-size: 1.02rem;
}
.profile-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.bio-area { resize: vertical; min-height: 70px; margin-bottom: 10px; }

.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.design-tile {
  border: 2px solid var(--border); border-radius: 12px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 5px; min-height: 110px;
}
.design-tile small { opacity: .85; flex: 1; }
.design-tile.active { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 215, 106, .3); }
.design-tile .btn { align-self: flex-start; }

/* Die 6 Designs */
.pdesign-karton {
  background: repeating-linear-gradient(90deg, #3d3526 0 14px, #36301f 14px 28px);
  border-color: #6a5d42 !important;
}
.pdesign-stint {
  background: linear-gradient(160deg, #1d2a38 0%, #25364a 55%, #3a2c1d 100%);
  border-color: #3d5a6b !important;
  box-shadow: inset 0 0 50px rgba(245, 166, 35, .12), 0 4px 14px rgba(0, 0, 0, .35);
}
.pdesign-ilmenau {
  background: linear-gradient(180deg, #16323a 0%, #1d4a50 60%, #25555a 100%);
  border-color: #3d6b6b !important;
}
.pdesign-graffiti {
  background:
    radial-gradient(circle at 18% 25%, rgba(217, 95, 74, .35), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(109, 179, 209, .3), transparent 30%),
    radial-gradient(circle at 60% 80%, rgba(143, 200, 85, .28), transparent 36%),
    radial-gradient(circle at 30% 75%, rgba(212, 160, 23, .3), transparent 30%),
    #23201c;
  border-color: #555 !important;
}
.pdesign-salz {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .12), transparent 25%),
    radial-gradient(circle at 75% 60%, rgba(255, 215, 106, .18), transparent 35%),
    linear-gradient(160deg, #3a3220 0%, #4a3c1d 100%);
  border-color: var(--accent) !important;
  box-shadow: 0 0 18px rgba(255, 215, 106, .25);
}
.pdesign-krone {
  background: linear-gradient(160deg, #2d1a3a 0%, #3d2250 55%, #4a2a18 100%);
  border: 3px double var(--accent) !important;
  box-shadow: inset 0 0 40px rgba(212, 160, 23, .2), 0 0 22px rgba(212, 160, 23, .3);
}

@media (max-width: 600px) {
  .creator { flex-direction: column; align-items: center; }
  .creator-rows { width: 100%; }
  .profile-head { justify-content: center; text-align: center; }
  .profile-chips { justify-content: center; }
}

/* ---------- Sprite-Avatare ---------- */
.sprite-stack { position: relative; display: inline-block; }
.sprite-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
}
.avatar-svg .sprite-stack { border-radius: inherit; }
.hero-av .avatar-svg, .side-avatar .avatar-svg { overflow: hidden; }

/* ---------- Sprache ---------- */
.start-lang { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.profile-lang { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: .82rem; }

/* ---------- Arena-Kämpfe (Shakes & Fidget Style) ---------- */
.arena-card { padding: 0; overflow: hidden; text-align: center; }
.arena-teaser { width: 100%; max-height: 240px; object-fit: cover; object-position: center 65%; display: block; }
.arena-card-body { padding: 14px 18px 18px; }
.arena-card-body .act-timer { font-size: 1.8rem; }

#battle-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 7, 4, .88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 12px;
  opacity: 0; transition: opacity .25s;
}
#battle-overlay.show { opacity: 1; }
.battle-arena {
  position: relative; width: min(920px, 96vw); aspect-ratio: 16 / 10;
  max-height: 92vh; border-radius: 18px; overflow: hidden;
  border: 3px solid var(--accent2);
  box-shadow: 0 0 60px rgba(255, 215, 106, .25), 0 24px 80px rgba(0, 0, 0, .8);
  background: #1d1b15;
}
.arena-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; filter: brightness(.92); }
.battle-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10, 9, 6, .85), transparent);
}
.b-plate { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.b-plate.left { text-align: left; }
.b-plate.right { text-align: right; align-items: flex-end; }
.b-plate b { font-family: 'Alfa Slab One', serif; color: var(--accent); text-shadow: 2px 2px 0 #000; font-size: 1.02rem; }
.b-plate small { color: #d8cdb2; }
.bhp { width: min(240px, 100%); height: 13px; background: #12100b; border: 1px solid #000; border-radius: 7px; overflow: hidden; margin-top: 3px; }
.bhp-fill { height: 100%; background: linear-gradient(90deg, #d95f4a, #8fc855); transition: width .35s ease; }
.b-vs {
  font-family: 'Alfa Slab One', serif; font-size: 1.7rem; color: var(--bad);
  text-shadow: 2px 3px 0 #000; padding-top: 4px; flex-shrink: 0;
}
.b-fighter {
  position: absolute; bottom: 7%; z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6));
  transition: transform .22s ease;
}
.b-fighter.left { left: 11%; }
.b-fighter.right { right: 11%; }
.b-fighter.right .sprite-stack, .b-fighter.right .avatar-svg, .b-fighter.right svg { transform: scaleX(-1); }
.b-fighter.lunge-r { transform: translateX(56px) rotate(4deg); }
.b-fighter.lunge-l { transform: translateX(-56px) rotate(-4deg); }
.b-fighter.hit { animation: bHit .24s ease; }
@keyframes bHit { 30% { transform: translateX(0) rotate(0) scale(.94); filter: drop-shadow(0 0 18px rgba(224, 106, 82, .9)); } }
.b-fighter.ko { transform: rotate(82deg) translateY(34px); opacity: .55; transition: all .7s ease; }
.b-dmg {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-family: 'Alfa Slab One', serif; font-size: 1.6rem; color: #ffd76a;
  text-shadow: 2px 2px 0 #000; animation: bDmg 1.05s ease-out forwards; white-space: nowrap; z-index: 3;
}
.b-dmg.crit { color: var(--bad); font-size: 2rem; }
.b-dmg.dodge { color: #9bd1e8; font-size: 1.1rem; }
@keyframes bDmg { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.6); } 18% { opacity: 1; transform: translateX(-50%) scale(1.15); } 100% { opacity: 0; transform: translateX(-50%) translateY(-58px) scale(.95); } }
.b-banner { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; background: rgba(10, 9, 6, .55); }
.b-banner.show { display: flex; }
.b-result {
  background: linear-gradient(180deg, var(--panel3), var(--panel));
  border: 3px solid var(--accent2); border-radius: 18px; padding: 26px 34px; text-align: center;
  animation: bPop .35s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 0 50px rgba(255, 215, 106, .3);
}
.b-result.lose { border-color: var(--bad); box-shadow: 0 0 40px rgba(224, 106, 82, .3); }
.b-result-h { font-family: 'Alfa Slab One', serif; font-size: 2.2rem; color: var(--accent); text-shadow: 2px 3px 0 #000; }
.b-result.lose .b-result-h { color: var(--bad); }
.b-result-sub { color: var(--text); margin: 8px 0 14px; font-size: 1.05rem; }
@keyframes bPop { from { transform: scale(.6); opacity: 0; } }
.b-skip { position: absolute; top: 72px; right: 14px; z-index: 5; }
@media (max-width: 700px) {
  .battle-arena { aspect-ratio: auto; height: min(86vh, 560px); }
  .b-fighter.left { left: 2%; }
  .b-fighter.right { right: 2%; }
  .b-fighter .sprite-stack, .b-fighter .avatar-svg { width: 130px !important; height: 130px !important; }
  .bhp { width: 100%; }
}

/* ---------- UI-Icons ---------- */
.uiico { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.3em; }
.stat-ico .uiico { width: 20px; height: 20px; }
.tab-ico .uiico { width: 26px; height: 26px; }
.sheet-btn .uiico { width: 30px; height: 30px; }
.btn.quick .uiico { width: 30px; height: 30px; }
.view h2 .uiico { width: 28px; height: 28px; }

/* ---------- Salzkatakomben ---------- */
.dungeon-card { padding: 0; overflow: hidden; }
.dungeon-gate { width: 100%; max-height: 220px; object-fit: cover; object-position: center 60%; display: block; }
.dgn-progress { margin: 8px 0; }
.boss-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.boss-mini {
  position: relative; width: 52px; height: 52px; border-radius: 10px;
  background: rgba(0, 0, 0, .35); border: 2px solid var(--border); overflow: hidden;
}
.boss-mini img { width: 100%; height: 100%; object-fit: contain; }
.boss-mini.dead img { filter: grayscale(1) brightness(.5); }
.boss-mini.next { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 215, 106, .45); }
.boss-mini.locked img { filter: brightness(.18); }
.boss-x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bad); font-weight: 900; font-size: 1.5rem; text-shadow: 1px 1px 0 #000; }
.boss-card { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.boss-portrait { flex-shrink: 0; width: min(240px, 40vw); }
.boss-portrait img { width: 100%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); animation: bossFloat 3.2s ease-in-out infinite; }
@keyframes bossFloat { 50% { transform: translateY(-7px); } }
.boss-info { flex: 1; min-width: 250px; }
.drop-list { background: rgba(0, 0, 0, .25); border: 1px dashed var(--border-hi); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.drop-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-bottom: 1px dashed #3a342a; }
.drop-row:last-child { border-bottom: none; }
.drop-row span { flex: 1; }
.drop-row.owned { opacity: .55; }
.drop-ico { width: 30px; height: 30px; object-fit: contain; }
.drop-chance { color: var(--accent); font-variant-numeric: tabular-nums; }
.drop-row.title-row .drop-chance, .title-line { color: #c9a2ff; }
.dgn-rewards { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dgn-line { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.dgn-line.drop-line { color: var(--accent); font-weight: 700; text-shadow: 0 0 12px rgba(255, 215, 106, .5); }
.boss-sprite { width: 230px; height: 230px; object-fit: contain; }
@media (max-width: 700px) { .boss-sprite { width: 150px !important; height: 150px !important; } }

/* ---------- Profil-Titel ---------- */
.profile-title { font-family: 'Alfa Slab One', serif; color: #c9a2ff; font-size: .95rem; text-shadow: 1px 1px 0 #000; margin: 2px 0; }
.title-picker { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 100%; }

/* ---------- Haustiere ---------- */
.active-pet-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.active-pet-portrait { flex-shrink: 0; }
.pet-img-big { width: min(190px, 38vw); filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); animation: bossFloat 3.4s ease-in-out infinite; }
.pet-grid .pet-portrait { flex-shrink: 0; }
.pet-grid .pet-img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.pet-card.pet-locked { opacity: .85; }
.pet-portrait.silhouette img { filter: brightness(0) opacity(.75); }
.pet-locked-tag { color: var(--muted); font-size: .8rem; font-weight: 700; }
.pet-dgn-tag { color: var(--accent); font-size: .8rem; font-weight: 700; cursor: pointer; }
.dog-row .pet-img { width: 70px; height: 70px; object-fit: contain; }
.profile-pet {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
}
.profile-pet-img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

/* ---------- Onboarding: Quests & Strassenfunde ---------- */
.quest-strip {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: linear-gradient(90deg, rgba(143, 200, 85, .14), rgba(143, 200, 85, .03));
  border: 2px solid #5a7a3a; border-radius: 12px;
  padding: 9px 14px; margin-bottom: 10px; transition: all .15s;
}
.quest-strip:hover { border-color: var(--good); box-shadow: 0 0 14px rgba(143, 200, 85, .25); }
.q-ico { font-size: 1.7rem; }
.newbie-boost { color: var(--good); font-weight: 700; font-size: .85rem; }
.street-bottle {
  position: fixed; z-index: 140; background: none; border: none; cursor: pointer;
  padding: 6px; animation: streetPop .35s cubic-bezier(.34, 1.56, .64, 1), streetWiggle 1.6s ease-in-out .4s infinite;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(255, 215, 106, .45));
  transition: opacity .5s;
}
.street-bottle img { width: 44px; height: 44px; pointer-events: none; }
.street-bottle.fade { opacity: 0; }
.street-bottle:active { transform: scale(.8); }
@keyframes streetPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1); } }
@keyframes streetWiggle { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }

/* ---------- Untertabs ---------- */
.subtabs {
  display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 11px; padding: 4px;
}
.subtab {
  flex: 1; min-width: 90px; background: none; border: none; border-radius: 8px;
  color: var(--muted); font-family: inherit; font-size: .88rem; font-weight: 700;
  padding: 8px 10px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.subtab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.subtab.active { background: linear-gradient(180deg, var(--accent), var(--accent2)); color: #221c10; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* Mobile: Untertabs horizontal scrollen statt umbrechen/überlappen */
@media (max-width: 780px) {
  .subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { flex: 0 0 auto; min-width: 0; font-size: .82rem; padding: 8px 12px; }
}
.subview > h2:first-child { display: none; }

/* ---------- Deine Platte ---------- */
.platte-card { padding: 0; overflow: hidden; }
.platte-scene { width: 100%; max-height: 280px; object-fit: cover; object-position: center 55%; display: block; }
.next-home {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(0, 0, 0, .25); border: 1px dashed var(--border-hi); border-radius: 12px;
  padding: 10px 14px; margin-top: 10px;
}
.next-home-thumb { width: 86px; height: 64px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border-hi); }

/* ---------- Penner-Pilot ---------- */
.pilot-sug { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.pilot-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--border); border-radius: 12px; padding: 9px 14px;
}
.pilot-card.hot { border-color: var(--accent2); box-shadow: 0 0 12px rgba(255, 215, 106, .18); }
.pilot-queue { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pilot-qrow {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px;
}
.pilot-qrow .q-label { flex: 1; }
.pilot-add-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pilot-boost-card { text-align: center; border-color: var(--accent2); }

/* ---------- Retention: Tagesaufträge & Event ---------- */
.daily-card .daily-row {
  display: flex; align-items: center; gap: 11px; padding: 7px 0; border-bottom: 1px dashed #3a342a;
}
.daily-card .daily-row:last-child { border-bottom: none; }
.daily-row.done { opacity: .6; }
.daily-row .goal-info { flex: 1; }
.daily-row .goal-bar { margin-top: 4px; }
.event-banner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(109, 179, 209, .16), rgba(109, 179, 209, .03));
  border: 2px solid #4a6b7a; border-radius: 12px; padding: 9px 14px;
}
.event-ico { font-size: 1.8rem; }
.event-banner .goal-info small { color: var(--muted); display: block; }

/* ---------- Settings ---------- */
.settings-card .set-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px dashed #3a342a;
}
.settings-card .set-row:last-child { border-bottom: none; }
.set-row > div:first-child { display: flex; flex-direction: column; }
.set-row small { color: var(--muted); }
.set-langs { display: flex; gap: 6px; }
/* Referral / Freunde werben */
.ref-codebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #3a342a; }
.ref-codebox > div { display: flex; flex-direction: column; }
.ref-code { font-family: ui-monospace, monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.ref-count { font-weight: 800; font-size: 1.1rem; color: var(--accent); }
.ref-redeem { display: flex; gap: 8px; padding-top: 12px; }
.ref-input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #4a4030; background: #1c1812; color: var(--text); font-family: ui-monospace, monospace; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
/* Consent-/Cookie-Banner */
#consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #1c1812; border-top: 1px solid #4a4030; box-shadow: 0 -6px 20px rgba(0,0,0,.4); padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.consent-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.consent-text { color: var(--text); font-size: .9rem; line-height: 1.45; flex: 1; min-width: 220px; }
.consent-text a { color: var(--accent); }
.consent-inner .btn { flex: 0 0 auto; }
.auth-gate-btn { min-width: 240px; background: #2a2620; color: #9a9384; border: 1px dashed #5a5040; opacity: .65; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.auth-gate-btn:hover { opacity: 1; filter: grayscale(.3); }
.auth-consent-note { font-size: .8rem; line-height: 1.4; margin: 8px 0 0; }
.legal-mini { margin-top: 12px; font-size: .8rem; }
.legal-mini a { color: var(--accent); }
/* Game-Master-Panel */
.gm-card { border: 1px solid #6a4ad0; box-shadow: 0 0 10px rgba(120,90,220,.18); }
.gm-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.gm-row .name-input { flex: 1; min-width: 90px; margin: 0; }
.gm-info { font-size: .85rem; line-height: 1.6; }
.gm-pl { padding: 3px 0; border-bottom: 1px dashed #3a342a; }
.gm-err { color: #e88; }
.set-version { text-align: center; margin-top: 12px; font-size: .78rem; }

/* ---------- Aktivitäts-Buttons (Abbrechen/Skip) ---------- */
.act-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.act-btns .btn { flex: 1; min-width: 90px; }

/* ---------- Manueller Sync-Button ---------- */
#refresh-btn.spin { animation: spin360 .8s linear infinite; pointer-events: none; }
@keyframes spin360 { to { transform: rotate(360deg); } }

/* ---------- Daddelautomat (Slots) ---------- */
.slot-card { text-align: center; }
.slot-marquee { max-width: 360px; width: 90%; display: block; margin: 0 auto 10px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.slot-reels {
  display: flex; gap: 8px; justify-content: center; padding: 12px;
  background: linear-gradient(180deg, #1a160f, #2a2418);
  border: 3px solid var(--accent2); border-radius: 14px; max-width: 340px; margin: 0 auto;
  box-shadow: inset 0 0 24px rgba(0,0,0,.7);
}
.reel {
  width: 92px; height: 92px; background: radial-gradient(circle, #3a3322, #1d1912);
  border: 2px solid var(--border-hi); border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.reel img { width: 80px; height: 80px; object-fit: contain; }
.reel .iemo { font-size: 3rem; }
.reel.spinning img { filter: blur(2px); animation: reelBlur .08s linear infinite; }
@keyframes reelBlur { 0% { transform: translateY(-6px); } 100% { transform: translateY(6px); } }
.reel.reel-stop { animation: reelBounce .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes reelBounce { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.slot-msg { min-height: 1.4em; margin: 10px 0; font-weight: 700; color: var(--accent); opacity: 0; transition: opacity .2s; }
.slot-msg.show { opacity: 1; }
.slot-cur, .slot-bets { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.slot-lever { max-width: 320px; margin: 6px auto 0; }
.slot-bal { margin-top: 8px; }
.paytable { width: 100%; border-collapse: collapse; max-width: 420px; margin: 0 auto; }
.paytable th, .paytable td { padding: 5px 8px; border-bottom: 1px dashed #3a342a; text-align: center; font-size: .9rem; }
.paytable th { color: var(--muted); font-size: .78rem; }
.pt-sym { text-align: left !important; display: flex; align-items: center; gap: 7px; }
.pt-sym img { width: 26px; height: 26px; object-fit: contain; }
.pt-sym .iemo { font-size: 1.3rem; width: auto; height: auto; }

/* ---------- Fuhrpark / Mounts ---------- */
.mount-item.mount-special { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,215,106,.25); }
.mount-item.mount-special b { color: var(--accent); }

/* ---------- Emoji-Ersatz-Icons ---------- */
.ei { width: 1.12em; height: 1.12em; object-fit: contain; vertical-align: -0.18em; display: inline-block; }
.emo-wrap { display: contents; }
h2 .ei, h3 .ei { width: 1.05em; height: 1.05em; }
.floater .ei { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ---------- Maloche / Aktives Farmen ---------- */
.farm-card .farm-cap { margin: 8px 0 12px; }
.farm-card .farm-cap .bar { width: 100%; height: 12px; }
.farm-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.farm-map {
  position: relative; border: 2px solid var(--border); border-radius: 12px; overflow: hidden;
  cursor: pointer; padding: 0; background: var(--panel2); text-align: left; transition: all .15s; color: var(--text);
}
.farm-map:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.farm-map:disabled { opacity: .4; cursor: not-allowed; }
.farm-map img { width: 100%; height: 90px; object-fit: cover; display: block; }
.farm-map-name { display: block; font-weight: 800; padding: 6px 10px 0; color: var(--accent); font-size: .95rem; }
.farm-map small { display: block; padding: 0 10px 8px; color: var(--muted); font-size: .76rem; }

/* Minispiel-Overlay */
#farm-overlay { position: fixed; inset: 0; z-index: 300; background: #0c0a07; opacity: 0; transition: opacity .2s; }
#farm-overlay.show { opacity: 1; }
.farm-game { position: absolute; inset: 0; overflow: hidden; }
.farm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); }
.farm-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: linear-gradient(180deg, rgba(0,0,0,.7), transparent);
}
#farm-score { font-family: 'Alfa Slab One', serif; font-size: 1.6rem; color: var(--accent); text-shadow: 2px 2px 0 #000; }
.farm-time { font-family: 'Courier New', monospace; font-size: 1.1rem; color: #fff; }
.farm-hud .btn { margin-left: auto; }
.farm-field { position: absolute; inset: 0; z-index: 1; }
.farm-target {
  position: absolute; width: 64px; height: 64px; padding: 0; border: none; background: none; cursor: pointer;
  transform: scale(0); animation: farmPop .18s forwards;
}
.farm-target img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
@keyframes farmPop { to { transform: scale(1); } }
.farm-target.hit { animation: farmHit .18s forwards; }
@keyframes farmHit { to { transform: scale(1.5); opacity: 0; } }
.farm-target.gone { animation: farmGone .25s forwards; }
@keyframes farmGone { to { transform: scale(.4); opacity: 0; } }
.farm-hint {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; text-align: center;
  padding: 10px; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); color: #f0e8d4; font-weight: 700;
}

/* ---------- Minispiel: Pfand-Stapeln ---------- */
.stack-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 18vh; gap: 18px; }
.stack-tower { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; min-height: 40vh; justify-content: flex-start; }
.stack-block { width: 90px; height: 22px; background: linear-gradient(180deg, var(--accent), var(--accent2)); border: 2px solid #6b5215; border-radius: 4px; animation: farmPop .15s; }
.stack-bar { position: relative; width: 78vw; max-width: 520px; height: 26px; background: #1a160f; border: 2px solid var(--border-hi); border-radius: 13px; overflow: hidden; }
.stack-zone { position: absolute; top: 0; bottom: 0; background: rgba(143,200,85,.45); border-left: 2px solid var(--good); border-right: 2px solid var(--good); }
.stack-marker { position: absolute; top: -3px; width: 8px; height: 32px; background: #fff; border-radius: 4px; box-shadow: 0 0 8px #fff; transform: translateX(-50%); }
.stack-marker.miss { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.stack-go { width: 60vw; max-width: 360px; }

/* ---------- Minispiel: Dosen-Weitwurf ---------- */
.toss-can { position: absolute; left: 8vw; bottom: 28vh; width: 70px; height: 70px; z-index: 2; }
.toss-can img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.toss-wrap { position: absolute; right: 8vw; bottom: 16vh; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 3; }
.toss-meter { position: relative; width: 36px; height: 40vh; background: #1a160f; border: 2px solid var(--border-hi); border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; }
.toss-fill { width: 100%; height: 0%; background: linear-gradient(0deg, var(--accent), #fff); }
.toss-sweet { position: absolute; left: 0; right: 0; top: 8%; height: 14%; background: rgba(255,215,106,.5); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); z-index: 1; }

/* ---------- Minispiel: Sortier-Memory ---------- */
.sort-item { position: absolute; top: 16vh; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; }
.sort-item img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.sort-item.pop { animation: farmPop .18s; }
.sort-bins { position: absolute; bottom: 8vh; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; padding: 0 12px; }
.sort-bin { flex: 1; max-width: 150px; background: var(--panel2); border: 2px solid var(--border-hi); border-radius: 14px; padding: 12px 6px; cursor: pointer; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sort-bin img { width: 52px; height: 52px; object-fit: contain; }
.sort-bin span { font-weight: 800; font-size: .9rem; }
.sort-bin.wrong { border-color: var(--bad); background: rgba(224,106,82,.25); }
.sort-bin:active { transform: scale(.96); }

/* ---------- Ausrüstung / Inventar ---------- */
.equip-top { display: flex; align-items: center; gap: 14px; }
.equip-av .sprite-stack, .equip-av .avatar-svg { border-radius: 12px; }
.equip-stats { flex: 1; min-width: 0; }
.equip-statline { font-weight: 800; color: var(--accent); margin: 4px 0; font-size: 1.02rem; }
.equip-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 14px; }
.equip-slot { display: flex; gap: 10px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--border); border-radius: 12px; padding: 9px; }
.equip-slot.filled { border-color: var(--border-hi); }
.equip-slot-icon { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); border-radius: 10px; }
.eq-item-img { width: 52px; height: 52px; object-fit: contain; }
.eq-empty { width: 30px; height: 30px; opacity: .4; }
.equip-slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.equip-slot-btns { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.up-badge { background: var(--accent); color: #221c10; border-radius: 6px; padding: 0 5px; font-size: .75rem; font-weight: 800; }

/* ---------- Tableiste anpassen ---------- */
.tabedit-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.tabedit-row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; }
.te-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.te-ico img { width: 24px; height: 24px; object-fit: contain; }
.te-name { flex: 1; font-weight: 700; text-align: left; }
.tabedit-avail { margin-top: 8px; }
.tabedit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tabedit-chips .chip img { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; }

/* ---------- Update-Banner ---------- */
#upd-banner { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 400;
  display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #221c10; font-weight: 700; padding: 8px 12px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-width: 92vw; }
@media (max-width: 780px) { #upd-banner { bottom: calc(86px + env(safe-area-inset-bottom)); } }
/* ---------- Upgrade-Erfolgschance ---------- */
.upg-rate { font-size: .82em; font-weight: 700; opacity: .85; padding-left: 2px; }
/* ---------- Goldzähne (Premium-Währung) ---------- */
.gold-stat b { color: #f0c040; }
.btn.gold-skip { background: linear-gradient(180deg, #f0c040, #c9941f); color: #2a1e08; border: none; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px; }
.btn.gold-skip:disabled { opacity: .45; filter: grayscale(.6); }
.btn.gold-skip .ei { width: 1.05em; height: 1.05em; vertical-align: -2px; }
/* Premium-Profildesign */
.design-tile.premium { border: 1.5px solid #f0c040; box-shadow: 0 0 14px rgba(240,192,64,.25); position: relative; }
.design-tile.pdesign-goldzahn { background: linear-gradient(135deg, #3a2c08 0%, #7a5c1a 45%, #f0c040 100%); color: #fff5d8; }
.premium-badge { position: absolute; top: 6px; right: 6px; font-size: .68rem; font-weight: 700;
  background: #f0c040; color: #2a1e08; padding: 1px 6px; border-radius: 8px; }

/* ====================================================== */
/* Animierte Profil-Designs (Goldzähne-Premium)           */
/* Klasse liegt auf Shop-Kachel UND Profilkarte           */
/* ====================================================== */
.design-tile.animated { border-color: #7bd0e0 !important; box-shadow: 0 0 14px rgba(123, 208, 224, .25); }
.premium-badge.anim-badge { background: linear-gradient(90deg, #7b5cff, #46c8e0); color: #fff; }

/* Inhalte über die Animationsebenen heben + Clipping */
.pdesign-salzfunkeln, .pdesign-neonkneipe, .pdesign-feuerwerk { position: relative; overflow: hidden; }
.pdesign-salzfunkeln > *, .pdesign-neonkneipe > *, .pdesign-feuerwerk > * { position: relative; z-index: 1; }
.pdesign-salzfunkeln::before, .pdesign-salzfunkeln::after,
.pdesign-neonkneipe::before,
.pdesign-feuerwerk::before, .pdesign-feuerwerk::after { content: ''; position: absolute; pointer-events: none; z-index: 0; }

/* --- 1) Salz-Funkeln: glitzernde Salzkristalle (20) --- */
.pdesign-salzfunkeln {
  background: linear-gradient(160deg, #1b2630 0%, #233442 60%, #2c2f1d 100%);
  border-color: #6fb6c9 !important; color: #f1f6f8;
}
.pdesign-salzfunkeln::before, .pdesign-salzfunkeln::after {
  inset: 0;
  background-image:
    radial-gradient(circle, #ffffff 1.2px, transparent 2.2px),
    radial-gradient(circle, #ffe9a8 1.2px, transparent 2.2px);
  background-size: 54px 54px, 88px 88px;
  background-position: 8px 14px, 40px 60px;
}
.pdesign-salzfunkeln::before { animation: salz-twinkle 2.3s ease-in-out infinite; }
.pdesign-salzfunkeln::after  { background-position: 30px 44px, 70px 12px; animation: salz-twinkle 3.1s ease-in-out infinite 1.1s; }
@keyframes salz-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }

/* --- 2) Neon-Kneipe: wandernder Neon-Schimmer (40) --- */
.pdesign-neonkneipe {
  background: linear-gradient(160deg, #1a1024 0%, #2a1838 55%, #3a1d2a 100%);
  border-color: #c850a0 !important; color: #ffeef8;
  animation: neon-pulse 2.8s ease-in-out infinite;
}
.pdesign-neonkneipe::before {
  inset: -50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,80,170,.28) 47%, rgba(90,200,255,.30) 53%, transparent 62%);
  background-size: 250% 250%;
  animation: neon-sweep 3.6s linear infinite;
}
@keyframes neon-sweep { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }
@keyframes neon-pulse {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255,60,150,.22), 0 0 14px rgba(255,60,150,.30); }
  50%      { box-shadow: inset 0 0 30px rgba(60,180,255,.26), 0 0 16px rgba(60,180,255,.36); }
}

/* --- 3) Feuerwerk über Lüneburg: zündende Raketen (80) --- */
.pdesign-feuerwerk {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) .8px, transparent 1.6px),
    radial-gradient(circle at 70% 22%, rgba(255,255,255,.4) .8px, transparent 1.6px),
    radial-gradient(circle at 45% 65%, rgba(255,255,255,.35) .8px, transparent 1.6px),
    linear-gradient(180deg, #0d1430 0%, #1a1438 60%, #2a1a30 100%);
  border-color: #d4a017 !important; color: #fdf3e0;
}
.pdesign-feuerwerk::before, .pdesign-feuerwerk::after {
  width: 90px; height: 90px; border-radius: 50%; opacity: 0; transform: scale(.2);
  background: radial-gradient(circle, rgba(255,225,130,.95) 0%, rgba(255,140,60,.55) 32%, transparent 60%);
}
.pdesign-feuerwerk::before { top: 6%; left: 16%; animation: fw-burst 2.9s ease-out infinite; }
.pdesign-feuerwerk::after  { top: 12%; left: 62%;
  background: radial-gradient(circle, rgba(150,210,255,.95) 0%, rgba(80,140,255,.55) 32%, transparent 60%);
  animation: fw-burst 2.9s ease-out infinite 1.45s; }
@keyframes fw-burst {
  0%   { opacity: 0; transform: scale(.2); }
  12%  { opacity: 1; }
  48%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Barrierefreiheit: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .pdesign-salzfunkeln::before, .pdesign-salzfunkeln::after,
  .pdesign-neonkneipe, .pdesign-neonkneipe::before,
  .pdesign-feuerwerk::before, .pdesign-feuerwerk::after { animation: none !important; }
}

/* ---------- Spezialisierungen ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.spec-card { display: flex; flex-direction: column; gap: 6px; }
.spec-head { display: flex; align-items: center; gap: 8px; }
.spec-ico { font-size: 1.6rem; }
.spec-card .btn, .spec-active .btn { align-self: flex-start; }
.spec-active .spec-ico { font-size: 2rem; }
.spec-pts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* ---------- Geldverwahrung ---------- */
.bank-tier-now { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bank-tier-now.locked { color: var(--muted); }
.bank-tier-meta { font-size: .82rem; color: var(--accent); }
.bank-upg { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bank-upg-info { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Banking-Grafiken ---------- */
.bank-tier-now { flex-direction: row !important; align-items: center; gap: 12px; }
.bank-art { width: 88px; height: 88px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.bank-tier-txt { display: flex; flex-direction: column; gap: 2px; }
.bank-art-sm { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }

/* ---------- Klickbare Status-Pills (Schnell-Navigation) ---------- */
.stat.nav-stat { cursor: pointer; transition: background .15s, transform .1s; }
.stat.nav-stat:hover { background: rgba(255, 255, 255, .06); }
.stat.nav-stat:active { transform: scale(.96); }

/* ---------- Aktive Boni / Loadout (Homeview) ---------- */
.loadout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.loadout-tile { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 10px; }
.loadout-tile.nav-stat { cursor: pointer; transition: background .15s, transform .1s; }
.loadout-tile.nav-stat:hover { background: rgba(255,255,255,.06); }
.loadout-tile.nav-stat:active { transform: scale(.97); }
.loadout-tile.warn { border-color: var(--accent); box-shadow: 0 0 10px rgba(255,215,106,.18); }
.loadout-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; display: flex; align-items: center; }
.loadout-ico .ei, .loadout-ico img { width: 30px; height: 30px; object-fit: contain; }
.loadout-txt { display: flex; flex-direction: column; min-width: 0; }
.loadout-txt b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ====================================================== */
/* Radial-/„Zwiebel"-Navigation (Testversion)             */
/* ====================================================== */
.radial-fab{ display:none; position:fixed; z-index:240; right:16px; bottom:calc(86px + env(safe-area-inset-bottom));
  width:58px; height:58px; border-radius:50%; border:2px solid var(--accent);
  background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#221c10; font-size:1.6rem;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.5); align-items:center; justify-content:center; }
.radial-fab:active{ transform:scale(.92); }
body.radial-on .radial-fab{ display:flex; }
/* Auf dem Handy übernimmt der Launcher in der Tab-Leiste → Eck-FAB nur am Desktop */
@media (max-width:780px){ body.radial-on .radial-fab{ display:none; } }
@media (min-width:781px){ .radial-fab{ bottom:24px; } }

/* Mittiger, erhöhter Penner-Launcher in der unteren Leiste */
.tab.tab-launcher{ position:relative; justify-content:flex-end; }
.tab.tab-launcher .tl-av{ width:48px; height:48px; border-radius:50%; overflow:hidden; display:block;
  margin:-18px auto 1px; border:3px solid var(--accent); background:var(--panel);
  box-shadow:0 4px 14px rgba(0,0,0,.55); line-height:0; }
.tab.tab-launcher .tl-av .avatar-svg{ width:100% !important; height:100% !important; }
.tab.tab-launcher small{ color:var(--accent); font-weight:700; }
.tab.tab-launcher:active .tl-av{ transform:scale(.92); }

.radial-ov{ position:fixed; inset:0; z-index:300; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; background:rgba(10,8,5,.93); backdrop-filter:blur(3px); padding:16px; }
.radial-ov.open{ display:flex; }
.radial-stage{ position:relative; width:min(92vw,430px); }
.radial-stage svg{ width:100%; height:auto; display:block; touch-action:manipulation; }
.rseg{ cursor:pointer; }
.rseg path{ transition:fill .12s; }
.rseg:active path{ stroke:var(--accent) !important; stroke-width:2.5 !important; }
.rseg-ico,.rseg-lbl{ text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.rseg-lbl{ font-weight:700; }
.router-group{ transform-origin:200px 200px; animation:rbloom .26s ease; }
@keyframes rbloom{ from{opacity:0; transform:scale(.82);} to{opacity:1; transform:scale(1);} }
.radial-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:29%; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer; text-align:center; }
.radial-center .radial-av{ width:84%; line-height:0; border-radius:50%; overflow:hidden; }
.radial-clabel{ position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  color:var(--accent); font-weight:800; font-size:.68rem; white-space:nowrap;
  background:rgba(10,8,5,.85); border:1px solid var(--border-hi); border-radius:10px; padding:2px 9px; }
.radial-hint{ color:var(--muted); font-size:.84rem; text-align:center; max-width:430px; margin:2px 0 0; }

/* Radial: eigene Icons statt Emoji */
.radial-fab .uiico{ width:30px; height:30px; }
#radial-svg image{ image-rendering:auto; }

/* ---------- Dungeon-Auswahl (scrollende Karten) + Beutezug ---------- */
.dgn-select { display: flex; gap: 9px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dgn-select::-webkit-scrollbar { display: none; }
.dgn-card { flex: 0 0 132px; background: var(--panel); border: 1.5px solid var(--border); border-radius: 13px;
  overflow: hidden; cursor: pointer; transition: .15s; }
.dgn-card:active { transform: scale(.97); }
.dgn-card.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(255,215,106,.28); }
.dgn-card.locked { opacity: .82; }
.dgn-card-thumb { height: 56px; background: #1d1a13 center/cover no-repeat; position: relative; }
.dgn-card-thumb .dgn-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: rgba(8,7,4,.5); }
.dgn-card-body { padding: 7px 9px 8px; }
.dgn-card-body b { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgn-card.active .dgn-card-body b { color: var(--accent); }
.dgn-card-body small { font-size: .66rem; color: var(--muted); }
.dgn-card-bar { height: 5px; background: rgba(0,0,0,.35); border-radius: 3px; overflow: hidden; margin: 5px 0 3px; }
.dgn-card-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.sell-btn { color: var(--muted); }
.dgn-ramp-card { border-color: var(--bad) !important; }
.dgn-ramp-card h3 { color: var(--bad); }
.dgn-ramp-warn { color: var(--bad); font-size: .82rem; font-weight: 600; margin: 4px 0; }
.dgn-cleared-note { color: var(--good); font-weight: 700; padding: 8px 10px; border: 1px dashed #4a6a3a; border-radius: 8px; margin-top: 6px; }

/* ---------- Item-Seltenheiten ---------- */
.rar-green { border-color: #5fbf5f !important; box-shadow: 0 0 8px rgba(95,191,95,.35); }
.rar-blue  { border-color: #4a90e2 !important; box-shadow: 0 0 8px rgba(74,144,226,.4); }
.rar-epic  { border-color: #b061e8 !important; box-shadow: 0 0 10px rgba(176,97,232,.55); animation: epic-glow 1.8s ease-in-out infinite; position: relative; }
@keyframes epic-glow { 0%,100% { box-shadow: 0 0 8px rgba(176,97,232,.4); } 50% { box-shadow: 0 0 18px rgba(176,97,232,.85); } }
.rar-epic::after { content: "✨"; position: absolute; top: -6px; right: -4px; font-size: .8rem; animation: epic-spark 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes epic-spark { 0%,100% { opacity: .4; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.rar-badge { font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 7px; border: 1px solid currentColor; }
.rar-badge.rar-green { color: #6fd06f; } .rar-badge.rar-blue { color: #6aa6f0; } .rar-badge.rar-epic { color: #c585f0; animation: none; box-shadow: none; }
.rar-badge.rar-epic::after { display: none; }
.rar-aff { color: var(--accent) !important; }
.dgn-line.rar-epic, .dgn-line.rar-blue, .dgn-line.rar-green { animation: none; box-shadow: none; border: none; }
.dgn-line.rar-epic { color: #c585f0; } .dgn-line.rar-blue { color: #6aa6f0; } .dgn-line.rar-green { color: #6fd06f; }
.dgn-line.rar-epic::after, .dgn-line.rar-blue::after, .dgn-line.rar-green::after { display: none; }

/* ---------- Beutezug-Liste (inline) ---------- */
.dgn-ramp-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.dgn-ramp-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.22);
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; }
.dgn-ramp-row .iimg { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-hi); }
.dgn-ramp-info { flex: 1; min-width: 0; }
.dgn-ramp-info b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgn-ramp-info small { font-size: .7rem; }
.dgn-ramp-row .btn { flex-shrink: 0; }
.dgn-ramp-row.done { opacity: .55; }

/* ---------- Skills: Werte/Boni-Übersicht ---------- */
.bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.bonus-chip { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.22);
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; }
.bonus-ico { font-size: 1.2rem; display: flex; }
.bonus-ico .uiico { width: 24px; height: 24px; }
.bonus-chip small { display: block; font-size: .64rem; }
.bonus-chip b { font-size: .95rem; color: var(--accent); }

/* ---------- Slots: Auto-Roll ---------- */
.slot-actions { display: flex; gap: 8px; align-items: stretch; }
.slot-actions .slot-lever { flex: 1; }
.slot-auto { flex: 0 0 auto; padding: 0 16px; }
.slot-auto.auto-on { background: linear-gradient(180deg, var(--bad), #a8412f); color: #fff; border: none; animation: auto-pulse 1s ease-in-out infinite; }
@keyframes auto-pulse { 0%,100% { box-shadow: 0 0 0 rgba(224,106,82,.5); } 50% { box-shadow: 0 0 14px rgba(224,106,82,.8); } }

/* ---------- Profil: Ausrüstung um den Charakter (S&F-Style) ---------- */
.profile-gear { display: flex; align-items: center; justify-content: center; gap: 12px; }
.gear-col { display: flex; flex-direction: column; gap: 9px; }
.gear-amulet-row { display: flex; justify-content: center; margin-top: 9px; }
.gear-slot { width: 54px; height: 54px; border-radius: 11px; background: rgba(0,0,0,.32);
  border: 1.5px solid var(--border-hi); display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0; }
.gear-slot.empty { opacity: .45; }
.gear-slot .gear-item-img { width: 46px; height: 46px; object-fit: contain; }
.gear-slot .gear-empty { width: 26px; height: 26px; opacity: .6; }
.gear-lvl { position: absolute; bottom: -5px; right: -5px; background: var(--accent); color: #221c10;
  font-size: .6rem; font-weight: 700; padding: 0 5px; border-radius: 7px; border: 1px solid #221c10; }
@media (max-width: 420px) { .gear-slot { width: 48px; height: 48px; } .gear-slot .gear-item-img { width: 40px; height: 40px; } }

/* ---------- Item-Tooltip (Tap) + klickbare Gear-Slots ---------- */
.gear-slot.filled { cursor: pointer; transition: transform .1s; }
.gear-slot.filled:active { transform: scale(.92); }
.itemtip { text-align: center; padding: 6px 4px 4px; }
.itemtip-img { display: inline-flex; width: 88px; height: 88px; border-radius: 14px; background: rgba(0,0,0,.3);
  border: 1.5px solid var(--border-hi); align-items: center; justify-content: center; }
.itemtip-icon { width: 74px; height: 74px; object-fit: contain; }
.itemtip.rar-green .itemtip-img { border-color: #5fbf5f; box-shadow: 0 0 12px rgba(95,191,95,.4); }
.itemtip.rar-blue .itemtip-img { border-color: #4a90e2; box-shadow: 0 0 12px rgba(74,144,226,.45); }
.itemtip.rar-epic .itemtip-img { border-color: #b061e8; box-shadow: 0 0 16px rgba(176,97,232,.6); animation: epic-glow 1.8s ease-in-out infinite; }

/* ---------- Pilot: konfigurierbare Aktionsleiste (Pro) ---------- */
.pilot-add-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pilot-pro-card { background: rgba(0,0,0,.22); border: 1.5px solid var(--accent); border-radius: 12px;
  padding: 11px 13px; margin-top: 8px; }
.pilot-pro-card b { color: var(--accent); }
.pilot-pro-card .btn { margin-top: 8px; }
.pilot-bar-edit { display: flex; flex-wrap: wrap; gap: 7px; max-height: 50vh; overflow-y: auto; padding: 4px 0; }