/* ============================================================
   CYBER//TYPE — Responsive Layout
   Адаптивность для ноутбуков и компактных экранов.
   Подключается ПОСЛЕДНИМ — переопределяет размеры через
   media queries по высоте viewport.
   
   Брейкпоинты:
     max-height: 800px  — ноутбуки (1366×768, 1920×1080@125%)
     max-height: 650px  — очень компактные окна
   ============================================================ */

/* ==================== LAPTOP (≤ 800px height) ==================== */
@media (max-height: 800px) {

    /* --- Game screen: уменьшаем отступы (padding-top НЕ трогаем — --- */
    /* --- там fixed toolbar/brand, агрессивно уменьшаем только в fullscreen) --- */

    .game-header {
        margin-bottom: 10px;
    }

    /* --- Stats bar: компактнее --- */
    .game-screen .stats-bar {
        padding: 10px 20px;
        gap: 20px;
        margin-bottom: 15px;
    }

    .game-screen .stats-bar .stat-value {
        font-size: 18px;
    }

    /* --- Text display: компактный текст --- */
    .game-screen .text-display {
        padding: 15px 20px;
        font-size: 18px;
        min-height: 80px;
        line-height: 1.6;
    }

    /* --- Error area: меньше отступы --- */
    .error-hint {
        margin-top: 8px;
        font-size: 13px;
    }

    .error-counter {
        margin-top: 6px;
        font-size: 12px;
    }

    /* --- Keyboard: уменьшаем клавиши --- */
    .keyboard-section {
        margin-top: 15px;
    }

    .keyboard {
        gap: 3px;
    }

    .keyboard-row {
        gap: 3px;
    }

    .key {
        min-width: 38px;
        height: 38px;
        font-size: 12px;
    }

    .key-space {
        max-width: 350px;
    }

    .key-wide {
        min-width: 60px;
    }

    .key-wider {
        min-width: 78px;
    }

    /* --- Finger hint: компактнее --- */
    .finger-hint-text {
        margin-top: 8px;
        font-size: 12px;
    }

    .levels-header {
        margin-bottom: 20px;
    }

    /* --- Neural page: neuro-keyboard компактнее --- */
    .neuro-keyboard {
        gap: 3px;
    }

    .neuro-row {
        gap: 3px;
    }

    .neuro-key {
        min-width: 44px;
        height: 44px;
        font-size: 13px;
    }

    .neuro-key .key-label {
        font-size: 12px;
    }

    .neuro-key .key-stat {
        font-size: 7px;
    }

    .neuro-key-space {
        max-width: 380px;
    }

    .neuro-key-shift {
        min-width: 78px;
    }

    /* --- Boost keyboard: ещё компактнее --- */
    .boost-keyboard-container {
        margin-top: 12px;
        padding: 10px;
    }

    .boost-keyboard-container .neuro-key {
        min-width: 38px;
        height: 38px;
    }

    .boost-keyboard-container .neuro-key-space {
        max-width: 320px;
    }

    .boost-keyboard-container .neuro-key-shift {
        min-width: 66px;
    }

    /* --- Boost text display --- */
    .boost-text-display {
        padding: 15px 20px;
        font-size: 17px;
        min-height: 80px;
        line-height: 1.6;
    }

    .boost-stats-bar {
        padding: 8px 15px;
        margin-bottom: 12px;
    }

    .boost-timer {
        font-size: 17px;
    }

    .boost-error-hint {
        margin-top: 6px;
    }

    /* --- Neural summary: компактнее --- */
    .summary-card {
        padding: 12px;
    }

    .summary-value {
        font-size: 22px;
    }

    .summary-grid {
        margin-bottom: 20px;
    }

    .overall-progress {
        margin-bottom: 18px;
    }

    /* --- Neural map container --- */
    .neural-map-container {
        padding: 15px;
        margin-bottom: 18px;
    }

    .map-title {
        margin-bottom: 12px;
    }
}

/* ==================== VERY COMPACT (≤ 650px height) ==================== */
@media (max-height: 650px) {

    .game-header {
        margin-bottom: 6px;
    }

    .game-screen .stats-bar {
        padding: 6px 15px;
        gap: 15px;
        margin-bottom: 10px;
    }

    .game-screen .stats-bar .stat-value {
        font-size: 16px;
    }

    .game-screen .stats-bar .stat-label {
        font-size: 10px;
    }

    .game-screen .text-display {
        padding: 12px 15px;
        font-size: 16px;
        min-height: 60px;
        line-height: 1.5;
    }

    .error-hint {
        margin-top: 4px;
        font-size: 12px;
    }

    .error-counter {
        margin-top: 4px;
        font-size: 11px;
    }

    /* --- Keyboard: ещё меньше --- */
    .keyboard-section {
        margin-top: 8px;
    }

    .keyboard {
        gap: 2px;
    }

    .keyboard-row {
        gap: 2px;
    }

    .key {
        min-width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .key-space {
        max-width: 300px;
    }

    .key-wide {
        min-width: 52px;
    }

    .key-wider {
        min-width: 68px;
    }

    .finger-hint-text {
        margin-top: 5px;
        font-size: 11px;
    }

    .levels-header {
        margin-bottom: 15px;
    }

    /* --- Neuro keyboard --- */
    .neuro-key {
        min-width: 38px;
        height: 38px;
        font-size: 12px;
    }

    .neuro-key .key-stat {
        display: none;
    }

    .neuro-key-space {
        max-width: 340px;
    }

    .neuro-key-shift {
        min-width: 68px;
    }

    /* --- Boost --- */
    .boost-keyboard-container .neuro-key {
        min-width: 32px;
        height: 32px;
    }

    .boost-keyboard-container .neuro-key .key-label {
        font-size: 10px;
    }

    .boost-keyboard-container .neuro-key-space {
        max-width: 280px;
    }

    .boost-keyboard-container .neuro-key-shift {
        min-width: 58px;
    }

    .boost-text-display {
        padding: 10px 15px;
        font-size: 15px;
        min-height: 60px;
    }

    .boost-stats-bar {
        padding: 5px 12px;
        margin-bottom: 8px;
    }

    /* --- Neural summary --- */
    .summary-card {
        padding: 8px;
    }

    .summary-value {
        font-size: 18px;
    }

    .summary-label {
        font-size: 9px;
    }

    .neural-map-container {
        padding: 10px;
        margin-bottom: 12px;
    }
}

/* ==================== FULLSCREEN + COMPACT ==================== */
/* Fullscreen на компактном экране: ещё агрессивнее, */
/* т.к. toolbar и branding уже скрыты.               */

body.is-fullscreen .game-screen {
    padding-top: 15px;
}

@media (max-height: 800px) {
    body.is-fullscreen .game-screen {
        padding-top: 10px;
    }

    body.is-fullscreen .game-header {
        margin-bottom: 6px;
    }

    body.is-fullscreen .game-screen .stats-bar {
        padding: 6px 15px;
        margin-bottom: 10px;
    }

    body.is-fullscreen .keyboard-section {
        margin-top: 10px;
    }
}

@media (max-height: 650px) {
    body.is-fullscreen .game-screen {
        padding-top: 5px;
    }

    body.is-fullscreen .game-header {
        margin-bottom: 4px;
    }

    body.is-fullscreen .game-screen .stats-bar {
        padding: 4px 12px;
        margin-bottom: 6px;
    }

    body.is-fullscreen .game-screen .text-display {
        padding: 10px 12px;
        font-size: 15px;
        min-height: 50px;
    }

    body.is-fullscreen .keyboard-section {
        margin-top: 5px;
    }

    body.is-fullscreen .key {
        min-width: 30px;
        height: 30px;
        font-size: 10px;
    }

    body.is-fullscreen .finger-hint-text {
        margin-top: 3px;
        font-size: 10px;
    }
}