/* «Тайный Санта» (.ss): сцена с ёлкой на всю ширину и высоту окна под шапкой портала, надписи поверх сцены слева,
   справа поверх сцены — стеклянная панель игры; на телефоне панель — лист. Цвета и шрифты — токены темы;
   окно правил (.ss-dialog) живёт вне .ss. */

/* ---- Общие мелочи ---- */
.ss-eyebrow {
    display: flex; align-items: center; gap: 8px; margin: 0;
    color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.ss-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---- Рисунки игры (SantaArt, ветка входа): встроенный SVG, части красятся классами. Все цвета — из палитры
   портала: tiffany и petrol (--brand-accent, --brand-dark), кремовый (--brand-light) и бронза (второй цвет темы). ---- */
.ss-art {
    --ss-art-tree: color-mix(in srgb, var(--brand-accent) 62%, var(--brand-dark));
    --ss-art-gold: color-mix(in srgb, var(--mud-palette-secondary) 50%, var(--brand-light));
}
.ss-art-tree { fill: var(--ss-art-tree); }
.ss-art-tree-light { fill: var(--brand-accent); }
.ss-art-cream { fill: var(--brand-light); }
.ss-art-gold { fill: var(--ss-art-gold); }
.ss-art-bronze { fill: var(--mud-palette-secondary); }
.ss-art-bronze-deep { fill: var(--mud-palette-secondary-darken); }
.ss-art-shadow { fill: var(--brand-dark); opacity: .18; }
.ss-art-tree-line { stroke: var(--ss-art-tree); }
.ss-art-tree-light-line { stroke: var(--brand-accent); }
.ss-art-cream-line { stroke: var(--brand-light); }
.ss-art-gold-line { stroke: var(--ss-art-gold); }

/* ---- Новогодний вход с главной. Фон и текст — токены героя; золото и рисунки — декор игры. ---- */
.ss-entry {
    /* Золото игры собрано из токенов портала: тёплый тон — для рамки и свечения, смешанный с цветом текста — для надписей. */
    --ss-entry-tone: color-mix(in srgb, var(--warning) 45%, var(--brand-light));
    --ss-entry-gold: color-mix(in srgb, var(--text-primary) 70%, var(--ss-entry-tone));
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    box-sizing: border-box;
    width: 440px;
    max-width: 100%;
    min-height: 104px;
    padding: 10px 16px 10px 10px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--ss-entry-tone) 50%, transparent);
    border-radius: 16px;
    /* Основа темнее карточки героя — ближе к фону страницы: вход не спорит с приветствием, свечение едва заметно. */
    background:
        radial-gradient(ellipse 150px 110px at 56px 60%, color-mix(in srgb, var(--ss-entry-tone) 9%, transparent), transparent 75%),
        linear-gradient(115deg, color-mix(in srgb, var(--ss-entry-tone) 5%, transparent), transparent 70%),
        color-mix(in srgb, var(--bg-card) 30%, var(--mud-palette-background));
    box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in srgb, var(--brand-light) 10%, transparent);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ss-entry::before {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    content: "";
    inset: 0;
    opacity: .55;
    background:
        radial-gradient(circle at 69% 87%, var(--ss-entry-tone) 1.2px, transparent 2px),
        radial-gradient(circle at 84% 76%, var(--ss-entry-tone) 1px, transparent 1.8px),
        radial-gradient(circle at 37% 92%, var(--ss-entry-tone) 1px, transparent 1.8px);
}
.ss-entry-sprig {
    position: absolute;
    z-index: -1;
    top: -4px;
    right: -5px;
    width: 96px;
    height: 54px;
    pointer-events: none;
    opacity: .8;
}
.ss-entry:hover {
    /* Наведение — тот же тёплый тон рамки, только плотнее: почти белое «золото» надписей на рамке блестело. */
    border-color: color-mix(in srgb, var(--ss-entry-tone) 75%, transparent);
    box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--brand-light) 10%, transparent);
    color: var(--text-primary);
    transform: translateY(-2px);
}
.ss-entry:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.ss-entry-icon {
    display: block;
    flex: none;
    width: 84px;
    height: 81px;
    filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--brand-dark) 15%, transparent));
    transition: transform .2s;
}
.ss-entry-icon .ss-art {
    display: block;
    width: 100%;
    height: 100%;
}
.ss-entry:hover .ss-entry-icon {
    transform: translateY(-2px) rotate(-3deg);
}
.ss-entry-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    line-height: 1.3;
}
.ss-entry-eyebrow {
    color: var(--ss-entry-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ss-entry-copy strong {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
}
.ss-entry-description {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}
.ss-entry-action {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: 28px;
    border: 1px solid color-mix(in srgb, var(--ss-entry-gold) 32%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ss-entry-gold) 8%, transparent);
    color: var(--ss-entry-gold);
}
.ss-entry-arrow.mud-icon-root {
    width: 17px;
    height: 17px;
}
/* Пока игра читается, вход держит своё место пустым: под приветствием он иначе появился бы рывком и сдвинул страницу. */
.ss-entry--pending {
    visibility: hidden;
}
/* До 960 px герой главной стоит столбиком: вход — под приветствием, на телефоне во всю ширину. */
@media (max-width: 959.98px) {
    .ss-entry {
        align-self: stretch;
        width: 100%;
        max-width: 460px;
    }
}
@media (max-width: 599.98px) {
    .ss-entry {
        gap: 10px;
        max-width: none;
        min-height: 96px;
        padding: 10px 12px;
    }
    .ss-entry-icon {
        width: 72px;
        height: 70px;
    }
    .ss-entry-copy strong {
        font-size: 19px;
    }
    .ss-entry-description {
        font-size: 12px;
    }
    .ss-entry-action {
        width: 28px;
        height: 28px;
    }
    .ss-entry-sprig {
        width: 84px;
        height: 48px;
        opacity: .65;
    }
}
@media (max-width: 359.98px) {
    .ss-entry-icon {
        width: 62px;
        height: 60px;
    }
    .ss-entry-copy strong {
        font-size: 18px;
    }
    .ss-entry-eyebrow {
        letter-spacing: .04em;
    }
}

/* ---- Сцена во весь экран ---- */
/* Надписи и панель держатся колонки портала (1280 px, как шапка), а не краёв окна: --ss-edge — её край от края
   сцены, --ss-side — ширина левого блока надписей; ёлке — всё, что между ними. */
.ss-scene-area {
    --ss-edge: max(var(--page-gutter), calc((100% - 1280px) / 2 + var(--page-gutter)));
    --ss-side: 208px;
    position: relative; height: calc(100svh - var(--header-h)); min-height: 640px; overflow: hidden;
    background: radial-gradient(ellipse 50% 58% at 42% 64%, var(--accent-light), transparent 72%);
}
/* Ёлка стоит в левой части: справа место панели, слева — надписей. */
.ss-stage { position: absolute; inset: 0 calc(var(--ss-edge) + 416px) 0 calc(var(--ss-edge) + var(--ss-side) + 16px); display: flex; flex-direction: column; }
.ss-stage-scene { position: relative; isolation: isolate; flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; }
/* Заставка — квадратный снимок той же сцены (capture-poster.cjs): видна сразу, пока грузятся скрипты и модель, и
   остаётся, если объёмная ёлка недоступна. Стоит там же, где ёлку рисует камера сцены: во всю высоту, а в узкой
   сцене — по ширине ёлки. --ss-tree-aspect — ширина ёлки к высоте, его печатает тот же скрипт. Готовая сцена
   сменяет заставку плавно. */
.ss-fallback {
    --ss-tree-aspect: 0.8212;
    position: absolute; top: 50%; left: 50%; height: 100%; height: min(100%, calc(100cqw / var(--ss-tree-aspect)));
    width: auto; max-width: none; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
    transition: opacity .3s ease, visibility 0s .3s;
}
.ss-stage-scene[data-state="ready"] .ss-fallback { opacity: 0; visibility: hidden; }
/* Светлая вязаная варежка с бирюзовым манжетом; SVG сохраняет чёткость на плотных экранах.
   Размер 32 px, системный курсор остаётся запасным. */
#tree-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent;
    cursor: url("cursors/wool-mitten.svg") 17 3, grab; }
#tree-canvas[data-dragging="true"] {
    cursor: url("cursors/wool-mitten-grab.svg") 16 6, grabbing; }
#tree-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: 16px; }
.ss-load-message {
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    width: max-content; max-width: 88%; padding: 10px 18px; text-align: center;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary);
    font-size: 13px; pointer-events: none;
}
/* Пока сцена грузится, на её месте заставка: надпись «Загружаем…» остаётся только для читалок с экрана. */
.ss-stage-scene[data-state="loading"] .ss-load-message { opacity: 0; }
/* Шары и подарки: кнопки, которые скрипт кладёт поверх сцены; видимые буквы — на самом шаре, кнопка прозрачна. */
.city-hotspots, .gift-hotspots { position: absolute; inset: 0; pointer-events: none; }
.ss .gift-hotspots { z-index: 1; }
.city-hotspot {
    position: absolute; top: 0; left: 0; display: grid; place-items: center;
    width: max(44px, var(--ball-size)); height: max(44px, var(--ball-size)); min-height: 44px; padding: 0;
    transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent;
    color: var(--text-primary); pointer-events: auto; touch-action: pan-y pinch-zoom;
    cursor: url("cursors/wool-mitten.svg") 17 3, pointer;
}
.city-hotspot:focus-visible { outline: none; }
.city-hotspot:focus-visible .city-key { outline: 2px solid var(--text-primary); outline-offset: 3px; opacity: 1; }
.city-key {
    padding: 2px 4px; border-radius: 4px; background: var(--bg-card); color: var(--text-primary);
    font-size: clamp(10px, calc(var(--ball-size) * 0.23), 17px); font-weight: 700; letter-spacing: .02em;
    opacity: 0; pointer-events: none;
}
.gift-hotspot {
    position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 8px; background: transparent;
    pointer-events: auto; touch-action: pan-y pinch-zoom;
    cursor: url("cursors/wool-mitten.svg") 17 3, pointer;
}
.gift-hotspot:focus-visible { outline: 2px dashed var(--text-primary); outline-offset: 3px; }
.ss .cat-hotspot {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 45%;
    padding: 0;
    background: transparent;
    touch-action: pan-y pinch-zoom;
    cursor: url("cursors/wool-mitten-pet.svg") 11 4, pointer;
    -webkit-tap-highlight-color: transparent;
}
.ss .cat-hotspot:focus-visible {
    outline: 2px dashed var(--text-primary);
    outline-offset: 3px;
}

/* ---- Надписи поверх сцены: название сверху, участники снизу; указатель ловят только ссылки и кнопки ---- */
.ss-wait.container { min-height: calc(100svh - var(--header-h)); }
.ss-overlay { position: absolute; left: var(--ss-edge); z-index: 2; max-width: 320px; pointer-events: none; }
.ss-overlay a, .ss-overlay button { pointer-events: auto; }
.ss-overlay-top { top: 28px; }
.ss-overlay-bottom { bottom: 28px; width: var(--ss-side); max-width: none; }
.ss-title {
    margin: 8px 0 10px; font-family: var(--font-display); color: var(--text-primary);
    font-size: clamp(28px, 2.8vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap;
}
.ss-star { color: var(--accent); font-size: .6em; margin-left: 8px; vertical-align: middle; }
.ss-lead { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.ss-rules-link.mud-button-root { margin: 10px 0 0 -8px; min-height: 36px; color: var(--accent); font-size: 14px; text-transform: none; letter-spacing: 0; }
.ss-stat { margin: 0; color: var(--text-secondary); font-size: 13px; }
.ss-stat strong { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.ss-city-line {
    display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 8px 0 0; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    color: var(--text-primary); font-size: 13px;
}
.ss-city-line .mud-icon-root { flex: none; width: 14px; height: 14px; color: var(--accent); }
.ss-hint { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; }

/* ---- Панель-стекло поверх сцены ---- */
.ss-panel {
    position: absolute; top: 24px; right: var(--ss-edge); z-index: 3; width: 400px; max-height: calc(100% - 48px);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden; outline: none;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 20px;
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: var(--shadow-lg);
}
.ss-panel-mobile-bar { flex: none; padding: 6px 8px 0 24px; color: var(--text-muted); font-size: 11px; }
/* Полосы прокрутки нет: панель обнимает содержимое, и прокрутка нужна, только когда окно ниже панели (или выросла
   форма — показалась ошибка поля). Тогда содержимое листается колесом, касанием и переходом по полям. */
.ss-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 26px 24px 20px; overscroll-behavior: contain; scrollbar-width: none; }
.ss-panel-body::-webkit-scrollbar { display: none; }
.ss-panel-title {
    margin: 8px 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px;
    color: var(--text-primary); outline: none;
}
.ss-panel-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.ss-panel-lead { margin: 0 0 18px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
/* Шаги игры: пройденные — с галочкой, текущий — на подложке акцента. */
.ss-steps { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.ss-step { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.ss-step--current { background: var(--accent-subtle); }
.ss-step-number {
    display: grid; place-items: center; flex: none; width: 26px; height: 26px;
    border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 12px; font-weight: 600;
}
.ss-step--current .ss-step-number { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.ss-step--done .ss-step-number { border-color: var(--accent); color: var(--accent); }
.ss-step-number .mud-icon-root { width: 14px; height: 14px; }
.ss-step-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.ss-step-copy strong { font-size: 13px; font-weight: 600; }
.ss-step-copy span { color: var(--text-muted); font-size: 12px; }
.ss-step--done .ss-step-copy strong { color: var(--text-secondary); }
/* Заявка: поля на подложке карточки, без Material-отступов. */
.ss-form .mud-input-control { margin: 0 0 12px; }
.ss-form .mud-input-outlined { border-radius: 12px; background: var(--bg-card); }
.ss-form .mud-input { font: inherit; font-size: 14px; }
.ss-form .mud-input-label { font-family: inherit; }
.ss-form-actions { margin-top: 4px; }
/* Карточки заявки и подопечного. */
.ss-card { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg-card) 60%, transparent); }
.ss-card + .ss-card { margin-top: 12px; }
.ss-card-label { margin: 0 0 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ss-card-text { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.ss-card-text + .ss-card-label { margin-top: 14px; }
.ss-card-actions { margin: 10px 0 -6px -8px; }
.ss-card-actions .mud-button-root { min-height: 36px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.ss-ward-head { margin-bottom: 14px; }
.ss-ward-avatar.mud-avatar { width: 48px; height: 48px; font-family: var(--font-body); font-size: 15px; font-weight: 600; background: var(--accent-light); color: var(--accent); }
.ss-ward-copy { min-width: 0; }
.ss-ward-name { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.3; }
.ss-ward-meta { margin: 2px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.4; }
.ss-hand.mud-button-root { margin-top: 16px; }
.mud-chip.ss-handed { margin: 14px 0 0; height: auto; padding: 5px 10px; border-radius: 8px; background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 600; line-height: 1.3; }
.mud-chip.ss-handed .mud-chip-icon { width: 14px; height: 14px; margin: 0 6px 0 0; }
.ss-note { margin: 10px 0 0; padding: 12px; border-radius: 10px; background: var(--accent-subtle); color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.ss-panel-footer { flex: none; padding: 10px 16px 10px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.ss-panel-footer .mud-button-root { min-height: 32px; padding: 0 8px; font-size: 12px; text-transform: none; letter-spacing: 0; }
/* Кнопка панели на телефоне — поверх низа сцены. */
.ss-browse.mud-button-root { position: absolute; left: 50%; bottom: 20px; z-index: 4; transform: translateX(-50%); white-space: nowrap; box-shadow: var(--shadow-lg); }

/* ---- Демонстрационная полоса и пустое состояние ---- */
.ss-no-cities.mud-paper { padding: 56px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); text-align: center; }
.ss-no-cities .mud-icon-root { width: 36px; height: 36px; margin-bottom: 14px; color: var(--accent); }
.ss-no-season-art { display: block; width: 128px; height: 124px; margin: 0 auto 16px; }
.ss-no-cities h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.ss-no-cities p { margin: 0; color: var(--text-secondary); font-size: 14px; }

/* ---- Окно правил ---- */
.ss-dialog .mud-dialog-content { padding: 30px 30px 8px; }
.ss-dialog .mud-dialog-actions { padding: 8px 30px 30px; }
/* Рисунок игры вместо значка: по высоте занимает столько же, сколько занимал значок с отступом (66 px) — окно
   по-прежнему помещается без прокрутки. */
.ss-dialog-emblem { display: block; width: 74px; height: 72px; margin: -8px 0 2px -6px; }
/* На низком экране (телефон вроде 375×667) рисунок уступает место тексту — иначе окно не помещается без прокрутки. */
@media (max-height: 700px) { .ss-dialog-emblem { display: none; } }
.ss-dialog-title { margin: 8px 0 14px; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -.6px; }
.ss-dialog-subtitle { margin: 20px 0 6px; font-family: inherit; font-size: 14px; font-weight: 600; }
.ss-dialog-text { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.75; }
.ss-rules-steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.ss-rules-steps li { position: relative; margin-bottom: 12px; padding-left: 35px; counter-increment: steps; }
.ss-rules-steps li::before {
    content: counter(steps); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 600;
}
.ss-rules-steps strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.ss-rules-steps span { display: block; color: var(--text-muted); font-size: 12.5px; }

/* ---- Ширины ---- */
/* От 1280 px левый блок узкий: участники и города — отдельными строками, а не как порвёт ширина. */
@media (min-width: 1280px) {
    .ss-stat strong { display: block; }
    .ss-stat-sep { display: none; }
}
/* До 1280 px между надписями и панелью ёлке тесно: название над сценой, участники под ней, панель по-прежнему справа. */
@media (max-width: 1279.98px) {
    .ss-scene-area { display: flex; flex-direction: column; height: auto; min-height: 0; padding-bottom: 8px; }
    .ss-overlay { position: static; width: auto; max-width: none; padding: 20px calc(var(--page-gutter) + 380px) 0 var(--page-gutter); pointer-events: auto; }
    /* Крошки стоят от шапки так же, как в герое разделов: 28 px, на телефоне 20 px. */
    .ss-overlay-top { order: -1; top: 0; padding-top: 28px; padding-bottom: 8px; }
    .ss-overlay-bottom { padding-top: 0; padding-bottom: 8px; }
    .ss-stage { position: relative; inset: auto; margin-right: 380px; height: clamp(420px, calc(100svh - var(--header-h) - 300px), 760px); }
    .ss-panel { width: 360px; top: 20px; right: var(--page-gutter); max-height: calc(100% - 40px); }
}
/* До 960 px: сцена во всю ширину, панель — лист снизу по кнопке. */
@media (max-width: 959.98px) {
    .ss-overlay { padding-right: var(--page-gutter); }
    /* Отступ сверху: макушка ёлки доходит до верха сцены и иначе упирается во вступление. */
    .ss-stage { margin: 24px 0 0; height: clamp(400px, calc(100svh - var(--header-h) - 324px), 720px); }
    .ss-title { font-size: 28px; margin-bottom: 6px; }
    .ss-lead { font-size: 14px; }
    .ss-hint { display: none; }
    .ss-browse.mud-button-root { position: static; transform: none; align-self: center; margin: 12px auto 0; box-shadow: none; }
    /* Организатору — шестерёнка в углу над сценой: отдельной строкой под «Правилами» ссылка отрывалась от них. */
    .ss-overlay-top { position: relative; left: 0; }
    .ss-manage-link.mud-button-root {
        position: absolute; top: 14px; right: var(--page-gutter); width: 40px; min-width: 40px; height: 40px; margin: 0; padding: 0;
        border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--bg-card) 72%, transparent);
        font-size: 0; justify-content: center;
    }
    .ss-manage-link .mud-button-icon-start { margin: 0; }
    .ss-manage-link .mud-button-icon-start .mud-icon-root { font-size: 20px; }
    /* Под кнопкой — участники и выбранный город одной строкой по центру, с воздухом сверху и снизу. */
    .ss-overlay-bottom {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
        padding-top: 16px; padding-bottom: 20px; text-align: center;
    }
    .ss-city-line { margin: 0; }
    /* Ссылка на правила — отдельной строкой под городами. */
    .ss-rules-link--below.mud-button-root { margin: 0; }
    .ss-overlay-bottom .ss-city-line + .ss-rules-link--below, .ss-overlay-bottom .ss-stat + .ss-rules-link--below { flex-basis: 100%; }
    .ss-panel { display: none; }
    .ss-panel.ss-panel--open {
        display: flex; position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: none; z-index: var(--mud-zindex-drawer);
        height: min(90dvh, 920px); border-radius: 20px 20px 0 0; background: var(--bg-card);
        -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-modal);
        animation: ss-sheet-arrives .25s ease both;
    }
    .ss-panel--open .ss-panel-body { padding-top: 10px; }
}
@media (max-width: 599.98px) {
    .ss-overlay-top { padding-top: 20px; }
    .ss-title { font-size: 26px; }
    .ss-panel-body { padding: 18px 16px 16px; }
    .ss-panel-footer { padding: 10px 8px 10px 16px; }
    .ss-dialog .mud-dialog-content { padding: 24px 20px 8px; }
    .ss-dialog .mud-dialog-actions { padding: 8px 20px 20px; }
}
@keyframes ss-sheet-arrives {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-panel.ss-panel--open, .ss-entry, .ss-entry-icon, .ss-fallback { animation: none; transition: none; }
    .ss-entry:hover, .ss-entry:hover .ss-entry-icon { transform: none; }
}

/* Игра не объявлена и страница организатора */
/* От 960 px «Управление игрой» стоит под «Правилами» на той же вертикали; уже — шестерёнка в углу (см. «Ширины»). */
@media (min-width: 960px) {
    .ss-manage-link.mud-button-root { display: flex; width: max-content; margin-top: 2px; }
}
.ss-manage-title { margin: 0 0 20px; font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.ss-manage-card.mud-paper { margin-bottom: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.ss-manage-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.ss-manage-muted { margin: 0; color: var(--text-secondary); font-size: 14px; }
.ss-manage-form { margin-top: 16px; }
.ss-form-errors p { margin: 0; }
.ss-pairs { margin-top: 12px; background: transparent; }
.ss-city-select.mud-input-control { margin-bottom: 4px; }
@media (max-width: 599.98px) {
    .ss-manage-title { font-size: 22px; }
    .ss-manage-card.mud-paper { padding: 16px; }
}
.ss-manage.container { padding-top: 28px; }