:root {
    --bg: #0e1117;
    --panel: #171b24;
    --surface: #1c2230;
    --surface-deep: #0a0d12;
    --text: #e8ebf2;
    --muted: #8b93a7;
    --gold: #fbbf24;
    --accent: var(--gold);
    --accent-dark: #d4a017;
    --accent-glow: rgba(251, 191, 36, 0.22);
    --line: #2a3142;
    --silver: #cbd5e1;
    --bronze: #94a3b8;
    --danger: #ef4444;
}

* { box-sizing: border-box; }

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at top, rgba(251, 191, 36, 0.12), transparent 42%),
        var(--bg);
    color: var(--text);
}

.wrap {
    width: min(1100px, calc(100% - 24px));
    margin: 0 auto;
}

.vote-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: min(1100px, calc(100% - 24px));
    margin: 0 auto;
    min-height: 0;
}

.vote-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 24px 0;
}

.vote-stage > section {
    width: 100%;
    margin: 0;
}

.vote-main .stats-bar {
    flex-shrink: 0;
    padding: 16px 0 24px;
}

.vote-main .panel {
    margin: 0;
}

.vote-main .battle {
    margin: 0;
}

.topbar {
    border-bottom: 1px solid var(--line);
    background: rgba(14, 17, 23, 0.92);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
}

h1 {
    margin: 0;
    font-size: 28px;
}

h2 {
    margin: 0 0 18px;
}

.subtitle {
    margin: 4px 0 0;
    color: var(--muted);
}

.topbar-home {
    color: inherit;
    text-decoration: none;
}

.topbar-home:hover h1 {
    color: var(--accent);
}

.topbar-head {
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.topbar-titles {
    display: flex;
    flex-direction: column;
}

.topbar-titles h1 {
    line-height: 1.2;
}

.topbar-titles .subtitle {
    line-height: 1.4;
}

.topbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.topbar-logo img {
    display: block;
    height: calc((28px * 1.2 + 4px + 1em * 1.4) * 1.1);
    width: auto;
    object-fit: contain;
}

nav {
    display: flex;
    gap: 10px;
}

nav a {
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 7px;
    padding: 8px 14px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

nav a.active {
    border-color: var(--accent);
    color: var(--accent);
}

nav a:hover,
nav a.active:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.topbar-nav-short {
    display: none;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
}

.center {
    text-align: center;
}

.hidden { display: none !important; }

.error {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
}

.versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.versus.is-resolving {
    pointer-events: none;
    overflow: visible;
}

.battle.is-resolving .hint {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.versus.is-resolving .ant-card {
    will-change: auto;
}

.card-frame {
    overflow: hidden;
    min-width: 0;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.vs {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    padding: 0 2px;
}

.vs.is-entering img {
    animation: vsEnter 0.55s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vs img {
    display: block;
    width: 100%;
    max-width: 120px;
    max-height: 120px;
    height: auto;
    object-fit: contain;
}

.ant-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 100%;
    padding: 14px;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    color: inherit;
    cursor: pointer;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.ant-card--left.is-entering {
    animation: cardEnterLeft 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ant-card--right.is-entering {
    animation: cardEnterRight 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (hover: hover) {
    .ant-card:not(.is-entering):hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px var(--accent-glow);
    }

    .card-frame:has(.ant-card:not(.is-entering):hover) {
        border-color: var(--accent);
    }
}

.versus.is-preparing {
    visibility: hidden;
}

.ant-card:focus {
    outline: none;
}

.card-frame.is-losing {
    animation: cardLose 0.38s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
    pointer-events: none;
}

.card-frame.is-winning {
    position: relative;
    z-index: 5;
    overflow: hidden;
    border-radius: 12px;
    isolation: isolate;
    transform-origin: center center;
}

.card-frame.is-winning .ant-card {
    height: 100%;
    transform: none;
}

.card-frame.is-winning .ant-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

.card-frame.is-exiting,
.ant-card.is-exiting {
    pointer-events: none;
}

.ant-card.is-selected {
    cursor: default;
}

.vs.is-hiding {
    animation: vsHide 0.28s ease forwards;
    pointer-events: none;
}

@keyframes cardLose {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.82) translateY(12px);
        filter: blur(3px);
        visibility: hidden;
    }
}

@keyframes vsHide {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.55);
        visibility: hidden;
    }
}

@keyframes cardEnterLeft {
    0% {
        transform: translateX(-115%);
        opacity: 0.55;
    }
    62% {
        transform: translateX(5%);
        opacity: 1;
    }
    78% {
        transform: translateX(-2.5%);
    }
    90% {
        transform: translateX(0.8%);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cardEnterRight {
    0% {
        transform: translateX(115%);
        opacity: 0.55;
    }
    62% {
        transform: translateX(-5%);
        opacity: 1;
    }
    78% {
        transform: translateX(2.5%);
    }
    90% {
        transform: translateX(-0.8%);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes vsEnter {
    0% {
        transform: scale(0.35);
        opacity: 0;
    }
    68% {
        transform: scale(1.12);
        opacity: 1;
    }
    84% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ant-card--left.is-entering,
    .ant-card--right.is-entering,
    .vs.is-entering img,
    .card-frame.is-losing,
    .vs.is-hiding {
        animation: none;
    }
}

.ant-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-deep);
    display: block;
}

.ant-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.ant-meta {
    color: var(--muted);
    font-size: 14px;
}

.hint {
    text-align: center;
    color: var(--muted);
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.4;
}

.stats-bar {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 24px 0 40px;
    color: var(--muted);
}

.btn {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-weight: 700;
}

.btn:hover {
    background: var(--accent-dark);
    color: var(--bg);
}

.btn.secondary {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    margin-left: 8px;
}

.btn--dark {
    background: var(--surface-deep);
    border: 1px solid var(--line);
    color: var(--text);
}

.btn--dark:hover {
    background: var(--surface);
    border-color: #3d465c;
    color: #fff;
}

.actions-panel {
    text-align: center;
    margin-top: 8px;
}

.podium-gate {
    padding: 48px 24px 56px;
}

.podium-gate__text {
    max-width: 36em;
    margin: 0 auto 8px;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--text);
}

.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 25px;
    margin: 0 auto;
    padding: 8px 8px 0;
}

.podium:not(.podium--compact):not(.podium--mini) {
    width: 80%;
    max-width: none;
    container-type: inline-size;
    --podium-base: calc((100cqw - 50px) / 3 * 0.8 + 110px);
}

.podium--compact,
.podium--mini {
    gap: 14px;
    width: 100%;
    max-width: none;
}

.podium--compact {
    --podium-photo: 76px;
}

.podium--mini {
    --podium-photo: 64px;
}

.podium-empty {
    width: 100%;
    text-align: center;
    color: var(--muted);
    margin: 0;
}

.podium-card {
    flex: 1 1 0;
    max-width: 240px;
    text-align: center;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    overflow: hidden;
}

.podium-card.place-1 {
    order: 2;
    border-color: var(--gold);
    box-shadow: 0 -8px 32px rgba(251, 191, 36, 0.12);
}

.podium-card.place-2 {
    order: 1;
    border-color: var(--silver);
}

.podium-card.place-3 {
    order: 3;
    border-color: var(--bronze);
}

.podium:not(.podium--compact):not(.podium--mini) .podium-card {
    max-width: none;
    flex: 1 1 0;
    justify-content: center;
    height: auto;
}

.podium:not(.podium--compact):not(.podium--mini) .podium-card.place-3 {
    min-height: max(260px, var(--podium-base));
}

.podium:not(.podium--compact):not(.podium--mini) .podium-card.place-2 {
    min-height: max(295px, calc(var(--podium-base) + 35px));
}

.podium:not(.podium--compact):not(.podium--mini) .podium-card.place-1 {
    min-height: max(330px, calc(var(--podium-base) + 70px));
}

.podium:not(.podium--compact):not(.podium--mini) .place-label {
    font-size: 20px;
    margin-bottom: 15px;
}

.podium--compact .place-label,
.podium--mini .place-label {
    font-size: 16px;
    margin-bottom: 10px;
}

.podium--compact .podium-card {
    max-width: none;
    height: auto;
    flex: 1 1 0;
    padding: 12px 8px;
}

.podium--compact .podium-card.place-3 {
    min-height: calc(var(--podium-photo) + 88px);
}

.podium--compact .podium-card.place-2 {
    min-height: calc(var(--podium-photo) + 123px);
}

.podium--compact .podium-card.place-1 {
    min-height: calc(var(--podium-photo) + 158px);
}

.podium--compact .podium-card img {
    width: var(--podium-photo);
    height: var(--podium-photo);
    flex: 0 0 var(--podium-photo);
}

.podium--compact .podium-card h3 {
    font-size: 13px;
    margin-top: 6px;
}

.podium--compact .podium-card .score {
    font-size: 12px;
    margin-top: 4px;
}

.podium--duo .podium-card.place-2 {
    min-height: calc(var(--podium-photo) + 88px);
}

.podium--duo .podium-card.place-1 {
    min-height: calc(var(--podium-photo) + 123px);
}

.rank-block--span-2 .podium--compact {
    --podium-photo: 64px;
}

.rank-block--span-1 .podium--mini {
    --podium-photo: 56px;
}

.podium:not(.podium--compact):not(.podium--mini) .podium-card h3 {
    -webkit-line-clamp: 1;
}

.podium--mini .podium-card img {
    width: var(--podium-photo);
    height: var(--podium-photo);
    flex: 0 0 var(--podium-photo);
}

.podium--mini .podium-card {
    max-width: none;
    height: auto !important;
    padding: 12px 8px;
}

.podium--mini .podium-card h3 {
    font-size: 12px;
    margin-bottom: 0;
}

.rank-block .podium-card h3 {
    overflow: visible;
    display: block;
    -webkit-line-clamp: unset;
    word-break: break-word;
    margin-top: 8px;
    color: var(--text);
}

.podium--mini .podium-card .score {
    font-size: 11px;
}

.podium--mini {
    max-width: none;
    padding: 8px 8px 0;
}

.podium-card img {
    width: 80%;
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    align-self: center;
    margin: 0 auto;
    display: block;
}

.podium-card h3 {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex-shrink: 0;
}

.podium-card.place-1 h3 {
    margin-top: 8px;
}

.podium-card .score {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    flex-shrink: 0;
}

.place-label {
    display: inline-block;
    font-weight: 800;
    flex-shrink: 0;
}

.subfamily-rankings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rank-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

.rank-grid--places {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rank-block--span-3 {
    grid-column: span 3;
}

.rank-block--span-2 {
    grid-column: span 2;
}

.rank-block--span-1 {
    grid-column: span 1;
}

.rank-grid--cols-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin: 0 auto;
}

.rank-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rank-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rank-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rank-grid--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rank-grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rank-block {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: var(--surface);
}

.rank-block h3 {
    margin: 0;
    color: var(--gold);
    word-break: break-word;
}

.rank-block--span-1 h3 {
    margin-bottom: 12px;
}

.rank-block .podium {
    max-width: none;
    margin: 0;
}

.rank-block--span-1 .podium {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.rank-block--span-1 .podium-card {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    flex: none;
    min-height: unset;
    height: auto;
    overflow: visible;
}

.rank-block--span-1 .podium-card.place-1 {
    order: 1;
}

.rank-block--span-1 .podium-card.place-2 {
    order: 2;
}

.rank-block--span-1 .podium-card.place-3 {
    order: 3;
}

.rank-block--span-1 .podium-card img {
    width: var(--podium-photo, 56px);
    height: var(--podium-photo, 56px);
    flex: 0 0 var(--podium-photo, 56px);
    object-fit: cover;
}

.rank-item {
    display: grid;
    grid-template-columns: 28px 56px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.rank-item:first-of-type { border-top: 0; }

.rank-item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}

.rank-item .score {
    color: var(--muted);
    font-size: 13px;
}

.meta-line {
    text-align: center;
    color: var(--muted);
    padding-bottom: 40px;
}

@media (max-width: 820px) {
    .versus {
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 100%;
        align-items: stretch;
    }

    .vs img {
        max-width: min(48px, 12vw);
        max-height: min(48px, 12vw);
    }

    /* Голосование: вертикально card → VS → card, без скролла */
    body:has(.vote-main) {
        --vote-chrome: 9.5rem;
        --vote-card-size: calc(((100dvh - var(--vote-chrome)) / 2 - 1.75rem) * 0.855);
        --vote-vs-size: min(44px, 10.9vw);
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body:has(.vote-main) .topbar {
        flex-shrink: 0;
        overflow: hidden;
    }

    body:has(.vote-main) .vote-main {
        flex: 1 1 0;
        min-height: 0;
        width: calc(100% - 16px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body:has(.vote-main) .vote-stage {
        flex: 1 1 0;
        padding: 0;
        min-height: 0;
        overflow: hidden;
        align-items: stretch;
        justify-content: center;
    }

    body:has(.vote-main) .battle {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        justify-content: center;
    }

    body:has(.vote-main) .hint {
        flex-shrink: 0;
        margin: 6px 0;
        font-size: 14px;
        line-height: 1.2;
    }

    body:has(.vote-main) .versus {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        overflow: hidden;
    }

    body:has(.vote-main) .card-frame {
        flex: 0 1 auto;
        min-height: 0;
        width: 100%;
    }

    body:has(.vote-main) .vs {
        flex: 0 0 auto;
        align-self: center;
        padding: 0;
        line-height: 0;
    }

    body:has(.vote-main) .vs img {
        width: var(--vote-vs-size);
        height: var(--vote-vs-size);
        max-width: none;
        max-height: none;
    }

    body:has(.vote-main) .versus.is-resolving {
        overflow: visible;
    }

    body:has(.vote-main) .battle.is-resolving,
    body:has(.vote-main) .vote-stage:has(.versus.is-resolving) {
        overflow: visible;
    }

    body:has(.vote-main) .card-frame.is-winning {
        position: relative;
        z-index: 6;
    }

    body:has(.vote-main) .ant-card {
        flex: none;
        min-height: auto;
        padding: 6px 8px 4px;
        gap: 0;
    }

    body:has(.vote-main) .ant-card img {
        flex: 0 0 auto;
        display: block;
        width: 100%;
        max-width: min(100%, var(--vote-card-size));
        max-height: max(92px, var(--vote-card-size));
        aspect-ratio: 1 / 1;
        object-fit: cover;
        margin: 0 auto;
    }

    body:has(.vote-main) .ant-name {
        flex-shrink: 0;
        font-size: clamp(16px, 4.1vw, 18px);
        line-height: 1.2;
        margin-top: 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body:has(.vote-main) .ant-meta {
        flex-shrink: 0;
        font-size: clamp(13px, 3.3vw, 16px);
        line-height: 1.2;
        margin-bottom: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body:has(.vote-main) .stats-bar {
        flex-shrink: 0;
        padding: 6px 0 max(8px, env(safe-area-inset-bottom));
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }

    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-inner nav {
        align-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .topbar-inner nav a {
        display: inline-block;
        text-align: center;
    }

    /* Голосование: шапка в одну строку — после общих mobile-правил topbar */
    body:has(.vote-main) .topbar .wrap {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    body:has(.vote-main) .topbar-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 6px 0;
        gap: 6px;
    }

    body:has(.vote-main) .topbar-home {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    body:has(.vote-main) .topbar-head {
        min-width: 0;
        align-items: center;
    }

    body:has(.vote-main) .topbar-titles {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body:has(.vote-main) .topbar-titles h1,
    body:has(.vote-main) .topbar-titles .subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:has(.vote-main) .topbar-inner nav {
        flex: 0 0 auto;
        width: auto;
        align-self: center;
        justify-content: flex-end;
    }

    body:has(.vote-main) .topbar-inner nav a {
        box-sizing: border-box;
        width: 72px;
        height: 52px;
        padding: 4px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    body:has(.vote-main) .topbar-nav-long {
        display: none;
    }

    body:has(.vote-main) .topbar-nav-short {
        display: block;
    }

    body:has(.vote-main) h1 {
        font-size: 18px;
        line-height: 1.15;
    }

    body:has(.vote-main) .subtitle {
        font-size: 14px;
        line-height: 1.15;
        margin-top: 2px;
    }

    body:has(.vote-main) .topbar-logo img {
        height: 52px;
        width: auto;
    }

    .podium:not(.podium--compact):not(.podium--mini) {
        width: 100%;
        container-type: normal;
    }

    .podium:not(.podium--compact):not(.podium--mini) .podium-card {
        flex: none;
        overflow: visible;
    }

    .podium:not(.podium--compact):not(.podium--mini) .podium-card.place-1,
    .podium:not(.podium--compact):not(.podium--mini) .podium-card.place-2,
    .podium:not(.podium--compact):not(.podium--mini) .podium-card.place-3 {
        min-height: unset !important;
    }

    .podium:not(.podium--compact):not(.podium--mini) .podium-card img {
        width: min(132px, 36vw);
        height: min(132px, 36vw);
        flex: 0 0 min(132px, 36vw);
        object-fit: cover;
    }

    .podium,
    .podium--compact,
    .podium--mini {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .podium-card {
        order: unset !important;
        width: 100%;
        max-width: 100%;
        min-height: unset !important;
        height: auto !important;
        align-self: stretch;
        flex: none;
        padding: 16px;
        justify-content: center;
    }

    .podium-card.place-1 {
        order: 1 !important;
    }

    .podium-card.place-2 {
        order: 2 !important;
    }

    .podium-card.place-3 {
        order: 3 !important;
    }

    .podium-card img,
    .podium--compact .podium-card img,
    .podium--mini .podium-card img {
        width: min(132px, 36vw);
        height: min(132px, 36vw);
        flex: 0 0 min(132px, 36vw);
        object-fit: cover;
    }

    .podium-card h3,
    .podium--compact .podium-card h3,
    .podium--mini .podium-card h3 {
        font-size: 15px;
        margin-top: 10px;
    }

    .podium-card .score,
    .podium--compact .podium-card .score,
    .podium--mini .podium-card .score {
        font-size: 13px;
        margin-top: 6px;
    }

    .place-label,
    .podium--compact .place-label,
    .podium--mini .place-label {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .rank-block--span-1,
    .rank-block--span-2,
    .rank-block--span-3 {
        grid-column: 1 / -1;
    }

    .rank-grid--places {
        grid-template-columns: 1fr;
    }

    .rank-block {
        width: 100%;
    }

    .rank-block .podium,
    .rank-block .podium--compact,
    .rank-block .podium--mini {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        padding: 0;
    }

    .rank-block .podium-card {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        flex: none;
        min-height: unset !important;
        height: auto !important;
        overflow: visible;
        order: unset !important;
    }

    .rank-block .podium-card.place-1 {
        order: 1 !important;
    }

    .rank-block .podium-card.place-2 {
        order: 2 !important;
    }

    .rank-block .podium-card.place-3 {
        order: 3 !important;
    }

    .rank-block .podium-card img,
    .rank-block .podium--compact .podium-card img,
    .rank-block .podium--mini .podium-card img {
        width: min(132px, 36vw);
        height: min(132px, 36vw);
        flex: 0 0 min(132px, 36vw);
        object-fit: cover;
    }

    .rank-block .podium--compact .podium-card.place-1,
    .rank-block .podium--compact .podium-card.place-2,
    .rank-block .podium--compact .podium-card.place-3,
    .rank-block .podium--duo .podium-card.place-1,
    .rank-block .podium--duo .podium-card.place-2 {
        min-height: unset !important;
    }

    .rank-grid--cols-2,
    .rank-grid--cols-3,
    .rank-grid--cols-4,
    .rank-grid--cols-5,
    .rank-grid--cols-6 {
        grid-template-columns: 1fr;
    }

    .rank-grid--cols-1 {
        max-width: none;
    }
}

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

.admin-head h2 {
    margin: 0;
}

.admin-head .btn {
    margin-top: 0;
}

.admin-note {
    color: var(--muted);
    margin: 0 0 16px;
}

.admin-error {
    color: #fecaca;
    margin: 0 0 12px;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 320px;
}

.admin-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--muted);
}

.admin-label input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.admin-table th {
    color: var(--muted);
    font-weight: 600;
}

.admin-table code {
    font-family: Consolas, monospace;
    font-size: 13px;
}

.admin-success {
    color: #bbf7d0;
    margin: 0 0 12px;
}

.admin-shop-add {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.admin-label--grow {
    flex: 1 1 220px;
}

.admin-label select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    width: 100%;
    min-width: 180px;
}

.admin-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
}

.admin-check--inline {
    margin: 0;
}

.admin-shop-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-shop-url {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.btn--small {
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 0;
}

.admin-table--shop td {
    vertical-align: middle;
}

.podium-photo-wrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

.podium-buy {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(14, 17, 23, 0.82);
    border: 1px solid var(--line);
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.podium-buy:hover {
    transform: scale(1.06);
    background: rgba(14, 17, 23, 0.95);
    border-color: var(--accent);
}

.podium-card--shop {
    cursor: pointer;
}

.podium-card--shop::after {
    content: 'Купить';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(14, 17, 23, 0.92);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 3;
}

.podium-card--shop:hover::after,
.podium-card--shop:focus-visible::after {
    opacity: 1;
}

.podium-card--shop:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}