/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Tokens ─── */
:root {
    --bg:           #1a1814;
    --surface:      #232018;
    --surface2:     #2c2820;
    --border:       #3a3530;
    --accent:       #d4a84b;
    --accent-dim:   #a07c30;
    --text:         #f0ece4;
    --text-muted:   #8a8278;
    --success:      #4caf78;
    --error:        #e05555;
    --rank-gold:    #d4a84b;
    --rank-silver:  #a8a8b0;
    --rank-bronze:  #c08050;

    --font-display: 'Bebas Neue', sans-serif;
    --font-body:    'DM Sans', sans-serif;

    --panel-w: 420px;
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base ─── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

/* Locks background scroll while the profile panel is open, without the
   layout jump that `overflow: hidden` on body alone can cause on iOS.
   The JS sets --scroll-y so the page stays visually in place. */
body.no-scroll {
    position: fixed;
    top: var(--scroll-y, 0);
    left: 0;
    right: 0;
    overflow: hidden;
}

/* Grain overlay */
.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ─── Header ─── */
.site-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    z-index: 10;
}

.back-link {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s;
    padding: 0.5rem 0;
}

.back-link:hover { color: var(--accent); }

.header-logo {
    height: 70px;
    width: auto;
}

/* ─── Main ─── */
.main {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
    position: relative;
    z-index: 1;
}

/* ─── Hero ─── */
.hero {
    padding: 2rem 0 1.5rem;
    text-align: center;
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 14vw, 7rem);
    line-height: 0.9;
    color: var(--text);
    letter-spacing: 0.02em;
}

/* ─── Table wrap ─── */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    overflow: hidden;
}

/* ─── Header row ─── */
.lb-header {
    display: grid;
    grid-template-columns: 2.25rem 1fr 4.5rem 4rem 2.25rem;
    gap: 0.25rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lb-header__rating,
.lb-header__record { text-align: right; }
.lb-header__wins { text-align: center; }

/* ─── Controls Bar ─── */
.controls-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    /* 16px is the iOS Safari auto-zoom threshold — anything smaller
       triggers a forced pinch-zoom on focus. Keeping this at 16px (1rem)
       prevents the zoom from happening at all. */
    padding: 0.7rem 2.25rem 0.7rem 2.1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.search-input::placeholder { color: var(--text-muted); }

.search-input:focus {
    border-color: var(--accent-dim);
    background: var(--surface2);
}

.search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.15s;
}

.search-clear:hover { color: var(--text); }
.search-clear[hidden] { display: none; }

.sort-wrap {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sort-wrap::-webkit-scrollbar { display: none; }

.sort-btn {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
    flex: 0 0 auto;
}

.sort-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
    background: var(--surface2);
}

.sort-btn--active {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(212, 168, 75, 0.08);
}

.lb-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ─── Body ─── */
.lb-body { position: relative; min-height: 120px; }

/* ─── Row ─── */
.lb-row {
    display: grid;
    grid-template-columns: 2.25rem 1fr 4.5rem 4rem 2.25rem;
    gap: 0.25rem;
    align-items: center;
    padding: 0 0.85rem;
    min-height: 60px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s var(--ease);
    animation: rowIn 0.35s var(--ease) both;
    /* Larger, consistent tap target on touch devices */
    touch-action: manipulation;
}

.lb-row:last-child { border-bottom: none; }

.lb-row:hover,
.lb-row:active { background: var(--surface2); }

@keyframes rowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Rank */
.lb-row__rank {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-muted);
}

.lb-row--1 .lb-row__rank { color: var(--rank-gold); }
.lb-row--2 .lb-row__rank { color: var(--rank-silver); }
.lb-row--3 .lb-row__rank { color: var(--rank-bronze); }

/* Name */
.lb-row__name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.5rem;
}

/* Rating */
.lb-row__rating {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: 0.02em;
    text-align: right;
}

/* Record */
.lb-row__record {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
}

/* Trophy */
.lb-row__wins {
    font-size: 0.8rem;
    text-align: center;
    color: var(--text-muted);
}

.lb-row__wins--has { color: var(--accent); font-weight: 700; }

/* ─── Loading ─── */
.lb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
}

.lb-loading__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.2s ease-in-out infinite;
}

.lb-loading__dot:nth-child(2) { animation-delay: 0.2s; }
.lb-loading__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1); }
}

/* ─── Error ─── */
.lb-error {
    padding: 2rem;
    text-align: center;
    color: var(--error);
    font-size: 0.9375rem;
}

.lb-error[hidden] { display: none; }

.retry-btn {
    background: none;
    border: 1px solid var(--error);
    color: var(--error);
    border-radius: 0.375rem;
    padding: 0.4rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background 0.2s;
}

.retry-btn:hover { background: rgba(224, 85, 85, 0.1); }

/* ─── Load More ─── */
.load-more-wrap {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid var(--border);
}

.load-more-wrap[hidden] { display: none; }

.load-more-btn {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: transparent;
    border: 1.5px solid var(--accent-dim);
    border-radius: 0.5rem;
    padding: 0.75rem 2.5rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.load-more-btn:hover {
    background: rgba(212, 168, 75, 0.08);
    border-color: var(--accent);
}

.load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Profile Backdrop ─── */
.profile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    animation: fadeIn 0.25s var(--ease);
}

.profile-backdrop[hidden] { display: none; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Profile Panel ─── */
.profile-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(var(--panel-w), 100vw);
    /* dvh accounts for mobile browser chrome (address bar) collapsing/expanding,
       so the panel never gets cut off behind it. Falls back to vh below. */
    height: 100vh;
    height: 100dvh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 101;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.5rem 1.25rem 3rem;
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
    padding-left: max(1.25rem, calc(28px + env(safe-area-inset-left) + 0.5rem));
    transform: translateX(0);
    animation: slideIn 0.3s var(--ease);
}

.profile-panel[hidden] { display: none; }

@keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Edge close tab — separate fixed element (not inside .profile-panel) so it
   stays full-height and the chevron stays centered regardless of how much
   the panel's content scrolls. */
.profile-edge-close {
    position: fixed;
    top: 0;
    right: min(var(--panel-w), 100vw);
    width: 28px;
    height: 100vh;
    height: 100dvh;
    background: var(--surface2);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 102;
    touch-action: manipulation;
    transition: background 0.15s, width 0.15s;
    animation: slideInEdge 0.3s var(--ease);
}

@keyframes slideInEdge {
    from { transform: translateX(calc(min(var(--panel-w), 100vw) + 28px)); }
    to   { transform: translateX(0); }
}

.profile-edge-close[hidden] { display: none; }

.profile-edge-close:hover,
.profile-edge-close:active {
    background: rgba(212, 168, 75, 0.12);
    width: 34px;
}

.profile-edge-close__chevron {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    transform: translateX(-1px);
}

/* Close button */
.profile-close {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
}

.profile-close:hover { color: var(--text); border-color: var(--text-muted); }

/* Profile header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-top: 0.5rem;
    padding-right: 2.5rem; /* keep clear of close button */
}

.profile-rank-badge {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--text-muted);
    min-width: 2.75rem;
}

.profile-rank-badge[data-rank="1"] { color: var(--rank-gold); }
.profile-rank-badge[data-rank="2"] { color: var(--rank-silver); }
.profile-rank-badge[data-rank="3"] { color: var(--rank-bronze); }

.profile-name {
    font-family: var(--font-display);
    font-size: 1.85rem;
    line-height: 1;
    color: var(--text);
    letter-spacing: 0.03em;
    word-break: break-word;
}

/* Stats grid */
.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.stat-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.8rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1;
    color: var(--accent);
}

.stat-card__label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Peak note */
.profile-peak-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    min-height: 1.2em;
}

/* Chart */
.chart-section { margin-top: 0.5rem; }

.chart-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-bottom: 0.85rem;
}

.chart-wrap {
    position: relative;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.85rem;
    height: 200px;
}

.chart-wrap canvas { width: 100% !important; height: 100% !important; }

.chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.chart-empty[hidden] { display: none; }

/* Match History */
.match-history-section { margin-top: 1.75rem; }

.match-history-loading {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 1.5rem 0;
}

.match-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0.75rem;
}

.match-history-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

.match-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid transparent;
    font-size: 0.85rem;
}

.match-row--win  { border-left-color: #4caf7d; }
.match-row--loss { border-left-color: #e05c5c; }

.match-row__date     { color: var(--text-muted); font-size: 0.75rem; }
.match-row__opponent {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-row__result {
    font-weight: 700;
    font-size: 0.8rem;
    width: 1.3rem;
    text-align: center;
}
.match-row--win  .match-row__result { color: #4caf7d; }
.match-row--loss .match-row__result { color: #e05c5c; }

.match-row__score {
    color: var(--text-muted);
    font-size: 0.8rem;
    min-width: 2.25rem;
    text-align: right;
}

/* ─── Responsive ─── */
@media (min-width: 601px) {
    .controls-bar { flex-wrap: nowrap; }
    .search-wrap { flex: 1 1 auto; }
    .sort-wrap { width: auto; overflow: visible; }
}

@media (max-width: 600px) {
    .site-header { padding: 0.85rem 1rem; }
    .header-logo { height: 30px; }
    .main { padding: 0 0.75rem 3rem; }

    .lb-header,
    .lb-row {
        grid-template-columns: 1.75rem 1fr 3.75rem 3.25rem 1.75rem;
        padding: 0 0.65rem;
        gap: 0.2rem;
    }

    .lb-row { min-height: 54px; }
    .lb-row__rank { font-size: 1.1rem; }
    .lb-row__name { font-size: 0.975rem; }
    .lb-row__rating { font-size: 1.3rem; }
    .lb-row__record,
    .lb-row__wins { font-size: 0.72rem; }

    .profile-stats-grid { grid-template-columns: 1fr 1fr; }
    .hero { padding: 1.5rem 0 1.25rem; }
    .hero__title { font-size: clamp(3rem, 16vw, 4.5rem); }

    .profile-panel {
        width: 100vw;
        border-left: none;
        padding-left: max(calc(28px + 0.85rem), calc(28px + env(safe-area-inset-left) + 0.85rem));
        padding-right: max(1.1rem, env(safe-area-inset-right));
    }

    /* On full-width panels the bar belongs at the screen's left edge,
       not offset by --panel-w (which no longer matches the panel width). */
    .profile-edge-close {
        right: auto;
        left: 0;
    }
}

@media (max-width: 360px) {
    .lb-header,
    .lb-row {
        grid-template-columns: 1.5rem 1fr 3.4rem 2.9rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* ── Unrated players ──────────────────────────────────────────────────────── */
/* Players with 1 or 2 matches appear below every rated player. They have an
   internal provisional rating, but it swings wildly at this stage (it can even
   be negative), so rank and rating are withheld rather than published. The
   dashes are dimmed so a rated row still reads as the stronger signal. */

.lb-row--unrated .lb-row__rating {
    color: var(--text-muted);
    font-size: 1.3rem;
}

.lb-row--unrated .lb-row__rank {
    opacity: 0.6;
}

/* Placeholder in the profile header, where a "#12" badge would normally sit. */
.profile-rank-badge--unranked {
    color: var(--text-muted);
    opacity: 0.7;
}