:root {
    --color-gold: #FFD700;
    --color-indigo: #4B0082;
    --color-black: #000;
    --color-shadow-primary: rgba(75, 0, 130, 0.7);
    --color-shadow-secondary: rgba(255, 215, 0, 0.5);
    --color-metronome-core: #E5AA00;
    --color-silver-light: #ACE5EE;
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --app-max-width: 450px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-gold);
    padding: var(--safe-top) 20px var(--safe-bottom);
}

/* =========================================
   LANGUAGE GATE
   ========================================= */
.language-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
}

.language-gate.hidden {
    display: none;
}

.language-gate-title {
    text-align: center;
    margin-bottom: 50px;
}

.language-gate-title span {
    display: block;
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    margin: 10px 0;
}

.language-gate-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lang-gate-btn {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: var(--color-gold);
    padding: 20px 70px;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 220px;
}

.lang-gate-btn:active {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-gold);
}

/* =========================================
   STARS BACKGROUND
   ========================================= */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
}

.stars::before {
    box-shadow:
        10vw 8vh rgba(192, 192, 192, 0.8),
        42vw 6vh rgba(220, 220, 220, 0.7),
        75vw 9vh rgba(192, 192, 192, 0.8),
        22vw 35vh rgba(200, 200, 210, 0.7),
        55vw 32vh rgba(192, 192, 192, 0.8),
        92vw 38vh rgba(220, 220, 220, 0.7),
        18vw 55vh rgba(192, 192, 192, 0.8),
        85vw 52vh rgba(192, 192, 192, 0.8),
        28vw 75vh rgba(220, 220, 220, 0.7),
        62vw 72vh rgba(192, 192, 192, 0.8),
        48vw 85vh rgba(192, 192, 192, 0.8);
    animation: twinkle-phase1 8s ease-in-out infinite;
}

.stars::after {
    box-shadow:
        25vw 15vh rgba(192, 192, 192, 0.8),
        58vw 12vh rgba(220, 220, 220, 0.7),
        88vw 18vh rgba(192, 192, 192, 0.8),
        8vw 28vh rgba(200, 200, 210, 0.7),
        38vw 22vh rgba(192, 192, 192, 0.8),
        5vw 48vh rgba(192, 192, 192, 0.8),
        68vw 45vh rgba(192, 192, 192, 0.8),
        12vw 68vh rgba(220, 220, 220, 0.7),
        45vw 62vh rgba(192, 192, 192, 0.8),
        32vw 92vh rgba(220, 220, 220, 0.7);
    animation: twinkle-phase2 8s ease-in-out infinite;
}

@keyframes twinkle-phase1 {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.6; }
}

@keyframes twinkle-phase2 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.2; }
}

/* =========================================
   MAIN APP CONTAINER
   ========================================= */
.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--app-max-width);
    height: 100%;
    z-index: 1;
    padding: 20px 0;
    margin: 0 auto;
}

/* =========================================
   HEADER
   ========================================= */
.header {
    text-align: center;
    flex-shrink: 0;
    width: 100%;
}

h1 {
    font-size: 1.9rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--color-indigo);
    text-shadow: 0 0 8px var(--color-silver-light), 0 0 20px var(--color-silver-light);
    opacity: 0.9;
    white-space: nowrap;
}

#round-info {
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    color: var(--color-indigo);
    display: none;
    margin-top: 15px;
}

/* =========================================
   CENTER AREA - METRONOME
   ========================================= */
.center-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.metronome-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 260px;
}

#metronome {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-metronome-core);
    box-shadow: 0 0 20px var(--color-gold), 0 0 40px var(--color-shadow-primary);
    display: none;
}

#metronome.inhale {
    animation: inhale 0.6s ease-in-out forwards;
    box-shadow: 0 0 60px var(--color-gold), 0 0 120px var(--color-shadow-secondary);
}

#metronome.exhale {
    animation: exhale 0.8s ease-in-out forwards;
    box-shadow: 0 0 20px var(--color-gold), 0 0 40px var(--color-shadow-secondary);
}

#metronome.hold {
    transform: scale(0.5);
    animation: breathing-glow 4s ease-in-out infinite;
}

@keyframes inhale {
    from { transform: scale(0.5); }
    to { transform: scale(2.2); }
}

@keyframes exhale {
    from { transform: scale(2.2); }
    to { transform: scale(0.5); }
}

@keyframes breathing-glow {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); opacity: 0.85; }
    50% { box-shadow: 0 0 50px rgba(255, 215, 0, 0.5); opacity: 0.95; }
}

#counter {
    position: absolute;
    font-size: 2.8rem;
    color: var(--color-gold);
    text-shadow: 0 0 10px var(--color-shadow-secondary);
    opacity: 0.9;
    display: none;
}

#timer {
    position: absolute;
    font-size: 2.8rem;
    color: var(--color-gold);
    text-shadow: 0 0 10px var(--color-shadow-secondary);
    opacity: 0.9;
    display: none;
    font-variant-numeric: tabular-nums;
}

/* =========================================
   INSTRUCTION TEXT
   ========================================= */

#instruction {
    font-size: 1.35rem;
    color: var(--color-gold);
    text-align: center;
    text-transform: uppercase;
    width: 90%;
    max-width: 400px;
    transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    display: none;
    margin-top: 25px;
    line-height: 1.5;
}

#instruction.large {
    font-size: 2.1rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-shadow: 0 0 15px var(--color-gold);
}

#instruction.urgent {
    color: #FF6347;
    text-shadow: 0 0 10px #FF6347, 0 0 20px rgba(255, 99, 71, 0.5);
    font-weight: bold;
    font-size: 2.5rem;
}

/* =========================================
   FOOTER - BUTTONS
   ========================================= */
.footer {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
}

#start_session {
    padding: 18px 50px;
    font-size: 1.25rem;
    color: var(--color-gold);
    background: transparent;
    border: 1px solid var(--color-gold);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: none;
    min-height: 60px;
    min-width: 240px;
}

#start_session:active {
    background: rgba(255, 215, 0, 0.15);
}

#start_session.hidden {
    opacity: 0;
    pointer-events: none;
}

#start_session.sos {
    animation: sos-pulse 1s ease-in-out infinite;
    border-color: rgba(255, 215, 0, 0.6);
}

@keyframes sos-pulse {
    50% { box-shadow: 0 0 30px var(--color-gold); }
}

#show_instructions {
    padding: 14px 30px;
    font-size: 1.1rem;
    color: var(--color-gold);
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 50px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    display: none;
    min-height: 52px;
}

#show_instructions:active {
    background: rgba(255, 215, 0, 0.1);
}

/* =========================================
   COMPLETION SCREEN (Компактная версия)
   ========================================= */
#completion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Центрируем всё строго по центру */
    background: rgba(0, 0, 0, 0.98);
    color: var(--color-gold);
    text-align: center;
    padding: 20px; /* Уменьшенные отступы от краев */
    z-index: 100;
    overflow-y: auto; /* На случай очень маленьких экранов */
}

.completion-title {
    font-size: 1.5rem; /* Чуть меньше */
    color: var(--color-gold);
    margin-bottom: 15px; /* Меньше отступ */
    font-weight: 300;
    letter-spacing: 0.1em;
}

.completion-wisdom {
    font-size: 1rem; /* Компактный шрифт */
    line-height: 1.4; /* Уменьшен интервал */
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 25px;
    max-width: 380px;
}

.completion-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Кнопки ближе друг к другу */
    width: 100%;
    max-width: 320px;
}

.completion-buttons button,
.completion-buttons a {
    padding: 0 15px; /* Убрал вертикальный паддинг, высоту задаем через height */
    height: 44px;    /* Фиксированная небольшая высота */
    min-height: 44px;
    font-size: 0.95rem;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Важно для корректных размеров */
}

/* 1. Кнопка: Новая сессия */
#start_new_session_btn {
    background: var(--color-gold);
    color: var(--color-black);
    border: none;
}
#start_new_session_btn:active {
    transform: scale(0.98);
}

/* 2. Кнопка: Поделиться (Вставлена сюда) */
.btn-secondary {
    background: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn-secondary:active {
    background: rgba(255, 255, 255, 0.1);
}

/* 3. Кнопка: Отзыв */
#review_btn {
    background: transparent;
    color: #9C27B0;
    border: 1px solid #9C27B0;
}

/* 4. Кнопка: ТГ канал */
#telegram_link {
    background: transparent;
    color: #29B6F6;
    border: 1px solid #29B6F6;
}

/* 5. Кнопка: Угостить музу (ЗОЛОТАЯ) */
#donate_link {
    background: transparent;
    color: var(--color-gold); /* Яркий золотой */
    border: 1px solid var(--color-gold); /* Золотая рамка */
    opacity: 1; /* Убрали прозрачность */
}
#donate_link:active {
    background: rgba(255, 215, 0, 0.15);
}

/* =========================================
   ONBOARDING MODAL (-10% шрифты)
   ========================================= */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--safe-top) 25px var(--safe-bottom);
    overflow-y: auto;
}

.onboarding-overlay.hidden {
    display: none;
}

.onboarding-container {
    width: 100%;
    max-width: var(--app-max-width);
    text-align: center;
}

.onboarding-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.4s ease;
}

.onboarding-slide.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.onboarding-icon {
    font-size: 4rem;
    margin-bottom: 25px;
}

.onboarding-title {
    font-size: 1.6rem;
    color: var(--color-gold);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 0.05em;
}

.onboarding-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.75;
    margin-bottom: 35px;
    padding: 0 10px;
}

.onboarding-text .highlight {
    color: var(--color-gold);
    font-weight: 600;
}

.onboarding-dots {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 30px;
}

.onboarding-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

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

.onboarding-btn {
    padding: 18px 45px;
    font-size: 1.2rem;
    background: var(--color-gold);
    color: var(--color-black);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    min-height: 60px;
    min-width: 220px;
    transition: all 0.3s ease;
}

.onboarding-btn:active {
    transform: scale(0.98);
}

/* =========================================
   INSTRUCTIONS MODAL (-5% шрифты)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
    padding: var(--safe-top) 20px var(--safe-bottom);
    overflow-y: auto;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: rgba(10, 5, 20, 0.98);
    padding: 25px;
    border-radius: 20px;
    width: 100%;
    max-width: var(--app-max-width);
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid var(--color-indigo);
    box-shadow: 0 0 50px rgba(75, 0, 130, 0.6);
    color: #DDD;
    -webkit-overflow-scrolling: touch;
}

.modal-content h2 {
    color: var(--color-gold);
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 14px;
    letter-spacing: 0.1em;
}

.modal-subtitle {
    color: var(--color-indigo);
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.highlight-warn,
.highlight-light {
    color: var(--color-gold);
    font-weight: bold;
}

.intro-text {
    text-align: center;
    font-style: italic;
    opacity: 0.9;
    margin-bottom: 14px;
    font-size: 1rem;
    color: var(--color-gold);
    line-height: 1.55;
}

.safety-warning {
    background: rgba(255, 99, 71, 0.1);
    border: 1px solid rgba(255, 99, 71, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 18px 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #FF6347;
    text-align: center;
}

.screen-tip {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 15px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 215, 0, 0.9);
    text-align: center;
}

.protocol-list {
    list-style-type: none;
    counter-reset: protocol-counter;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.protocol-list li {
    counter-increment: protocol-counter;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.03);
    padding: 14px;
    border-radius: 10px;
    font-size: 1rem;
}

.protocol-list li strong {
    color: var(--color-gold);
    font-size: 1.045rem;
    display: block;
    margin-bottom: 7px;
}

.protocol-list li::before {
    content: counter(protocol-counter);
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    text-align: center;
    background-color: var(--color-indigo);
    color: var(--color-gold);
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
    font-size: 0.85em;
}

.checkbox-group {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}

.checkbox-group label {
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
}

.checkbox-group input {
    width: 22px;
    height: 22px;
    accent-color: var(--color-gold);
}

.modal-btn {
    margin-top: 18px;
    padding: 17px;
    width: 100%;
    background: var(--color-gold);
    color: var(--color-black);
    font-weight: bold;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 58px;
}

.modal-btn:active {
    transform: scale(0.98);
}

.instruction-disclaimer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.instruction-disclaimer p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.55;
    text-align: center;
}

.instruction-privacy {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.instruction-privacy p {
    font-size: 0.81rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.45;
    text-align: center;
}

/* =========================================
   DESKTOP VIEW
   ========================================= */
@media (min-width: 500px) {
    body {
        background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
    }

    .app-container {
        border-left: 1px solid rgba(75, 0, 130, 0.2);
        border-right: 1px solid rgba(75, 0, 130, 0.2);
        background: #000;
        box-shadow: 0 0 100px rgba(75, 0, 130, 0.1);
    }
}

/* Красивый экран загрузки */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #000000 0%, #1a0a2e 50%, #0d0015 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.8s ease-in-out; /* Чуть медленнее и мягче */
}

#splash-screen img {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px var(--color-indigo));
}

#splash-screen .loader-text {
    color: white;
    font-family: sans-serif;
    letter-spacing: 2px;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Стили для вашего нового красивого лого */
.main-logo {
    width: 200px; /* Можно отрегулировать размер под ваше лого */
    height: auto;
    margin-bottom: 25px;
    /* Мягкое свечение вокруг логотипа */
    filter: drop-shadow(0 0 15px rgba(75, 0, 130, 0.5));
    /* Эффект плавного появления самого лого */
    animation: fadeInLogo 1.5s ease-out;
}

@keyframes fadeInLogo {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.loader-text {
    color: white;
    font-family: 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 4px; /* Увеличил межбуквенное расстояние для эстетики */
    font-size: 0.9rem;
    opacity: 0.6;
    text-transform: uppercase;
}