/* === RESPONSIVE === */
@media (min-width: 420px) {
    #game { padding: calc(10px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); }
}

/* Tablet */
@media (min-width: 600px) {
    :root {
        --card-w: clamp(100px, 22vw, 190px);
        --card-h: calc(var(--card-w) * 1.4);
        --card-r: 10px;
        --card-peek: clamp(40px, 7vw, 76px);
        --gap: clamp(10px, 2vw, 20px);
    }
    #game {
        max-width: clamp(440px, 96vw, 900px);
        padding: calc(14px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
    }
    .bottom-bar { gap: 20px; padding-top: 14px; }
    .bottom-left, .bottom-right { flex-shrink: 0; }
    .bottom-center { flex: 1; }
    .center-btn, .ctrl-btn {
        padding: 14px 22px;
        font-size: clamp(0.88rem, 1.6vw, 1.1rem);
        min-height: 50px;
        border-radius: 10px;
    }
    .center-btn {
        width: clamp(130px, 20vw, 220px);
    }
    .mode-row { gap: 8px; }
    .mode-btn-ctrl { height: 40px; border-radius: 8px; font-size: 1.4rem; flex: 0 0 calc((100% - 8px) / 2); }
    .undo-row { gap: 8px; }
    .deck-label { font-size: 1rem; }
    .discard-label { font-size: 1.1rem; padding: 4px 12px; border-radius: 6px; }
    .slot .card-count { font-size: 0.72rem; }
    dialog { max-width: 520px; width: 85%; border-radius: 18px; }
    .dialog-content { padding: 28px 26px; }
    .dialog-header { font-size: 1.3rem; margin-bottom: 16px; }
    .dialog-content p { font-size: 0.95rem; }
    .dialog-btn { padding: 11px 22px; font-size: 0.92rem; border-radius: 9px; }
    .dialog-seed-display { padding: 10px 14px; border-radius: 10px; }
    .dialog-seed-display code { font-size: 1.05rem; }
    .seed-history-list { max-height: 260px; }
    .seed-history-item { padding: 5px 6px; border-radius: 6px; }
    .sh-code { font-size: 0.75rem; }
    .help-body { font-size: 0.92rem; }
    #help-dialog .dialog-header { font-size: 1rem; }
    .bg-title { font-size: clamp(3rem, 10vw, 5.5rem); }
    .bg-dev { font-size: clamp(0.65rem, 2vw, 1rem); }
    /* Discard grid scaling */
    .discard-grid {
        --dg-cell-h: clamp(30px, calc((100dvh - 80px) / 15), 52px);
        gap: 4px;
    }
    .discard-grid { grid-template-columns: 28px repeat(4, var(--dg-cell-w)); }
    .dg-header { font-size: clamp(1rem, 2.5vw, 1.3rem); }
    .dg-rank-label { font-size: clamp(0.75rem, 1.8vw, 1rem); }
    .dg-cell { font-size: clamp(1rem, 2.5vw, 1.3rem); border-radius: 6px; }
}

/* Large tablet / small desktop */
@media (min-width: 1024px) {
    :root {
        --card-w: clamp(140px, 18vw, 200px);
        --card-r: 12px;
        --card-peek: clamp(56px, 6vw, 80px);
        --gap: clamp(14px, 2vw, 24px);
    }
    #game { max-width: 900px; padding: calc(18px + env(safe-area-inset-top)) 28px calc(20px + env(safe-area-inset-bottom)); }
    .center-btn { width: clamp(180px, 16vw, 240px); min-height: 54px; }
    .ctrl-btn { min-height: 54px; }
    .mode-btn-ctrl { height: 44px; font-size: 1.5rem; flex: 0 0 calc((100% - 8px) / 2); }
    dialog { max-width: 580px; }
    .dialog-header { font-size: 1.4rem; }
}