/* iOS Safari Address Bar Handling */
/* Use dynamic viewport units that adjust when address bar hides/shows */
:root {
    --viewport-height: 100vh;
    --dynamic-viewport-height: 100dvh; /* Dynamic viewport height - adjusts with address bar */
    --small-viewport-height: 100svh; /* Small viewport height - excludes dynamic UI */
    --large-viewport-height: 100lvh; /* Large viewport height - includes dynamic UI */
}

/* Support for browsers that don't support dvh */
@supports not (height: 100dvh) {
    :root {
        --dynamic-viewport-height: 100vh;
    }
}

/* Base body styling for iOS address bar handling */
body {
    margin: 0;
    padding: 0;
    /* Use dynamic viewport height to account for address bar */
    min-height: var(--dynamic-viewport-height);
    min-height: 100dvh; /* Fallback for modern browsers */
    overflow-x: hidden;
    /* Prevent rubber band scrolling on iOS */
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* This targets iOS Safari specifically */
    body {
        /* Fix for iOS viewport units */
        min-height: -webkit-fill-available;
        /* Prevent rubber band scrolling gently */
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Video container should fill available space and allow touch */
    #videoContainer {
        min-height: -webkit-fill-available;
        min-height: var(--dynamic-viewport-height);
        min-height: 100dvh;
        /* Ensure video interactions work */
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Allow interactions within video area */
    #videoContainer video,
    #videoContainer .interactive-overlay,
    #videoContainer .choice-buttons-container,
    #videoContainer button {
        touch-action: manipulation;
        pointer-events: auto;
    }
    
    /* Prevent address bar from showing on input focus */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on focus */
    }
}

/* Ensure content fills viewport properly on mobile */
@media screen and (max-width: 768px) {
    .fullscreen-form-container,
    #videoContainer,
    .container-fluid {
        min-height: var(--dynamic-viewport-height);
        min-height: 100dvh;
        min-height: -webkit-fill-available;
    }
    input.finish-input{
        width: 100% !important;
      }
}

/* Fix for landscape orientation on mobile */
@media screen and (orientation: landscape) and (max-height: 500px) {
    body {
        min-height: var(--large-viewport-height);
        min-height: 100lvh;
        min-height: -webkit-fill-available;
    }
}

/* Custom Z-index values - Updated for video layering */
.z-index-3 { z-index: 13; } /* Above videos */
.z-index-4 { z-index: 14; } /* Above videos and overlays */
.z-index-5 { z-index: 15; } /* Above all video elements */
.z-index-8000 { z-index: 8000; } /* Modal overlays */
.z-index-9999 { z-index: 9999; } /* Top level modals */

/* Fullscreen Email Form Styles */
#emailFormOverlay {
    z-index: 10000;
    background-color: #000 !important;
    background-image: url('../images/modal_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    scroll-behavior: smooth;
}

.fullscreen-form-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

.form-content {
    max-width: 800px;
    width: 100%;
    z-index: 10001;
    position: relative;
}

.email-form {
    max-width: 600px;
}

.email-form .input-group {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.email-form .form-control {
    border: none;
    font-size: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.email-form .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 221, 0, 0.3);
    background: #000;
    color: white;
    outline: none;
}

/* Enhanced finish screen styling */
#emailFormOverlay .form-content {
    animation: fadeInUp 0.6s ease-out;
}

/* Custom spacing classes for finish screen */
.mb-6 {
    margin-bottom: 4rem !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Crown pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Email input placeholder styling */
#emailFormOverlay .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Finish screen responsive styles for mobile landscape */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .fullscreen-form-container {
        min-height: auto !important;
        padding: 10px !important;
    }
    
    .mb-6 {
        margin-bottom: 1.5rem !important;
    }
    
    .finish-logo {
        height: 40px !important;
    }
    
    .finish-heading {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .finish-description {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .finish-input {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    .finish-button {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    .finish-checkbox-label {
        font-size: 0.75em !important;
        line-height: 1.2 !important;
    }
    
    .email-form .input-group {
        margin-bottom: 1.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    .form-check {
        margin-bottom: 0.75rem !important;
    }
    
    .form-check-input {
        margin-top: 0 !important;
    }
}

/* Extra compact for very short screens (iPhone SE landscape, etc.) */
@media screen and (max-height: 400px) and (orientation: landscape) {
    .mb-6 {
        margin-bottom: 1rem !important;
    }
    
    .finish-logo {
        height: 35px !important;
    }
    
    .finish-heading {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .finish-description {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .finish-checkbox-label {
        font-size: 0.7em !important;
    }
    
    .fullscreen-form-container {
        padding: 5px !important;
    }
    
    .email-form .input-group {
        margin-top: 0.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .form-check {
        margin-bottom: 0.5rem !important;
    }
}

/* Mobile portrait adjustments for finish screen */
@media screen and (max-width: 480px) and (orientation: portrait) {
    .finish-heading {
        font-size: 2.5rem !important;
    }
    
    .finish-description {
        font-size: 1.1rem !important;
    }
    
    .finish-checkbox-label {
        font-size: 0.8em !important;
    }
}

/* Ensure form elements are touch-friendly */
@media (hover: none) and (pointer: coarse) {
    .finish-input, .finish-button {
        min-height: 44px;
    }
    
    #emailFormOverlay .form-check-input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }
    
    #emailFormOverlay .form-check {
        min-height: 44px;
        display: flex !important;
        align-items: center !important;
    }
}

/* Custom SVG checkbox styling for finish screen */
#emailFormOverlay .form-check-input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url('../images/checkbox_unchecked.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    cursor: pointer !important;
}

#emailFormOverlay .form-check-input[type="checkbox"]:checked {
    background-color: transparent !important;
    border: none !important;
    background-image: url('../images/checkbox_checked.svg') !important;
}

#emailFormOverlay .form-check-input[type="checkbox"]:focus {
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Form submit button styling handled by inline styles */

.form-check-input {
    transform: scale(1.5);
    margin-right: 0.8rem;
}

.form-check-label {
    font-size: 1.1rem;
}

.success-message {
    animation: successPulse 0.6s ease-in-out;
}

@keyframes successPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon {
    animation: trophyShine 2s ease-in-out infinite;
}

@keyframes trophyShine {
    0%, 100% {
        transform: rotate(-5deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.5));
    }
    50% {
        transform: rotate(5deg) scale(1.1);
        filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.8));
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fullscreen-form-container {
        padding: 1rem;
    }
    
    .form-content h1 {
        font-size: 3rem !important;
    }
    
    .form-content p.lead {
        font-size: 1.5rem !important;
    }
    
    .email-form .form-control,
    .email-form .btn-warning {
        font-size: 1.2rem;
        padding: 1.2rem;
    }
    
    .email-form .btn-warning {
        padding: 1.2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .form-content h1 {
        font-size: 2.5rem !important;
    }
    
    .form-content p.lead {
        font-size: 1.2rem !important;
    }
    
    .email-form .input-group {
        flex-direction: column;
    }
    
    .email-form .form-control {
        border-radius: 15px 15px 0 0 !important;
    }
    
    .email-form .btn-warning {
        border-radius: 0 0 15px 15px !important;
        font-size: 1.1rem;
        padding: 1rem;
    }
}

/* Maintain 16:9 aspect ratio on all screens */
@media (orientation: landscape) {
    .fullscreen-form-container {
        min-height: 100vh;
        height: auto;
    }
}

@media (orientation: portrait) {
    .fullscreen-form-container {
        min-height: 100vh;
        height: auto;
        justify-content: flex-start;
        padding-top: 5vh;
    }
}

/* Body and general styles */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* Instagram-style Story Progress Bar */
#storyProgressBar {
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    padding: 15px 20px 30px;
    transition: opacity 0.3s ease;
    /* Ensure progress bar is above all video elements */
    z-index: 12;
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
}

#storyProgressBar.auto-hide {
    opacity: 0.3;
}

#progressSegments {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
}

.progress-section-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.progress-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.section-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.section-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-segment-large {
    height: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.progress-segment {
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    flex: 1;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.progress-segment:hover {
    transform: scaleY(1.3) scaleX(1.02);
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.progress-segment-large.current .progress-fill {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.progress-segment.completed {
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
}

.progress-segment.completed::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.progress-segment.current {
    background-color: rgba(255, 255, 255, 0.4);
    animation: subtleGlow 2s ease-in-out infinite alternate;
}

@keyframes subtleGlow {
    0% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }
}

.progress-fill {
    height: 100%;
    background-color: #ffffff !important;
    border-radius: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.progress-segment.current .progress-fill {
    background: linear-gradient(90deg, #ffffff 0%, #f0f0f0 100%);
}

.progress-fill.animated-fill {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Chapter tooltip on hover */
.progress-segment::after {
    content: attr(data-title);
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.progress-segment:hover::after {
    opacity: 1;
}

/* Video container and fullscreen styles */
#videoContainer {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    overflow: hidden;
    position: relative; /* Ensure proper positioning for absolute children */
    /* Remove flexbox centering since we're using absolute positioning */
    /* iOS-specific styles to prevent fullscreen behavior */
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
}

#videoContainer.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/* Video player styles - updated for absolute positioning */
#backgroundVideo {
    /* Background video fills entire container and is blurred */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill entire container, may crop */
    object-position: center;
    filter: blur(20px) brightness(0.4); /* Heavy blur and darken */
    z-index: 1;
    /* iOS-specific styles */
    -webkit-playsinline: true;
    -webkit-appearance: none;
    /* Performance optimizations for blur effect */
    will-change: filter;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
}

#storyVideo {
    /* Will be positioned absolutely by JavaScript for perfect centering */
    position: absolute;
    z-index: 2; /* Above background video */
    /* Initial fallback dimensions */
    width: 100%;
    height: 100%;
    /* Use contain as fallback until JavaScript takes over */
    object-fit: contain;
    background-color: transparent; /* No background since we have blur behind */
    border-radius: 0;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    /* iOS-specific styles to ensure proper inline playback */
    -webkit-playsinline: true;
    -webkit-appearance: none;
    /* Smooth transitions for dynamic resizing */
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease;
}

/* Mobile video optimizations */
@media (max-width: 768px) {
    #backgroundVideo {
        /* Enhanced blur effect for mobile to fill better */
        filter: blur(25px) brightness(0.3) saturate(1.2);
        /* Scale up slightly to ensure no edge artifacts */
        transform: scale(1.1);
    }
    
    #storyVideo {
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        /* Ensure video is properly positioned on mobile */
        position: absolute !important; /* Force absolute positioning even on mobile */
        /* Enhanced shadow for better separation from background */
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    }
    
    /* Mobile video container enhancements */
    #videoContainer {
        background: linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #1a1a1a 50%, #0a0a0a 75%, #000000 100%);
        padding: 0;
        /* Ensure proper stacking for mobile */
        position: relative;
        overflow: hidden;
    }
    
    /* Remove the pseudo-element frame since we now have blur background */
    #videoContainer::before {
        display: none;
    }
}

#storyVideo::-webkit-media-controls {
    display: none !important;
}

#storyVideo::-webkit-media-controls-enclosure {
    display: none !important;
}

#storyVideo::-webkit-media-controls-panel {
    display: none !important;
}

#storyVideo::-webkit-media-controls-play-button {
    display: none !important;
}

#storyVideo::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* Hide any potential native overlays on mobile */
#storyVideo::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

#storyVideo::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

/* Interactive buttons overlay */
#interactiveOverlay {
    pointer-events: none;
    /* Updated for dynamic video resizing - positioned by JavaScript */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ensure overlay is above both videos */
    z-index: 10;
    /* Smooth transitions when overlay is repositioned */
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease;
}

/* Allow pointer events on interactive elements within the overlay */
#interactiveOverlay .interactive-button,
#interactiveOverlay .interactive-area,
#interactiveOverlay .choice-buttons-container,
#interactiveOverlay .choice-button {
    pointer-events: auto;
}

/* Choice buttons container */
.choice-buttons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: opacity 0.3s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
}

.choice-image-map-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.choice-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.choice-areas-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
}

.choice-area {
    height: 100%;
    cursor: pointer;
}

.choice-area.left-half {
    width: 50%;
}

.choice-area.right-half {
    width: 50%;
}


/* iOS specific container fix - Updated for modern iPhones */
@media screen and (max-width: 1000px) and (hover: none) and (pointer: coarse) {
    .choice-buttons-container {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Additional iOS specific fix for devices with notches/safe areas */
@supports (padding: max(0px, env(safe-area-inset-left))) {
    @media screen and (max-width: 1000px) and (hover: none) {
        .choice-buttons-container {
            padding-left: max(env(safe-area-inset-left), 20px) !important;
            padding-right: max(env(safe-area-inset-right), 20px) !important;
        }
    }
}

/* Choice question styling */
.choice-question {
    background: white;
    color: black;
    border: 12px solid black;
    border-radius: 0;
    padding: 50px 80px;
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 60px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    min-width: 60vw;
    max-width: 80vw;
    font-family: 'Kalam', 'Comic Sans MS', 'Brush Script MT', cursive;
}

/* Choice buttons row */
.choice-buttons-row {
    display: flex;
    gap: 80px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Individual choice buttons - Updated for better mobile proportions */
.choice-button {
    background: white;
    color: black;
    border: 12px solid black;
    border-radius: 0;
    padding: 60px 80px;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Updated sizing for better mobile proportions */
    min-width: 300px;
    max-width: 400px;
    min-height: 150px;
    max-height: 300px; /* Limit height to prevent oversized buttons */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    font-family: 'Kalam', 'Comic Sans MS', 'Brush Script MT', cursive;
    /* Remove flex: 1 to prevent auto-width stretching */
    flex: 0 1 auto;
    box-sizing: border-box;
    /* Enhanced touch support for iOS */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    /* Background image properties for image-based buttons */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.choice-button:hover {
    background-color: #f0f0f0;
    transform: scale(1.03);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}

/* Remove hover/active background overrides - let inline styles handle background */

.choice-button:active {
    transform: scale(0.97);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Image-based choice questions and buttons */
.choice-question-image {
    max-width: 80vw;
    max-height: 40vh;
    width: auto;
    height: auto;
    margin-bottom: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 12px solid black;
    background: white;
    padding: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Remove old choice-button-image styles since we're using background images now */
.choice-button-image {
    display: none; /* Hide any remaining img elements */
}

/* Choice buttons with background images - special styling */
.choice-button.has-background-image {
    /* For buttons with background images, add inner padding for breathing room */
    padding: 35px 45px;
    /* Ensure minimum dimensions for background images */
    min-width: 280px;
    min-height: 180px;
    /* Set a reasonable maximum size for mobile */
    max-width: 320px;
    max-height: 220px;
    /* Background properties are set via inline styles in JavaScript */
    /* Ensure no conflicting background properties */
}

/* When button has background image and text, adjust text styling */
.choice-button.has-background-image:not(:empty) {
    /* If there's both image and text, position text better */
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    /* Ensure solid white background */
    position: relative;
    background-color: white !important;
}

/* Ensure choice buttons with images maintain proper sizing */
.choice-button:has(.choice-button-image) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 150px;
}

.interactive-button {
    position: absolute;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 2px solid #ffffff;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateX(-50%) translateY(-50%);
    min-width: 120px;
    text-align: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    animation: fadeInButton 0.5s ease forwards;
    /* Ensure interactive buttons are above all video elements */
    z-index: 16;
    /* Enhanced touch support for iOS */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

.interactive-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #007bff;
    color: #007bff;
    transform: translateX(-50%) translateY(-50%) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.interactive-button.fade-out {
    animation: fadeOutButton 0.5s ease forwards;
}

/* Large area interactive buttons (for full-screen selections) */
.interactive-area {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0;
}

.interactive-area:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.interactive-area::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.interactive-area:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

@keyframes fadeInButton {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

@keyframes fadeOutButton {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0.8);
    }
}

/* Story title */
#storyTitle {
    transition: opacity 0.3s ease;
}

#storyTitle.auto-hide {
    opacity: 0;
}

/* End video options */
#endVideoOptions {
    animation: slideInFromRight 0.5s ease forwards;
    /* Ensure continue buttons are above all video elements */
    z-index: 15;
    position: relative;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apple TV-style countdown buttons */
.countdown-option-btn {
    position: relative;
    width: auto;
    min-width: 200px;
    max-width: 320px;
    height: 56px;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 28px;
    color: black;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    padding: 0 24px 0 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.countdown-option-btn:hover {
    background: #f8f8f8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Play icon container */
.play-icon-container {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* Play triangle */
.play-triangle {
    width: 0;
    height: 0;
    border-left: 9px solid black;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 2px;
}

/* Progress ring around play icon */
.progress-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
}

.progress-ring-circle {
    fill: none;
    stroke: black;
    stroke-width: 2;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 18px 18px;
    transition: stroke-dashoffset 0.1s ease-out;
    will-change: stroke-dashoffset;
}

/* Button text */
.button-text {
    color: black;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

/* Compact button when text is hidden */
.countdown-option-btn.compact-mode {
    min-width: 56px;
    max-width: 56px;
    width: 56px !important;
    padding: 0;
    justify-content: center;
}

.countdown-option-btn.compact-mode .button-text {
    margin-left: 0;
    padding-left: 0;
}

.countdown-option-btn.compact-mode .play-icon-container {
    margin-right: 0;
    margin-left: 0;
}

/* Auto-play button (Apple TV style with play icon) */
.countdown-option-btn.auto-play {
    background: white;
    border-color: #E0E0E0;
}

/* Regular option buttons (no play icon) */
.countdown-option-btn:not(.auto-play) {
    background: white;
    color: black;
    border-color: #E0E0E0;
}

.countdown-option-btn:not(.auto-play):hover {
    background: #f8f8f8;
    border-color: #E0E0E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.countdown-option-btn:not(.auto-play) .button-text {
    color: black;
}

/* Control Buttons Styling */
#videoContainer .btn.btn-link {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#videoContainer .btn.btn-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

#autoplayBtn.autoplay-active i {
    color: #FFDD00; /* Or any other color to indicate active state */
}

/* Music Button Styling */
#musicBtn .music-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

#musicBtn .music-icon {
    transition: all 0.3s ease;
    filter: brightness(1);
}

#musicBtn.music-muted {
    opacity: 0.7;
}

#musicBtn.music-muted .music-icon {
    filter: brightness(0.8);
}

#musicBtn:hover .music-icon {
    filter: brightness(1.2);
    transform: scale(1.1);
}

/* Ensure SVG icons are properly sized and colored */
#musicBtn .music-icon svg,
#musicBtn .music-icon img {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}


/* Legacy next option button for fallback */
.next-option-btn {
    min-width: 150px;
    font-size: 18px;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.next-option-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Control buttons */
#fullscreenBtn, #backBtn {
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#backBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile double-tap feedback for back button */
#backBtn.single-tap-feedback {
    background-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(0.95);
    transition: all 0.1s ease;
}

/* Start screen */
#startScreen {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 10000;
}

#startBtn {
    font-size: 20px;
    padding: 15px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #007bff, #0056b3);
    border: none;
}

#startBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
    background: linear-gradient(45deg, #0056b3, #007bff);
}

/* Loading overlay */
#loadingOverlay {
    z-index: 8000;
    /* Ensure loading overlay is above all content */
    position: absolute !important;
}

/* Info overlay */
#infoOverlay {
    animation: fadeIn 0.3s ease;
    /* Ensure info overlay is above all video and interactive elements */
    z-index: 25 !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* Visual hint for area buttons - subtle border on hover */
.interactive-area:hover {
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    border-right: 3px solid rgba(255, 255, 255, 0.5);
}

/* Subtle pulse animation for area buttons to hint they're clickable */
@keyframes subtlePulse {
    0%, 100% { 
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.05);
    }
    50% { 
        box-shadow: inset 0 0 50px 0 rgba(255, 255, 255, 0.1);
    }
}

.interactive-area {
    animation: subtlePulse 4s ease-in-out infinite;
}

/* Responsive design */
@media (max-width: 768px) {
    .interactive-button {
        font-size: 14px;
        padding: 10px 20px;
        min-width: 100px;
    }
    
    .interactive-area:hover {
        font-size: 20px;
    }
    
    .next-option-btn {
        font-size: 16px;
        padding: 10px 20px;
        min-width: 120px;
    }
    
    #fullscreenBtn span, #backBtn span {
        display: none;
    }
    
    #startBtn {
        font-size: 18px;
        padding: 12px 25px;
    }
}

@media (max-width: 480px) {
    .interactive-button {
        font-size: 12px;
        padding: 8px 16px;
        min-width: 80px;
    }
    
    .next-option-btn {
        font-size: 14px;
        padding: 8px 16px;
        min-width: 100px;
    }
    
    /* Extra small mobile screens */
    .choice-buttons-container {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        padding: 0 5px !important;
    }
    
    .choice-question {
        font-size: 20px !important;
        padding: 20px 15px !important;
        margin: 0 auto 20px auto !important;
        border: 4px solid black !important;
    }
    
    .choice-buttons-row {
        gap: 20px !important;
    }
    
    .choice-button {
        font-size: 18px !important;
        padding: 20px 15px !important;
        min-height: 80px !important;
        max-height: 120px !important; /* Limit height on small screens */
        min-width: 150px !important;
        max-width: 200px !important; /* Much smaller on mobile */
        border: 4px solid black !important;
    }
    
    .choice-button.has-background-image {
        min-width: 140px !important;
        max-width: 180px !important; /* Even smaller for image buttons on mobile */
        min-height: 100px !important;
        max-height: 140px !important;
        padding: 20px 15px !important; /* More padding for breathing room */
    }
    
    /* Mobile styles for image-based choice elements */
    .choice-question-image {
        max-width: 95vw !important;
        max-height: 30vh !important;
        margin-bottom: 20px !important;
        border: 4px solid black !important;
        padding: 15px !important;
    }
    
    .choice-button:has(.choice-button-image) {
        padding: 10px !important;
        min-height: 80px !important;
    }
}

/* Landscape orientation on mobile - optimize for wider but shorter screens (including modern iPhones) */
@media screen and (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) and (hover: none) {
    .choice-buttons-container {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        padding: 0 20px !important;
        top: 45% !important; /* Center better on landscape screens */
    }
    
    .choice-question {
        font-size: 24px !important;
        padding: 20px 30px !important;
        margin: 0 auto 20px auto !important;
        border: 6px solid black !important;
    }
    
    .choice-question-image {
        border: 6px solid black !important; /* Match the question border thickness */
    }
    
    .choice-buttons-row {
        flex-direction: row !important;
        gap: 30px !important;
        justify-content: center !important;
    }
    
    .choice-button {
        font-size: 20px !important;
        padding: 25px 20px !important;
        min-height: 80px !important;
        max-height: 140px !important; /* Limit height in landscape */
        /* Remove flex: 1 to prevent stretching to 50% width */
        flex: 0 1 auto !important;
        min-width: 180px !important;
        max-width: 240px !important; /* Much more reasonable size in landscape */
        border: 6px solid black !important;
        /* Ensure minimum touch target size for iOS */
    }
    
    .choice-button.has-background-image {
        min-width: 160px !important;
        max-width: 200px !important; /* Even smaller for image buttons in landscape */
        min-height: 90px !important;
        max-height: 120px !important;
        padding: 25px 20px !important; /* More padding for breathing room in landscape */
    }
}

/* Video controls hide/show */
.video-controls-visible #storyVideo {
    cursor: pointer;
}

.video-controls-hidden #storyVideo {
    cursor: none;
}

/* Smooth transitions for all interactive elements */
* {
    box-sizing: border-box;
}

/* Pointer events control */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* Custom scrollbar for overlay content */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Mobile orientation handling */
#orientationPrompt {
    background-color: #000 !important;
    animation: fadeIn 0.5s ease;
}

#orientationPausedOverlay {
    background-color: #000 !important;
    animation: fadeIn 0.5s ease;
}

/* Logo styling for orientation screens */
#orientationPrompt img,
#orientationPausedOverlay img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.rotate-icon {
    animation: rotatePhone 2s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%, 100% { 
        transform: rotate(0deg); 
    }
    50% { 
        transform: rotate(90deg); 
    }
}

/* Ensure Font Awesome icons are visible on mobile */
.fas, .far, .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* Mobile-specific button improvements */
@media (max-width: 768px) {
    /* Ensure icons are visible and properly sized on mobile */
    .btn i {
        font-size: 1rem !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
    }
    
    /* Make sure control buttons are touch-friendly */
    #fullscreenBtn, #backBtn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Hide fullscreen button on mobile devices */
    #fullscreenBtn {
        display: none !important;
    }
    
    /* Improve button spacing on mobile */
    .position-absolute.top-0.end-0.m-3.z-index-4 {
        gap: 8px !important;
    }
    
    /* Hide button text but keep icons on mobile and tablets */
    #fullscreenBtn span, #backBtn span {
        display: none !important;
    }
    
    /* Progress bar mobile responsiveness */
    #storyProgressBar {
        padding: 10px 15px 20px !important;
    }
    
    .progress-segment {
        height: 4px !important;
    }
    
    .progress-segment::after {
        font-size: 11px !important;
        padding: 4px 8px !important;
        bottom: 12px !important;
    }
    
    #chapterTitle {
        font-size: 1.3rem !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    
    /* Make interactive areas more touch-friendly */
    .interactive-area {
        min-height: 60vh !important;
    }
    
    /* Larger touch targets for interactive buttons */
    .interactive-button {
        min-width: 120px !important;
        min-height: 50px !important;
        font-size: 16px !important;
        padding: 15px 25px !important;
    }
    
    /* Mobile responsive choice buttons */
    .choice-buttons-container {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Fullscreen specific overrides for mobile */
    #videoContainer.fullscreen-mode .choice-buttons-container {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        padding: 0 15px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-50%) !important;
    }
    
    .choice-question {
        font-size: 24px !important;
        padding: 25px 30px !important;
        margin: 0 auto 30px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        border: 6px solid black !important;
        border-radius: 0 !important;
        font-family: 'Kalam', 'Comic Sans MS', 'Brush Script MT', cursive !important;
        box-sizing: border-box !important;
    }
    
    .choice-question-image {
        border: 6px solid black !important; /* Match mobile border thickness */
    }
    
    .choice-buttons-row {
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
    }
    
    .choice-button {
        font-size: 20px !important;
        padding: 25px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        min-height: 100px !important;
        max-height: 140px !important; /* Limit height even in column layout */
        border: 6px solid black !important;
        border-radius: 0 !important;
        font-family: 'Kalam', 'Comic Sans MS', 'Brush Script MT', cursive !important;
        flex: none !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
    
    .choice-button.has-background-image {
        padding: 20px 15px !important;
        min-height: 110px !important;
        max-height: 150px !important;
    }
    
    /* Fullscreen specific choice button overrides for mobile */
    #videoContainer.fullscreen-mode .choice-button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 18px !important;
        padding: 20px 15px !important;
        min-height: 90px !important;
        max-height: 120px !important; /* Limit height in fullscreen mode */
        border: 4px solid black !important;
        margin: 0 !important;
    }
    
    #videoContainer.fullscreen-mode .choice-button.has-background-image {
        padding: 15px 10px !important;
        min-height: 100px !important;
        max-height: 130px !important;
    }
    
    #videoContainer.fullscreen-mode .choice-question {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 22px !important;
        padding: 20px 25px !important;
        margin: 0 auto 25px auto !important;
        border: 4px solid black !important;
    }
    
    #videoContainer.fullscreen-mode .choice-question-image {
        border: 4px solid black !important; /* Match fullscreen mobile border thickness */
    }
    
    /* Mobile responsiveness for countdown buttons */
    .countdown-option-btn {
        width: auto !important;
        min-width: 180px !important;
        max-width: 280px !important;
        height: 48px !important;
        font-size: 16px !important;
        margin-bottom: 8px !important;
        padding: 0 20px 0 16px !important;
        border-radius: 24px !important;
    }
    
    /* Mobile compact mode for countdown buttons */
    .countdown-option-btn.compact-mode {
        min-width: 48px !important;
        max-width: 48px !important;
        width: 48px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    
    .countdown-option-btn.compact-mode .play-icon-container {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .play-icon-container {
        width: 32px !important;
        height: 32px !important;
        margin-right: 10px !important;
    }
    
    .progress-ring {
        width: 32px !important;
        height: 32px !important;
    }
    
    .play-triangle {
        border-left: 8px solid black !important;
        border-top: 6px solid transparent !important;
        border-bottom: 6px solid transparent !important;
    }
    
    .button-text {
        font-size: 16px !important;
    }
    
    .countdown-option-btn:not(.auto-play) .button-text {
        color: white !important;
    }
    
    #endVideoOptions {
        margin: 12px !important;
    }
}

/* Portrait orientation warning (mobile only) */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .orientation-warning {
        display: block !important;
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
    .orientation-warning {
        display: none !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 991px) {
    /* Hide button text on tablets too */
    #fullscreenBtn span, #backBtn span, #chaptersBtn span {
        display: none !important;
    }
    
    /* Adjust story title for tablet */
    #storyTitle {
        padding-right: 160px !important;
    }
}

/* Landscape orientation optimizations */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Optimize for landscape mobile viewing */
    #storyTitle {
        padding: 8px 0 !important;
        padding-right: 180px !important; /* Keep space for buttons */
    }
    
    #chapterTitle {
        font-size: 1.1rem !important;
    }
    
    /* Control buttons positioning for landscape */
    .position-absolute.top-0.end-0.m-3.z-index-4 {
        margin: 8px !important;
    }
    
    /* Smaller interactive button text in landscape */
    .interactive-button {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
    
    /* Ensure video fits properly in landscape mode */
    #videoContainer {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height */
    }
    
    #storyVideo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
    }
}

/* Portrait orientation optimizations */
@media screen and (max-width: 768px) and (orientation: portrait) {
    #videoContainer {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height */
        background: linear-gradient(135deg, #000000 0%, #0f0f0f 50%, #000000 100%);
    }
    
    #storyVideo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        /* Add subtle borders on portrait for better framing */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* Section support for progress bar */
/* Section-aware progress segments */
.progress-segment[data-section-id] {
    margin: 1px 0;
}

/* Enhance tooltips to show section information */
.progress-segment[data-section-id]::after {
    content: attr(data-title);
}

/* Section indicator animations */
.section-indicator {
    transition: all 0.3s ease;
}

.progress-section-header:hover .section-indicator {
    transform: translate(-50%, -50%) scale(1.15);
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.progress-section-header:hover .section-title {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Section header tooltip */
.progress-section-header::after {
    content: attr(data-section-title);
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.progress-section-header:hover::after {
    opacity: 1;
}

.progress-section-separator {
    height: 2px;
    margin: 2px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    max-width: 12px;
    flex-shrink: 0;
}

.progress-section-separator::before {
    content: '│';
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    font-weight: 300;
    cursor: help;
    transition: all 0.2s ease;
    line-height: 1;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

.progress-section-separator:hover::before {
    color: rgba(255, 255, 255, 0.6);
    transform: scaleY(1.2);
}

.progress-section-separator::after {
    content: 'Section break';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.progress-section-separator:hover::after {
    opacity: 1;
}

/* iOS-specific fixes for iPhone notch and Dynamic Island */
@supports (padding: max(0px)) {
    .choice-buttons-container {
        padding-left: max(env(safe-area-inset-left), 20px) !important;
        padding-right: max(env(safe-area-inset-right), 20px) !important;
        padding-top: max(env(safe-area-inset-top), 10px) !important;
        padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
    }
}

/* Final mobile override - highest specificity */
@media screen and (max-width: 768px) {
    /* Force choice buttons to fit within screen bounds */
    .choice-buttons-container,
    #videoContainer .choice-buttons-container,
    #videoContainer.fullscreen-mode .choice-buttons-container {
        position: absolute !important;
        top: 50% !important;
        left: max(env(safe-area-inset-left), 20px) !important;
        right: max(env(safe-area-inset-right), 20px) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: translateY(-50%) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .choice-question,
    #videoContainer .choice-question,
    #videoContainer.fullscreen-mode .choice-question {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto 20px auto !important;
        font-size: 20px !important;
        padding: 15px 20px !important;
        border: 4px solid black !important;
        box-sizing: border-box !important;
    }
    
    .choice-button,
    #videoContainer .choice-button,
    #videoContainer.fullscreen-mode .choice-button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        font-size: 18px !important;
        padding: 20px 15px !important;
        border: 4px solid black !important;
        min-height: 80px !important;
        max-height: 120px !important; /* Limit height in mobile overrides */
        flex: none !important;
        box-sizing: border-box !important;
    }
    
    .choice-button.has-background-image,
    #videoContainer .choice-button.has-background-image,
    #videoContainer.fullscreen-mode .choice-button.has-background-image {
        padding: 15px 10px !important;
        min-height: 90px !important;
        max-height: 130px !important;
    }
    
    .choice-buttons-row,
    #videoContainer .choice-buttons-row,
    #videoContainer.fullscreen-mode .choice-buttons-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        margin: 0 !important;
                 padding: 0 !important;
    }
}

/* iOS Safari specific fixes */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .choice-buttons-container,
    #videoContainer .choice-buttons-container,
    #videoContainer.fullscreen-mode .choice-buttons-container {
        left: 25px !important;
        right: 25px !important;
        max-width: calc(100vw - 50px) !important;
    }
    
    .choice-question,
    #videoContainer .choice-question,
    #videoContainer.fullscreen-mode .choice-question {
        max-width: 100% !important;
        font-size: 18px !important;
        padding: 12px 15px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .choice-question-image,
    #videoContainer .choice-question-image,
    #videoContainer.fullscreen-mode .choice-question-image {
        border: 4px solid black !important; /* Match iOS Safari mobile border thickness */
    }
    
    .choice-button,
    #videoContainer .choice-button,
    #videoContainer.fullscreen-mode .choice-button {
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 18px 12px !important;
        max-height: 110px !important; /* Limit height for iOS Safari */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .choice-button.has-background-image,
    #videoContainer .choice-button.has-background-image,
    #videoContainer.fullscreen-mode .choice-button.has-background-image {
        padding: 15px 10px !important;
        max-height: 120px !important;
    }
}

/* iPhone Pro Max specific (430px wide) */
@media screen and (max-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {
    .choice-buttons-container,
    #videoContainer .choice-buttons-container,
    #videoContainer.fullscreen-mode .choice-buttons-container {
        left: 30px !important;
        right: 30px !important;
        max-width: calc(100vw - 60px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .choice-question,
    #videoContainer .choice-question,
    #videoContainer.fullscreen-mode .choice-question {
        font-size: 16px !important;
        padding: 10px 12px !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }
    
    .choice-question-image,
    #videoContainer .choice-question-image,
    #videoContainer.fullscreen-mode .choice-question-image {
        border: 4px solid black !important; /* Match iPhone Pro Max border thickness */
    }
    
    .choice-button,
    #videoContainer .choice-button,
    #videoContainer.fullscreen-mode .choice-button {
        font-size: 14px !important;
        padding: 15px 10px !important;
        min-height: 70px !important;
        max-height: 100px !important; /* Limit height on small screens */
        line-height: 1.3 !important;
    }
    
    .choice-button.has-background-image,
    #videoContainer .choice-button.has-background-image,
    #videoContainer.fullscreen-mode .choice-button.has-background-image {
        padding: 12px 8px !important;
        min-height: 80px !important;
        max-height: 110px !important;
    }
    
    .choice-buttons-row,
    #videoContainer .choice-buttons-row,
    #videoContainer.fullscreen-mode .choice-buttons-row {
        gap: 12px !important;
    }
}

/* iOS-specific overlay styles */
.ios-autoplay-overlay,
.ios-error-overlay,
.video-error-overlay,
#manualPlayOverlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ios-autoplay-overlay .btn,
.ios-error-overlay .btn,
.video-error-overlay .btn,
#manualPlayOverlay .btn {
    min-height: 60px;
    font-size: 18px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.ios-autoplay-overlay .btn:hover,
.ios-error-overlay .btn:hover,
.video-error-overlay .btn:hover,
#manualPlayOverlay .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* iOS safe area adjustments */
@supports (padding: env(safe-area-inset-top)) {
    .ios-autoplay-overlay > div,
    .ios-error-overlay > div,
    .video-error-overlay > div,
    #manualPlayOverlay > div {
        padding-top: max(env(safe-area-inset-top), 20px);
        padding-bottom: max(env(safe-area-inset-bottom), 20px);
        padding-left: max(env(safe-area-inset-left), 20px);
        padding-right: max(env(safe-area-inset-right), 20px);
    }
}

/* Improved iOS video loading indicator */
#loadingOverlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* iOS-specific button improvements */
@media (max-width: 768px) {
    .btn {
        min-height: 50px;
        font-size: 16px;
        padding: 12px 24px;
    }
    
    .btn-lg {
        min-height: 60px;
        font-size: 18px;
        padding: 16px 32px;
    }
}

/* iOS video element enhancements */
#storyVideo {
    /* Ensure video doesn't interfere with touch events */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    
    /* Prevent iOS zoom on double tap */
    touch-action: manipulation;
}

/* iOS orientation and viewport fixes */
@media screen and (max-device-width: 926px) and (orientation: landscape) {
    /* iPhone 14 Pro Max and smaller in landscape */
    #videoContainer {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for better iOS support */
        background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    }
    
    #storyVideo {
        object-fit: contain;
        object-position: center center;
        /* Add subtle side borders for better framing on wide screens */
        border-left: 1px solid rgba(255, 255, 255, 0.03);
        border-right: 1px solid rgba(255, 255, 255, 0.03);
    }
}

/* Enhanced video presentation for extreme aspect ratios */
@media screen and (max-aspect-ratio: 9/16) {
    /* Very tall screens (like modern phones in portrait) */
    #videoContainer {
        background: radial-gradient(ellipse at center, #1a1a1a 0%, #000000 70%);
    }
    
    #storyVideo {
        max-height: 70vh; /* Prevent video from being too small on very tall screens */
        object-fit: contain;
        object-position: center center;
    }
}

@media screen and (min-aspect-ratio: 21/9) {
    /* Very wide screens */
    #videoContainer {
        background: radial-gradient(ellipse at center, #1a1a1a 0%, #000000 70%);
    }
    
    #storyVideo {
        max-width: 90vw; /* Prevent video from being too small on very wide screens */
        object-fit: contain;
        object-position: center center;
    }
}

@media screen and (max-width: 500px) and (orientation: portrait) and (hover: none) {
    /* Modern iOS devices in portrait mode */
    .ios-autoplay-overlay,
    .ios-error-overlay,
    .video-error-overlay,
    #manualPlayOverlay {
        padding: 20px;
    }
    
    .ios-autoplay-overlay h3,
    .ios-error-overlay h3,
    .video-error-overlay h3,
    #manualPlayOverlay h3 {
        font-size: 1.5rem;
    }
} 

/* Android Browser UI Handling */
/* Android browsers handle fullscreen and address bars differently than iOS */

/* Android-optimized viewport and UI */
body.android-optimized {
    /* Optimize for Android address bar hiding */
    min-height: 100vh;
    min-height: 100dvh;
    /* Android-specific scrolling behavior */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    /* Prevent unwanted zooming on Android */
    touch-action: manipulation;
}

/* Android fullscreen video container */
.android-fullscreen-ready #videoContainer {
    /* Prepare for fullscreen transitions */
    transition: all 0.3s ease;
    /* Ensure full coverage on Android */
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Android fullscreen mode */
.android-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #000 !important;
    
    /* Android-specific fullscreen optimizations */
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Android fullscreen video */
.android-fullscreen video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover;
    /* Disable native controls in fullscreen */
    -webkit-media-controls: none;
    -moz-appearance: none;
}

/* Android fullscreen controls */
.android-fullscreen .video-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
    padding: 10px 20px;
    /* Enhanced visibility on Android */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Android fullscreen exit button */
.android-fullscreen .video-controls .btn {
    /* Better touch targets for Android */
    min-width: 44px;
    min-height: 44px;
    margin: 0 5px;
    /* Android material design inspired */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    transition: all 0.2s ease;
}

.android-fullscreen .video-controls .btn:hover,
.android-fullscreen .video-controls .btn:focus {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Android address bar compensation */
@media screen and (max-width: 768px) {
    .android-device {
        /* Account for Android navigation gestures */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Account for Android status bar */
        padding-top: env(safe-area-inset-top, 0px);
    }
    
    .android-device #videoContainer {
        /* Fill available space accounting for Android UI */
        height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
}

/* Android Chrome address bar hide compensation */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .android-device.landscape-mode {
        /* Optimize for landscape mode where address bar is more problematic */
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
    
    .android-device.landscape-mode #videoContainer {
        /* Force full height in landscape */
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
}

/* Android webkit fullscreen video support */
.android-device video::-webkit-media-controls {
    /* Hide native controls in favor of custom ones */
    display: none !important;
}

.android-device video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Android gesture navigation compatibility */
.android-device {
    /* Ensure content doesn't get hidden by gesture navigation */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Android fullscreen animation */
.android-fullscreen-ready.fullscreen-mode {
    animation: androidFullscreenEnter 0.3s ease-out;
}

.android-fullscreen-ready:not(.fullscreen-mode) {
    animation: androidFullscreenExit 0.3s ease-out;
}

@keyframes androidFullscreenEnter {
    from {
        transform: scale(0.95);
        opacity: 0.8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes androidFullscreenExit {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Android performance optimizations */
.android-device video {
    /* Hardware acceleration for better performance */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.android-fullscreen video {
    /* Enhanced performance in fullscreen */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}