/* ============ REMX:317 HISCORES ============ */
:root {
    --bg: #0a0a0c;
    --panel: #121216;
    --line: #232329;
    --ink: #f2f0ea;
    --dim: rgba(242, 240, 234, 0.62);
    --red: #ff2d2d;
    --red-deep: #8f0f0f;
    --gold: #ffc93c;
    --silver: #c9d1d9;
    --bronze: #d08a4e;
    --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
    --mono: 'JetBrains Mono', Consolas, monospace;
    --body: 'Inter', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* diagonal beam backdrop */
.beam {
    position: fixed;
    inset: -20% -10%;
    z-index: -1;
    background:
        linear-gradient(99deg, transparent 46%, rgba(255, 45, 45, 0.07) 46.5%, rgba(255, 45, 45, 0.12) 50%, rgba(255, 45, 45, 0.05) 53.5%, transparent 54%),
        radial-gradient(70% 45% at 85% -5%, rgba(88, 101, 242, 0.10), transparent 65%),
        var(--bg);
}

/* ============ topbar ============ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 4vw;
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.topbar__brand {
    font-family: var(--display);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    text-shadow: 2px 2px 0 var(--red-deep);
    white-space: nowrap;
}

.topbar__brand span { color: var(--red); }

.topbar__search { position: relative; flex: 1; max-width: 420px; margin-left: auto; }

.topbar__search input {
    width: 100%;
    background: var(--panel);
    border: 2px solid var(--line);
    color: var(--ink);
    font-family: var(--mono);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    padding: 11px 16px;
    outline: none;
    transition: border-color 0.2s;
}

.topbar__search input:focus { border-color: var(--red); }
.topbar__search input::placeholder { color: rgba(242, 240, 234, 0.35); }

.topbar__suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--panel);
    border: 2px solid var(--line);
    display: none;
    z-index: 70;
}

.topbar__suggest.is-open { display: block; }

.topbar__suggest button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

.topbar__suggest button:hover { background: var(--red); color: #fff; }

.topbar__play {
    font-family: var(--display);
    font-size: 0.85rem;
    padding: 11px 20px;
    border: 2px solid var(--red);
    color: #ffc9c9;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.topbar__play:hover { background: var(--red); color: #fff; transform: skewX(-4deg); }

/* ============ header ============ */
.head {
    padding: 9vh 4vw 3vh;
    text-align: center;
}

.head__title {
    position: relative;
    display: inline-block;
    font-family: var(--display);
    font-size: clamp(3rem, 10vw, 8.2rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-shadow: 0.045em 0.045em 0 #000, 0.09em 0.09em 0 var(--red-deep);
}

.head__echo {
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(242, 240, 234, 0.15);
    transform: translate(-0.1em, -0.08em);
    text-shadow: none;
    pointer-events: none;
}

.head__meta {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.mode-switch { display: inline-flex; border: 2px solid var(--line); }

.mode-switch__btn {
    font-family: var(--display);
    font-size: 0.85rem;
    padding: 12px 28px;
    letter-spacing: 0.08em;
    color: var(--dim);
    transition: background 0.2s, color 0.2s;
}

.mode-switch__btn.is-on { background: var(--red); color: #fff; }

.head__sub {
    font-family: var(--mono);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    color: var(--dim);
}

/* ============ skill / npc picker ============ */
.picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 3vh 4vw;
    max-width: 1250px;
    margin: 0 auto;
}

.picker__tile {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 2px solid var(--line);
    background: var(--panel);
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    color: var(--dim);
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.picker__tile img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }

.picker__tile:hover { border-color: var(--red); color: var(--ink); transform: translateY(-3px); }

.picker__tile.is-on {
    border-color: var(--red);
    color: #fff;
    background: linear-gradient(115deg, rgba(255, 45, 45, 0.25), rgba(143, 15, 15, 0.15));
    box-shadow: 0 8px 26px rgba(255, 45, 45, 0.22);
}

.picker__tile .kc { font-family: var(--mono); font-size: 0.68rem; opacity: 0.7; }

/* ============ board ============ */
.board { max-width: 1250px; margin: 0 auto; padding: 2vh 4vw 8vh; }

/* podium */
.podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 18px;
    align-items: end;
    margin: 4vh 0 30px;
}

.podium:empty { display: none; }

.pcard {
    position: relative;
    border: 2px solid var(--line);
    background: var(--panel);
    padding: 26px 22px 22px;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s;
}

.pcard:hover { border-color: var(--medal); }

.pcard--1 { --medal: var(--gold); padding-top: 44px; animation-delay: 0.05s; }
.pcard--2 { --medal: var(--silver); animation-delay: 0.18s; }
.pcard--3 { --medal: var(--bronze); animation-delay: 0.3s; }

.pcard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, color-mix(in srgb, var(--medal) 16%, transparent), transparent 55%);
    pointer-events: none;
}

.pcard__rank {
    font-family: var(--display);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--medal);
}

.pcard--1 .pcard__rank { color: var(--medal); -webkit-text-stroke: 0; text-shadow: 0 0 34px color-mix(in srgb, var(--medal) 55%, transparent); }

.pcard__name {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2vw, 1.6rem);
    margin: 12px 0 14px;
    word-break: break-all;
}

.pcard__stats {
    display: flex;
    justify-content: center;
    gap: 22px;
    font-family: var(--mono);
    font-size: 0.8rem;
}

.pcard__stats b { display: block; font-size: 1.05rem; color: var(--medal); }
.pcard__stats span { color: var(--dim); font-size: 0.62rem; letter-spacing: 0.2em; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* table */
.tablewrap { overflow-x: auto; border: 2px solid var(--line); }

.table { width: 100%; border-collapse: collapse; min-width: 560px; }

.table thead tr {
    background: #0d0d10;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    color: var(--dim);
}

.table th { text-align: left; padding: 14px 20px; border-bottom: 2px solid var(--line); }
.table th:last-child, .table td:last-child { text-align: right; }

.table tbody tr {
    border-bottom: 1px solid #1a1a1f;
    opacity: 0;
    transform: translateX(-14px);
    animation: slidein 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 0.03s);
    cursor: pointer;
    transition: background 0.15s;
}

.table tbody tr:hover { background: rgba(255, 45, 45, 0.08); box-shadow: inset 4px 0 0 var(--red); }

@keyframes slidein { to { opacity: 1; transform: none; } }

.table td { padding: 13px 20px; }

.td-rank { font-family: var(--display); font-size: 1rem; color: var(--dim); width: 90px; }
.td-name { font-weight: 800; letter-spacing: 0.03em; }
.td-lvl  { font-family: var(--mono); font-weight: 800; color: var(--red); width: 110px; }
.td-val  { font-family: var(--mono); font-weight: 500; color: var(--dim); }

/* pager */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 34px;
}

.pager__btn {
    font-family: var(--display);
    font-size: 0.85rem;
    padding: 13px 26px;
    border: 2px solid var(--line);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.pager__btn:not(:disabled):hover { border-color: var(--red); background: var(--red); color: #fff; }
.pager__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.pager__label { font-family: var(--mono); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.25em; color: var(--dim); }

.board__empty {
    text-align: center;
    font-family: var(--display);
    color: var(--dim);
    padding: 8vh 0;
    letter-spacing: 0.05em;
}

/* ============ footer ============ */
.foot {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 4vw 60px;
    border-top: 1px solid var(--line);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
}

.foot a { color: var(--dim); transition: color 0.2s; }
.foot a:hover { color: var(--red); }

/* ============ player modal ============ */
.pm { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 4vw; }
.pm[hidden] { display: none; }

.pm__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 7, 0.82); backdrop-filter: blur(6px); }

.pm__card {
    position: relative;
    width: min(100%, 880px);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--panel);
    border: 2px solid var(--red);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 60px rgba(255, 45, 45, 0.18);
    padding: 40px 38px 38px;
    animation: rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pm__x {
    position: absolute;
    top: 12px; right: 16px;
    font-size: 1.9rem;
    color: var(--dim);
    transition: color 0.2s, transform 0.2s;
}

.pm__x:hover { color: var(--red); transform: rotate(90deg); }

.pm__eyebrow { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.4em; color: var(--red); margin-bottom: 10px; }

.pm__name { font-family: var(--display); font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1; margin-bottom: 20px; word-break: break-all; }

.pm__totals { display: flex; gap: 30px; margin-bottom: 28px; flex-wrap: wrap; }

.pm__totals div { font-family: var(--mono); }
.pm__totals b { display: block; font-size: 1.5rem; color: var(--red); }
.pm__totals span { font-size: 0.62rem; letter-spacing: 0.25em; color: var(--dim); }

.pm__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.pm__skill {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: #0d0d10;
    padding: 11px 13px;
}

.pm__skill img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.pm__skill .nm { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--dim); }
.pm__skill .nm small { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.62rem; opacity: 0.7; }
.pm__skill .lv { font-family: var(--mono); font-weight: 800; font-size: 1.05rem; color: var(--red); }

/* ============ responsive ============ */
@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; }
    .topbar__search { order: 3; max-width: none; flex-basis: 100%; }
    .podium { grid-template-columns: 1fr; align-items: stretch; }
    .pcard--1 { order: -1; }
    .head { padding-top: 6vh; }
}

@media (prefers-reduced-motion: reduce) {
    .pcard, .table tbody tr { animation: none; opacity: 1; transform: none; }
}