/* =========================================================
   ZSCAPE — Hiscores + Player pages
   Builds on styles.css (shared tokens, buttons, nav, footer).
   ========================================================= */

.hiscores-ambient {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 0; pointer-events: none;
    background: radial-gradient(80% 40% at 50% 0%, rgba(255,106,31,.12), transparent 55%);
}

.hiscores-main { position: relative; z-index: 1; padding-bottom: 80px; }

.orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.orn::before, .orn::after { content: ""; height: 1px; flex: 1; max-width: 80px; }
.orn::before { background: linear-gradient(90deg, transparent, var(--line-2)); }
.orn::after  { background: linear-gradient(270deg, transparent, var(--line-2)); }
.orn svg { display: block; }

/* =========================================================
   Page header
   ========================================================= */
.hiscores-hero, .player-hero { padding: calc(var(--nav-h) + 72px) 0 48px; text-align: center; }
.hiscores-hero h1, .player-hero h1 {
    font-family: 'Cinzel Decorative', serif; font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin-bottom: 16px;
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 12px rgba(255,100,30,.3));
}
.hiscores-hero p, .player-hero p { color: var(--muted); max-width: 540px; margin: 0 auto; font-size: 1.02rem; line-height: 1.7; }

.hiscores-section { margin-bottom: 60px; }

/* =========================================================
   Mode switcher (helm icons)
   ========================================================= */
.hiscores-modes {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 32px;
}
.hs-mode-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 74px; padding: 10px 6px 8px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel); transition: all .2s;
}
.hs-mode-btn:hover { border-color: var(--gold); background: var(--panel-2); }
.hs-mode-btn.active {
    border-color: var(--gold-deep); background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: inset 0 0 0 1px rgba(242,166,58,.35), 0 0 16px rgba(242,166,58,.12);
}
.hs-mode-btn .hs-mode-icon {
    width: 32px; height: 32px; display: grid; place-items: center; flex: none;
}
.hs-mode-btn .hs-mode-icon img { width: 100%; height: 100%; object-fit: contain; }
.hs-mode-btn .hs-mode-icon svg { width: 28px; height: 28px; display: block; }
.hs-mode-btn .hs-mode-label {
    font-family: 'Cinzel', serif; font-size: .66rem; font-weight: 600; letter-spacing: .02em;
    text-align: center; line-height: 1.2; color: var(--muted);
}
.hs-mode-btn.active .hs-mode-label { color: var(--gold-2); }
.hs-mode-btn:hover .hs-mode-label { color: var(--gold-2); }

/* =========================================================
   Hiscores table
   ========================================================= */
.hiscores-table-wrap {
    border-radius: 6px; border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    overflow-x: auto; box-shadow: inset 0 1px 0 rgba(255,214,128,.06);
}
.hiscores-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.hiscores-table thead th {
    font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold); text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line-2);
}
.hiscores-table th.col-rank { width: 90px; }
.hiscores-table th.col-num, .hiscores-table td.col-num { text-align: right; }
.hiscores-table tbody td { padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--text); font-size: .95rem; }
.hiscores-table tbody tr:last-child td { border-bottom: none; }
.hiscores-table tbody tr:hover td { background: rgba(242,166,58,.05); }
.hiscores-table td.col-rank { color: var(--muted-2); font-family: var(--mono, monospace); }
.hiscores-table td.col-name a { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-2); font-weight: 600; transition: color .2s; }
.hiscores-table td.col-name a:hover { color: var(--gold-3); text-decoration: underline; }
.hs-state-row td { text-align: center; color: var(--muted); padding: 40px 20px; }

/* =========================================================
   Pagination
   ========================================================= */
.hiscores-pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hs-page-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
    padding: 0 12px; border-radius: 4px; font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 600;
    color: var(--muted); border: 1px solid var(--line); background: var(--panel); transition: all .2s;
}
.hs-page-link:hover { color: var(--gold-2); border-color: var(--gold); }
.hs-page-link.active { color: #35210a; background: var(--gold-grad); border-color: var(--gold-deep); }
.hs-page-link.disabled { opacity: .35; pointer-events: none; }
.hs-page-ellipsis { color: var(--muted-2); display: inline-flex; align-items: center; padding: 0 4px; }

/* =========================================================
   Player page
   ========================================================= */
.player-summary {
    display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;
    margin: 0 auto 48px; max-width: 640px;
}
.player-summary-stat { text-align: center; }
.player-summary-stat .val {
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 2rem;
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.player-summary-stat .lbl { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

#playerName { display: flex; align-items: center; justify-content: center; gap: 12px; }

.player-section-title {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
    color: var(--gold-2); margin-bottom: 14px;
}

.player-stats-table td.col-skill, .player-stats-table th.col-skill { text-align: left; }
.player-stats-table td.col-skill {
    display: flex; align-items: center; gap: 12px;
}
.skill-icon {
    width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-family: 'Cinzel', serif; font-weight: 800; font-size: .78rem; color: var(--gold-2);
    background: radial-gradient(circle at 50% 35%, rgba(242,166,58,.18), rgba(0,0,0,.2));
    border: 1px solid var(--line-2);
}

.player-not-found { text-align: center; padding: 60px 20px; color: var(--muted); }

@media (max-width: 600px) {
    .player-summary { gap: 24px; }
}