/* СТИЛИ ДЛЯ DOM ОТОБРАЖЕНИЯ СЛОВ */
:root {
    --syllable-1-color: #ff5252;
    --syllable-2-color: #ffb142;
    --syllable-3-color: #34ace0;
    --syllable-4-color: #33d9b2;
    --syllable-5-color: #706fd3;
    --syllable-6-color: #ff793f;
    --syllable-7-color: #218c74;
}

/* Контейнер для отображения слов вместо canvas */
.word-display-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 20px;
    /* Сверху добавляется «чёлка»: в установленном приложении статус-бар
       накладывается на страницу, и без этого карточка уезжала под него. */
    margin: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 20px calc(20px + env(safe-area-inset-left, 0px));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 20px;
    min-height: 200px;
}

/* Контейнер для всего слова */
.word-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    white-space: nowrap;
    text-align: center;
}

/* Стили для слогов */
.syllable {
    display: flex;
    align-items: center;
}

/* Упрощенные стили для букв - убираем псевдо 3D эффекты */
.letter {
    color: var(--main-color);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: 12vmin;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    opacity: 0;
    transform: translateY(2.5vmin);
    text-shadow: none;
    transition: opacity 0.6s ease, transform 0.6s ease, text-shadow 0.6s ease;
    margin: 0 3px;
}

/* Упрощенное появление - все сразу */
.word-container.appear .letter {
    opacity: 1;
    transform: translateY(0);
    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.25),
        -1px -1px 1px rgba(255, 255, 255, 0.25),
        0vmin 0.1vmin 1px color-mix(in srgb, var(--main-color) 60%, #ffffff),
        0vmin 0.2vmin 1px color-mix(in srgb, var(--main-color) 85%, black),
        0vmin 0.3vmin 1px color-mix(in srgb, var(--main-color) 83%, black),
        0vmin 0.4vmin 1px color-mix(in srgb, var(--main-color) 80%, black),
        0vmin 0.5vmin 1px color-mix(in srgb, var(--main-color) 80%, black),
        0vmin 0.6vmin 1px color-mix(in srgb, var(--main-color) 78%, black),
        0vmin 0.7vmin 1px color-mix(in srgb, var(--main-color) 76%, black),
        0vmin 0.8vmin 1px color-mix(in srgb, var(--main-color) 75%, black),
        0vmin 0.9vmin 2px color-mix(in srgb, var(--main-color) 73%, black),
        0vmin 1.0vmin 4px color-mix(in srgb, var(--main-color) 72%, black),
        0vmin 1.3vmin 6px rgb(0 0 0 / 10%),
        0vmin 1.93vmin 10px rgb(0 0 0 / 8%);
}

.word-container.appear .letter:nth-child(1) {
    transition-delay: 0s;
}

.word-container.appear .letter:nth-child(2) {
    transition-delay: 0.1s;
}

.word-container.appear .letter:nth-child(3) {
    transition-delay: 0.2s;
}

.word-container.appear .letter:nth-child(4) {
    transition-delay: 0.3s;
}

.word-container.appear .letter:nth-child(5) {
    transition-delay: 0.4s;
}

.word-container.appear .letter:nth-child(6) {
    transition-delay: 0.5s;
}

.word-container.appear .letter:nth-child(7) {
    transition-delay: 0.6s;
}

.word-container.appear .letter:nth-child(8) {
    transition-delay: 0.7s;
}

.syllable.hidden .letter {
    opacity: 0;
    transform: translateY(2.5vmin);
    text-shadow: none;
}

.syllable.hidden .letter:nth-child(1) {
    transition-delay: 0.2s;
}

.syllable.hidden .letter:nth-child(2) {
    transition-delay: 0.1s;
}

.syllable.hidden .letter:nth-child(3) {
    transition-delay: 0s;
}

/* Исчезание букв */
.letter.disappear {
    opacity: 0;
    transform: translateY(20px);
}

/* Эффект при клике/наведении */
.letter:hover {
    transform: translateY(0) scale(1.05);
}

.letter.active {
    transform: translateY(0) scale(1.15);
    filter: brightness(1.2);
}

/* Разделитель между слогами */
.syllable-divider {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: 12vmin;
    color: #d1d1d1;
    margin: 0 0.02em;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.word-container.appear .syllable-divider {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
    /* Разделители тоже появляются сразу */
}

.syllable-divider.disappear {
    opacity: 0;
    transform: translateY(20px);
    transition-delay: 0s;
}

/* Цвета для слогов */
.syllable:nth-child(1) .letter {
    color: var(--syllable-1-color);
}

.syllable:nth-child(3) .letter {
    color: var(--syllable-2-color);
}

.syllable:nth-child(5) .letter {
    color: var(--syllable-3-color);
}

.syllable:nth-child(7) .letter {
    color: var(--syllable-4-color);
}

.syllable:nth-child(9) .letter {
    color: var(--syllable-5-color);
}

.syllable:nth-child(11) .letter {
    color: var(--syllable-6-color);
}

.syllable:nth-child(13) .letter {
    color: var(--syllable-7-color);
}

.word-container,
.word-container *,
.syllable,
.syllable *,
.letter,
.syllable-divider {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: content-box !important;
}

.word-container {
    display: inline-flex !important;
    width: auto !important;
}

.syllable {
    display: inline-flex !important;
    width: auto !important;
}

.letter {
    display: inline-block !important;
    width: auto !important;
}

/* Стили для исчезания */
.word-container.hidden .letter {
    opacity: 0;
    transform: translateY(2.5vmin);
    text-shadow: none;
}

.word-container.hidden .letter:nth-child(1) {
    transition-delay: 0.2s;
}

.word-container.hidden .letter:nth-child(2) {
    transition-delay: 0.1s;
}

.word-container.hidden .letter:nth-child(3) {
    transition-delay: 0s;
}

.word-container.hidden .letter:nth-child(4) {
    transition-delay: 0s;
}

.word-container.hidden .letter:nth-child(5) {
    transition-delay: 0s;
}

.word-container.hidden .letter:nth-child(6) {
    transition-delay: 0s;
}

.word-container.hidden .letter:nth-child(7) {
    transition-delay: 0s;
}

.word-container.hidden .letter:nth-child(8) {
    transition-delay: 0s;
}