.top-actions{
    position:fixed;
    top:18px;
    right:18px;
    display:flex;
    gap:8px;
    align-items:center;
    z-index:4400;
}
body.intro-active .top-actions{
    visibility:hidden;
    pointer-events:none;
}

body.intro-active #settingsButton.is-highlighted{
    visibility:visible;
    pointer-events:auto;
}

/* ".was-revealed" даёт только видимость, НЕ кликабельность — однажды
   показанный виджет остаётся видимым до конца интро (не пропадает), но
   взаимодействовать можно только с тем, на что указывает диалог ПРЯМО
   СЕЙЧАС (.is-highlighted). Иначе можно было бы открывать/закрывать любые
   уже показанные виджеты в обход сценария. */
body.intro-active #settingsButton.was-revealed{
    visibility:visible;
}

/* Общее правило для всех круглых кнопок верхней панели (шкатулка, прогресс,
   о проекте) — пока диалог указывает именно на них, они остаются видимыми
   и кликабельными, несмотря на то что .top-actions скрыт целиком. */
body.intro-active .top-action-btn.is-highlighted{
    visibility:visible;
    pointer-events:auto;
}

body.intro-active .top-action-btn.was-revealed{
    visibility:visible;
}

/* Иконки слева (чат/уведомления) и у собаки (о персонаже/имя/дневник)
   по умолчанию скрыты, пока до них не дойдёт диалог — по той же логике,
   что и .top-actions. */
body.intro-active .left-edge-icons,
body.intro-active .dog-side-icons{
    visibility:hidden;
    pointer-events:none;
}

body.intro-active .side-widget.is-highlighted{
    visibility:visible;
    pointer-events:auto;
}

body.intro-active .side-widget.was-revealed{
    visibility:visible;
}

/* Во время разговора о музыкальной шкатулке все остальные виджеты (кроме неё) скрыты. */
body.intro-active:has(#musicBoxButton.is-highlighted) .side-widgets,
body.intro-active:has(#musicBoxButton.is-highlighted) .left-edge-icons,
body.intro-active:has(#musicBoxButton.is-highlighted) .dog-side-icons,
body.intro-active:has(#musicBoxButton.is-highlighted) .key-counter{
    visibility:hidden;
    pointer-events:none;
}

.top-action-btn,
.settings-button,
.side-widget{
    position:relative;
}

.top-action-btn:hover,
.settings-button:hover,
.side-widget:hover{
    transform:translateY(-2px) scale(1.04);
    background:rgba(255,255,255,.32);
    box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.top-action-btn::after,
.settings-button::after,
.side-widget::after{
    content:attr(data-label);
    position:absolute;
    left:50%;
    top:calc(100% + 2px);
    transform:translateX(-50%) translateY(-10px);
    padding:6px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:white;
    font-size:11px;
    font-weight:600;
    letter-spacing:.02em;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:5000;
    box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.top-action-btn:hover::after,
.settings-button:hover::after,
.side-widget:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(-10px);
}


.top-actions .side-widget--music{
    width:44px;
    height:44px;
    border-radius:50%;
}
#settingsButton{
    position:relative;
    z-index:4900;
}
.settings-button,
.top-action-btn{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:white;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    transition:transform .25s ease, background .25s ease;
}

.settings-button:hover,
.top-action-btn:hover{
    transform:scale(1.06);
    background:rgba(255,255,255,.28);
}

.settings-button.is-highlighted{
    transform:scale(1.16);
    background:rgba(255,255,255,.5);
    box-shadow:0 0 0 6px rgba(255,255,255,.28), 0 0 30px rgba(255,255,255,.55), 0 16px 40px rgba(0,0,0,.3);
    animation:settingsPulse 1s ease-in-out infinite alternate;
}

.top-action-btn.is-highlighted{
    transform:scale(1.16);
    background:rgba(255,255,255,.5);
    box-shadow:0 0 0 6px rgba(255,255,255,.28), 0 0 30px rgba(255,255,255,.55), 0 16px 40px rgba(0,0,0,.3);
    animation:settingsPulse 1s ease-in-out infinite alternate;
}

@keyframes settingsPulse{
    from{ transform:scale(1.1); box-shadow:0 0 0 4px rgba(255,255,255,.22), 0 0 20px rgba(255,255,255,.4); }
    to{ transform:scale(1.22); box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 0 40px rgba(255,255,255,.6); }
}

@keyframes settingsPulse{
    from{ transform:scale(1.08); }
    to{ transform:scale(1.18); }
}

.intro-scene-overlay{
    position:fixed;
    inset:0;
    background:rgba(5,4,8,.62);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease;
    z-index:3200;
}

.intro-scene-overlay.is-visible{
    opacity:1;
    visibility:visible;
}

.intro-settings-hint{
    position:fixed;
    top:74px;
    right:18px;
    left:auto;
    bottom:auto;
    transform:translateY(-10px);
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:white;
    font-size:14px;
    font-weight:600;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:4950;
}

.intro-settings-hint.is-visible{
    opacity:1;
    transform:translateY(0);
}

.settings-panel,
.progress-panel{
    position:fixed;
    top:70px;
    right:18px;
    width:min(92vw, 320px);
    padding:14px;
    border-radius:18px;
    background:rgba(20,16,28,.8);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 16px 44px rgba(0,0,0,.25);
    color:white;
    z-index:4950;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease;
}

.settings-panel.is-open,
.progress-panel.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.settings-panel__title{
    margin:0 0 10px;
    font-size:15px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.settings-section-list,
.progress-actions-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
}

.side-widgets{
    position:fixed;
    left:50%;
    top:18px;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    align-items:center;
    z-index:3800;
}

.side-widget--chat{
    margin-left:auto;
}

.side-widget--music{
    margin-left:8px;
}

.left-edge-icons{
    position:fixed;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:8px;
    /* Выше #dialogueContainer (z-index:4300) — иначе его полноэкранный
       кликовый перехватчик во время интро глушит клики по этим иконкам. */
    z-index:4400;
}

.intro-scene-overlay{
    position:fixed;
    inset:0;
    background:rgba(5,4,8,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease;
    z-index:4200;
}
.intro-settings-hint,
.settings-panel,
.progress-panel,
.music-panel,
.theme-selection-menu,
.language-selection-menu,
.top-action-btn,
.settings-button,
.side-widget,
.left-edge-icon,
.character-icon,
.puzzle-toast,
.intro-dialogue__bubble,
.intro-dialogue__thought .thought-cloud,
#dialogueContainer,
.progress-indicator,
.footer,
.key-counter,
.character-nameplate{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
}

.dog-side-icons{
    position:fixed;
    left:clamp(150px, 24vw, 220px);
    bottom:14px;
    display:flex;
    gap:6px;
    align-items:center;
    /* Выше #dialogueContainer (z-index:4300) по той же причине, что и
       .left-edge-icons — иначе диалог глушит клики по этим кнопкам. */
    z-index:4400;
}

.side-widget{
    width:40px;
    height:40px;
    position:relative;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:white;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
    transition:transform .25s ease, background .25s ease;
}

.side-widget.is-highlighted{
    transform:scale(1.16);
    background:rgba(255,255,255,.5);
    box-shadow:0 0 0 6px rgba(255,255,255,.28), 0 0 30px rgba(255,255,255,.55), 0 16px 40px rgba(0,0,0,.3);
    animation:settingsPulse 1s ease-in-out infinite alternate;
}

/* Красный счётчик непрочитанного — на ::before, чтобы не конфликтовать
   с подсказкой-тултипом на ::after. Число берётся из data-count (см.
   js/ui/letters.js), а не захардкожено, чтобы показывать реальное
   количество новых писем. */
.side-widget.has-unread::before{
    content:attr(data-count);
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:16px;
    height:16px;
    padding:0 3px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ff3b3b;
    color:white;
    font-size:10px;
    font-weight:700;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
    z-index:1;
}

.character-icon{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
}

.character-icon__emoji{
    font-size:20px;
    line-height:1;
}

.character-icon__label{
    display:none;
}

.side-widget:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.26);
}

.key-counter{
    position:fixed;
    left:50%;
    top:74px;
    transform:translateX(-50%);
    padding:8px 14px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:white;
    font-size:13px;
    font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
    z-index:3700;
}

.key-counter.is-highlighted{
    background:rgba(255,255,255,.28);
    animation:sectionGlowPulse 1.3s ease-in-out infinite alternate;
}

.settings-section-item,
.progress-action-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    font-size:14px;
    font-weight:500;
}

.progress-action-item.is-clickable{
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
}

.progress-action-item.is-clickable:hover{
    background:rgba(255,255,255,.16);
    transform:translateY(-1px);
}

.settings-section-icon,
.progress-action-icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:10px;
    background:rgba(255,255,255,.14);
    font-size:16px;
}

@media (max-width: 640px){
    .top-actions{
        top:12px;
        right:12px;
    }

    .side-widgets{
        top:12px;
        gap:6px;
    }

    .side-widget{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .key-counter{
        top:64px;
        font-size:12px;
    }

    .settings-panel,
    .progress-panel{
        top:60px;
        right:12px;
        width:min(92vw, 300px);
    }
}
/* Пульсация виджета внутри списка настроек — только свечение (box-shadow/фон),
   без transform:scale, чтобы не выходить за границы виджета и не задевать соседей. */
.settings-section-item.is-highlighted,
.progress-action-item.is-highlighted {
    background: rgba(255, 255, 255, .22);
    animation: sectionGlowPulse 1.3s ease-in-out infinite alternate;
}

@keyframes sectionGlowPulse {
    from { box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 0 10px rgba(255,255,255,.25); }
    to   { box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 0 20px rgba(255,255,255,.55); }
}

/* ============================================================
   КОД ПОЛЬЗОВАТЕЛЯ — раскрывающиеся блоки под списком в виджете
   "Прогресс" (см. renderProgressPanel в js/ui/settings.js). Скрыты по
   умолчанию, открывается только один из двух за раз (клик по второму
   закрывает первый). "Показать код" открывает CODE_REVEAL — тот, что
   всегда виден на устройстве, где создан; "Ввести код" открывает CODE_ENTER
   — поле для чужого/своего кода с другого устройства.
   ============================================================ */
.progress-code-reveal,
.progress-code-enter{
    display:none;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
}

.progress-code-reveal.is-open,
.progress-code-enter.is-open{
    display:flex;
}

.progress-code-reveal__value{
    flex:1;
    font-family:'Courier New', monospace;
    font-size:15px;
    font-weight:700;
    letter-spacing:.12em;
    color:white;
    word-break:break-all;
}

.progress-code-reveal__copy{
    flex-shrink:0;
    width:32px;
    height:32px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,.14);
    color:white;
    font-size:15px;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
}

.progress-code-reveal__copy:hover{
    background:rgba(255,255,255,.26);
    transform:translateY(-1px);
}

.progress-code-enter{
    flex-wrap:wrap;
}

.progress-code-enter__input{
    flex:1 1 140px;
    min-width:0;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    background:rgba(0,0,0,.18);
    color:white;
    font-size:13px;
    letter-spacing:.06em;
}

.progress-code-enter__input::placeholder{
    color:rgba(255,255,255,.5);
    letter-spacing:normal;
}

.progress-code-enter__input:focus{
    outline:none;
    border-color:rgba(255,255,255,.5);
}

.progress-code-enter__submit{
    flex-shrink:0;
    padding:9px 14px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,.2);
    color:white;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
}

.progress-code-enter__submit:hover{
    background:rgba(255,255,255,.32);
    transform:translateY(-1px);
}

/* ============================================================
   ОТДЕЛЬНАЯ МЕНЮШКА ВЫБОРА ТЕМЫ
   Не горизонтальный список внутри настроек, а самостоятельная
   панель по центру экрана — чтобы будущие виджеты не выходили
   за границы.
   ============================================================ */
/* По центру экрана, как Developer Panel (.dev-menu) — раньше стояло
   right:3vw, чтобы не перекрывать пузырь реплики собаки во время интро,
   но эта менюшка никогда не открывается автоматически во время интро (её
   можно открыть только вручную из настроек), так что конфликта на деле
   нет, а по центру она выглядит как самостоятельное окно, а не что-то
   прибитое к краю поверх других виджетов. */
.theme-selection-menu{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:min(90vw, 280px);
    padding:18px;
    border-radius:18px;
    background:rgba(20,16,28,.92);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    color:white;
    z-index:5100;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}

.theme-selection-menu.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
}

.theme-selection-menu__title{
    margin:0 0 12px;
    font-size:15px;
    font-weight:700;
    text-align:center;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.theme-selection-menu__list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
}

.theme-option-btn.is-selected{
    background:rgba(255,255,255,.42);
    box-shadow:0 0 0 2px rgba(255,255,255,.55);
}

@media (max-width: 640px){
    .theme-selection-menu{
        width:min(88vw, 260px);
        padding:16px;
    }
}

.theme-options-list {
    /* Удаляем старые стили для горизонтального отображения */
    /* display: flex; */
    /* gap: 8px; */
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px; /* Отступ для вложенного списка */
    display: grid;
    gap: 8px;
    margin-top: 8px; /* Добавляем отступ сверху, чтобы отделить от родителя */
}

.theme-options-list .settings-section-item {
    padding: 8px 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}

.theme-option-btn {
    width: 100%; /* Занимает всю ширину элемента списка */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.theme-option-btn:not(.is-selected):hover {
    background: rgba(255, 255, 255, .26);
    transform: translateY(-1px);
}

.theme-option-btn.is-selected {
    cursor: default;
}

.theme-option-preview {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, .38);
}

.theme-option-label {
    flex: 1;
}

.theme-option-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease;
}

.theme-option-check span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #171014;
    opacity: 0;
    transition: opacity .15s ease;
}

.theme-option-btn.is-selected .theme-option-check {
    background: #fffdfb;
    border-color: #fffdfb;
}

.theme-option-btn.is-selected .theme-option-check span {
    opacity: 1;
}

/* ============================================================
   МЕНЮ ВЫБОРА ЯЗЫКА — 1:1 копия блока меню тем выше (классы
   .theme-selection-menu и .theme-option-...), только под своими именами
   классов, чтобы не путать два независимых меню между собой.

   ВАЖНО: раньше здесь была опечатка — звёздочка сразу перед слэшем
   закрывала этот комментарий досрочно, из-за чего весь текст ниже
   превращался в мусорный CSS-селектор, и парсер браузера молча выбрасывал
   правило .language-selection-menu целиком (без рамки, фона,
   position:fixed — отсюда "сдвигается" и "некрасиво"). Больше не пиши
   звёздочку впритык перед слэшем внутри этого комментария.
   ============================================================ */
/* По центру экрана, как Developer Panel (.dev-menu) — см. тот же приём и
   пояснение у .theme-selection-menu выше. */
.language-selection-menu{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:min(90vw, 280px);
    padding:18px;
    border-radius:18px;
    background:rgba(20,16,28,.92);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    color:white;
    z-index:5100;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}

.language-selection-menu.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
}

.language-selection-menu__title{
    margin:0 0 12px;
    font-size:15px;
    font-weight:700;
    text-align:center;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.language-selection-menu__list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
}

@media (max-width: 640px){
    .language-selection-menu{
        width:min(88vw, 260px);
        padding:16px;
    }
}

.language-option-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.language-option-btn:not(.is-selected):hover {
    background: rgba(255, 255, 255, .26);
    transform: translateY(-1px);
}

.language-option-btn.is-selected {
    cursor: default;
    background: rgba(255, 255, 255, .42);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

/* Мини-флаги нарисованы через CSS (градиенты/полосы), а не эмодзи-флагами —
   регион-индикаторные эмодзи (🇷🇺/🇬🇧/🇷🇴) не рендерятся как картинки флагов
   на Windows, показывая вместо них некрасивые буквы кода страны в квадратике.
   CSS-версия выглядит одинаково на любой системе. */
.language-option-preview {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    border: 2px solid rgba(255, 255, 255, .38);
}

.language-option-preview--ru {
    background: linear-gradient(
        to bottom,
        #ffffff 0 33.3%,
        #0039a6 33.3% 66.6%,
        #d52b1e 66.6% 100%
    );
}

.language-option-preview--ro {
    background: linear-gradient(
        to right,
        #002b7f 0 33.3%,
        #fcd116 33.3% 66.6%,
        #ce1126 66.6% 100%
    );
}

/* Флаг английского языка — упрощённый крест святого Георгия (без диагоналей
   британского Union Jack, которые сложно чисто нарисовать одними градиентами). */
.language-option-preview--en {
    background:
        linear-gradient(#ce1126, #ce1126) center / 100% 22% no-repeat,
        linear-gradient(90deg, #ce1126, #ce1126) center / 22% 100% no-repeat,
        #ffffff;
}

.language-option-label {
    flex: 1;
}

.language-option-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease;
}

.language-option-check span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #171014;
    opacity: 0;
    transition: opacity .15s ease;
}

.language-option-btn.is-selected .language-option-check {
    background: #fffdfb;
    border-color: #fffdfb;
}

.language-option-btn.is-selected .language-option-check span {
    opacity: 1;
}

body:has(.settings-panel.is-open) .intro-settings-hint,
body:has(.progress-panel.is-open) .intro-settings-hint {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   DEVELOPER PANEL (скрытая, 5 кликов по собаке, см. js/dev/devPanel.js).
   Базовый .dev-menu — компактный экран ввода секрета; модификатор
   .dev-menu--panel растягивает тот же блок под полноценную панель с
   вкладками Monitoring/Admin, когда секрет уже введён.
   ============================================================ */
.dev-menu{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(90vw, 300px);
    padding:20px;
    border-radius:18px;
    background:rgba(20,16,28,.94);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.4);
    color:white;
    text-align:center;
    z-index:6000;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
}

.dev-menu.is-open{
    opacity:1;
    pointer-events:auto;
}

.dev-menu__title{
    margin:0 0 14px;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    opacity:.8;
}

.dev-menu__text{
    margin:0 0 4px;
    font-size:13px;
    line-height:1.5;
    opacity:.75;
}

.dev-menu__btn{
    display:block;
    width:100%;
    margin-top:10px;
    padding:10px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.14);
    color:white;
    font:inherit;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}

.dev-menu__btn:hover{
    background:rgba(255,255,255,.24);
}

.dev-menu__btn--danger{
    background:rgba(255,90,90,.28);
}

.dev-menu__btn--danger:hover{
    background:rgba(255,90,90,.4);
}

.dev-menu__section{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.14);
    text-align:left;
}

.dev-menu__label{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    opacity:.65;
}

.dev-menu__input{
    width:100%;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    background:rgba(0,0,0,.25);
    color:white;
    font:inherit;
    font-size:13px;
}

.dev-menu__hint{
    margin:8px 0 0;
    font-size:12px;
    line-height:1.4;
    opacity:.75;
    text-align:center;
}

.dev-menu__hint--error{
    color:#ff9a9a;
}

/* Модификатор для полноценной панели — та же тёмная стеклянная карточка,
   но шире/выше, со своим скроллом и текстом по левому краю. */
.dev-menu--panel{
    width:min(92vw, 460px);
    max-height:min(86vh, 720px);
    padding:16px;
    text-align:left;
    overflow-y:auto;
}

.dev-panel__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.dev-panel__header .dev-menu__title{
    margin:0;
}

.dev-panel__close{
    flex-shrink:0;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    color:white;
    font-size:14px;
    cursor:pointer;
}

.dev-panel__close:hover{
    background:rgba(255,255,255,.24);
}

/* Переключатель "Режим владельца" — см. js/dev/devPanel.js. Независим от
   выбранного кода: относится к ЭТОМУ устройству/браузеру. */
.dev-panel__owner-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    padding:10px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
}

.dev-panel__owner-toggle .dev-menu__hint{
    margin:0;
    text-align:left;
    flex:1;
}

.dev-panel__owner-toggle .dev-menu__btn{
    width:auto;
    margin-top:0;
    flex-shrink:0;
}

.dev-panel__code-row{
    display:flex;
    gap:8px;
    margin-bottom:10px;
}

.dev-panel__code-row .dev-menu__input{
    flex:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.dev-panel__code-row .dev-menu__btn{
    width:auto;
    margin-top:0;
    flex-shrink:0;
}

.dev-panel__tabs{
    display:flex;
    gap:6px;
    margin-bottom:8px;
}

.dev-panel__tab{
    flex:1;
    padding:8px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:white;
    opacity:.65;
    font:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, opacity .2s ease;
}

.dev-panel__tab.is-active{
    background:rgba(255,255,255,.2);
    opacity:1;
}

.dev-panel__body{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Без этого правила скрытая вкладка (атрибут hidden) всё равно оставалась
   бы видна — [hidden] в браузерном стиле имеет ту же специфичность, что и
   .dev-panel__body{display:flex} выше, а автор-стили побеждают user-agent
   при равной специфичности. */
.dev-panel__body[hidden]{
    display:none;
}

.dev-panel__section{
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.14);
    font-size:13px;
    line-height:1.5;
}

.dev-panel__section:first-child{
    padding-top:0;
    border-top:none;
}

.dev-panel__section-title{
    margin:0 0 6px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    opacity:.65;
}

.dev-panel__section p{
    margin:2px 0;
}

.dev-panel__dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    margin-right:4px;
}

.dev-panel__dot.is-online{
    background:#7CFF9B;
    box-shadow:0 0 6px rgba(124,255,155,.8);
}

.dev-panel__pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.dev-panel__pill{
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    font-size:12px;
    opacity:.7;
}

.dev-panel__pill.is-open{
    background:rgba(124,255,155,.22);
    opacity:1;
}

.dev-panel__letter,
.dev-panel__timeline-item,
.dev-panel__snapshot{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:12px;
}

.dev-panel__timeline{
    max-height:220px;
    overflow-y:auto;
}

.dev-panel__piece-btn{
    display:inline-block;
    width:auto;
    margin-top:0;
    padding:6px 10px;
    font-size:12px;
}

.dev-panel__months{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.dev-panel__month{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px 8px;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    font-size:12px;
    cursor:pointer;
}

.dev-panel__checkbox{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:13px;
    cursor:pointer;
}

.dev-panel__snapshots{
    margin-bottom:10px;
}

.dev-panel__snapshot{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.dev-panel__snapshot-restore{
    width:auto;
    margin-top:0;
    padding:6px 10px;
    font-size:12px;
    flex-shrink:0;
}

/* ============================================================
   ЕЖЕМЕСЯЧНЫЙ КЛЮЧ — та же полноэкранная сцена, что и подтверждения выше
   (.intro-dialogue__bubble), плюс лёгкий "искрящийся" акцент над текстом.
   ============================================================ */
.monthly-key-bubble{
    position:relative;
}

.monthly-key-sparkle{
    display:block;
    margin-bottom:8px;
    font-size:28px;
    line-height:1;
    animation:monthlyKeySparkle 1.4s ease-in-out infinite;
}

@keyframes monthlyKeySparkle{
    0%, 100% { transform:scale(1) rotate(0deg); }
    50% { transform:scale(1.15) rotate(-6deg); }
}

.is-key-found{
    animation:monthlyKeyBounce .6s ease-in-out;
}

@keyframes monthlyKeyBounce{
    0%, 100% { transform:translateY(0); }
    30% { transform:translateY(-14px); }
    55% { transform:translateY(0); }
    75% { transform:translateY(-6px); }
}

/* ============================================================
   ВИДЖЕТ «ПИСЬМА» — почтовая система, не чат. Панель наследует базовые
   .settings-panel (позиция/блюр/цвет), но не в углу — это отдельная
   "комната" мира сайта, а не пункт меню, поэтому открывается по центру
   и заметно крупнее, чем обычные боковые панели.
   ============================================================ */
.letters-panel{
    left:50%;
    top:50%;
    right:auto;
    transform:translate(-50%,-45%);
    width:min(92vw, 460px);
    padding:24px;
}

.letters-panel.is-open{
    transform:translate(-50%,-50%);
}

.letters-folders{
    display:flex;
    gap:20px;
    padding:10px 0 6px;
}

/* Папки нарочно тёплого "картонного" оттенка — не в цвет темы сайта,
   это отдельный предмет мира (почта), а не элемент интерфейса. */
.letter-folder{
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:34px 14px 22px;
    border:none;
    border-radius:6px 22px 22px 22px;
    background:linear-gradient(160deg,#e6bd8e,#c9925c);
    color:#3b2413;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .2s ease, box-shadow .2s ease;
}

.letter-folder::before{
    content:"";
    position:absolute;
    top:-9px;
    left:14px;
    width:44%;
    height:12px;
    background:inherit;
    border-radius:8px 8px 0 0;
}

.letter-folder:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 16px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}

.letter-folder__icon{
    font-size:44px;
    line-height:1;
}

.letter-folder__label{
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.letter-folder__badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ff3b3b;
    color:white;
    font-size:11px;
    font-weight:700;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.letters-list-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.letters-back-btn{
    flex-shrink:0;
    width:28px;
    height:28px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,.16);
    color:white;
    font-size:14px;
    cursor:pointer;
    transition:background .2s ease;
}

.letters-back-btn:hover{
    background:rgba(255,255,255,.28);
}

.letters-list-header .settings-panel__title{
    margin:0;
}

.letters-list{
    list-style:none;
    margin:0 0 12px;
    padding:0;
    display:grid;
    gap:8px;
    max-height:260px;
    overflow-y:auto;
}

.letter-item{
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
}

.letter-item--unread{
    background:rgba(255,224,111,.16);
    border-color:rgba(255,224,111,.4);
    cursor:pointer;
}

.letter-item__text{
    margin:0 0 6px;
    font-size:14px;
    line-height:1.4;
    word-wrap:break-word;
}

.letter-item__meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:11px;
    opacity:.7;
}

.letter-item__status--pending{ color:#ffd479; }
.letter-item__status--delivered{ color:#8fd0ff; }
.letter-item__status--read{ color:#8bffb0; }

.letters-empty{
    margin:4px 0 12px;
    font-size:13px;
    line-height:1.5;
    opacity:.7;
    text-align:center;
}

/* Собака "стоит рядом с почтой" — её реплика сверху "Входящих" визуально
   отделена от самих писем: не список, без даты/статуса. */
.letters-dog-note{
    padding:10px 12px;
    margin-bottom:10px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    border:1px dashed rgba(255,255,255,.22);
}

.letters-dog-note__author{
    display:block;
    margin-bottom:4px;
    font-size:12px;
    font-weight:700;
    opacity:.85;
}

.letters-dog-note__text{
    margin:0;
    font-size:13px;
    line-height:1.5;
    font-style:italic;
    opacity:.85;
}

.letters-divider{
    height:1px;
    margin:4px 0 10px;
    background:rgba(255,255,255,.14);
}

.letters-section-label{
    margin:0 0 8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    opacity:.7;
}

.letters-compose-btn,
.letters-compose-send{
    width:100%;
    padding:10px 14px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.16);
    color:white;
    font:inherit;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.letters-compose-btn:hover,
.letters-compose-send:hover{
    background:rgba(255,255,255,.28);
    transform:translateY(-1px);
}

.letters-compose-btn:disabled,
.letters-compose-send:disabled{
    opacity:.5;
    cursor:default;
    transform:none;
}

.letters-compose-input{
    width:100%;
    min-height:96px;
    margin-bottom:10px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.10);
    color:white;
    font:inherit;
    font-size:14px;
    resize:vertical;
}

.letters-compose-input::placeholder{
    color:rgba(255,255,255,.5);
}

.letters-compose-error{
    margin:-2px 0 10px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,90,90,.16);
    border:1px solid rgba(255,90,90,.3);
    color:#ffd2d2;
    font-size:12px;
    line-height:1.4;
}

@media (max-width: 640px){
    .letters-panel{
        width:min(92vw, 320px);
    }
}

/* Красная плашка "Новое" на непрочитанном письме в списке — отдельно от
   бейджа-счётчика на самой папке, чтобы было видно, какое именно новое. */
.letter-item{
    position:relative;
}

.letter-item--unread{
    padding-top:26px;
}

.letter-item__new-badge{
    position:absolute;
    top:8px;
    right:8px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,59,59,.85);
    color:white;
    font-size:10px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
}

/* ============================================================
   ЧТЕНИЕ ПИСЬМА — большая карточка "на бумаге" по центру экрана,
   отдельно от общего тёмного стеклянного стиля панелей: письмо должно
   ощущаться как настоящий физический предмет, а не ещё один пункт меню.
   ============================================================ */
.letter-read-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(5,4,8,.6);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:6200;
}

.letter-read-modal.is-open{
    opacity:1;
    pointer-events:auto;
}

/* Обёртка нужна только затем, чтобы крестик-закрытие мог сидеть НА краю
   бумаги, но не быть её потомком — .letter-read-paper при длинном письме
   скроллится, а крестик должен оставаться на месте. */
.letter-read-wrap{
    position:relative;
    width:min(92vw, 560px);
    transform:translateY(14px) scale(.96);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.letter-read-modal.is-open .letter-read-wrap{
    transform:translateY(0) scale(1);
}

/* Настоящая бумага — картинки images/items/paper-*.webp (вырезаны из
   присланного PNG с рваными краями), не CSS-рисунок. Три слоя друг под
   другом: рваный верх и рваный низ — статичные куски исходной фотографии
   с сохранённой пропорцией (растут только по ширине карточки), между ними
   — растягивающийся блок с текстурой бумаги (repeat-y), высота которого
   зависит только от текста письма. Чем длиннее письмо, тем выше становится
   средний блок и тем ниже съезжает нижний рваный край — сама текстура при
   этом не мнётся и не искажается, просто повторяется по вертикали. */
.letter-read-paper{
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    filter:drop-shadow(0 26px 50px rgba(0,0,0,.5));
}

.letter-read-paper__cap{
    flex:0 0 auto;
    width:100%;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.letter-read-paper__cap--top{
    aspect-ratio:990/300;
    background-image:url('../images/items/paper-top.webp');
    margin-bottom:-1px;
}

.letter-read-paper__cap--bottom{
    position:relative;
    aspect-ratio:990/320;
    background-image:url('../images/items/paper-bottom.webp');
    margin-top:-1px;
}

/* Восковая печать — настоящее изображение (images/items/seal.webp, вырезано
   из присланного фото), не CSS-рисунок. Декоративная, не зависит от текста
   письма, поэтому сидит фиксированно у шва с нижним краем, а не "после
   подписи" (подпись не гарантирована в свободном тексте письма). */
.letter-read-paper__seal{
    position:absolute;
    top:-30px;
    right:38px;
    width:76px;
    height:74px;
    background-image:url('../images/items/seal.webp');
    background-size:contain;
    background-repeat:no-repeat;
    transform:rotate(-6deg);
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
}

.letter-read-paper__body{
    flex:0 0 auto;
    width:100%;
    background-image:url('../images/items/paper-middle.webp');
    background-repeat:repeat-y;
    background-size:100% auto;
    padding:20px 56px 28px;
    color:#2a1808;
}

.letter-read-card__close{
    position:absolute;
    top:-4px;
    right:-4px;
    width:32px;
    height:32px;
    border:2px solid rgba(0,0,0,.12);
    border-radius:50%;
    background:#fdf6ea;
    color:#2a1808;
    font-size:14px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
    transition:background .2s ease, transform .2s ease;
}

.letter-read-card__close:hover{
    background:#fff;
    transform:scale(1.06);
}

.letter-read-card__meta{
    margin:0 0 10px;
    font-family:'Marck Script', cursive;
    font-size:17px;
    opacity:.6;
}

.letter-read-card__text{
    margin:0;
    font-family:'Marck Script', cursive;
    font-size:26px;
    line-height:1.5;
    white-space:pre-wrap;
    word-wrap:break-word;
}

@media (max-width: 640px){
    .letter-read-wrap{
        width:min(94vw, 420px);
    }
}

/* Лёгкое уведомление о новом письме прямо во время сессии — не сюжетная
   сцена, не блокирует интерфейс. Тот же визуальный язык, что и
   .puzzle-toast в css/puzzle.css, но отдельный элемент. */
.letters-toast{
    position:fixed;
    left:50%;
    bottom:82px;
    transform:translate(-50%, 12px);
    padding:10px 16px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:12px;
    background:rgba(50,25,45,.38);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:white;
    font-size:14px;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    z-index:3000;
}

.letters-toast.is-visible{
    opacity:1;
    transform:translate(-50%, 0);
}