/**
 * Quiz Responsive — Shared responsive overrides for all 21 quizzes
 * Loaded AFTER quiz-specific styles.css + all shared CSS
 * Provides smooth scaling for common elements across modern phone sizes
 */

/* ===== SMOOTH SCALING (replaces hard breakpoints) ===== */

/* Container padding — smooth scale from 0.8rem to 1.2rem */
@media (max-width: 768px) {
    .container {
        padding: 1.2rem clamp(0.8rem, 3vw, 1.2rem);
    }
}

/* ===== LANDING PAGE ===== */

/* Hero titles — smooth scaling */
@media (max-width: 768px) {
    .hero-section h1,
    .landing-title,
    .warmup-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }

    .hero-section h2,
    .landing-subtitle {
        font-size: clamp(1rem, 2.8vw, 1.4rem);
    }

    .landing-hook {
        font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    }
}

/* CTA button — ensure proper sizing on all phones */
@media (max-width: 480px) {
    .cta-button {
        padding: clamp(0.9rem, 2.5vw, 1.1rem) 1.5rem;
        font-size: clamp(1.05rem, 3vw, 1.25rem);
        max-width: 100%;
    }
}

/* Feature pills — wrap better on small screens */
@media (max-width: 480px) {
    .landing-features {
        flex-wrap: wrap;
        gap: 6px;
    }

    .feature-pill {
        font-size: clamp(0.7rem, 1.8vw, 0.8rem);
    }
}

/* ===== QUIZ GAMEPLAY ===== */

/* Alarm cards / answer options — smooth scaling */
@media (max-width: 480px) {
    .alarm-card {
        padding: clamp(0.7rem, 2.2vw, 1rem) clamp(0.8rem, 2.5vw, 1.1rem);
    }

    .card-icon {
        width: clamp(40px, 11vw, 52px);
        height: clamp(40px, 11vw, 52px);
        font-size: clamp(1.5rem, 4vw, 2rem);
        border-radius: clamp(10px, 2.5vw, 14px);
    }

    .card-title {
        font-size: clamp(0.9rem, 2.4vw, 1.05rem);
    }

    .card-desc {
        font-size: clamp(0.72rem, 1.9vw, 0.82rem);
    }
}

/* Options buttons (night-watch, plan-the-watch style) */
@media (max-width: 480px) {
    .opts button {
        min-height: 48px;
        font-size: clamp(0.82rem, 2.2vw, 0.95rem);
    }
}

/* Decision buttons (colregs, chartplotter style) */
@media (max-width: 480px) {
    .decision-btn {
        min-height: 64px;
    }

    .decision-btn .btn-label {
        font-size: clamp(0.85rem, 2.3vw, 1rem);
    }
}

/* Action buttons (which-alarm style) */
@media (max-width: 480px) {
    .action-btn {
        min-width: 60px;
        min-height: 48px;
    }
}

/* Game HUD values */
@media (max-width: 480px) {
    .hud-value {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }
}

/* Question title */
@media (max-width: 480px) {
    .question-title,
    .pick-instruction {
        font-size: clamp(1.1rem, 3.2vw, 1.5rem);
    }
}

/* Scene containers */
@media (max-width: 480px) {
    .scene {
        border-radius: 10px;
    }
}

/* ===== RESULTS PAGE ===== */

/* Score display — smooth scaling */
@media (max-width: 480px) {
    .score-number {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
    }

    .score-message {
        font-size: clamp(0.88rem, 2.4vw, 1.05rem);
    }

    .score-display {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .results-title {
        font-size: clamp(1.4rem, 4vw, 1.8rem);
    }
}

/* Twist / insight boxes */
@media (max-width: 480px) {
    .twist {
        padding: clamp(1rem, 3vw, 1.5rem) clamp(0.8rem, 2.5vw, 1rem);
    }

    .twist-headline {
        font-size: clamp(1.1rem, 3vw, 1.4rem);
    }

    .twist-body {
        font-size: clamp(0.85rem, 2.3vw, 0.95rem);
    }
}

/* Email gate */
@media (max-width: 480px) {
    .email-gate {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .email-gate h3 {
        font-size: clamp(1rem, 2.8vw, 1.2rem);
    }

    .gate-subtext {
        font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    }

    .email-gate form,
    .email-gate #newsletter-form {
        max-width: 100%;
    }

    .email-gate input,
    .email-gate #newsletter-form input {
        padding: 0.9rem;
        font-size: 16px; /* prevents iOS zoom */
    }

    .subscribe-button {
        min-height: 48px;
        font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    }
}

/* Second chance signup */
@media (max-width: 480px) {
    .second-chance {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .second-chance form {
        max-width: 100%;
    }

    .second-chance input {
        padding: 0.9rem;
        font-size: 16px; /* prevents iOS zoom */
    }
}

/* Report download */
@media (max-width: 480px) {
    .report-download {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .download-button {
        padding: 0.9rem 1.5rem;
        font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    }
}

/* Explanation sections */
@media (max-width: 480px) {
    .explanation {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .explanation h2 {
        font-size: clamp(1.1rem, 3vw, 1.4rem);
    }

    .explanation p {
        font-size: clamp(0.85rem, 2.3vw, 0.95rem);
    }
}

/* Social sharing */
@media (max-width: 480px) {
    .social-sharing {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .share-btn {
        min-height: 48px;
        font-size: clamp(0.85rem, 2.3vw, 0.95rem);
    }
}

/* Play again button */
@media (max-width: 480px) {
    .play-again-btn,
    .play-again-button {
        max-width: 100%;
        min-height: 48px;
        font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    }
}

/* ===== GAME-SPECIFIC ELEMENTS ===== */

/* Radar displays (nav-lights, radar, vessel-tracker) */
@media (max-width: 480px) {
    .radar {
        width: clamp(240px, 70vw, 280px);
        height: clamp(240px, 70vw, 280px);
    }

    .radar-wrapper {
        width: clamp(280px, 85vw, 90vw);
        height: clamp(280px, 85vw, 90vw);
    }
}

@media (max-width: 380px) {
    .radar {
        width: 220px;
        height: 220px;
    }
}

/* Classify grid (nav-lights, radar) */
@media (max-width: 480px) {
    .classify-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .classify-btn {
        min-height: 48px;
        padding: 12px 10px;
        font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    }
}

/* Alarm indicator (oddball, alarm-filter, cry-wolf) */
@media (max-width: 480px) {
    .alarm-indicator,
    .alarm-indicator-wrap {
        width: clamp(44px, 14vw, 60px);
        height: clamp(44px, 14vw, 60px);
    }
}

/* Respond button (cry-wolf) */
@media (max-width: 480px) {
    .respond-btn {
        min-height: 56px;
        font-size: clamp(1rem, 2.8vw, 1.2rem);
    }
}

/* Tap zone (oddball) */
@media (max-width: 480px) {
    .tap-zone {
        min-height: 70px;
    }
}

/* Alert invaders (triage) */
@media (max-width: 380px) {
    .alert-invader {
        width: 46px;
        height: 46px;
    }

    .alert-invader .invader-icon {
        font-size: 0.9rem;
    }
}

/* Bridge watch RT display */
@media (max-width: 380px) {
    .alarm-bezel {
        width: 50vw;
        height: 50vw;
    }

    .rt-number {
        font-size: 2rem;
    }

    .dashboard-preview {
        height: 200px;
    }
}

/* ===== GLOBAL TOUCH TARGETS ===== */
/* Ensure all interactive elements meet 44px minimum on mobile */
@media (max-width: 480px) {
    button,
    .alarm-card,
    .option,
    .profile-pill,
    a.quiz-card-link {
        -webkit-tap-highlight-color: transparent;
    }

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

/* ===== EXTRA SMALL PHONES (380px and below) ===== */
@media (max-width: 380px) {
    .container {
        padding: 1rem 0.8rem;
    }

    .hero-section h1,
    .landing-title {
        font-size: 1.6rem;
    }

    .hero-section h2 {
        font-size: 0.95rem;
    }

    .score-number {
        font-size: 2.5rem;
    }

    .results-title {
        font-size: 1.4rem;
    }

    .explanation {
        padding: 1rem;
    }

    .social-sharing {
        padding: 1rem;
    }

    .email-gate {
        padding: 1rem;
    }
}