/* ===== GAME PAGE (scoped) ===== */
    .gp-body {
        padding: 24px 30px 40px;
        background: var(--bg);
    }

    /* trophy icon */
    .gti {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-hi);
        flex-shrink: 0;
        position: relative;
        background: var(--gold);
        color: #1a1306;
    }

        .gti.platinum {
            background: var(--platinum);
            color: #2a2a36;
        }

        .gti.gold {
            background: var(--gold);
            color: #3a2607;
        }

        .gti.silver {
            background: var(--silver);
            color: #2a2a36;
        }

        .gti.bronze {
            background: var(--bronze);
            color: #3a1f08;
        }

        .gti::after {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            box-shadow: inset 0 0 0 2px currentColor;
        }

        .gti.locked {
            background: var(--card-hi);
            border-color: var(--border);
            color: var(--text-4);
        }

            .gti.locked::after {
                box-shadow: inset 0 0 0 2px var(--text-4);
                opacity: .5;
            }

    .gchip {
        font: 400 10px "JetBrains Mono",monospace;
        letter-spacing: .08em;
        color: var(--text-2);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        padding: 4px 11px;
    }

        .gchip.accent {
            color: var(--accent);
            border-color: var(--me-border);
            background: var(--me-bg);
        }

    .gcard {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 20px 22px;
        position: relative;
    }

        .gcard .head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
        }

            .gcard .head h2 {
                font: 700 15px "Inter",sans-serif;
                margin: 0;
                color: var(--text);
                letter-spacing: -.005em;
                display: flex;
                align-items: center;
                gap: 10px;
            }

                .gcard .head h2 .pill {
                    font: 500 9.5px "JetBrains Mono",monospace;
                    letter-spacing: .1em;
                    color: var(--text-3);
                    background: var(--card-hi);
                    border: 1px solid var(--border);
                    border-radius: var(--r-pill);
                    padding: 3px 8px;
                }

            .gcard .head .more {
                font: 500 12px "Inter",sans-serif;
                color: var(--text-3);
                text-decoration: none;
            }

                .gcard .head .more:hover {
                    color: var(--text);
                }

    .seg {
        height: 32px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        padding: 3px;
        background: var(--card-hi);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
    }

        .seg button {
            height: 100%;
            box-sizing: border-box;
            font: 500 10.5px "JetBrains Mono",monospace;
            letter-spacing: .06em;
            padding: 0 12px;
            background: transparent;
            border: none;
            color: var(--text-3);
            border-radius: var(--r-pill);
            cursor: pointer;
            transition: .15s;
        }

            .seg button:hover {
                color: var(--text);
            }

            .seg button.on {
                background: var(--bg);
                color: var(--text);
            }

    /* group filter select */
    .group-sel, .sort-select {
        height: 32px;
        box-sizing: border-box;
        font: 500 10.5px "JetBrains Mono",monospace;
        letter-spacing: .06em;
        color: var(--text-2);
        background: var(--card-hi);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        padding: 6px 30px 6px 13px;
        cursor: pointer;
        transition: .15s;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%238d8d99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
    }

        .group-sel:hover, .sort-select:hover {
            color: var(--text);
            border-color: var(--border-hi);
        }

        .group-sel:focus, .sort-select:focus {
            border-color: var(--accent);
        }

        .group-sel option, .sort-select option {
            background: var(--surface);
            color: var(--text);
        }

    /* trophy list toolbar: title row + tools row (prevents wrap onto 2 lines) */
    .head-stack {
        margin-bottom: 16px;
    }

        .gcard .head-stack .head {
            margin-bottom: 12px;
        }

    .head-tools-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

        .head-tools-row .head-tools {
            margin: 0;
        }

    /* ===== GAME HERO ===== */
    .ghero {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 28px;
        align-items: stretch;
        background: radial-gradient(ellipse 700px 360px at 88% 8%, var(--me-bg), transparent), linear-gradient(135deg, var(--card) 0%, var(--card-hi) 100%);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px 30px;
        margin-bottom: 18px;
        position: relative;
        overflow: hidden;
    }
    /* corner ribbon: platinum / 100% */
    .corner-ribbon-wrap {
        position: absolute;
        top: 0;
        right: 0;
        width: 180px;
        height: 180px;
        overflow: hidden;
        pointer-events: none;
        z-index: 2;
    }

    .corner-ribbon {
        position: absolute;
        top: 41px;
        right: -50px;
        width: 220px;
        transform: rotate(45deg);
        text-align: center;
        border-radius: 2px;
        padding: 10px 0;
        font: 800 14px "JetBrains Mono",monospace;
        letter-spacing: .16em;
        box-shadow: 0 8px 18px -8px rgba(20,14,6,.4), inset 0 1px 0 rgba(255,255,255,.35);
    }

        .corner-ribbon.rb-plat {
            background: linear-gradient(120deg, #e2e5ee 0%, #f4f5fa 20%, #b9c0d4 40%, #f8f9fc 55%, #aab0c4 72%, #eef0f6 88%, #d0d4e2 100%);
            background-size: 220% 100%;
            color: #20222b;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            animation: diamondDrift 12s ease-in-out infinite alternate;
        }

        .corner-ribbon.rb-100 {
            background: linear-gradient(120deg, #ffb088 0%, #ffcaa8 20%, #e8622a 40%, #ffd2b0 55%, #d8551e 72%, #ffb88c 88%, #e8702e 100%);
            background-size: 220% 100%;
            color: #2a0f04;
            text-shadow: 0 1px 0 rgba(255,255,255,.35);
            animation: diamondDrift 12s ease-in-out infinite alternate;
        }

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

        100% {
            background-position: 100% 50%;
        }
    }

    .corner-ribbon .spark {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 5px 1.5px rgba(255,255,255,.95);
        opacity: 0;
        animation: twinkle 3s ease-in-out infinite;
    }

    .corner-ribbon.rb-plat .spark {
        box-shadow: 0 0 5px 1.5px rgba(90,100,140,.7);
    }

    .corner-ribbon .spark.s1 {
        top: 20%;
        left: 16%;
        animation-delay: 0s;
    }

    .corner-ribbon .spark.s2 {
        top: 60%;
        left: 30%;
        animation-delay: .7s;
        animation-duration: 2.4s;
    }

    .corner-ribbon .spark.s3 {
        top: 35%;
        left: 50%;
        animation-delay: 1.4s;
        animation-duration: 3.4s;
    }

    .corner-ribbon .spark.s4 {
        top: 70%;
        left: 65%;
        animation-delay: .3s;
        animation-duration: 2.8s;
    }

    .corner-ribbon .spark.s5 {
        top: 25%;
        left: 82%;
        animation-delay: 1.9s;
        animation-duration: 2.6s;
    }

    .corner-ribbon .spark.s6 {
        top: 55%;
        left: 92%;
        animation-delay: 1s;
        animation-duration: 3.2s;
    }

    @keyframes twinkle {
        0%, 100% {
            opacity: 0;
            transform: scale(.3);
        }

        50% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .corner-ribbon.rb-plat, .corner-ribbon.rb-100 {
            animation: none;
        }

        .corner-ribbon .spark {
            animation: none;
            opacity: 0;
        }
    }

    [data-theme="light"] .corner-ribbon {
        box-shadow: 0 6px 14px -6px rgba(60,40,20,.22), inset 0 1px 0 rgba(255,255,255,.5);
    }

        [data-theme="light"] .corner-ribbon.rb-plat {
            color: #3a3a42;
        }

    .ghero .cover-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .ghero .cover {
        width: 240px;
        height: 240px;
        display: block;
        border-radius: 10px;
        object-fit: cover;
        background: var(--card-hi);
        box-shadow: var(--shadow,0 30px 60px -20px rgba(0,0,0,.6));
    }

    .ghero .platbadge {
        position: absolute;
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        background: var(--surface);
        border: 1px solid var(--border-hi);
        border-radius: var(--r-pill);
        padding: 6px 14px;
        font: 400 10.5px "JetBrains Mono",monospace;
        letter-spacing: .06em;
        color: var(--text-2);
        box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
    }

        .ghero .platbadge b {
            color: var(--text);
            font-weight: 700;
        }

    .ghero .ginfo {
        min-width: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .ghero .gtop {
        padding-right: 150px;
    }

    .ghero .gplats {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    /* Метка платформы — короткий текстовый чип «PS4»/«PS5». Он же переключатель версий:
       текущая платформа залита, соседние приглушены и ведут на свою главную версию. */
    .plabel {
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 12px;
        border-radius: 7px;
        font: 700 13px "Space Grotesk",sans-serif;
        letter-spacing: .005em;
        line-height: 1;
        background: linear-gradient(180deg,#0a64d6,#0747a8);
        color: #fff;
        border: 1px solid rgba(255,255,255,.16);
        box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
    }

    a.plabel {
        text-decoration: none;
        background: linear-gradient(180deg,var(--card-hi),var(--card));
        color: var(--text-2);
        border-color: var(--border-hi);
        box-shadow: none;
        transition: .15s;
    }

        a.plabel:hover {
            color: var(--text);
            border-color: var(--accent);
        }

    .ghero h1 {
        font: 800 38px "Inter",sans-serif;
        letter-spacing: -.025em;
        line-height: 1.02;
        margin: 0 0 8px;
    }

    .tally {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    /* Выбор версии внутри платформы: части сборника (Crash 1/2/3 — все PS4) и региональные
       наборы трофеев. Метки платформ их не различают, поэтому здесь обычный селект. */
    .vsel {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px;
    }

        .vsel label {
            font: 700 10px "Space Grotesk",sans-serif;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--text-3);
        }

        .vsel select {
            max-width: min(420px,100%);
            height: 30px;
            padding: 0 8px;
            border-radius: 7px;
            border: 1px solid var(--border-hi);
            background: var(--card);
            color: var(--text);
            font: 600 12.5px "Inter",sans-serif;
            cursor: pointer;
        }

            .vsel select:hover {
                border-color: var(--accent);
            }

    .pill-t {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 13px 6px 8px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        font: 400 11.5px "JetBrains Mono",monospace;
        color: var(--text-2);
        letter-spacing: .02em;
    }

        .pill-t b {
            color: var(--text);
            font-weight: 700;
            font-size: 13px;
        }

        .pill-t .d {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid var(--border-hi);
        }

            .pill-t .d.platinum {
                background: var(--platinum-ink);
            }

            .pill-t .d.gold {
                background: var(--gold);
            }

            .pill-t .d.silver {
                background: var(--silver-ink);
            }

            .pill-t .d.bronze {
                background: var(--bronze);
            }

        .pill-t .total {
            color: var(--text-3);
        }

    .ghero .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: auto;
    }

    /* personal progress strip */
    .myprog {
        margin-top: auto;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 20px;
        align-items: center;
        background: var(--card);
        border: 1px solid var(--me-border);
        border-radius: var(--r-md);
        padding: 16px 20px;
        box-shadow: 0 0 0 3px var(--me-bg);
    }

        .myprog .mp-ring {
            position: relative;
            width: 62px;
            height: 62px;
            flex-shrink: 0;
        }

            .myprog .mp-ring .rg {
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: conic-gradient(var(--accent) 0% var(--p,0%), var(--card-hi) var(--p,0%) 100%);
                -webkit-mask: radial-gradient(transparent 24px,#000 25px);
                mask: radial-gradient(transparent 24px,#000 25px);
            }

            .myprog .mp-ring .pc {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font: 800 15px "Inter",sans-serif;
                letter-spacing: -.02em;
            }

        .myprog .mp-info {
            min-width: 0;
        }

        .myprog .mp-lbl {
            font: 400 10px "JetBrains Mono",monospace;
            color: var(--accent);
            letter-spacing: .12em;
            margin-bottom: 5px;
        }

        .myprog .mp-line {
            font: 600 14px "Inter",sans-serif;
            margin-bottom: 9px;
            color: var(--text);
        }

            .myprog .mp-line b {
                color: var(--accent);
            }

        .myprog .mp-counts {
            display: flex;
            gap: 14px;
            font: 400 10.5px "JetBrains Mono",monospace;
            color: var(--text-3);
            letter-spacing: .04em;
            flex-wrap: wrap;
        }

            .myprog .mp-counts span b {
                color: var(--text-2);
                font-weight: 600;
            }

        .myprog .mp-right {
            text-align: right;
            font: 400 10.5px "JetBrains Mono",monospace;
            color: var(--text-3);
            letter-spacing: .04em;
            line-height: 1.5;
        }

            .myprog .mp-right b {
                color: var(--text);
                font-weight: 700;
                font-size: 18px;
                font-family: "Inter",sans-serif;
                letter-spacing: -.01em;
            }

    /* stat tiles */
    .stat-tiles {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 14px;
        margin-bottom: 18px;
    }

    .stat-tile {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 18px 20px;
    }

        .stat-tile b {
            display: block;
            font: 800 26px "Inter",sans-serif;
            letter-spacing: -.02em;
            line-height: 1;
        }

            .stat-tile b.accent {
                color: var(--accent);
            }

        .stat-tile small {
            display: block;
            font: 400 9.5px "JetBrains Mono",monospace;
            color: var(--text-3);
            letter-spacing: .1em;
            margin-top: 9px;
        }

    /* layout */
    .main-grid {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: 20px;
        align-items: start;
    }

    .stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* trophy list */
    .tl-groups {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .tl-group > .gh {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

        .tl-group > .gh .gt {
            font: 700 14px "Inter",sans-serif;
            letter-spacing: -.005em;
        }

        .tl-group > .gh .gc {
            font: 400 10px "JetBrains Mono",monospace;
            color: var(--text-3);
            letter-spacing: .08em;
            background: var(--card-hi);
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            padding: 3px 9px;
        }

        .tl-group > .gh .dlc {
            color: var(--accent);
            border-color: var(--me-border);
            background: var(--me-bg);
        }

        .tl-group > .gh .ln {
            flex: 1;
            height: 1px;
            background: var(--border);
        }

    .trow {
        display: grid;
        grid-template-columns: 46px 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 13px 14px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--card);
        cursor: pointer;
        transition: border-color .15s, background .15s;
    }

        .trow + .trow {
            margin-top: 8px;
        }

        .trow:hover {
            border-color: var(--border-hi);
        }

        .trow.earned {
            border-left: 3px solid var(--accent);
            padding-left: 11px;
        }

        .trow.type-platinum {
            background: color-mix(in srgb, var(--platinum) 5%, var(--card));
        }

        .trow.type-gold {
            background: color-mix(in srgb, var(--gold) 6%, var(--card));
        }

        .trow.type-silver {
            background: color-mix(in srgb, var(--silver) 5%, var(--card));
        }

        .trow.type-bronze {
            background: color-mix(in srgb, var(--bronze) 7%, var(--card));
        }

        .trow.type-platinum.earned {
            border-left-color: var(--platinum);
        }

        .trow.type-gold.earned {
            border-left-color: var(--gold);
        }

        .trow.type-silver.earned {
            border-left-color: var(--silver);
        }

        .trow.type-bronze.earned {
            border-left-color: var(--bronze);
        }

        .trow .ticon {
            width: 46px;
            height: 46px;
            border-radius: 8px;
            object-fit: cover;
            background: var(--card-hi);
            display: block;
        }

        .trow .tx {
            min-width: 0;
        }

        .trow .tn {
            font: 600 14px "Inter",sans-serif;
            letter-spacing: -.005em;
            line-height: 1.25;
            display: flex;
            align-items: center;
            gap: 9px;
        }

            .trow .tn .check {
                width: 15px;
                height: 15px;
                flex-shrink: 0;
                color: var(--accent);
            }

        .trow .td {
            font: 400 12px "Inter",sans-serif;
            color: var(--text-3);
            margin-top: 3px;
            line-height: 1.4;
        }

        .trow.secret .td {
            font-style: italic;
            color: var(--text-4);
        }

        .trow .tr-right {
            display: flex;
            align-items: center;
            gap: 16px;
            text-align: right;
        }

        .trow .rare {
            font: 700 14px "JetBrains Mono",monospace;
            letter-spacing: .02em;
            line-height: 1.1;
            min-width: 54px;
        }

            .trow .rare small {
                display: block;
                font-size: 8.5px;
                font-weight: 500;
                letter-spacing: .1em;
                margin-top: 3px;
            }

            .trow .rare.ultra {
                color: var(--accent);
            }

                .trow .rare.ultra small {
                    color: var(--accent-2);
                }

            .trow .rare.rare-c {
                color: var(--platinum-ink);
            }

                .trow .rare.rare-c small {
                    color: var(--text-3);
                }

            .trow .rare.common {
                color: var(--text-3);
            }

                .trow .rare.common small {
                    color: var(--text-4);
                }

        .trow .chev {
            color: var(--text-4);
            font: 400 11px "JetBrains Mono",monospace;
            transition: transform .2s;
        }

        .trow.open .chev {
            transform: rotate(90deg);
        }

    .tr-detail {
        display: none;
        grid-column: 1 / -1;
        margin-top: 2px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }

    .trow.open .tr-detail {
        display: block;
    }

    .tr-detail .dd {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 14px;
    }

        .tr-detail .dd .di small {
            display: block;
            font: 400 9px "JetBrains Mono",monospace;
            color: var(--text-4);
            letter-spacing: .1em;
            margin-bottom: 4px;
        }

        .tr-detail .dd .di b {
            font: 700 14px "Inter",sans-serif;
            letter-spacing: -.01em;
        }

            .tr-detail .dd .di b.earned-c {
                color: var(--accent);
            }

    /* per-game leaderboard */
    .glb {
        display: flex;
        flex-direction: column;
    }

        .glb .lr {
            display: grid;
            grid-template-columns: 26px 30px 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 9px 8px;
            border-radius: var(--r-sm);
        }

            /* лента без нумерации (последние платины) — колонки места нет */
            .glb.no-rank .lr {
                grid-template-columns: 30px 1fr auto;
            }

            .glb .lr + .lr {
                margin-top: 2px;
            }

            .glb .lr.me {
                background: var(--me-bg);
                border: 1px solid var(--me-border);
            }

            /* строки-ссылки на профиль игрока */
            .glb a.lr {
                color: inherit;
                text-decoration: none;
                cursor: pointer;
                transition: background .12s;
            }

                .glb a.lr:hover {
                    background: var(--card-hi);
                }

        .glb .rank {
            font: 600 12.5px "JetBrains Mono",monospace;
            color: var(--text-3);
            text-align: center;
        }

            .glb .rank.gold {
                color: var(--gold);
            }

            .glb .rank.silver {
                color: var(--silver);
            }

            .glb .rank.bronze {
                color: var(--bronze);
            }

        .glb .av {
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font: 700 11.5px "Inter",sans-serif;
            color: #fff;
            background: linear-gradient(135deg,#5a6072,#3a3f4c);
        }

            /* аватар кладём поверх буквы — если картинка не загрузилась, останется инициал */
            .glb .av img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .glb .av.a1 { background: linear-gradient(135deg,#4a7bc8,#2a4b88); }
            .glb .av.a2 { background: linear-gradient(135deg,#c84a8b,#882a5b); }
            .glb .av.a3 { background: linear-gradient(135deg,#6bc84a,#2a882a); }
            .glb .av.a4 { background: linear-gradient(135deg,#c8954a,#884b1a); }
            .glb .av.a5 { background: linear-gradient(135deg,#8b4ac8,#5b2a88); }

            .glb .av.me {
                background: linear-gradient(135deg,var(--accent),var(--accent-2));
            }

        .glb .nm {
            font: 600 13.5px "Inter",sans-serif;
        }

            .glb .nm small {
                font: 400 9px "JetBrains Mono",monospace;
                color: var(--text-3);
                letter-spacing: .06em;
                margin-left: 7px;
            }

        .glb .time {
            font: 600 13px "JetBrains Mono",monospace;
            text-align: right;
            line-height: 1.1;
        }

        .glb .empty {
            font: 400 12.5px "Inter",sans-serif;
            color: var(--text-3);
            padding: 14px 4px;
            text-align: center;
        }

    /* rarity distribution */
    .rdist {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

        .rdist .rrow {
            display: grid;
            grid-template-columns: 88px 1fr 44px;
            gap: 12px;
            align-items: center;
        }

        .rdist .rlbl {
            display: flex;
            align-items: center;
            gap: 8px;
            font: 400 10.5px "JetBrains Mono",monospace;
            color: var(--text-2);
            letter-spacing: .04em;
        }

            .rdist .rlbl .d {
                width: 11px;
                height: 11px;
                border-radius: 50%;
                border: 1px solid var(--border-hi);
            }

                .rdist .rlbl .d.platinum {
                    background: var(--platinum-ink);
                }

                .rdist .rlbl .d.gold {
                    background: var(--gold);
                }

                .rdist .rlbl .d.silver {
                    background: var(--silver-ink);
                }

                .rdist .rlbl .d.bronze {
                    background: var(--bronze);
                }

        .rdist .rbar {
            height: 8px;
            background: var(--card-hi);
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            overflow: hidden;
        }

            .rdist .rbar > div {
                height: 100%;
            }

                .rdist .rbar > div.platinum {
                    background: var(--platinum);
                }

                .rdist .rbar > div.gold {
                    background: var(--gold);
                }

                .rdist .rbar > div.silver {
                    background: var(--silver);
                }

                .rdist .rbar > div.bronze {
                    background: var(--bronze);
                }

        .rdist .rval {
            font: 600 12px "JetBrains Mono",monospace;
            text-align: right;
            color: var(--text-2);
        }

    /* horizontal count grid (guest — no earned data to bar-chart) */
    .rgrid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 10px;
    }

    .rg-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        padding: 14px 6px;
        background: var(--card-hi);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
    }

        .rg-cell b {
            font: 800 24px "Inter",sans-serif;
            letter-spacing: -.02em;
            color: var(--text);
        }

            .rg-cell b.platinum {
                color: var(--platinum-ink);
            }

            .rg-cell b.gold {
                color: var(--gold);
            }

            .rg-cell b.silver {
                color: var(--silver-ink);
            }

            .rg-cell b.bronze {
                color: var(--bronze);
            }

        .rg-cell small {
            display: flex;
            align-items: center;
            gap: 5px;
            font: 400 9.5px "JetBrains Mono",monospace;
            letter-spacing: .06em;
            color: var(--text-3);
        }

            .rg-cell small .d {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }

                .rg-cell small .d.platinum {
                    background: var(--platinum-ink);
                }

                .rg-cell small .d.gold {
                    background: var(--gold);
                }

                .rg-cell small .d.silver {
                    background: var(--silver-ink);
                }

                .rg-cell small .d.bronze {
                    background: var(--bronze);
                }

    .rarest {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
    }

        .rarest .ticon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            object-fit: cover;
            background: var(--card-hi);
            display: block;
            flex-shrink: 0;
        }

        .rarest.earned .ticon, .rarest.earned .gti {
            box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--accent);
        }

        .rarest .info {
            min-width: 0;
        }

        .rarest .rl {
            font: 400 9px "JetBrains Mono",monospace;
            color: var(--text-4);
            letter-spacing: .12em;
            margin-bottom: 4px;
        }

        .rarest .rn {
            font: 700 14px "Inter",sans-serif;
            letter-spacing: -.01em;
            display: flex;
            align-items: center;
            gap: 7px;
        }

            .rarest .rn .check {
                width: 14px;
                height: 14px;
                flex-shrink: 0;
                color: var(--accent);
            }

        .rarest .rp {
            margin-left: auto;
            text-align: right;
            font: 700 17px "JetBrains Mono",monospace;
            color: var(--accent);
        }

            .rarest .rp small {
                display: block;
                font-size: 8.5px;
                color: var(--text-3);
                font-weight: 500;
                letter-spacing: .08em;
                margin-top: 2px;
            }

    @media (max-width:1100px) {
        /* одна колонка; minmax(0,1fr) + min-width:0 на детях, иначе min-width:auto грид-элемента
           (широкая карточка трофеев в залогиненном виде — с колонкой даты) распирает трек шире экрана */
        .main-grid {
            grid-template-columns: minmax(0, 1fr)
        }

        .main-grid > * {
            min-width: 0
        }

        .stat-tiles {
            grid-template-columns: 1fr 1fr
        }
    }

    @media (max-width:820px) {
        .gp-body {
            padding: 18px 14px 24px
        }

        .ghero {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 22px 18px
        }

            .ghero .cover {
                width: 180px;
                height: 180px;
                margin: 0 auto
            }

            .ghero .ginfo {
                height: auto
            }

            .ghero .gtop {
                padding-right: 0
            }

        .myprog {
            margin-top: 18px
        }

        .corner-ribbon-wrap {
            width: 130px;
            height: 130px
        }

        .corner-ribbon {
            top: 30px;
            right: -42px;
            width: 170px;
            font-size: 10px;
            padding: 6px 0
        }

        .ghero .cover-wrap {
            display: flex;
            justify-content: center
        }

        .ghero h1 {
            font-size: 30px
        }

        .myprog {
            grid-template-columns: auto 1fr;
            gap: 14px
        }

            .myprog .mp-right {
                display: none
            }

        .stat-tiles {
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .stat-tile {
            padding: 14px 16px
        }

            .stat-tile b {
                font-size: 22px
            }

        .trow {
            grid-template-columns: 40px 1fr auto;
            padding: 11px 12px;
            gap: 11px
        }

            .trow .tr-right {
                gap: 10px
            }

            .trow .chev {
                display: none
            }

        .tr-detail .dd {
            grid-template-columns: 1fr 1fr
        }
    }

    @media (max-width:520px) {
        .ghero h1 {
            font-size: 25px
        }

        .tr-detail .dd {
            grid-template-columns: 1fr
        }
    }

    /* ===== PLAYER RATING (compact, right column) ===== */
    .rate-mini .rm-top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
    }

    .rate-mini .rm-score {
        display: flex;
        align-items: baseline;
        gap: 3px;
        flex-shrink: 0;
    }

        .rate-mini .rm-score b {
            font: 800 42px "Inter",sans-serif;
            letter-spacing: -.03em;
            line-height: .85;
            color: var(--text);
        }

            .rate-mini .rm-score b.no-rating {
                font-size: 19px;
                letter-spacing: -.01em;
                color: var(--text-3);
            }

        .rate-mini .rm-score small {
            font: 600 16px "Inter",sans-serif;
            color: var(--text-3);
        }

    .rate-mini .rm-meta {
        min-width: 0;
        flex: 1;
    }

    .rate-mini .scorebar {
        position: relative;
        height: 10px;
        border-radius: var(--r-pill);
        background: var(--card-hi);
        border: 1px solid var(--border);
        overflow: hidden;
        margin-bottom: 8px;
    }

        .rate-mini .scorebar > .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--gold), #ffd778);
        }

    .rate-mini .rm-count {
        font: 400 10px "JetBrains Mono",monospace;
        color: var(--text-3);
        letter-spacing: .06em;
    }

        .rate-mini .rm-count b {
            color: var(--text-2);
            font-weight: 600;
        }

    .rate-mini .rm-mine {
        padding-top: 15px;
        margin-top: 3px;
        border-top: 1px solid var(--border);
    }

    .rate-mini .myrate-lbl {
        display: block;
        font: 400 9.5px "JetBrains Mono",monospace;
        color: var(--accent);
        letter-spacing: .12em;
        margin-bottom: 10px;
    }

    .rate-mini .guest-cta {
        font: 400 12.5px "Inter",sans-serif;
        color: var(--text-3);
        line-height: 1.45;
    }

        .rate-mini .guest-cta button {
            background: none;
            border: none;
            padding: 0;
            color: var(--accent);
            font: inherit;
            font-weight: 600;
            cursor: pointer;
        }

            .rate-mini .guest-cta button:hover {
                text-decoration: underline;
            }

    .rate10 {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

        .rate10 button {
            width: 30px;
            height: 30px;
            border-radius: 7px;
            border: 1px solid var(--border);
            background: var(--card-hi);
            font: 600 12.5px "JetBrains Mono",monospace;
            color: var(--text-3);
            cursor: pointer;
            transition: .12s;
            padding: 0;
        }

            .rate10 button:hover {
                border-color: var(--border-hi);
                color: var(--text);
            }

            .rate10 button.hv {
                border-color: var(--accent);
                color: var(--accent);
            }

            .rate10 button.on {
                background: var(--accent);
                border-color: var(--accent);
                color: #fff;
            }

    .rate-mini .mine-note {
        display: block;
        font: 400 9px "JetBrains Mono",monospace;
        color: var(--text-4);
        letter-spacing: .06em;
        margin-top: 9px;
    }

    /* ===== GUIDE FLAG + SECRET SPOILERS ===== */
    .guide-flag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        margin-top: 8px;
        font: 500 9px "JetBrains Mono",monospace;
        letter-spacing: .1em;
        color: var(--text-3);
        background: var(--card-hi);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        padding: 4px 9px 4px 7px;
    }

        .guide-flag svg {
            width: 11px;
            height: 11px;
            color: var(--accent);
        }

    .trow.open .guide-flag {
        opacity: .4;
    }

    /* ===== ЛИЧНЫЙ ПРОГРЕСС ПО ТРОФЕЮ (залогинен + трофей со счётчиком + ещё не выбит) ===== */
    .tprog-bar {
        display: block;
        height: 7px;
        background: var(--card-hi);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        overflow: hidden;
    }

        .tprog-bar > span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            border-radius: var(--r-pill);
        }

    .trow .tprog {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-top: 10px;
        max-width: 380px;
    }

        .trow .tprog .tprog-bar {
            flex: 1;
        }

    .trow .tprog-val {
        font: 700 10.5px "JetBrains Mono",monospace;
        color: var(--accent);
        letter-spacing: .04em;
        white-space: nowrap;
    }

        .trow .tprog-val small {
            font-weight: 500;
            color: var(--text-3);
            letter-spacing: .06em;
        }

    .tr-detail .dprog {
        margin-bottom: 14px;
    }

        .tr-detail .dprog .dprog-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .tr-detail .dprog .dl {
            font: 400 9px "JetBrains Mono",monospace;
            color: var(--accent);
            letter-spacing: .12em;
        }

        .tr-detail .dprog .dv {
            font: 700 11px "JetBrains Mono",monospace;
            color: var(--text);
            letter-spacing: .04em;
        }

        .tr-detail .dprog .tprog-bar {
            height: 8px;
        }

    .head-tools {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .spoiler-tgl {
        height: 32px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        font: 500 10.5px "JetBrains Mono",monospace;
        letter-spacing: .06em;
        padding: 0 13px;
        border-radius: var(--r-pill);
        border: 1px solid var(--border);
        background: var(--card-hi);
        color: var(--text-3);
        transition: .15s;
    }

        .spoiler-tgl:hover {
            color: var(--text);
            border-color: var(--border-hi);
        }

        .spoiler-tgl .eye-on {
            display: none;
        }

        .spoiler-tgl[aria-pressed="true"] {
            background: var(--me-bg);
            border-color: var(--me-border);
            color: var(--accent);
        }

            .spoiler-tgl[aria-pressed="true"] .eye-off {
                display: none;
            }

            .spoiler-tgl[aria-pressed="true"] .eye-on {
                display: block;
            }

    .secret-tag {
        font-style: italic;
    }

    .tn .secret-tag {
        color: var(--text-3);
        font-weight: 500;
        font-style: normal;
        opacity: .85;
    }

    .reveal {
        display: none;
    }

    .spoilers-on .secret .secret-tag {
        display: none;
    }

    .spoilers-on .secret .reveal {
        display: inline;
    }

    .spoilers-on .trow.secret .td {
        font-style: normal;
        color: var(--text-3);
    }

    /* trophy tips */
    .tips {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }

    .tips-head {
        font: 600 12px "Inter",sans-serif;
        color: var(--text-2);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .tips-head .tips-count {
            font: 500 9.5px "JetBrains Mono",monospace;
            color: var(--text-3);
            background: var(--card-hi);
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            padding: 2px 8px;
        }

    .tips-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tip {
        background: var(--card-hi);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        padding: 10px 12px;
    }

        .tip.mine {
            border-color: var(--me-border);
            background: var(--me-bg);
        }

    .tip-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
        font: 500 11px "Inter",sans-serif;
    }

        .tip-meta .who {
            color: var(--text);
            font-weight: 600;
        }

            .tip-meta .who.me {
                color: var(--accent);
            }

        .tip-meta .when {
            font: 400 9.5px "JetBrains Mono",monospace;
            color: var(--text-4);
            letter-spacing: .04em;
        }

        .tip-meta .tip-actions {
            margin-left: auto;
            display: flex;
            gap: 12px;
        }

            .tip-meta .tip-actions button {
                background: none;
                border: none;
                padding: 0;
                cursor: pointer;
                font: 500 10px "JetBrains Mono",monospace;
                letter-spacing: .04em;
                color: var(--text-3);
                transition: color .15s;
            }

            .tip-meta .tip-actions .tip-edit:hover {
                color: var(--accent);
            }

            .tip-meta .tip-actions .tip-delete:hover {
                color: #ff6a6a;
            }

    .tip-edit-cancel {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font: 500 11px "Inter",sans-serif;
        color: var(--text-3);
    }

        .tip-edit-cancel:hover {
            color: var(--text);
        }

    .tip-edit-form {
        margin-top: 10px;
    }

    .tip-text {
        font: 400 12.5px "Inter",sans-serif;
        color: var(--text-2);
        line-height: 1.45;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .tips-empty, .tips-loading {
        font: 400 12px "Inter",sans-serif;
        color: var(--text-3);
        padding: 4px 0;
    }

    .tips-form {
        margin-top: 12px;
    }

        .tips-form textarea {
            width: 100%;
            box-sizing: border-box;
            min-height: 64px;
            resize: vertical;
            padding: 9px 11px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            color: var(--text);
            font: 400 12.5px "Inter",sans-serif;
            outline: none;
        }

            .tips-form textarea:focus {
                border-color: var(--accent);
            }

    .tips-form-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
    }

    .tips-form .muted {
        font: 400 10px "JetBrains Mono",monospace;
        color: var(--text-4);
    }

    .tips-login {
        font: 400 12px "Inter",sans-serif;
        color: var(--text-3);
        margin-top: 10px;
    }

    .tips-locked {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
        font: 400 11px "JetBrains Mono",monospace;
        letter-spacing: .02em;
        color: var(--text-4);
    }

        .tips-locked svg {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
            opacity: .8;
        }

    /* confirm modal — тот же компонент, что на странице профиля (отвязка аккаунта) */
    .ac-modal-bg { position:fixed; inset:0; z-index:1100; background:rgba(8,8,12,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
        display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .18s; }
    [data-theme="light"] .ac-modal-bg { background:rgba(40,30,20,.35); }
    .ac-modal-bg.open { opacity:1; pointer-events:auto; }
    .ac-modal { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
        box-shadow:var(--shadow,0 40px 80px -20px rgba(0,0,0,.6)); overflow:hidden; transform:translateY(8px) scale(.98); opacity:0; transition:transform .22s, opacity .22s; }
    .ac-modal-bg.open .ac-modal { transform:none; opacity:1; }
    .ac-modal-h { padding:22px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .ac-modal-h .mt { font:800 19px "Inter",sans-serif; letter-spacing:-.015em; margin:0; }
    .ac-modal-h .ms { font:400 13px "Inter",sans-serif; color:var(--text-3); margin:6px 0 0; line-height:1.45; }
    .ac-modal-f { padding:18px 24px 22px; display:flex; gap:10px; }
    .ac-modal-f .ac-btn { flex:1; padding:12px; }
    .ac-btn { flex:1; justify-content:center; display:inline-flex; align-items:center; gap:6px; padding:9px 10px; font:600 12px "Inter",sans-serif;
        border-radius:var(--r-pill); border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; transition:.15s; text-decoration:none; white-space:nowrap; }
    .ac-btn:hover { background:var(--card-hi); border-color:var(--border-hi); }
    .ac-btn.danger { color:#e5544b; border-color:rgba(229,84,75,.35); background:rgba(229,84,75,.08); }
    .ac-btn.danger:hover { background:rgba(229,84,75,.16); border-color:#e5544b; }
    .slot-x { width:28px; height:28px; border-radius:50%; background:var(--card-hi); border:1px solid var(--border); color:var(--text-3);
        display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; flex-shrink:0; padding:0; }
    .slot-x:hover { background:rgba(229,84,75,.14); border-color:rgba(229,84,75,.4); color:#e5544b; }
    .slot-x svg { width:12px; height:12px; }

        .tips-login button {
            background: none;
            border: none;
            color: var(--accent);
            cursor: pointer;
            font: 600 12px "Inter",sans-serif;
            padding: 0;
        }

            .tips-login button:hover {
                text-decoration: underline;
            }

    /* ── мобильная адаптация (проверено на 390px / iPhone 13): 4 проблемных блока.
          Отдельный блок в конце <style>, т.к. базовые правила .rate10/.head-tools/
          .spoiler-tgl объявлены НИЖЕ существующего @media(520) (строки 1473/1542/1549) —
          добавь их туда, и они бы проиграли этим базовым по порядку каскада.
          Десктоп и планшет не затронуты (только max-width:520px). ── */
    @media (max-width:520px) {
        /* (1) счётчики трофеев — ровная сетка 2 колонки вместо рваного переноса */
        .tally { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
        .tally .pill-t { width: 100%; justify-content: flex-start; }
        .tally .pill-t:last-child { grid-column: 1 / -1; justify-content: center; }

        /* (1b) платформы в ряд по центру, жанр — отдельной центрированной строкой.
                Метки платформ приходят из данных игры (Model.PlatformTabs) — число реалистично,
                хардкодить PS5/PS4 не нужно; жанр — .gchip.accent (не .chip.accent). */
        .ghero .gplats { justify-content: center; gap: 8px; row-gap: 9px; }
        .ghero .gplats .gchip.accent { flex-basis: 100%; text-align: center; justify-content: center; margin: 2px auto 0; }

        /* (1в) селект версий — по центру под заголовком, во всю ширину колонки */
        .vsel { justify-content: center; }
        .vsel select { flex: 1 1 auto; min-width: 0; }

        /* (2) фильтры/сортировка — стопкой на всю ширину; .left на flex, чтобы
               одиночный селект (когда нет DLC-групп) занимал всю ширину */
        .head-tools-row { flex-direction: column; align-items: stretch; gap: 10px; }
        .head-tools { width: 100%; }
        .head-tools.left { display: flex; gap: 8px; }
        .head-tools.left .group-sel, .head-tools.left .sort-select { flex: 1; width: auto; min-width: 0; }

        /* (5) правый блок фильтров — вертикальный стек, «ВСЕ/НЕ ПОЛУЧЕНО» не переносится */
        .head-tools.right { display: flex; flex-direction: column; gap: 8px; }
        .head-tools.right .spoiler-tgl { width: 100%; justify-content: center; }
        .head-tools.right .seg { width: 100%; }
        .head-tools.right .seg button { flex: 1; justify-content: center; }

        /* (3) строка трофея — дата/редкость на своей строке под названием/описанием,
               чтобы текст занимал полную ширину (grid-области). Иконка — .ticon или .gti. */
        .trow { grid-template-columns: 46px 1fr;
                grid-template-areas: "icon tx" "right right" "detail detail"; align-items: start; }
        .trow > .ticon, .trow > .gti { grid-area: icon; }
        .trow > .tx { grid-area: tx; }
        .trow > .tr-right { grid-area: right; justify-content: flex-end; gap: 16px; margin-top: 8px; }
        .trow > .tr-detail { grid-area: detail; }
        .trow .rare { min-width: 0 !important; text-align: right; }
        .trow .tprog { max-width: none; }

        /* (4) оценка 1–10 — все десять кнопок в один ряд */
        .rate10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
        .rate10 button { width: 100%; height: 34px; font-size: 12px; border-radius: 6px; }
    }