:root {
            color-scheme: dark;
            --bg: #0c0d12;
            --surface: #171922;
            --surface-deep: #11131a;
            --surface-lift: #20222c;
            --line: #30323e;
            --line-bright: #4a4b56;
            --text: #f7f6f0;
            --muted: #b9b9c3;
            --subtle: #898a96;
            --accent: #ffe13b;
            --accent-dark: #40320e;
            --cyan: #73d9dc;
            --gold: #ffe374;
            --shadow: 0 18px 60px #050b1290;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
        button, input, select { font: inherit; }
        button { cursor: pointer; }
        button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
        .page-wash { pointer-events: none; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 45% at 65% -20%, #65501f55, transparent), radial-gradient(ellipse 40% 35% at -25% 50%, #47391746, transparent); }
        .app-header { height: 78px; border-bottom: 1px solid var(--line); }
        .header-inner { max-width: 1510px; padding: 0 34px; height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
        .brand { display: flex; align-items: center; gap: 13px; min-width: 0; text-decoration: none; color: var(--text); }
        .brandmark { display: grid; place-items: center; background: #ffe13b; border: 1px solid #fff08a; height: 46px; width: 46px; border-radius: 12px; box-shadow: 0 2px 0 #a7870b, 0 0 20px #ffe13b17; flex-shrink: 0; }
        .brandmark svg { height: 44px; width: 44px; display: block; }
        .brandname { font-size: 19px; letter-spacing: -.035em; font-weight: 950; line-height: 1.2; white-space: nowrap; }
        .brandname span { color: var(--accent); }
        
        .top-nav { display: flex; gap: 24px; align-items: center; }
        .nav-link { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 750; }
        .nav-link.active { color: var(--text); }
        .preview-badge { color: var(--accent); font-weight: 780; font-size: 10px; border: 1px solid #78611e; background: #322a12; border-radius: 999px; padding: 7px 12px; letter-spacing: .09em; }
        .container { max-width: 1510px; margin: 0 auto; padding: 42px 34px 80px; }
        .heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 31px; }
        .eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .23em; font-weight: 870; text-transform: uppercase; }
        h1 { font-size: clamp(25px, 3.5vw, 38px); letter-spacing: -.055em; margin: 9px 0 8px; line-height: 1.25; }
        .lead { margin: 0; color: var(--muted); font-size: 13px; }
        .data-pill { color: var(--muted); border: 1px solid var(--line); padding: 10px 13px; border-radius: 11px; background: var(--surface-deep); font-size: 11px; white-space: nowrap; }
        .data-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: 8px; }
        .layout { display: grid; grid-template-columns: minmax(290px, 338px) minmax(0, 1fr); gap: 22px; align-items: start; }
        .panel { border: 1px solid var(--line); background: linear-gradient(158deg, #1b1c24, #12141a 77%); border-radius: 18px; box-shadow: 0 7px 32px #00000020; min-width: 0; }
        .sidebar { padding: 22px; position: sticky; top: 20px; }
        .sidebar h2, .section-title { font-size: 15px; letter-spacing: -.02em; margin: 0; font-weight: 850; }
        .small-description { margin: 6px 0 20px; color: var(--subtle); font-size: 11px; }
        .search-field { display: flex; gap: 11px; align-items: center; border: 1px solid var(--line-bright); border-radius: 12px; padding: 0 12px; background: #101219; height: 48px; transition: border-color .2s; }
        .search-field:focus-within { border-color: var(--accent); }
        .search-field svg { width: 18px; height: 18px; color: var(--subtle); flex-shrink: 0; }
        .search-field input { width: 100%; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; }
        .search-field input::placeholder { color: #767784; }
        .search-meta { margin: 21px 3px 11px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; }
        .search-meta span:last-child { color: var(--subtle); }
        .results { display: flex; flex-direction: column; gap: 6px; max-height: 66vh; overflow: auto; padding-right: 3px; }
        .result { text-align: left; width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px 11px; border-radius: 12px; border: 1px solid transparent; color: var(--text); background: transparent; transition: background .14s, border-color .14s; }
        .result:hover { background: #262833; }
        .result.active { background: #35301c; border-color: #b59728; }
        .avatar { height: 40px; width: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #292831; border: 1px solid #58504b; overflow: hidden; }
        .avatar img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 2px; }
        .result-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 4px; }
        .result-name { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .result-id { font-size: 10px; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .result-chevron { color: var(--subtle); font-size: 18px; }
        .result.active .result-chevron { color: var(--accent); }
        .empty-results { color: var(--subtle); font-size: 12px; text-align: center; padding: 28px 8px; }
        .sidebar-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.75; color: var(--subtle); }
        .main-column { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
        .profile { padding: 26px 28px 22px; overflow: hidden; position: relative; }
        .profile::before { content: ""; position: absolute; pointer-events: none; right: -110px; top: -185px; height: 350px; width: 350px; border-radius: 50%; background: radial-gradient(circle, #b38d2e36, transparent 65%); }
        .profile-upper { display: flex; align-items: center; gap: 16px; position: relative; }
        .large-avatar { height: 74px; width: 74px; flex-shrink: 0; border-radius: 15px; background: linear-gradient(135deg, #423618, #242530); border: 1px solid #695a26; }
        .large-avatar img { padding: 3px; }
        .profile-head { min-width: 0; flex: 1; }
        .profile-head .overline { color: var(--accent); letter-spacing: .14em; font-size: 10px; font-weight: 800; }
        .player-name { margin: 5px 0 4px; font-size: clamp(19px, 2.4vw, 27px); overflow-wrap: anywhere; line-height: 1.25; letter-spacing: -.04em; }
        .player-id { color: var(--subtle); font-size: 11px; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
        .copy-button { display: flex; gap: 7px; align-items: center; background: #262934; color: #eeeeed; border: 1px solid var(--line-bright); border-radius: 9px; padding: 9px 11px; white-space: nowrap; font-size: 11px; font-weight: 750; }
        .copy-button svg { width: 14px; height: 14px; }


        .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 23px; }
        .stat { background: #14151d; border: 1px solid #393a44; padding: 17px 16px 15px; border-radius: 12px; }
        .stat-label { color: var(--muted); font-size: 10px; }
        .stat-value { margin-top: 10px; font-size: clamp(18px, 2vw, 25px); font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .stat-value em { font-size: 11px; font-style: normal; font-weight: 650; color: var(--subtle); margin-left: 4px; letter-spacing: 0; }
        .accent { color: var(--accent); }
        .gold { color: var(--gold); }
        .section { padding: 24px 27px 21px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
        .section-kicker { color: var(--subtle); font-size: 10px; letter-spacing: .1em; font-weight: 750; margin-bottom: 5px; }
        .section-count { color: var(--subtle); font-size: 11px; }
        .filters { display: flex; gap: 8px; flex-wrap: wrap; }
        select { appearance: none; color: #dde7ec; border: 1px solid var(--line-bright); background: #151721; border-radius: 9px; padding: 9px 29px 9px 11px; font-size: 11px; font-weight: 690; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2399a8b6' stroke-width='1.7' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3 3.5-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
        .final-table-wrap { overflow-x: auto; scrollbar-width: thin; }
        .final-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
        .final-table th { color: var(--subtle); font-size: 10px; text-align: left; font-weight: 680; padding: 0 10px 13px; border-bottom: 1px solid var(--line); }
        .final-table th:first-child, .final-table td:first-child { padding-left: 0; }
        .final-table td { padding: 17px 10px; border-bottom: 1px solid #23303c; }
        .final-table tr:last-child td { border-bottom: 0; }
        .season { font-weight: 790; }
        .rule-cell { color: #deddd7; }
        .rank { font-weight: 880; }
        .rank-top { color: var(--gold); }
        .power { font-variant-numeric: tabular-nums; font-weight: 820; }
        .weapon { color: #c1bec0; font-size: 11px; }
        .view-more { display: block; color: var(--accent); font-size: 11px; font-weight: 750; border: none; background: transparent; padding: 15px 0 0; }
        .history-section { padding-bottom: 25px; }
        .plot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
        .metric-title { color: var(--muted); font-size: 11px; }
        .plot-current { font-weight: 920; font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; margin-top: 4px; }
        .plot-wrap { margin: 7px -8px 0 -4px; position: relative; overflow: hidden; }
        #history-chart { display: block; width: 100%; height: auto; min-height: 210px; }
        .plot-tooltip { position: absolute; display: none; pointer-events: none; top: 10px; left: 10px; background: #12131def; color: var(--text); border: 1px solid var(--line-bright); border-radius: 9px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 11px; line-height: 1.7; }
        .observations-heading { display: flex; justify-content: space-between; align-items: center; margin: 19px 0 8px; }
        .observations-heading h3 { font-size: 12px; margin: 0; }
        .obs-row { display: grid; grid-template-columns: minmax(118px, 1.05fr) minmax(58px, .6fr) minmax(60px, .7fr) minmax(130px, 1.2fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid #373740; align-items: center; font-size: 11px; }
        .obs-row:last-child { border: 0; }
        .obs-time { color: var(--muted); white-space: nowrap; }
        .obs-rank { font-weight: 820; }
        .obs-xp { font-variant-numeric: tabular-nums; font-weight: 820; }
        .obs-weapon { color: #c1bec0; text-align: right; }
        .no-data { color: var(--muted); padding: 28px 0; text-align: center; font-size: 12px; }
        .footer { text-align: center; margin-top: 24px; font-size: 10px; color: var(--subtle); line-height: 1.7; }
        @media (max-width: 1100px) {
            .layout { grid-template-columns: 280px minmax(0, 1fr); gap: 14px; }
            .container { padding: 28px 20px 60px; }
            .header-inner { padding: 0 20px; }
            .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .profile { padding: 23px; }
            .section { padding: 23px; }
        }
        @media (max-width: 760px) {
            .app-header { height: 68px; }
            .header-inner { padding: 0 16px; }
            .top-nav { gap: 10px; }
            .nav-link { display: none; }
            .brandmark { width: 37px; height: 37px; }
            .brandname { font-size: 14px; }
            .container { padding: 25px 14px 48px; }
            .heading { margin-bottom: 22px; }
            h1 { font-size: 28px; }
            .lead { font-size: 12px; }
            .data-pill { display: none; }
            .layout { display: flex; flex-direction: column; gap: 16px; }
            .sidebar { position: static; width: 100%; padding: 18px; }
            .sidebar .small-description { margin-bottom: 14px; }
            .results { flex-direction: row; overflow: auto; max-height: none; padding-bottom: 4px; scrollbar-width: thin; }
            .result { min-width: 185px; max-width: 205px; flex-shrink: 0; }
            .result-chevron { display: none; }
            .sidebar-note { display: none; }
            .main-column { width: 100%; gap: 14px; }
            .profile { padding: 20px 18px; }
            .large-avatar { height: 54px; width: 54px; border-radius: 13px; font-size: 22px; }
            .profile-upper { gap: 11px; }
            .player-name { font-size: 21px; }
            .copy-button { font-size: 0; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; }
            .copy-button svg { width: 16px; height: 16px; }
            .stats { gap: 8px; }
            .stat { padding: 14px 13px; }
            .stat-value { font-size: 22px; }
            .section { padding: 20px 17px; }
            .section-header { align-items: flex-start; flex-direction: column; }
            .section-header .filters { width: 100%; }
            #history-chart { min-height: 185px; }
            .obs-row { grid-template-columns: minmax(82px, 1fr) 45px 66px; gap: 8px; }
            .obs-weapon { grid-column: 1 / -1; text-align: left; margin-top: -4px; font-size: 10px; }
        }
        @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
    
        .app-header { background: #13141bdc; backdrop-filter: blur(20px); border-bottom: 1px solid #3b3525; }
        .app-header::after { content: ""; display: block; height: 2px; width: 100%; background: linear-gradient(90deg, #ffe13b, #a47f19 22%, transparent 60%); }
        .eyebrow { letter-spacing: .18em; }
        .panel { background: linear-gradient(154deg, #1c1d26, #12131b 82%); }
        .stat { background: #14151b; }
        .stat:first-child { border-color: #5c4f2b; }

        .rule-cell, .weapon { color: #bdbdc8; }
        .rank-top, .gold { color: #ffe87e; }
        .stat-value.accent { color: #ffe13b; }
        .copy-button:hover, .view-more:hover { filter: brightness(1.12); }
        .result:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .brandname span { color: #ffe13b; }
        .footer { color: #81818e; }
        @media (max-width: 760px) {
            .brandmark { width: 42px; height: 42px; }
            .brandmark svg { width: 40px; height: 40px; }
            .brandname { font-size: 17px; }
            .large-avatar { width: 62px; height: 62px; }
            .preview-badge { padding: 6px 8px; font-size: 9px; }
        }

        .brandmark { overflow: hidden; }
        .profile-head .player-name { margin-top: 0; }











        .season-winter { color: #a9bfff !important; }
        .season-spring { color: #f3a0c6 !important; }
        .season-summer { color: #84d9eb !important; }
        .season-autumn { color: #e9b56d !important; }

        .final-list { display: flex; flex-direction: column; gap: 0; min-width: 0; }
        .final-row { display: grid; grid-template-columns: 54px 54px 32px 38px 42px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 54px; padding: 8px 0; border-bottom: 1px solid #34343d; font-size: 12px; }
        .final-row:last-child { border-bottom: none; }
        .final-season { font-size: 12px; font-weight: 850; letter-spacing: -.01em; white-space: nowrap; }
        .final-rank { font-size: 17px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .final-region { display: flex; align-items: center; justify-content: center; min-width: 0; }
        .final-region.region-p { width: 31px; height: 31px; border-radius: 8px; background: #d5def2; }
        .final-region.region-a { width: 31px; height: 31px; border-radius: 8px; background: #33202d; }
        .final-region img { width: 29px !important; height: 29px !important; max-height: 29px !important; max-width: 29px !important; object-fit: contain; display: block; }
        .final-rule { display: flex; align-items: center; justify-content: center; min-width: 0; }
        .final-rule img { width: 27px !important; height: 27px !important; max-width: 27px !important; max-height: 27px !important; display: block; object-fit: contain; flex-shrink: 0; }
        .final-weapon { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 8px; background: #242630; border: 1px solid #3d3e49; overflow: hidden; }
        .final-weapon img { display: block; width: 30px !important; height: 30px !important; max-width: 30px !important; max-height: 30px !important; object-fit: contain; }
        .final-xp { text-align: right; font-weight: 840; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .final-xp-prefix { color: var(--muted); font-size: 10px; font-weight: 680; margin-right: 4px; }
        .final-list .no-data { grid-column: 1 / -1; }
        @media (max-width: 1100px) {
            .final-row { grid-template-columns: 48px 47px 28px 34px 36px minmax(0, 1fr); gap: 7px; }
        }
        @media (max-width: 760px) {
            .final-row { grid-template-columns: 48px 48px 28px 34px 36px minmax(0, 1fr); gap: 8px; }
            .final-weapon { width: 34px; height: 34px; }
            .final-weapon img { width: 29px !important; height: 29px !important; }

        }
        @media (max-width: 490px) {
            .final-row { grid-template-columns: 43px 42px 23px 27px 29px minmax(0, 1fr); gap: 6px; padding: 7px 0; min-height: 48px; }
            .final-rank { font-size: 15px; }
            .final-region.region-p, .final-region.region-a { width: 25px; height: 25px; }
            .final-region img { width: 23px !important; height: 23px !important; }
            .final-rule img { width: 25px !important; height: 25px !important; }
            .final-weapon { width: 29px; height: 29px; }
            .final-weapon img { width: 26px !important; height: 26px !important; }
            .final-xp { font-size: 11px; }
            .final-xp-prefix { margin-right: 2px; }

        }


        .names-section { margin-top: 20px; }
        .name-history { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
        .history-chip {
            border: 1px solid #41414b;
            background: #222431;
            color: #cad8df;
            border-radius: 7px;
            padding: 7px 10px;
            font-family: inherit;
            font-size: 11px;
            font-weight: 650;
            cursor: pointer;
        }
        .history-chip:hover, .history-chip[aria-expanded="true"] {
            border-color: #e8c63a;
            background: #39311a;
            color: #ffe880;
        }
        .name-details {
            margin-top: 10px;
            border: 1px solid #4d432c;
            border-radius: 11px;
            background: #151720;
            padding: 10px 13px;
        }
        .name-details[hidden] { display: none; }
        .name-period { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 0; }
        .name-period + .name-period { border-top: 1px solid #30313b; margin-top: 6px; padding-top: 11px; }
        .period-season {
            border: 1px solid #343641;
            background: #22252c;
            border-radius: 5px;
            padding: 4px 7px;
            font-size: 11px;
            font-weight: 700;
        }


.brandmark img { width:44px;height:44px;display:block; }
[hidden] { display:none !important; }
#player-detail { min-width:0; }

.site-attribution {
    margin: -48px auto 28px;
    padding: 0 34px;
    max-width: 1510px;
    color: var(--subtle);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}
.site-attribution a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 760px) {
    .site-attribution { padding: 0 16px; }
}


/* Player stats, ranks and XP remain white. */
.stat-value, .final-rank, .final-rank.rank-top, .final-xp, .plot-current {
    color: var(--text);
}
.stat:first-child { border-color: #393a44; }

/* Final standings: rank, season, region, rule, weapon, XP. */
.final-row {
    grid-template-columns: 54px 54px repeat(3, 36px) minmax(0, 1fr);
    column-gap: 11px;
}
.final-row .final-region,
.final-row .final-rule,
.final-row .final-weapon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    justify-self: center;
}
.final-row .final-region img,
.final-row .final-rule img,
.final-row .final-weapon img {
    display: block;
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain;
}
@media (max-width: 1100px) {
    .final-row { grid-template-columns: 47px 48px repeat(3, 34px) minmax(0, 1fr); column-gap: 7px; }
}
@media (max-width: 760px) {
    .copy-button { display: flex; align-items: center; justify-content: center; line-height: 0; }
    .copy-button span { display: none; }
    .copy-button svg { display: block; flex-shrink: 0; }
    .final-row { grid-template-columns: 48px 48px repeat(3, 34px) minmax(0, 1fr); column-gap: 8px; }
    .obs-row {
        grid-template-columns: minmax(0, 1fr) 48px 72px;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 3px;
    }
    .obs-time { grid-column: 1; grid-row: 1; }
    .obs-weapon { grid-column: 1; grid-row: 2; margin-top: 0; }
    .obs-rank { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .obs-xp { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; }
}
@media (max-width: 490px) {
    .final-row { grid-template-columns: 42px 43px repeat(3, 30px) minmax(0, 1fr); column-gap: 7px; }
    .final-row .final-region,
    .final-row .final-rule,
    .final-row .final-weapon { width: 30px; height: 30px; }
    .final-row .final-region img,
    .final-row .final-rule img,
    .final-row .final-weapon img {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }
}

/* Interactive XP history chart. */
#history-chart { cursor: crosshair; touch-action: pan-y; }
#history-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.chart-hint { color: var(--subtle); font-size: 11px; margin: 4px 0 11px; }
.chart-point-details {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 13px 15px;
    margin-top: 9px;
    background: #20222c;
    border: 1px solid #454751;
    border-radius: 11px;
}
.chart-detail-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-detail-values { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.chart-detail-values > span { display: flex; align-items: center; gap: 7px; }
.chart-detail-label { font-size: 11px; color: var(--muted); line-height: 1.3; }
.chart-detail-values strong { color: var(--text); font-size: 18px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.plot-tooltip .chart-tip-time { color: var(--muted); font-size: 11px; }
.plot-tooltip .chart-tip-value { color: var(--text); font-size: 13px; font-weight: 800; white-space: nowrap; }