/* Chortle v5.2 - Mobile Styles with New Design System */

/* Back button styling */
.back-btn {
    background: transparent;
    border: none;
    color: #666;
    font-size: 1.1em;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
    margin-bottom: 10px;
}

.back-btn:hover {
    background-color: #f0f0f0;
}

/* Demo subtitle enhanced styling for template focus */
.demo-subtitle {
    text-align: center;
    animation: none !important; /* Disable any existing animations */
}

/* Reduce animation distraction in game demo */
.game-demo {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.game-demo:hover {
    opacity: 1;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .container {
        padding: 5px 10px; /* Only 5px top/bottom padding */
    }

.header .wordmark {
    max-height: 50px;
    width: auto;
    margin-bottom: 5px;
}

/* Even smaller on mobile when header has navigation */
.header:not(.center-only) .wordmark {
    max-height: 32px;
    margin-bottom: 0;
}

.header {
    margin-bottom: 15px;
    padding: 0 10px;
}
  
    .page {
        padding: 15px 15px 20px 15px; /* Consistent padding */
        border-radius: 20px;
    }

    .template-selector h2 {
        margin-top: 0 !important;
        margin-bottom: 15px;
        font-size: 1.6em;
        padding-top: 0 !important;
    }

    /* Template Selection Mobile */
    .template-categories {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 5px 0;
    }

    .category-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 12px 20px;
        font-size: 1em;
        font-weight: 500;
        background: rgba(0, 187, 249, 0.2);
    }

    .category-btn.active {
        background: #00BBF9;
        color: white;
    }

    .template-btn {
        padding: 25px 20px;
        font-size: 1.1em;
        min-height: 100px;
        border-radius: 20px;
        background: rgba(0, 187, 249, 0.2); /* Sky blue with 20% opacity */
        border: 2px solid #00BBF9;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .template-btn:hover {
        background: rgba(0, 187, 249, 0.3); /* Slightly more opaque on hover */
        box-shadow: 0 8px 20px rgba(0, 187, 249, 0.15);
    }

    .template-btn-title {
        font-size: 1.2em;
        margin-bottom: 8px;
        font-weight: 700;
        color: #2D3748;
    }

    .template-btn-desc {
        color: #2D3748;
        opacity: 0.85;
        font-weight: 400;
        line-height: 1.5;
    }

@media (max-width: 768px) {
    .template-icon-img {
        width: 36px !important;
        height: 36px !important;
        margin-top: 1px !important;
    }
}

@media (max-width: 480px) {
    .template-icon-img {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Wizard Mobile */
.wizard-header {
    padding-top: 0 !important;
    margin-bottom: 10px !important;
}

.step-input {
    padding: 16px;
    font-size: 1em;
    max-width: 100%;
    margin: 0 auto;
}

.step-question {
    font-size: 1.1em;
}

.step-navigation {
    gap: 12px;
    margin-top: 25px;
}

.nav-btn {
    padding: 14px 16px;
    font-size: 0.95em;
}

/* Suggestion pills mobile */
.suggestion-pills {
    gap: 6px;
    margin-top: 12px;
}

.suggestion-pill {
    padding: 10px 14px;
    font-size: 0.9em;
    min-height: 44px; /* iOS touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-pill:active {
    transform: scale(0.95);
    background: rgba(0, 187, 249, 0.3);
}

/* Ultra-compact wizard for keyboard visibility */
.wizard-header {
    margin-bottom: 8px; /* Tighter */
}

.wizard-header .template-name {
    font-size: 1em;
}

.progress-bar {
    height: 4px;
    margin: 8px 0 5px 0;
}

.progress-text {
    font-size: 0.8em;
    margin-top: 5px;
}

    /* Mobile responsive button sizes */
    .primary-btn, .secondary-btn {
        padding: 12px 20px !important;
        font-size: 0.95em !important;
    }

    /* Share Page Mobile */
    .ready-content {
        padding-top: 0 !important;
    }

    .ready-content h2 {
        margin-top: 0 !important;
        color: #2D3748 !important;
    }

    .share-btn {
        padding: 18px 35px;
        font-size: 1.2em;
        font-weight: 700;
    }

    .share-instructions {
        background: rgba(0, 187, 249, 0.1);
        border-left: none !important;
        padding: 15px 20px !important;
        border-radius: 20px !important;
    }

    .share-step {
        display: flex;
        align-items: flex-start;
        margin: 12px 0;
        font-size: 0.95em;
        font-weight: 500;
        gap: 12px;
        text-align: left !important;
    }

    .share-step-text {
        flex: 1;
        line-height: 1.4;
        padding-top: 1px; /* Align with smaller number circle on mobile */
        text-align: left !important;
    }

    .share-step span {
        flex: 1;
        line-height: 1.4;
    }

    .share-step-number {
        background: #00BBF9;
        box-shadow: none !important;
        width: 26px;
        height: 26px;
        font-size: 0.85em;
        margin-right: 12px;
        font-weight: 700;
    }

    .link-box {
        flex-direction: column;
        gap: 15px;
    }

    .link-input {
        padding: 15px;
        font-size: 1em;
        border-radius: 10px;
        order: 1;
        font-family: 'JetBrains Mono', monospace;
        color: #2D3748;
    }

    .copy-btn {
        padding: 15px 25px;
        font-size: 1.1em;
        border-radius: 10px;
        min-height: 50px;
        order: 2;
        font-weight: 600;
    }

/* Video Mobile */
    .recording-controls, .playback-controls {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .video-btn {
        min-width: 100%;
        padding: 18px 25px;
        font-size: 1.2em;
        border-radius: 15px;
        min-height: 60px;
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
    }

    /* UPDATED: Playback controls with proper button styling */
    .playback-controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        width: 100%;
    }

    .playback-controls .primary-btn {
        order: 1; /* Send button first */
        width: 100%;
        padding: 18px 25px;
        font-size: 1.2em;
        font-weight: 700;
    }

    .playback-controls .secondary-btn {
        order: 2; /* Record again second */
        width: 100%;
        padding: 15px 25px;
        font-size: 1.1em;
        font-weight: 500;
    }

    /* UPDATED: Playback area layout for mobile */
    .playback-area {
        text-align: center;
        padding: 0;
        display: none; /* Hidden by default until recording is complete */
    }

    .playback-area.active {
        display: block;
    }

    .playback-area h4 {
        display: none; /* Hide "Your Recording" heading */
    }

    .playback-area #recorded-video {
        width: 100%;
        max-width: 100%;
        border-radius: 15px;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        aspect-ratio: 3/4; /* Vertical video aspect ratio */
    }

    .playback-area .completed-madlib {
        margin: 20px 0;
        font-size: 1.2em;
        text-align: left;
    }

    .video-section {
        padding: 0;
        background: transparent;
        border: none;
        margin: 20px 0;
    }

    .watermark-notice {
        padding: 15px;
        border-radius: 10px;
        background: #fff3cd;
        border: 2px solid #FFDD04;
    }

    #camera-preview, #recorded-video {
        margin: 20px 0;
        border-radius: 15px;
        max-width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .timer {
        font-size: 1.4em;
        padding: 12px 20px;
        border-radius: 10px;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        border: 2px solid #dc3545;
    }

    .upload-progress {
        padding: 20px;
        border-radius: 15px;
        margin: 25px 0;
        background: rgba(0, 187, 249, 0.1);
        border-left: 4px solid #00BBF9;
    }

    .upload-progress-bar {
        height: 12px;
        border-radius: 6px;
        margin: 15px 0;
    }

    .upload-progress-fill {
        background: #00BBF9;
    }

    .completed-madlib {
        font-size: 1.4em;
        line-height: 1.7;
        padding: 25px;
        border-radius: 20px;
        background: #f8f9fa;
        border-left: 4px solid #00BBF9;
        color: #2D3748;
    }

    .filled-word {
        color: #FE5946;
        background: rgba(254, 89, 70, 0.1);
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 1em;
        font-weight: 700;
    }

    .create-new-btn {
        padding: 20px 35px;
        font-size: 1.2em;
        border-radius: 15px;
        margin-top: 25px;
        min-height: 60px;
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
    }

    .error-message {
        padding: 20px;
        border-radius: 15px;
        margin: 20px 0;
        font-size: 1.1em;
        background: #f8d7da;
        border: 2px solid #f5c6cb;
        color: #721c24;
        font-weight: 500;
    }

    .video-sent {
        padding: 25px;
        border-radius: 15px;
        margin: 25px 0;
        background: #d4edda;
        border: 2px solid #c3e6cb;
    }

    .video-sent h4 {
        font-size: 1.3em;
        margin-bottom: 15px;
        font-weight: 700;
    }

/* Ensure mirroring works properly on mobile */
@media (max-width: 768px) {
    #camera-preview {
        transform: scaleX(-1);
    }
    
    #recorded-video {
        transform: none; /* Final video stays normal orientation */
    }
}

    /* Better mobile video player */
    #api-video-player iframe {
        height: 250px;
        border-radius: 15px;
    }

    #api-video-player video {
        border-radius: 15px;
    }

    /* Search input mobile */
    .search-input {
        padding: 16px 20px;
        font-size: 1.1em;
        border-radius: 12px;
        border: 2px solid rgba(45, 55, 72, 0.2);
        font-family: 'Outfit', sans-serif;
    }

    .search-input:focus {
        border-color: #00BBF9;
        box-shadow: 0 0 0 3px rgba(0, 187, 249, 0.1);
    }

    /* Wizard header mobile */
    .wizard-header h2 {
        font-size: 1.4em;
        font-weight: 700;
        color: #2D3748;
    }

    .wizard-header .template-name {
        font-size: 1em;
        color: #00BBF9;
        font-weight: 600;
    }

    .success-icon {
        font-size: 3em;
    }

    .ready-content h2 {
        font-size: 1.6em;
        color: #00BBF9;
        font-weight: 700;
    }
}

/* Mobile camera setup spacing */
@media (max-width: 768px) {
    .reading-view {
        padding-top: 20px !important;
    }

    .reading-view h2 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }

    .reading-view > p {
        margin-bottom: 20px !important;
    }

    .camera-setup {
        padding: 10px 15px !important;
        min-height: 200px !important;
        gap: 10px !important;
    }

    .camera-setup img {
        width: 180px !important;
        margin-bottom: 15px !important;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.8em;
        font-weight: 800;
    }

    .page {
        padding: 20px;
        border-radius: 15px;
    }

    .completed-madlib {
        font-size: 1.2em;
        padding: 20px;
    }

    .video-btn {
        min-height: 55px;
        font-size: 1.1em;
        font-weight: 600;
    }

    #api-video-player iframe {
        height: 200px;
    }

    .step-input {
        padding: 16px;
        font-size: 1em;
        font-family: 'Outfit', sans-serif;
    }

    .step-question {
        font-size: 1.1em;
        font-weight: 600;
    }

    .template-btn {
        padding: 20px 15px;
        min-height: 90px;
    }

    .category-btn {
        padding: 10px 16px;
        font-size: 0.9em;
    }
}

/* Touch-friendly interactions */
.template-btn:active, 
.video-btn:active, 
.nav-btn:active, 
.share-btn:active, 
.copy-btn:active {
    transform: translateY(1px) scale(0.98);
    transition: transform 0.1s ease;
}

/* Better mobile keyboard handling */
.step-input:focus {
    transform: translateY(0);
    scroll-margin-top: 100px;
}

/* Mobile-friendly category scrolling */
.template-categories {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-categories::-webkit-scrollbar {
    display: none;
}

/* Improve mobile video recording */
#camera-preview {
    object-fit: cover;
}

/* Better mobile loading states */
@media (max-width: 768px) {
    .btn-loading::after {
        width: 24px;
        height: 24px;
        border-width: 3px;
    }
}

/* Landscape orientation adjustments */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .header {
        margin-bottom: 8px;
    }
    
    .header h1 {
        font-size: 1.8em;
        margin-bottom: 5px;
        font-weight: 800;
    }
    
    .simple-intro {
        margin-bottom: 15px;
    }
    
    .page {
        padding: 20px;
    }
    
    .step-content {
        margin: 20px 0;
    }
    
    .step-question {
        font-size: 1.1em;
        margin-bottom: 15px;
        font-weight: 600;
    }
    
    .step-input {
        padding: 12px;
        font-size: 1em;
        font-family: 'Outfit', sans-serif;
    }
    
    .step-navigation {
        margin-top: 20px;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .template-btn, .video-btn, .nav-btn {
        border-width: 2px; 
    }
    
    .step-input {
        border-width: 2px;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Larger minimum touch targets */
    button, input, .template-btn, .category-btn {
        min-height: 44px; /* iOS recommended minimum */
    }
    
    /* Better focus states for mobile */
    .step-input:focus,
    .search-input:focus {
        border-width: 2px;
        box-shadow: 0 0 0 2px rgba(0, 187, 249, 0.15);
    }
    
    /* Improved contrast for mobile viewing */
    .template-btn-desc {
        opacity: 1;
        color: #2D3748;
        font-weight: 400;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .template-btn:hover,
    .video-btn:hover,
    .nav-btn:hover {
        transform: none;
    }
    
    .template-btn:active,
    .video-btn:active,
    .nav-btn:active {
        transform: scale(0.98);
    }
    
    .page {
        animation: none;
    }
    
    .wizard-step {
        animation: none;
    }
}

/* Performance optimizations for older mobile devices */
@media (max-width: 768px) {
    .page {
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.98);
    }
    
    /* Simpler shadows for better performance on mobile */
    .template-btn:hover,
    .video-btn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Mobile button touch adjustments */
    .btn-next:active,
    .share-btn:active,
    .video-btn:active,
    .copy-btn:active,
    .create-new-btn:active,
    .primary-btn:active,
    .secondary-btn:active {
        transform: translateY(1px) !important;
    }
}

/* Enhanced mobile focus states */
@media (max-width: 768px) {
    .category-btn:focus,
    .template-btn:focus,
    .nav-btn:focus,
    .share-btn:focus {
        outline: 2px solid #00BBF9;
        outline-offset: 2px;
    }
    
    .step-input:focus,
    .search-input:focus {
        outline: none;
    }
}

/* Improved mobile typography */
@media (max-width: 768px) {
    .header p {
        font-size: 1em;
        line-height: 1.5;
        font-weight: 400;
    }
    
    .simple-intro {
        font-size: 0.95em;
        line-height: 1.4;
        padding: 12px;
        font-weight: 400;
    }
    
    .template-btn-desc {
        line-height: 1.5;
        font-weight: 400;
    }

    /* All text uses Outfit font */
    .step-question,
    .wizard-header h2,
    .ready-content h2,
    .template-btn-title,
    .share-step {
        font-family: 'Outfit', sans-serif;
    }
}

/* Mobile fullscreen recording */
@media (max-width: 768px) {
    .fullscreen-recording .recording-controls {
        bottom: 40px !important;
        padding: 15px !important;
    }
    
    .fullscreen-recording .timer {
        top: 40px !important;
        right: 15px !important;
        font-size: 1rem !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-weight: 700 !important;
        border: 2px solid white !important;
    }
    
    .fullscreen-recording .caption-overlay {
        bottom: 120px !important;
        left: 15px !important;
        right: 15px !important;
        font-size: 0.9rem !important;
        padding: 12px !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 500 !important;
    }
    
    .primary-btn {
        padding: 18px 35px !important;
        font-size: 1.2em !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
    }
}

/* Ensure consistent font usage across all elements */
@media (max-width: 768px) {
    body, 
    .step-input, 
    .search-input, 
    .nav-btn, 
    .share-btn, 
    .video-btn, 
    .copy-btn, 
    .create-new-btn, 
    .primary-btn,
    .category-btn,
    .template-btn,
    .link-input {
        font-family: 'Outfit', sans-serif;
    }

    .timer,
    .link-input {
        font-family: 'JetBrains Mono', monospace;
    }
}

/* Intro page mobile styles */
@media (max-width: 768px) {
    .intro-content {
        padding: 10px 0;
        min-height: 300px;
    }
    
    .intro-tagline h2 {
        font-size: 1.8em;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
    }
    
    .illustration-placeholder {
        padding: 40px 15px;
        min-height: 150px;
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .page {
        border-radius: 32px !important;
    }

    /* How to Play buttons mobile */
    .how-to-play-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 60px;
    }

    .how-to-play-buttons .secondary-btn {
        /* Remove fixed width to hug contents */
    }

    /* Modal mobile adjustments */
    .modal-content {
        margin: 2% auto;
        padding: 15px;
        width: 95%;
        max-width: none;
        text-align: center;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Ensure mobile stays vertical with images above text */
    .how-to-play-steps {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .step {
        flex-direction: column !important;
        text-align: center !important;
        gap: 2px !important;
        align-items: center !important;
        padding: 12px 10px !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    .step-image {
        align-self: center;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .step-image img {
        width: 48px !important;
        height: 48px !important;
    }

    .step-content h3 {
        font-size: 1.1em !important;
        margin: 0 0 2px 0 !important;
    }

    .step-content p {
        font-size: 0.9em !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .modal h2 {
        font-size: 1.4em !important;
        margin-bottom: 15px !important;
    }

    /* Mobile-specific arrow adjustments */
    .step:not(:last-child)::after {
        content: "↓" !important;
        bottom: -12px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 14px !important;
    }

    /* Game demo mobile adjustments */
    .game-demo {
        max-width: 95%;
        margin: 5px auto 20px auto;
        min-height: 140px;
        padding: 25px 15px;
    }

    .sentence {
        font-size: 1.5em;
        padding: 0 5px;
        font-weight: 600;
    }

    .sentence .blank {
        min-width: 70px;
        margin: 0 3px;
    }

    /* Mobile intro content */
    .intro-content {
        padding: 15px !important;
    }

    .demo-subtitle {
        font-size: 1em;
        margin: 0 0 10px 0;
    }

    .intro-content .primary-btn {
        margin-top: 10px;
        margin-bottom: 16px;
        padding: 16px 32px;
        font-size: 1.1em;
    }

    .how-to-play-buttons {
        margin-top: 10px;
    }

    /* Template hero - Compressed to fit single frame */
    .template-hero {
        padding: 15px 15px 20px 15px !important;
        gap: 6px !important;
    }

    .template-hero-image {
        max-width: 250px !important;
    }

    .template-hero-label {
        font-size: 0.6em !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .template-hero-title {
        font-size: 1.3em !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .template-hero-description {
        font-size: 0.85em !important;
        line-height: 1.25 !important;
        margin: 0 0 6px 0 !important;
    }

    #start-template-btn {
        font-size: 1.3em !important;
        padding: 18px 50px !important;
        margin-top: 0 !important;
    }
}