/* ============================================================
   rank.css — Player Rankings page styles
   Requires: style.css (base, nav, footer, card, animations)
   Font added here: Share Tech Mono (monospace accent)
   ============================================================ */

/* ---------- Layout ---------- */
@font-face {
    font-family: StratumNo2;
    src: url('fonts/stratumno2_bold.woff2') format('woff2'),
         url('fonts/stratumno2_bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: StratumNo2;
    src: url('fonts/stratumno2_light.woff2') format('woff2'),
         url('fonts/stratumno2_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: StratumNo2;
    src: url('fonts/stratumno2_regular.woff2') format('woff2'),
         url('fonts/stratumno2_regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Future Rot;
    src: url('fonts/Futurot.woff2') format('woff2'),
        url('fonts/Futurot.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

.rank-header {
    padding: 60px 0 28px;
    text-align: center;
}

.rank-header h1 {
    font-family: 'Future Rot', sans-serif;
    font-size: 52px;
    color: #ff3333;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.65);
    animation: pulse 4s ease-in-out infinite;
}

.rank-header p {
    font-size: 16px;
    color: #888;
    letter-spacing: 1px;
}

/* ---------- Highlights bar ---------- */

.highlights-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

@media (max-width: 900px) {
    .highlights-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .highlights-bar {
        grid-template-columns: 1fr;
    }
}

.highlight-item {
    background: rgba(15, 15, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(6px);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.highlight-item:hover {
    border-color: rgba(255, 153, 0, 0.4);
    background: rgba(255, 153, 0, 0.05);
}

.hl-icon {
    font-size: 18px;
    line-height: 1;
}

.hl-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    font-family: 'Share Tech Mono', monospace;
}

.hl-value {
    font-size: 13px;
    color: #ff9900;
    font-family: 'Share Tech Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Table card ---------- */

.table-card {
    background: rgba(12, 12, 12, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    margin-bottom: 40px;
}

.table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.table-card-header h2 {
    font-family: 'Future Rot', sans-serif;
    font-size: 22px;
    color: #ff9900;
    letter-spacing: 2px;
    margin: 0;
}

.live-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: #0f0;
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.25);
    border-radius: 3px;
    padding: 3px 8px;
    animation: blink 2.5s step-start infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* ---------- Table wrapper & scrollbar ---------- */

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 620px;
}

.table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ---------- Table ---------- */

.rank-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
}

.rank-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.rank-table th {
    background: rgba(5, 5, 5, 0.95);
    color: #ff9900;
    font-family: 'StratumNo2', cursive;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 153, 0, 0.2);
    white-space: nowrap;
    text-align: center;
}

.rank-table th.col-name {
    text-align: left;
}

.rank-table td {
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #bbb;
    transition: background 0.15s ease;
}

.rank-table td.col-name {
    text-align: left;
}

.rank-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

/* ---------- Rank column ---------- */

.col-rank {
    width: 50px;
}

.rank-num {
    display: inline-block;
    width: 28px;
    text-align: right;
    color: #555;
}

.medal {
    font-size: 16px;
    line-height: 1;
}

/* ---------- Name column ---------- */

.col-name {
    min-width: 180px;
    max-width: 260px;
}

.player-name {
    color: #f0f0f0;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.player-name:hover {
    color: #66c0f4;
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #222;
}

/* ---------- Score column ---------- */

.col-score {
    min-width: 90px;
}

.score-val {
    color: #ff9900;
    font-weight: bold;
    font-size: 13px;
}

/* ---------- Top 3 rows ---------- */

.row-gold td {
    background: rgba(255, 215, 0, 0.08);
    animation: gold-glow 3s ease-in-out infinite;
}

.row-gold .player-name,
.row-gold td {
    color: #ffd700;
}

.row-silver td {
    background: rgba(192, 192, 192, 0.07);
    animation: silver-glow 3s ease-in-out infinite;
}

.row-silver .player-name,
.row-silver td {
    color: #c8c8c8;
}

.row-bronze td {
    background: rgba(205, 127, 50, 0.07);
    animation: bronze-glow 3s ease-in-out infinite;
}

.row-bronze .player-name,
.row-bronze td {
    color: #cd7f32;
}

/* ---------- Loading / error states ---------- */

.loading-row td {
    text-align: center;
    padding: 48px 0;
    color: #555;
    font-family: 'StratumNo2', cursive;
    font-size: 15px;
}

.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 153, 0, 0.2);
    border-top-color: #ff9900;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-cell {
    text-align: center;
    padding: 48px 0;
    color: #c0392b;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
}

/* ---------- Glow keyframes ---------- */

@keyframes gold-glow {
    0%, 100% {
        text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
        box-shadow:  inset 0 0 8px  rgba(255, 215, 0, 0.08);
    }
    50% {
        text-shadow: 0 0 16px rgba(255, 215, 0, 0.7);
        box-shadow:  inset 0 0 20px rgba(255, 215, 0, 0.2);
    }
}

@keyframes silver-glow {
    0%, 100% {
        text-shadow: 0 0 4px rgba(192, 192, 192, 0.3);
        box-shadow:  inset 0 0 8px  rgba(192, 192, 192, 0.08);
    }
    50% {
        text-shadow: 0 0 16px rgba(192, 192, 192, 0.7);
        box-shadow:  inset 0 0 20px rgba(192, 192, 192, 0.2);
    }
}

@keyframes bronze-glow {
    0%, 100% {
        text-shadow: 0 0 4px rgba(205, 127, 50, 0.3);
        box-shadow:  inset 0 0 8px  rgba(205, 127, 50, 0.08);
    }
    50% {
        text-shadow: 0 0 16px rgba(205, 127, 50, 0.7);
        box-shadow:  inset 0 0 20px rgba(205, 127, 50, 0.2);
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .rank-header h1 {
        font-size: 38px;
    }

    .rank-table th,
    .rank-table td {
        padding: 9px 10px;
        font-size: 12px;
    }

    .col-stat {
        display: none;
    }

    .rank-table th.col-score,
    .rank-table td.col-score {
        display: table-cell;
    }
}