/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Force hide scroll on html element ONLY when story page is active */
/* html.story-active {
    overflow: hidden !important;
} */

html, body {
    font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.6;
    min-height: 100vh; /* Restore original min-height */
    font-weight: 200;
    position: relative;
}

/* 新增：页面容器样式 */
#page-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    left: 0;
    transition: left 0.5s ease-in-out;
    background-color: #fff;
    z-index: 10;
}

/* 新增：页面容器左滑时的样式 */
#page-container.slide-left {
    left: -50%;
}

/* 新增：右侧菜单样式 */
#right-menu {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    background-color: transparent;
    z-index: 15;
    transition: right 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    font-weight: 200;
}

/* 新增：右侧菜单滑入时的样式 */
#right-menu.slide-in {
    right: 0;
}

/* 新增：菜单项样式 */
.menu-item {
    font-size: 32px;
    color: #333;
    cursor: default;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

/* 新增：菜单链接样式 */
.menu-link {
    font-size: inherit;
    font-weight: inherit;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-link:hover {
    color: #888;
}

/* Header and Logo styles */
header {
    padding: 20px;
    width: 100%;
}

/* Unified logo and back button styles */
.logo, .back-button {
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.logo:hover, .back-button:hover {
    color: #888;
}

/* Main content area (Homepage) */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Center text style (Homepage) */
.center-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-text a {
    font-size: 32px;
    font-weight: 200;
    letter-spacing: 2px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.center-text a:hover {
    color: #888;
}

/* Second page styles - using CSS Grid */
.second-page {
    display: grid;
    grid-template-rows: auto 1fr auto 1fr auto 1fr;
    grid-template-columns: 100%;
    height: 100vh;
    align-items: start;
    justify-items: center;
    animation: slideInRight 0.5s forwards ease-in-out;
}

.second-page .second-header {
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
}

.question {
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.back-button {
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.second-page .video-container {
    grid-row: 3 / 4;
    width: calc(50vh * (9/5));
    height: 50vh;
    margin: 0;
    overflow: hidden;
    background-color: #fff;
    position: relative;
}

.video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;

    /* Control horizontal position using transform */
    transition: transform 2s ease;
    transform: translateX(100%); /* Default position: off-screen to the right */
}

.video-player.current {
    transform: translateX(0); /* Current video: centered */
    z-index: 1;
}

.video-player.slide-out {
    transform: translateX(-100%); /* Old video slides out to the left */
}

.video-player.next {
    transform: translateX(100%); /* New video slides in from the right */
    z-index: 0;
}

.second-page .buttons {
    grid-row: 5 / 6;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 0;
    padding: 0;
    margin-bottom: 20px;
}

/* Mode button base styles */
.mode-btn {
    background: none;
    border: none;
    font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px 6px;
    border-radius: 0;
}

/* Selected mode button style */
.mode-btn.active {
    background-color: #333;
    color: white;
}

/* Generate button style */
.generate-btn {
    background: none;
    border: none;
    font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #333;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 0;
    transition: all 0.3s ease;
}

/* Active generate button style */
.generate-btn.active {
    background-color: #333;
    color: white;
}

/* Prevent hover effect on active buttons */
.generate-btn:hover:not(.active), .mode-btn:hover:not(.active) {
    color: #888;
}

/* Responsive design: for mobile devices (e.g., width < 768px) */
@media (max-width: 767px) {
    body {
        overflow-y: auto; /* Allow vertical scrolling on mobile if content overflows */
    }

    .second-page {
        min-height: calc(100vw * 0.6 + 223px); /* Set minimum height based on width */
    }

    /* Question text shortening is now handled by JavaScript */
    .second-page .second-header .question {
        /* Keep general .question styles if needed */
    }

    /* Adjust video container width to fit screen, maintaining 9:5 aspect ratio */
    .second-page .video-container {
        width: 100%; /* Full screen width */
        max-width: calc(100vw); /* Slight margin */
        height: calc((100vw) * (5/9)); /* Calculate height based on width for 9:5 ratio */
        /* If height priority is preferred: */
        /* max-height: 42vh; */
        /* width: calc(42vh * (9/5)); */
        /* max-width: 100%; */ /* Ensure it doesn't exceed screen width */
    }

    /* Stack buttons vertically */
    .second-page .buttons {
        flex-direction: column; /* Vertical layout */
        gap: 15px; /* Spacing between buttons on mobile */
        margin-top: 0;
        margin-bottom: 0;
        align-items: center; /* Center buttons horizontally */
    }

    .mode-btn,
    .generate-btn {
        font-size: 18px; /* Adjust button font size if needed */
        padding: 8px 16px; /* Adjust button padding */
    }

    /* --- REMOVED Story Page Mobile Adjustments --- */
    /* .story-page { ... } */
    /* .story-header { ... } */
    /* #story-container { ... } */
    /* .slide { ... } */
    /* .slide-description { ... } */
    /* .story-nav-container { ... } */
    /* .nav-arrow { ... } */
}

/* --- Story Page Styles --- */
.story-page {
    display: grid; /* Use Grid Layout */
    grid-template-rows: auto 1fr auto; /* Header(auto), Content(fill), Footer(auto) */
    /* Removed height: 100dvh and overflow: hidden to allow scrolling */
    min-height: 100vh; /* Ensure it still takes at least full viewport height */
    animation: slideInRight 0.5s forwards ease-in-out; 
}

.story-header {
    grid-row: 1 / 2; /* Place in first row */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center content */
    padding: 20px 20px 0 20px; /* Keep adjusted padding */
    box-sizing: border-box;
}

#story-container {
    grid-row: 2 / 3; /* Place in second row */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 0;
}

#slides-wrapper {
    width: 90%;
    height: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
}

#slides {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

.slide {
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column; /* Stack image container and description */
    justify-content: space-between; /* Push image container up, description down */
    align-items: center;
    /* Removed gap */
    padding: 0 20px; /* Adjust padding if needed */
}

/* New container for images */
.slide-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Allow container to grow but not excessively */
    flex-grow: 1;
    /* Limit height to prevent pushing description too far down */
    max-height: calc(100% - 60px); /* Example: leave space for description */
    overflow: hidden;
    gap: 0; /* Keep slide-1 images together */
}

.slide-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer !important; /* Force pointer cursor */
}

/* Style for slide 1 images (side-by-side) */
.slide-1 > .slide-image-container > img {
    max-width: 50%; /* Ensure side-by-side */
}

/* New style for description text */
.slide-description {
    padding: 10px 0; /* Vertical padding, no horizontal */
    text-align: center;
    font-size: 14px;
    color: #555;
    font-weight: 200;
    width: 90%; /* Limit width */
    max-width: 600px; /* Max width for readability */
    line-height: 1.4;
    flex-shrink: 0; /* Prevent shrinking */
    margin-bottom: 5px; /* Space above nav arrows */
}

/* Remove redundant/conflicting styles */
/* .slide img { ... } */ /* Moved to .slide-image-container img */
/* .slide-1 img { ... } */ /* Replaced by more specific selector */
/* .slide-1 { gap: 0; } */ /* Gap now 0 on image container */

/* 修改：导航容器样式 - 使用 Grid 布局，auto行高，padding包含safe area */
.story-nav-container {
    grid-row: 3 / 4; /* Place in third row */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center content */
    /* Padding: Top(0) Sides(20px) Bottom(20px + safe area) */
    padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    box-sizing: border-box;
}

.nav-arrow {
    font-size: 24px;
    font-weight: 200;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 10px; /* Keep padding around arrow */
    transition: color 0.3s ease;
}

.nav-arrow:hover {
    color: #888;
}

.nav-arrow.hidden {
    visibility: hidden;
}

/* --- Page Transition Animations --- */

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

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

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

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; } /* Start invisible and off-screen */
    to   { transform: translateX(0); opacity: 1; } /* End visible and in position */
}

/* 修改：明确 slide-out-left 作用于 body */
body.slide-out-left {
    animation: slideOutLeft 0.5s forwards ease-in-out;
    pointer-events: none; /* 防止动画期间交互 */
}

.slide-in-right {
    animation: slideInRight 0.5s forwards ease-in-out;
}

.slide-out-right {
    animation: slideOutRight 0.5s forwards ease-in-out;
    pointer-events: none; /* 防止动画期间交互 */
}

/* 修改：将 slideInLeft 应用到 #page-container */
#page-container.page-slide-in-left {
    animation: slideInLeft 0.5s forwards ease-in-out;
    /* No need to set opacity/visibility here, animation handles it */
}

/* Style for clickable story images was removed, now handled by .slide-image-container img */
/* #link-206-img, ... { cursor: pointer; } */

/* Style for clickable story images */
#link-206-img,
#link-298-img,
#link-kino-img,
#link-garden-img {
    cursor: default; /* Remove cursor rule here, handled by container */
}