/* mobile.css - полная адаптация для мобильных устройств */

/* Планшеты и маленькие ноутбуки */
@media (max-width: 768px) {
    /* Общие настройки */
    body {
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Главное меню (index.html) */
    .title {
        font-size: 32px !important;
        letter-spacing: 6px !important;
        text-align: center;
        padding: 0 16px;
    }

    .subtitle {
        font-size: 12px !important;
        letter-spacing: 4px !important;
        margin-top: -20px !important;
        text-align: center;
        padding: 0 16px;
    }

    .menu {
        width: 100%;
        padding: 0 20px;
    }

    .menu-btn {
        padding: 10px 40px !important;
        font-size: 16px !important;
        letter-spacing: 4px !important;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
    }

    .continue-info {
        font-size: 10px !important;
        text-align: center;
    }

    .decor-left, .decor-right {
        width: 50px !important;
        opacity: 0.02 !important;
    }

    /* Игровой экран (game.html, game1.html) */
    .scene-container {
        width: 95% !important;
        gap: 20px !important;
        padding: 16px;
    }

    .speaker-name {
        font-size: 14px !important;
        letter-spacing: 3px !important;
        text-align: center;
    }

    .dialogue-text {
        font-size: 16px !important;
        line-height: 1.5 !important;
        min-height: 100px !important;
        padding: 0 12px !important;
        text-align: center;
    }

    .click-hint {
        font-size: 10px !important;
        letter-spacing: 3px !important;
        padding: 8px;
    }

    .choices-container {
        width: 90% !important;
        gap: 12px !important;
        padding: 16px;
    }

    .choice-question {
        font-size: 16px !important;
        letter-spacing: 2px !important;
        text-align: center;
    }

    .choice-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        letter-spacing: 2px !important;
        width: 100%;
    }

    /* Панель кнопок */
    .top-panel {
        top: 10px !important;
        right: 10px !important;
        gap: 8px !important;
    }

    .btn-panel {
        padding: 6px 12px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    .save-notify {
        top: 48px !important;
        right: 10px !important;
        font-size: 10px !important;
        padding: 4px 8px;
        background: rgba(13, 10, 20, 0.9);
        border-radius: 4px;
    }

    /* Модальное окно сохранений */
    .modal {
        width: 90% !important;
        padding: 20px !important;
        margin: 16px;
    }

    .modal-title {
        font-size: 16px !important;
        letter-spacing: 4px !important;
    }

    .save-slots {
        max-height: 250px !important;
    }

    .save-slot {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .slot-info {
        flex: 1;
        min-width: 120px;
    }

    .slot-name {
        font-size: 12px !important;
    }

    .slot-date {
        font-size: 9px !important;
    }

    .btn-modal-close {
        padding: 8px !important;
        font-size: 12px !important;
        letter-spacing: 3px !important;
    }

    /* Экран создания персонажа (new-game.html, new-game1.html) */
    .create-screen {
        width: 90% !important;
        gap: 25px !important;
        padding: 20px;
    }

    .create-title {
        font-size: 20px !important;
        letter-spacing: 4px !important;
        text-align: center;
    }

    .create-subtitle {
        font-size: 11px !important;
        letter-spacing: 3px !important;
        margin-top: -20px !important;
        text-align: center;
    }

    .input-group {
        width: 100%;
    }

    .input-label {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }

    .input-field {
        padding: 12px 14px !important;
        font-size: 16px !important;
        text-align: center;
    }

    .char-counter {
        font-size: 10px !important;
    }

    .btn-start {
        padding: 10px 40px !important;
        font-size: 16px !important;
        letter-spacing: 4px !important;
        width: 100%;
    }

    .btn-back {
        top: 12px !important;
        left: 12px !important;
        font-size: 12px !important;
        letter-spacing: 2px !important;
        padding: 6px 12px;
        background: rgba(13, 10, 20, 0.8);
        border-radius: 4px;
    }

    /* Экран сохранений (saves.html) */
    .saves-screen {
        width: 95% !important;
        gap: 20px !important;
        padding: 16px;
    }

    .saves-title {
        font-size: 20px !important;
        letter-spacing: 5px !important;
        text-align: center;
    }

    .save-slots {
        max-height: 60vh !important;
    }

    .save-slot {
        padding: 12px !important;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
    }

    .slot-info {
        align-items: center;
    }

    .slot-name {
        font-size: 13px !important;
    }

    .slot-details {
        font-size: 10px !important;
    }

    .slot-actions {
        justify-content: center;
        gap: 12px;
    }

    .btn-slot {
        padding: 6px 16px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    .btn-back {
        padding: 8px 30px !important;
        font-size: 14px !important;
        letter-spacing: 3px !important;
        width: auto;
    }

    .no-saves {
        font-size: 13px !important;
        letter-spacing: 3px !important;
        padding: 30px 0;
    }

    /* Концовки */
    .true-ending-badge {
        font-size: 10px !important;
        letter-spacing: 2px !important;
        padding: 4px 10px !important;
    }

    .ending-note {
        font-size: 13px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
    }
}

/* Смартфоны (до 480px) */
@media (max-width: 480px) {
    .title {
        font-size: 28px !important;
        letter-spacing: 4px !important;
    }

    .menu-btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
        white-space: normal;
        word-break: keep-all;
    }

    .dialogue-text {
        font-size: 15px !important;
        min-height: 80px !important;
    }

    .choice-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .create-title {
        font-size: 18px !important;
        letter-spacing: 3px !important;
    }

    .input-field {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .btn-start {
        padding: 8px 30px !important;
        font-size: 14px !important;
    }

    .saves-title {
        font-size: 18px !important;
    }

    .save-slot {
        padding: 10px !important;
    }

    .btn-slot {
        padding: 5px 12px !important;
        font-size: 10px !important;
    }
}

/* Очень маленькие экраны (до 360px) */
@media (max-width: 360px) {
    .title {
        font-size: 24px !important;
        letter-spacing: 3px !important;
    }

    .menu-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    .dialogue-text {
        font-size: 13px !important;
    }

    .choice-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .create-title {
        font-size: 16px !important;
        letter-spacing: 2px !important;
    }
}

/* Альбомная ориентация на мобильных */
@media (max-width: 900px) and (orientation: landscape) {
    body {
        padding: 0 20px;
    }

    .scene-container {
        gap: 10px !important;
        padding: 10px;
    }

    .dialogue-text {
        min-height: 50px !important;
        font-size: 14px !important;
    }

    .choices-container {
        gap: 8px !important;
        max-height: 60vh;
        overflow-y: auto;
    }

    .choice-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    .save-slots {
        max-height: 40vh !important;
    }

    .modal {
        max-height: 80vh;
        overflow-y: auto;
    }

    .top-panel {
        top: 5px !important;
        right: 5px !important;
    }
}

/* Для устройств с сенсорным экраном - убираем hover-эффекты при тапе */
@media (hover: none) and (pointer: coarse) {
    .menu-btn:hover,
    .choice-btn:hover,
    .btn-panel:hover,
    .btn-slot:hover,
    .btn-back:hover {
        transform: none;
    }
}

/* Улучшаем скролл на мобильных */
@media (max-width: 768px) {
    .save-slots,
    .choices-container,
    .save-slots {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Стили для скроллбара на WebKit */
    .save-slots::-webkit-scrollbar,
    .choices-container::-webkit-scrollbar {
        width: 4px;
    }

    .save-slots::-webkit-scrollbar-track,
    .choices-container::-webkit-scrollbar-track {
        background: #1a1425;
    }

    .save-slots::-webkit-scrollbar-thumb,
    .choices-container::-webkit-scrollbar-thumb {
        background: #3a2d54;
        border-radius: 4px;
    }
}