/* web_app/static/css/07-mobile.css
   Финальный mobile-first слой. Исправляет переполнение, масштаб элементов,
   touch-цели, шапку, модалки и плотные рабочие экраны на телефонах. */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

:is(.character-card, .crafting-card, .item-card, .wiki-card, .atlas-card,
    .gm-panel, .admin-card, .admin-action, .topic-card, .spell-card,
    .craft-card, .ability-card) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-action-icon { display: none; }

/* Планшет: рабочие панели уже не должны держать desktop-ширину. */
@media (max-width: 900px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    :is(.catalog-layout, .atlas-layout, .admin-grid, .alchemy-grid,
        .crafting-grid, .player-book-layout, .gm-screen-layout) {
        min-width: 0;
    }

    .cat-sidebar,
    .atlas-sidebar {
        position: static;
        width: 100%;
        max-height: none;
    }

    .cat-list,
    .atlas-category-list {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 8px;
        overflow-x: auto;
        padding: 3px 2px 9px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .cat-list .cat-btn,
    .atlas-category-list > * {
        flex: 0 0 auto;
        width: auto;
        max-width: min(76vw, 270px);
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

/* Телефон: компактная однострочная шапка и предсказуемые размеры. */
@media (max-width: 700px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: 72px;
    }

    body {
        min-width: 320px;
        font-size: 15px;
        line-height: 1.5;
    }

    .bg-nebula,
    .bg-stars-medium,
    .bg-stars-large,
    .bg-shooting-star,
    .bg-clouds-back,
    .bird-2,
    .bird-3 {
        display: none;
    }

    /* Одна стая птиц на телефоне — летит медленнее и ниже,
       чтобы не отвлекать от шапки. */
    .bird-1 {
        top: 22%;
        width: 36px;
        height: 12px;
        animation-duration: 60s;
    }

    .container {
        padding:
            max(10px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(28px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .main-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        margin: -10px -2px 16px;
        padding: 8px 4px;
        background: color-mix(in srgb, var(--card-background) 92%, transparent);
        border-bottom: 1px solid var(--border-color);
        backdrop-filter: blur(14px);
    }

    .header-left {
        display: flex;
        min-width: 0;
        gap: 8px;
        align-items: center;
    }

    .header-left h1 {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: clamp(1rem, 5vw, 1.22rem);
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-left > .btn-secondary {
        display: inline-grid;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        place-items: center;
        overflow: hidden;
        font-size: 0;
        border-radius: 50%;
    }

    .header-left > .btn-secondary::before {
        content: "←";
        font-size: 1.15rem;
    }

    .header-right {
        display: flex;
        flex: 0 0 auto;
        width: auto;
        gap: 5px;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .theme-switch {
        --toggle-size: 11px;
        flex: 0 0 auto;
        margin: 0;
        transform: none;
    }

    .theme-switch__container {
        box-shadow: 0 0 0 2px #1a1a1a, 2px 2px 0 1px rgba(26, 26, 26, .18);
    }

    .username-display {
        display: none;
    }

    .auth-action-btn,
    .menu-toggle-btn {
        display: inline-grid;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        place-items: center;
        border-radius: 50%;
    }

    .auth-action-icon { display: inline; font-size: 1.05rem; }
    .auth-action-label { display: none; }
    .menu-toggle-btn { font-size: 1.35rem; }

    .side-nav {
        width: min(88vw, 330px);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .side-nav-header {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 14px 16px;
        background: var(--card-background);
    }

    .nav-link { padding: 13px 17px; }

    /* Закреплённая сводка HP/маны/КД листа персонажа: оформление задано
       в 04-character.css, здесь она только показывается и прилипает
       под шапкой (её высота ~58-60px), чтобы ресурсы были видны на любой
       вкладке при прокрутке. */
    .character-resource-bar {
        position: sticky;
        top: 62px;
        z-index: var(--z-sticky);
        display: flex;
    }

    h2 { line-height: 1.2; }
    p, li, dd { overflow-wrap: anywhere; }

    .btn {
        min-height: 44px;
        padding: 9px 13px;
        line-height: 1.25;
    }

    :is(input, select, textarea) {
        min-height: 44px;
        font-size: 16px;
    }

    textarea { min-height: 92px; }

    .section-header,
    .gm-panel-heading,
    .admin-header,
    .scene-admin-toolbar,
    .catalog-toolbar,
    .atlas-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .section-header > .btn,
    .gm-panel-heading > .btn,
    .scene-admin-toolbar > .btn,
    .catalog-toolbar > .btn,
    .atlas-toolbar > .btn {
        width: 100%;
    }

    :is(.characters-grid, .characters-grid--pairs, .items-grid, .wiki-grid,
        .atlas-grid, .topics-grid, .ingredients-grid, .spells-grid,
        .crafts-grid, .abilities-grid, .admin-actions, .grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .character-controls,
    .quick-roll-grid,
    .ci-grid,
    .wiki-form .form-grid-2,
    .wiki-form .form-grid-3,
    .form-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .home-hero {
        gap: 18px;
        margin-bottom: 16px;
        padding: 22px 18px;
        border-radius: 14px;
    }

    .home-hero h2 { font-size: clamp(1.45rem, 8vw, 2rem); }
    .home-hero-copy > p { font-size: .94rem; }
    .session-board-preview { padding: 16px; }

    .quick-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .quick-link-card {
        min-height: 74px;
        padding: 11px 8px;
    }

    .characters-section,
    .character-content,
    .character-sidebar,
    .gm-panel,
    .calendar-card,
    .crafting-card,
    .auth-section {
        padding: 15px;
        border-radius: 12px;
    }

    .character-card-actions,
    .session-board-actions,
    .modal-buttons,
    .editor-actions,
    .detail-modal-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .character-card-actions .btn,
    .session-board-actions .btn,
    .modal-buttons .btn,
    .editor-actions .btn,
    .detail-modal-actions .btn {
        width: 100%;
        text-align: center;
    }

    .character-nav,
    .sub-tabs,
    .crafting-tabs,
    .filter-bar,
    .quick-bar,
    .tag-filter-container {
        margin-inline: -4px;
        padding: 3px 4px 9px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    :is(.character-nav, .sub-tabs, .crafting-tabs, .filter-bar, .quick-bar) > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .calendar-days { gap: 3px; }
    .calendar-day { min-height: 40px; aspect-ratio: 1; }
    .schedule-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

    /* Модалки становятся нижними листами: они не вылезают за экран и удобны пальцу. */
    :is(.modal, .event-modal, .admin-schedule-modal, .admin-modal, .battle-modal,
        .modal-overlay) {
        padding: max(12px, env(safe-area-inset-top)) 0 0;
        align-items: flex-end;
        overflow: hidden;
    }

    :is(.modal, .event-modal, .admin-schedule-modal, .battle-modal,
        .modal-overlay).ui-modal-open,
    :is(.modal, .event-modal, .admin-schedule-modal, .battle-modal,
        .modal-overlay)[style*="display: block"],
    .admin-modal.open,
    .admin-modal[style*="display: block"] {
        display: flex !important;
    }

    :is(.modal-content, .event-modal-content, .admin-schedule-content,
        .admin-modal-content, .atlas-detail, .atlas-editor, .detail-modal-content,
        .editor-modal-content, .create-item-modal, .battle-modal-content) {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top))) !important;
        margin: auto 0 0 !important;
        padding: 20px 16px max(20px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        border-radius: 18px 18px 0 0 !important;
        overscroll-behavior: contain;
    }

    .close,
    .admin-modal-close,
    .battle-modal-close {
        top: 8px;
        right: 8px;
        display: grid;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        text-align: center;
    }

    .confirm-dialog-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .confirm-dialog {
        max-width: 100%;
        padding: 22px 17px max(18px, env(safe-area-inset-bottom));
        border-radius: 18px;
    }

    .table-responsive,
    .levels-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .levels-table td { min-width: 0; white-space: normal; }

    .scene-admin-wrap { padding: 4px !important; }
    .scene-admin-toolbar input[type="text"] { min-width: 0 !important; width: 100%; }

    .admin-grid { gap: 9px; }
    .admin-card { min-height: 118px; padding: 14px; }
    .admin-stat { font-size: 1.8rem; }

    .gm-screen-aside { grid-template-columns: minmax(0, 1fr); }
    .progress-clock-settings { align-items: stretch; }
    .publish-switch { width: fit-content; }

    .save-all-btn {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        left: max(12px, env(safe-area-inset-left));
        width: auto;
        padding: 12px 16px !important;
        font-size: .95rem !important;
    }

    .ui-toast-container {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        width: auto;
    }

    .ui-toast { max-width: none; }
}

@media (max-width: 420px) {
    .container {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    .main-header { margin-inline: 0; }
    .header-left h1 { font-size: 1rem; }
    .theme-switch { --toggle-size: 10px; }

    .quick-links-grid { grid-template-columns: minmax(0, 1fr); }
    .quick-link-card {
        min-height: 56px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        text-align: left;
    }

    .schedule-legend { grid-template-columns: minmax(0, 1fr); }
    .calendar-card { padding: 12px; }

    .admin-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .admin-card { min-height: 0; }

    .party-rest-actions,
    .quick-roll-grid { grid-template-columns: minmax(0, 1fr); }
    .progress-clock-settings { flex-direction: column; }

    .checkbox-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .ingredients-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (pointer: coarse) {
    :is(button, .btn, .nav-link, .cat-btn, .sub-tab-btn, .nav-btn,
        .quick-filter-btn, .tag-filter-btn, [role="button"]) {
        min-width: 44px;
        min-height: 44px;
    }

    :is(button, .btn, a, label, [role="button"]) {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ==========================================================================
   ВКЛАДКА «ПЕРСОНАЖ» НА ТЕЛЕФОНЕ
   Лист персонажа собран под большой палец: сначала состояние (ресурсы,
   состояния, урон), затем экипировка и проверки. Все правила — последний
   слой каскада, поэтому перекрывают 04-character.css и 05-responsive.css
   без blanket !important.
   ========================================================================== */

@media (max-width: 700px) {
    /* Закреплённая сводка ОЗ/ОМ/КД: три равные колонки вместо переносов.
       display: flex задан выше (первый мобильный блок) — здесь только
       раскладка, чтобы плашка не расползалась на два ряда. */
    .character-resource-bar {
        flex-wrap: nowrap;
        gap: 4px;
        margin-inline: -2px;
        padding: 8px 10px;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    }

    .character-resource-bar__item {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        min-height: 28px;
        font-size: .78rem;
    }

    .character-resource-bar b { font-size: 1rem; }

    /* Панель быстрых ± (только у ГМа): по строке на ресурс, кнопки тянутся. */
    .quick-resource-hud {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
    }

    .quick-resource-group {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .quick-resource-label { flex: 1 1 100%; }
    .quick-btn-delta { flex: 1 1 0; }

    /* Порядок блоков: состояние важнее силуэта — его листают реже. */
    .sheet-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .sheet-stats-column { order: 1; }
    .sheet-equipment-column { order: 2; }

    .sheet-column h3 {
        margin-bottom: 8px;
        font-size: 1.02rem;
    }

    /* Силуэт: помещается в экран целиком, не заставляя скроллить лист. */
    .sheet-silhouette {
        width: min(62vw, 230px);
        max-width: none;
    }

    .sheet-zone-panel,
    .sheet-equipment-effects,
    .sheet-resources,
    .sheet-damage {
        margin-top: 12px;
        padding: 12px;
        border-radius: 12px;
    }

    .sheet-slot-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .sheet-slot-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sheet-slot-actions .btn { flex: 1 1 auto; }

    .sheet-slot-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    /* Полосы ресурсов: выше и с читаемыми цифрами по центру. */
    .sheet-resource { margin-bottom: 16px; }

    .sheet-resource-bar {
        height: 30px;
        border-radius: 15px;
    }

    .sheet-resource-bar-label { font-size: .88rem; }

    .sheet-resource-label {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: baseline;
        font-size: .92rem;
    }

    /* Редактирование ГМом: поле и кнопка в строку, оба удобны пальцу. */
    .sheet-resource-edit {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        justify-content: stretch;
    }

    .sheet-resource-edit input,
    .sheet-resource-edit .sheet-resource-input {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .sheet-resource-edit label.sheet-resource-caption { grid-column: 1 / -1; }

    .sheet-mood-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        justify-content: stretch;
    }

    .sheet-mood-row label { grid-column: 1 / -1; }
    .sheet-mood-row select,
    .sheet-mood-row input[type="number"] { width: 100%; max-width: none; }

    .sheet-weight-display {
        flex-wrap: wrap;
        font-size: .85rem;
    }

    .sheet-weight-note {
        flex-basis: 100%;
        margin-left: 0;
        white-space: normal;
    }

    /* Состояния: чипы переносятся, крестик — нормальная touch-цель. */
    .sheet-conditions-list { gap: 8px; }

    .condition-chip {
        max-width: 100%;
        padding: 7px 10px;
        font-size: .8rem;
        overflow-wrap: anywhere;
    }

    .condition-chip .icon-button {
        display: inline-grid;
        width: 32px;
        height: 32px;
        place-items: center;
    }

    .sheet-condition-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    /* Проверки навыков: имя и разбор формулы слева, итог и куб — справа.
       Раньше на телефоне формула и значение просто скрывались, и игрок
       видел только название навыка без единой цифры. */
    .sheet-checks-fullwidth { margin-top: 18px; }

    .sheet-check-card {
        padding: 12px;
        border-radius: 12px;
    }

    .sheet-check-card h4 {
        gap: 8px;
        align-items: center;
        font-size: .98rem;
    }

    .sheet-skill-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 4px 10px;
        padding: 9px 0;
    }

    .sheet-skill-name {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }

    .sheet-skill-formula {
        display: block;
        grid-column: 1;
        grid-row: 2;
        font-size: .76rem;
        white-space: normal;
    }

    .sheet-skill-value {
        display: grid;
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 46px;
        padding: 0 6px;
        place-items: center;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .sheet-skill-input {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 74px;
        min-height: 44px;
        font-size: 16px;
    }

    .sheet-skill-row .btn-roll {
        grid-column: 3;
        grid-row: 1 / span 2;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
    }

    /* Уровень и опыт: одна карточка на всю ширину. */
    .level-exp-display {
        padding: 12px;
        border-radius: 12px;
    }

    .exp-bar-label {
        flex-wrap: wrap;
        gap: 4px;
        font-size: .8rem;
    }

    .character-alchemy-section { margin-top: 18px; }
}

@media (max-width: 420px) {
    .character-resource-bar { padding: 7px 8px; }
    .character-resource-bar__item { font-size: .74rem; }
    .sheet-silhouette { width: min(72vw, 210px); }
    .sheet-skill-row { grid-template-columns: minmax(0, 1fr) auto; }
    .sheet-skill-value,
    .sheet-skill-input { grid-row: 1; }
    .sheet-skill-row .btn-roll { grid-column: 2; grid-row: 2; justify-self: end; }
    .quick-btn-delta { flex: 1 1 40%; }
}

/* ==========================================================================
   ПОЛИРОВКА МОБИЛЬНОГО ДИЗАЙНА (2026-08-24)
   Точечные улучшения поверх существующих правил: мягкие тени шапки,
   отклик на тап, безопасные отступы, читаемость hero, аккуратный фокус.
   ========================================================================== */

@media (max-width: 700px) {
    /* Шапка становится «матовым стеклом» с мягкой тенью, которое отделяется
       от прокручиваемого контента, а не просто линией. */
    .main-header,
    .battle-header {
        box-shadow: 0 4px 18px rgba(13, 32, 48, .12);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        backdrop-filter: saturate(160%) blur(16px);
    }

    [data-theme="dark"] .main-header,
    [data-theme="dark"] .battle-header {
        box-shadow: 0 4px 22px rgba(0, 0, 0, .5);
    }

    /* Карточки получают лёгкий подъём при тапе — это нативное ощущение,
       а hover с десктопа на тач-экранах не срабатывает. */
    .character-card,
    .craft-card,
    .spell-card,
    .ability-card,
    .item-card,
    .wiki-card,
    .atlas-card,
    .quick-link-card,
    .ing-card {
        transition: transform .18s ease, box-shadow .18s ease,
                    border-color .18s ease;
    }

    @media (hover: none) {
        .character-card:active,
        .craft-card:active,
        .spell-card:active,
        .ability-card:active,
        .item-card:active,
        .wiki-card:active,
        .atlas-card:active,
        .quick-link-card:active,
        .ing-card:active {
            transform: scale(0.985);
        }
    }

    /* Кнопки и ссылки получают штатный tap-highlight, но без серой
       плашки системного цвета. */
    .btn,
    .nav-link,
    .cat-btn,
    .quick-link-card {
        -webkit-tap-highlight-color: transparent;
    }

    .btn:active {
        transform: scale(0.97);
        transition: transform .1s ease;
    }

    /* Hero-блоки: чуть плотнее на узких экранах, без горизонтального
       переполнения от радиальных градиентов. */
    .home-hero,
    .page-hero {
        margin-inline: -2px;
        padding: 22px 18px;
        border-radius: 16px;
    }

    .home-hero h2,
    .page-hero h2 {
        letter-spacing: -0.02em;
    }

    .home-hero-copy > p,
    .page-hero p {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    /* Тосты и индикатор сохранения — отступ под нижнюю чёлку/жест. */
    #ui-toasts,
    .ui-toast-container,
    .ui-save-indicator {
        bottom: max(14px, env(safe-area-inset-bottom));
    }

    /* Боковое меню: зазор под чёлку и более мягкая тень. */
    .side-nav {
        box-shadow: 8px 0 30px rgba(13, 32, 48, .22);
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    [data-theme="dark"] .side-nav {
        box-shadow: 8px 0 30px rgba(0, 0, 0, .6);
    }

    /* Модалки-листы: перетаскиваемый визуальный «грип» сверху и
       корректный safe-area фон. */
    .modal-content,
    .event-modal-content,
    .admin-schedule-content,
    .admin-modal-content,
    .battle-modal-content,
    .detail-modal-content,
    .editor-modal-content,
    .create-item-modal {
        padding-top: max(28px, env(safe-area-inset-top)) !important;
    }

    .modal-content::before,
    .battle-modal-content::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        border-radius: 99px;
        background: var(--border-color);
        transform: translateX(-50%);
        opacity: 0.7;
        pointer-events: none;
    }

    /* Поля ввода без «зум-прыжка» на iOS (min-height уже 44, но
       дублируем font-size для надёжности). */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* Чекбоксы/радио в формах не наезжают на подпись. */
    input[type="checkbox"],
    input[type="radio"] {
        min-height: auto;
        min-width: 18px;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        accent-color: var(--primary-color);
    }

    /* Скроллбары в горизонтальных рядах навигации — скрываем,
       оставляя прокрутку пальцем. */
    .character-nav,
    .sub-tabs,
    .crafting-tabs,
    .filter-bar,
    .cat-list,
    .atlas-category-list {
        scrollbar-width: none;
    }
    .character-nav::-webkit-scrollbar,
    .sub-tabs::-webkit-scrollbar,
    .crafting-tabs::-webkit-scrollbar,
    .filter-bar::-webkit-scrollbar,
    .cat-list::-webkit-scrollbar,
    .atlas-category-list::-webkit-scrollbar {
        display: none;
    }

    /* Заголовок шапки не должен обрезаться до 1 символа, если в меню
       слева только «Назад». */
    .header-left h1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Аватарки персонажей в карточках — чуть крупнее для пальца. */
    .character-avatar {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 1.1rem;
    }

    /* Социальные кнопки — удобный тап-таргет. */
    .social-btn {
        min-height: 56px;
        padding: 12px 10px;
        gap: 8px;
    }

    /* Горизонтально переполняющиеся блоки не выбивают страницу. */
    .session-board-preview,
    .character-card-meta,
    .inventory-tags,
    .item-card-tags {
        min-width: 0;
    }

    /* Текущий день в календаре — заметная пульсация (мягкая). */
    .calendar-day.today {
        box-shadow: 0 0 0 2px var(--primary-color);
    }
}

@media (max-width: 420px) {
    /* На самых узких экранах hero занимает всю ширину вплотную. */
    .home-hero,
    .page-hero {
        margin-inline: -4px;
        border-radius: 14px;
    }

    /* Переключатель темы — звёзды в нём должны быть видны даже при
       размере 10px (ранее --toggle-size: 10px). */
    .theme-switch { --toggle-size: 11px; }
}