*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0f0f;--bg2:#161616;--bg3:#1e1e1e;--bg4:#252525;
  --border:#2a2a2a;--border2:#333;
  --text:#e0e0e0;--muted:#666;--dim:#444;
  --accent:#5865f2;--accent2:#4752c4;
  --green:#4caf50;--blue:#5b9bd5;--purple:#9b79d4;
  --gold:#e8a020;--red:#f04747;--teal:#26a69a;
  --r1:#555;--r2:#4caf50;--r3:#5b9bd5;--r4:#9b79d4;--r5:#e8a020;
}
body{font-family:Segoe UI,system-ui,sans-serif;background:linear-gradient(135deg,#070712 0%,#0a0a1a 30%,#0d0818 60%,#080812 100%);background-attachment:fixed;color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#0a0a14}
::-webkit-scrollbar-thumb{background:#2a2a4a;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#3a3a6a}

/* ── AUTH ── */
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:radial-gradient(ellipse at 50% 0%,#1a1a2e,var(--bg))}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:36px;width:100%;max-width:400px}
.auth-logo{font-size:22px;font-weight:600;color:#fff;text-align:center;margin-bottom:2px;letter-spacing:.5px}
.auth-sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:24px}
.auth-tabs{display:flex;gap:0;margin-bottom:20px;background:var(--bg3);border-radius:8px;padding:3px}
.auth-tab{flex:1;padding:7px;text-align:center;font-size:13px;cursor:pointer;border-radius:6px;color:var(--muted);transition:all .15s}
.auth-tab.active{background:var(--accent);color:#fff}
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.field input{width:100%;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--accent)}
.btn-auth{width:100%;padding:11px;border-radius:8px;border:none;cursor:pointer;font-size:14px;font-weight:500;font-family:inherit;background:var(--accent);color:#fff;transition:all .15s}
.btn-auth:hover{background:var(--accent2)}.btn-auth:active{transform:scale(.98)}
.err-msg{color:var(--red);font-size:12px;margin-top:8px;text-align:center;min-height:16px}

/* ── APP LAYOUT ── */
#app{display:none;min-height:100vh;flex-direction:column}

/* ── TOPBAR ── */
.topbar{height:52px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 16px;position:sticky;top:0;z-index:50}
.tl{font-size:14px;font-weight:600;color:#fff;letter-spacing:.5px;margin-right:4px}
.wallet-row{display:flex;gap:6px;flex:1;overflow-x:auto}
.wchip{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:500;white-space:nowrap;cursor:default}
.wchip.k{background:#1a1030;border:1px solid #3a2060;color:#c9a6ff}
.wchip.m{background:#1a1a08;border:1px solid #3a3010;color:var(--gold)}
.wchip.h{background:#0a1a10;border:1px solid #1a3a20;color:var(--green)}
.wchip.s{background:#0a0a1a;border:1px solid #1a1a3a;color:var(--blue)}
.wchip.e{background:#150a10;border:1px solid #2a1020;color:#e88;}
.wchip.d{background:#100808;border:1px solid #2a1010;color:#e06060}
.wchip.c{background:#080814;border:1px solid #18183a;color:#8888ff}
.tr{display:flex;align-items:center;gap:8px}
.ubadge{font-size:11px;color:var(--muted)}
.btn-sm{padding:5px 12px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;transition:all .15s;white-space:nowrap}
.bp{background:var(--accent);color:#fff}.bp:hover{background:var(--accent2)}
.bg{background:var(--bg3);color:var(--text);border:1px solid var(--border)}.bg:hover{background:var(--bg4)}
.bd{background:#1a0808;color:var(--red);border:1px solid #3a1010}.bd:hover{background:#220a0a}
.bgo{background:#1a2010;color:var(--gold);border:1px solid #3a3a10}.bgo:hover{background:#222810}

/* ── LEVEL BAR ── */
.level-bar-top{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;background:#0a0a18;border:1px solid #1a1a3a;border-radius:12px}
.lv-num{font-size:11px;font-weight:600;color:#c9a6ff;white-space:nowrap}
.lv-bar-bg{width:80px;height:4px;background:#1a1a2a;border-radius:2px;overflow:hidden}
.lv-bar-fill{height:100%;background:linear-gradient(90deg,#5865f2,#9b79d4);border-radius:2px;transition:width .5s}
.lv-exp{font-size:9px;color:#555;white-space:nowrap}

/* ── PERMADEATH TOAST ── */
.death-toast{position:fixed;top:60px;right:20px;background:#1a0a0a;border:1px solid #5a1a1a;border-radius:10px;padding:12px 14px;font-size:12px;z-index:999;max-width:300px;display:none;animation:slideIn .3s}
.death-toast .dt-title{color:#f04747;font-weight:600;margin-bottom:4px}
.death-toast .dt-name{color:#ccc}
.death-toast .dt-ctx{font-size:10px;color:#666;margin-top:2px}

/* ── EXP POPUP ── */
.exp-popup{position:fixed;bottom:60px;right:20px;background:#0a0a18;border:1px solid #2a2a5a;border-radius:8px;padding:8px 12px;font-size:12px;z-index:998;display:none;animation:slideIn .2s}
.exp-popup .ep-exp{color:#c9a6ff;font-weight:600}
.exp-popup .ep-lvl{color:#e8a020;font-weight:600}

/* ── TODE LOG ── */
.tod-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border:1px solid #2a1010;border-radius:7px;margin-bottom:5px}
.tod-badge{padding:2px 7px;border-radius:4px;font-size:10px;font-weight:500;background:#1a0808;color:#e05555;border:1px solid #3a1010;flex-shrink:0}
.tod-info{flex:1;font-size:11px}
.tod-name{color:#ccc;font-weight:500}
.tod-sub{color:var(--muted);font-size:10px;margin-top:1px}
.tod-ctx{color:var(--red);font-size:10px}

/* ── SIDEBAR NAV ── */
.layout{display:flex;flex:1;overflow:hidden}
.sidebar{width:56px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;flex-shrink:0}
.nav-btn{width:40px;height:40px;border:none;background:none;cursor:pointer;border-radius:8px;color:var(--dim);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.nav-btn:hover{background:var(--bg3);color:var(--muted)}
.nav-btn.active{background:rgba(88,101,242,.15);color:var(--accent);box-shadow:0 0 12px rgba(155,121,212,.3)}
.nav-btn:hover{transform:scale(1.05)}
.nav-btn .tip{display:none}
.nav-tip{position:fixed;background:#111;border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:11px;color:#ccc;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s;z-index:9999}
.nav-sep{width:30px;height:1px;background:var(--border);margin:4px 0}

/* ── MAIN CONTENT ── */
.main{flex:1;overflow-y:auto;padding:16px}
.panel{display:none;width:100%}.panel.active{display:block;width:100%;animation:fadeIn .2s ease-out}#panel-synthese.active{display:flex;flex-direction:column;height:calc(100vh - 110px);overflow:hidden}

/* ── CARDS & GRIDS ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.grid-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.card.sel{border-color:var(--accent);background:#0e1020}
.ch{padding:10px 12px 8px;border-bottom:1px solid var(--bg3)}
.cb{padding:10px 12px}
.cf{padding:6px 12px;border-top:1px solid var(--bg3);display:flex;justify-content:space-between;align-items:center}
.cname{font-size:14px;font-weight:500;color:#fff}
.csub{font-size:11px;color:var(--muted);margin-top:1px}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:12px;font-size:10px;font-weight:500}
.r1{background:#1c1c1c;color:var(--r1);border:1px solid #2a2a2a}
.r2{background:#122012;color:var(--r2);border:1px solid #1a3a1a}
.r3{background:#0e1622;color:var(--r3);border:1px solid #1a2a3a}
.r4{background:#14101e;color:var(--r4);border:1px solid #2a1a3a}
.r5{background:#1e1608;color:var(--r5);border:1px solid #3a2a08}
.row{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:11px}
.stat-bar-bg{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.stat-bar{height:100%;border-radius:2px}
.sv{width:20px;text-align:right;font-size:10px;font-weight:500}
.class-row{font-size:11px;color:var(--muted);margin-top:4px}
.talent-list{padding-top:6px;border-top:1px solid var(--bg3);margin-top:6px}
.ti{display:flex;align-items:flex-start;gap:5px;margin:3px 0;font-size:10px}
.tp{padding:1px 4px;border-radius:3px;font-size:9px;font-weight:600;flex-shrink:0}
.tp.p{background:#122012;color:var(--green)}
.tp.a{background:#0e1622;color:var(--blue)}
.tname{color:#bbb;font-weight:500}
.tdesc{color:var(--muted)}
.empty{text-align:center;padding:40px;color:var(--dim);font-size:13px;grid-column:1/-1}
.ph{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pt{font-size:16px;font-weight:500;color:#fff}
.crow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filter-btn{padding:4px 10px;border-radius:12px;border:1px solid var(--border);background:var(--bg3);color:var(--muted);font-size:11px;cursor:pointer;transition:all .15s}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.filter-btn.r1a{background:#1c1c1c;color:#777;border-color:#2a2a2a}.filter-btn.r1a.active{background:#333;color:#ccc}
.filter-btn.r2a{background:#122012;color:var(--r2);border-color:#1a3a1a}.filter-btn.r2a.active{background:#1a3a1a;color:#fff}
.filter-btn.r3a{background:#0e1622;color:var(--r3);border-color:#1a2a3a}.filter-btn.r3a.active{background:#1a2a3a;color:#fff}
.filter-btn.r4a{background:#14101e;color:var(--r4);border-color:#2a1a3a}.filter-btn.r4a.active{background:#2a1a3a;color:#fff}
.filter-btn.r5a{background:#1e1608;color:var(--r5);border-color:#3a2a08}.filter-btn.r5a.active{background:#3a2a08;color:#fff}
.sort-sel{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:11px;font-family:inherit}

/* ── SYNTHESE ── */
.synth-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.synth-layout{grid-template-columns:1fr}}
.synth-opfer{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px}
.synth-ziel{background:#0a0a18;border:1px solid #2a2a4a;border-radius:10px;padding:12px}
.synth-slot{padding:8px;border-radius:7px;border:2px dashed var(--border);margin-bottom:6px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s}
.synth-slot:hover{border-color:var(--accent);background:#0e1020}
.synth-slot.filled{border-style:solid;border-color:var(--red)}
.synth-slot.ziel-filled{border-style:solid;border-color:#5865f2}
.synth-chance{font-size:11px;color:var(--muted);margin:8px 0;line-height:1.6}
.synth-result{margin-top:10px;padding:10px;border-radius:8px}
.sr-success{background:#0a1a0a;border:1px solid #1a3a1a}
.sr-fail{background:#1a0a0a;border:1px solid #3a1a1a}
.char-mini{font-size:11px;color:#ccc;font-weight:500}
.char-mini-sub{font-size:9px;color:var(--muted)}

/* ── CHAR LEVEL BADGE ── */
.clv-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:4px;font-size:10px;font-weight:600;background:#0a0a1a;border:1px solid #2a2a5a;color:#c9a6ff}
.skill-lv{font-size:9px;padding:0 3px;border-radius:2px;background:#0a0a18;border:1px solid #1a1a3a;color:#7799cc}

/* ── BOSS RAID ── */
.boss-raid-panel{background:linear-gradient(135deg,#0d0a12,#180a12,#0a0d18);border:1px solid #4a1a3a;border-radius:12px;padding:16px;margin-bottom:14px}
.boss-hp-wrap{margin:10px 0}
.boss-hp-bar{height:16px;background:#1a0808;border-radius:8px;overflow:hidden;border:1px solid #3a1010}
.boss-hp-fill{height:100%;background:linear-gradient(90deg,#8b0000,#e05555);border-radius:8px;transition:width 1s}
.boss-name{font-size:18px;font-weight:700;color:#ff6b6b;text-shadow:0 0 12px rgba(255,50,50,.4)}
.team-wave{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.wave-slot{background:var(--bg3);border:2px dashed var(--border);border-radius:8px;padding:8px 4px;text-align:center;font-size:10px}
.wave-slot.wartend{border-color:var(--muted);color:var(--muted)}
.wave-slot.kaempft{border-color:var(--gold);background:#1a1a08;animation:pulse 1s infinite alternate}
.wave-slot.gesiegt{border-color:var(--green);background:#0a1a0a;color:var(--green)}
.wave-slot.besiegt{border-color:var(--red);background:#1a0808;color:var(--dim)}
@keyframes pulse{from{box-shadow:0 0 4px var(--gold)}to{box-shadow:0 0 12px var(--gold)}}
.raid-select{background:var(--bg2);border:1px solid #2a1a3a;border-radius:10px;padding:12px}
.team-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.tp-slot{border:2px dashed var(--border);border-radius:8px;padding:8px 4px;text-align:center;font-size:10px;cursor:pointer;transition:all .15s;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tp-slot:hover{border-color:var(--accent);background:#0e1020}
.tp-slot.picked{border-color:var(--gold);background:#181408}
.raid-log{background:var(--bg3);border-radius:6px;padding:8px;margin-top:6px;font-size:10px;color:var(--muted);max-height:100px;overflow-y:auto}
/* ── FAVOURITEN ── */
.fav-btn{position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:2px;opacity:.4;transition:all .15s;z-index:2}
.fav-btn:hover{opacity:1;transform:scale(1.2)}
.fav-btn.aktiv{opacity:1;filter:drop-shadow(0 0 4px gold)}
.card{position:relative}

/* ── AWAKENING ── */
.awk-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:all .2s;position:relative}
.awk-card:hover{border-color:#5a3a8a;background:#0e0818}
.awk-glow-1{border-color:#333}
.awk-glow-2{border-color:#1a4a1a}
.awk-glow-3{border-color:#1a2a5a}
.awk-glow-4{border-color:#2a1a5a}
.awk-glow-5{border-color:#4a3a10}
.awk-glow-6{border-color:#5a1a1a;box-shadow:0 0 8px rgba(255,100,100,.2)}
.awk-glow-7{border-color:#105a5a;box-shadow:0 0 8px rgba(0,200,255,.2)}
.awk-glow-8{border-color:#5a105a;box-shadow:0 0 12px rgba(255,0,255,.3)}
.awk-result{border-radius:10px;padding:14px;margin-bottom:12px;text-align:center}
.awk-success{background:linear-gradient(135deg,#080818,#0a1a28);border:1px solid #2a2060;animation:awk-glow 2s ease-in-out}
.awk-fail{background:#100808;border:1px solid #2a1010}
@keyframes awk-glow{0%{box-shadow:0 0 0 rgba(155,121,212,0)}50%{box-shadow:0 0 30px rgba(155,121,212,.5)}100%{box-shadow:0 0 5px rgba(155,121,212,.2)}}
.stone-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:12px;background:linear-gradient(135deg,#18082a,#280a40);border:1px solid #5a2a8a;color:#c9a6ff;font-size:12px;font-weight:600}
.awk-stars{font-size:22px;letter-spacing:2px;margin:6px 0}
.chance-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:6px 0}
.chance-fill{height:100%;border-radius:3px;transition:width .5s}

/* ── KAMPF LOG MODAL ── */
.kampf-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}
.kampf-modal-box{background:#0d0d14;border:1px solid #2a2a4a;border-radius:14px;width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.km-header{padding:14px 16px;border-bottom:1px solid #1a1a2a;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.km-title{font-size:15px;font-weight:600;color:#fff}
.km-body{overflow-y:auto;padding:14px;flex:1}
.km-footer{padding:12px 16px;border-top:1px solid #1a1a2a;flex-shrink:0}
.runde-block{margin-bottom:8px;border-radius:7px;overflow:hidden;border:1px solid #1a1a2a}
.runde-header{padding:6px 10px;background:#111120;font-size:11px;font-weight:600;color:#888;cursor:pointer;display:flex;justify-content:space-between;user-select:none}
.runde-header:hover{background:#16162a}
.runde-body{padding:8px 10px;background:#0a0a18}
.log-line{font-size:11px;padding:3px 0;border-bottom:1px solid #111;line-height:1.5;display:flex;align-items:center;gap:6px}
.log-line:last-child{border:none}
.ll-treffer{color:#ccc}
.ll-kritisch{color:#e8a020;font-weight:500}
.ll-skill{color:#c9a6ff;font-weight:500}
.ll-besiegt{color:var(--red)}
.ll-sieg{color:var(--green);font-weight:600}
.ll-niederlage{color:var(--red);font-weight:600}
.ll-ausgewichen{color:#555}
.ll-verfehlt{color:#444}
.ll-traenk{color:var(--green)}
.ll-info{color:#555;font-style:italic}
.log-typ-icon{width:16px;text-align:center;flex-shrink:0}
.helden-status{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.held-stat-card{background:#0e0e1a;border:1px solid #1a1a2a;border-radius:8px;padding:10px}
.held-stat-name{font-size:11px;font-weight:600;color:#ccc;margin-bottom:6px}
.stat-bar-mini{margin-bottom:4px}
.stat-bar-mini-lbl{display:flex;justify-content:space-between;font-size:9px;color:#555;margin-bottom:2px}
.stat-bar-mini-bg{height:4px;background:#111;border-radius:2px;overflow:hidden}
.stat-bar-mini-fill{height:100%;border-radius:2px}
.ergebnis-banner{text-align:center;padding:12px;border-radius:8px;margin-bottom:12px;font-size:16px;font-weight:700}
.eb-sieg{background:#0a1a0a;border:1px solid #1a4a1a;color:var(--green)}
.eb-niederlage{background:#1a0a0a;border:1px solid #4a1a1a;color:var(--red)}
.eb-unentschieden{background:#1a1a0a;border:1px solid #4a4a1a;color:var(--gold)}

/* ── RANKING ── */
.rank-table{width:100%;border-collapse:collapse}
.rank-table th{font-size:10px;color:var(--muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px}
.rank-table td{padding:8px 10px;border-bottom:1px solid var(--bg3);font-size:12px}
.rank-table tr:hover td{background:var(--bg3)}
.rank-num{font-size:14px;font-weight:700;width:36px;text-align:center}
.r1-gold{color:var(--gold)}.r2-silver{color:#aaa}.r3-bronze{color:#cd7f32}
.rank-me{background:#0a0a18!important}
.rank-me td{color:#c9a6ff}
.etage-pill{display:inline-block;padding:2px 8px;border-radius:10px;background:#0a1028;border:1px solid #1a2a5a;color:var(--blue);font-weight:600;font-size:11px}
.mein-rang-card{background:linear-gradient(135deg,#0a0a18,#14102a);border:1px solid #2a2060;border-radius:10px;padding:14px;margin-bottom:14px;display:flex;align-items:center;gap:16px}
.mein-rang-nr{font-size:32px;font-weight:700;color:#c9a6ff}

/* ── EQUIPMENT ── */
.item-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px;transition:all .15s}
.item-card:hover{border-color:var(--border2)}
.item-slot{min-height:60px;border:2px dashed var(--border);border-radius:7px;padding:8px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .15s}
.item-slot:hover{border-color:var(--accent);background:#0e1020}
.item-slot.filled{border-style:solid;border-color:var(--gold)}
.item-slot.waffe{border-color:#3a1010}.item-slot.ruestung{border-color:#0a1a3a}.item-slot.accessoire{border-color:#1a0a3a}
.item-badge{padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600}
.ib-w{background:#2a0808;color:#e05555;border:1px solid #4a1010}
.ib-r{background:#0a1028;color:#5b9bd5;border:1px solid #1a2050}
.ib-a{background:#180a28;color:#c9a6ff;border:1px solid #3a1a5a}
.stat-gain{color:var(--gold);font-size:10px}
.beruf-badge{padding:2px 7px;border-radius:10px;font-size:10px;font-weight:500;background:#0a180a;color:var(--green);border:1px solid #1a3a1a}
.traenk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.traenk-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.traenk-icon{font-size:28px;margin-bottom:4px}
.traenk-cnt{font-size:22px;font-weight:700;color:#fff}
/* ── GACHA ── */
.gacha-layout{display:grid;grid-template-columns:1fr 280px;gap:14px}
@media(max-width:650px){.gacha-layout{grid-template-columns:1fr}}
.gacha-banner{background:linear-gradient(135deg,#0d0d1a,#14122a,#0a1428);border:1px solid #2a2a4a;border-radius:12px;padding:20px;text-align:center}
.gacha-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:4px}
.gacha-sub{font-size:12px;color:#5566aa;margin-bottom:16px}
.wtabs{display:flex;gap:4px;margin-bottom:12px}
.wtab{flex:1;padding:6px;text-align:center;font-size:12px;cursor:pointer;border-radius:6px;border:1px solid var(--border);color:var(--muted);transition:all .15s}
.wtab.k{border-color:#3a2060;background:#1a1030;color:#c9a6ff}
.wtab.m{border-color:#3a3010;background:#1a1a08;color:var(--gold)}
.pull-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.pull-btn{padding:12px 8px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;font-weight:500;font-size:12px;transition:all .15s}
.pull-btn:active{transform:scale(.97)}
.pbk{background:#1a1030;color:#c9a6ff;border:1px solid #4a3080}.pbk:hover{background:#221040}
.pbm{background:#1a1a08;color:var(--gold);border:1px solid #5a4a10}.pbm:hover{background:#222010}
.pcost{font-size:10px;opacity:.7;display:block;margin-top:2px}
.gacha-info{font-size:10px;color:#3a4060;line-height:1.7;margin-top:8px}
.side-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.sc-title{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.pity-row{margin-bottom:8px}
.pity-lbl{display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px}
.pity-bg{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden}
.pity-fill{height:100%;border-radius:3px;transition:width .4s}
.pb-rar{background:var(--blue)}.pb-epi{background:var(--purple)}
.soft-badge{font-size:9px;padding:1px 5px;border-radius:3px;background:#1a1030;color:#c9a6ff;border:1px solid #3a2060;margin-left:4px}
.day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:8px}
.day-slot{padding:5px 2px;border-radius:5px;border:1px solid var(--border);text-align:center;font-size:9px;color:var(--dim)}
.day-slot.done{background:#0a1a0a;border-color:#1a3a1a;color:var(--green)}
.day-slot.today{background:#1a1a08;border-color:#4a4a10;color:var(--gold)}
.stat-mini{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:3px 0}
.stat-mini span{color:#ccc}

/* ── PULL RESULT ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.result-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px;width:100%;max-width:760px;max-height:90vh;overflow-y:auto}
.result-title{font-size:16px;font-weight:500;color:#fff;text-align:center;margin-bottom:14px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.rc{border-radius:8px;padding:10px 8px;text-align:center;border:1px solid var(--border);position:relative;background:var(--bg3)}
.rc.r4{border-color:#3a2a5a;background:#100c18}
.rc.r3{border-color:#1a2a3a;background:#0a0e18}
.rc.pity::after{content:'PITY';position:absolute;top:5px;right:5px;font-size:8px;padding:1px 4px;border-radius:3px;background:#1a1a08;color:var(--gold);border:1px solid var(--gold)}
.rc-stars{font-size:14px;margin-bottom:4px}
.rc-name{font-size:11px;font-weight:500;color:#ccc;line-height:1.3}
.rc-rar{font-size:10px;margin-top:3px}
.rc-class{font-size:9px;color:var(--muted);margin-top:2px}
.rc-race{font-size:9px;color:var(--teal);margin-top:1px}

/* ── TEAMS ── */
.team-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.team-hdr{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bg3);background:var(--bg3)}
.tname-in{background:none;border:none;color:#fff;font-size:14px;font-weight:500;font-family:inherit;outline:none;flex:1}
.team-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px}
.tslot{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:8px 6px;min-height:72px;text-align:center}
.tslot-name{font-size:10px;font-weight:500;color:#ccc;line-height:1.3;margin-top:3px}
.tslot-class{font-size:9px;color:var(--muted);margin-top:2px}
.tslot-race{font-size:9px;color:var(--teal);margin-top:1px}

/* ── TOWER ── */
.tower-layout{display:grid;grid-template-columns:1fr 240px;gap:14px}
@media(max-width:600px){.tower-layout{grid-template-columns:1fr}}
.etagen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.etage-card{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;transition:all .15s;text-align:center}
.etage-card:hover{border-color:var(--accent);background:#0e1020}
.etage-card.boss{border-color:#3a1a1a;background:#120808}
.etage-card.locked{opacity:.4;cursor:not-allowed}
.etage-nr{font-size:18px;font-weight:600;color:#fff}
.etage-name{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.3}
.etage-boss{font-size:9px;color:var(--red);margin-top:2px}

/* ── LOBBY ── */
.lobby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.bau-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;cursor:default;transition:border-color .2s}
.bau-card:hover{border-color:var(--border2)}
.bau-icon{font-size:24px;margin-bottom:6px}
.bau-name{font-size:13px;font-weight:500;color:#fff;margin-bottom:2px}
.bau-desc{font-size:10px;color:var(--muted);margin-bottom:8px;line-height:1.4}
.bau-level{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.level-bar-bg{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin:0 6px}
.level-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s}
.bau-bonus{font-size:10px;color:var(--green);margin-bottom:8px;line-height:1.5}
.mat-cost{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.mat-chip{padding:2px 5px;border-radius:4px;font-size:9px;font-weight:500;background:var(--bg3);border:1px solid var(--border);color:var(--muted)}
.mat-chip.ok{border-color:#1a3a1a;color:var(--green)}
.mat-chip.nok{border-color:#3a1a1a;color:var(--red)}
.upgrade-timer{font-size:10px;color:var(--gold);text-align:center;margin-bottom:6px}

/* ── MATERIALS ── */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mat-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center}
.mat-icon{font-size:28px;margin-bottom:6px}
.mat-name{font-size:12px;font-weight:500;color:#fff;margin-bottom:2px}
.mat-menge{font-size:20px;font-weight:600;color:#fff;margin:4px 0}
.mat-rar{font-size:10px;color:var(--muted)}

/* ── DUNGEON ── */
.dg-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.dg-layout{grid-template-columns:1fr}}
.dg-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px}
.dg-card.weekly{border-color:#2a1a3a}
.dg-title{font-size:14px;font-weight:500;color:#fff;margin-bottom:4px}
.dg-desc{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.diff-btns{display:flex;gap:6px}
.diff-btn{flex:1;padding:7px 4px;border-radius:6px;border:none;cursor:pointer;font-size:11px;font-weight:500;font-family:inherit;transition:all .15s}
.dn{background:#1a2010;color:var(--green);border:1px solid #2a3a18}.dn:hover{background:#202810}
.dh{background:#201808;color:var(--gold);border:1px solid #3a2a10}.dh:hover{background:#281a08}
.da{background:#200808;color:var(--red);border:1px solid #3a1010}.da:hover{background:#280808}
.diff-btn.disabled{opacity:.4;cursor:not-allowed}
.versuche-row{display:flex;gap:4px;margin-bottom:8px}
.versuch-dot{width:8px;height:8px;border-radius:50%;background:var(--bg3)}
.versuch-dot.used{background:var(--dim)}
.versuch-dot.avail{background:var(--green)}

/* ── PROFIL ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.stat-chip{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
.stat-chip .val{font-size:20px;font-weight:600;color:#fff;display:block}
.stat-chip .lbl{font-size:10px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}

/* ── KAMPF RESULT ── */
.kampf-result{padding:14px;border-radius:10px;margin-bottom:12px}
.kr-sieg{background:#0a1a0a;border:1px solid #1a3a1a}
.kr-nie{background:#1a0a0a;border:1px solid #3a1a1a}
.kr-title{font-size:16px;font-weight:600;margin-bottom:8px}
.kr-sieg .kr-title{color:var(--green)}
.kr-nie .kr-title{color:var(--red)}
.kr-row{font-size:12px;color:var(--muted);margin-bottom:4px}
.kr-row span{color:#ccc}
.hero-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hero-chip{padding:4px 8px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--border)}
.hero-chip.dead{border-color:#3a1a1a;color:var(--dim)}
.hero-chip.alive{color:#ccc}
.hp-mini{font-size:9px;color:var(--muted);margin-top:1px}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:12px;z-index:999;max-width:280px;display:none;animation:slideIn .3s ease-out}
.toast.ok{border-color:#1a3a1a;color:var(--green)}
.toast.err{border-color:#3a1a1a;color:var(--red)}
.toast.info{border-color:#1a2a3a;color:var(--blue)}
@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}

/* ── MISC ── */
.sep{height:1px;background:var(--border);margin:12px 0}
.tag{padding:1px 6px;border-radius:4px;font-size:10px;font-weight:500}
.tag-kampf{background:#1a0808;color:#e06060;border:1px solid #3a1010}
.tag-magie{background:#0a0a1a;color:var(--purple);border:1px solid #1a1a3a}
.tag-natur{background:#0a1a0a;color:var(--green);border:1px solid #1a3a1a}
.tag-dunkel{background:#0d0d0d;color:#888;border:1px solid #222}
.tag-heilig{background:#1a1a08;color:var(--gold);border:1px solid #3a3a10}
.tag-bewegung{background:#081818;color:var(--teal);border:1px solid #103030}
.loader{text-align:center;padding:30px;color:var(--muted);font-size:13px}
input[type=range]{accent-color:var(--accent);width:90px}

/* ════════════════════════════════════════════════════════════
   BATTLE UI — Brave Frontier Style
   ════════════════════════════════════════════════════════════ */
#battle-overlay {
  position:fixed; inset:0; z-index:9000; display:none;
  background: linear-gradient(180deg, #050818 0%, #0d1b3e 35%, #1a0a2e 60%, #0a0500 80%, #050200 100%);
  font-family:'Exo 2',sans-serif;
  overflow:hidden;
}
#battle-overlay.show { display:block; }

/* Ground line */
#bo-ground {
  position:absolute; bottom:0; left:0; right:0; height:160px;
  background:linear-gradient(180deg,transparent 0%,#1a0e00 30%,#0d0800 100%);
}
#bo-ground::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,#c08020 20%,#f0c040 50%,#c08020 80%,transparent);
  box-shadow:0 0 20px #f0c04066;
}

/* Close button */
#bo-close {
  position:absolute; top:14px; right:16px; z-index:10;
  background:#1a0a00; border:1px solid #c08020; border-radius:6px;
  color:#f0c040; font-size:11px; padding:5px 12px; cursor:pointer;
  font-family:'Exo 2',sans-serif; font-weight:600;
}
#bo-close:hover { background:#2a1400; }

/* HUD top */
#bo-hud {
  position:absolute; top:0; left:0; right:0; padding:12px 16px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
}
.bo-stage-title {
  font-family:'Cinzel',serif; font-size:13px; font-weight:700;
  color:#f0c040; text-shadow:0 0 12px #f0c040;
  letter-spacing:.1em;
}
.bo-wave-badge {
  background:linear-gradient(135deg,#2a1000,#5a2000);
  border:1px solid #f0c040; border-radius:6px;
  padding:4px 12px; font-family:'Cinzel',serif;
  font-size:11px; font-weight:900; color:#ffd870;
  text-shadow:0 0 8px #f0c040;
}

/* Battle field */
#bo-field {
  position:absolute; bottom:150px; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 60px;
}
.bo-hero-side  { display:flex; gap:20px; align-items:flex-end; }
.bo-enemy-side { display:flex; gap:24px; align-items:flex-end; }

.bo-unit { display:flex; flex-direction:column; align-items:center; gap:6px; }

.bo-sprite-wrap {
  position:relative; width:80px; height:80px;
}
.bo-sprite-wrap canvas {
  image-rendering:pixelated; width:80px; height:80px;
}
.bo-shadow {
  position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  width:50px; height:10px;
  background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 70%);
}
.bo-glow-h { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:64px; height:16px; border-radius:50%; background:#4080ff66; filter:blur(6px); animation:bo-gp 2s ease-in-out infinite; }
.bo-glow-e { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:64px; height:16px; border-radius:50%; background:#ff404066; filter:blur(6px); animation:bo-gp 2.4s ease-in-out infinite; }
@keyframes bo-gp { 0%,100%{opacity:.4} 50%{opacity:1} }

.bo-float-h { animation:bo-fh 2.8s ease-in-out infinite; }
.bo-float-e { animation:bo-fe 3.2s ease-in-out infinite; }
@keyframes bo-fh { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes bo-fe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Walk → Attack → Return (Hero geht zum Gegner, schlägt zu, kehrt zurück) */
.bo-atk-h { animation:bo-ah 1.1s ease-in-out forwards !important; }
.bo-atk-e { animation:bo-ae 1.1s ease-in-out forwards !important; }
@keyframes bo-ah {
  0%{transform:translateX(0)}
  30%{transform:translateX(70px)}
  40%{transform:translateX(65px) scaleX(1.12)}
  50%{transform:translateX(70px) scaleX(1)}
  100%{transform:translateX(0)}
}
@keyframes bo-ae {
  0%{transform:translateX(0)}
  30%{transform:translateX(-70px)}
  40%{transform:translateX(-65px) scaleX(1.12)}
  50%{transform:translateX(-70px) scaleX(1)}
  100%{transform:translateX(0)}
}

.bo-hit { animation:bo-hf .3s steps(2) forwards !important; }
@keyframes bo-hf { 0%,100%{filter:none} 30%,70%{filter:brightness(3) saturate(0)} 50%{filter:none} }

.bo-dead { animation:bo-die .7s ease-out forwards !important; }
@keyframes bo-die { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.4) translateY(20px)} }

/* Enemy HP over sprite */
.bo-elem-badge {
  position:absolute; top:-38px; left:50%; transform:translateX(-50%);
  font-size:18px; z-index:10; pointer-events:none;
  animation:bo-elem-float 2s ease-in-out infinite;
  filter:drop-shadow(0 0 4px currentColor);
}
@keyframes bo-elem-float {
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
@keyframes bo-reaktion-flash {
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.0) translateY(-20px)}
}
.bo-enemy-hp {
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:80px; text-align:center;
}
.bo-ename { font-family:'Cinzel',serif; font-size:8px; color:#f0c040; white-space:nowrap; }
.bo-hbar-bg { height:4px; background:#111; border-radius:2px; border:1px solid #2a2a2a; overflow:hidden; margin-top:1px; }
.bo-hbar-fill { height:100%; border-radius:1px; background:linear-gradient(90deg,#c02020,#ff4040); transition:width .4s; }

/* Hero info bars */
.bo-hero-info { text-align:center; min-width:80px; }
.bo-hname { font-family:'Cinzel',serif; font-size:8px; color:#f0c040; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.bo-bar-wrap { display:flex; flex-direction:column; gap:2px; margin-top:3px; }
.bo-bar-bg { height:5px; background:#111; border-radius:2px; border:1px solid #222; overflow:hidden; }
.bo-hp-fill { height:100%; background:linear-gradient(90deg,#20a040,#60ff80); border-radius:1px; transition:width .4s; }
.bo-hp-fill.mid { background:linear-gradient(90deg,#c08000,#ffb000); }
.bo-hp-fill.low { background:linear-gradient(90deg,#c02020,#ff4040); }
.bo-bb-fill { height:100%; background:linear-gradient(90deg,#2040c0,#60a0ff); border-radius:1px; transition:width .4s; }

/* Damage numbers */
.bo-dmg {
  position:absolute; pointer-events:none; z-index:9500;
  font-family:'Cinzel',serif; font-weight:900;
  text-shadow:2px 2px 0 #000,-1px -1px 0 #000;
  animation:bo-dmg-float 1.1s ease-out forwards;
}
@keyframes bo-dmg-float {
  0%  { opacity:1; transform:translateY(0) scale(1.2); }
  20% { transform:translateY(-18px) scale(1.4); }
  100%{ opacity:0; transform:translateY(-55px) scale(.8); }
}
.bo-dmg-n { font-size:20px; color:#fff; }
.bo-dmg-c { font-size:28px; color:#f0c040; }
.bo-dmg-h { font-size:18px; color:#60ff80; }

/* Skill bar */
#bo-skillbar {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(180deg,transparent,#000000cc 20%,#000000f0);
  padding:8px 12px 12px;
}
#bo-hero-cards { display:flex; gap:5px; justify-content:center; margin-bottom:8px; }
.bo-hcard {
  width:56px; border-radius:6px; overflow:hidden;
  border:2px solid #2a2a4a; cursor:pointer; background:#0a0a18;
  transition:transform .15s, border-color .15s;
}
.bo-hcard:hover:not(.bo-hcard-dead) { transform:translateY(-3px); border-color:#f0c040; }
.bo-hcard.bo-hcard-active { border-color:#f0c040; }
.bo-hcard.bo-hcard-dead   { opacity:.35; filter:grayscale(1); cursor:default; }
.bo-hcard.bo-hcard-bb     { border-color:#4080ff; animation:bo-bb-pulse .8s ease-in-out infinite alternate; }
@keyframes bo-bb-pulse { from{box-shadow:0 0 6px #4080ff44} to{box-shadow:0 0 18px #4080ffaa} }
.bo-hcard canvas { display:block; width:56px; height:56px; image-rendering:pixelated; }
.bo-hcard-name { font-size:7px; font-weight:700; color:#ccc; text-align:center; padding:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bo-hcard-bbbar { height:3px; background:linear-gradient(90deg,#2040c0,#4080ff); transition:width .3s; }
.bo-burst-bar { height:3px; background:#1a1008; border-radius:1px; margin-top:1px; overflow:hidden; }
.bo-burst-fill { height:100%; background:linear-gradient(90deg,#804000,#f0a020); transition:width .4s; }
.bo-burst-fill.bo-burst-ready { background:linear-gradient(90deg,#f0a020,#ffe040); box-shadow:0 0 6px #f0a020; animation:burstGlow 1s infinite; }
@keyframes burstGlow{0%,100%{box-shadow:0 0 4px #f0a020}50%{box-shadow:0 0 12px #ffe060}}

#bo-skill-btns { display:flex; gap:6px; justify-content:center; }
.bo-sbtn {
  flex:1; max-width:110px; padding:7px 4px; border-radius:7px;
  border:1px solid #2a2a4a; background:linear-gradient(135deg,#0d0d24,#1a1a3a);
  color:#ccc; font-family:'Exo 2',sans-serif; font-size:10px; font-weight:700;
  cursor:pointer; transition:all .15s;
}
.bo-sbtn:hover { border-color:#f0c040; color:#f0c040; transform:translateY(-2px); }
.bo-sbtn:disabled { opacity:.4; cursor:default; transform:none !important; }
.bo-sbtn .bsi { display:block; font-size:16px; text-align:center; margin-bottom:2px; }
.bo-sbtn-atk { border-color:#c04040; background:linear-gradient(135deg,#1a0808,#2a1010); color:#ff8080; }
.bo-sbtn-atk:hover { border-color:#ff3030; box-shadow:0 0 10px #ff303033; }
.bo-sbtn-bb  { border-color:#204080; background:linear-gradient(135deg,#080c20,#101830); color:#6090cc; }
.bo-sbtn-bb.bo-bb-ready { border-color:#4080ff; color:#80c0ff; animation:bo-bb-pulse .8s ease-in-out infinite alternate; }

/* Battle log */
#bo-log {
  position:absolute; top:56px; left:12px; width:200px;
  max-height:100px; overflow:hidden; pointer-events:none;
}
.bo-log-entry { font-size:9px; color:#6080a0; padding:1px 0; animation:bo-log-in .25s ease-out; }
.bo-log-entry.hi { color:#f0c040; }
@keyframes bo-log-in { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

/* Banner */
#bo-banner {
  position:absolute; inset:0; pointer-events:none; z-index:9200;
  display:flex; align-items:center; justify-content:center; opacity:0;
}
#bo-banner.show { animation:bo-ban 1.4s ease-out forwards; }
#bo-banner-txt {
  font-family:'Cinzel',serif; font-size:36px; font-weight:900; color:#ffd870;
  text-shadow:0 0 30px #f0c040, 0 0 60px #f0c040, 3px 3px 0 #000;
  letter-spacing:.15em;
}
@keyframes bo-ban { 0%{opacity:0;transform:scale(.5)} 20%{opacity:1;transform:scale(1.05)} 60%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.1) translateY(-15px)} }

/* Result overlay */
#bo-result-overlay {
  position:absolute; inset:0; z-index:9300; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.75);
}
#bo-result-overlay.show { display:flex; }
.bo-result-box {
  text-align:center; padding:32px 52px;
  background:linear-gradient(135deg,#0a0818,#1a1030);
  border:2px solid #f0c040; border-radius:14px;
  box-shadow:0 0 50px #f0c04033;
  animation:bo-rpop .45s cubic-bezier(.2,1,.3,1);
}
@keyframes bo-rpop { from{transform:scale(.5) rotate(-4deg);opacity:0} to{transform:none;opacity:1} }
.bo-rtitle { font-family:'Cinzel',serif; font-size:40px; font-weight:900; letter-spacing:.15em; }
.bo-rsieg { color:#ffd870; text-shadow:0 0 28px #f0c040; }
.bo-rnied { color:#ff4040; text-shadow:0 0 28px #ff0000; }
.bo-rsub  { font-size:13px; color:#aaa; margin-top:6px; }
.bo-rbtn  {
  margin-top:20px; padding:10px 28px;
  background:linear-gradient(135deg,#2a1800,#5a3800);
  border:1px solid #f0c040; border-radius:7px;
  color:#f0c040; font-family:'Cinzel',serif; font-size:13px;
  cursor:pointer; transition:all .2s;
}
.bo-rbtn:hover { background:linear-gradient(135deg,#3a2000,#7a4800); }

/* BB screen flash */
.bo-bb-flash {
  position:absolute; inset:0; pointer-events:none; z-index:9100;
  animation:bo-bbf .5s ease-out forwards;
}
@keyframes bo-bbf { 0%{background:rgba(64,128,255,0)} 15%{background:rgba(64,128,255,.55)} 100%{background:rgba(64,128,255,0)} }

/* Particle */
.bo-part { position:absolute; pointer-events:none; border-radius:50%; animation:bo-pf var(--dur) ease-out forwards; }
@keyframes bo-pf { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)} }

/* ── POLISH: hover, glow & animations ── */
button:not(:disabled):hover{filter:brightness(1.15)}
button:active{transform:scale(0.97)}
.badge.r5{box-shadow:0 0 8px rgba(232,160,32,.4)}
.badge.r4{box-shadow:0 0 6px rgba(155,121,212,.3)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── GACHA ANIMATION ── */
.gacha-summon-circle{width:120px;height:120px;margin:40px auto;position:relative;display:flex;align-items:center;justify-content:center}
.gacha-circle-inner{font-size:40px;color:#c9a6ff;animation:gachaRotate 1s linear infinite}
.gacha-circle-text{position:absolute;font-size:14px;font-weight:700;color:#fff}
.gacha-summon-circle::before{content:'';position:absolute;inset:-10px;border:2px solid #6040a055;border-radius:50%;animation:gachaRotate 2s linear infinite}
.gacha-summon-circle::after{content:'';position:absolute;inset:-20px;border:1px solid #6040a033;border-radius:50%;animation:gachaRotate 3s linear infinite reverse}
.gacha-summon-circle.epic::before{border-color:#9b79d4}
.gacha-summon-circle.epic .gacha-circle-inner{color:#9b79d4}
.gacha-summon-circle.legendary::before{border-color:#e8a020;box-shadow:0 0 30px #e8a02066}
.gacha-summon-circle.legendary::after{border-color:#e8a020}
.gacha-summon-circle.legendary .gacha-circle-inner{color:#e8a020}
@keyframes gachaRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.gacha-reveal{animation:gachaReveal .4s cubic-bezier(.2,1,.3,1) forwards;opacity:0;transform:scale(0)}
.gacha-reveal-epi{animation:gachaRevealEpi .5s cubic-bezier(.2,1,.3,1) forwards;opacity:0;transform:scale(0)}
.gacha-reveal-leg{animation:gachaRevealLeg .6s cubic-bezier(.2,1,.3,1) forwards;opacity:0;transform:scale(0)}
.gacha-reveal-instant{animation:fadeIn .15s ease-out forwards}
@keyframes gachaReveal{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes gachaRevealEpi{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.2);filter:brightness(1.5)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes gachaRevealLeg{0%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1.3);filter:brightness(2) saturate(1.5)}70%{transform:scale(0.95)}100%{opacity:1;transform:scale(1);filter:none}}

.gacha-shake{animation:gachaShake .4s ease-out}
@keyframes gachaShake{0%,100%{transform:translateX(0)}10%{transform:translateX(-8px)}20%{transform:translateX(8px)}30%{transform:translateX(-6px)}40%{transform:translateX(6px)}50%{transform:translateX(-3px)}60%{transform:translateX(3px)}}

/* ── LOBBY NEU ── */
.lobby-grid-neu{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.lobby-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;transition:all .15s}
.lobby-card.gebaut{border-color:#2a3a2a}
.lobby-card.ungebaut{border-style:dashed;opacity:.7}
.lobby-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.lobby-card-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.lobby-icon{font-size:28px}
.lobby-icon.dim{opacity:.4}
.lobby-name{font-size:13px;font-weight:700;color:var(--text)}
.lobby-level{font-size:10px;color:#6a9a6a}
.lobby-desc{font-size:10px;color:var(--muted);max-width:180px}
.lobby-bonus{font-size:10px;color:var(--muted);margin-bottom:8px}
.lobby-btn{width:100%;padding:8px;background:linear-gradient(135deg,#0a1a0a,#1a3a1a);border:1px solid #2a5a2a;border-radius:6px;color:#6a9a6a;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.lobby-btn:hover{filter:brightness(1.3)}
.lobby-btn.small{padding:4px 10px;font-size:10px}
.lobby-kosten{font-size:9px;font-weight:400;color:var(--muted)}
.lobby-upgrade-info{font-size:10px;color:#c0a040;text-align:center}
.lobby-max{font-size:10px;color:#6a9a6a;text-align:center;font-weight:700;padding:6px}

/* ── POSTFACH ── */
.postfach-btn{background:none;border:none;font-size:18px;cursor:pointer;position:relative;vertical-align:middle;margin-left:6px;padding:2px;color:#fff;line-height:1}
.postfach-btn:hover{transform:scale(1.15);filter:brightness(1.3)}
.postfach-dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:#e04040;border-radius:50%;display:none;box-shadow:0 0 6px 2px rgba(224,64,64,.6);animation:dotPulse 2s infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 4px 1px rgba(224,64,64,.4);transform:scale(1)}50%{box-shadow:0 0 10px 4px rgba(224,64,64,.7);transform:scale(1.3)}}
.postfach-box{background:var(--bg);border:1px solid var(--border);border-radius:14px;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;animation:fadeIn .15s ease-out}
.postfach-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(135deg,#0a0a1a,#1a1030);border-bottom:1px solid var(--border);font-size:14px;font-weight:700;color:#c9a6ff}
.postfach-hbtn{background:none;border:1px solid var(--border);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:inherit}
.postfach-hbtn:hover{background:var(--bg3);color:var(--text)}
.postfach-liste{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;max-height:60vh}
.pf-item{padding:10px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:all .15s}
.pf-item:hover{background:var(--bg3);border-color:var(--border2)}
.pf-item.ungelesen{border-left:3px solid #6040a0;background:#0d0a1a}
.pf-item .pf-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.pf-item .pf-betreff{font-size:12px;font-weight:600;color:var(--text)}
.pf-item .pf-zeit{font-size:9px;color:var(--dim)}
.pf-item .pf-abs{font-size:10px;color:var(--muted)}
.pf-item .pf-text{font-size:11px;color:var(--muted);margin-top:4px;display:none}
.pf-item.offen .pf-text{display:block}
.pf-typ{font-size:9px;padding:1px 6px;border-radius:4px;font-weight:600}
.pf-typ.system{background:#1a1a30;color:#8888cc}
.pf-typ.spieler{background:#1a2a1a;color:#88cc88}
.pf-typ.gilde{background:#2a1a10;color:#cc9944}
.pf-typ.belohnung{background:#2a2a0a;color:#cccc44}
.pf-tabs{display:flex;gap:0;border-bottom:1px solid var(--border)}
.pf-tab{flex:1;padding:8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.pf-tab:hover{color:var(--text);background:var(--bg2)}
.pf-tab.active{color:#c9a6ff;border-bottom-color:#6040a0}
.pf-input{padding:8px 10px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:12px;font-family:inherit}
.pf-input:focus{border-color:#6040a0;outline:none}
.pf-senden-btn{padding:10px;background:linear-gradient(135deg,#1a0a30,#3a1a60);border:1px solid #6040a0;border-radius:8px;color:#c9a6ff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.pf-senden-btn:hover{filter:brightness(1.2)}
.pf-antwort-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;font-family:inherit}
.pf-antwort-btn:hover{background:var(--bg3);color:#c9a6ff;border-color:#6040a0}
.pf-antwort-box{margin-top:6px;display:flex;gap:4px}
.pf-antwort-box input{flex:1;padding:6px 8px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:11px;font-family:inherit}
.pf-antwort-box button{padding:6px 10px;background:linear-gradient(135deg,#1a0a30,#3a1a60);border:1px solid #6040a0;border-radius:6px;color:#c9a6ff;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── RESPONSIVE — Tablet (iPad) ────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .topbar{gap:6px;padding:0 10px;height:48px}
  .tl{font-size:12px}
  .wchip{padding:2px 5px;font-size:10px;gap:2px}
  .main{padding:10px}
  .sidebar{width:48px}
  .nav-btn{width:36px;height:36px;font-size:16px}
  .lobby-grid-neu{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
  .postfach-box{max-width:90vw}
  .kampf-modal-box{max-width:95vw}
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── RESPONSIVE — Mobile (iPhone, kleine Handys) ────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Topbar: vertikal kompakter, Wallet scrollbar */
  .topbar{height:auto;flex-wrap:wrap;padding:6px 8px;gap:4px}
  .tl{font-size:11px;width:100%;margin-bottom:2px}
  .wallet-row{gap:3px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .wallet-row::-webkit-scrollbar{display:none}
  .wchip{padding:2px 4px;font-size:9px;border-radius:8px}
  .tr{position:absolute;top:6px;right:8px}
  #level-bar{width:100%}
  #mute-btn{position:absolute;top:6px;right:50px}

  /* Sidebar → Bottom-Bar */
  .layout{flex-direction:column-reverse}
  .sidebar{width:100%;height:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-top:1px solid var(--border);padding:4px 8px;gap:4px;
    position:sticky;bottom:0;z-index:40;-webkit-overflow-scrolling:touch}
  .sidebar::-webkit-scrollbar{display:none}
  .nav-btn{width:34px;height:34px;font-size:14px;flex-shrink:0}
  .nav-sep{width:1px;height:24px;margin:0 2px}

  /* Main Content */
  .main{padding:8px;overflow-y:auto;height:calc(100vh - 120px)}

  /* Panels */
  .ph{flex-direction:column;gap:4px;align-items:flex-start}
  .crow{flex-wrap:wrap;gap:3px}

  /* Cards/Grids */
  .card{border-radius:8px}
  .grid-sm{grid-template-columns:1fr !important}
  .lobby-grid-neu{grid-template-columns:1fr;gap:6px}
  .mat-grid{grid-template-columns:repeat(3,1fr) !important}

  /* Battle Overlay */
  #battle-overlay{padding:4px}
  #bo-field{flex-direction:column;gap:10px}
  .bo-hero-side,.bo-enemy-side{flex-direction:row;justify-content:center;gap:8px}
  .bo-sprite-wrap canvas{width:56px !important;height:56px !important}
  #bo-skillbar{padding:6px}
  #bo-hero-cards{gap:3px}
  .bo-hcard{width:42px;min-width:42px}
  .bo-sbtn{font-size:8px;padding:4px 2px}
  .bo-dmg{font-size:12px}

  /* Kampf-Modal */
  .kampf-modal-box{max-width:100vw;max-height:100vh;border-radius:0}
  .km-body{padding:8px}

  /* Postfach */
  .postfach-box{max-width:100vw;max-height:90vh;border-radius:10px}
  .postfach-liste{max-height:50vh}
  .pf-tabs{overflow-x:auto;flex-wrap:nowrap}
  .pf-tab{white-space:nowrap;font-size:10px;padding:6px}

  /* Gacha */
  .result-box{max-width:100vw;padding:12px;border-radius:10px}
  .result-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important}
  .rc{padding:8px}

  /* Chat FAB */
  #chat-fab{bottom:60px;right:10px;width:40px;height:40px;font-size:18px}
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── RESPONSIVE — Sehr kleine Bildschirme (iPhone SE, etc.) ─────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:400px){
  .topbar{padding:4px 6px}
  .tl{font-size:10px}
  .wchip{font-size:8px;padding:1px 3px}
  .main{padding:6px}
  .nav-btn{width:30px;height:30px;font-size:12px}
  .lobby-card{padding:8px}
  .lobby-icon{font-size:22px}
  .lobby-name{font-size:11px}
  .bo-sprite-wrap canvas{width:44px !important;height:44px !important}
  .bo-hcard{width:36px;min-width:36px}
  .result-grid{grid-template-columns:repeat(2,1fr) !important}
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Touch-Optimierungen ────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media(hover:none){
  /* Keine Hover-Effekte auf Touch-Geräten */
  .nav-btn:hover{transform:none;background:none}
  .card:hover{transform:none}
  .lobby-card:hover{transform:none}
  /* Größere Touch-Targets */
  .btn-sm{min-height:36px;min-width:36px}
  .nav-btn{min-width:38px;min-height:38px}
  .pf-tab{min-height:36px}
  /* Tipp-Label auf Touch nicht anzeigen (nutzt Tooltip-System) */
  .nav-tip{display:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Landscape Phone ────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media(max-height:500px) and (orientation:landscape){
  .topbar{height:36px;padding:2px 8px}
  .tl{display:none}
  .sidebar{height:auto;padding:2px 6px}
  .nav-btn{width:30px;height:30px;font-size:13px}
  .main{height:calc(100vh - 80px)}
  #bo-field{max-height:60vh}
}