/* =============================================
   RESPONSIVE OVERRIDES FOR FASTYGYM DEMO
   Adapts fixed 720x1920 layouts to any screen
   ============================================= */

/* ---- Fluid Containers ---- */
.intro-container,
.exercise-container,
.report-container,
.mobile-container {
    width: 100% !important;
    max-width: 720px !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* ---- Canvas fills container ---- */
#canvas-container {
    width: 100% !important;
    height: 100% !important;
}

#canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ---- Responsive images inside intro-text ---- */
.intro-text img {
    max-width: 300px;
    width: 45vw;
    height: auto !important;
}

/* ---- Confetti canvas ---- */
#confetti-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* =============================================
   WIDTH-BASED MEDIA QUERIES
   ============================================= */
@media (max-width: 720px) {
    /* -- Typography -- */
    .intro-text h1 {
        font-size: 2rem;
    }

    .intro-text p {
        font-size: 1rem;
    }

    /* -- Buttons -- */
    .btn-start {
        padding: 12px 36px;
        font-size: 1rem;
    }

    /* -- Status -- */
    .status-label {
        font-size: 1.2rem;
        max-width: 85vw;
        letter-spacing: 1px;
    }

    /* -- RUT Keyboard -- */
    .rut-display {
        font-size: 1.8rem;
        padding: 12px 24px;
        min-width: auto !important;
        width: 80%;
        max-width: 320px;
    }

    .keyboard-row {
        gap: 10px;
    }

    .key-btn {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }

    .key-btn.key-wide {
        width: 84px;
        border-radius: 28px;
    }

    /* -- Countdown -- */
    .countdown-timer {
        font-size: 5rem;
        letter-spacing: 5px;
    }

    .countdown-label {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }

    /* -- Series -- */
    .series-progress {
        font-size: 1.8rem;
    }

    .next-series-label {
        font-size: 1.1rem;
    }

    /* -- Pain / Question -- */
    .question-text {
        font-size: 1.6rem;
        max-width: 85vw;
    }

    .btn-dolor {
        width: 90vw !important;
        max-width: 400px !important;
        padding: 22px 30px;
        font-size: 1.5rem;
    }

    .pain-scale-title {
        font-size: 1.1rem;
    }

    .pain-descriptions {
        font-size: 1.3rem;
        padding: 15px 20px;
        width: 90% !important;
    }

    /* -- Exercise buttons -- */
    .btn-circle {
        width: 100px;
        height: 100px;
        font-size: 1.1rem;
    }

    .btn-intro {
        width: 100px;
        height: 100px;
        font-size: 0.85rem;
    }

    /* -- Corners -- */
    .corner-tl { top: 20px; left: 20px; }
    .corner-tr { top: 20px; right: 20px; }
    .corner-bl { bottom: 20px; left: 20px; }
    .corner-br { bottom: 20px; right: 20px; }

    /* -- Exercise header -- */
    .header-section {
        padding: 20px 15px 15px;
    }

    .header-section h1 {
        font-size: 1.8rem;
    }

    .weight-info {
        font-size: 1rem;
        padding: 8px 20px;
    }

    /* -- Video section -- */
    .video-section {
        margin: 10px 20px;
    }

    .video-wrapper {
        border-radius: 20px;
    }

    /* -- Report -- */
    .report-container {
        padding: 20px 15px !important;
    }

    .report-header h1 {
        font-size: 1.8rem;
    }

    .report-header .logo {
        width: 180px;
    }

    .metric-card {
        padding: 16px;
        border-radius: 14px;
    }

    .metric-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    /* -- Help/Farewell icons -- */
    .help-icon,
    .farewell-icon {
        font-size: 80px;
    }

    /* -- Pause bars -- */
    .pause-bar {
        width: 22px;
        height: 90px;
    }
}

@media (max-width: 400px) {
    .intro-text h1 {
        font-size: 1.5rem;
    }

    .key-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .key-btn.key-wide {
        width: 66px;
    }

    .keyboard-row {
        gap: 6px;
    }

    .countdown-timer {
        font-size: 3.5rem;
    }

    .btn-circle,
    .btn-intro {
        width: 80px;
        height: 80px;
        font-size: 0.8rem;
    }

    .btn-start {
        padding: 10px 28px;
        font-size: 0.9rem;
    }

    .question-text {
        font-size: 1.3rem;
    }

    .btn-dolor {
        font-size: 1.2rem;
        padding: 16px 20px;
    }
}

/* =============================================
   HEIGHT-BASED MEDIA QUERIES
   Scale vertical positions for shorter screens
   ============================================= */
@media (max-height: 1200px) {
    /* Intro pages */
    .intro-text {
        top: 3% !important;
    }

    .btn-start {
        bottom: 5% !important;
    }

    .status-label {
        bottom: clamp(8px, 2vh, 20px) !important;
    }

    .rut-keyboard {
        bottom: 12% !important;
        gap: 12px !important;
    }

    .countdown-container {
        bottom: 18% !important;
    }

    .series-info {
        top: 12% !important;
    }

    .question-text {
        top: clamp(140px, 22vh, 220px) !important;
        bottom: auto !important;
    }

    .buttons-container {
        bottom: 6% !important;
    }

    .pain-scale-container {
        top: 52% !important;
        bottom: 15px !important;
    }

    .pain-descriptions {
        top: clamp(140px, 22vh, 220px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Exercise pages */
    .timer-label {
        top: 16% !important;
    }

    .timer-display {
        top: 18% !important;
    }

}

/* Bottom buttons responsive */
@media (max-width: 720px) {
    .bottom-buttons {
        padding: 10px 20px 15px;
    }
}

@media (max-width: 400px) {
    .bottom-buttons {
        padding: 8px 15px 10px;
    }
}

@media (max-height: 800px) {
    .intro-text img {
        width: 30vw !important;
        max-width: 150px !important;
    }

    .countdown-timer {
        font-size: 4rem !important;
    }

    .rut-keyboard {
        gap: 8px !important;
    }

    .key-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.1rem !important;
    }

    .key-btn.key-wide {
        width: 72px !important;
    }

    .pain-descriptions {
        font-size: 1rem !important;
    }

    .series-progress {
        font-size: 1.4rem !important;
    }

    .help-icon,
    .farewell-icon {
        font-size: 60px !important;
    }

    .pause-bar {
        width: 18px !important;
        height: 60px !important;
    }
}

@media (max-height: 600px) {
    .intro-text {
        top: 2% !important;
    }

    .intro-text img {
        width: 80px !important;
    }

    .intro-text h1 {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    .btn-start {
        bottom: 3% !important;
        padding: 8px 24px !important;
    }

    .status-label {
        bottom: clamp(6px, 1.8vh, 18px) !important;
        font-size: 1rem !important;
    }

    .countdown-timer {
        font-size: 3rem !important;
    }

    .countdown-label {
        font-size: 0.9rem !important;
    }
}