/* WAR OF THREE ZONES - Game CSS - PHP 7.3 Compatible */
:root {
  --bg-dark:#0a0a0f;--bg-card:#12121a;--bg-card2:#1a1a28;
  --border:#2a2a40;--border2:#3a3a55;--text:#e8e8f0;--text-muted:#7a7a9a;
  --primary:#8b1a1a;--primary-light:#c02020;--primary-glow:rgba(139,26,26,0.3);
  --gold:#d4af37;--gold-light:#ffd700;--green:#2d5a1b;--green-light:#4a9a2a;
  --blue:#1a1a6e;--blue-light:#4444cc;--purple:#4b0082;--purple-light:#8b00d4;
  --font-title:'Cinzel',serif;--font-body:'Raleway',sans-serif;
  --radius:8px;--shadow:0 4px 20px rgba(0,0,0,0.6);--transition:all 0.3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-body);background:var(--bg-dark);color:var(--text);min-height:100vh;background-image:radial-gradient(ellipse at top,#1a0a2e 0%,#0a0a0f 60%)}
a{color:var(--gold);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--gold-light)}
h1,h2,h3,h4{line-height:1.2}
.game-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:rgba(10,10,15,0.95);border-bottom:1px solid var(--border);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}
.nav-brand{font-family:var(--font-title);font-size:1.1rem;color:var(--gold);letter-spacing:.1em}
.nav-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-links a{font-size:.85rem;color:var(--text-muted);padding:6px 10px;border-radius:var(--radius);transition:var(--transition)}
.nav-links a:hover{color:var(--text);background:var(--bg-card2)}
.btn-logout{color:#ff4444!important}
.player-hud{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;background:rgba(18,18,26,0.9);border-bottom:1px solid var(--border);font-size:.82rem}
.hud-stats{display:flex;gap:16px}
.hud-hp{color:#ff6b6b}.hud-energy{color:#6b8bff}.hud-gold{color:var(--gold)}.hud-level{color:var(--purple-light)}
.game-main{min-height:calc(100vh - 120px)}
.game-footer{text-align:center;padding:20px;color:var(--text-muted);font-size:.75rem;border-top:1px solid var(--border)}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:none;border-radius:var(--radius);font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;line-height:1.2}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;box-shadow:0 2px 12px var(--primary-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--primary-glow);color:#fff}
.btn-secondary{background:var(--bg-card2);color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover{background:var(--border);color:var(--text)}
.btn-danger{background:linear-gradient(135deg,#7a0000,#c00000);color:#fff}
.btn-danger:hover{background:linear-gradient(135deg,#c00000,#f00);color:#fff}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--text);background:var(--bg-card2)}
.btn-lg{padding:14px 28px;font-size:1rem}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-xs{padding:4px 8px;font-size:.75rem}
.btn-block{width:100%;justify-content:center}
.btn-register{background:var(--bg-card2);border:1px solid var(--gold);color:var(--gold)!important}
/* FORMS */
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-size:.85rem;color:var(--text-muted);font-weight:600;letter-spacing:.05em}
.form-control{width:100%;padding:10px 14px;background:var(--bg-card2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:.9rem;transition:var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px var(--primary-glow)}
textarea.form-control{resize:vertical}
select.form-control{cursor:pointer}
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}
.toggle-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-light)}
.help-text{font-size:.78rem;color:var(--text-muted);margin-top:4px;display:block}
.req{color:#f44}
/* ALERTS */
.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:.9rem}
.alert-error{background:rgba(180,0,0,.15);border:1px solid rgba(180,0,0,.4);color:#f88}
.alert-success{background:rgba(0,120,0,.15);border:1px solid rgba(0,120,0,.4);color:#8c8}
/* AUTH */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at center,#1a0a2e 0%,#0a0a0f 70%)}
.auth-box{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:40px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth-logo{font-size:3rem;text-align:center;margin-bottom:16px}
.auth-box h2{font-family:var(--font-title);text-align:center;margin-bottom:24px;color:var(--gold)}
.auth-form{margin-bottom:20px}
.auth-link{text-align:center;font-size:.85rem;color:var(--text-muted)}
/* HOME */
.hero-section{text-align:center;padding:60px 24px 40px;background:linear-gradient(180deg,rgba(26,10,46,.8) 0%,transparent 100%)}
.ascii-title{font-size:.55rem;line-height:1.2;color:var(--primary-light);display:inline-block;overflow-x:auto;max-width:100%}
.hero-title{font-family:var(--font-title);font-size:clamp(2rem,5vw,3.5rem);color:var(--gold);margin:16px 0 8px;text-shadow:0 0 30px rgba(212,175,55,.5)}
.hero-sub{color:var(--text-muted);font-size:1.1rem;margin-bottom:32px}
.hero-stats-row{display:flex;justify-content:center;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.hero-stat{text-align:center}
.stat-num{display:block;font-family:var(--font-title);font-size:2rem;color:var(--gold)}
.stat-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.zones-section,.castes-section,.plots-section{padding:40px 24px;max-width:1200px;margin:0 auto}
.zones-section h2,.castes-section h2,.plots-section h2{font-family:var(--font-title);color:var(--gold);margin-bottom:24px;font-size:1.5rem}
.zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.zone-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;border-top:3px solid var(--zone-color,var(--primary));transition:var(--transition)}
.zone-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.zone-icon{font-size:2rem;margin-bottom:12px}
.zone-card h3{font-family:var(--font-title);color:var(--zone-color,var(--gold));margin-bottom:8px}
.zone-card p{color:var(--text-muted);font-size:.85rem;line-height:1.5}
.zone-ascii{font-size:.65rem;margin-top:16px;color:rgba(255,255,255,.3);line-height:1.4;overflow-x:auto}
.castes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.caste-mini-card{background:var(--bg-card);border:1px solid var(--caste-color,var(--border));border-radius:8px;padding:16px 8px;text-align:center;transition:var(--transition)}
.caste-mini-card:hover{background:var(--bg-card2);transform:translateY(-2px)}
.caste-icon-big{font-size:1.8rem;display:block;margin-bottom:6px}
.caste-mini-name{font-size:.75rem;color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.plots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.plot-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;position:relative}
.plot-num{position:absolute;top:-12px;left:16px;background:var(--primary);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.plot-card h3{font-family:var(--font-title);color:var(--gold);margin-bottom:6px;font-size:1rem}
.plot-subtitle{font-size:.75rem;color:var(--text-muted);margin-bottom:10px;font-style:italic}
.plot-card p{font-size:.83rem;color:var(--text-muted);line-height:1.5}
/* CASTE SELECTION */
.select-caste-page{max-width:1400px;margin:0 auto;padding:30px 20px}
.select-caste-page h1{font-family:var(--font-title);color:var(--gold);text-align:center;margin-bottom:8px}
.page-sub{text-align:center;color:var(--text-muted);margin-bottom:30px}
.castes-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.caste-select-card{position:relative;border-radius:10px;border:2px solid var(--border);transition:var(--transition);cursor:pointer}
.caste-radio{position:absolute;opacity:0;width:0;height:0}
.caste-select-card label{display:block;padding:20px 16px;cursor:pointer}
.caste-select-card.selected{border-color:var(--cc,var(--primary));background:rgba(0,0,0,.2)}
.caste-select-card:hover{border-color:var(--cc,var(--primary-light));transform:translateY(-2px)}
.cs-icon{font-size:2.5rem;display:block;margin-bottom:10px}
.cs-name{font-family:var(--font-title);color:var(--cc,var(--gold));margin-bottom:4px;font-size:.95rem}
.cs-zone{font-size:.72rem;color:var(--text-muted);margin-bottom:8px}
.cs-desc{font-size:.78rem;color:var(--text-muted);line-height:1.4;margin-bottom:10px}
.cs-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cs-stat{background:var(--bg-card2);padding:3px 7px;border-radius:4px;font-size:.72rem;display:flex;align-items:center;gap:3px}
.cs-moral{font-size:.72rem;color:var(--text-muted);font-style:italic;border-top:1px solid var(--border);padding-top:8px}
.caste-confirm{text-align:center;margin-top:24px;position:sticky;bottom:20px}
/* GAME MAP */
.game-map-page{max-width:1100px;margin:0 auto;padding:30px 20px}
.map-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.map-header h1{font-family:var(--font-title);color:var(--gold)}
.current-plot-badge{background:var(--bg-card2);border:1px solid var(--border);padding:8px 16px;border-radius:20px;font-size:.85rem}
.world-map-ascii{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:24px;overflow-x:auto}
.world-map-ascii pre{color:rgba(255,255,255,.5);font-size:.7rem;line-height:1.5}
.zones-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.zone-map-card{background:var(--bg-card);border:2px solid var(--border);border-top:4px solid var(--zone-color,var(--primary));border-radius:10px;padding:20px}
.zone-map-card.current-zone{border-color:var(--zone-color,var(--primary));box-shadow:0 0 20px rgba(255,255,255,.05)}
.zmcard-icon{font-size:2rem;margin-bottom:8px}
.zone-map-card h3{font-family:var(--font-title);color:var(--zone-color,var(--gold));margin-bottom:8px}
.zone-map-card p{font-size:.8rem;color:var(--text-muted);line-height:1.5;margin-bottom:12px}
.zone-current-badge{color:var(--gold);font-size:.8rem;margin-bottom:8px}
.zone-map-card .btn{margin-right:8px;margin-bottom:8px}
.global-plots-panel{margin-top:24px}
.global-plots-panel h2{font-family:var(--font-title);color:var(--gold);margin-bottom:16px}
.plots-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.plot-mini{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center}
.plot-mini.active-plot{border-color:var(--gold);background:rgba(212,175,55,.05)}
.plot-num-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--primary);border-radius:50%;font-size:.8rem;font-weight:700;margin-bottom:8px}
.plot-mini h4{font-family:var(--font-title);font-size:.85rem;color:var(--text);margin-bottom:4px}
.plot-mini small{color:var(--text-muted);font-size:.72rem}
.plot-active-label{color:var(--gold);font-size:.75rem;margin-top:6px}
/* CAMPAIGN */
.campaign-page{max-width:900px;margin:0 auto;padding:30px 20px}
.campaign-header{background:var(--bg-card);border-radius:12px;padding:30px;margin-bottom:24px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.campaign-header::before{content:'';position:absolute;inset:0;background:rgba(10,10,15,.7)}
.campaign-header h1,.campaign-header p{position:relative;z-index:1}
.campaign-header h1{font-family:var(--font-title);color:var(--gold);margin-bottom:8px}
.campaign-header p{color:var(--text-muted)}
.chapters-timeline{display:flex;flex-direction:column;gap:16px}
.chapter-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px}
.chapter-card.locked{opacity:.5}
.chapter-card.current{border-color:var(--gold)}
.chapter-num{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.chapter-card h3{font-family:var(--font-title);color:var(--text);font-size:1rem}
.chapter-img{width:100%;max-height:200px;object-fit:cover;border-radius:6px}
.locked-badge{color:var(--text-muted);font-size:.85rem}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
/* CHAPTER PLAYER */
.chapter-player{display:flex;flex-direction:column;min-height:calc(100vh - 140px)}
.chapter-player-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(10,10,15,.9);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px}
.chapter-player-title{text-align:center}
.chapter-player-title span{display:block;font-size:.75rem;color:var(--text-muted)}
.chapter-player-title strong{font-family:var(--font-title);color:var(--gold)}
.scene-progress{font-size:.8rem;color:var(--text-muted)}
.scene-player{flex:1;position:relative;min-height:400px}
.scene-panel{display:none;position:relative;min-height:400px}
.scene-panel.active{display:block}
.scene-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3}
.scene-ascii-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.15;overflow:hidden}
.scene-ascii-bg pre{font-size:.6rem;color:var(--text-muted)}
.scene-content-overlay{position:relative;z-index:2;padding:30px 20px;max-width:800px;margin:0 auto}
.cutscene-text{background:rgba(0,0,0,.7);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:20px}
.cutscene-lines{font-style:italic;line-height:1.7;color:var(--text-muted)}
.scene-title{font-family:var(--font-title);color:var(--gold);margin-bottom:16px;font-size:1.3rem}
.dialogue-box{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.dialogue-line{display:flex;gap:12px;align-items:flex-start}
.dialogue-line.hero-line{flex-direction:row-reverse}
.speaker-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--border2);flex-shrink:0}
.speaker-avatar-placeholder{width:48px;height:48px;border-radius:50%;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;border:2px solid var(--border)}
.dialogue-bubble{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;max-width:600px}
.hero-line .dialogue-bubble{background:rgba(139,26,26,.15);border-color:var(--primary)}
.speaker-name{font-size:.78rem;font-weight:700;color:var(--gold);margin-bottom:4px}
.hero-speaker{color:var(--primary-light)}
.speaker-name small{color:var(--text-muted);font-weight:400}
.dialogue-text{font-size:.9rem;line-height:1.6}
.choices-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px}
.choices-title{font-size:.85rem;color:var(--text-muted);margin-bottom:12px;font-weight:600}
.choice-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:var(--bg-card2);border:1px solid var(--border2);border-radius:8px;color:var(--text);cursor:pointer;transition:var(--transition);margin-bottom:8px;font-size:.9rem;text-align:left;font-family:var(--font-body)}
.choice-btn:hover{border-color:var(--primary-light);background:rgba(139,26,26,.1)}
.choice-arrow{color:var(--primary-light);font-weight:700}
.choice-effects{margin-left:auto;display:flex;gap:6px}
.eff-pos{color:#4caf50;font-size:.75rem}
.eff-neg{color:#f44336;font-size:.75rem}
.scene-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:rgba(10,10,15,.9);border-top:1px solid var(--border)}
.scene-dots{display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--border2);cursor:pointer;transition:var(--transition)}
.dot.active{background:var(--gold)}
.no-scenes{text-align:center;padding:60px 20px;color:var(--text-muted)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:30px;max-width:400px;width:90%;text-align:center}
.modal-box h3{font-family:var(--font-title);color:var(--gold);margin-bottom:16px}
/* BATTLE */
.battle-page{max-width:900px;margin:0 auto;padding:30px 20px}
.battle-header{margin-bottom:24px}
.battle-header h1{font-family:var(--font-title);color:var(--gold)}
.battle-zone-info{color:var(--text-muted);font-size:.85rem;margin-top:4px}
.pre-battle{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-bottom:24px}
.player-battle-card,.enemy-card-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px}
.battle-stats{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.bstat{font-size:.85rem;color:var(--text-muted)}
.caste-badge{font-size:.9rem;font-weight:600}
.vs-badge{font-family:var(--font-title);font-size:2rem;color:var(--primary);text-align:center}
.enemy-silhouette{font-size:4rem;text-align:center;opacity:.5;padding:20px}
.battle-result-screen{display:flex;flex-direction:column;gap:24px}
.result-header{text-align:center;padding:30px;border-radius:12px}
.result-win{background:linear-gradient(135deg,rgba(0,100,0,.3),rgba(0,60,0,.1));border:1px solid #0a0}
.result-loss{background:linear-gradient(135deg,rgba(100,0,0,.3),rgba(60,0,0,.1));border:1px solid #a00}
.result-icon{font-size:3rem;margin-bottom:12px}
.result-header h2{font-family:var(--font-title);font-size:2rem}
.rewards{display:flex;gap:20px;justify-content:center;margin-top:12px;color:var(--gold);font-size:1.1rem;font-weight:700}
.battle-log-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px}
.battle-log-panel h3{font-family:var(--font-title);color:var(--gold);margin-bottom:12px}
.battle-log-scroll{max-height:400px;overflow-y:auto}
.round-block{margin-bottom:16px}
.round-header{font-size:.75rem;color:var(--text-muted);text-align:center;margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em}
.log-event{padding:4px 0;font-size:.83rem;line-height:1.5}
.log-player_attack{color:#88aaff}.log-enemy_attack{color:#f88}.log-heal{color:#8c8}.log-skill{color:#fc8}
.log-victory{color:#fd0;font-weight:700}.log-defeat{color:#f44;font-weight:700}
.post-battle-actions{display:flex;gap:12px;flex-wrap:wrap}
/* INVENTORY */
.inventory-page{max-width:1100px;margin:0 auto;padding:30px 20px}
.inventory-page h1{font-family:var(--font-title);color:var(--gold);margin-bottom:24px}
.inv-sections{display:flex;flex-direction:column;gap:30px}
.inv-section h2{font-family:var(--font-title);color:var(--text);margin-bottom:16px;font-size:1.1rem}
.abilities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ability-card{background:var(--bg-card);border:1px solid var(--border2);border-radius:8px;padding:16px}
.ability-icon{font-size:1.8rem;margin-bottom:8px}
.ability-card h4{color:var(--gold);margin-bottom:6px;font-size:.9rem}
.ability-card p{font-size:.8rem;color:var(--text-muted);margin-bottom:8px}
.ability-meta{display:flex;gap:8px;font-size:.75rem;color:var(--text-muted)}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.item-card{background:var(--bg-card);border:2px solid var(--rarity-color,var(--border));border-radius:10px;padding:16px;position:relative}
.item-card.equipped{box-shadow:0 0 15px var(--rarity-color,rgba(255,255,255,.1))}
.item-img{width:100%;max-height:120px;object-fit:cover;border-radius:6px;margin-bottom:10px}
.item-icon-large{font-size:2.5rem;margin-bottom:10px}
.item-rarity{font-size:.7rem;font-weight:700;color:var(--rarity-color);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.item-card h4{color:var(--text);margin-bottom:6px;font-size:.9rem}
.item-desc{font-size:.78rem;color:var(--text-muted);margin-bottom:6px}
.item-visual{font-size:.75rem;color:rgba(255,255,255,.3);font-style:italic;margin-bottom:8px;line-height:1.4}
.item-stats-mini{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.istat{background:rgba(255,255,255,.05);padding:2px 6px;border-radius:3px;font-size:.72rem}
.equipped-badge{position:absolute;top:8px;right:8px;background:var(--green-light);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:3px;font-weight:700}
.empty{color:var(--text-muted);font-style:italic;font-size:.9rem}
/* PROFILE */
.profile-page{max-width:900px;margin:0 auto;padding:30px 20px;display:flex;flex-direction:column;gap:24px}
.profile-header{display:flex;gap:20px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px}
.profile-avatar{position:relative;flex-shrink:0}
.avatar-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}
.avatar-placeholder{width:80px;height:80px;border-radius:50%;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:2.5rem;border:3px solid var(--border)}
.avatar-upload-btn{position:absolute;bottom:0;right:0;background:var(--bg-card2);border:1px solid var(--border);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem}
.profile-info h1{font-family:var(--font-title);color:var(--gold)}
.profile-caste{font-size:1rem;margin:4px 0}
.profile-zone{font-size:.85rem;color:var(--text-muted);margin-bottom:8px}
.profile-meta{display:flex;gap:16px;font-size:.78rem;color:var(--text-muted)}
.profile-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.pstat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center}
.pstat-num{font-family:var(--font-title);font-size:1.5rem;color:var(--gold)}
.pstat-label{font-size:.75rem;color:var(--text-muted)}
.char-stats-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px}
.char-stats-panel h2{font-family:var(--font-title);color:var(--text);margin-bottom:16px;font-size:1rem}
.char-stats-grid{display:flex;flex-direction:column;gap:10px}
.cstat{display:grid;grid-template-columns:24px 80px 1fr 60px;align-items:center;gap:10px}
.cstat-bar{height:8px;background:var(--bg-card2);border-radius:4px;overflow:hidden}
.cstat-bar div{height:100%;border-radius:4px;background:var(--primary-light);transition:width .5s ease}
.cstat-bar.power div{background:#f66}.cstat-bar.defense div{background:#68f}.cstat-bar.crit div{background:#f80}.cstat-bar.block div{background:#48c}.cstat-bar.vamp div{background:#800}
.cstat span:last-child{font-size:.8rem;color:var(--text-muted);text-align:right}
.rep-panel,.history-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px}
.rep-panel h2,.history-panel h2{font-family:var(--font-title);color:var(--text);margin-bottom:16px;font-size:1rem}
.rep-grid{display:flex;flex-direction:column;gap:10px}
.rep-item{display:grid;grid-template-columns:130px 1fr 50px;align-items:center;gap:10px;font-size:.85rem}
.rep-bar{height:6px;background:var(--bg-card2);border-radius:3px;overflow:hidden}
.rep-bar div{height:100%;border-radius:3px}
.rep-bar.forest div{background:var(--green-light)}.rep-bar.mist div{background:var(--blue-light)}.rep-bar.dungeon div{background:var(--primary-light)}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-item{display:flex;gap:12px;align-items:center;padding:8px 12px;background:var(--bg-card2);border-radius:6px;font-size:.83rem}
.history-item.win{border-left:3px solid #0a0}.history-item.loss{border-left:3px solid #a00}
.hist-enemy{flex:1}.hist-rounds,.hist-date{color:var(--text-muted);font-size:.75rem}
/* ARENA */
.arena-page{max-width:1000px;margin:0 auto;padding:30px 20px}
.arena-page h1{font-family:var(--font-title);color:var(--gold);margin-bottom:24px}
.arena-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px}
.arena-zone-card{background:var(--bg-card);border:2px solid transparent;border-top:4px solid var(--zc,var(--primary));border-radius:10px;padding:20px;transition:var(--transition)}
.arena-zone-card.current-zone{border-color:var(--zc,var(--primary))}
.az-icon{font-size:2rem;margin-bottom:8px}
.arena-zone-card h3{font-family:var(--font-title);color:var(--zc,var(--gold));margin-bottom:8px}
.arena-zone-card p{font-size:.8rem;color:var(--text-muted);margin-bottom:10px}
.az-bonus{font-size:.75rem;color:var(--text-muted);margin-bottom:12px;padding:6px;background:var(--bg-card2);border-radius:4px}
.arena-stats,.recent-battles{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.arena-stats h2,.recent-battles h2{font-family:var(--font-title);color:var(--text);margin-bottom:12px;font-size:1rem}
.arena-stat-row{display:flex;gap:24px;flex-wrap:wrap}
.astat{font-size:.9rem;color:var(--text-muted)}.astat strong{color:var(--text)}
.rb-item{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.83rem;align-items:center}
.rb-item.win{color:#8c8}.rb-item.loss{color:#c88}
/* LEADERBOARD */
.leaderboard-page{max-width:800px;margin:0 auto;padding:30px 20px}
.leaderboard-page h1{font-family:var(--font-title);color:var(--gold);margin-bottom:24px}
.leaderboard-table{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.lb-header,.lb-row{display:grid;grid-template-columns:40px 1fr 140px 80px 80px 100px;align-items:center;padding:12px 16px;gap:10px}
.lb-header{background:var(--bg-card2);font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border)}
.lb-row{border-bottom:1px solid var(--border);font-size:.85rem}
.lb-row:hover{background:rgba(255,255,255,.02)}
.lb-row.top-1{background:rgba(212,175,55,.08)}.lb-row.top-2{background:rgba(180,180,180,.05)}.lb-row.top-3{background:rgba(180,100,0,.05)}
.lb-row.current-player{border-left:3px solid var(--gold)}
.lb-rank{font-weight:700;color:var(--gold)}
.lb-player{display:flex;align-items:center;gap:8px;font-weight:600}
.lb-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.lb-caste{font-size:.8rem}.lb-level,.lb-exp{color:var(--text-muted)}.lb-wins{color:var(--gold)}
.lb-empty{text-align:center;padding:40px;color:var(--text-muted)}
.row-inactive{opacity:.4}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.72rem;font-weight:700}
.badge-green{background:rgba(0,150,0,.2);color:#4caf50}.badge-red{background:rgba(150,0,0,.2);color:#f44}
@media(max-width:768px){
  .pre-battle{grid-template-columns:1fr}
  .lb-header,.lb-row{grid-template-columns:30px 1fr 60px 60px}
  .lb-caste,.lb-exp{display:none}
  .nav-links{gap:8px}
  .profile-header{flex-direction:column}
  .world-map-ascii pre{font-size:.55rem}
  .cstat{grid-template-columns:24px 70px 1fr 50px}
}

/* ---- CHAPTER PLAYER (continued) ---- */
.chapter-player-title { text-align: center; }
.chapter-player-title span { display: block; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.chapter-player-title strong { font-family: var(--font-title); color: var(--gold); }
.scene-progress { font-size: 0.8rem; color: var(--text-muted); }
.scene-player { flex: 1; position: relative; min-height: 400px; }
.scene-panel { display: none; position: relative; min-height: 400px; }
.scene-panel.active { display: flex; flex-direction: column; }
.scene-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.3; }
.scene-ascii-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.1; pointer-events: none; overflow: hidden; }
.scene-ascii-bg pre { font-size: 0.5rem; color: #fff; }
.scene-content-overlay { position: relative; z-index: 2; flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 0 auto; width: 100%; }
.cutscene-text { background: rgba(0,0,0,0.7); border-left: 3px solid var(--gold); padding: 20px 24px; border-radius: 0 8px 8px 0; }
.cutscene-lines { font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); font-style: italic; }
.scene-title { font-family: var(--font-title); color: var(--gold); font-size: 1.3rem; text-align: center; }
.dialogue-box { display: flex; flex-direction: column; gap: 12px; }
.dialogue-line { display: flex; gap: 12px; align-items: flex-start; }
.dialogue-line.hero-line { flex-direction: row-reverse; }
.speaker-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }
.speaker-avatar-placeholder { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-card2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.dialogue-bubble { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; max-width: 85%; }
.hero-line .dialogue-bubble { background: rgba(139,26,26,0.2); border-color: var(--primary); }
.speaker-name { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 4px; }
.hero-speaker { color: var(--primary-light); }
.speaker-name small { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.dialogue-text { font-size: 0.9rem; line-height: 1.6; color: var(--text); }
.choices-panel { background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.choices-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px; }
.choice-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; transition: var(--transition); text-align: left; margin-bottom: 8px; }
.choice-btn:hover { background: var(--bg-card); border-color: var(--gold); transform: translateX(4px); }
.choice-arrow { color: var(--gold); font-size: 0.75rem; }
.choice-effects { margin-left: auto; display: flex; gap: 6px; }
.eff-pos { color: #88cc88; font-size: 0.78rem; }
.eff-neg { color: #ff8888; font-size: 0.78rem; }
.scene-battle-prompt { text-align: center; padding: 30px; }
.scene-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(10,10,15,0.9); border-top: 1px solid var(--border); }
.scene-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); cursor: pointer; transition: var(--transition); }
.dot.active { background: var(--gold); }
.no-scenes { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-box { background: var(--bg-card); border: 1px solid var(--gold); border-radius: 12px; padding: 30px; max-width: 420px; width: 90%; text-align: center; }
.modal-box h3 { font-family: var(--font-title); color: var(--gold); margin-bottom: 16px; }

/* ---- BATTLE ---- */
.battle-page { max-width: 900px; margin: 0 auto; padding: 30px 20px; }
.battle-header { margin-bottom: 24px; }
.battle-header h1 { font-family: var(--font-title); color: var(--gold); }
.battle-zone-info { color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; }
.pre-battle { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 24px; }
.player-battle-card, .enemy-card-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.player-battle-card h3, .enemy-card-preview h3 { font-family: var(--font-title); color: var(--gold); margin-bottom: 12px; }
.battle-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.bstat { font-size: 0.82rem; color: var(--text-muted); }
.caste-badge { font-size: 0.85rem; font-weight: 600; }
.vs-badge { font-family: var(--font-title); font-size: 2rem; color: var(--primary-light); text-align: center; text-shadow: 0 0 20px var(--primary); }
.enemy-silhouette { font-size: 4rem; text-align: center; opacity: 0.3; margin: 16px 0; }
.battle-result-screen { }
.result-header { text-align: center; padding: 40px 20px; border-radius: 12px; margin-bottom: 24px; }
.result-win { background: rgba(0,100,0,0.2); border: 1px solid #004400; }
.result-loss { background: rgba(100,0,0,0.2); border: 1px solid #440000; }
.result-icon { font-size: 4rem; margin-bottom: 12px; }
.result-header h2 { font-family: var(--font-title); font-size: 2rem; color: var(--gold); }
.rewards { display: flex; gap: 20px; justify-content: center; margin-top: 12px; }
.rewards span { background: rgba(255,255,255,0.1); padding: 6px 14px; border-radius: 20px; font-weight: 600; }
.battle-log-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }
.battle-log-panel h3 { padding: 14px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-title); color: var(--gold); }
.battle-log-scroll { max-height: 350px; overflow-y: auto; padding: 12px 16px; }
.round-block { margin-bottom: 14px; }
.round-header { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; text-align: center; }
.log-event { font-size: 0.83rem; padding: 4px 0; color: var(--text-muted); border-left: 2px solid var(--border); padding-left: 10px; margin-bottom: 3px; }
.log-player_attack { color: #88aaff; border-color: #4466ff; }
.log-enemy_attack { color: #ffaa88; border-color: #ff6633; }
.log-heal { color: #88cc88; border-color: #44aa44; }
.log-skill { color: #cc88ff; border-color: #8844ff; }
.log-victory { color: var(--gold); border-color: var(--gold); font-weight: 600; }
.log-defeat { color: #ff4444; border-color: #ff0000; }
.post-battle-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- INVENTORY ---- */
.inventory-page { max-width: 1100px; margin: 0 auto; padding: 30px 20px; }
.inventory-page h1 { font-family: var(--font-title); color: var(--gold); margin-bottom: 24px; }
.inv-sections { display: flex; flex-direction: column; gap: 32px; }
.inv-section h2 { font-family: var(--font-title); color: var(--text); margin-bottom: 16px; font-size: 1.1rem; }
.abilities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ability-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.ability-icon { font-size: 2rem; margin-bottom: 8px; }
.ability-card h4 { font-weight: 700; color: var(--purple-light); margin-bottom: 6px; font-size: 0.9rem; }
.ability-card p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.ability-meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--text-muted); }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.item-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; border-top: 3px solid var(--rarity-color, #9d9d9d); position: relative; transition: var(--transition); }
.item-card.equipped { box-shadow: 0 0 16px rgba(255,255,255,0.08); }
.item-img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.item-icon-large { font-size: 3rem; text-align: center; margin-bottom: 8px; }
.item-rarity { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rarity-color, #9d9d9d); margin-bottom: 4px; }
.item-card h4 { font-weight: 700; color: var(--text); margin-bottom: 6px; font-size: 0.9rem; }
.item-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.4; }
.item-visual { font-size: 0.75rem; color: rgba(255,255,255,0.3); line-height: 1.4; margin-bottom: 8px; }
.item-stats-mini { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.istat { background: var(--bg-card2); padding: 2px 7px; border-radius: 4px; font-size: 0.72rem; color: var(--gold); }
.equipped-badge { position: absolute; top: 10px; right: 10px; background: var(--green); color: #fff; font-size: 0.65rem; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.empty { color: var(--text-muted); font-size: 0.85rem; grid-column: 1/-1; text-align: center; padding: 40px; }

/* ---- PROFILE ---- */
.profile-page { max-width: 1000px; margin: 0 auto; padding: 30px 20px; display: flex; flex-direction: column; gap: 24px; }
.profile-header { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.profile-avatar { position: relative; }
.avatar-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
.avatar-placeholder { width: 100px; height: 100px; border-radius: 50%; background: var(--bg-card2); border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.avatar-upload-btn { position: absolute; bottom: 0; right: 0; background: var(--primary); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; }
.profile-info h1 { font-family: var(--font-title); color: var(--gold); margin-bottom: 6px; }
.profile-caste { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.profile-zone { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 8px; }
.profile-meta { display: flex; gap: 16px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.pstat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; text-align: center; }
.pstat-num { font-family: var(--font-title); font-size: 1.6rem; color: var(--gold); }
.pstat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.char-stats-panel, .rep-panel, .history-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.char-stats-panel h2, .rep-panel h2, .history-panel h2 { font-family: var(--font-title); color: var(--text); margin-bottom: 16px; font-size: 1rem; }
.char-stats-grid { display: flex; flex-direction: column; gap: 10px; }
.cstat { display: flex; align-items: center; gap: 10px; }
.cstat-icon { width: 24px; text-align: center; }
.cstat-name { width: 90px; font-size: 0.82rem; color: var(--text-muted); }
.cstat-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.cstat-bar div { height: 100%; background: var(--primary-light); border-radius: 3px; transition: width 0.5s ease; }
.cstat-bar.power div { background: #ff6644; }
.cstat-bar.defense div { background: #4488ff; }
.cstat-bar.crit div { background: #ffaa22; }
.cstat-bar.block div { background: #44aaff; }
.cstat-bar.vamp div { background: #cc2244; }
.cstat span:last-child { width: 50px; text-align: right; font-size: 0.82rem; color: var(--text); }
.rep-grid { display: flex; flex-direction: column; gap: 10px; }
.rep-item { display: flex; align-items: center; gap: 10px; }
.rep-item > span:first-child { width: 130px; font-size: 0.82rem; }
.rep-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.rep-bar div { height: 100%; border-radius: 4px; }
.rep-bar.forest div { background: #4a9a2a; }
.rep-bar.mist div { background: #4444cc; }
.rep-bar.dungeon div { background: #c02020; }
.rep-item > span:last-child { width: 40px; text-align: right; font-size: 0.82rem; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--bg-card2); border-radius: 6px; font-size: 0.83rem; }
.history-item.win { border-left: 3px solid #44aa44; }
.history-item.loss { border-left: 3px solid #aa4444; }
.hist-enemy { flex: 1; }
.hist-rounds, .hist-date { color: var(--text-muted); font-size: 0.78rem; }

/* ---- LEADERBOARD ---- */
.leaderboard-page { max-width: 900px; margin: 0 auto; padding: 30px 20px; }
.leaderboard-page h1 { font-family: var(--font-title); color: var(--gold); margin-bottom: 24px; }
.leaderboard-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lb-header { display: grid; grid-template-columns: 50px 1fr 1fr 100px 100px 120px; gap: 10px; padding: 12px 16px; background: var(--bg-card2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.lb-row { display: grid; grid-template-columns: 50px 1fr 1fr 100px 100px 120px; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: center; font-size: 0.85rem; transition: var(--transition); }
.lb-row:hover { background: var(--bg-card2); }
.lb-row.top-1 { background: rgba(212,175,55,0.05); }
.lb-row.top-2 { background: rgba(192,192,192,0.05); }
.lb-row.top-3 { background: rgba(205,127,50,0.05); }
.lb-row.current-player { background: rgba(139,26,26,0.1); }
.lb-rank { font-family: var(--font-title); font-size: 1.1rem; }
.lb-player { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.lb-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lb-empty { padding: 40px; text-align: center; color: var(--text-muted); }

/* ---- ARENA ---- */
.arena-page { max-width: 1000px; margin: 0 auto; padding: 30px 20px; }
.arena-page h1 { font-family: var(--font-title); color: var(--gold); margin-bottom: 24px; }
.arena-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 30px; }
.arena-zone-card { background: var(--bg-card); border: 2px solid var(--border); border-top: 4px solid var(--zc, var(--primary)); border-radius: 10px; padding: 20px; }
.arena-zone-card.current-zone { border-color: var(--zc, var(--primary)); }
.az-icon { font-size: 2rem; margin-bottom: 8px; }
.arena-zone-card h3 { font-family: var(--font-title); color: var(--text); margin-bottom: 6px; }
.arena-zone-card p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.az-bonus { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 12px; font-style: italic; }
.arena-stats { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.arena-stats h2 { font-family: var(--font-title); color: var(--text); margin-bottom: 12px; font-size: 1rem; }
.arena-stat-row { display: flex; gap: 24px; flex-wrap: wrap; }
.astat { font-size: 0.9rem; }
.recent-battles h2 { font-family: var(--font-title); color: var(--text); margin-bottom: 12px; font-size: 1rem; }
.rb-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-card); border-radius: 6px; margin-bottom: 6px; font-size: 0.83rem; }
.rb-item.win { border-left: 3px solid #44aa44; }
.rb-item.loss { border-left: 3px solid #aa4444; }

/* stat points dot indicator */
@keyframes dotpulse {
  from { transform: scale(1);   box-shadow: 0 0 4px #ffcc0066; }
  to   { transform: scale(1.4); box-shadow: 0 0 10px #ffdd44bb; }
}
.lb-avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--bg-card2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}

/* Background patterns */
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes drift{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(30px) translateY(-20px)}100%{transform:translateX(0) translateY(0)}}

body.bg-stars{
  background-color:#050510;
  background-image:
    radial-gradient(ellipse at top,#1a0a2e 0%,transparent 70%),
    radial-gradient(2px 2px at 10% 15%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 25% 8%,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 40% 25%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 5%,rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 70% 18%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 85% 12%,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 15% 35%,rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 32% 42%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 48% 38%,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 62% 50%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 78% 45%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 92% 55%,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 5% 65%,rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 20% 72%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 38% 68%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 58% 75%,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 75% 80%,#fff 0%,transparent 100%),
    radial-gradient(1px 1px at 88% 70%,rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 45% 90%,rgba(255,255,255,.7) 0%,transparent 100%);
}

body.bg-fog{
  background-color:#06030f;
  background-image:
    radial-gradient(ellipse at top,#1a0a2e 0%,#06030f 60%),
    radial-gradient(ellipse 80% 40% at 20% 60%,rgba(120,60,220,.25) 0%,transparent 100%),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(80,40,180,.2) 0%,transparent 100%),
    radial-gradient(ellipse 70% 35% at 50% 90%,rgba(100,50,200,.18) 0%,transparent 100%),
    radial-gradient(ellipse 40% 60% at 10% 20%,rgba(60,20,140,.15) 0%,transparent 100%);
}

body.bg-runes{
  background-color:#050510;
  background-image:
    radial-gradient(ellipse at top,#1a0a2e 0%,transparent 65%),
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(150,100,255,.06) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(150,100,255,.06) 80px);
  position:relative;
}
body.bg-runes::before{
  content:'ᚱ  ᚦ  ᚠ  ᚹ  ᚾ  ᛁ  ᛃ  ᛇ  ᛈ  ᛉ  ᛊ  ᛏ  ᛒ  ᛖ  ᛗ  ᛚ  ᛜ  ᛞ  ᛟ';
  position:fixed;top:0;left:0;right:0;bottom:0;
  font-size:2rem;line-height:4rem;letter-spacing:2rem;word-spacing:1rem;
  color:rgba(160,100,255,.07);pointer-events:none;z-index:0;overflow:hidden;
  white-space:pre-wrap;padding:20px;
}

body.bg-bones{
  background-color:#080508;
  background-image:
    radial-gradient(ellipse at top,#150a10 0%,#080508 55%),
    radial-gradient(ellipse at bottom,#0f0508 0%,transparent 60%);
  position:relative;
}
body.bg-bones::before{
  content:'☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝  ☠  ✝';
  position:fixed;top:0;left:0;right:0;bottom:0;
  font-size:1.8rem;line-height:5rem;letter-spacing:2.5rem;
  color:rgba(180,0,0,.06);pointer-events:none;z-index:0;overflow:hidden;
  white-space:pre-wrap;padding:30px;
}

body.bg-none{background-image:none!important;background-color:#0a0a0f}