@font-face {
    font-family: 'Dodo Narrow';
    src: url('../assets/fonts/Dodo-Narrow.ttf') format('truetype');
}

/* --- ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ --- */
:root {
    /* Базовые цвета */
    --bg-color-primary: #FF560D;
    --color-secondary: #FFCF09;
    --color-accent: #F31973;
    
    /* Текст и нейтральные цвета */
    --color-text: #ffffff;
    --color-black: #000000;
    --color-gray-light: #D0D0D0;
    --color-gray-line: #D9D9D9;

    /* Дополнительные оттенки UI (Карточки, обводки) */
    --color-accent-light: #FFCAE0;
    --color-card-bg: #F35D9B;
    --color-card-locked: #DF0A63;
    
    /* Системные цвета */
    --color-error: #D93E0A;

    /* Шрифты и Z-index */
    --font-main: 'Dodo Narrow', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    
    --z-bg: 0;
    --z-ui: 10;
    --z-preloader: 20;
    --z-screens: 30;
    --z-alerts: 40;
    --z-modal: 50;
}

body { 
    margin: 0; 
    overflow: hidden; 
    font-family: var(--font-main); 
    background-color: var(--color-text); 
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    -webkit-touch-callout: none;
}

img {
    -webkit-touch-callout: none; 
    -webkit-user-drag: none;     
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;      
}

/* --- УТИЛИТЫ --- */
.text-white { color: var(--color-text); }

.text-yellow { color: var(--color-secondary) !important; }

/* Модальные окна и элементы AR, которые открываются точечно (не через стейт) */
#exit-confirm-modal,
#collected-hero-modal,
#countdown-overlay,
#countdown-title,
#countdown-timer,
#rec-blinker,
#rec-indicator,
#dance-progress-wrapper,
#secret-unlocked-state,
#instr-android {
    display: none;
}

#camerafeed {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: var(--z-bg);
}

/* --- ОБЩИЕ ЭКРАНЫ И КОНТЕЙНЕРЫ --- */
.ui-screen {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100dvh;
    background-color: var(--color-secondary);
    z-index: var(--z-screens);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    transform: translateZ(0);
}

.screen-bg-frame {
    position: absolute;         
    left: 50%;       
    width: 101%;
    min-width: 390px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform-origin: center bottom; 
}

/* Универсальный контейнер для центрирования */
.auth-container, 
.new-login-content, 
.permission-container, 
.permission-denied-container, 
.hero-selection-container,
.loading-container,
.collection-container,
.pizza-ready-container,
.reward-container,
.share-container,
.collected-hero-container,
.error-container {
    width: 340px;
    max-width: 340px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(var(--app-scale, 1));
}

.auth-container,
.new-login-content,
.loading-container,
.error-container {
    margin-top: auto;
    margin-bottom: max(0px, env(safe-area-inset-bottom));
    transform-origin: bottom center; 
}

.hero-selection-container,
.permission-container,
.collection-container,
.pizza-ready-container,
.reward-container,
.permission-denied-container,
.share-container {
    margin-top: auto; 
    margin-bottom: auto; 
    transform-origin: center center; 
}

.new-login-content { align-items: flex-start; }

/* --- КНОПКИ --- */
.action-btn {
    background-color: var(--color-accent);
    color: var(--color-text);
    border: none;
    border-radius: 100px;
    width: 340px;
    max-width: 90%;
    height: 50px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) scale(var(--app-scale, 1)); 
    transform-origin: bottom center;
    font-size: 21px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.1s;
    z-index: var(--z-ui);
}

/* Сохраняем центрирование при нажатии */
.action-btn:active { transform: translateX(-50%) scale(calc(var(--app-scale, 1) * 0.96)); }

/* Модификатор для кнопок внутри модальных окон */
.action-btn.static-btn {
    position: relative;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 12px auto;
    width: 100%;
}

.action-btn.static-btn:active { transform: scale(0.96); }

.login-action-btn {
    border: none;
    border-radius: 100px;
    width: 100%;
    height: 50px; 
    box-sizing: border-box;
    padding: 0 15px; 
    font-size: 21px; 
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-action-btn:active { transform: scale(0.96); }

.btn-white { 
    background-color: var(--color-text); 
    color: var(--color-accent); 
}

.btn-pink { 
    background-color: var(--color-accent); 
    color: var(--color-text); 
}

/* --- МОДАЛЬНЫЕ ОКНА И АЛЕРТЫ --- */
.fullscreen-alert {
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100dvh;
    z-index: var(--z-alerts); 
    display: none; 
    align-items: center; justify-content: center; 
    background-color: var(--bg-color-primary); 
}

.fullscreen-alert img { 
    width: 300px; 
    max-width: 80%; 
    border-radius: 20px; 
}

.modal-overlay {
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: var(--z-modal); 
    display: flex;
    align-items: center; justify-content: center;
}

/* --- ЭКРАН СОБРАННОГО ГЕРОЯ --- */
.collected-hero-container {
    width: 340px;
    max-width: 340px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(var(--app-scale, 1));
    margin-top: auto;
    margin-bottom: auto;
    transform-origin: center center;
}

.collected-back-pos {
    position: absolute;
    top: -29.5px;
    left: 0;
    z-index: 10;
}

.collected-pizza-bg {
    position: absolute;
    top: -95px; 
    right: -170px; 
    width: 360px; 
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.collected-hero-image {
    width: 340px; 
    height: 380px; 
    object-fit: contain;
    z-index: 2;
    margin-top: 90px; 
    margin-bottom: 5px;
    transform: scale(1.5); 
}

.collected-hero-image-front {
    position: absolute;
    top: 90px; 
    left: 50%;
    width: 340px; 
    height: 380px; 
    object-fit: contain;
    z-index: 4; 
    pointer-events: none;
    display: none; 
    transform: translateX(-50%) scale(1.5); 
}

.collected-title-block {
    position: relative;
    font-size: 67px;
    line-height: 0.8;
    text-align: center;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 110px;
    justify-content: flex-start;
    margin-top: -60px;
    margin-bottom: 60px;
}

.collected-title-block::before {
    content: '';
    position: absolute;
    top: -250px;
    left: calc(50% + 75px);
    width: 1500px; 
    height: 1500px; 
    background-image: url('../assets/textures/yellow-frame.svg');
    background-size: 100% auto; 
    background-position: center top;
    background-repeat: no-repeat;
    transform: translateX(-50%); 
    transform-origin: center top;
    z-index: -1; 
}

.collected-title-block .text-pink {
    color: var(--color-accent);
}

/* Базовый стиль для всех декоративных картинок текста */
.decor-img {
    position: absolute;
    height: auto;
    z-index: -1; 
    pointer-events: none;
}

.decor-top-left {
    width: 120px;
    bottom: 90px;
    left: -65px; 
    transform: rotate(33deg);
}

.decor-bottom-left {
    width: 205px;
    top: 110px;
    left: -90px; 
    transform: rotate(-38deg); 
}

.decor-bottom-right {
    width: 250px;
    bottom: -130px; 
    right: -110px;
}

/* Модалка выхода */
.custom-exit-modal {
    width: 294px; 
    min-height: 140px; /* Меняем height на min-height, чтобы окно могло "дышать" */
    background-color: var(--color-secondary);
    border-radius: 45px;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    padding: 25px 29px; 
    box-sizing: border-box;
    transform: scale(var(--app-scale, 1));
    transform-origin: center center;
}

.exit-modal-title {
    color: var(--color-card-locked); 
    font-size: 25px; 
    margin: 0 0 15px 0; /* Сбрасываем браузерные отступы и задаем только расстояние до кнопок */
}

.exit-modal-buttons { 
    display: flex; 
    gap: 15px; 
    width: 100%; 
    justify-content: center; 
}

.exit-btn-custom {
    width: 130px; 
    height: 50px; 
    border-radius: 100px;
    font-size: 22px; 
    cursor: pointer;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: transform 0.1s;
}

.exit-btn-custom:active { transform: scale(0.95); }

.exit-btn-yes { 
    background: var(--color-text); ; 
    color: var(--color-card-locked); 
    border: 2px solid var(--color-text); 
}

.exit-btn-no { 
    background: var(--color-card-locked); 
    color: var(--color-text); 
    border: none; 
}

/* --- ПРЕЛОАДЕР И UI-СЛОЙ AR --- */
#preloader {
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: var(--z-preloader);
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: center; 
    transition: opacity 0.5s ease;
}

#loading-title {
    font-size: 44px; 
    line-height: 0.8; 
    text-align: center; 
    margin-bottom: 0px; 
    z-index: 1;
}

/* Резервируем фиксированное место под точки */
.animated-dots {
    display: inline-block;
    width: 35px; 
    text-align: left;
}

/* Сама анимация остается как была */
.animated-dots::after {
    content: '';
    animation: typing-dots 1.5s infinite step-end;
}

@keyframes typing-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

#loading-hero-img {
    width: 345px; 
    height: auto; 
    object-fit: contain;
    z-index: 1; 
    margin-bottom: 40px;
}

#loading-bar-container {
    width: 95%; 
    height: 35px; 
    background: rgba(255, 255, 255, 0.6);
    border: 4px solid var(--color-accent); 
    border-radius: 35px; 
    padding: 0; 
    box-sizing: border-box;
    margin-bottom: 20px; 
    overflow: hidden; 
    box-shadow: inset 0 0 0 2px var(--color-accent); 
    transform: translateZ(0);
}

#loading-bar-fill {
    width: 0%; 
    height: 100%; 
    background: var(--color-accent); 
    border-radius: 35px; 
    
    min-width: 20px; 
    opacity: 0; 
    transition: width 0.2s linear, opacity 0.2s ease; 
}

/* --- ЗВЕЗДОЧКИ --- */
.white-star {
    position: absolute;
    background-image: url('../assets/textures/star-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0; 
    animation: pulse-star 2.5s ease-in-out infinite;
}

/* Плавное увеличение масштаба */
@keyframes pulse-star {
    0%, 100% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.15);
    }
}

/* --- ЭКРАНЫ АВТОРИЗАЦИИ --- */
.top-brand-logo {
    position: absolute;
    top: max(20px, env(safe-area-inset-top)); 
    left: 0; 
    width: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 10; 
    pointer-events: none; 
}

.top-brand-logo img { 
    height: 32px; 
    width: auto; 
    object-fit: contain; 
}

/* Приветствие */
.welcome-text-block {
    position: relative; 
    width: 100%; 
    max-width: 340px; 
    text-align: center; 
    z-index: -1; 
    margin-bottom: 160px; 
}

/* Общий стиль для наклонных заголовков */
.welcome-title, .new-login-title, .denied-title, .secret-title {
    line-height: 1;
    transform-origin: left bottom;
}

.welcome-title {
    color: var(--color-text); 
    font-size: 67px; 
    line-height: 0.8;
    margin: 0 0 5px 0; 
    letter-spacing: 0.5px;
    display: inline-block; 
}

.welcome-subtitle {
    color: var(--color-text); 
    font-size: 67px; 
    line-height:  0.8;
    margin: -5px 0 0 0; 
}

.auth-bg-image {
    position: absolute; 
    left: 50%;                   
    transform: translateX(-50%); 
    bottom: 205px; 
    width: 190px; 
    height: auto; 
    z-index: -1; 
    object-fit: contain; 
    pointer-events: none; 
}

.auth-card {
    background-color: var(--color-text);
    border-radius: 45px;
    padding: 10px 16px 16px 16px;
    width: 100%;
    box-sizing: border-box;
}

.auth-title {
    font-weight: normal;
    color: var(--color-accent);
    font-size: 24.73px;
    margin: 0 0 10px 0; 
    line-height: 1;
    text-align: center;
}

.input-group { 
    position: relative; 
    width: 100%; 
    margin-bottom: 5px; 
}

.input-icon {
    position: absolute; 
    left: 12px; 
    top: 50%;
    transform: translateY(-50%); 
    width: 24px; 
    height: 24px; 
    object-fit: contain; 
}

#login-input {
    width: 100%; 
    padding: 12px 15px 12px 50px; 
    border: 1px solid var(--color-accent-light); 
    border-radius: 100px;
    font-family: var(--font-secondary);
    font-size: 13.91px; 
    color: var(--color-black);
    outline: none; 
    box-sizing: border-box; 
    text-align: left;
    text-transform: uppercase;
}

#login-input::placeholder { 
    color: var(--color-gray-light); 
    text-transform: none; 
}

#login-input:focus { border-color: var(--color-accent); }

#login-error-text {
    opacity: 0; 
    color: var(--color-error); 
    font-size: 13px; 
    text-align: left; 
    margin: -3px 0 7px 5px; 
    height: 15px; 
    transition: opacity 0.2s ease-in-out; 
    pointer-events: none;
    display: block;
}

.auth-divider {
    color: var(--color-text);
    font-size: 24.73px; 
    margin: 0px 0; 
}

.new-player-btn-modern {
    background-color: var(--color-accent); 
    border: none;
    border-radius: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    width: 100%; 
    padding: 10px 16px;
    z-index: 3; 
    cursor: pointer; 
    transition: transform 0.1s;
}

.new-player-btn-modern:active { transform: scale(0.96); }

.icon-user-wrapper {
    width: 44px;  
    height: 44px; 
    background-color: var(--color-text);
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
}

.icon-user-wrapper img { 
    width: 30px; 
    height: auto; 
}

.new-player-text-wrapper {
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    flex-grow: 1; 
    padding: 0 15px;
    height: 44px; 
    justify-content: center;
}

.new-player-title-modern { 
    color: var(--color-text); 
    font-size: 24.73px; 
    margin-bottom: 2px; 
    line-height: 1; 
    margin-top: -6.25px; 
}
.new-player-subtitle-modern { 
    color: var(--color-accent-light); 
    font-size: 12px; 
    font-family: var(--font-secondary); 
    font-weight: 400; 
    text-transform: none; 
    line-height: 1; 
}

.new-player-arrow { width: 16px; }

/* Новый логин */
.new-login-title {
    font-size: 67px; 
    margin-bottom: 55px;
    margin-top: -35px;
    line-height: 0.8;
    text-align: left;
}

.new-login-hero-bg {
    position: absolute; 
    bottom: 300px; 
    right: -5px; 
    width: 220px; 
    height: auto; 
    z-index: 1; 
    pointer-events: none;
}

.new-login-screenshot {
    position: absolute; 
    left: 0px; 
    bottom: 545px; 
    width: 180px; 
    height: auto; 
    z-index: -2; 
    pointer-events: none; 
}

#copy-login-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

#copy-login-btn {
    height: 46px;
    padding: 8px 32px;
}

#continue-login-btn {
    height: 53px;
    padding: 8px 32px;
}

.warning-text { text-align: left; }

.login-info-card {
    background: var(--color-text); 
    width: 100%; 
    border-radius: 41px;
    padding: 12px 15px 20px 15px; 
    margin-bottom: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-pill {
    background-color: var(--color-accent); 
    border-radius: 93px; 
    padding: 18px 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#generated-login-display {
    color: var(--color-text); 
    font-size: 26px; 
    word-wrap: break-word;
    line-height: 1;
    letter-spacing: 1px;
}

.warning-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.warning-icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    margin-top: -3px;
}

.warning-icon img { 
    width: 48px; 
    height: 48px; 
    object-fit: contain; 
}

.warning-text {
    display: flex;
    flex-direction: column;
}

.warning-title { 
    color: var(--color-accent);
    font-size: 19px; 
    line-height: 1.1;
    margin-bottom: 4px; 
}

.warning-desc { 
    color: var(--color-accent);
    font-size: 12px; 
    line-height: 1; 
    font-family: var(--font-secondary); 
}

.new-login-buttons { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

/* --- ЭКРАНЫ ДОСТУПА К КАМЕРЕ --- */
#permission-screen { padding: 20px; }

.permission-title {
    font-size: 44px; 
    align-self: flex-end;
    text-align: left; 
    width: 100%; 
    padding-left: 170px; 
    padding-right: 10px;
    line-height: 0.8; 
    margin-top: 15px;
    margin-bottom: 80px; 
    box-sizing: border-box; 
    z-index: 3;
}

.permission-hero-bg {
    position: absolute; 
    left: -30px; 
    top: 10px;
    width: 235px; 
    height: auto; 
    z-index: 0; 
    pointer-events: none;
}

.permission-card-modern {
    background: var(--color-text); 
    border-radius: 44px;
    padding: 30px 15px 20px 15px; 
    width: 100%; 
    position: relative;
    box-sizing: border-box; 
}

#permission-main-state {
    width: 100%;
}

.camera-icon-badge {
    position: absolute; 
    top: -30px; 
    left: 50%;
    transform: translateX(-50%); 
    width: 65px; 
    height: 65px; 
    object-fit: contain;
}

/* --- ОБНОВЛЕННЫЕ СТИЛИ КАРТОЧКИ КАМЕРЫ --- */
.permission-desc {
    font-size: 21px; 
    color: var(--color-accent);
    text-align: center; 
    margin: 15px 0 22px 0;
    line-height: 1;
    letter-spacing: -0.3px;
}

/* Контейнер слайдера со стрелками */
.perm-slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

.perm-arrow {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.perm-arrow img {
    width: 34px;
    height: auto;
    object-fit: contain;
    display: block;
}

.perm-arrow:active { 
    transform: scale(0.85); 
}

/* Вьюпорт слайдера */
.perm-slider-viewport {
    overflow: hidden; 
    flex-grow: 1;
    margin: 0 2px;
    padding-top: 20px; 
    margin-top: -20px; 
}

/* Лента со слайдами */
.perm-slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.3s ease-in-out;
    gap: 16px;
}

/* Серая капсула */
.perm-feature-pill {
    background-color: #F0F0F0;
    border-radius: 18px;
    flex: 0 0 100%;
    position: relative;
    padding: 22px 10px 18px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    box-sizing: border-box;
}

/* Розовая иконка галочки */
.perm-check-circle {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 24.83px;
    height: 24.83px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perm-check-circle img {
    width: 24px;
    height: auto;
    object-fit: contain;
}

.perm-feature-text {
    color: var(--color-black);
    font-size: 12px;
    line-height: 1;
    text-align: center;
    font-family: var(--font-secondary);
}

/* Пагинация (Точки) */
.perm-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-bottom: 25px;
}

.perm-dot {
    width: 10px;
    height: 10px;
    background-color: var(--color-accent-light);
    border-radius: 50%;
    transition: background-color 0.2s;
}

.perm-dot.active {
    background-color: var(--color-accent);
    transform: scale(1.2);
}

.privacy-link {
    display: block;
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--color-accent);
    text-decoration: underline;
    text-align: center;
    font-weight: bold;
    font-family: var(--font-secondary);
    transition: opacity 0.2s;
}

.privacy-link:active {
    opacity: 0.5;
}

/* Отказ в доступе */
.denied-title {
    font-size: 48px; 
    text-align: left;
    width: 100%; 
    z-index: 3;
    line-height: 0.8; 
    margin-top: -9px;
    margin-bottom: 39px; 
}

.denied-hero-block { 
    position: relative; 
    width: 100%; 
    height: 140px; 
}

.denied-booba-img {
    position: absolute; 
    right: -30px; 
    bottom: -69px; 
    width: 210px; 
    height: auto; 
    z-index: -1; 
    pointer-events: none;
}

.denied-bubble-img {
    position: absolute; 
    left: 5px; 
    top: -7px;   
    width: 180px; 
    height: auto; 
    z-index: -2; 
    pointer-events: none;
}

/* Табы ОС */
.os-tabs {
    display: flex; 
    justify-content: space-between; 
    gap: 12px;
    width: 100%; 
    margin-bottom: 16px; 
    z-index: 3;
}

.os-tab {
    flex: 1; 
    padding: 5px 0;
    border-radius: 100px; 
    font-size: 16px; 
    text-align: center; 
    cursor: pointer;
    border: 1px solid var(--color-text); 
    background-color: var(--color-text);
    color: var(--color-black);
    transition: all 0.2s; 
    font-family: inherit;
}

.os-tab.active {
    background-color: var(--color-secondary); 
    border-color: var(--color-text); 
    color: var(--color-text);
}

/* Инструкции */
.instructions-card {
    background: var(--color-text); 
    border-radius: 45px;
    padding: 10px 20px; 
    width: 100%; 
    box-sizing: border-box;
    height: 265px; 
}

.instruction-list { 
    position: relative; 
    height: 100%; 
}

.instruction-list::before {
    content: ''; 
    position: absolute; 
    top: 15px; 
    bottom: 30px; 
    left: 14px; 
    width: 2px; 
    background-color: var(--color-accent-light); 
    z-index: 1;
}

.step-item {
    display: flex;
    align-items: center; 
    position: relative; 
    z-index: 2;
    height: 25%; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
}

.step-item::after {
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 45px; 
    right: 0; 
    height: 1px; 
    background-color: var(--color-accent-light);
}

.step-item:last-child { 
    padding-bottom: 0; 
    margin-bottom: 0; 
}


.step-item:last-child::after { 
    display: none; 
}

.step-number {
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    background-color: var(--color-accent);
    color: var(--color-text); 
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 16px; 
    flex-shrink: 0;
}

.step-text { 
    font-size: 12px; 
    color: var(--color-black);
    font-family: var(--font-secondary);
    margin-left: 15px; 
    flex-grow: 1; 
    line-height: 1; 
    text-align: left;
}

.step-img { 
    height: 24px;
    width: auto; 
    margin-left: 10px; 
}

/* --- ПРОФИЛЬ (ВЕРХНЯЯ ПЛАШКА) --- */
.profile-top-bar {
    background: var(--color-text); 
    border-radius: 40px;
    width: 100%; 
    height: 56px; 
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    padding: 0 65px 0 60px; 
    box-sizing: border-box; 
    position: relative;
    margin-bottom: 5px; 
    transform: scale(0.88); 
    transform-origin: center top; 
}

.profile-avatar {
    position: absolute; 
    left: 10px; 
    top: 50%; 
    transform: translateY(-50%);
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    background-color: var(--color-card-bg);
    box-sizing: border-box; 
    overflow: hidden; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    z-index: 2;
}

.profile-avatar img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.profile-info { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    align-items: flex-start; 
}

.profile-login { 
    font-size: 16px; 
    font-weight: 900; 
    color: var(--color-accent);
    margin-bottom: 6px; 
    letter-spacing: 0.5px; 
    white-space: nowrap; 
}

.progress-dots { 
    display: flex; 
    align-items: center; 
    gap: 70px; /* Увеличиваем отступ здесь */
    position: relative; 
    width: 100%; 
    z-index: 1; 
}

.progress-dots .dot { 
    width: 12px;
    height: 12px; 
    border-radius: 50%; 
    position: relative; 
}

.progress-dots .dot.active { 
    background-color: var(--color-accent); 
    border: none; 
    width: 14px; 
    height: 14px; 
}

.progress-dots .dot.empty { 
    background-color: var(--color-text); 
    border: 1px solid var(--color-gray-light); 
}

/* Соединительные линии между точками */
.progress-dots .dot:not(:first-child)::before {
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: 50%; 
    /* Значение прибавки ОБЯЗАТЕЛЬНО должно быть равно новому gap */
    width: calc(100% + 70px); 
    height: 2px; 
    background-color: var(--color-gray-line); 
    transform: translateY(-50%); 
    z-index: -1; 
}

.progress-dots .dot.active:not(:first-child)::before { background-color: var(--color-accent); }

.collection-profile-bar { 
    width: 93%; 
    flex-shrink: 0; 
    transform-origin: left center;
    padding-right: 85px; 
}

.collection-profile-bar .progress-dots { 
    gap: 55px; /* Новое значение для коллекции (старое было 16px) */
}

.collection-profile-bar .progress-dots .dot:not(:first-child)::before { 
    width: calc(100% + 55px); /* Синхронизируем линию с новым gap */
}

.profile-progress-badge {
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%);   
    background-color: var(--color-secondary); 
    border-radius: 20px;            
    padding: 4px 12px; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    min-width: 68px;               
    min-height: 42px;
    box-sizing: border-box; 
    z-index: 2;
}

.profile-progress-badge .heroes-count-text { 
    font-size: 23px; 
    color: var(--color-accent); 
    line-height: 1; 
    margin-bottom: 0px; 
}

.profile-progress-badge .badge-text { 
    font-size: 6px; 
    color: var(--color-accent);
    font-family: var(--font-secondary); 
    margin-top: -2px; 
}

/* --- ГЛАВНОЕ МЕНЮ И КАРУСЕЛЬ --- */
.hero-title-block { 
    text-align: center; 
    margin-bottom: -50px; 
    margin-top: -10px;
    width: 100%; 
}

.hero-title { 
    font-size: 48px; 
    line-height: 1.05; 
    margin-bottom: 2px; 
}

.hero-subtitle { 
    font-size: 16px; 
    font-family: var(--font-secondary);
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: -5px;
    color: var(--color-text); 
    line-height: 1; 
}

.carousel-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    position: relative; 
}

.carousel-arrow {
    position: absolute; 
    top: 52%; 
    transform: translateY(-50%);
    width: 50px; 
    height: 50px; 
    background: transparent; 
    border: none;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    z-index: 10;
    padding: 0;
}

.carousel-arrow:active { transform: translateY(-50%) scale(0.9); }

.carousel-arrow img { width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

.carousel-arrow.left { left: 5px; } 

.carousel-arrow.right { right: 5px; }

.heroes-carousel-container {
    width: 100%; 
    display: flex; 
    overflow-x: hidden;
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth;
    scrollbar-width: none; 
    padding: 30px 0 25px 0; 
    box-sizing: border-box;
}

.heroes-carousel-container::after {
    content: '';
    display: block;
    flex: 0 0 1px;
}

.hero-card {
    position: relative; 
    flex: 0 0 250px; 
    width: 250px;
    height: 340px;
    scroll-snap-align: center; 
    background: transparent; 
    padding: 0; 
    margin: 20px 45px -20px 45px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}

.hero-card-bg {
    width: 100%; 
    height: 250px;
    background-color: var(--color-card-bg);
    border-radius: 50%; 
    margin-top: 10px;
    margin-bottom: -10px;
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative;
    flex-shrink: 0;
}

/* 3. Стили для имени героя */
.hero-name { 
    color: var(--color-accent);
    font-size: 44px;
    margin-top: 15px; 
    margin-bottom: -20px ;
    z-index: 3; 
    text-align: center;
    letter-spacing: 0.5px;
}

.hero-image {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    height: 100%; 
    max-width: none;
    object-fit: contain; 
    z-index: 2; 
    pointer-events: none;
}

.hero-status-icon { 
    position: absolute; 
    top: 15px; 
    right: 5px;
    width: 60px; 
    height: 60px; 
    z-index: 4; 
    object-fit: contain; 
}

.carousel-pagination { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 15px; 
    margin-top: 10px;
}

.page-dot { 
    width: 10px; 
    height: 10px; 
    background-color: rgba(255, 255, 255, 0.4); 
    border-radius: 50%; 
    transition: background-color 0.2s, transform 0.2s; 
}

.page-dot.active { 
    background-color: var(--color-text); 
    transform: scale(1.3); 
}

.hero-bottom-buttons { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin-top: 3px;
    margin-bottom: -3px;
}

/* --- ЭКРАН КОЛЛЕКЦИИ --- */
.collection-header { 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 21.5px; 
    margin-top: -1.5px;
}

.btn-back-simple {
    background: transparent; 
    border: none; 
    padding: 0; 
    width: 56px; 
    height: 56px; 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    flex-shrink: 0; 
    cursor: pointer; 
    transition: transform 0.1s;
}

.btn-back-simple:active { transform: scale(0.85); }

.btn-back-simple img { 
    width: 46px; 
    height: auto; 
    object-fit: contain; 
}

/* Секретный герой */
.secret-hero-block { 
    width: 100%; 
    margin-bottom: 20px; 
}

.secret-state { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
}

.secret-text { 
    text-align: center; 
    margin-left: -6px; 
}

.secret-subtitle { 
    font-size: 12px; 
    color: var(--color-text); 
    font-family: var(--font-secondary);
    line-height: 1; 
    margin-top: -13px;
    margin-bottom: 13px;
    margin-left: 10px;
}

.secret-img-right { 
    position: relative; 
    width: 135px; 
    height: 185px; 
    flex-shrink: 0;
    margin-right: 5px; 
}

.secret-bg-rect { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: var(--color-accent-light);
    border-radius: 13.98px; 
}

#secret-locked-state .secret-bg-rect {
    display: none;
}

.secret-silhouette { 
    position: absolute; 
    z-index: 2; 
    width: 240px; 
    height: auto;
    top: -35px;
    bottom: 10px;
    left: -35px; 
}

.secret-hero-unlocked { 
    position: absolute; 
    z-index: 5; 
    width: 230px; 
    height: auto; 
    top: 55%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

.secret-title { 
    font-size: 40px; 
    line-height: 1; 
    margin-bottom: 33px; 
    margin-top: -25px;
    color: var(--color-text); 
}

.secret-title .text-yellow { 
    font-size: 40px; 
    display: inline-block; 
}

#secret-unlocked-state .secret-text { 
    margin-top: 48px; 
}

#secret-unlocked-state .secret-title {
    margin-left: 2px;
    margin-right: -2px;
}

#secret-locked-state .secret-title {
    margin-bottom: 27px; 
    margin-top: 15px;
    line-height: 0.8;
}

#secret-unlocked-state {
    margin-top: -0.5px;
    margin-bottom: -8.5;
}

.btn-white-pink-text {
    background-color: var(--color-text);
    color: var(--color-accent);
    border: none;
}

#secret-locked-state {
    margin-top: 5px;
}

#secret-level-btn {
    width: 140px; 
    height: 45px; 
    margin-top: 10px; 
    margin-bottom: 10px;
    margin-left: 25px; 
    margin-right: 5px;
    font-size: 19px; 
    border-radius: 46px;
}

/* Сетка коллекции 3x2 */
.collection-grid-3x2 { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px 10px; 
    width: 100%; 
    margin-bottom: -11px; 
}

.col-card {
    background-color: transparent; 
    border-radius: 12px; 
    padding: 8px 4px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    box-shadow: none; 
    cursor: pointer;
    transition: transform 0.1s; 
    height: 170px;
    box-sizing: border-box;
}

.col-card:active { transform: scale(0.95); }

.col-card-img { 
    width: 100%; 
    height: 85px; 
    object-fit: contain; 
    margin-bottom: 4px; 
    transform-origin: bottom center; 
    transform: scale(1.2); 
}

.col-card.locked { 
    background-color: transparent; 
    cursor: default; 
    justify-content: flex-start; 
    padding-top: 35.5px; 
}

.col-card.locked:active { transform: none; }

.col-card-name-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    margin: -16px 0 22px 0;
    width: 100%;
    order: -1;
}

.col-card-name { 
    color: var(--color-secondary); 
    font-size: 19.33px; 
    margin: 0;
    line-height: 1; 
    text-align: center;
}

.col-card-pizza-img { 
    width: 26px; 
    height: 26px; 
    object-fit: contain; 
    display: block; 
    margin: -12px 0 3px 0; 
    transform: scale(2.5); 
    position: relative;
    z-index: 2;
}

.col-card-pizza { 
    color: var(--color-text);
    font-size: 12px; 
    font-family: var(--font-secondary);
    margin: 0; 
    text-align: center; 
    line-height: 1.1; 
}

.col-card-check { 
    position: relative; 
    width: 18.53px;
    height: 18.53px; 
    object-fit: contain; 
    margin-top: -2px;
}

.col-card-locked-circle {
    width: 85px; 
    height: 85px; 
    background-color: var(--color-card-locked); 
    border-radius: 50%; 
    margin-bottom: 4px; 
    transform-origin: bottom center; 
    transform: scale(1.2); 
    flex-shrink: 0;
}

.col-card-locked-star {
    position: absolute;
    top: 38px; 
    left: -2px;
    width: 100%; 
    height: 85px; 
    object-fit: contain;
    transform-origin: bottom center; 
    transform: scale(1.25); 
    z-index: 2;
    pointer-events: none; 
}

/* --- AR-ИНТЕРФЕЙС И ТАНЕЦ --- */
#ui-layer {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    text-align: center; 
    pointer-events: none; 
    z-index: var(--z-ui);
    font-size: 24px; 
    display: none; 
    padding-top: 20px; 
    box-sizing: border-box; 
}

#status-text { 
    color: var(--color-secondary); 
    display: inline-block; 
}

#countdown-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background: transparent;
    pointer-events: none; 
    z-index: 29;
}

#countdown-title {
    position: absolute; 
    top: calc(50% - 200px); 
    left: 50%; 
    transform: translateX(-50%) scale(var(--app-scale, 1)); 
    transform-origin: top center; 
    text-align: center; 
    font-size: 44px; 
    line-height: 0.8; 
    z-index: 30;
}

#countdown-timer {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(var(--app-scale, 1)); 
    transform-origin: center center; 
    font-size: 160px; 
    color: var(--color-text); 
    /* text-shadow: 7px 7px 0 var(--color-accent); */
    z-index: 30;
}

/* Индикаторы записи */
.rec-blinker {
    position: absolute; 
    top: max(20px, env(safe-area-inset-top)); 
    left: 20px; 
    height: 50px; 
    display: flex; 
    align-items: center; 
    color: var(--color-text); 
    font-size: 28px;
    z-index: 10;
    transform: scale(var(--app-scale, 1)); 
    transform-origin: top left; 
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.rec-dot { 
    width: 14px; 
    height: 14px; 
    background-color: var(--color-accent); 
    border-radius: 50%; 
    margin-right: 8px; 
    animation: pulse 1s infinite; 
}

.timer-icon { 
    width: 28px;
    height: 28px;
    object-fit: contain;
}

#dance-timer-text { 
    color: var(--color-accent); 
    font-size: 20px;
    font-family: var(--font-secondary);
    font-weight: 500; 
    line-height: 1;
    margin-top: 2px; 
    width: 75px; 
    text-align: center; 
    display: inline-block; 
}

.dance-timer-container {
    position: absolute; 
    top: max(20px, env(safe-area-inset-top)); 
    left: 50%; 
    transform: translateX(-50%) scale(var(--app-scale, 1)); 
    transform-origin: top center; 
    height: 50px; 
    box-sizing: border-box; 
    padding: 0 5px 0 15px; 
    background-color: var(--color-text); 
    border-radius: 50px;
    display: flex; 
    align-items: center; 
    z-index: 10;
}

/* Шкала прогресса танца */
#dance-progress-wrapper { 
    position: absolute; 
    bottom: 30px;
    left: 50%; 
    transform: translateX(-50%) scale(var(--app-scale, 1)); 
    transform-origin: bottom center; 
    width: 85%; 
    max-width: 360px; 
    z-index: 30; 
}

#dance-progress-container { 
    position: relative; 
    width: 100%; 
    height: 40px; 
    background-color: var(--color-text); 
    border-radius: 20px; 
    padding: 4px; 
    box-sizing: border-box; 
}

#dance-progress-fill { 
    width: 0%; 
    height: 100%; 
    background-color: var(--color-secondary);
    border-radius: 16px; 
}

#dance-progress-fire { 
    position: absolute; 
    top: 50%; 
    left: 0%; 
    transform: translate(-66%, -65%); 
    width: 36px;
    height: auto; 
    z-index: 2; 
}

/* Кнопки-картинки (Запись и Выход) */
.image-action-btn, .image-exit-btn { 
    background: transparent; 
    border: none;
    padding: 0;
    box-shadow: none; 
    pointer-events: auto; 
    cursor: pointer; 
}

.image-action-btn:active { transform: translateX(-50%) scale(calc(var(--app-scale, 1) * 0.95)); }

.image-exit-btn:active { transform: scale(calc(var(--app-scale, 1) * 0.95)); }

.image-action-btn { 
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%) scale(var(--app-scale, 1)); 
    transform-origin: bottom center; 
    width: auto;
    height: auto;
    display: block;
}

.image-action-btn img {
    width: 96px; 
    height: auto; 
    display: block; 
}

.image-exit-btn { 
    position: absolute; 
    top: max(20px, env(safe-area-inset-top)); 
    right: 20px; 
    transform: scale(var(--app-scale, 1)); 
    transform-origin: top right; 
}

.image-exit-btn img {
    width: 50px; 
    height: auto;
    display: block; 
}

#dance-stars {
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    width: 110px; 
    height: 110px; 
    transform: translateX(-50%); 
    pointer-events: none; 
    z-index: 5;
}

/* --- ЭКРАН "ПИЦЦА ГОТОВА" --- */
.pizza-ready-title {
    font-size: 75px;
    line-height: 0.8;
    text-align: center;
    margin-bottom: 60px; 
}

/* Поднимаем контейнер с пиццей выше кнопки */
.pizza-ready-container {
    z-index: 15;
}

.pizza-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 100px;
}

.pizza-img {
    width: 310px;
    height: auto;
    object-fit: contain;
    transform-origin: top center;
    animation: pizzaScaleDown 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; 
}

@keyframes pizzaScaleDown {
    0% {
        transform: scale(5);
        /* opacity: 0; */
    }
    100% {
        transform: scale(1);
        /* opacity: 1; */
    }
}

/* --- ЭКРАН НАГРАДЫ И ШЕРИНГА --- */
.reward-content-card {
    text-align: center; 
    width: 80%; 
    max-width: 320px;
    background-color: var(--color-text); 
    border-radius: 30px; 
    padding: 20px 10px 45px; 
}

.reward-hero-image { 
    width: 160px; 
    height: 160px; 
    object-fit: contain; 
    margin: 10px auto; 
}

.preview-screen-layout {
    display: none; 
    flex-direction: column; 
    align-items: center; 
    padding: env(safe-area-inset-top, 30px) 20px env(safe-area-inset-bottom, 30px); 
    box-sizing: border-box;
}

/* .preview-video-container {
    flex-grow: 1; 
    width: 100%; 
    max-width: 340px; 
    min-height: 0; 
    margin-bottom: 15px; 
    border-radius: 20px; 
    overflow: hidden; 
    background: var(--color-black);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
} */

.preview-video-player { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.preview-buttons-wrapper { 
    width: 100%; 
    max-width: 340px; 
    flex-shrink: 0; 
}

#share-btn { 
    background-color: var(--color-text); 
    color: var(--color-accent); 
    font-size: 18px;
}

#save-video-btn {
    font-size: 18px;
}

/* --- ЭКРАН НАГРАДЫ --- */
/* Блок аватара */
.reward-top-block {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 25px;
    margin-top: -30px;
}

.reward-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-hero-image-single {
    width: 220px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    margin-left: -20px;
}

/* Общий стиль для маленьких белых ярлыков */
.reward-label {
    background-color: var(--color-text);
    color: var(--color-accent);
    font-size: 14px;
    padding: 3px 18px;
    border-radius: 46px;
    display: inline-block;
}

/* Бэйдж */
.label-badge {
    position: absolute;
    bottom: -25px; 
    left: 200px; 
    z-index: 3;
    
    /* 1. Точные размеры из контейнера .v398_604 Фигмы */
    width: 128px;
    height: 46px;
    border-radius: 50px;
    
    /* Сохраняем оригинальный поворот бэйджа */
    transform: rotate(13deg);
    
    /* 2. Точный размер шрифта */
    font-size: 35px;
    line-height: 1;

    /* 3. Сбрасываем старые паддинги */
    padding: 0;

    /* 4. Настраиваем Flexbox для выравнивания */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    
    /* 5. Отступ сверху для компенсации базовой линии шрифта (как у label-hat) */
    padding-top: 3px; 
    
    box-sizing: border-box;
}

/* Центральный заголовок */
.reward-title-block {
    font-size: 60px;
    line-height: 0.8;
    text-align: center;
    margin: 5px 0 -25px 0;
    z-index: 3;
}

.reward-title-block .text-white {
    font-size: 60px; 
    display: inline-block;
    margin-bottom: -5px;
}

/* Блок с колпаком */
.reward-bottom-block {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.reward-hat-image {
    width: 240px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    margin-right: -25px;
    margin-bottom: 35px;
}

.label-hat {
    position: absolute;
    left: 15px;   
    bottom: 145px; 
    z-index: 3;

    /* 1. Точные размеры и форма из контейнера .v398_608 */
    width: 115px;
    height: 46px;
    border-radius: 50px;
    transform: rotate(-17deg);
    
    /* 2. Точный размер шрифта из текстового слоя .v398_610 */
    font-size: 35px;
    line-height: 1;

    /* 3. Сбрасываем старые паддинги, так как теперь есть жесткая ширина и высота */
    padding: 0;

    /* 4. Заменяем абсолютное позиционирование из Фигмы на Flexbox */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Прижимаем текст к верху, чтобы повторить логику Фигмы */
    
    padding-top: 3px;
    box-sizing: border-box;
}

/* --- ЭКРАН ШЕРИНГА --- */
/* Кнопка "Назад" */
.share-back-pos {
    align-self: flex-end; 
    margin-top: 15px;    
    margin-bottom: 5px;  
    margin-right: -10px;
    z-index: 10;
}

/* 1. Текст "Собери всех..." */
.share-title {
    font-size: 44px;
    line-height: 0.8;
    text-align: center;
    margin-top: 5px;    
    margin-bottom: 5px; 
    z-index: 3;
}

/* Контейнер картинки */
.share-hero-block {
    position: relative;
    /* Устанавливаем ширину на весь экран с учетом зума */
    width: calc(100vw / var(--app-scale, 1));
    /* Flexbox родителя отцентрирует его автоматически, margin-left не нужен! */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

/* Изображение героя */
.share-hero-img {
    width: 100%; 
    max-width: none;
    height: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    object-fit: cover; /* Или contain, если картинка не должна обрезаться */
    z-index: 2;
    transform: none; 
}

/* Контейнер с кнопками внизу */
.share-buttons-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 3;
    margin-bottom: 20px;
}

/* --- ДЕСКТОП ОВЕРЛЕЙ --- */
#desktop-overlay {
    background-color: var(--color-accent);
    padding: clamp(20px, 2vw, 40px);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center; 
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.desktop-orange-bg {
    position: absolute;
    top: 0;
    right: 0%;
    height: 130%;
    object-fit: cover;
    object-position: left center;
    z-index: -1;
    pointer-events: none; 
}

#desktop-overlay img {
    width: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.desktop-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 clamp(20px, 2vw, 40px);
}

.desktop-left {
    flex: 1;
    position: relative;
    z-index: 2;
    padding-left: max(0px, calc((100vw - 1920px) * 0.1));
    align-self: flex-start; 
    margin-top: clamp(5px, 0.5vh, 60px); 
}

.desktop-logo {
    z-index: 10;
    margin-bottom: clamp(30px, 2vh, 60px);
}

.desktop-logo img {
    height: clamp(45px, 7vw, 140px);
}

.desktop-title {
    font-size: clamp(30px, 7.4vw, 190px);
    line-height: 0.8;
    margin-bottom: clamp(20px, 4vh, 40px);
    width: fit-content;
    margin-top: clamp(15px, 6vw, 500px); 
    
    /* ИЗМЕНЕНИЯ ЗДЕСЬ: */
    text-align: left; /* Меняем выравнивание текста с center на left */
    margin-left: 0;   /* Обнуляем левый отступ (было clamp(20px, 4vw, 80px)), чтобы заголовок встал в одну линию с логотипом */
}

.desktop-info {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.5vw, 30px);
    margin-top: clamp(30px, 14vh, 240px);
}

.d-camera-icon {
    /* Высота равна ровно 4 строкам текста (размер шрифта из .desktop-info p умноженный на 4) */
    height: calc(clamp(5px, 1.6vw, 32px) * 4);   
    aspect-ratio: 1 / 1; /* Сохраняем иконку квадратной */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.d-camera-icon img {
    height: 100% !important; /* Картинка растягивается по новой высоте */
    width: 100% !important;
    object-fit: contain; /* Пропорции картинки не искажаются */
}

.desktop-info p {
    color: var(--color-text);
    font-size: clamp(5px, 1.6vw, 32px); 
    line-height: 1;
    font-family: var(--font-secondary);
    margin: 0;
}

.desktop-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 100%;
}

.qr-block-desktop {
    position: absolute;
    top: -2%; 
    left: 0%; 
    z-index: -2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform-origin: top left;
    transform: scale(0.9);
}

.qr-box {
    background: transparent;
    padding: clamp(5px, 1.5vw, 30px);
    border-radius: 8%;
    transform: rotate(-3deg); 
}

.qr-box img {
    width: clamp(10px, 14.5vw, 400px) !important;
    height: clamp(10px, 14.5vw, 400px) !important;
    border-radius: 8% !important;
    display: block;
}

#desktop-overlay .desktop-pizza-img {
    position: absolute;
    top: 0;         
    right: 0;       
    transform: translate(35%, -35%); 
    width: clamp(150px, 55vw, 1600px);          
    height: auto;
    z-index: 0;            
    pointer-events: none;  
}

#desktop-overlay .desktop-hero-comp {
    width: 100%;
    height: auto;
    display: block;
}

.hero-wrapper {
    position: fixed;
    top: 20%;
    left: 41%;
    width: clamp(300px, 55vw, 1500px); 
    z-index: 1;
}

/* --- ЭКРАН ОШИБКИ --- */
.error-title {
    font-size: 54px; 
    line-height: 0.8;
    text-align: center;
    width: 100%; 
    margin-bottom: 20px; 
    margin-top: -10px;
    z-index: 3;
    position: relative;
    top: -15px;
    left: -70px;
}

.error-title .text-yellow {
    font-size: 54px;
}

.error-hero-block {
    position: relative;
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
}

.error-booba-img {
    position: absolute;
    right: -55px;
    bottom: 0px;
    width: 290px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.error-bubble-img {
    position: absolute;
    left: 0;
    top: 50px;
    width: 155px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.error-desc {
    color: var(--color-text);
    font-size: 16px;
    line-height: 1;
    font-family: var(--font-secondary);
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 3;
}

.error-mark {
    position: absolute;
    background-image: url('../assets/textures/exclamation.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; 
    z-index: -1;
}

/* --- МЕДИА-ЗАПРОСЫ --- */
#desktop-overlay { 
    display: none; 
}

@media screen and (orientation: landscape) and (max-device-width: 1024px) { 
    #orientation-overlay { 
        display: flex !important; 
    } 
}

@media screen and (hover: hover) and (pointer: fine) and (min-device-width: 1025px) {
    #desktop-overlay { 
        display: flex !important; 
    }
    
    #orientation-overlay { display: none !important; }
    #ui-layer, #preloader, canvas, .ui-screen { display: none !important; }
}