/* ============================================================
   ЛЕБЕДЬ ЖОРА v4.0 — ИНТЕРАКТИВНЫЙ МАСКОТ «ИЖОРЕЦ»
   Плавная левитация, 2-кнопочный док, меню настроек,
   двойной cross-fade слой, мини-игры и скрытие
   ============================================================ */

:root {
    --zhora-primary: #0a4ebd;
    --zhora-primary-dark: #073b93;
    --zhora-accent: #e5243b;
    --zhora-accent-dark: #b91c1c;
    --zhora-gold: #f59e0b;
    --zhora-dark: #0f172a;
    --zhora-shadow: 0 16px 36px -6px rgba(10, 78, 189, 0.28), 0 6px 16px rgba(0, 0, 0, 0.12);
    --zhora-glass: rgba(255, 255, 255, 0.94);
}

/* ============================================================
   ОСНОВНОЙ КОНТЕЙНЕР ВИДЖЕТА
   ============================================================ */
.zhora-mascot-container {
    position: fixed;
    bottom: 0px;
    right: 20px;
    z-index: 999990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.zhora-mascot-container.zhora-pos-left {
    right: auto;
    left: 20px;
    align-items: flex-start;
}

.zhora-mascot-container * {
    box-sizing: border-box;
}

/* ============================================================
   РЕЧЕВОЕ ОБЛАЧКО (SPEECH BUBBLE)
   ============================================================ */
.zhora-bubble {
    position: relative;
    max-width: 295px;
    background: #ffffff;
    color: #1e293b;
    padding: 13px 18px;
    border-radius: 18px;
    box-shadow: var(--zhora-shadow);
    border: 2px solid #e2e8f0;
    margin-bottom: 8px;
    margin-right: 15px;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(15px) scale(0.92);
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zhora-pos-left .zhora-bubble {
    margin-right: 0;
    margin-left: 15px;
}

.zhora-bubble.zhora-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.zhora-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zhora-bubble-author {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--zhora-primary);
}

.zhora-bubble-close {
    border: none;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.zhora-bubble-close:hover {
    color: var(--zhora-accent);
}

.zhora-bubble-text {
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
    color: #1e293b;
}

.zhora-bubble-game-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--zhora-primary), #1d4ed8);
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(10, 78, 189, 0.3);
    transition: all 0.2s ease;
}

.zhora-bubble-game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(10, 78, 189, 0.45);
}

/* Хвостик облачка */
.zhora-bubble::after {
    content: '';
    position: absolute;
    bottom: -9px;
    right: 45px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-right: 2px solid #e2e8f0;
    border-bottom: 2px solid #e2e8f0;
    transform: rotate(45deg);
}

.zhora-pos-left .zhora-bubble::after {
    right: auto;
    left: 45px;
    border-right: none;
    border-top: none;
    border-left: 2px solid #e2e8f0;
    border-bottom: 2px solid #e2e8f0;
}

/* ============================================================
   НИЖНИЙ МИКРО-ДОК УПРАВЛЕНИЯ (Внизу сбоку, не висит над головой)
   ============================================================ */
.zhora-bottom-dock {
    position: absolute;
    bottom: 8px;
    right: 12px;
    z-index: 999992;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zhora-pos-left .zhora-bottom-dock {
    right: auto;
    left: 12px;
}

/* Проявляется плавно при наведении на маскота или когда открыты настройки */
.zhora-mascot-container:hover .zhora-bottom-dock,
.zhora-bottom-dock.has-active {
    opacity: 1;
    transform: translateY(0);
}

/* На сенсорных экранах или устройствах без hover — легкая полупрозрачность для доступности */
@media (hover: none) {
    .zhora-bottom-dock {
        opacity: 0.85;
        transform: translateY(0);
    }
}

/* Контурные иконки нижнего дока (Одинаковые контурные кругляши с векторными SVG) */
.zhora-dock-icon-btn,
.zhora-dock-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
}

.zhora-dock-icon-btn svg,
.zhora-dock-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.2s ease, stroke 0.2s ease;
}

.zhora-dock-icon-btn:hover,
.zhora-dock-btn:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--zhora-primary);
    color: var(--zhora-primary);
    box-shadow: 0 6px 16px rgba(10, 78, 189, 0.22);
}

.zhora-dock-icon-btn.active,
.zhora-dock-btn.active {
    background: var(--zhora-primary);
    color: #ffffff;
    border-color: var(--zhora-primary);
    box-shadow: 0 4px 14px rgba(10, 78, 189, 0.35);
}

.zhora-dock-icon-btn.active svg {
    stroke: #ffffff;
}

.zhora-dock-icon-close,
.zhora-dock-btn-close {
    border-color: #cbd5e1;
    color: #64748b;
}

.zhora-dock-icon-close:hover,
.zhora-dock-btn-close:hover {
    color: var(--zhora-accent);
    border-color: var(--zhora-accent);
    background: #fef2f2;
    box-shadow: 0 6px 16px rgba(229, 36, 59, 0.22);
}

/* ============================================================
   БОКОВАЯ КАРТОЧКА НАСТРОЕК (Появляется СБОКУ при клике)
   ============================================================ */
.zhora-settings-menu {
    position: absolute;
    bottom: 12px;
    right: calc(100% + 14px);
    width: 310px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--zhora-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 20px 45px -8px rgba(10, 78, 189, 0.28), 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    transform-origin: bottom right;
    transform: translateX(25px) scale(0.95);
    transition: opacity 0.26s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999995;
}

/* Если маскот слева экрана — настройки выезжают СПРАВА от него */
.zhora-pos-left .zhora-settings-menu {
    right: auto;
    left: calc(100% + 14px);
    transform-origin: bottom left;
    transform: translateX(-25px) scale(0.95);
}

.zhora-settings-menu.open {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Мобильная адаптивность: на узких экранах карточка центрируется */
@media (max-width: 640px) {
    .zhora-settings-menu {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 85px;
        width: auto;
        max-width: calc(100vw - 24px);
        transform: translateY(20px) scale(0.96);
        transform-origin: bottom center;
    }
    .zhora-pos-left .zhora-settings-menu {
        right: 12px;
        left: 12px;
        transform: translateY(20px) scale(0.96);
    }
    .zhora-settings-menu.open {
        transform: translateY(0) scale(1);
    }
}

.zhora-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
}

.zhora-settings-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--zhora-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.zhora-settings-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.zhora-settings-section {
    margin-bottom: 12px;
}

.zhora-settings-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    margin-bottom: 6px;
    display: block;
}

/* Толстая, солидная кнопка запуска спортивной игры */
.zhora-game-hero-btn {
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0a4ebd 0%, #1d4ed8 60%, #2563eb 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(10, 78, 189, 0.35);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zhora-game-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 78, 189, 0.45);
}

.zhora-game-hero-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zhora-game-hero-icon svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    fill: none;
}

.zhora-game-hero-content {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zhora-game-hero-title {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: 0.2px;
}

.zhora-game-hero-desc {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.15;
}

.zhora-game-hero-badge {
    background: #ffffff;
    color: #0a4ebd;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Симметричная сетка 2-х колонок для 10 видов спорта (5 строк по 2 кнопки) */
.zhora-sports-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.zhora-sport-choice-btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    height: 40px;
    padding: 0 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    transition: all 0.18s ease;
    overflow: hidden;
}

.zhora-sport-choice-btn:hover {
    border-color: var(--zhora-primary);
    background: #eff6ff;
    transform: translateY(-1px);
}

.zhora-sport-choice-btn.active {
    background: var(--zhora-primary);
    border-color: var(--zhora-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 78, 189, 0.3);
}

.zhora-sport-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0a4ebd;
}

.zhora-sport-choice-btn.active .zhora-sport-icon {
    color: #ffffff;
}

.zhora-sport-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    transition: stroke 0.18s ease;
}

.zhora-sport-name {
    font-size: 11.5px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.zhora-sport-choice-btn.active .zhora-sport-name {
    color: #ffffff;
}

/* Действия и служебные кнопки (Приём, Фраза, Звук) */
.zhora-settings-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.zhora-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.zhora-action-btn {
    height: 36px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #1e293b;
    border-radius: 8px;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.18s ease;
}

.zhora-action-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.zhora-action-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #0a4ebd;
}

.zhora-settings-close-icon-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.18s ease, background 0.18s ease;
}

.zhora-settings-close-icon-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.zhora-settings-close-icon-btn:hover {
    color: var(--zhora-accent);
    background: #fef2f2;
}

.zhora-dismiss-mascot-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    transition: all 0.2s ease;
}

.zhora-dismiss-mascot-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: var(--zhora-accent);
}

/* ============================================================
   ПЛАВНАЯ ЛЕВИТАЦИЯ И СТРУКТУРА ПЕРСОНАЖА
   ============================================================ */
.zhora-character-wrap {
    position: relative;
    width: 220px;
    height: 311px;
    pointer-events: auto;
    cursor: pointer;
    transform-origin: bottom center;
    /* Непрерывная плавная левитация: парит ВСЕГДА для всех видов спорта */
    animation: zhoraLevitate 4.8s ease-in-out infinite !important;
    transition: filter 0.25s ease;
}

/* Внутренний контейнер для интерактивных трюков и прыжков (не сбивает внешнюю левитацию) */
.zhora-character-motion {
    position: absolute;
    inset: 0;
    transform-origin: bottom center;
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Эффектный спортивный трюк при клике */
.zhora-character-motion.anim-trick {
    animation: zhoraTrickJump 1.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
}

@keyframes zhoraTrickJump {
    0%   { transform: translateY(0) scale(1, 1); }
    15%  { transform: translateY(5px) scale(1.04, 0.96); }  /* Подсед перед прыжком */
    40%  { transform: translateY(-24px) scale(0.96, 1.05); } /* Взлет в воздух */
    68%  { transform: translateY(-8px) scale(1.01, 0.99); }  /* Зависание на коронном ударе */
    86%  { transform: translateY(2px) scale(1.02, 0.98); }   /* Мягкое касание */
    100% { transform: translateY(0) scale(1, 1); }
}

/* Приветствие с взмахом крыла */
.zhora-character-motion.anim-wave {
    animation: zhoraWaveSpring 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes zhoraWaveSpring {
    0%   { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(-8px) rotate(1.8deg) scale(1.02); }
    55%  { transform: translateY(-3px) rotate(-1.2deg); }
    85%  { transform: translateY(1px) rotate(0.4deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes zhoraLevitate {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    35% {
        transform: translateY(-13px) rotate(0.8deg);
    }
    70% {
        transform: translateY(-4px) rotate(-0.5deg);
    }
}

/* Синхронная тень */
.zhora-ground-shadow {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.32) 0%, rgba(15, 23, 42, 0.06) 65%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    animation: zhoraShadowLevitate 4.8s ease-in-out infinite;
}

@keyframes zhoraShadowLevitate {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.32;
    }
    35% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.16;
    }
    70% {
        transform: translateX(-50%) scale(0.92);
        opacity: 0.24;
    }
}

/* Двойной слой с плавным cross-fade переходом */
.zhora-sprite-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 400% 200%;
    background-position: 0% 0%;
    filter: drop-shadow(0 10px 18px rgba(10, 78, 189, 0.16));
    will-change: opacity, background-position;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);

    /* Плавный градиент в 0 на нижних 18% высоты — никакого среза! */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.6) 88%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.6) 88%, transparent 99%);
}

.zhora-sprite-layer.layer-b {
    opacity: 0;
}

/* Отладочная сетка-шаблон */
.zhora-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 400% 200%;
    background-position: 0% 0%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 15;
    mix-blend-mode: difference;
}
.zhora-grid-overlay.show {
    opacity: 0.65;
}

/* Фолбэк для одиночных изображений */
.zhora-avatar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(10, 78, 189, 0.16));
    transition: opacity 0.25s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.6) 88%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.6) 88%, transparent 99%);
}

/* Интерактивный прыжок при клике */
.zhora-anim-jump {
    animation: zhoraJumpPop 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.3) !important;
}

@keyframes zhoraJumpPop {
    0%   { transform: translateY(0) scale(1, 1); }
    20%  { transform: translateY(4px) scale(1.04, 0.96); }
    50%  { transform: translateY(-24px) scale(0.96, 1.05); }
    75%  { transform: translateY(2px) scale(1.02, 0.98); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* Плашка с кричалкой (Comic Badge) */
.zhora-comic-badge {
    position: absolute;
    top: 15px;
    left: -20px;
    background: linear-gradient(135deg, #e5243b, #b91c1c);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(229, 36, 59, 0.45);
    border: 2px solid #fff;
    transform: scale(0) rotate(-15deg);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 30;
    pointer-events: none;
}

.zhora-pos-left .zhora-comic-badge {
    left: auto;
    right: -20px;
    transform: scale(0) rotate(15deg);
}

.zhora-comic-badge.show {
    transform: scale(1.15) rotate(-10deg);
}
.zhora-pos-left .zhora-comic-badge.show {
    transform: scale(1.15) rotate(10deg);
}

/* Эмодзи-искры */
.zhora-sparkle {
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    user-select: none;
    z-index: 25;
    animation: zhoraSparklePop 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zhoraSparklePop {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.4);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(var(--rot));
    }
}

/* ============================================================
   ПЛАВАЮЩИЙ МИНИ-ТРИГГЕР ПОСЛЕ СКРЫТИЯ (FLOATING RESTORE LAUNCHER)
/* ============================================================
   КНОПКА МАСКОТА «ЛЕБЕДЬ ЖОРА» В ПРАВОМ НИЖНЕМ УГЛУ
   (Согласованный дизайн preview.html с вращающейся надписью,
    сине-голубым флюид-градиентом, круглой обрезкой и подмигиванием)
   ============================================================ */

/* Контейнер в углу экрана (по умолчанию скрыт, показывается при закрытом маскоте) */
.zhora-launcher-wrap {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    --size: 115px;
    width: var(--size);
    height: var(--size);
    z-index: 99998;
    display: none;
    pointer-events: auto;
    user-select: none;
}

.zhora-launcher-wrap.zhora-pos-left {
    right: auto;
    left: max(16px, env(safe-area-inset-left));
}

/* При скрытии маскота активируется круглый лаунчер */
.zhora-is-dismissed .zhora-launcher-wrap {
    display: block;
    animation: zhoraLauncherEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zhoraLauncherEnter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Если пользователь нажал на крестик самой кнопки, отключаем её на время */
.zhora-launcher-hidden .zhora-launcher-wrap,
.zhora-launcher-wrap.is-temporarily-hidden {
    display: none !important;
}

/* Скрытое состояние основного маскота */
.zhora-is-dismissed .zhora-mascot-container {
    opacity: 0;
    transform: translateY(50px) scale(0.7);
    pointer-events: none;
}

/* Небольшой крестик сверху для временного отключения кнопки (появляется только при наведении!) */
.zhora-launcher-dismiss-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #64748b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.zhora-launcher-dismiss-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* При наведении на контейнер крестик плавно появляется */
@media (hover: hover) {
    .zhora-launcher-wrap:hover .zhora-launcher-dismiss-btn {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
}

.zhora-launcher-wrap:focus-within .zhora-launcher-dismiss-btn {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.zhora-launcher-dismiss-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #ef4444;
    transform: scale(1.12);
}

/* Компонент круглой кнопки .zhora */
.zhora {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    color: #536378;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    margin: auto;
    transition: transform .3s ease;
}

.zhora:focus-visible {
    outline: 2px solid #137ec0;
    outline-offset: 8px;
}

.zhora:active {
    transform: scale(.97);
}

.zhora::before {
    content: "";
    position: absolute;
    inset: 13.333%;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #8ac8ed00, 0 0 28px #54acfa00;
    transition: box-shadow .7s cubic-bezier(.22, 1, .36, 1);
    z-index: -2;
    pointer-events: none;
}

.zhora__disc {
    position: absolute;
    inset: 13.333%;
    border-radius: 50%;
    overflow: hidden;
    background: #8bbde9;
    box-shadow: 0 8px 24px #33577512;
    z-index: -1;
}

.zhora__fluid {
    position: absolute;
    inset: -24%;
    background: radial-gradient(ellipse at 20% 25%, #65d9fa 0, transparent 47%),
                radial-gradient(ellipse at 82% 30%, #1053ce 0, transparent 48%),
                radial-gradient(ellipse at 65% 85%, #b2e7ff 0, transparent 44%),
                radial-gradient(ellipse at 15% 80%, #0875e3 0, transparent 48%),
                #4088e8;
    filter: blur(8px);
    animation: zhora-fluid 6s ease-in-out infinite alternate;
}

.zhora__fluid::after {
    content: "";
    position: absolute;
    inset: 2%;
    border-radius: 46% 54% 70% 30%;
    background: radial-gradient(ellipse at 20% 40%, #a0edffa8, transparent 45%),
                radial-gradient(ellipse at 85% 65%, #479bffb8, transparent 48%);
    mix-blend-mode: screen;
    animation: zhora-fluid 4s ease-in-out infinite alternate-reverse;
}

.zhora__band {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.zhora__band circle {
    fill: none;
    stroke: #ffffff;
    stroke-width: 19;
}

.zhora__type {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: zhora-orbit 24s linear infinite;
    pointer-events: none;
}

.zhora__type text {
    fill: currentColor;
    font-family: Arial, sans-serif;
    font-size: 10.8px;
    font-weight: 600;
    letter-spacing: 3.1px;
}

.zhora__portrait {
    position: absolute;
    inset: 0;
    clip-path: url(#zhora-portrait-clip);
    pointer-events: none;
}

.zhora__head {
    position: absolute;
    left: 3.5%;
    top: 4%;
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}

.zhora__head--wink {
    opacity: 0;
    transition: opacity .14s ease-in-out;
    mask-image: radial-gradient(ellipse 16% 14% at 56% 28%, #000 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 16% 14% at 56% 28%, #000 70%, transparent 100%);
}

@media (hover: hover) {
    .zhora:hover::before {
        box-shadow: 0 0 0 1px #8ac8ed88, 0 0 24px #54acfa50, 0 0 42px #72c8ef24;
    }
}

.zhora:focus-visible::before,
.zhora.is-winking::before {
    box-shadow: 0 0 0 1px #8ac8ed88, 0 0 24px #54acfa50, 0 0 42px #72c8ef24;
}

@media (hover: hover) {
    .zhora:hover .zhora__head--wink {
        opacity: 1;
    }
}

.zhora:focus-visible .zhora__head--wink,
.zhora.is-winking .zhora__head--wink {
    opacity: 1;
}

@keyframes zhora-orbit {
    to { transform: rotate(360deg); }
}

@keyframes zhora-fluid {
    0%   { transform: translate(-7%, -4%) rotate(-25deg) scale(.9); }
    50%  { transform: translate(8%, 5%) rotate(65deg) scale(1.1); }
    100% { transform: translate(-3%, 7%) rotate(155deg) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
    .zhora__type,
    .zhora__fluid,
    .zhora__fluid::after {
        animation: none;
    }
    .zhora,
    .zhora__head,
    .zhora::before {
        transition: none;
    }
}

@media (max-width: 600px) {
    .zhora-launcher-wrap {
        --size: 90px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }
    .zhora-launcher-wrap.zhora-pos-left {
        left: 12px;
        right: auto;
    }
    .zhora-launcher-dismiss-btn {
        top: 2px;
        right: 2px;
        width: 22px;
        height: 22px;
    }
    .zhora-launcher-dismiss-btn svg {
        width: 10px;
        height: 10px;
    }
}

/* ============================================================
   МОДАЛЬНОЕ ОКНО МИНИ-ИГР «АРЕНА ИЖОРЕЦ» (SPORTS MINI-GAMES)
   ============================================================ */
.zhora-game-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zhora-game-modal-overlay.open {
    display: flex;
    opacity: 1;
}

.zhora-game-window {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 1000px;
    box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.35);
    overflow: hidden !important;
    border: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    animation: zhoraGamePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zhoraGamePop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.zhora-game-header {
    background: #ffffff;
    border-bottom: 1.5px solid #e2e8f0;
    color: #0f172a;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zhora-game-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zhora-game-close-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #64748b;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zhora-game-close-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.zhora-game-close-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: var(--zhora-accent);
    transform: scale(1.06);
}

.zhora-game-header-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zhora-game-header-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--zhora-primary);
    text-transform: uppercase;
}

.zhora-game-header-title h3 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}

/* Аккуратный блок «Бонус за забег» в правом верхнем углу шапки модалки */
.zhora-header-bonus {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 5px 12px;
    min-width: 270px;
    max-width: 330px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.zhora-header-bonus-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.2;
}

.zhora-header-bonus-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0a4ebd;
}

.zhora-bonus-gift-icon {
    font-size: 13px;
    line-height: 1;
}

.zhora-header-bonus-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 4px;
}

.zhora-header-bonus-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.zhora-header-bonus-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #0a4ebd);
    border-radius: 2px;
    transition: width 0.25s ease;
}

.zhora-header-bonus-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.zhora-header-bonus-hint {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.zhora-header-bonus-btn {
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 5px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    animation: zhoraPulseBtn 1.5s infinite;
}

@keyframes zhoraPulseBtn {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

/* Игровая арена Iframe игры «Лебедь на старте» (без скроллбаров и с точной высотой) */
.zhora-game-body {
    padding: 0;
    background: #f1f4f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden !important;
    width: 100%;
}

#zhora-game-iframe {
    display: block;
    width: 100%;
    height: 448px;
    min-height: 448px;
    border: 0;
    background: #f1f4f8;
    overflow: hidden !important;
}

/* ============================================================
   АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
   ============================================================ */
@media (max-width: 640px) {
    .zhora-mascot-container {
        bottom: 0px;
        right: 10px;
    }
    .zhora-mascot-container.zhora-pos-left {
        left: 10px;
    }
    .zhora-character-wrap {
        width: 165px;
        height: 233px;
    }
    .zhora-bubble {
        max-width: 230px;
        font-size: 12px;
        padding: 9px 12px;
        margin-right: 8px;
    }
    .zhora-bubble-text {
        font-size: 12px;
    }
    .zhora-settings-menu {
        width: 290px;
        bottom: 270px;
        right: 10px;
    }
    .zhora-sports-selector {
        grid-template-columns: 1fr 1fr;
    }
    .zhora-game-window {
        max-width: 98vw;
        border-radius: 14px;
    }
    .zhora-game-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px;
    }
    .zhora-header-bonus {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    #zhora-game-iframe {
        min-height: 440px;
        height: 440px;
    }
}


/* ============================================================
   КНОПКА И ССЫЛКА В ФУТЕРЕ ДЛЯ ВОЗВРАТА МАСКОТА (data-zhora-open)
   ============================================================ */
.zhora-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16) 0%, rgba(37, 99, 235, 0.22) 100%);
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    border-radius: 9999px;
    color: #0284c7;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
    user-select: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* При нахождении в темном футере (например site-footer с фоном #0f172a) */
footer .zhora-footer-btn,
.site-footer .zhora-footer-btn,
.footer .zhora-footer-btn,
.zhora-footer-btn--dark {
    color: #e0f2fe;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(30, 58, 138, 0.35) 100%);
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.zhora-footer-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45) !important;
}

.zhora-footer-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3) !important;
}

.zhora-footer-btn:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
}

.zhora-footer-btn .zhora-footer-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zhora-footer-btn:hover .zhora-footer-btn-icon {
    transform: rotate(18deg) scale(1.2);
}

/* Компактный вариант кнопки для панели/полосы футера */
.zhora-footer-btn--compact {
    padding: 6px 14px;
    font-size: 12px;
    gap: 6px;
}
.zhora-footer-btn--compact .zhora-footer-btn-icon {
    font-size: 13px;
}

/* Текстовая ссылка в футере */
.zhora-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.zhora-footer-link:hover {
    color: #38bdf8;
    text-decoration: underline;
    transform: translateX(2px);
}

.zhora-footer-link:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Обертка при автоматическом выводе через wp_footer */
.zhora-auto-footer-bar {
    position: relative;
    width: 100%;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #94a3b8;
    font-size: 13px;
}

/* ============================================================
   ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ (TOAST) ПРИ СКРЫТИИ МАСКОТА / КНОПКИ
   ============================================================ */
.zhora-dismiss-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 380px;
    background: #0f172a;
    color: #ffffff;
    border: 1.5px solid #0ea5e9;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(14, 165, 233, 0.35);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.35;
    box-sizing: border-box;
}

.zhora-dismiss-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.zhora-toast-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    padding-top: 2px;
}

.zhora-toast-content {
    flex: 1;
    min-width: 0;
}

.zhora-toast-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 3px;
    letter-spacing: -0.2px;
}

.zhora-toast-text {
    font-size: 12.5px;
    color: #e2e8f0;
}

.zhora-toast-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    margin-left: 4px;
}

.zhora-toast-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 600px) {
    .zhora-dismiss-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: calc(100vw - 32px);
    }
}


/* Корректировка тени под ногами пловца (убираем зазор из-за пустых пикселей в спрайте) */
[data-sport="swimmer"] .zhora-ground-shadow,
.zhora-sport-swimmer .zhora-ground-shadow {
    bottom: 22px !important;
    width: 122px !important;
    height: 16px !important;
}

/* v4.4: compact, non-obstructive widget; no work while hidden. */
.zhora-launcher-wrap{--size:104px;z-index:30;bottom:max(18px,env(safe-area-inset-bottom));}
.zhora-launcher-wrap .zhora-launcher-dismiss-btn{width:28px;height:28px;}
.zhora__type{will-change:transform;transform-box:view-box;transform-origin:50% 50%;backface-visibility:hidden;}
.zhora__fluid{filter:none;animation-duration:10s;}
.zhora__fluid::after{mix-blend-mode:normal;animation-duration:7s;}
.zhora__head--wink{transition:opacity .1s ease-out;}
.zhora[aria-busy="true"]{opacity:.7;cursor:progress;}
.zhora-suspended *,.zhora-suspended *::before,.zhora-suspended *::after,
.zhora-is-dismissed .zhora-mascot-container *{animation-play-state:paused!important;}
.zhora-is-dismissed .zhora-mascot-container{visibility:hidden;}
.zhora-is-dismissed .zhora-mascot-container *{pointer-events:none!important;}
#zhora-launcher-shell[hidden]{display:none!important;}
@media(max-width:600px){.zhora-launcher-wrap{--size:84px;bottom:max(16px,env(safe-area-inset-bottom));}}
@media(prefers-reduced-motion:reduce){.zhora *,.zhora *::before,.zhora *::after{animation:none!important;transition:none!important;}}

.zhora-mascot-container{z-index:35;bottom:max(18px,env(safe-area-inset-bottom));}
.zhora-character-wrap{width:210px!important;height:250px!important;}
.zhora-settings-menu{max-height:min(520px,calc(100dvh - 100px));overflow-y:auto;overscroll-behavior:contain;}
.zhora-bottom-dock{opacity:1;transform:none;}
.zhora-bubble:not(.zhora-visible){visibility:hidden;pointer-events:none;}
.zhora-game-modal-overlay{z-index:999999;}
.zhora-game-loading{padding:32px;text-align:center;color:#536378;font:500 15px Arial,sans-serif;}
.zhora-game-loading[hidden]{display:none;}
@media(max-width:640px){.zhora-character-wrap{width:150px!important;height:180px!important;}.zhora-mascot-container{right:12px;}.zhora-settings-menu{bottom:70px;max-height:calc(100dvh - 130px);}.zhora-game-window{max-height:calc(100dvh - 24px);overflow:auto;}}
html[data-iz-a11y-motion="off"] #zhora-mascot-root *,html[data-iz-a11y-motion="off"] #zhora-launcher-shell *{animation:none!important;transition:none!important;}

/* Keep both launcher and expanded mascot off the photographic hero. */
html.zhora-hero-visible .zhora-launcher-wrap,
html.zhora-hero-visible .zhora-mascot-container{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
html.zhora-hero-visible #zhora-launcher-shell *,
html.zhora-hero-visible #zhora-mascot-root *{animation-play-state:paused!important}

/* Explicit square geometry prevents theme min-height/padding from making circles oval. */
#zhora-mascot-root .zhora-dock-icon-btn,
#zhora-mascot-root .zhora-dock-btn{box-sizing:border-box;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;flex:0 0 36px;padding:0;aspect-ratio:1;border-radius:50%;line-height:1}
#zhora-mascot-root .zhora-game-close-btn,
#zhora-mascot-root .zhora-settings-close-icon-btn{box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;max-width:32px;max-height:32px;flex:0 0 32px;padding:0;aspect-ratio:1;border-radius:50%;line-height:1}

.zhora-launcher-wrap .zhora-launcher-dismiss-btn{box-sizing:border-box;width:28px;height:28px;min-width:28px;min-height:28px;max-width:28px;max-height:28px;flex:0 0 28px;padding:0;aspect-ratio:1;border-radius:50%;line-height:1}

/* Sportclub5 palette and typography. Fonts reuse the site's existing font faces. */
:root{--zhora-primary:var(--color-primary,#087ee8);--zhora-primary-dark:#0068c6;--zhora-ui-bg:var(--color-surface,#fff);--zhora-ui-soft:var(--color-surface-soft,#f4f6fa);--zhora-ui-ink:var(--color-ink,#536378);--zhora-ui-line:var(--color-line,#dce4ef)}
html[data-zhora-theme=dark]{--zhora-ui-bg:var(--color-surface,#172536);--zhora-ui-soft:var(--color-surface-soft,#112031);--zhora-ui-ink:var(--color-ink,#e2eaf3);--zhora-ui-line:var(--color-line,#34465c)}
#zhora-mascot-root{font-family:Proxima,Arial,sans-serif;color:var(--zhora-ui-ink)}
#zhora-mascot-root button,#zhora-mascot-root select{font-family:inherit}
#zhora-mascot-root :is(.zhora-settings-menu,.zhora-bubble,.zhora-game-modal-content,.zhora-game-header,.zhora-dock-icon-btn,.zhora-settings-close-icon-btn,.zhora-game-close-btn){background:var(--zhora-ui-bg);color:var(--zhora-ui-ink);border-color:var(--zhora-ui-line)}
#zhora-mascot-root :is(.zhora-settings-title,.zhora-game-header h2){font-family:Bounded,Proxima,Arial,sans-serif;font-weight:400;color:var(--zhora-ui-ink)}
#zhora-mascot-root :is(.zhora-settings-sub,.zhora-settings-label,.zhora-game-hero-subtitle){color:var(--zhora-ui-ink)}
#zhora-mascot-root :is(.zhora-sport-choice-btn,.zhora-action-btn){background:var(--zhora-ui-soft);color:var(--zhora-ui-ink);border:1px solid var(--zhora-ui-line);border-radius:8px;box-shadow:none}
#zhora-mascot-root :is(.zhora-game-hero-btn,.zhora-bubble-game-btn){background:var(--zhora-primary);border-radius:12px;color:#fff;box-shadow:none}
#zhora-mascot-root :is(.zhora-game-hero-btn,.zhora-bubble-game-btn):hover{background:var(--zhora-primary-dark)}
#zhora-mascot-root .zhora-sport-choice-btn.active{border-color:var(--zhora-primary);color:var(--zhora-primary)}