:root {
    --font-family: Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    --primary-button-color: #f97316;
    --primary-button-hover-color: #e05a00;
    --content-background-color: rgba(17, 24, 39, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

/* Remove focus outline from all interactive elements */
button, 
input, 
select, 
textarea, 
.button, 
.selection-button,
.selection-image-button,
.selection-video-button,
*:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Additional mobile-specific focus removal */
@media screen and (max-width: 767px) {
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    button:focus,
    .button:focus,
    .selection-button:focus,
    .selection-image-button:focus,
    .selection-video-button:focus {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    color: white;
}

/* Allow scrolling in mobile landscape */
@media (orientation: landscape) and (max-height: 600px) {
    body {
        overflow-y: auto; /* Enable vertical scrolling */
        height: auto; /* Allow body to expand */
        min-height: 100vh; /* Ensure minimum height */
    }
}

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.background-video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -10;
    object-fit: cover; /* Ensures full coverage without distortion */
    object-position: center; /* Centers the video in the viewport */
    top: 0;
    left: 0;
    display: none; /* Hide by default, JS will show the correct one */
}

/* Particles.js container */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Same level as overlay */
    pointer-events: none; /* Allows clicks to pass through to elements below */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.content-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(229, 231, 235, 0.8);
    padding: 30px 20px;
    border-radius: 20px;
    width: 90%;
    max-width: 350px; /* Optimized for mobile portrait */    
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Use auto height based on content */    height: auto;
    min-height: auto;
    z-index: 1; /* Ensure content appears above the overlay and particles */
    transition: opacity 0.2s ease-out;
    /* Important: don't transition the transform property which controls positioning */
    opacity: 1; /* Ensure visible on first load */
}

.fade-in-container {
    animation: fadeInStep 0.3s ease-out forwards;
}

h1 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 600;
}

p.question {
    margin: 15px 0 25px 0; /* Add top and bottom margins for spacing */
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: center;
}

/* Intro questions styling */
.intro-question {
  font-size: 18px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 15px;
  line-height: 1.4;
  opacity: 0.9;
}

/* Main question styling */
.main-question {
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 25px;
  line-height: 1.3;
}

#buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.multi-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.button {
    padding: 12px 20px;
    background-color: #f97316;
    color: white;
    border: 1px solid #e05a00;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s, font-weight 0.2s;
    width: 80%;
    max-width: 250px;
    text-transform: uppercase;
    margin: 5px 0;
    outline: none; /* Remove focus outline */
}

.button:focus {
    outline: none; /* Remove focus outline */
}

.button:hover {
    background-color: #e05a00;
}

.button.clicked {
    background-color: #529d70;
    border: 1px solid #3d8259;
    font-weight: 800;
    animation: selectedButton 0.5s forwards;
}

.single-button {
    width: 80%;
    max-width: 250px;
    margin: 10px auto;
}

#cta-button {
    padding: 12px 20px;
    background-color: #f97316;
    color: white;
    border: 1px solid #e05a00;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s, font-weight 0.2s;
    width: 80%; /* Slightly narrower for better appearance */
    max-width: 250px;
    text-transform: uppercase;
    margin: 10px auto; /* Adjusted margins for proper spacing */
    align-self: center; /* Center within flex container */
    display: block; /* Ensure block display */
    outline: none; /* Remove focus outline */
}

#cta-button:focus {
    outline: none; /* Remove focus outline */
}

#cta-button:hover {
    background-color: #e05a00;
}

#cta-button.clicked {
    background-color: #529d70;
    border: 1px solid #3d8259;
    font-weight: 800;
    animation: selectedButton 0.5s forwards;
}

.step {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Step transition animation */
@keyframes fadeInStep {
    from { 
        opacity: 0;
        transform: translateY(20px) translate(-50%, -50%);
    }
    to {
        opacity: 1;
        transform: translateY(0) translate(-50%, -50%);
    }
}

/* Step transition animation for mobile landscape - no translate transform */
@media (orientation: landscape) and (max-height: 600px) {
    @keyframes fadeInStep {
        from { 
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.fade-in {
    animation: fadeInStep 0.6s ease-out forwards;
}

/* Keyframes for button selection animation - smoother effect */
@keyframes selectedButton {
    0% { transform: scale(1); background-color: var(--primary-button-color); }
    30% { transform: scale(1.05); background-color: #529d70; }
    70% { transform: scale(1); background-color: #529d70; box-shadow: 0 0 0 4px rgba(61, 130, 89, 0.3); }
    100% { transform: scale(1); background-color: #529d70; box-shadow: 0 0 0 0px rgba(61, 130, 89, 0); }
}

/* MEDIA QUERIES */

/* Mobile Landscape */
@media (orientation: landscape) and (max-height: 600px) {
    .content-container {
        position: relative; /* Changed from absolute */
        top: auto; /* Remove fixed positioning */
        left: auto;
        transform: none; /* Remove transform */
        margin: 40px auto 20px auto; /* Increased top margin from 20px to 40px */
        padding: 15px;
        max-width: 85%;
        width: 450px;
        /* Removed fixed min-height */
    }
    
    h1 {
        margin-bottom: 10px;
        font-size: 1.4rem;
    }
    
    p.question {
        margin: 10px 0 15px 0; /* Adjusted margins for landscape */
        font-size: 1.1rem;
    }
    
    #cta-button {
        padding: 8px 16px;
        font-size: 1.3rem;
        margin: 5px auto; /* Reduced margins for landscape */
    }
}

/* Desktop */
@media (min-width: 768px) and (min-height: 600px) {
    .content-container {
        padding: 30px;
        max-width: 600px;
        width: 60%;
        /* Removed fixed min-height */
    }
    
    h1 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    p.question {
        font-size: 1.5rem;
        margin: 20px 0 30px 0; /* Adjusted margins for desktop */
        line-height: 1.6;
    }
    
    #cta-button {
        padding: 15px 30px;
        font-size: 1.6rem;
        margin: 15px auto; /* Increased margins for desktop */
        max-width: 300px;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .content-container {
        max-width: 600px;
        /* Consistent with the auto height approach */
        padding: 40px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
      p.question {
        font-size: 1.6rem;
    }
}

/* Pulse animation for the final CTA button */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse-button {
    animation: pulse 1s ease-in-out infinite;
}

/* Loading animation for step 11 */
.loading-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #f97316;
    animation: spinner 1s ease-in-out infinite;
    margin-bottom: 15px;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1.2rem;
    color: white;
    text-align: center;
}

.loading-text.bounce-in {
    animation: bounceIn 0.5s ease-out forwards;
}

.loading-text.approved {
    color: #4CAF50;
    font-weight: bold;
    font-size: 1.4rem;
}

/* BounceIn animation */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes scale-in {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1.1); opacity: 1; }
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Rules list styles for step 13 */
.rules-list {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 5px 0 20px 0;
    padding-left: 0; /* Remove default left padding */
    list-style-position: inside; /* Position bullets inside */
    list-style-type: none; /* Remove default bullets to use custom styling */
}

.rules-list li {
    margin-bottom: 8px;
    text-align: center;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; /* Small gap between bullet and text */
}

.rules-list li::before {
    content: "•"; /* Custom bullet */
    display: inline-block;
    margin-right: 3px; /* Space between bullet and text */
}

@media (orientation: landscape) and (max-height: 600px) {
    .rules-list {
        font-size: 0.85rem;
        margin: 3px 0 15px 0;
    }
    .rules-list li {
        margin-bottom: 5px;
        gap: 2px; /* Even smaller gap for landscape mode */
    }
    .rules-list li::before {
        margin-right: 2px; /* Smaller space in compact view */
    }
}

@media (min-width: 768px) and (min-height: 600px) {
    .rules-list {
        font-size: 1.1rem;
        margin: 10px 0 25px 0;
    }
}

/* Fallback styling when videos can't play due to power save mode */
.video-fallback {
    background-color: #111827; /* Dark background as fallback */
}

/* iOS-specific adjustments */
.video-container.ios-device .background-video {
    /* Ensure poster images are properly displayed on iOS */
    background-size: cover;
    background-position: center center;
}

/* iOS specific adjustments */
@supports (-webkit-overflow-scrolling: touch) {
    /* iOS specific CSS */
    .content-container {
        /* Improved touch handling on iOS */
        -webkit-overflow-scrolling: touch;
    }
      .button {
        /* Prevent iOS button styling */
        -webkit-appearance: none;
        appearance: none;
        /* Prevent text selection on buttons */
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Mobile-specific video adjustments */
@media screen and (max-width: 767px) {
    .background-video {
        object-fit: cover !important;
        width: 100%;
        height: 100%;
    }
    
    /* Portrait specific adjustments */
    @media screen and (orientation: portrait) {
        #portrait-video {
            display: block; /* Make portrait video visible by default on portrait mode */
            object-position: center center;
        }
    }
    
    /* Landscape specific adjustments */
    @media screen and (orientation: landscape) {
        #landscape-video {
            display: block; /* Make landscape video visible by default on landscape mode */
            object-position: center center;
        }
    }
}

/* Selection buttons container for combined steps */
.selection-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 600px; /* Limit max width for better alignment */
    margin: 0 auto 20px auto; /* Center the container */
    justify-items: center; /* Center items within grid cells */
    align-items: start; /* Align items to top */
    justify-content: center; /* Center the entire grid */
}

/* Text-based selection buttons (fallback) */
.selection-button {
    padding: 15px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none; /* Remove focus outline */
}

.selection-button:focus {
    outline: none; /* Remove focus outline */
}

/* Image-based selection buttons (portrait orientation) */
.selection-image-button {
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    aspect-ratio: 3/4; /* Portrait orientation - height is 4/3 of width */
    min-height: 100px; /* Increased from 80px for better mobile visibility */
    max-height: 160px; /* Increased from 140px */
    width: 100%; /* Ensure full width within grid cell */
    max-width: 140px; /* Limit max width for consistent sizing */    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: padding-box; /* Pilt järgib border-radius */
    outline: none; /* Remove focus outline */
}

.selection-image-button:focus {
    outline: none; /* Remove focus outline */
}

/* Video-based selection buttons (same styling as image buttons) */
.selection-video-button {
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    aspect-ratio: 3/4; /* Portrait orientation - height is 4/3 of width */
    min-height: 100px;
    max-height: 160px;
    width: 100%;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    outline: none; /* Remove focus outline */
}

.selection-video-button:focus {
    outline: none; /* Remove focus outline */
}

.selection-video-button video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.selection-image-button::before,
.selection-video-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
    z-index: 2;
}

.selection-image-button .button-text,
.selection-video-button .button-text {
    position: relative;
    z-index: 3;
    padding: 8px; /* Reduced from 12px */
    font-size: 1rem; /* Reduced from 1.1rem */
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
}

.selection-button:hover,
.selection-image-button:hover,
.selection-video-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
}

.selection-button.selected,
.selection-image-button.selected,
.selection-video-button.selected {
    background-color: #f97316;
    border-color: #e05a00;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.selection-image-button.selected,
.selection-video-button.selected {
    border-color: #f97316;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.selection-image-button.selected .button-text,
.selection-video-button.selected .button-text {
    background: rgba(249, 115, 22, 0.8);
}

/* Continue button styling - uses standard button base with inactive state */
.button.continue-button {
    background: linear-gradient(45deg, #666666, #888888);
    color: #cccccc;
    border: 1px solid #666666; /* Gray border for inactive state */
    cursor: not-allowed;
    opacity: 0.6;
    transform: scale(0.95);
    transition: all 0.4s ease;
}

.button.continue-button.active {
    background: #f97316; /* Same as "Jerk Off Now" button - use background not background-color */
    border: 1px solid #e05a00; /* Same border as "Jerk Off Now" button */
    color: #ffffff;
    cursor: pointer;
    opacity: 1;
    transform: scale(1);
}

.button.continue-button.active:hover {
    background: #e05a00; /* Use background not background-color */
    transform: scale(1.02);
}

/* Continue button gets same clicked animation as other buttons */
.button.continue-button.clicked {
    background: #529d70 !important; /* Green like other buttons when clicked - use !important to override */
    border: 1px solid #3d8259;
    font-weight: 800;
    animation: selectedButton 0.5s forwards;
}

.button.continue-button:focus {
    outline: none; /* Remove focus outline */
}

/* Mobile adjustments for selection buttons */
@media (orientation: landscape) and (max-height: 600px) {
    .selection-buttons-container {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Single row with 4 columns for mobile landscape */
        gap: 6px; /* Smaller gap for compact landscape layout */
        margin-bottom: 15px;
        max-width: 550px; /* Increased to accommodate 4 buttons in landscape */
    }
    
    .selection-button {
        padding: 10px 8px;
        font-size: 1rem;
        min-height: 50px;
    }
    
    .selection-image-button {
        min-height: 90px; /* Increased to maintain proper 3/4 ratio */
        max-height: 120px; /* Increased for better proportion */
        max-width: 90px; /* Adjusted to maintain 3/4 aspect ratio (90px width = 120px height) */
    }
    
    .selection-image-button .button-text {
        padding: 6px; /* Slightly increased for better readability */
        font-size: 0.9rem; /* Slightly increased font */
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .selection-buttons-container {
        gap: 10px;
        max-width: 100%; /* Full width for small screens */
    }
    
    .selection-image-button {
        min-height: 90px; /* Increased from 70px for better mobile visibility */
        max-height: 130px; /* Increased from 110px */
        max-width: 120px; /* Better proportion for small screens */
    }
    
    .selection-image-button .button-text {
        padding: 8px; /* Increased from 6px */
        font-size: 1rem; /* Increased from 0.95rem for better readability */
    }
}

/* Mobile portrait orientation */
@media (max-width: 767px) and (orientation: portrait) {
    .selection-buttons-container {
        gap: 15px; /* Equal spacing between all buttons */
        max-width: 280px; /* Constrain container width: (120px * 2) + 10px gap + padding = ~280px */
        padding: 0 15px; /* Add horizontal padding to center the grid */
        box-sizing: border-box;
    }
    
    .selection-image-button {
        min-height: 120px; /* Reduced from 140px */
        max-height: 160px; /* Reduced from 180px */
        max-width: 120px; /* Reduced from 135px - maintains 3/4 aspect ratio (120:160 = 3:4) */
        width: 120px; /* Fixed width to ensure consistent sizing */
        justify-self: center; /* Center each button in its grid cell */
    }
    
    .selection-image-button .button-text {
        padding: 8px; /* Reduced from 10px */
        font-size: 1rem; /* Reduced from 1.1rem */
    }
}

@media (min-width: 768px) and (min-height: 600px) {
    .selection-buttons-container {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Single row with 4 columns for desktop */
        gap: 12px;
        margin-bottom: 25px;
        max-width: 700px; /* Increased to accommodate 4 buttons in a row */
    }
    
    .selection-button {
        padding: 20px 15px;
        font-size: 1.3rem;
        min-height: 80px;
    }
    
    .selection-image-button {
        min-height: 140px; /* Good height for desktop single row */
        max-height: 180px;
        max-width: 150px; /* Adjusted for 4 buttons in a row */
    }
    
    .selection-image-button .button-text {
        padding: 10px;
        font-size: 1.1rem;
    }
}