@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg:#0a0a0a;--bg-dark:#000000;--bg-panel:#1a1a1a;--bg-card:#252525;--bg-card2:#2f2f2f;--bg-input:#151515;
  --border:#333333;--border-g:#555555;--border-l:#777777;
  --gold:#0077aa;--gold-b:#0099cc;--gold-d:#005588;--gold-glow:rgba(0,119,170,.25);
  --parch:#e0e0e0;--parch-d:#a0a0a0;--text:#d0d0d0;--text-d:#808080;
  --red:#c0392b;--red-b:#e74c3c;--green:#27ae60;--green-b:#2ecc71;
  --blue:#2980b9;--blue-b:#3498db;--purple:#8e44ad;--purple-b:#9b59b6;
  --hp-g:#4caf50;--hp-y:#ff9800;--hp-r:#f44336;--shield:#64b5f6;--xp:#7c4dff;
  --font-h:'Cinzel',serif;--font-b:'Crimson Text',serif;
  --r:4px;--rl:8px;
  --shadow:0 4px 20px rgba(0,0,0,.8),inset 0 1px 0 rgba(0,119,170,.08);
  --shadowl:0 8px 40px rgba(0,0,0,.95);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);min-height:100vh;font-size:16px}
.hidden{display:none!important}
.screen{min-height:100vh}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-dark)}
::-webkit-scrollbar-thumb{background:var(--border-g);border-radius:3px}

/* AUTH */
#screen-auth{display:flex;align-items:center;justify-content:center;background:var(--bg-dark)}
.auth-box{background:linear-gradient(160deg,var(--bg-panel),var(--bg-dark));border:1px solid var(--border-g);border-radius:var(--rl);padding:2.5rem 2rem;width:370px;max-width:95vw;box-shadow:var(--shadowl),0 0 40px var(--gold-glow);position:relative;overflow:hidden}
.auth-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.auth-crest{text-align:center;font-size:2.5rem;filter:drop-shadow(0 0 12px var(--gold));margin-bottom:.5rem}
.auth-title{font-family:var(--font-h);color:var(--gold-b);text-align:center;font-size:1.55rem;letter-spacing:.05em;margin-bottom:.2rem}
.auth-sub{text-align:center;color:var(--parch-d);font-style:italic;font-size:.9rem;margin-bottom:1.5rem}
.tab-bar{display:flex;border:1px solid var(--border-g);border-radius:var(--r);overflow:hidden;margin-bottom:1.5rem}
.tab-btn{flex:1;padding:.5rem;border:none;background:var(--bg-card);color:var(--text-d);cursor:pointer;font-family:var(--font-h);font-size:.82rem;transition:all .2s}
.tab-btn.active,.tab-btn:hover{background:var(--border-g);color:var(--gold-b)}
.auth-form{display:flex;flex-direction:column;gap:.75rem}
.field-wrap{position:relative}
.field-wrap span{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:.9rem;pointer-events:none}
.field-wrap input{width:100%;padding:.65rem .75rem .65rem 2.2rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--parch);font-family:var(--font-b);font-size:1rem;transition:border-color .2s}
.field-wrap input:focus{outline:none;border-color:var(--gold)}
.error-msg{color:var(--red-b);font-size:.85rem;text-align:center;margin-top:.5rem;min-height:1.2rem}

/* BUTTONS */
.btn-primary{padding:.6rem 1.2rem;background:linear-gradient(180deg,#1a4a5a,#0d2a3a);border:1px solid var(--gold);border-radius:var(--r);color:var(--gold-b);font-family:var(--font-h);font-size:.85rem;letter-spacing:.06em;cursor:pointer;transition:all .2s;text-transform:uppercase}
.btn-primary:hover{background:linear-gradient(180deg,#2a6a8a,#1d4a6a);box-shadow:0 0 12px var(--gold-glow);transform:translateY(-1px)}
.btn-secondary{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-g);border-radius:var(--r);color:var(--text);font-family:var(--font-b);font-size:.9rem;cursor:pointer;transition:all .2s}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:.3rem .7rem;font-size:.78rem}
.btn-icon-close{background:none;border:none;color:var(--text-d);font-size:1rem;cursor:pointer;padding:.2rem .5rem;border-radius:var(--r);transition:color .2s}
.btn-icon-close:hover{color:var(--red-b)}
.btn-logout{padding:.35rem .8rem;background:linear-gradient(180deg,#5a1010,#3a0808);border:1px solid #7a2020;border-radius:var(--r);color:#e07070;font-size:.82rem;cursor:pointer}
.btn-chat-toggle{padding:.35rem .7rem;background:rgba(0,119,170,.1);border:1px solid var(--border-g);border-radius:var(--r);color:var(--gold);font-size:.95rem;cursor:pointer}
.btn-fav{background:none;border:1px solid var(--border-g);border-radius:var(--r);color:var(--text-d);padding:.25rem .75rem;cursor:pointer;font-size:.85rem;transition:all .2s;font-family:var(--font-b)}
.btn-fav:hover,.btn-fav.active{color:var(--gold-b);border-color:var(--gold);background:rgba(0,119,170,.12)}

/* NAVBAR */
.navbar{display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,var(--bg-panel),var(--bg-dark));border-bottom:2px solid var(--border-g);padding:.6rem 1.25rem;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.6);flex-wrap:wrap}
.nav-brand{display:flex;align-items:center;gap:.5rem;margin-right:auto}
.nav-sword{font-size:1.3rem;filter:drop-shadow(0 0 6px var(--gold))}
.nav-title{font-family:var(--font-h);color:var(--gold-b);font-size:1rem;letter-spacing:.05em}
.nav-links{display:flex;gap:.25rem;flex-wrap:wrap}
.nav-btn{padding:.35rem .8rem;background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--text-d);font-family:var(--font-b);font-size:.88rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.nav-btn:hover{color:var(--gold);border-color:var(--border-g)}
.nav-btn.active{color:var(--gold-b);border-color:var(--gold);background:rgba(0,119,170,.1)}
.nav-hud{display:flex;align-items:center;gap:.6rem}
.hud-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.2rem .6rem;font-size:.83rem;color:var(--gold-b);font-family:var(--font-h)}

/* VIEWS */
.view{display:none;padding:1.25rem;max-width:1280px;margin:0 auto;animation:fadeIn .2s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.view-header{margin-bottom:1.25rem}
.view-title{font-family:var(--font-h);color:var(--gold-b);font-size:1.45rem;letter-spacing:.05em;text-shadow:0 0 20px var(--gold-glow)}
.section-label{font-family:var(--font-h);color:var(--gold-d);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:1.1rem 0 .6rem;display:flex;align-items:center;gap:.75rem}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-g),transparent)}

/* DUNGEON GRID */
.dungeon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem;margin-bottom:.5rem}
.dungeon-card{background:linear-gradient(160deg,var(--bg-card),var(--bg-panel));border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.dungeon-card:hover{border-color:var(--border-g);transform:translateY(-3px)}
.dungeon-card-img{width:100%;height:130px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;font-size:3.5rem;border-bottom:1px solid var(--border);overflow:hidden;position:relative}
.dungeon-card-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.dungeon-card-body{padding:.85rem}
.dungeon-card-name{font-family:var(--font-h);color:var(--gold-b);font-size:.95rem;margin-bottom:.3rem}
.dungeon-card-desc{color:var(--text-d);font-size:.83rem;font-style:italic;margin-bottom:.6rem}
.dungeon-card-best{display:inline-block;background:rgba(0,119,170,.1);border:1px solid var(--border-g);border-radius:var(--r);padding:.15rem .55rem;font-size:.78rem;color:var(--gold);font-family:var(--font-h)}
.dungeon-card.locked{opacity:.7;cursor:not-allowed}
.dungeon-card.locked:hover{border-color:var(--border);transform:none}
.lock-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.85rem;color:#fff;text-align:center;z-index:10}
.lock-icon{font-size:3rem;margin-bottom:.5rem}
.lock-text{font-size:.75rem;color:#aaa;margin-bottom:.3rem}
.lock-requirement{font-weight:600;color:var(--gold);margin-bottom:.3rem}
.lock-progress{font-size:.7rem;color:#aaa}

/* WORLD BOSS */
.world-boss-area{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:.9rem;margin-bottom:.5rem}
.world-boss-card{background:linear-gradient(160deg,#1a0808,#110505);border:1px solid #5a1010;border-radius:var(--rl);overflow:hidden}
.world-boss-img{width:100%;height:110px;background:#0d0505;display:flex;align-items:center;justify-content:center;font-size:3rem;border-bottom:1px solid #5a1010;overflow:hidden}
.world-boss-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.world-boss-body{padding:.85rem}
.world-boss-name{font-family:var(--font-h);color:#f08080;font-size:.95rem;margin-bottom:.3rem}
.world-boss-desc{color:#907070;font-size:.82rem;font-style:italic;margin-bottom:.65rem}
.world-boss-timer{font-family:var(--font-h);font-size:.78rem;color:#c08080;margin-bottom:.5rem}
.world-boss-fights{display:flex;gap:.3rem;margin-bottom:.65rem}
.fight-pip{width:18px;height:18px;border-radius:50%;background:var(--bg-card);border:1px solid #5a1010}
.fight-pip.used{background:#7a1a1a;border-color:var(--red)}
.fight-pip.avail{background:#3a0808;border-color:var(--red-b);box-shadow:0 0 6px rgba(231,76,60,.4)}

/* ACTIVE SESSIONS */
#active-sessions{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1rem}
.session-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:border-color .2s}
.session-card:hover{border-color:var(--border-g)}
.session-card-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.session-dungeon-name{font-family:var(--font-h);color:var(--gold);font-size:.9rem}
.session-info{flex:1}
.session-heroes-text{font-size:.82rem;color:var(--text-d);margin-top:.15rem}
.session-stage-badge{background:rgba(0,119,170,.12);border:1px solid var(--border-g);border-radius:var(--r);padding:.25rem .75rem;font-family:var(--font-h);font-size:.82rem;color:var(--gold-b);white-space:nowrap}
.session-mode-badge{border-radius:var(--r);padding:.15rem .5rem;font-size:.72rem;font-family:var(--font-h);letter-spacing:.08em;text-transform:uppercase}
.session-mode-badge.normal{background:rgba(39,174,96,.12);color:var(--green-b);border:1px solid rgba(39,174,96,.3)}
.session-mode-badge.hard{background:rgba(255,152,0,.12);color:#ffb74d;border:1px solid rgba(255,152,0,.3)}
.session-mode-badge.hell{background:rgba(192,57,43,.12);color:var(--red-b);border:1px solid rgba(192,57,43,.3)}
.btn-stop{padding:.3rem .75rem;background:linear-gradient(180deg,#5a1010,#3a0808);border:1px solid #7a2020;border-radius:var(--r);color:#e07070;font-size:.78rem;cursor:pointer}
.btn-compact-toggle{padding:.3rem .75rem;background:linear-gradient(180deg,rgba(0,119,170,.4),rgba(0,80,120,.4));border:1px solid var(--gold);border-radius:var(--r);color:var(--gold-b);font-size:.78rem;cursor:pointer;font-weight:bold}

/* ═══════════════════════════════════════════════
   LIVE COMBAT PANEL
   Layout: [left: enemy top, heroes bottom] [right: log + loot]
═══════════════════════════════════════════════ */
.session-combat-body{display:grid;grid-template-columns:1fr 280px;gap:0;min-height:200px}

.combat-left{padding:.85rem;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:.6rem}

.combat-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.combat-label{font-family:var(--font-h);color:var(--gold-d);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.combat-toggle-btn{background:none;border:none;color:var(--text-d);font-size:.78rem;cursor:pointer;font-family:var(--font-b);padding:.15rem .4rem;border-radius:var(--r)}
.combat-toggle-btn:hover{color:var(--gold)}

/* Enemies section — top: horizontal icon row */
.combat-enemies-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:flex-start;min-height:80px}
.combat-section-label{font-size:.65rem;font-family:var(--font-h);color:var(--red-b);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem;opacity:.8;width:100%;text-align:center}

/* VS divider */
.combat-vs-row{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.combat-vs-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-g),transparent)}
.combat-vs-text{font-family:var(--font-h);color:var(--red-b);font-size:1rem;text-shadow:0 0 8px rgba(192,57,43,.5);flex-shrink:0}

/* Heroes section — bottom: horizontal icon row */
.combat-heroes-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:flex-start;position:relative}

/* Fighter card — compact vertical */
.fighter-card{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .4rem;text-align:center;width:200px;flex-shrink:0;position:relative;overflow:visible;transition:border-color .2s}
.fighter-card.is-acting{border-color:var(--gold);box-shadow:0 0 8px var(--gold-glow)}
.fighter-card.is-dead{opacity:0;filter:grayscale(1);transform:scale(0.85);position:absolute;pointer-events:none;transition:opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease}
.fighter-card.enemy-card{border-color:rgba(192,57,43,.3)}
.fighter-card.enemy-card.is-acting{border-color:var(--red-b);box-shadow:0 0 8px rgba(192,57,43,.4)}

/* Icon at top of card */
.fighter-icon{width:180px;height:180px;margin:0 auto .3rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.5rem;image-rendering:pixelated}
.fighter-icon img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

.fighter-name{font-family:var(--font-h);font-size:.62rem;color:var(--gold);margin-bottom:.22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fighter-name.enemy-name{color:#f08080}
.hp-bar-wrap{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;border:1px solid var(--border);margin-bottom:.15rem}
.hp-bar{height:100%;border-radius:3px;transition:width .6s ease,background-color .3s;background:var(--hp-g)}
.hp-bar.mid{background:var(--hp-y)}
.hp-bar.low{background:var(--hp-r)}
.hp-text{font-size:.6rem;color:var(--text-d);margin-bottom:.1rem}
.shield-text{font-size:.6rem;color:var(--shield);min-height:.75rem}

/* Skill CD column (heroes only) — one skill per row inside compact card */
.skill-cd-row{display:flex;flex-direction:column;gap:.2rem;margin-top:.25rem}
.skill-cd-item{display:flex;flex-direction:column;gap:.06rem}
.skill-cd-name{font-size:.54rem;color:var(--text-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.skill-cd-bar-wrap{height:3px;background:var(--bg);border-radius:2px;overflow:hidden}
.skill-cd-bar{height:100%;border-radius:2px;background:var(--red-b);transition:width .9s linear}
.skill-cd-bar.ready{background:var(--green-b)}
.skill-cd-timer{font-size:.54rem;color:var(--text-d);text-align:right;font-family:var(--font-h);line-height:1}
.skill-cd-timer.ready{color:var(--green-b)}

/* Right panel: log + loot */
.combat-right{display:flex;flex-direction:column}
.combat-log-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column}
.combat-log{flex:1;overflow-y:auto;background:var(--bg-dark);padding:.5rem .65rem;font-size:.76rem;display:flex;flex-direction:column;gap:.2rem;min-height:160px;max-height:280px}
.log-entry{padding:.12rem .3rem;border-radius:2px;line-height:1.3}
.log-entry.log-dmg{color:#e88}
.log-entry.log-heal{color:#7e7}
.log-entry.log-shield{color:#89d}
.log-entry.log-drain{color:#c8f}
.log-entry.log-enemy{color:#f8a878}
.log-entry.log-passive{color:var(--gold)}
.log-entry.log-crit{font-weight:700}
.log-entry.log-dot{color:#f88;opacity:.8}
.log-entry.log-hot{color:#6f6;opacity:.8}
.log-entry.log-block{color:#8ad;opacity:.8}
.log-entry.log-effect{color:#da8;opacity:.8}
.log-entry.log-result-win{color:var(--gold-b);background:rgba(0,119,170,.08);font-family:var(--font-h);text-align:center;padding:.3rem}
.log-entry.log-result-lose{color:var(--red-b);font-family:var(--font-h);text-align:center;padding:.3rem}

/* PvP Attacker/Defender color coding */
.log-entry.log-attacker{color:#4a9eff;border-left:3px solid #4a9eff;padding-left:.2rem;font-weight:500}
.log-entry.log-defender{color:#ff6b6b;border-left:3px solid #ff6b6b;padding-left:.2rem;font-weight:500}

/* Run loot row — bottom of right panel */
.run-loot-row{padding:.5rem .65rem;background:var(--bg-card);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.2rem;font-size:.76rem}
.run-loot-title{font-family:var(--font-h);color:var(--gold-d);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}
.run-loot-line{display:flex;justify-content:space-between}
.run-loot-label{color:var(--text-d)}
.run-loot-value{color:var(--gold-b);font-family:var(--font-h)}

/* FLOATING NUMBERS */
.float-number{position:fixed;pointer-events:none;font-family:var(--font-h);font-size:1.05rem;font-weight:700;animation:floatUp 1.4s ease-out forwards;z-index:9998;white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.float-number.dmg{color:var(--red-b)}
.float-number.heal{color:var(--green-b)}
.float-number.shield{color:var(--shield)}
.float-number.crit{color:#FFD700;font-size:1.35rem}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}20%{opacity:1;transform:translateY(-10px) scale(1.12)}100%{opacity:0;transform:translateY(-52px) scale(.88)}}

/* MODAL base */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(3px)}
.modal-content{position:relative;background:linear-gradient(160deg,var(--bg-panel),var(--bg-dark));border:1px solid var(--border-g);border-radius:var(--rl);padding:1.5rem;width:1100px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadowl)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.modal-header h3{font-family:var(--font-h);color:var(--gold-b)}
.modal-sub{color:var(--text-d);font-style:italic;font-size:.83rem;margin-bottom:.85rem}
.modal-footer{display:flex;gap:.65rem;margin-top:.75rem}
.assign-hero-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.45rem;margin-bottom:.85rem;max-height:240px;overflow-y:auto}
.assign-hero-item{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--r);padding:.45rem;text-align:center;cursor:pointer;transition:all .15s;font-size:.75rem}
.assign-hero-item:hover{border-color:var(--border-l)}
.assign-hero-item.selected{border-color:var(--gold);background:rgba(0,119,170,.1);color:var(--gold-b)}
.assign-hero-item.busy,.assign-hero-item.dead{opacity:.4;cursor:not-allowed}
.assign-hero-img{width:44px;height:44px;background:var(--bg-dark);border-radius:var(--r);margin:0 auto .3rem;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.4rem;image-rendering:pixelated}
.assign-hero-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.assign-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem}
.option-row{display:flex;align-items:center;gap:.65rem}
.option-row label{color:var(--parch-d);font-size:.88rem;min-width:130px}
.option-row select,.option-row input{flex:1;padding:.4rem .55rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--parch);font-family:var(--font-b);font-size:.88rem}
.option-row select:focus,.option-row input:focus{outline:none;border-color:var(--gold)}
.assign-container{display:grid;grid-template-columns:0.7fr 1.5fr;gap:1.5rem;margin-bottom:1.1rem}
.assign-left{display:flex;flex-direction:column;gap:.5rem}
.assign-right{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--r);padding:1rem;overflow-y:auto;max-height:400px}
.loot-rewards-header{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0.75rem;margin-bottom:0.75rem}
.rewards-row{display:flex;gap:1rem}
.reward-item{color:var(--text-l);font-size:0.85rem;flex:1}
.loot-stage-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0.75rem;margin-bottom:0.75rem}
.loot-stage-label{font-weight:bold;color:var(--gold);margin-bottom:0.5rem;font-size:0.9rem}
.loot-drop-item{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;padding:0.35rem;border-radius:var(--r);background:rgba(255,255,255,0.02);cursor:pointer;transition:background .15s}
.loot-drop-item:hover{background:rgba(255,255,255,0.05)}
.loot-drop-icon-container{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--bg-dark)}
.loot-drop-icon{width:100%;height:100%;object-fit:cover;border-radius:4px}
.loot-icon-placeholder{font-size:1.2rem;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.loot-drop-info{flex:1;min-width:0}
.loot-drop-name{color:var(--text-l);font-size:0.75rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loot-drop-chance{color:var(--text-d);font-size:0.7rem}
@media(max-width:1000px){.assign-container{grid-template-columns:1fr}.assign-right{max-height:none}}

/* HERO TABS */
.hero-tabs{display:flex;gap:.5rem;margin-top:.75rem}
.hero-tab-btn{padding:.4rem .8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);color:var(--text-d);cursor:pointer;transition:all .2s;font-size:.85rem}
.hero-tab-btn.active{background:var(--gold);color:var(--bg-dark);border-color:var(--gold-b);font-weight:600}
.hero-tab-btn:hover:not(.active){border-color:var(--border-g);color:var(--text)}

/* INVENTORY TABS */
.inv-tabs{display:flex;gap:.5rem;margin-top:.75rem}
.inv-tab-btn{padding:.4rem .8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);color:var(--text-d);cursor:pointer;transition:all .2s;font-size:.85rem}
.inv-tab-btn.active{background:var(--gold);color:var(--bg-dark);border-color:var(--gold-b);font-weight:600}
.inv-tab-btn:hover:not(.active){border-color:var(--border-g);color:var(--text)}

/* HERO GRID */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem}
.hero-card{background:linear-gradient(160deg,var(--bg-card),var(--bg-panel));border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);position:relative}
.hero-card:hover{border-color:var(--border-g);transform:translateY(-3px)}
.hero-card.unobtained{border:2px solid #ff4444;box-shadow:0 0 10px rgba(255,68,68,0.4);opacity:.85}
.hero-card.unobtained:hover{border-color:#ff6666;transform:translateY(-3px)}
.hero-card.in-dungeon::after{content:'⚔';position:absolute;top:6px;right:8px;color:var(--gold-b);font-size:.9rem;text-shadow:0 0 8px var(--gold-glow)}
.hero-card.fav::before{content:'★';position:absolute;top:6px;left:8px;color:var(--gold-b);font-size:.9rem;z-index:1}
.hero-card-portrait{width:100%;height:256px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;font-size:3rem;border-bottom:1px solid var(--border);overflow:hidden;image-rendering:pixelated}
.hero-card-portrait img{width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated}
.hero-card-body{padding:.65rem}
.hero-card-name{font-family:var(--font-h);color:var(--gold);font-size:.78rem;margin-bottom:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-card-level{font-size:.75rem;color:var(--text-d)}
.hero-xp-mini{height:3px;background:var(--bg-dark);border-radius:2px;overflow:hidden;margin-top:.4rem}
.hero-xp-mini-bar{height:100%;background:var(--xp);border-radius:2px;transition:width .5s}

/* HERO POPUP (z-index: 2000) */
.hero-popup-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center}
.hero-popup{position:relative;background:linear-gradient(150deg,var(--bg-panel),var(--bg-dark));border:1px solid var(--border-g);border-radius:var(--rl);width:860px;max-width:97vw;max-height:93vh;overflow-y:auto;box-shadow:var(--shadowl);display:grid;grid-template-columns:250px 1fr}
.hero-popup-close{position:absolute;top:.75rem;right:.75rem;z-index:1}
.hero-popup-left{padding:1.25rem;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:.6rem;align-items:center}
.hero-popup-left .hero-popup-level-row,.hero-popup-left .hero-popup-stats,.hero-popup-left .hero-popup-race-ability,.hero-popup-left .xp-bar-wrap,.hero-popup-left .xp-label,.hero-popup-left .cap-cost-info{width:100%}
.hero-popup-portrait{width:150px;height:150px;background:var(--bg-dark);border:2px solid var(--border-g);border-radius:var(--rl);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:5rem;image-rendering:pixelated;margin:0 auto}
.hero-popup-portrait img{width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated}
.hero-popup-name{font-family:var(--font-h);color:var(--gold-b);font-size:1rem;text-align:center}
.hero-popup-badges{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.badge{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.12rem .45rem;font-size:.72rem;color:var(--parch-d)}
.badge.tier-t1,.badge.tier-t2{border-color:#888;color:#aaa}
.badge.tier-t3,.badge.tier-t4{border-color:var(--blue-b);color:#90c0ff}
.badge.tier-t5,.badge.tier-t6{border-color:var(--green-b);color:#90f090}
.badge.tier-t7,.badge.tier-t8{border-color:var(--purple-b);color:#c090ff}
.badge.tier-t9{border-color:var(--gold);color:var(--gold-b)}
.badge.tier-t10{border-color:#ff6b6b;color:#ffaaaa}
.hero-popup-level-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.hero-popup-level-row span{font-family:var(--font-h);color:var(--gold);font-size:.88rem}
.cap-cost-info{background:rgba(0,119,170,.05);border:1px solid var(--border);border-radius:var(--r);padding:.35rem .6rem;font-size:.76rem;color:var(--text-d);line-height:1.7}
.cap-cost-info .can-afford{color:var(--green-b)}
.cap-cost-info .cannot-afford{color:var(--red-b)}
.xp-bar-wrap{height:5px;background:var(--bg-dark);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
.xp-bar{height:100%;background:var(--xp);border-radius:3px;transition:width .5s}
.xp-label{font-size:.72rem;color:var(--text-d)}
.hp-fav-row{display:flex;justify-content:center}
.hero-popup-stats{display:flex;flex-direction:column;gap:.22rem}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;border-bottom:1px solid rgba(80,80,80,.4);font-size:.84rem}
.stat-row:last-child{border-bottom:none}
.stat-label{color:var(--text-d)}
.stat-val{color:var(--parch);font-weight:600;font-family:var(--font-h);font-size:.8rem}
.hero-popup-race-ability{background:rgba(0,119,170,.05);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .75rem;font-size:.82rem}
.race-ability-label{font-family:var(--font-h);color:var(--gold-d);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}

/* Hero popup right col */
.hero-popup-right{padding:1.25rem;display:flex;flex-direction:column}
.hp-skills-blessings{display:grid;grid-template-columns:1fr 200px;gap:1rem}
.hp-skills-col{display:flex;flex-direction:column;gap:.5rem}
.hp-blessings-col{display:flex;flex-direction:column;gap:.5rem}
.hp-section-label{font-family:var(--font-h);color:var(--gold-d);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:.3rem;margin-bottom:.4rem}
.skill-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.6rem .85rem;position:relative;cursor:default}
.skill-card:hover{border-color:var(--border-g)}
.skill-card .skill-tooltip{display:none;position:absolute;bottom:calc(100%+5px);left:0;background:var(--bg-dark);border:1px solid var(--border-g);border-radius:var(--r);padding:.4rem .7rem;font-size:.78rem;color:var(--parch);width:240px;z-index:10;line-height:1.4;pointer-events:none}
.skill-card:hover .skill-tooltip{display:block}
.skill-slot-badge{display:inline-block;background:var(--border-g);color:var(--bg-dark);font-family:var(--font-h);font-size:.62rem;padding:.08rem .35rem;border-radius:var(--r);margin-bottom:.25rem;text-transform:uppercase}
.skill-name{font-family:var(--font-h);color:var(--gold);font-size:.85rem;margin-bottom:.15rem}
.skill-desc{color:var(--text-d);font-size:.82rem;font-style:italic}
.skill-cd-info{font-size:.75rem;color:var(--blue-b);margin-top:.2rem}
.hp-passive{background:rgba(142,68,173,.1);border:1px solid rgba(142,68,173,.35);border-radius:var(--r);padding:.6rem .85rem}
.passive-label{font-size:.68rem;color:var(--purple-b);font-family:var(--font-h);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}

/* Blessing slots */
.hp-blessing-slots{display:flex;flex-direction:column;gap:.45rem}
.blessing-slot-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.55rem .75rem;cursor:pointer;text-align:left;transition:border-color .2s;width:100%;position:relative;overflow:visible}
.blessing-slot-btn:hover{border-color:var(--gold)}
.blessing-slot-btn.has-blessing{border-color:var(--purple);background:rgba(142,68,173,.08)}
.blessing-slot-num{font-family:var(--font-h);color:var(--text-d);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.blessing-slot-content{font-size:.82rem;color:var(--text-d);font-style:italic}
.blessing-slot-content.filled{color:var(--purple-b);font-style:normal;font-weight:600}
.blessing-slot-wrapper{display:flex;align-items:center;gap:.5rem}
.blessing-slot-wrapper .blessing-slot-btn{flex:1}
.blessing-slot-actions{display:flex;gap:.3rem}
.blessing-slot-actions .btn-mini{padding:.4rem .5rem;background:linear-gradient(180deg,rgba(142,68,173,.4),rgba(100,40,130,.4));border:1px solid rgba(142,68,173,.6);border-radius:var(--r);color:var(--purple-b);font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:bold;min-width:2rem;text-align:center}
.blessing-slot-actions .btn-mini:hover{background:linear-gradient(180deg,rgba(142,68,173,.7),rgba(100,40,130,.7));border-color:var(--purple);box-shadow:0 0 8px rgba(142,68,173,.4)}
.blessing-slot-actions .btn-mini:disabled{opacity:.5;cursor:not-allowed}
.tier-upgrade-btn{padding:.25rem .5rem;background:linear-gradient(180deg,rgba(218,165,32,.3),rgba(184,134,11,.3));border:1px solid rgba(218,165,32,.5);border-radius:var(--r);color:var(--gold-b);font-size:.75rem;cursor:pointer;transition:all .2s;font-weight:bold;margin-left:.3rem}
.tier-upgrade-btn:hover{background:linear-gradient(180deg,rgba(218,165,32,.6),rgba(184,134,11,.6));border-color:var(--gold);box-shadow:0 0 8px rgba(218,165,32,.3)}

/* SKILL TREE (z-index: 3000) */
.skill-tree-popup{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center}
.skill-tree-popup-inner{position:relative;background:linear-gradient(160deg,var(--bg-panel),var(--bg-dark));border:1px solid var(--border-g);border-radius:var(--rl);padding:1.5rem;width:500px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadowl)}
.st-locked-notice{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.3);border-radius:var(--r);padding:.5rem .75rem;font-size:.82rem;color:#f0a0a0;margin-bottom:.75rem}
.st-points-display{font-family:var(--font-h);color:var(--gold);font-size:.88rem;margin:.6rem 0}
.skill-tree-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem}
.skill-node{aspect-ratio:1;border-radius:var(--r);background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--text-d);cursor:default;transition:all .15s}
.skill-node.can-unlock{cursor:pointer}
.skill-node.can-unlock:hover{border-color:var(--border-g);color:var(--gold)}
.skill-node.unlocked{background:rgba(124,77,255,.2);border-color:var(--xp);color:#c0a0ff}
.skill-node.locked-preview{background:rgba(30,30,30,.5);border-color:#333;color:#444}

/* BLESSING PICKER (z-index: 4000) */
.blessing-picker-popup{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center}
.bp-blessing-list{display:flex;flex-direction:column;gap:.45rem;max-height:340px;overflow-y:auto}
.bp-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.6rem .85rem;cursor:pointer;transition:border-color .2s;display:flex;align-items:center;gap:.75rem}
.bp-item:hover{border-color:var(--purple)}
.bp-item-name{font-family:var(--font-h);color:var(--purple-b);font-size:.85rem}
.bp-item-desc{font-size:.8rem;color:var(--text-d);font-style:italic}

/* INVENTORY */
.inv-hud-row{display:flex;gap:1rem;margin-bottom:1rem}
.inv-hud-item{background:var(--bg-card);border:1px solid var(--border-g);border-radius:var(--r);padding:.4rem .9rem;font-family:var(--font-h);color:var(--gold-b);font-size:.9rem}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.65rem}
.inv-item-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.65rem;transition:border-color .2s;cursor:pointer}
.inv-item-card:hover{border-color:var(--border-g)}
.inv-item-card.is-chest{border-color:var(--border-g);background:linear-gradient(160deg,var(--bg-card),rgba(212,160,23,.04))}
.inv-item-card.is-chest:hover{border-color:var(--gold)}
.inv-item-card.is-blessing{border-color:rgba(142,68,173,.4);background:rgba(142,68,173,.06)}
.inv-item-card.unobtained{opacity:.65;filter:saturate(0.3) brightness(0.8);position:relative}
.inv-item-card.unobtained::after{content:'Nicht erhalten';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#999;padding:.4rem .75rem;border-radius:4px;font-size:.75rem;white-space:nowrap;pointer-events:none;font-family:var(--font-h);z-index:1}
.inv-item-img{width:48px;height:48px;background:var(--bg-dark);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:.45rem;image-rendering:pixelated;position:relative}
.inv-item-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.inv-item-qty{position:absolute;bottom:-4px;right:-4px;background:var(--gold);color:var(--bg-dark);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:bold;font-family:var(--font-h)}
.inv-item-name{font-family:var(--font-h);font-size:.82rem;margin-bottom:.25rem}
.inv-item-type{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem;font-family:var(--font-h)}
.inv-item-type.type-chest{color:var(--gold-d)}
.inv-item-type.type-blessing{color:var(--purple-b)}
.inv-item-type.type-equipment{color:var(--blue-b)}
.inv-item-desc{font-size:.78rem;color:var(--text-d);font-style:italic;margin-bottom:.45rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inv-item-actions{display:flex;gap:.35rem;flex-wrap:wrap}
.btn-sell{font-size:.73rem;background:none;border:1px solid #4a3010;border-radius:var(--r);color:var(--gold-d);padding:.18rem .45rem;cursor:pointer}
.btn-sell:hover{border-color:var(--gold);color:var(--gold)}
.rarity-common{color:var(--text)}
.rarity-rare{color:var(--blue-b)}
.rarity-epic{color:var(--purple-b)}
.rarity-legendary{color:var(--gold-b)}

/* Chest detail popup */
.chest-detail-body{display:flex;flex-direction:column;gap:.75rem}
.chest-detail-img{text-align:center;font-size:4rem;filter:drop-shadow(0 0 12px var(--gold-glow))}
.chest-detail-desc{color:var(--text-d);font-style:italic;font-size:.9rem;text-align:center;border-bottom:1px solid var(--border);padding-bottom:.65rem}
.chest-drop-list{display:flex;flex-direction:column;gap:.3rem;margin-top:.4rem}
.drop-row{display:flex;justify-content:space-between;font-size:.85rem;padding:.2rem 0;border-bottom:1px solid rgba(80,80,80,.3)}
.drop-row:last-child{border-bottom:none}
.drop-name{color:var(--parch)}
.drop-pct{color:var(--gold);font-family:var(--font-h);font-size:.8rem}

/* Loot popup */
.loot-popup{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8)}
.loot-popup-inner{background:linear-gradient(160deg,var(--bg-panel),var(--bg-dark));border:2px solid var(--gold);border-radius:var(--rl);padding:2rem;text-align:center;min-width:240px;box-shadow:var(--gold-glow) 0 0 30px,var(--shadowl);animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.loot-rarity-badge{display:inline-block;padding:.18rem .7rem;border-radius:var(--r);font-family:var(--font-h);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.loot-rarity-badge.common{background:rgba(100,100,100,.3);color:var(--text);border:1px solid #666}
.loot-rarity-badge.rare{background:rgba(41,128,185,.3);color:var(--blue-b);border:1px solid var(--blue)}
.loot-rarity-badge.epic{background:rgba(142,68,173,.3);color:var(--purple-b);border:1px solid var(--purple)}
.loot-rarity-badge.legendary{background:rgba(212,160,23,.3);color:var(--gold-b);border:1px solid var(--gold)}
.loot-icon{font-size:3.5rem;margin-bottom:.65rem}
.loot-item-name{font-family:var(--font-h);color:var(--gold-b);font-size:1.1rem;margin-bottom:.4rem}
.loot-item-stats{color:var(--green-b);font-size:.88rem;margin-bottom:1.1rem}

/* Cap popup */
.cap-popup-cost-row{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid var(--border);font-size:.9rem}

/* HERO BOX PICKER */
.hbp-hero-list{display:flex;flex-direction:column;gap:.75rem;max-height:60vh;overflow-y:auto;padding:.5rem 0}
.hbp-hero-card{display:grid;grid-template-columns:120px 1fr 100px;gap:1rem;background:linear-gradient(160deg,var(--bg-card),var(--bg-panel));border:1px solid var(--border);border-radius:var(--rl);padding:1rem;cursor:pointer;transition:all .2s;align-items:center}
.hbp-hero-card:hover{border-color:var(--border-g);background:linear-gradient(160deg,var(--bg-panel),var(--bg-dark));box-shadow:0 0 15px rgba(100,200,255,.2)}
.hbp-hero-image{width:120px;height:120px;background:var(--bg-dark);border:2px solid var(--border);border-radius:var(--rl);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.5rem;image-rendering:pixelated}
.hbp-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated}
.hbp-hero-info{display:flex;flex-direction:column;gap:.3rem}
.hbp-hero-name{font-family:var(--font-h);color:var(--gold-b);font-size:.95rem;font-weight:600}
.hbp-hero-type{font-size:.75rem;color:var(--text-d);text-transform:uppercase;letter-spacing:.05em}
.hbp-hero-desc{font-size:.75rem;color:var(--text-d);line-height:1.5}
.hbp-select-btn{display:flex;justify-content:flex-end}

/* LEADERBOARD */
.leaderboard-filters{display:flex;gap:.65rem;margin-bottom:1.1rem;flex-wrap:wrap;align-items:center}
.leaderboard-filters select{padding:.42rem .7rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--parch);font-family:var(--font-b);font-size:.88rem}
#leaderboard-table{display:flex;flex-direction:column;gap:.35rem}
.lb-header,.lb-row{display:grid;grid-template-columns:48px 1fr 130px;gap:.5rem;align-items:center;padding:.55rem .9rem;border-radius:var(--r)}
.lb-header{background:var(--bg-dark);border:1px solid var(--border);font-family:var(--font-h);font-size:.72rem;color:var(--text-d);letter-spacing:.1em;text-transform:uppercase}
.lb-row{background:var(--bg-card);border:1px solid var(--border);transition:border-color .2s}
.lb-row:hover{border-color:var(--border-g)}
.lb-row:nth-child(2){border-color:var(--gold);background:rgba(212,160,23,.07)}
.lb-row:nth-child(3){border-color:#a0a0a0}
.lb-row:nth-child(4){border-color:#555555}
.lb-rank{font-family:var(--font-h);color:var(--gold);text-align:center}
.lb-rank.rank-1{color:var(--gold-b);font-size:1.1rem}
.lb-rank.rank-2{color:#c0c0c0}
.lb-rank.rank-3{color:#cd7f32}
.lb-name{font-family:var(--font-h);color:var(--parch)}
.lb-stage{font-family:var(--font-h);color:var(--gold);text-align:right}

/* GUILD */
.guild-empty-state{text-align:center;max-width:480px;margin:0 auto;padding:2rem 0}
.guild-empty-state h3{font-family:var(--font-h);color:var(--gold-b);margin-bottom:1.25rem}
.guild-create-form{display:flex;gap:.5rem}
.guild-create-form input{flex:1;padding:.5rem .7rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--parch);font-family:var(--font-b);font-size:.9rem}
.guild-create-form input:focus{outline:none;border-color:var(--gold)}
#guild-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.65rem}
.guild-list-row{display:flex;align-items:center;gap:.65rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.55rem .9rem}
.guild-list-name{flex:1;font-family:var(--font-h);color:var(--gold)}
.guild-list-members{font-size:.8rem;color:var(--text-d)}
.guild-banner{background:linear-gradient(160deg,var(--bg-card),var(--bg-panel));border:1px solid var(--border-g);border-radius:var(--rl);padding:1.25rem;margin-bottom:.85rem;text-align:center}
.guild-banner h2{font-family:var(--font-h);color:var(--gold-b);font-size:1.35rem}
.guild-members-list{display:flex;flex-direction:column;gap:.35rem}
.guild-member-row{display:flex;align-items:center;gap:.6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.48rem .9rem}
.guild-member-name{font-family:var(--font-h);color:var(--parch);font-size:.88rem;flex:1}

/* CHAT POPUP (z-index: 6000) */
.chat-popup{position:fixed;right:1rem;bottom:1rem;width:310px;background:linear-gradient(160deg,var(--bg-panel),var(--bg-dark));border:1px solid var(--border-g);border-radius:var(--rl);box-shadow:var(--shadowl);z-index:6000;user-select:none}
.chat-popup-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem .85rem;background:rgba(0,119,170,.08);border-bottom:1px solid var(--border-g);border-radius:var(--rl) var(--rl) 0 0;cursor:grab;font-family:var(--font-h);font-size:.85rem;color:var(--gold)}
.chat-popup-header:active{cursor:grabbing}
.chat-header-btns{display:flex;gap:.35rem}
.chat-header-btns button{background:none;border:none;color:var(--text-d);cursor:pointer;padding:.15rem .4rem;font-size:.9rem}
.chat-popup-body{padding:.65rem}
.chat-lang-tabs{display:flex;gap:.3rem;margin-bottom:.65rem}
.chat-tab{padding:.28rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);color:var(--text-d);font-family:var(--font-b);font-size:.82rem;cursor:pointer;transition:all .2s}
.chat-tab.active{border-color:var(--gold);color:var(--gold);background:rgba(0,119,170,.08)}
.chat-messages{height:220px;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.6rem;margin-bottom:.55rem;display:flex;flex-direction:column;gap:.35rem}
.chat-msg{font-size:.84rem;line-height:1.35}
.chat-user{color:var(--gold);font-family:var(--font-h);font-size:.78rem;margin-right:.35rem}
.chat-text{color:var(--parch)}
.chat-time{color:var(--text-d);font-size:.7rem;margin-left:.35rem}
.chat-input-row{display:flex;gap:.4rem}
.chat-input-row input{flex:1;padding:.5rem .65rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--parch);font-family:var(--font-b);font-size:.88rem}
.chat-input-row input:focus{outline:none;border-color:var(--gold)}

/* TOAST */
.toast{position:fixed;bottom:5rem;right:1.5rem;background:var(--bg-panel);border:1px solid var(--border-g);border-radius:var(--rl);padding:.65rem 1.1rem;color:var(--parch);font-family:var(--font-b);font-size:.88rem;z-index:9999;box-shadow:var(--shadowl);animation:slideInR .3s ease,fadeOutT .4s ease 2.5s forwards;max-width:290px}
.toast.success{border-color:var(--green);color:var(--green-b)}
.toast.error{border-color:var(--red);color:var(--red-b)}
@keyframes slideInR{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* COMPACT COMBAT WINDOW */
.compact-combat-window{position:fixed;background:var(--bg-panel);border:2px solid var(--border-g);border-radius:var(--rl);padding:.75rem;min-width:280px;box-shadow:0 0 20px rgba(0,0,0,.8);font-family:var(--font-b);z-index:5000;user-select:none}
.compact-combat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;cursor:move;padding:.3rem;border-bottom:1px solid var(--border);color:var(--gold-b);font-size:.85rem;font-weight:bold}
.compact-combat-header button{background:none;border:none;color:var(--text-d);cursor:pointer;font-size:.9rem;padding:0 .3rem}
.compact-combat-header button:hover{color:var(--red-b)}
.compact-combat-fighters{margin-bottom:.6rem}
.compact-fighter-group{margin-bottom:.5rem}
.compact-fighter-label{font-size:.75rem;color:var(--text-d);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.05em}
.compact-fighter-item{display:flex;align-items:center;gap:.4rem;margin-bottom:.25rem;padding:.3rem;background:rgba(255,255,255,.02);border-radius:var(--r);position:relative;overflow:visible}
.compact-fighter-icon{width:36px;height:36px;background:var(--bg-dark);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;image-rendering:pixelated}
.compact-fighter-info{flex:1;min-width:0}
.compact-fighter-name{font-size:.75rem;color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact-hp-bar{width:100%;height:6px;background:var(--bg-dark);border-radius:2px;overflow:hidden;margin-top:.15rem}
.compact-hp-fill{height:100%;background:var(--hp-g);transition:width .2s}
.compact-hp-text{font-size:.65rem;color:var(--text-d);margin-top:.1rem}
.compact-loot{background:rgba(0,119,170,.08);border:1px solid var(--border);border-radius:var(--r);padding:.4rem;margin-top:.4rem}
.compact-loot-label{font-size:.7rem;color:var(--gold-b);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.compact-loot-item{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text);margin-bottom:.15rem}
.compact-loot-item span:last-child{color:var(--gold-b);font-weight:bold}
@keyframes fadeOutT{from{opacity:1}to{opacity:0;transform:translateX(20px)}}
.empty-state{text-align:center;color:var(--text-d);font-style:italic;padding:1.5rem;font-size:.88rem}

/* Match History */
#match-history{margin-top:2rem}
.match-history-title{font-size:1rem;font-family:var(--font-h);color:var(--gold-b);margin-bottom:1rem;letter-spacing:.08em}
.match-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.match-history-card{background:linear-gradient(135deg,rgba(200,170,100,.1),rgba(150,120,60,.1));border:1px solid var(--border);border-radius:var(--r);padding:1rem;cursor:pointer;transition:all .2s;text-align:center}
.match-history-card:hover{background:linear-gradient(135deg,rgba(200,170,100,.2),rgba(150,120,60,.2));transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.match-history-stage{font-size:.95rem;font-weight:bold;color:var(--gold-b);margin-bottom:.5rem}
.match-history-heroes{display:flex;justify-content:center;gap:.3rem;margin-bottom:.5rem;flex-wrap:wrap}
.hero-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);background:rgba(0,0,0,.2)}
.match-history-rewards{font-size:.8rem;color:var(--text-l)}
.match-history-empty{text-align:center;color:var(--text-d);font-style:italic;padding:2rem;font-size:.9rem}

.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:6000;animation:fadeIn .2s}
.modal-content{background:var(--bg);border:2px solid var(--border);border-radius:var(--r);padding:0;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:slideUp .2s}
.modal-header{padding:1.5rem;border-bottom:1px solid var(--border-l);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-h)}
.modal-header h2{margin:0;color:var(--gold-b)}
.modal-close{background:none;border:none;color:var(--text-l);font-size:1.5rem;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{color:var(--gold-b)}
.modal-body{padding:1.5rem}
.detail-section{margin-bottom:1.5rem}
.detail-section h3{color:var(--gold-b);font-family:var(--font-h);margin-top:0;margin-bottom:.75rem}
.detail-section > div{color:var(--text-l);margin-bottom:.5rem}
.item-badge{display:inline-block;background:rgba(200,170,100,.15);border:1px solid var(--border);border-radius:var(--r);padding:.25rem .5rem;font-size:.75rem;margin-right:.25rem;margin-bottom:.25rem}
.hero-stats-list{display:flex;flex-direction:column;gap:.5rem}
.hero-stat-row{display:flex;justify-content:space-between;padding:.75rem;background:rgba(0,0,0,.2);border-radius:var(--r)}
.hero-stat-name{font-weight:bold;color:var(--text);display:flex;align-items:center;gap:.5rem}
.hero-stat-icon{width:32px;height:32px;border-radius:4px;object-fit:cover}
.hero-stat-values{display:flex;gap:.75rem;font-size:.85rem}
.stat-damage{color:#ff6b6b}
.stat-heal{color:#51cf66}
.stat-shield{color:#4dabf7}
.stat-graph{background:rgba(0,0,0,.1);border-radius:var(--r);padding:.5rem}

/* WORLD BOSS STYLES */
.worldboss-results{padding:2rem;background:linear-gradient(135deg,rgba(80,20,20,.3),rgba(20,40,80,.3));border-radius:var(--r);border:2px solid #905050}
.boss-status{margin-bottom:1.5rem;padding:1rem;background:rgba(0,0,0,.3);border-radius:var(--r)}
.boss-status.victory{border-left:4px solid #51cf66}
.boss-status.defeat{border-left:4px solid #ff6b6b}
.boss-name{font-size:1.3rem;font-weight:bold;margin-bottom:.5rem;color:#fff}
.boss-health{margin-top:.75rem}
.health-bar{height:24px;background:rgba(0,0,0,.5);border-radius:4px;overflow:hidden;margin-bottom:.5rem}
.health-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff922b);width:100%;transition:width 0.3s}
.health-text{font-size:.9rem;text-align:center;color:#ff922b;font-weight:bold}
.loot-section{background:rgba(0,0,0,.4);padding:1rem;border-radius:var(--r);margin-bottom:1rem}
.loot-section h3{margin:0 0 0.75rem 0;color:#ffd700;text-align:center}
.loot-item{display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.05rem}
.loot-item:last-child{border-bottom:none}
.fight-duration{text-align:center;color:#aaa;font-size:.9rem;margin-top:1rem}

.world-boss-card{background:linear-gradient(160deg,var(--bg-card),var(--bg-panel));border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);display:flex;height:130px;align-items:stretch}
.world-boss-card:hover{border-color:var(--border-g);transform:translateY(-3px)}
.world-boss-img{width:130px;height:130px;min-width:130px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;font-size:3rem;border-right:1px solid var(--border);overflow:hidden;position:relative}
.world-boss-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.world-boss-body{padding:.85rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.world-boss-name{font-family:var(--font-h);color:var(--gold-b);font-size:.95rem;margin-bottom:.3rem}
.world-boss-desc{color:var(--text-d);font-size:.83rem;font-style:italic;margin-bottom:.6rem}
.world-boss-fights{display:inline-block;background:rgba(255,107,107,.1);border:1px solid var(--border-g);border-radius:var(--r);padding:.15rem .55rem;font-size:.78rem;color:var(--gold);font-family:var(--font-h)}
.fight-pip{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:rgba(255,255,255,.2);transition:all .2s}
.fight-pip.used{background:#ff6b6b}
.fight-pip.avail{background:#51cf66}

.loot-ranges{display:flex;flex-direction:column;gap:.5rem}
.loot-range{display:flex;justify-content:space-between;padding:.5rem;background:rgba(0,0,0,.2);border-radius:var(--r);font-size:.78rem;border-left:3px solid var(--border-g)}

/* ══════════ HOME DASHBOARD ══════════ */
#view-home{padding:0;overflow-y:hidden;max-width:100%!important;margin:0!important;height:calc(100vh - 60px)}

/* Main 2-column grid */
/* ══ HOME GRID: 3 cols [hero-narrow | spacer | chat-compact] + bottom bar ══ */
.home-grid{
  display:grid;
  grid-template-columns:380px 1fr 280px;
  grid-template-rows:1fr auto;
  gap:1.2rem;
  height:100%;
  padding:1.5rem;
  box-sizing:border-box;
}

/* ── HERO COLUMN (schmal, volle Höhe oben) ── */
.home-left{display:flex;flex-direction:column;height:100%;min-height:0}
.home-center{/* Spacer – leer */}

/* Hero Fenster: schmal, nur Bild */
.home-hero-section{
  flex:1;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:visible;position:relative;
  transition:border-color .2s,background .2s;
  min-height:0;
}
.home-hero-section:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.07)}
.home-hero-section::after{content:'✎';position:absolute;bottom:.6rem;right:.7rem;font-size:.85rem;opacity:.35;pointer-events:none}
.hero-image-placeholder{background:transparent;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.home-hero-img-large{width:100%;height:100%;border:none;border-radius:0;background:transparent}
.hero-info-compact{display:flex;flex-direction:column;gap:.3rem}
.hero-name-compact{font-family:var(--font-h);color:var(--gold-b);font-size:1.1rem;font-weight:700}
.hero-meta-compact{display:flex;gap:1rem;color:var(--text-d);font-size:.85rem}

/* Hero select modal */
.hero-select-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem;max-height:400px;overflow-y:auto;padding:.5rem}
.hero-select-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.8rem .5rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.03)}
.hero-select-card:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.hero-select-card.selected{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.hero-select-card img{width:60px;height:75px;object-fit:cover;image-rendering:pixelated;border-radius:4px}
.hero-select-card .hscard-name{font-size:.78rem;font-family:var(--font-h);color:var(--parch);text-align:center;font-weight:600}

/* ── RIGHT COLUMN: Rangliste + Chat (kompakt) ── */
.home-right{display:flex;flex-direction:column;gap:1rem;height:100%}

/* ── EINHEITLICHE MODERNE BUTTONS ── */
/* Basis: alle gleich – kein bunter Rand, kein Glühen */
.hd-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.75);
  cursor:pointer;
  font-family:var(--font-h);font-weight:600;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em;
  position:relative;overflow:hidden;
  transition:background .18s,border-color .18s,transform .18s;
}
.hd-btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.25);
  color:#fff;
  transform:translateY(-2px);
}
.hd-btn:active{transform:translateY(0);background:rgba(255,255,255,.07)}

/* Rangliste – kompakter oben-rechts */
.hd-btn-leaderboard{
  flex-shrink:0;height:56px;
  flex-direction:row;gap:.8rem;
  font-size:.9rem;
}

/* Alle Farb-Overrides entfernt – gleiche neutrale Optik */
.hd-btn-adventure,.hd-btn-heroes,.hd-btn-guild,
.hd-btn-inventory,.hd-btn-pvp,.hd-btn-leaderboard{
  /* inherit base .hd-btn – kein Farboverride */
}

/* ── BOTTOM BAR – 5 gleiche Buttons volle Breite ── */
.home-bottom-bar{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:.8rem;height:110px;
}

/* Chat – kompakter, passt zur rechten Spalte */
.home-chat-section{
  flex:1;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:.8rem;
  background:rgba(255,255,255,.03);
  display:flex;flex-direction:column;min-height:0;
}
.home-chat-tabs{display:flex;gap:.3rem;margin-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.4rem;flex-shrink:0}
.home-chat-tab{background:transparent;border:none;cursor:pointer;padding:.3rem .7rem;font-size:.78rem;font-weight:600;border-bottom:2px solid transparent;transition:all .15s;color:rgba(255,255,255,.4)}
.home-chat-tab.active{color:rgba(255,255,255,.9);border-bottom-color:rgba(255,255,255,.5)}
.home-chat-tab:hover:not(.active){color:rgba(255,255,255,.7)}
.home-chat-messages{flex:1;overflow-y:auto;padding:.4rem;background:rgba(0,0,0,.2);border-radius:6px;border:1px solid rgba(255,255,255,.06);margin-bottom:.6rem;min-height:0}
.home-chat-messages .msg{padding:.25rem .4rem;margin-bottom:.2rem;font-size:.8rem;line-height:1.4;border-radius:4px}
.home-chat-messages .msg:hover{background:rgba(255,255,255,.04)}
.home-chat-input{display:flex;gap:.4rem;flex-shrink:0}
.home-chat-input input{flex:1;padding:.45rem .7rem;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:var(--parch);font-size:.85rem;transition:border-color .15s}
.home-chat-input input:focus{outline:none;border-color:rgba(255,255,255,.3)}
.hd-send-btn{padding:.45rem .9rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:rgba(255,255,255,.7);cursor:pointer;font-size:.85rem;transition:all .15s}
.hd-send-btn:hover{background:rgba(255,255,255,.15);color:#fff}

/* Button icon */
.hd-icon{font-size:1.6rem;transition:transform .2s}
.hd-btn:hover .hd-icon{transform:scale(1.1)}


/* ── BTN-DANGER ── */
.btn-danger{background:rgba(180,40,40,.7);border:1px solid rgba(200,60,60,.5);color:#fff;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:600}
.btn-danger:hover{background:rgba(220,50,50,.85)}
/* ── PVP LIVE ── */
.pvp-live-header{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;margin-bottom:.75rem}
.pvp-opponent-label{font-size:1rem;font-weight:700;color:var(--text);flex:1}
.pvp-timer-label{font-size:.88rem;color:var(--gold);font-weight:600;min-width:90px;text-align:right}
.cd-badge-wrap{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem}
.cd-badge{font-size:.6rem;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:.1rem .3rem;color:var(--text-d);white-space:nowrap}
/* ── PVP ── */
.pvp-top-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;margin-bottom:1.25rem}
.pvp-glory-display{display:flex;align-items:center;gap:.5rem}
.pvp-glory-icon{font-size:1.4rem}
#pvp-glory-value{font-size:1.5rem;font-weight:700;color:var(--gold)}
.pvp-glory-label{font-size:.78rem;color:var(--text-d);margin-left:.2rem}
.pvp-attacks-display{display:flex;align-items:center;gap:.5rem}
.pvp-attacks-icon{font-size:1.4rem}
#pvp-attacks-remaining{font-size:1.2rem;font-weight:700;color:var(--text)}
.pvp-attacks-label{font-size:.78rem;color:var(--text-d);margin-left:.2rem}
.pvp-teams-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
@media(max-width:600px){.pvp-teams-grid{grid-template-columns:1fr}}
.pvp-team-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.9rem}
.pvp-team-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:.75rem;font-size:.9rem}
.pvp-team-slots{display:flex;gap:.6rem;margin-bottom:.5rem}
.pvp-hero-slot{width:60px;text-align:center}
.pvp-hero-slot img{width:52px;height:52px;border-radius:6px;border:1px solid rgba(255,255,255,.15);image-rendering:pixelated}
.pvp-hero-slot .pvp-slot-name{font-size:.65rem;color:var(--text-d);margin-top:.25rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:56px}
.pvp-slot-empty{width:52px;height:52px;border-radius:6px;border:2px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);font-size:1.2rem}
.pvp-team-hint{font-size:.72rem;color:var(--text-d)}
.pvp-result-banner{padding:.75rem 1rem;border-radius:8px;text-align:center;font-size:1.1rem;font-weight:700;margin-bottom:.75rem}
.pvp-result-win{background:rgba(80,200,80,.15);border:1px solid rgba(80,200,80,.4);color:#7fdf7f}
.pvp-result-loss{background:rgba(200,60,60,.15);border:1px solid rgba(200,60,60,.4);color:#df7f7f}
.pvp-matchup-bar{display:flex;gap:.75rem;align-items:center;justify-content:center;margin-bottom:.75rem;flex-wrap:wrap}
.pvp-matchup-team{display:flex;gap:.3rem}
.pvp-matchup-vs{font-weight:700;color:var(--text-d)}
.pvp-log-container{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.6rem .8rem;max-height:260px;overflow-y:auto;font-size:.78rem;font-family:monospace;line-height:1.7}
.pvp-log-container div{border-bottom:1px solid rgba(255,255,255,.04);padding:.1rem 0}
.pvp-history-section{margin-top:1.25rem}
.pvp-history-row{display:flex;align-items:center;gap:.75rem;padding:.55rem .75rem;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);margin-bottom:.45rem;font-size:.82rem}
.pvp-hist-result{font-weight:700;min-width:40px}
.pvp-hist-win{color:#7fdf7f}.pvp-hist-loss{color:#df7f7f}
.pvp-hist-glory{margin-left:auto;font-size:.78rem;font-weight:600}
.pvp-hist-glory.pos{color:#7fdf7f}.pvp-hist-glory.neg{color:#df7f7f}
.pvp-picker-list{display:flex;flex-direction:column;gap:.4rem;max-height:320px;overflow-y:auto}
.pvp-picker-row{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:7px;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:background .15s}
.pvp-picker-row:hover{background:rgba(255,255,255,.07)}
.pvp-picker-row.selected{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.4)}
.pvp-picker-row img{width:38px;height:38px;border-radius:5px;image-rendering:pixelated}
.pvp-picker-name{flex:1;font-size:.85rem}
.pvp-picker-check{color:var(--gold);font-size:1.1rem}
/* PvP Combat Display */
.pvp-combat-display{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1rem;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem}
.pvp-combat-defenders,.pvp-combat-attackers{display:flex;gap:.5rem;flex:1;flex-direction:column}
.pvp-combat-divider{font-size:2rem;color:var(--text-d);opacity:.6}
.pvp-fighter-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.6rem;display:flex;flex-direction:column;align-items:center;min-width:90px}
.pvp-fighter-icon{width:60px;height:60px;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.3)}
.pvp-fighter-icon img{width:100%;height:100%;object-fit:cover;border-radius:5px;image-rendering:pixelated}
.pvp-fighter-name{font-size:.7rem;text-align:center;margin-bottom:.3rem;font-weight:600;color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:84px}
.pvp-hp-bar-wrap{width:70px;height:10px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:2px;overflow:hidden;margin-bottom:.2rem}
.pvp-hp-bar{height:100%;background:linear-gradient(90deg,var(--hp-g),var(--hp-y));width:100%;transition:width .3s;border-radius:1px}
.pvp-hp-bar.mid{background:linear-gradient(90deg,var(--hp-y),var(--hp-r))}
.pvp-hp-bar.low{background:var(--hp-r)}
.pvp-hp-text{font-size:.6rem;color:var(--text-d);text-align:center}
.pvp-fighter-card.is-dead{opacity:.4;filter:grayscale(1)}