/* Mobile & tablet — High Seas */

/* ── Global touch / safe areas ── */
html {
    -webkit-text-size-adjust: 100%;
}

button,
.btn-primary,
.btn-secondary,
.btn-gold,
.btn-rules,
.page-game .card.hand-card,
.page-game .card.zone-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}

input[type="text"],
input[type="email"],
select,
textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
}

.sea-bg,
.lobby-bg,
.splash-screen {
    background-attachment: scroll;
}

body.demo-active {
    padding-top: max(36px, calc(36px + env(safe-area-inset-top, 0px)));
}

.demo-banner {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
}

/* ── Tablet (768px – 1024px) ── */
@media (max-width: 1024px) {
    .page-game {
        --pile-w: clamp(96px, 18vw, 150px);
        --hand-w: clamp(76px, 12vw, 118px);
        --zone-w: clamp(58px, 11vw, 96px);
        padding: 8px 12px;
    }

    .game-table {
        grid-template-columns: minmax(110px, 1fr) minmax(260px, 1.45fr) minmax(110px, 1fr);
        gap: 6px;
    }

    .modal.options-modal,
    .modal.game-dialog,
    .captain-stats-modal,
    .achievements-modal {
        max-width: min(480px, 94vw);
    }
}

/* ── Phone & small tablet (portrait / narrow) ── */
@media (max-width: 768px) {
    .page-lobby {
        padding: 12px 10px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .lobby-overlay {
        padding: 12px 12px max(16px, env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lobby-footer {
        flex-direction: column;
        width: 100%;
    }

    .lobby-how-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
    }

    .overlay-panel {
        padding: 16px;
    }

    .rules-overlay {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        align-items: flex-start;
        overflow-y: auto;
    }

    .rules-overlay .modal {
        max-height: none;
        margin: auto 0;
    }

    .modal-backdrop {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-backdrop .modal {
        width: 100%;
        max-width: 100%;
        margin: auto 0;
    }

    /* Game page — allow scroll when content is tall */
    html.game-root,
    html.game-root body {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page-game {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding: 6px 8px max(10px, env(safe-area-inset-bottom));
        --pile-w: clamp(88px, 26vw, 120px);
        --hand-w: clamp(64px, 18vw, 92px);
        --zone-w: clamp(52px, 16vw, 76px);
    }

    .game-header {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }

    .game-header h1 {
        font-size: 1rem;
    }

    .page-game .room-meta {
        font-size: 0.68rem;
        line-height: 1.4;
    }

    .page-game .btn-rules {
        min-height: 40px;
        padding: 8px 14px;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .guide-overlay {
        align-items: flex-end;
        justify-content: center;
        padding: 12px 10px max(12px, env(safe-area-inset-bottom));
        background: rgba(4, 12, 22, 0.55);
    }

    .guide-sheet {
        width: 100%;
        max-height: min(72vh, 520px);
    }

    .game-shell {
        overflow: visible;
        min-height: 0;
    }

    .action-bar {
        padding: 8px;
    }

    .turn-steps {
        gap: 6px;
    }

    .step-pill {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .status-chip {
        margin-left: 0;
        font-size: 0.65rem;
    }

    .opponents-strip {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .opp-card {
        flex: 0 0 min(78vw, 280px);
        scroll-snap-align: start;
    }

    .game-table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "center center"
            "voyage treasure";
        gap: 8px;
        min-height: 0;
    }

    .game-table .table-center {
        grid-area: center;
    }

    .game-table #zone_voyage {
        grid-area: voyage;
    }

    .game-table #zone_treasure {
        grid-area: treasure;
    }

    .zone-side {
        max-height: none;
        min-height: 100px;
    }

    .center-piles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: end;
        width: 100%;
    }

    .center-actions {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
        width: 100%;
        margin-bottom: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .turn-take-cluster {
        width: min(280px, 100%);
    }

    .center-piles .pile-stack {
        grid-column: 1;
        grid-row: 2;
    }

    .center-piles .pile-waste {
        grid-column: 2;
        grid-row: 2;
    }

    .center-piles .turn-indicator.turn-center {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        margin-bottom: 0;
    }

    .center-actions #take_btn,
    .center-actions #pass_btn,
    .center-actions #continue_round_btn {
        flex: 0 0 auto;
        width: min(280px, 100%);
        min-height: 44px;
    }

    .center-actions #continue_round_btn {
        width: min(280px, 100%);
    }

    .draw-reveal-flip {
        width: calc(var(--pile-w) * 1.25);
        height: calc(var(--pile-h) * 1.25);
    }

    .draw-reveal-label {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    .draw-reveal.is-flying .draw-reveal-stage {
        transform: translateY(28vh) scale(0.4);
    }

    .hand-bar {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        min-height: auto;
        padding: 10px;
    }

    .hand-bar .zone-title {
        flex: 1 1 100%;
        font-size: 0.68rem;
    }

    #hand {
        flex: 1 1 100%;
        justify-content: flex-start;
        min-height: calc(var(--hand-h) + 8px);
        padding-bottom: 6px;
    }

    .page-game .card.hand-card:hover:not(.unplayable) {
        transform: none;
    }

    .page-game .card.hand-card:active:not(.unplayable) {
        transform: translateY(-6px) scale(1.03);
    }

    .lobby-actions {
        flex-direction: column;
    }

    .lobby-actions button {
        width: 100%;
        min-height: 44px;
    }

    .action-popup {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }

    .action-popup-card {
        padding: 20px 16px;
        max-width: min(360px, 100%);
    }

    .round-score-overlay {
        align-items: flex-end;
        padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
    }

    .round-score-sheet {
        width: 100%;
        border-radius: 14px 14px 0 0;
        max-height: min(82vh, 640px);
    }

    .podium-overlay {
        padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
        align-items: flex-end;
    }

    .podium-stage {
        width: 100%;
        padding: 20px 14px 16px;
        border-radius: 14px 14px 0 0;
        max-height: min(88vh, 760px);
    }

    .podium-row {
        grid-template-columns: 44px 1fr auto;
        gap: 8px;
        padding: 10px 10px;
    }

    .podium-place {
        width: 40px;
        height: 40px;
    }

    .podium-score {
        font-size: 1.3rem;
    }

    .card-tooltip {
        max-width: min(280px, calc(100vw - 24px));
    }

    .options-speed-row {
        flex-direction: column;
    }

    .options-speed-btn {
        min-height: 44px;
    }
}

/* ── Very small phones ── */
@media (max-width: 400px) {
    .page-game {
        --hand-w: clamp(58px, 17vw, 72px);
        --pile-w: clamp(76px, 24vw, 100px);
        --zone-w: clamp(46px, 14vw, 64px);
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .game-table {
        grid-template-columns: 1fr;
        grid-template-areas:
            "center"
            "voyage"
            "treasure";
    }

    .center-piles {
        grid-template-columns: 1fr 1fr;
    }

    .pile-wrap .pile-label {
        font-size: 0.7rem;
    }
}

/* ── Landscape phone — keep table wider ── */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    html.game-root,
    html.game-root body {
        overflow-y: auto;
    }

    .page-game {
        --hand-w: clamp(56px, 10vh, 80px);
        --pile-w: clamp(72px, 14vh, 100px);
    }

    .opponents-strip {
        max-height: 22vh;
    }

    .game-table {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1fr;
        gap: 6px;
    }

    .game-table .table-center,
    .game-table #zone_voyage,
    .game-table #zone_treasure {
        grid-area: auto;
    }

    .hand-bar {
        flex-wrap: nowrap;
    }

    .hand-bar .zone-title {
        flex: 0 0 64px;
    }

    #hand {
        flex: 1;
    }

    .center-piles {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
    }

    .center-actions {
        grid-column: auto;
        grid-row: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        min-width: min(140px, 24vw);
        width: auto;
        align-items: center;
    }

    .turn-take-cluster {
        width: 100%;
        min-width: min(140px, 24vw);
    }

    .center-piles .pile-stack,
    .center-piles .pile-waste {
        grid-column: auto;
        grid-row: auto;
    }

    .center-actions #take_btn,
    .center-actions #pass_btn,
    .center-actions #continue_round_btn {
        flex: 0 0 auto;
        width: 100%;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.75rem;
    }
}