/* ============================================
   SPEKIT SPRINT — Responsive Breakpoints
   ============================================ */

/* ── Mobile (< 480px) ── */
@media (max-width: 479px) {
    .screen-card {
        padding: var(--space-md) var(--space-sm);
        border-radius: var(--radius-lg);
        max-width: 100%;
    }

    .welcome-title { font-size: var(--fs-2xl); }
    .welcome-subtitle { font-size: var(--fs-sm); }
    .speki-container { width: 80px; height: 80px; }

    .btn { padding: 14px 28px; font-size: var(--fs-base); }
    .btn-lg { padding: 16px 32px; font-size: var(--fs-md); }

    .score-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
    .stat-value { font-size: var(--fs-md); }

    .leaderboard-header,
    .leaderboard-row {
        grid-template-columns: 40px 1fr 80px;
        font-size: var(--fs-xs);
    }
    .player-company { display: none; }

    .hud-score-box { min-width: 70px; padding: var(--space-2xs) var(--space-xs); }
    .hud-value { font-size: var(--fs-lg); }
    .hud-timer-bar { width: 120px; }

    .cta-qr-container img { width: 120px; height: 120px; }
}

/* ── Small Tablet (480px – 767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
    .screen-card {
        max-width: 460px;
        padding: var(--space-lg) var(--space-md);
    }

    .speki-container { width: 100px; height: 100px; }
    .hud-timer-bar { width: 160px; }
}

/* ── Tablet (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .screen-card {
        max-width: 520px;
    }
}

/* ── Desktop (1024px – 1919px) ── */
@media (min-width: 1024px) {
    .hud-score-box {
        min-width: 120px;
    }

    .hud-timer-bar {
        width: 250px;
    }
}

/* ── Large Display / Kiosk (1920px+) ── */
@media (min-width: 1920px) {
    html { font-size: 18px; }

    .screen-card {
        max-width: 640px;
        padding: var(--space-2xl) var(--space-xl);
    }

    .speki-container { width: 150px; height: 150px; }
    .hud-timer-bar { width: 320px; }
    .cta-qr-container img { width: 200px; height: 200px; }

    .hud-score-box {
        min-width: 150px;
        padding: var(--space-sm) var(--space-lg);
    }
}

/* ── 4K Display (3840px+) ── */
@media (min-width: 3840px) {
    html { font-size: 24px; }

    .screen-card {
        max-width: 900px;
        padding: var(--space-2xl);
        border-radius: 32px;
    }

    .speki-container { width: 200px; height: 200px; }
    .cta-qr-container img { width: 280px; height: 280px; }
}

/* ── Landscape Phone ── */
@media (max-height: 500px) and (orientation: landscape) {
    .screen-card {
        padding: var(--space-sm) var(--space-md);
        max-height: 90vh;
        overflow-y: auto;
    }

    .speki-container { width: 60px; height: 60px; }
    .welcome-title { font-size: var(--fs-xl); }
    .welcome-subtitle { font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
    .lead-form { gap: var(--space-xs); }
    .form-input { padding: 10px 14px 10px 40px; }
    .btn { padding: 12px 24px; }
    .score-tier-icon { font-size: 2.5rem; }
}

/* ── Touch Device Optimizations ── */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 48px; }
    .form-input { min-height: 48px; font-size: 16px; /* Prevents iOS zoom */ }
    .sound-toggle { width: 48px; height: 48px; }
}

/* ── Standalone Leaderboard (second screen) ── */
.leaderboard-standalone {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--gradient-game-bg);
    padding: var(--space-lg);
    overflow: hidden;
}

.leaderboard-standalone .lb-title {
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    margin-bottom: var(--space-md);
}

.leaderboard-standalone .lb-title .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.leaderboard-standalone .leaderboard-container {
    flex: 1;
    overflow-y: auto;
}

@media (min-width: 1920px) {
    .leaderboard-standalone {
        padding: var(--space-2xl);
    }

    .leaderboard-standalone .lb-title {
        font-size: var(--fs-3xl);
    }

    .leaderboard-standalone .leaderboard-header,
    .leaderboard-standalone .leaderboard-row {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--fs-md);
    }
}