/* ═══════════════════════════════════════════════════════
   LANDSCAPE PHONE LAYOUT
   Targets phones (~375–430px tall) but not iPads (768px+)
═══════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

    .game-layout {
        max-width: 100%;
        padding: 6px 8px;
        gap: 0;
    }

    .card {
        flex-direction: row;
        padding: 0;
        align-items: stretch;
        position: relative; /* score-bar is absolute within this */
    }

    /* ── Left column: name/input ── */
    .card-left {
        display: flex;
        flex-direction: column;
        width: 38%;
        flex-shrink: 0;
        padding: 10px 10px 40px 12px; /* bottom padding reserves room for score-bar */
        border-right: 2px solid rgba(0,0,0,0.15);
    }

    .card-left .name-divider { display: none; }

    .name-area {
        padding: 4px 0 2px;
        min-height: 44px;
        text-align: left;
        align-items: flex-start;
    }

    .name-guess { flex-direction: column; gap: 6px; width: 100%; }
    .guess-input { width: 100%; height: 38px; font-size: 14px; }
    .guess-btn   { height: 38px; width: 100%; font-size: 14px; }

    .player-name { font-size: 28px; white-space: normal; line-height: 1.15; }

    .info-bar { margin: 8px 0 0; font-size: 12px; padding: 6px 8px; }

    /* Score bar: pinned to bottom-left of card via absolute positioning */
    .score-bar {
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 38%;
        padding: 4px 10px 0 12px;
    }
    .score-correct { font-size: 13px; }
    .score-lives   { font-size: 15px; }

    /* ── Right column: parchment fills remaining width ── */
    .parchment {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        border-radius: 0 14px 14px 0;
    }

    .parchment-title { font-size: 18px; }
    .clue            { font-size: 14px; margin: 5px 0; }
    .reveal-clue-btn, .lifeline-btn { font-size: 14px; padding: 8px 12px; margin-top: 8px; }
    .reveal-answer-btn              { font-size: 15px; padding: 8px 20px; }
}