/* ══════════════════════════════════════════════════════
   HISCORES.CSS — Styles specific to the Hiscores page
   ══════════════════════════════════════════════════════ */

/* ── Additional hiscores-specific root variables ── */
:root {
  --silver:       #b8bec8;
  --silver-dim:   #6a7080;
  --bronze:       #c8824a;
  --bronze-dim:   #7a4820;
  --rank1-bg:     rgba(138,43,226,.09);
  --rank2-bg:     rgba(184,190,200,.05);
  --rank3-bg:     rgba(200,130,74,.05);
}

/* ══════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════ */
#hero {
  min-height:48vh; padding-top:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,47,179,.22) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 5% 110%, rgba(51,0,26,.35) 0%, transparent 50%),
    radial-gradient(ellipse 55% 50% at 95% 110%, rgba(51,0,26,.35) 0%, transparent 50%),
    var(--abyss);
}
#hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,47,179,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,47,179,.025) 1px, transparent 1px);
  background-size:100px 100px;
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 20%, transparent 80%);
}
#hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,47,179,.07) 0%, transparent 14%),
    linear-gradient(270deg, rgba(255,47,179,.07) 0%, transparent 14%);
}

.hero-inner {
  position:relative; z-index:2; padding:48px 24px 56px; width:100%; max-width:800px;
}
#hero .hero-title {
  font-size: clamp(36px, 7vw, 78px);
}

/* ══════════════════════════════════════════════════════
   CATEGORY NAV BAR
══════════════════════════════════════════════════════ */
#cat-nav {
  position:sticky; top:var(--nav-h); z-index:100;
  background: linear-gradient(180deg, rgba(10,7,24,.98) 0%, rgba(11,8,24,.95) 100%);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-blood);
}
#cat-nav::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), var(--gold-dim), var(--blood-dim), transparent);
}
.cat-nav-inner {
  max-width:1320px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; gap:4px; overflow-x:auto; height:56px;
  scrollbar-width:none;
}
.cat-nav-inner::-webkit-scrollbar { display:none; }
.cat-btn {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-md); background:none; border:1px solid transparent;
  padding:7px 16px; border-radius:var(--radius); cursor:pointer;
  transition:all .25s; white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:7px;
}
.cat-btn:hover { color:var(--bone-mid); border-color:var(--border-blood); background:rgba(255,47,179,.05); }
.cat-btn.active {
  color:var(--gold-bright); border-color:var(--gold-dim);
  background:rgba(138,43,226,.07); text-shadow:0 0 10px var(--gold-glow);
}
.cat-btn .cat-icon { font-size:16px; }
.cat-divider { width:1px; height:22px; background:var(--border-blood); flex-shrink:0; margin:0 4px; }

/* ══════════════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════════════ */
#main-content {
  padding:60px 0 100px; background:var(--mid); min-height:60vh;
}
#main-content::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), transparent);
}

/* Category Panel */
.cat-panel { display:none; }
.cat-panel.active { display:block; }

/* Panel header */
.panel-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:28px; padding-bottom:20px;
  border-bottom:1px solid var(--border-blood);
}
.panel-heading { display:flex; align-items:center; gap:16px; }
.panel-icon {
  font-size:32px; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,47,179,.07); border:1px solid var(--border-blood);
  border-radius:var(--radius); flex-shrink:0;
}
.panel-title {
  font-family:'Cinzel Decorative',serif; font-size:clamp(18px, 2.8vw, 30px);
  font-weight:700; color:var(--text-hi); line-height:1.05;
  filter: drop-shadow(0 2px 18px rgba(255,47,179,.25));
}
.panel-title .hl {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.panel-desc { font-size:17px; color:var(--text-md); margin-top:4px; }

/* Sort / filter bar */
.sort-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sort-label {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-md); margin-right:4px;
}
.sort-btn {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:1.5px; text-transform:uppercase;
  background:var(--card); border:1px solid var(--border-blood); color:var(--text-md);
  padding:7px 14px; border-radius:var(--radius); cursor:pointer; transition:all .2s; white-space:nowrap;
}
.sort-btn:hover { border-color:var(--blood-dim); color:var(--bone-mid); }
.sort-btn.active { color:var(--blood-bright); border-color:var(--blood-dim); background:rgba(255,47,179,.09); }

/* Search */
.search-wrap { display:flex; gap:8px; align-items:center; }
.hs-search-input {
  background:var(--card); border:1px solid var(--border-blood);
  color:var(--text-hi); font-family:'Inter',sans-serif; font-size:17px;
  padding:9px 14px; border-radius:var(--radius); outline:none; transition:border-color .2s; width:200px;
}
.hs-search-input::placeholder { color:var(--text-md); }
.hs-search-input:focus { border-color:var(--blood-dim); }
.hs-search-btn {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px; text-transform:uppercase;
  background:var(--card); border:1px solid var(--border-blood); color:var(--text-md);
  padding:9px 16px; border-radius:var(--radius); cursor:pointer; transition:.2s;
}
.hs-search-btn:hover { border-color:var(--blood-dim); color:var(--blood-bright); }

/* ══════════════════════════════════════════════════════
   LEADERBOARD TABLE
══════════════════════════════════════════════════════ */
.lb-wrap { overflow-x:auto; border-radius:var(--radius); }
.lb-table {
  width:100%; border-collapse:collapse;
  background:var(--card); border:1px solid var(--border-blood);
  border-radius:var(--radius); overflow:hidden; min-width:520px;
}
.lb-table thead tr {
  background:rgba(255,47,179,.07);
  border-bottom:1px solid var(--border-blood);
}
.lb-table th {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); padding:14px 18px; text-align:left;
}
.lb-table th:first-child { width:60px; text-align:center; }
.lb-table th.th-score { text-align:right; }
.lb-table th.th-mode { width:100px; }

/* Row base */
.lb-table tbody tr {
  border-bottom:1px solid var(--border);
  transition:background .15s, transform .15s;
  cursor:default; position:relative;
}
.lb-table tbody tr:last-child { border-bottom:none; }
.lb-table tbody tr:hover { background:var(--card-h); }
.lb-table td { padding:14px 18px; font-size:17px; color:var(--text-md); }
.lb-table td:first-child { text-align:center; }
.td-score { text-align:right; font-family:'Cinzel',serif; font-weight:700; }
.td-player { color:var(--text-hi); font-weight:500; }

/* Rank badge cell */
.rank-cell { font-family:'Cinzel',serif; font-weight:900; font-size:17px; }

/* Rank 1 -- GOLD */
.lb-table tbody tr.rank-1 {
  background:var(--rank1-bg);
  border-left:3px solid var(--gold);
  border-bottom-color:rgba(138,43,226,.15);
}
.lb-table tbody tr.rank-1:hover { background:rgba(138,43,226,.11); }
.lb-table tbody tr.rank-1 .rank-cell { color:var(--gold-bright); text-shadow:0 0 14px var(--gold-glow); }
.lb-table tbody tr.rank-1 .td-player { color:var(--gold-bright); text-shadow:0 0 8px rgba(138,43,226,.3); }
.lb-table tbody tr.rank-1 .td-score { color:var(--gold-bright); text-shadow:0 0 10px var(--gold-glow); }
.lb-table tbody tr.rank-1::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
  opacity:.4;
}

/* Rank 2 -- SILVER */
.lb-table tbody tr.rank-2 {
  background:var(--rank2-bg);
  border-left:3px solid var(--silver-dim);
  border-bottom-color:rgba(184,190,200,.1);
}
.lb-table tbody tr.rank-2:hover { background:rgba(184,190,200,.08); }
.lb-table tbody tr.rank-2 .rank-cell { color:var(--silver); text-shadow:0 0 10px rgba(184,190,200,.3); }
.lb-table tbody tr.rank-2 .td-player { color:var(--silver); }
.lb-table tbody tr.rank-2 .td-score { color:var(--silver); }

/* Rank 3 -- BRONZE */
.lb-table tbody tr.rank-3 {
  background:var(--rank3-bg);
  border-left:3px solid var(--bronze-dim);
  border-bottom-color:rgba(200,130,74,.1);
}
.lb-table tbody tr.rank-3:hover { background:rgba(200,130,74,.08); }
.lb-table tbody tr.rank-3 .rank-cell { color:var(--bronze); text-shadow:0 0 10px rgba(200,130,74,.3); }
.lb-table tbody tr.rank-3 .td-player { color:var(--bronze); }
.lb-table tbody tr.rank-3 .td-score { color:var(--bronze); }

/* Ranks 4-5 -- elevated */
.lb-table tbody tr.rank-4,
.lb-table tbody tr.rank-5 { border-left:3px solid var(--blood-dim); }
.lb-table tbody tr.rank-4 .rank-cell,
.lb-table tbody tr.rank-5 .rank-cell { color:var(--blood-bright); }
.lb-table tbody tr.rank-4 .td-score,
.lb-table tbody tr.rank-5 .td-score { color:var(--bone-mid); }

/* Ranks 6-10 -- standard */
.lb-table tbody tr.rank-other { border-left:3px solid transparent; }
.lb-table tbody tr.rank-other .rank-cell { color:var(--text-md); }
.lb-table tbody tr.rank-other .td-score { color:var(--text-md); }

/* Rank crown/medal icons */
.rank-icon { font-size:17px; display:block; line-height:1; }

/* Mode badges */
.mode-normal { color:var(--text-md); border-color:var(--border); background:transparent; }
.mode-iron { color:#44bb77; border-color:#1a4a2a; background:rgba(26,100,50,.08); }
.mode-hc { color:#FF4FD8; border-color:var(--blood-dim); background:rgba(255,47,179,.08); }
.mode-group { color:#9966cc; border-color:#44226a; background:rgba(100,50,168,.08); }

/* No results */
.no-results {
  text-align:center; padding:48px 20px;
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:3px;
  text-transform:uppercase; color:var(--text-md);
}

/* ══════════════════════════════════════════════════════
   SKILL SUB-TABS
══════════════════════════════════════════════════════ */
.skill-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; }
.skill-tab {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px; text-transform:uppercase;
  background:var(--card); border:1px solid var(--border-blood); color:var(--text-md);
  padding:7px 13px; border-radius:var(--radius); cursor:pointer; transition:all .2s; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.skill-tab:hover { border-color:var(--blood-dim); color:var(--bone-mid); }
.skill-tab.active { color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(138,43,226,.07); }
.skill-tab .sk-icon { font-size:15px; }

/* ══════════════════════════════════════════════════════
   LIVE TOTALS STRIP
══════════════════════════════════════════════════════ */
.totals-strip {
  display:flex; gap:1px;
  background:var(--border-blood); border:1px solid var(--border-blood);
  border-radius:var(--radius); overflow:hidden; margin-bottom:28px;
}
.total-cell {
  flex:1; padding:14px 16px; text-align:center; background:var(--card);
  transition:background .2s; min-width:0;
}
.total-cell:hover { background:var(--card-h); }
.total-val {
  font-family:'Cinzel',serif; font-size:clamp(16px, 2.5vw, 22px); font-weight:900;
  color:var(--gold-bright); line-height:1; text-shadow:0 0 14px var(--gold-glow);
}
.total-lbl {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-md); margin-top:4px;
}

/* ══════════════════════════════════════════════════════
   SKELETON LOADING ANIMATION
══════════════════════════════════════════════════════ */
.skeleton {
  display:inline-block;
  background:linear-gradient(90deg, var(--card) 25%, rgba(255,47,179,.08) 50%, var(--card) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius:3px;
}
.skeleton-text {
  width:60px; height:1.1em; display:inline-block; vertical-align:middle;
}
@keyframes skeleton-shimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ══════════════════════════════════════════════════════
   CLICKABLE PLAYER NAMES
══════════════════════════════════════════════════════ */
.td-player-link {
  cursor:pointer; color:inherit; transition:color .2s, text-shadow .2s;
  text-decoration:none; border-bottom:1px solid transparent;
}
.td-player-link:hover {
  color:var(--gold-bright); text-shadow:0 0 8px var(--gold-glow);
  border-bottom-color:var(--gold-dim);
}

/* ══════════════════════════════════════════════════════
   PLAYER PROFILE MODAL
══════════════════════════════════════════════════════ */
.player-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.player-modal-overlay.active { opacity:1; pointer-events:auto; }
.player-modal {
  background:var(--card); border:1px solid var(--border-blood); border-radius:var(--radius);
  padding:36px; width:90%; max-width:520px; max-height:85vh; overflow-y:auto;
  position:relative; transform:translateY(20px); transition:transform .3s;
  box-shadow:0 20px 80px rgba(0,0,0,.5), 0 0 60px rgba(255,47,179,.15);
}
.player-modal-overlay.active .player-modal { transform:translateY(0); }
.player-modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--blood), var(--gold-bright), var(--blood), transparent);
}
.player-modal-close {
  position:absolute; top:12px; right:16px; background:none; border:none;
  color:var(--text-md); font-size:28px; cursor:pointer; transition:color .2s;
  line-height:1; padding:4px;
}
.player-modal-close:hover { color:var(--blood-bright); }

.player-modal-header {
  display:flex; align-items:center; gap:16px; margin-bottom:24px;
}
.player-modal-avatar {
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,47,179,.08); border:2px solid var(--border-blood);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--blood); flex-shrink:0;
}
.player-modal-name {
  font-family:'Cinzel Decorative',serif; font-size:clamp(18px,3vw,26px); font-weight:700;
  color:var(--text-hi); line-height:1.1;
}
.player-modal-mode {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:2px; text-transform:uppercase;
  margin-top:4px; padding:2px 8px; border-radius:2px; border:1px solid; display:inline-block;
}

.player-modal-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border-blood); border:1px solid var(--border-blood);
  border-radius:var(--radius); overflow:hidden; margin-bottom:24px;
}
.pm-stat {
  background:var(--card); padding:14px 8px; text-align:center;
}
.pm-stat-val {
  font-family:'Cinzel',serif; font-size:clamp(17px,2vw,22px); font-weight:900;
  color:var(--gold-bright); text-shadow:0 0 10px var(--gold-glow);
}
.pm-stat-lbl {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-md); margin-top:3px;
}

.player-modal-section-title {
  font-family:'Cinzel',serif; font-size:15px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--text-md);
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--border-blood);
}

.pm-skill-row {
  display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--border);
}
.pm-skill-row:last-child { border-bottom:none; }
.pm-skill-name {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700;
  color:var(--text-hi); width:90px; flex-shrink:0;
}
.pm-skill-level {
  font-family:'Cinzel',serif; font-size:15px; color:var(--blood-bright);
  width:44px; flex-shrink:0; text-align:center;
}
.pm-skill-bar-wrap {
  flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden;
}
.pm-skill-bar {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--blood), var(--blood-bright));
  transition:width .5s ease;
}
.pm-skill-xp {
  font-family:'Cinzel',serif; font-size:15px; color:var(--text-md);
  width:80px; text-align:right; flex-shrink:0;
}

.player-modal-loading {
  text-align:center; padding:16px 0;
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:2px;
  color:var(--text-md);
}

/* ══════════════════════════════════════════════════════
   HISCORES RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .totals-strip { flex-wrap:wrap; }
  .total-cell { min-width:calc(33% - 1px); }
}

@media (max-width:768px) {
  .cat-nav-inner { padding:0 20px; }
  .panel-header { flex-direction:column; align-items:flex-start; }
  .sort-bar { width:100%; }
  .search-wrap { width:100%; }
  .hs-search-input { flex:1; width:auto; }

  /* Scrollable skill sub-tabs */
  .skill-tabs {
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .skill-tabs::-webkit-scrollbar { display:none; }
  .skill-tab {
    scroll-snap-align:start;
    flex-shrink:0;
  }

  /* Modal responsive */
  .player-modal { padding:24px 20px; width:95%; }
  .player-modal-stats { grid-template-columns:repeat(2,1fr); }
  .pm-skill-xp { width:60px; font-size:15px; }
  .pm-skill-name { width:70px; font-size:15px; }
}

@media (max-width:540px) {
  .total-cell { min-width:calc(50% - 1px); }
}

@media (max-width:380px) {
  .total-cell { min-width:100%; }
}

/* ══════════════════════════════════════════════════════
   TOP 3 PODIUM DISPLAY
══════════════════════════════════════════════════════ */
.hs-podium {
  display:flex; align-items:flex-end; justify-content:center; gap:16px;
  margin-bottom:32px; padding:20px 0;
}
.podium-slot {
  text-align:center; padding:16px 24px; border-radius:var(--card-radius, 8px);
  border:1px solid var(--border-blood, rgba(255,47,179,.2)); background:var(--card, rgba(18,14,30,1));
  transition: all .3s;
}
.podium-1 {
  order:2; min-height:140px;
  border-color:var(--gold-dim, rgba(138,43,226,.3)); background:linear-gradient(180deg, rgba(138,43,226,.08), var(--card, rgba(18,14,30,1)));
  box-shadow: 0 0 24px rgba(138,43,226,.1);
}
.podium-2 {
  order:1; min-height:110px;
  border-color:#6a6a6a; background:linear-gradient(180deg, rgba(192,192,192,.06), var(--card, rgba(18,14,30,1)));
}
.podium-3 {
  order:3; min-height:90px;
  border-color:#8b5e3c; background:linear-gradient(180deg, rgba(205,127,50,.06), var(--card, rgba(18,14,30,1)));
}
.podium-rank {
  font-family:'Cinzel Decorative',serif; font-size:28px; font-weight:900;
  margin-bottom:6px;
}
.podium-1 .podium-rank { color:var(--gold, #CFA6FF); filter:drop-shadow(0 0 8px var(--gold-shadow, rgba(138,43,226,.3))); }
.podium-2 .podium-rank { color:#c0c0c0; }
.podium-3 .podium-rank { color:#cd7f32; }
.podium-name {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700; color:var(--text-bright, #F5F5FF);
  margin-bottom:4px;
}
.podium-xp { font-size:14px; color:var(--text-md, #CFA6FF); }
.podium-1:hover { box-shadow: 0 0 36px rgba(138,43,226,.2); transform:translateY(-4px); }

/* ══════════════════════════════════════════════════════
   #1 PLAYER ROW GLOW
══════════════════════════════════════════════════════ */
.lb-table tbody tr:first-child {
  background: linear-gradient(90deg, rgba(138,43,226,.06), rgba(138,43,226,.02), rgba(138,43,226,.06)) !important;
  box-shadow: inset 0 0 20px rgba(138,43,226,.05);
  animation: topPlayerGlow 3s ease-in-out infinite;
}
@keyframes topPlayerGlow {
  0%,100% { box-shadow: inset 0 0 15px rgba(138,43,226,.04); }
  50% { box-shadow: inset 0 0 25px rgba(138,43,226,.08); }
}

/* ══════════════════════════════════════════════════════
   AVATAR PLACEHOLDERS
══════════════════════════════════════════════════════ */
.player-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; margin-right:8px;
  background: linear-gradient(135deg, var(--blood-dim, #99207a), var(--card-lit, rgba(30,24,50,1)));
  border:1px solid var(--border-blood, rgba(255,47,179,.2)); vertical-align:middle;
  font-size:12px; color:var(--blood, #FF2FB3);
}