/* responsive.css - Texas Hold'Em Lava Dome responsiveness */

/* ── 1100px and below ──────────────────────────────────────── */
@media (max-width: 1100px) {
    .card, .card-spot, .grid-cell {
        width: 80px;
        height: 112px;
    }
    .card-spot > .card {
        width: 80px;
        height: 112px;
    }
    .poker-grid {
        grid-template-columns: repeat(5, 80px);
        grid-template-rows: repeat(5, 112px);
        gap: 5px;
    }
    .corner-rank { font-size: 9px; }
    .corner-suit { font-size: 8px; }
    .suit-symbol { font-size: 12px; }
    .card-suit-center.single .suit-symbol { font-size: 30px; }
    .face-card-suit-large { font-size: 18px; }
    .face-card-corner { font-size: 8px; }
}

/* ── 860px and below ───────────────────────────────────────── */
@media (max-width: 860px) {
    .card, .card-spot, .grid-cell {
        width: 62px;
        height: 87px;
    }
    .card-spot > .card {
        width: 62px;
        height: 87px;
    }
    .poker-grid {
        grid-template-columns: repeat(5, 62px);
        grid-template-rows: repeat(5, 87px);
        gap: 4px;
    }
    .corner-rank { font-size: 7px; }
    .corner-suit { font-size: 7px; }
    .suit-symbol { font-size: 10px; }
    .card-suit-center.single .suit-symbol { font-size: 24px; }
    .card-suit-center { padding: 18px 6px; }
    .face-card-suit-large { font-size: 14px; top: 12px; left: 12px; }
    .face-card-suit-large.bottom { bottom: 12px; right: 12px; }
    .face-card-corner { font-size: 7px; }

    h1 { font-size: 10px; }
    .stats { width: 100%; justify-content: center; }
    .score-container { flex: 1; min-width: 60px; padding: 6px 8px; }
    .score { font-size: 13px; }
    .score-label { font-size: 5px; }
    .hand-scores { grid-template-columns: 1fr; }
    .hand-score-item .hand-name { font-size: 5px; }
    .hand-score-item .hand-value { font-size: 6px; }
    .top-section { flex-direction: column; align-items: center; }
    .score-display { text-align: center; }
    .score-display .total-score { font-size: 22px; }
}

/* ── 480px and below ───────────────────────────────────────── */
@media (max-width: 480px) {
    body { padding: 8px; }
    .container { padding: 12px; }

    .card, .card-spot, .grid-cell {
        width: 52px;
        height: 73px;
    }
    .card-spot > .card {
        width: 52px;
        height: 73px;
    }
    .poker-grid {
        grid-template-columns: repeat(5, 52px);
        grid-template-rows: repeat(5, 73px);
        gap: 3px;
    }
    .corner-rank { font-size: 6px; }
    .corner-suit { font-size: 6px; }
    .suit-symbol { font-size: 9px; }
    .card-suit-center.single .suit-symbol { font-size: 20px; }
    .card-suit-center { padding: 14px 4px; }

    .controls button { font-size: 6px; padding: 6px 6px; }
    h1 { font-size: 8px; }

    .instructions-content { padding: 20px 16px; }
    .instructions-content h3 { font-size: 10px; }
    .scoreboard-modal h2 { font-size: 12px; }
}