/* ============================================================
   RESPONSIVE — Breakpoint overrides (mobile-first)

   Two layouts:
     • stacked      — game area, passage, keyboard top to bottom (phones)
     • side by side — keyboard as a right-hand panel (tablet, desktop,
                      and phones held in landscape)
   ============================================================ */

/* ── Default (≥320px, phones): stacked ───────────────────── */

#game-main {
    flex-direction: column;
    min-height: 0;
}

#keyboard-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-left: none;
    border-top: 2px solid var(--color-border);
    flex: 0 0 auto;
    max-height: 60dvh;
    padding: var(--space-2) var(--space-2) var(--space-3);
}

/* Fixed columns so every consonant fits without scrolling, and a fixed
   height (that of the fullest tab) so the game area never changes size
   while letters are falling. */
#keyboard-grid {
    --key-cols: 9;
    --key-rows: 4;
    --key-h:    44px;
    --key-gap:  5px;
    grid-template-columns: repeat(var(--key-cols), minmax(0, 1fr));
    gap: var(--key-gap);
    align-content: start;
    min-height: calc(var(--key-rows) * var(--key-h) + (var(--key-rows) - 1) * var(--key-gap));
}

.brahmi-key {
    height: var(--key-h);
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-sm);
}

.key-label { font-size: 0.625rem; }

/* All four tabs share the row instead of the last one being cut off. */
#keyboard-tabs { gap: var(--space-1); }

.kbd-tab {
    flex: 1 1 auto;
    padding: var(--space-1);
    letter-spacing: 0.02em;
    text-align: center;
}

.left-panel {
    flex: 1;
    min-height: 0;
}

/* The passage keeps its full height; the game area takes what is left. */
#game-area {
    min-height: 96px;
}

#word-zone {
    min-height: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    gap: var(--space-1);
}

/* Keep modal content inside narrow phone viewports. */
.screen-overlay {
    padding: var(--space-3);
    align-items: stretch;
    overflow-y: auto;
}

.overlay-card {
    min-width: 0;
    max-width: 480px;
    margin: auto;
    padding: var(--space-8) var(--space-5);
}

.start-title {
    font-size: clamp(1.55rem, 8vw, var(--fs-2xl));
}

.start-subtitle {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Smaller Brahmi characters on narrow screens */
:root {
    --brahmi-size-target: 2.00rem;
    --brahmi-size-fall:   1.875rem;
    --brahmi-size-key:    1.25rem;
}

/* Header: level, score, lives and both controls must fit on one row. */
#game-header {
    padding: 0 var(--space-3);
}

.header-brand .ui-text { display: none; }

#screen-hud      { gap: var(--space-3); }
.hud-stat        { min-width: 0; }
.life            { width: 12px; height: 12px; }
.header-controls { margin-left: var(--space-3); }

/* Score/level labels hidden on smallest screens */
@media (max-width: 360px) {
    .hud-stat__label { display: none; }
    .hud-stat__value { font-size: var(--fs-base); }
}

/* ── ≥390px (modern phones) ──────────────────────────────── */
@media (min-width: 390px) {
    :root {
        --brahmi-size-target: 2.25rem;
        --brahmi-size-fall:   2.00rem;
        --brahmi-size-key:    1.375rem;
    }
}

/* ── ≥480px (large phones, small tablets): stacked, wider keys ── */
@media (min-width: 480px) {
    :root {
        --brahmi-size-target: 2.75rem;
        --brahmi-size-fall:   2.25rem;
        --brahmi-size-key:    1.50rem;
    }

    #keyboard-section {
        padding: var(--space-3) var(--space-4);
    }

    #keyboard-grid {
        --key-cols: 11;
        --key-rows: 3;
        --key-h:    50px;
        --key-gap:  6px;
    }

    .key-label { font-size: var(--fs-xs); }

    #keyboard-tabs { gap: var(--space-2); }

    .kbd-tab {
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-3);
        letter-spacing: 0.06em;
    }

    .header-brand .ui-text { display: inline; }
    #screen-hud            { gap: var(--space-5); }
    .life                  { width: 16px; height: 16px; }

    #word-zone {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
    }
}

/* ── Short phones: every pixel goes to the game ──────────── */
@media (max-height: 620px) and (max-width: 767px) {
    :root {
        --header-height:      48px;
        --brahmi-size-target: 1.875rem;
        --brahmi-size-fall:   1.75rem;
    }

    #keyboard-grid     { --key-h: 40px; }
    .word-zone__label  { display: none; }
    #target-word       { min-height: 0; }
    #target-hindi      { font-size: var(--fs-md); min-height: 0; }
    .overlay-card      { padding: var(--space-5) var(--space-4); }
}

/* ── Side by side: tablet and up, or a phone in landscape ── */
@media (min-width: 768px), (min-width: 560px) and (max-height: 500px) {
    #game-main {
        flex-direction: row;
    }

    #keyboard-section {
        width: 380px;
        max-width: 45%;
        min-width: 320px;
        border-left: 2px solid var(--color-border);
        border-top: none;
        max-height: none;
        padding: var(--space-4) var(--space-4);
    }

    #keyboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
        gap: var(--space-2);
        min-height: 0;
    }

    .brahmi-key {
        height: auto;
        min-height: 58px;
        padding: var(--space-1);
        border-radius: var(--radius-md);
    }

    .key-label { font-size: var(--fs-xs); }

    #game-area { min-height: 0; }
}

/* ── ≥768px (tablet) ─────────────────────────────────────── */
@media (min-width: 768px) {
    :root {
        --brahmi-size-target: 3.00rem;
        --brahmi-size-fall:   2.50rem;
        --brahmi-size-key:    1.50rem;
    }

    #game-header { padding: 0 var(--space-6); }
    .life        { width: 18px; height: 18px; }

    #word-zone {
        padding: var(--space-5) var(--space-6) var(--space-4);
        gap: var(--space-2);
    }
}

/* ── ≥1024px (desktop) ───────────────────────────────────── */
@media (min-width: 1024px) {
    #keyboard-section {
        width: 450px;
        max-width: 42%;
    }

    :root {
        --brahmi-size-target: 3.25rem;
        --brahmi-size-fall:   2.75rem;
        --brahmi-size-key:    1.625rem;
        --header-height:      60px;
    }

    #keyboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        gap: var(--space-3);
    }

    .brahmi-key { min-height: 64px; }
}

/* ── ≥1280px (wide desktop) ──────────────────────────────── */
@media (min-width: 1280px) {
    #keyboard-section {
        width: 500px;
        max-width: 40%;
    }

    :root {
        --brahmi-size-target: 3.50rem;
        --brahmi-size-key:    1.75rem;
    }

    #keyboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    }
}

/* ── Short laptop windows: tighter keys so no consonant scrolls away ── */
@media (min-width: 768px) and (max-height: 720px) {
    :root {
        --brahmi-size-target: 2.75rem;
        --brahmi-size-key:    1.375rem;
    }

    #keyboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
        gap: var(--space-2);
    }

    .brahmi-key { min-height: 50px; }

    #word-zone {
        padding: var(--space-3) var(--space-5);
    }
}

/* ── Phone in landscape: compact side-by-side ────────────── */
@media (min-width: 560px) and (max-height: 500px) {
    :root {
        --header-height:      44px;
        --brahmi-size-target: 1.75rem;
        --brahmi-size-fall:   1.625rem;
        --brahmi-size-key:    1.125rem;
    }

    #keyboard-section {
        width: 50%;
        max-width: 50%;
        min-width: 300px;
        padding: var(--space-2);
    }

    #keyboard-grid {
        --key-cols: 7;
        --key-h:    38px;
        --key-gap:  5px;
        grid-template-columns: repeat(var(--key-cols), minmax(0, 1fr));
        gap: var(--key-gap);
    }

    .brahmi-key {
        height: var(--key-h);
        min-height: 0;
        padding: 0;
        border-radius: var(--radius-sm);
    }

    .key-label        { font-size: 0.625rem; }
    .word-zone__label { display: none; }
    #target-word      { min-height: 0; }
    #target-hindi     { font-size: var(--fs-base); min-height: 0; }
    .life             { width: 12px; height: 12px; }

    #word-zone {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-1);
    }

    .overlay-card { padding: var(--space-4); }
}

/* ── High DPI / Retina — sharper shadows ─────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brahmi-key {
        box-shadow: 0 1px 3px rgba(48,40,32,0.12), 0 0.5px 0 rgba(255,255,255,0.55) inset;
    }
}