/* ============================================================
   LAYOUT — Page structure and grid
   ============================================================ */

/* ── App shell ───────────────────────────────────────────── */
#app {
    display:        flex;
    flex-direction: column;
    height:         100dvh;
    max-width:      100%;
    margin:         0 auto;
    position:       relative;
    overflow:       hidden; /* prevent page scroll during gameplay */
}

/* ── Header ──────────────────────────────────────────────── */
#game-header {
    height:     var(--header-height);
    flex-shrink: 0;
    z-index:    10;
}

/* ── Main content area ───────────────────────────────────── */
#game-main {
    display:        flex;
    flex-direction: row;
    flex:           1;
    min-height:     0; /* allow flex children to shrink below content size */
    overflow:       hidden;
    gap:            0;
}

/* ── Left side container (game area + word zone) ──────────── */
.left-panel {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
    overflow:       hidden;
}

/* ── Game area (falling characters) ─────────────────────── */
#game-area {
    flex:      1;
    min-height: 0;
    position:  relative;
    overflow:  hidden;
}

/* ── Word zone (Brahmi + Hindi) ──────────────────────────── */
#word-zone {
    flex-shrink: 0;
    min-height: 120px;
}

/* ── Right side - Keyboard ────────────────────────────────── */
#keyboard-section {
    flex-shrink: 0;
    width: 420px;
    max-width: 45%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ── Overlay base ────────────────────────────────────────── */
.screen-overlay {
    position:       fixed;
    inset:          0;
    z-index:        500;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        var(--space-6);
    background:     rgba(247, 241, 229, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.overlay-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-10) var(--space-8);
    width:         100%;
    max-width:     480px;
    box-shadow:    var(--shadow-lg);
    text-align:    center;
}