@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;600;800&display=swap');

:root {
    --ink: #0b0b13;
    --paper: #f6f3ea;
    --paper-2: #e9e4d9;
    --chalk: rgba(246, 243, 234, 0.75);

    --accent-a: #ff7a18;
    --accent-b: #ff2d2d;
    --accent-c: #ffb000;

    --accent-a-rgb: 255, 122, 24;
    --accent-b-rgb: 255, 45, 45;
    --accent-c-rgb: 255, 176, 0;
    --danger: #ff2d2d;

    --stroke: rgba(246, 243, 234, 0.18);
    --stroke-2: rgba(246, 243, 234, 0.32);
    --shadow: rgba(0, 0, 0, 0.55);

    --r: 18px;
    --r2: 12px;
    --wrap: 1180px;
}

:root[data-mode="MACE"] {
    --accent-a: #1e3a8a;
    --accent-b: #3b82f6;
    --accent-c: #60a5fa;
    --accent-a-rgb: 30, 58, 138;
    --accent-b-rgb: 59, 130, 246;
    --accent-c-rgb: 96, 165, 250;
}

:root[data-mode="CART"] {
    --accent-a: #ff4d4d;
    --accent-b: #c81d25;
    --accent-c: #ff9b9b;
    --accent-a-rgb: 255, 77, 77;
    --accent-b-rgb: 200, 29, 37;
    --accent-c-rgb: 255, 155, 155;
}

:root[data-mode="AXE"] {
    --accent-a: #0ea5e9;
    --accent-b: #0284c7;
    --accent-c: #38bdf8;
    --accent-a-rgb: 14, 165, 233;
    --accent-b-rgb: 2, 132, 199;
    --accent-c-rgb: 56, 189, 248;
}

:root[data-mode="UUHC"] {
    --accent-a: #facc15;
    --accent-b: #f59e0b;
    --accent-c: #ffe066;
    --accent-a-rgb: 250, 204, 21;
    --accent-b-rgb: 245, 158, 11;
    --accent-c-rgb: 255, 224, 102;
}

:root[data-mode="CREEPER"] {
    --accent-a: #22c55e;
    --accent-b: #16a34a;
    --accent-c: #86efac;
    --accent-a-rgb: 34, 197, 94;
    --accent-b-rgb: 22, 163, 74;
    --accent-c-rgb: 134, 239, 172;
}

:root[data-mode="DSMP"] {
    --accent-a: #14b8a6;
    --accent-b: #2dd4bf;
    --accent-c: #5eead4;
    --accent-a-rgb: 20, 184, 166;
    --accent-b-rgb: 45, 212, 191;
    --accent-c-rgb: 94, 234, 212;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.bg-ink {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--ink);
}

/* Top-left corner glow */
.bg-ink::before {
    content: "";
    position: absolute;
    top: -15%;
    left: -15%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse 100% 100% at 30% 30%, rgba(var(--accent-a-rgb), 0.45), transparent 65%);
    filter: saturate(1.4) blur(60px);
    animation: bgPulse1 6s ease-in-out infinite;
    will-change: opacity, transform;
}

/* Bottom-right corner glow */
.bg-ink::after {
    content: "";
    position: absolute;
    bottom: -15%;
    right: -15%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse 100% 100% at 70% 70%, rgba(var(--accent-b-rgb), 0.40), transparent 65%);
    filter: saturate(1.4) blur(60px);
    animation: bgPulse2 6s ease-in-out infinite;
    animation-delay: -3s;
    will-change: opacity, transform;
}

/* Additional corner glows via extra element */
.bg-ink-extra {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-ink-extra::before {
    content: "";
    position: absolute;
    top: -15%;
    right: -15%;
    width: 55%;
    height: 55%;
    background: radial-gradient(ellipse 100% 100% at 70% 30%, rgba(var(--accent-c-rgb), 0.35), transparent 65%);
    filter: saturate(1.4) blur(60px);
    animation: bgPulse3 7s ease-in-out infinite;
    animation-delay: -1.5s;
    will-change: opacity, transform;
}

.bg-ink-extra::after {
    content: "";
    position: absolute;
    bottom: -15%;
    left: -15%;
    width: 55%;
    height: 55%;
    background: radial-gradient(ellipse 100% 100% at 30% 70%, rgba(var(--accent-a-rgb), 0.30), transparent 65%);
    filter: saturate(1.4) blur(60px);
    animation: bgPulse4 7s ease-in-out infinite;
    animation-delay: -4s;
    will-change: opacity, transform;
}

/* Grid overlay */
.bg-ink-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 7px);
}

@keyframes bgPulse1 {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 1;
        transform: scale(1.12) translate(3%, 3%);
    }
    66% {
        opacity: 0.8;
        transform: scale(1.05) translate(-2%, 2%);
    }
}

@keyframes bgPulse2 {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 0.85;
        transform: scale(1.08) translate(-2%, -2%);
    }
    66% {
        opacity: 1;
        transform: scale(1.15) translate(-4%, -4%);
    }
}

@keyframes bgPulse3 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 0.9;
        transform: scale(1.1) translate(-3%, 2%);
    }
    66% {
        opacity: 0.7;
        transform: scale(1.18) translate(-5%, 4%);
    }
}

@keyframes bgPulse4 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 0.75;
        transform: scale(1.12) translate(2%, -2%);
    }
    66% {
        opacity: 1;
        transform: scale(1.08) translate(4%, -3%);
    }
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 18px;
}

.hidden { display: none !important; }

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(11, 11, 19, 0.6);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--accent-a-rgb), 0.6), rgba(var(--accent-b-rgb), 0.6));
    border-radius: 5px;
    border: 2px solid rgba(11, 11, 19, 0.6);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--accent-a-rgb), 0.85), rgba(var(--accent-b-rgb), 0.85));
}

::-webkit-scrollbar-corner {
    background: rgba(11, 11, 19, 0.6);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-a-rgb), 0.5) rgba(11, 11, 19, 0.6);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11, 11, 19, 0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--stroke);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand__mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--accent-a-rgb), 0.18), rgba(var(--accent-b-rgb), 0.18));
    border: 1px solid var(--stroke-2);
    font-family: "Archivo Black", system-ui;
    font-size: 22px;
    letter-spacing: -0.03em;
    box-shadow: 0 18px 60px var(--shadow);
}

.brand__text { min-width: 0; }

.brand__title {
    margin: 0;
    font-family: "Archivo Black", system-ui;
    font-size: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.brand__tag {
    margin-top: 2px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--chalk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: 10px; }

.btn {
    appearance: none;
    border: 1px solid var(--stroke-2);
    background: rgba(246,243,234,0.08);
    color: var(--paper);
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.btn:hover {
    transform: translateY(-1px);
    background: rgba(246,243,234,0.12);
    border-color: rgba(246,243,234,0.45);
}

.btn:active { transform: translateY(0); }

.btn--ghost {
    background: transparent;
}

.btn__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
    box-shadow: 0 0 0 3px rgba(var(--accent-a-rgb), 0.12);
    vertical-align: -1px;
}

.btn__icon {
    display: inline-block;
    width: 1em;
    margin-right: 8px;
    color: rgba(246,243,234,0.92);
    vertical-align: -1px;
}

.tabs {
    border-bottom: 1px solid var(--stroke);
    background: rgba(11, 11, 19, 0.55);
    backdrop-filter: blur(10px);
}

.tabs__rail {
    display: flex;
    gap: 10px;
    padding: 10px 0 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(246,243,234,0.35);
    background: rgba(246,243,234,0.06);
    color: var(--paper);
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
}

.nav-tab:hover {
    transform: translateY(-1px);
    background: rgba(246,243,234,0.12);
}

.nav-tab:hover {
    transform: translateY(-1px) rotate(0deg);
    background: rgba(246,243,234,0.12);
}

.nav-tab.active {
    border-style: solid;
    background: linear-gradient(135deg, rgba(var(--accent-a-rgb), 0.16), rgba(var(--accent-b-rgb), 0.16));
}

.nav-tab__icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
}

.nav-tab__label {
    font-weight: 800;
    letter-spacing: 0.01em;
}

.main {
    padding-top: 18px;
    padding-bottom: 26px;
}

.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    grid-auto-rows: 1fr;
}

.leaderboard-grid--tiers {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* Tier Column Styles */
.tier-column {
    display: flex;
    flex-direction: column;
    border-radius: var(--r);
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(11, 11, 19, 0.65);
    overflow: hidden;
}

.tier-column__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    background: rgba(246,243,234,0.06);
    border-bottom: 1px solid rgba(246,243,234,0.12);
}

.tier-column__trophy {
    font-size: 18px;
}

.tier-column__title {
    font-family: "Archivo Black", system-ui;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--paper);
}

.tier-column__players {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
    max-height: 600px;
    overflow-y: auto;
}

.tier-column__empty {
    padding: 20px 12px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: rgba(246,243,234,0.45);
}

/* Tier Player Row */
.tier-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r2);
    background: rgba(246,243,234,0.04);
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}

.tier-player-row:hover {
    background: rgba(246,243,234,0.10);
    transform: translateX(2px);
}

.tier-player-row__avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(0,0,0,0.25);
    image-rendering: pixelated;
    flex-shrink: 0;
}

.tier-player-row__nick {
    font-weight: 600;
    font-size: 13px;
    color: var(--paper);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Retired rows: visually greyer + always de-emphasized */
.tier-player-row--retired {
    opacity: 0.42;
    filter: grayscale(1);
}

.tier-player-row--retired .tier-player-row__nick {
    color: rgba(246,243,234,0.58);
}

.tier-player-row--retired:hover {
    background: rgba(246,243,234,0.08);
}

/* Responsive adjustments for tier columns */
@media (max-width: 1100px) {
    .leaderboard-grid--tiers {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .leaderboard-grid--tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.player-card {
    position: relative;
    isolation: isolate;
    border-radius: var(--r);
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(246,243,234,0.06);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    overflow: hidden;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease;

    --card-hue: 0deg;
}

.player-card::before {
    content: "";
    position: absolute;
    inset: -20px;
    background:
        radial-gradient(260px 140px at 30% 10%, rgba(var(--accent-a-rgb), 0.20), transparent 60%),
        radial-gradient(320px 220px at 80% 30%, rgba(var(--accent-b-rgb), 0.16), transparent 65%);
    opacity: 0.85;
    pointer-events: none;

    transform: translate3d(-10px, -8px, 0) rotate(-2deg) scale(1.04);
    filter: hue-rotate(var(--card-hue)) saturate(1.15);
    animation:
        cardGlowDrift 7.5s ease-in-out infinite,
        cardHuePulse 9s ease-in-out infinite;
}

.player-card:nth-child(6n + 1) { --card-hue: 0deg; }
.player-card:nth-child(6n + 2) { --card-hue: 35deg; }
.player-card:nth-child(6n + 3) { --card-hue: 75deg; }
.player-card:nth-child(6n + 4) { --card-hue: 115deg; }
.player-card:nth-child(6n + 5) { --card-hue: 165deg; }
.player-card:nth-child(6n + 6) { --card-hue: 220deg; }

.player-card:hover {
    transform: translateY(-2px);
    border-color: rgba(246,243,234,0.45);
}

.player-card--top {
    position: relative;
    border: none;
    background: rgba(246,243,234,0.06);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    --top-border-gradient: linear-gradient(90deg, #ffd700, #ffec8b, #ffd700, #ffec8b, #ffd700);
}

.player-card--top::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r);
    padding: 2px;
    background: var(--top-border-gradient);
    background-size: 200% 100%;
    animation: borderShimmer 2.5s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.player-card--top::before {
    opacity: 0;
    animation: none;
}

.player-card--top1 {
    --card-hue: 55deg;
    --top-border-gradient: linear-gradient(90deg, #d4a853, #f5d98a, #ffeeba, #f5d98a, #d4a853);
}

.player-card--top2 {
    --card-hue: 205deg;
    --top-border-gradient: linear-gradient(90deg, #a8b5c4, #d4dce8, #f0f4f8, #d4dce8, #a8b5c4);
}

.player-card--top3 {
    --card-hue: 8deg;
    --top-border-gradient: linear-gradient(90deg, #b87333, #d4956a, #e8b896, #d4956a, #b87333);
}

@keyframes cardGlowDrift {
    0% {
        transform: translate3d(-12px, -10px, 0) rotate(-3deg) scale(1.03);
    }
    50% {
        transform: translate3d(10px, 8px, 0) rotate(2deg) scale(1.08);
    }
    100% {
        transform: translate3d(-8px, 10px, 0) rotate(-1deg) scale(1.05);
    }
}

@keyframes cardHuePulse {
    0%, 100% {
        filter: hue-rotate(calc(var(--card-hue) + 0deg)) saturate(1.15);
    }
    50% {
        filter: hue-rotate(calc(var(--card-hue) + 34deg)) saturate(1.25);
    }
}

@keyframes borderShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes borderShimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.pos-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(246,243,234,0.28);
    background: rgba(0,0,0,0.35);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.pos-badge--gold { border-color: rgba(255, 176, 0, 0.55); color: rgba(255, 176, 0, 0.95); }
.pos-badge--silver { border-color: rgba(246,243,234,0.45); color: rgba(246,243,234,0.9); }
.pos-badge--bronze { border-color: rgba(255, 45, 45, 0.45); color: rgba(255, 45, 45, 0.92); }

.player-card__inner {
    position: relative;
    padding: 14px;
    z-index: 1;
}

.player-card__head {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    align-items: center;
}

.player-card__avatar {
    width: 74px;
    height: 74px;
    border-radius: 16px;
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(0,0,0,0.25);
    image-rendering: pixelated;
}

.player-card__nick {
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1.05;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2 / 3;
}

.player-card__meta {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: var(--chalk);
}

.player-card__points {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px dashed rgba(246,243,234,0.28);
    background: rgba(246,243,234,0.05);
}

.player-card__pos {
    opacity: 0.9;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    justify-self: end;
}

.player-card__rank { margin-top: 10px; }

.player-card__tiers {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(246,243,234,0.26);
    background: rgba(0,0,0,0.18);
    position: relative;
}

.rank-badge:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 10;

    padding: 8px 10px;
    max-width: 220px;
    border-radius: 12px;
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(11, 11, 19, 0.95);
    color: rgba(246,243,234,0.92);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);

    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.rank-badge:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 11;
    border: 7px solid transparent;
    border-top-color: rgba(11, 11, 19, 0.95);
}

.rank-badge:not([data-tooltip=""])::after,
.rank-badge:not([data-tooltip=""])::before {
    transition: opacity 120ms ease, transform 120ms ease;
}

.rank-badge:not([data-tooltip=""]):hover::after,
.rank-badge:not([data-tooltip=""]):hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rank-badge__text {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.rank-badge[data-retired="true"] { opacity: 0.55; filter: grayscale(1); }

.tier-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: var(--r2);
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(0,0,0,0.18);
    position: relative;
    transition: transform 120ms ease, border-color 120ms ease;
}

.tier-item[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 10;

    padding: 8px 10px;
    max-width: 260px;
    border-radius: 12px;
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(11, 11, 19, 0.95);
    color: rgba(246,243,234,0.92);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);

    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.tier-item[data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 11;
    border: 7px solid transparent;
    border-top-color: rgba(11, 11, 19, 0.95);
}

.tier-item[data-tooltip]:not([data-tooltip=""])::after,
.tier-item[data-tooltip]:not([data-tooltip=""])::before {
    transition: opacity 120ms ease, transform 120ms ease;
}

.tier-item[data-tooltip]:not([data-tooltip=""]):hover::after,
.tier-item[data-tooltip]:not([data-tooltip=""]):hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tier-item:hover {
    transform: translateX(2px);
    border-color: rgba(246,243,234,0.35);
}

.tier-item__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tier-item__icon {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}

.tier-item__icon--big {
    width: 30px;
    height: 30px;
}

.tier-item__text { min-width: 0; }

.tier-item__mode {
    font-weight: 800;
    font-size: 12px;
    color: var(--paper);
    letter-spacing: 0.02em;
}

.tier-item__points {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--chalk);
}

.tier-item__rank {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 0;
}

.tier-item--wide { padding: 12px 12px; }

.state {
    border-radius: var(--r);
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(246,243,234,0.05);
    padding: 18px;
}

.state--loading {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 280px;
}

.state__title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    color: var(--chalk);
}

.state__hint {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: rgba(246,243,234,0.6);
    text-align: center;
}

.state--error {
    border-color: rgba(255, 45, 45, 0.5);
    background: rgba(255, 45, 45, 0.08);
}

.state__code {
    margin: 10px 0 0;
    overflow: auto;
    max-width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(246,243,234,0.14);
    color: rgba(246,243,234,0.85);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

.spinner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid rgba(246,243,234,0.25);
    border-top-color: var(--accent-a);
    border-right-color: var(--accent-b);
    animation: spin 0.85s linear infinite;
}

.spinner--sm { width: 16px; height: 16px; border-width: 2px; }

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

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: start center;
    padding: 60px 18px 18px;
    background: rgba(11, 11, 19, 0.72);
    backdrop-filter: blur(10px);
}

.modal__panel {
    width: min(780px, 100%);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(11, 11, 19, 0.85);
    box-shadow: 0 24px 120px rgba(0,0,0,0.6);
    overflow: hidden;
}

.modal__panel--wide { width: min(980px, 100%); }

.modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(246,243,234,0.14);
    background: rgba(246,243,234,0.04);
}

.modal__title {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(246,243,234,0.9);
}

.modal__body {
    padding: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

.field { display: grid; gap: 6px; }

.field__label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: rgba(246,243,234,0.65);
}

input[type="text"] {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(246,243,234,0.06);
    border: 1px solid rgba(246,243,234,0.22);
    color: var(--paper);
    outline: none;
    font-size: 14px;
}

input[type="text"]::placeholder { color: rgba(246,243,234,0.42); }

input[type="text"]:focus {
    border-color: rgba(var(--accent-a-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--accent-a-rgb), 0.12);
}

.autocomplete {
    position: relative;
}

.autocomplete__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: min(280px, calc(100vh - 300px));
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 6px;
    border-radius: 14px;
    border: 1px solid rgba(246,243,234,0.22);
    background: rgba(11, 11, 19, 0.98);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-a-rgb), 0.5) rgba(246,243,234,0.08);
}

.autocomplete__list::-webkit-scrollbar {
    width: 8px;
}

.autocomplete__list::-webkit-scrollbar-track {
    background: rgba(246,243,234,0.08);
    border-radius: 4px;
}

.autocomplete__list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
    border-radius: 4px;
    border: 1px solid rgba(246,243,234,0.12);
}

.autocomplete__list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff8c3a, #ff4545);
}

/* Ensure autocomplete stays within modal */
.modal__body .autocomplete__list {
    position: relative;
    top: auto;
    margin-top: 6px;
}

.autocomplete__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 100ms ease;
    border-bottom: 1px solid rgba(246,243,234,0.08);
}

.autocomplete__item:last-child {
    border-bottom: none;
}

.autocomplete__item:hover,
.autocomplete__item--active {
    background: rgba(var(--accent-a-rgb), 0.15);
}

.autocomplete__avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(0,0,0,0.25);
    image-rendering: pixelated;
}

.autocomplete__nick {
    font-weight: 700;
    font-size: 14px;
    color: var(--paper);
}

.autocomplete__nick mark {
    background: rgba(var(--accent-a-rgb), 0.35);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
}

.autocomplete__empty {
    padding: 14px 12px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: rgba(246,243,234,0.55);
}

.results { margin-top: 12px; display: grid; gap: 10px; }

.results__hint,
.results__error {
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(246,243,234,0.25);
    background: rgba(0,0,0,0.2);
}

.results__hintTitle,
.results__errorTitle {
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 6px;
}

.results__error { border-color: rgba(255, 45, 45, 0.45); background: rgba(255, 45, 45, 0.06); }

.results__loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: rgba(246,243,234,0.75);
}

.player-modal {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
}

.player-modal__profile {
    border-radius: var(--r);
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(246,243,234,0.04);
    padding: 14px;
}

.player-modal__avatar {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(0,0,0,0.25);
    image-rendering: pixelated;
}

.player-modal__name {
    margin-top: 10px;
    font-weight: 900;
    font-size: 22px;
    overflow-wrap: anywhere;
}

.player-modal__stats {
    margin-top: 10px;
    display: grid;
    gap: 8px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.player-modal__stat {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px dashed rgba(246,243,234,0.22);
    background: rgba(0,0,0,0.18);
}

.player-modal__tiers {
    border-radius: var(--r);
    border: 1px solid rgba(246,243,234,0.18);
    background: rgba(246,243,234,0.04);
    padding: 14px;
}

.player-modal__tiersTitle {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(246,243,234,0.75);
    margin-bottom: 10px;
}

.player-modal__tiersList { display: grid; gap: 10px; }

.footer {
    /* border-top: 1px solid var(--stroke); */
    padding: 10px 0;
    /* background: rgba(11, 11, 19, 0.55); */
}

.footer__inner {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.footer__mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(246,243,234,0.8);
    font-size: 10px;
    line-height: 1.25;
}

.footer__hint {
    color: rgba(246,243,234,0.55);
    font-size: 12px;
}

code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.95em;
    color: rgba(246,243,234,0.85);
}

/* Back to top button */
.back-to-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 40;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(246,243,234,0.35);
    background: rgba(11, 11, 19, 0.85);
    color: var(--paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    transition: all 180ms ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    transform: translateY(-2px);
    background: rgba(246,243,234,0.12);
    border-color: rgba(246,243,234,0.55);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}

.back-to-top-btn:active {
    transform: translateY(0);
}

.back-to-top-btn i {
    font-size: 16px;
}

/* Discord modal */
.discord-modal__intro {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: rgba(246,243,234,0.7);
    margin-bottom: 10px;
}

.discord-list {
    display: grid;
    gap: 10px;
}

.discord-tab {
    transform: none !important;
}

.discord-item {
    /* Per-item palette (defaults to current theme) */
    --item-accent-a: var(--accent-a);
    --item-accent-b: var(--accent-b);
    --item-accent-a-rgb: var(--accent-a-rgb);
    --item-accent-b-rgb: var(--accent-b-rgb);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--item-accent-a-rgb), 0.35);
    background:
        linear-gradient(135deg, rgba(var(--item-accent-a-rgb), 0.22), rgba(var(--item-accent-b-rgb), 0.16)),
        rgba(0,0,0,0.25);
    color: rgba(246,243,234,0.95);
    text-decoration: none;
    text-align: center;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 4px 12px rgba(var(--item-accent-a-rgb), 0.15);
}

/* Override nav-tab styles for discord buttons */
.discord-tab {
    transform: none !important;
    text-decoration: none !important;
    border: 1px solid rgba(var(--item-accent-a-rgb), 0.35) !important;
    background: linear-gradient(135deg, rgba(var(--item-accent-a-rgb), 0.22), rgba(var(--item-accent-b-rgb), 0.16)) !important;
    box-shadow: 0 4px 12px rgba(var(--item-accent-a-rgb), 0.15) !important;
}

/* Discord button hover effects */
.discord-tab:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(var(--item-accent-a-rgb), 0.65) !important;
    background: linear-gradient(135deg, rgba(var(--item-accent-a-rgb), 0.32), rgba(var(--item-accent-b-rgb), 0.24)) !important;
    box-shadow: 0 8px 24px rgba(var(--item-accent-a-rgb), 0.28) !important;
}

.discord-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--item-accent-a-rgb), 0.65);
    background:
        linear-gradient(135deg, rgba(var(--item-accent-a-rgb), 0.32), rgba(var(--item-accent-b-rgb), 0.24)),
        rgba(246,243,234,0.06);
    box-shadow: 0 8px 24px rgba(var(--item-accent-a-rgb), 0.28);
}

.discord-item__name {
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* Tier-colored discord buttons (match :root[data-mode] palettes) */
.discord-tab.discord-tab--MACE {
    --item-accent-a: #1e3a8a;
    --item-accent-b: #3b82f6;
    --item-accent-a-rgb: 30, 58, 138;
    --item-accent-b-rgb: 59, 130, 246;
}

.discord-tab.discord-tab--CART {
    --item-accent-a: #ff4d4d;
    --item-accent-b: #c81d25;
    --item-accent-a-rgb: 255, 77, 77;
    --item-accent-b-rgb: 200, 29, 37;
}

.discord-tab.discord-tab--AXE {
    --item-accent-a: #0ea5e9;
    --item-accent-b: #0284c7;
    --item-accent-a-rgb: 14, 165, 233;
    --item-accent-b-rgb: 2, 132, 199;
}

.discord-tab.discord-tab--UUHC {
    --item-accent-a: #facc15;
    --item-accent-b: #f59e0b;
    --item-accent-a-rgb: 250, 204, 21;
    --item-accent-b-rgb: 245, 158, 11;
}

.discord-tab.discord-tab--CREEPER {
    --item-accent-a: #22c55e;
    --item-accent-b: #16a34a;
    --item-accent-a-rgb: 34, 197, 94;
    --item-accent-b-rgb: 22, 163, 74;
}

.discord-tab.discord-tab--DSMP {
    --item-accent-a: #14b8a6;
    --item-accent-b: #2dd4bf;
    --item-accent-a-rgb: 20, 184, 166;
    --item-accent-b-rgb: 45, 212, 191;
}

@media (max-width: 860px) {
    .player-modal { grid-template-columns: 1fr; }
    .modal { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}