:root {
    --void: #05040a;
    --panel: rgba(8, 7, 16, .92);
    --panel2: rgba(15, 10, 27, .90);
    --silver: #e9e6f0;
    --silver-mid: #aaa6b4;
    --silver-dark: #6e6a79;
    --purple: #b269ff;
    --purple-2: #6f35c5;
    --purple-glow: rgba(166, 78, 209, .42);
    --text: #f2edf9;
    --muted: #aaa0bd;
    --gold: #f7d98b;
    --gold-dark: #9d6b16;
    --bronze: #e1a273;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--void);
}

.page-bg, .page-overlay, .top-shade {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.page-bg {
    background: url('assets/background.png') center center / cover no-repeat;
    transform: scale(1.025);
}

.page-overlay {
    background:
        linear-gradient(180deg, rgba(3,3,8,.48) 0%, rgba(5,4,10,.36) 33%, rgba(5,4,10,.86) 100%),
        radial-gradient(circle at 50% 20%, rgba(121,59,199,.17), transparent 38%),
        linear-gradient(90deg, rgba(4,4,10,.73), transparent 32%, transparent 68%, rgba(4,4,10,.73));
}

.top-shade {
    height: 160px;
    bottom: auto;
    background: linear-gradient(180deg, rgba(2,2,6,.72), transparent);
}

.page-shell {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 28px));
    margin: 0 auto;
    padding: 34px 0 44px;
}

.landing-hero {
    position: relative;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 20px 30px;
}

.hero-glow {
    position: absolute;
    width: min(760px, 90vw);
    height: 240px;
    top: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(131,61,210,.19), rgba(131,61,210,.055) 40%, transparent 72%);
    filter: blur(7px);
}

.studio-logo {
    position: relative;
    width: min(250px, 46vw);
    max-height: 82px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.7));
}

.game-logo {
    position: relative;
    width: min(670px, 88vw);
    max-height: 260px;
    object-fit: contain;
    margin: 0;
    filter:
        drop-shadow(0 12px 24px rgba(0,0,0,.72))
        drop-shadow(0 0 22px rgba(127,55,192,.26));
}

.hero-tagline {
    position: relative;
    margin: 4px 0 0;
    color: #ded9e6;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: clamp(.9rem, 1.5vw, 1.05rem);
    text-shadow: 0 2px 8px #000;
}

.hero-divider {
    position: relative;
    display: grid;
    grid-template-columns: minmax(50px, 180px) 12px minmax(50px, 180px);
    align-items: center;
    gap: 13px;
    width: min(430px, 80%);
    margin: 18px auto 11px;
}
.hero-divider span {
    height: 1px;
    background: linear-gradient(90deg, transparent, #b385ff);
    box-shadow: 0 0 8px rgba(142,70,237,.65);
}
.hero-divider span:last-child { transform: scaleX(-1); }
.hero-divider i {
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border: 1px solid #dfd4f4;
    background: #8241d6;
    box-shadow: 0 0 10px #8646df;
}

.hero-label {
    position: relative;
    margin: 0;
    color: #b996ef;
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: .82rem;
}

.stats-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.stat-card {
    min-width: 148px;
    padding: 12px 17px 13px;
    border-top: 1px solid rgba(238,235,246,.28);
    border-bottom: 1px solid rgba(129,79,186,.34);
    background: linear-gradient(180deg, rgba(25,19,38,.74), rgba(9,7,17,.82));
    box-shadow: 0 10px 22px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.035);
}
.stat-label {
    display: block;
    color: #8f849e;
    font-size: .69rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 5px;
}
.stat-value { font-size: 1.03rem; color: #ece7f3; }
.live-value { display: inline-flex; align-items: center; gap: 7px; }
.live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #a969ff;
    box-shadow: 0 0 9px #a969ff;
}

.board-frame {
    position: relative;
    margin-top: 8px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(244,244,248,.52), rgba(83,78,95,.25) 20%, rgba(82,46,130,.42) 50%, rgba(224,221,230,.38));
    box-shadow: 0 28px 75px rgba(0,0,0,.56), 0 0 44px rgba(72,34,119,.17);
}
.board-frame::after {
    content: '';
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 1px solid rgba(221,215,231,.11);
}
.corner {
    position: absolute;
    z-index: 3;
    width: 27px;
    height: 27px;
    border-color: rgba(230,226,236,.66);
    filter: drop-shadow(0 0 7px rgba(143,78,216,.28));
}
.corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.board-inner {
    position: relative;
    padding: 29px;
    background:
        radial-gradient(circle at top center, rgba(109,52,175,.11), transparent 31%),
        linear-gradient(180deg, rgba(13,10,22,.95), rgba(6,5,12,.98));
}

.board-header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    padding: 0 5px 21px;
}
.section-kicker {
    margin: 0 0 7px;
    color: #a982e1;
    text-transform: uppercase;
    letter-spacing: .27em;
    font-size: .76rem;
}
.board-header h1 {
    margin: 0;
    color: #ece9f1;
    font-weight: normal;
    font-size: clamp(2rem, 3vw, 2.8rem);
    letter-spacing: .06em;
    text-shadow: 0 0 18px rgba(142,76,216,.18);
}
.section-copy { margin: 8px 0 0; color: #948b9f; font-size: .96rem; }
.updated-text { color: #897f96; font-size: .88rem; white-space: nowrap; padding-bottom: 4px; }

.podium-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 2px 14px;
    color: #beb3cc;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
}
.podium-title span { height: 1px; background: linear-gradient(90deg, transparent, rgba(192,169,226,.28)); }
.podium-title span:last-child { transform: scaleX(-1); }
.podium-title strong { font-weight: normal; }

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(191,180,210,.16);
    background: rgba(2,2,7,.54);
    box-shadow: inset 0 0 25px rgba(0,0,0,.37);
}
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th, .leaderboard-table td {
    padding: 16px 17px;
    border-bottom: 1px solid rgba(185,169,207,.095);
    text-align: left;
}
.leaderboard-table thead th {
    color: #887f94;
    background: linear-gradient(180deg, rgba(255,255,255,.033), rgba(255,255,255,.008));
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .75rem;
    font-weight: normal;
}
.leaderboard-table tbody tr {
    position: relative;
    background: rgba(13,10,21,.52);
    transition: transform .16s ease, background .16s ease;
}
.leaderboard-table tbody tr:nth-child(even):not(.rank-1):not(.rank-2):not(.rank-3) { background: rgba(17,12,27,.59); }
.leaderboard-table tbody tr:hover:not(.rank-1):not(.rank-2):not(.rank-3) { background: rgba(73,39,111,.22); }
.rank-col, .rank-cell { width: 105px; }
.power-col, .power-cell { width: 230px; text-align: right; }
.time-col, .time-cell { width: 230px; color: #9b93a6; font-size: .9rem; }

.rank-emblem {
    margin: 0 auto;
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(211,203,223,.23);
    transform: rotate(45deg);
    background: linear-gradient(145deg, rgba(57,43,75,.76), rgba(15,12,23,.96));
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.018);
}
.rank-emblem > * { transform: rotate(-45deg); }
.rank-number { font-weight: bold; color: #d7d0df; }
.crown {
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -5px;
    color: #ffe4a2;
    font-size: 10px;
    text-shadow: 0 0 8px rgba(250,206,108,.8);
}
.player-cell { display: flex; flex-direction: column; gap: 3px; }
.player-name { color: #eee9f4; font-weight: bold; font-size: 1.02rem; }
.placement-title { color: #8e7f9f; text-transform: uppercase; font-size: .66rem; letter-spacing: .14em; }
.power-value { font-weight: bold; font-size: 1.04rem; color: #fff; }

/* Premium Top 3 */
.rank-1, .rank-2, .rank-3 { box-shadow: inset 4px 0 0 rgba(255,255,255,.28); }
.rank-1 td, .rank-2 td, .rank-3 td { padding-top: 20px; padding-bottom: 20px; }

.rank-1 {
    background:
        linear-gradient(90deg, rgba(115,76,14,.28), rgba(71,42,13,.10) 27%, rgba(36,18,59,.23) 75%, rgba(107,69,13,.17));
    box-shadow: inset 4px 0 0 #dbae54, inset -1px 0 0 rgba(236,200,122,.2), 0 0 22px rgba(197,145,54,.055);
}
.rank-1 .rank-emblem {
    background: linear-gradient(145deg, #fff1bd, #bd8127 55%, #6c4210);
    border-color: #ffe6a5;
    box-shadow: 0 0 16px rgba(232,180,70,.26), inset 0 0 0 3px rgba(255,255,255,.14);
}
.rank-1 .rank-number { color: #241302; }
.rank-1 .player-name { color: #ffecc0; font-size: 1.09rem; text-shadow: 0 0 12px rgba(225,177,69,.15); }
.rank-1 .placement-title { color: #cda55a; }
.rank-1 .power-value { color: #ffe7a9; text-shadow: 0 0 10px rgba(245,198,91,.18); }

.rank-2 {
    background: linear-gradient(90deg, rgba(151,155,173,.18), rgba(77,79,94,.07) 30%, rgba(35,23,55,.22) 78%, rgba(129,133,151,.11));
    box-shadow: inset 4px 0 0 #aeb5c4;
}
.rank-2 .rank-emblem {
    background: linear-gradient(145deg, #fafcff, #aeb6c8 55%, #636a7a);
    border-color: #eff2f8;
    box-shadow: 0 0 14px rgba(190,200,222,.18), inset 0 0 0 3px rgba(255,255,255,.14);
}
.rank-2 .rank-number { color: #272b34; }
.rank-2 .player-name { color: #e9edf7; font-size: 1.06rem; }
.rank-2 .placement-title { color: #aab1c2; }
.rank-2 .power-value { color: #e2e7f3; }

.rank-3 {
    background: linear-gradient(90deg, rgba(134,71,37,.20), rgba(69,37,24,.08) 30%, rgba(34,21,50,.22) 78%, rgba(118,64,34,.11));
    box-shadow: inset 4px 0 0 #b9754d;
}
.rank-3 .rank-emblem {
    background: linear-gradient(145deg, #f0c2a2, #ac633b 55%, #62361f);
    border-color: #e7b28f;
    box-shadow: 0 0 12px rgba(190,107,61,.17), inset 0 0 0 3px rgba(255,255,255,.10);
}
.rank-3 .rank-number { color: #281309; }
.rank-3 .player-name { color: #e7c0a6; font-size: 1.045rem; }
.rank-3 .placement-title { color: #b67c5b; }
.rank-3 .power-value { color: #e4b496; }

.empty-row { text-align: center !important; color: #9a90a8; padding: 28px !important; }
.page-footer { display: none; }

@media (max-width: 850px) {
    .page-shell { width: min(100% - 14px, 1240px); padding-top: 16px; }
    .landing-hero { min-height: 300px; padding-left: 12px; padding-right: 12px; }
    .studio-logo { width: min(210px, 56vw); }
    .game-logo { width: min(600px, 95vw); }
    .board-inner { padding: 18px 12px; }
    .board-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .updated-text { white-space: normal; }
    .time-col, .time-cell { display: none; }
}

@media (max-width: 560px) {
    .hero-tagline { letter-spacing: .14em; font-size: .77rem; }
    .hero-label { letter-spacing: .19em; font-size: .68rem; }
    .stats-row { gap: 7px; }
    .stat-card { min-width: 102px; padding-left: 10px; padding-right: 10px; }
    .rank-col, .rank-cell { width: 73px; }
    .power-col, .power-cell { width: 130px; }
    .leaderboard-table th, .leaderboard-table td { padding-left: 9px; padding-right: 9px; }
    .rank-emblem { width: 39px; height: 39px; }
    .placement-title { display: none; }
}