/* ═══════════════════════════════════════════════════
   Acrive's Stats Hub — Shared Styles
   All pages import this; page-specific overrides
   go in a <style> block within each HTML file.
   ═══════════════════════════════════════════════════ */

/* ── Theme Variables ── */
:root{
  --bg-body:#d4cfc3;--bg-card:#f0ece0;--bg-controls:#e2ddd1;
  --accent:#2d2926;--blue:#1a4fa8;--red:#c4301f;--green:#0a5c3a;
  --gold-color:#a87010;--purple:#5a3d8a;
  --text-primary:#1a1612;--text-secondary:#2a2018;--text-muted:#5a5248;--text-faint:#7a7068;
  --border:rgba(0,0,0,0.18);--border-btn:rgba(0,0,0,0.25);
}
body.dark{
  --bg-body:#16130f;--bg-card:#22201a;--bg-controls:#1e1b15;
  --accent:#f0ece0;--blue:#4a7fd4;--red:#e05545;--green:#1a8a5a;
  --text-primary:#f0ece0;--text-secondary:#ddd5c5;--text-muted:#a09080;--text-faint:#6a6058;
  --border:rgba(255,255,255,0.15);--border-btn:rgba(255,255,255,0.2);
}
body.jakob{
  --bg-body:#0a0800;--bg-card:#1a1500;--bg-controls:#141000;
  --accent:#ffd700;--blue:#ffd700;--text-primary:#ffd700;
  --text-secondary:#c8a800;--text-muted:#806800;--text-faint:#504000;
  --border:rgba(255,215,0,0.3);--border-btn:rgba(255,215,0,0.5);
}
body.jakob::before{content:'';position:fixed;inset:0;z-index:-1;
  background:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wgARCAPAA8ADASIAAhEBAxEB/8QAHAAAAwEBAQEBAQAAAAAAAAAAAAECAwQFBgcI/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwQF/9oADAMBAAIQAxAAAAH8uAAAAAAAAAAAAAAAAAAAAAAA') center/cover no-repeat;opacity:0.18;}

/* ── Dark mode adjustments ── */
body.dark .bar-track{background:rgba(255,255,255,0.1);}
body.dark input[type=number],body.dark input[type=text],body.dark select{
  background:var(--bg-card);color:var(--text-primary);border-color:var(--border);}
body.dark .divider{border-top-color:rgba(255,255,255,0.1);}
body.dark .bar-fill[style*="var(--accent)"] .bar-val { color: #1a1612; }
body.dark .bar-val[data-rank="0"] { color: #1a1612; }

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── Body & Section ── */
body{font-family:'Barlow',sans-serif;background:var(--bg-body);
  display:flex;flex-direction:column;align-items:center;padding:28px 16px;gap:14px;min-height:100vh;}
.section{width:100%;max-width:620px;display:flex;flex-direction:column;gap:14px;}

/* ── Card ── */
.card{background:var(--bg-card);border-radius:18px;padding:24px 24px 20px;}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.league-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);}
.card-title{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;
  color:var(--text-primary);line-height:1.05;margin-top:3px;text-transform:uppercase;}
.card-title .accent{color:var(--blue);}
.header-right{text-align:right;flex-shrink:0;}
.season-badge{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;}
.filter-info{font-family:'Barlow Condensed',sans-serif;font-size:11px;
  color:var(--text-muted);margin-top:3px;}

/* ── Tabs ── */
.tabs,.role-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.tab,.role-tab{
  padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;
  cursor:pointer;border:2px solid var(--border-btn);background:var(--bg-controls);
  color:var(--text-secondary);transition:all .15s;font-family:'Barlow',sans-serif;}
.tab:hover,.role-tab:hover{border-color:var(--blue);color:var(--blue);}
.tab.active{background:var(--accent);color:var(--bg-card);border-color:var(--accent);}
.role-tab.active{background:#4a3d8a;color:#fff;border-color:#4a3d8a;}

/* ── Bars ── */
.bars{display:flex;flex-direction:column;gap:5px;}
.row{display:flex;align-items:center;gap:8px;}
.rank-num{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  width:20px;text-align:right;flex-shrink:0;color:var(--text-muted);}
.rank-num.gold{color:#b8840a;font-size:16px;}.rank-num.silver{color:#5a5048;}.rank-num.bronze{color:#8a5830;}
.player-info{width:96px;flex-shrink:0;}
.pname{font-size:13px;font-weight:700;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.pname.rank1{font-size:14px;color:var(--accent);}
.pname.rank2{color:var(--text-primary);}
.pname.rank3,.pname.rankN{color:var(--text-secondary);}
.pmeta{font-family:'Barlow Condensed',sans-serif;font-size:10px;
  color:var(--text-muted);display:block;margin-top:1px;}
.bar-track{flex:1;background:rgba(0,0,0,0.1);border-radius:3px;height:22px;overflow:hidden;}
.bar-fill{height:100%;border-radius:3px;display:flex;align-items:center;
  justify-content:flex-end;padding-right:8px;}
.bar-val{font-size:11px;font-weight:700;font-family:'Barlow Condensed',sans-serif;
  color:rgba(240,236,224,0.98);white-space:nowrap;}

/* ── Divider / Footer ── */
.divider{border:none;border-top:1.5px solid var(--border);margin:16px 0 10px;}
.footer-row{display:flex;justify-content:space-between;align-items:center;}
.footer-text{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);}
.footer-disclaimer{font-size:10px;color:var(--text-faint);font-style:italic;}
.no-results{text-align:center;padding:20px 0;font-family:'Barlow Condensed',sans-serif;
  font-size:14px;color:var(--text-muted);}

/* ── Controls ── */
.controls{background:var(--bg-controls);border-radius:14px;padding:16px 20px;
  display:flex;flex-direction:column;gap:12px;border:1.5px solid var(--border);}
.control-row{display:flex;align-items:center;gap:12px;}
.control-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);width:120px;flex-shrink:0;}
input[type=range]{flex:1;accent-color:var(--blue);}
input[type=number]{width:60px;padding:4px 8px;border:2px solid var(--border-btn);
  border-radius:6px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;
  color:var(--text-primary);background:var(--bg-card);text-align:center;}

/* ── Split Buttons ── */
.split-grid{display:flex;flex-wrap:wrap;gap:5px;}
.split-btn{padding:5px 11px;border-radius:16px;font-size:11px;font-weight:700;cursor:pointer;
  border:2px solid var(--border-btn);background:var(--bg-controls);
  color:var(--text-secondary);transition:all .15s;font-family:'Barlow',sans-serif;}
.split-btn:hover{border-color:var(--blue);color:var(--blue);}
.split-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.split-btn.all-btn.active{background:var(--accent);color:var(--bg-card);border-color:var(--accent);}

/* ── Options Panel ── */
.options-toggle{background:var(--bg-controls);border-radius:12px;padding:11px 18px;
  display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
  border:2px solid var(--border-btn);}
.options-toggle:hover{border-color:var(--blue);}
.options-label-text{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);flex:1;}
.options-arrow{font-size:10px;color:var(--text-muted);transition:transform .2s;display:inline-block;}
.options-arrow.open{transform:rotate(90deg);}
.options-panel{background:var(--bg-controls);border-radius:0 0 12px 12px;
  padding:0 18px 14px;display:none;flex-direction:column;gap:12px;margin-top:-4px;
  border:2px solid var(--border-btn);border-top:none;}
.options-panel.open{display:flex;}
.options-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.opt-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  width:110px;flex-shrink:0;padding-top:4px;}

/* ── Theme Button ── */
.theme-btn{position:fixed;top:16px;right:16px;z-index:999;width:44px;height:44px;
  border-radius:50%;background:var(--bg-card);border:2px solid var(--border-btn);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:transform .2s,box-shadow .2s;user-select:none;
  box-shadow:0 3px 12px rgba(0,0,0,.2);}
.theme-btn:hover{transform:scale(1.12);box-shadow:0 4px 16px rgba(0,0,0,.3);}

/* ── Navigation ── */
.nav-back{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:2px solid var(--border-btn);border-radius:20px;
  background:var(--bg-card);transition:all .15s;}
.nav-back:hover{border-color:var(--blue);color:var(--blue);}

/* ── Show Count Select ── */
.show-select{padding:4px 10px;border-radius:8px;font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:700;color:var(--text-primary);background:var(--bg-card);
  border:2px solid var(--blue);cursor:pointer;}

/* ── URF Overlay ── */
.urf-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9000;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .5s;pointer-events:none;}
.urf-overlay.show{opacity:1;pointer-events:auto;}
.urf-box{background:var(--bg-card);border:3px solid gold;border-radius:16px;
  padding:32px 40px;text-align:center;max-width:420px;
  box-shadow:0 0 40px rgba(255,215,0,0.5);}
.urf-box h2{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;
  color:gold;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;}
.urf-box p{font-size:14px;color:var(--text-primary);line-height:1.6;margin-bottom:20px;}
.urf-close{padding:8px 24px;border-radius:20px;border:2px solid gold;background:transparent;
  color:gold;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.urf-close:hover{background:gold;color:#000;}

/* ═══════════════════════════════════════════════════
   Mode Toggle (Average / Career switch)
   ═══════════════════════════════════════════════════ */
.mode-toggle{display:flex;gap:0;border-radius:22px;overflow:hidden;border:2px solid var(--border-btn);
  background:var(--bg-controls);width:fit-content;margin:0 auto;}
.mode-btn{padding:8px 20px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;
  background:transparent;color:var(--text-muted);transition:all .15s;}
.mode-btn.active{background:var(--blue);color:#fff;}
.mode-btn:hover:not(.active){color:var(--blue);}

/* ═══════════════════════════════════════════════════
   Expandable Rows
   ═══════════════════════════════════════════════════ */
.row.expandable{cursor:pointer;transition:background .15s;border-radius:6px;padding:2px 4px;margin:0 -4px;}
.row.expandable:hover{background:rgba(0,0,0,0.04);}
body.dark .row.expandable:hover{background:rgba(255,255,255,0.04);}

.expand-panel{max-height:0;overflow:hidden;transition:max-height .35s ease, padding .35s ease;
  background:var(--bg-controls);border-radius:0 0 12px 12px;margin:0 0 4px;padding:0 16px;}
.expand-panel.open{max-height:600px;padding:14px 16px;}

.expand-section{margin-bottom:12px;}
.expand-section:last-child{margin-bottom:0;}
.expand-section-title{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}

/* Team pills */
.team-pills{display:flex;flex-wrap:wrap;gap:4px;}
.team-pill{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;
  background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-secondary);
  font-family:'Barlow',sans-serif;}

/* Champion mini-cards */
.champ-list{display:flex;gap:8px;flex-wrap:wrap;}
.champ-card{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;
  background:var(--bg-card);border:1.5px solid var(--border);}
.champ-name{font-size:12px;font-weight:700;color:var(--text-primary);}
.champ-meta{font-size:10px;color:var(--text-muted);font-family:'Barlow Condensed',sans-serif;}
.champ-wr{font-size:10px;font-weight:700;font-family:'Barlow Condensed',sans-serif;}
.champ-wr.good{color:var(--green);}.champ-wr.bad{color:var(--red);}.champ-wr.neutral{color:var(--text-muted);}

/* Best game scoreboard */
.best-game{padding:8px 12px;border-radius:10px;background:var(--bg-card);border:1.5px solid var(--border);}
.best-game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.best-game-champ{font-size:12px;font-weight:700;color:var(--text-primary);}
.best-game-result{font-size:11px;font-weight:700;font-family:'Barlow Condensed',sans-serif;}
.best-game-result.win{color:var(--green);}.best-game-result.loss{color:var(--red);}
.best-game-teams{font-size:10px;color:var(--text-muted);font-family:'Barlow Condensed',sans-serif;margin-bottom:4px;}
.best-game-stats{display:flex;gap:12px;flex-wrap:wrap;}
.best-game-stat{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--text-secondary);}
.best-game-stat strong{color:var(--text-primary);}

/* Expand arrow indicator */
.expand-arrow{font-size:10px;color:var(--text-muted);transition:transform .2s;margin-left:auto;flex-shrink:0;padding-left:4px;}
.row.expandable.open .expand-arrow{transform:rotate(90deg);}

/* ── Mobile ── */
@media(max-width:520px){
  body{padding:16px 10px;gap:10px;}
  .card{padding:18px 16px 16px;}
  .control-label{width:90px;font-size:11px;}
  .player-info{width:76px;}
  .pname{font-size:12px;}
  .card-title{font-size:22px;}
  .search-area{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);}
  .vs-text{font-size:26px;}
  .mode-btn{padding:6px 14px;font-size:12px;}
  .champ-list{gap:5px;}
  .champ-card{padding:3px 8px;}
}