/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Spring Theme (Graduation) Global Styles */
body {
    font-family: 'Yu Gothic', 'Meiryo', sans-serif;
    background-color: #ffe6f2;
    /* Light Pink Background */
    color: #333;
    /* Dark Grey Text */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

#game-container {
    width: 1024px;
    height: 1280px;
    /* Changed to 1280px height */
    background-color: #ffffff;
    /* White container */
    position: relative;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    /* Pinkish shadow */
    overflow: hidden;
    border: 2px solid #ffb7c5;
    /* Cherry blossom border */
}

/* Typography */
h1 {
    text-align: center;
    color: #ff69b4;
    /* Hot Pink */
    margin-top: 20px;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

/* Screen Management & Transitions */
.screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff0f5;
    /* Lavender Blush */
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    pointer-events: none;
    /* Disable interaction when hidden/fading */
    z-index: 0;
}

.hidden {
    display: none !important;
    /* Keep hidden for logic, but transitions rely on opacity */
}

.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Fade In/Out Classes for JS control if needed, but .active handles basic fade */
.fade-out {
    opacity: 0 !important;
}

.fade-in {
    opacity: 1 !important;
}

/* Main Screen Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    padding: 20px 40px;
    width: 100%;
    height: 60%;
    overflow-y: auto;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #ffb7c5;
    border-radius: 4px;
}

.girl-card {
    background-color: #fff;
    border: 2px solid #ffc0cb;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    /* No transform scale! */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.girl-card:hover {
    border-color: #ff69b4;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
    /* STOP SHAKING: Removed transform: scale */
}

.girl-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Completed Overlay */
.completed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff69b4;
    font-weight: bold;
    font-size: 1.2rem;
    border: 2px solid #ff69b4;
}

/* History Section */
#history-section {
    height: 30%;
    width: 100%;
    padding: 10px 40px;
    background-color: #fff5fa;
    border-top: 2px solid #ffb7c5;
}

#history-section h2 {
    color: #ff69b4;
    font-size: 1.2rem;
    margin: 5px 0 10px 0;
    text-align: left;
}

.history-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.history-item {
    min-width: 120px;
    height: 120px;
    border: 1px solid #ffc0cb;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: #fff;
}

.history-item:hover {
    border-color: #ff69b4;
}

.history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shooting Screen Layout */
#shooting-container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
}

#main-visual-area {
    flex: 3;
    position: relative;
    background-color: #000;
    /* Keep visual area dark for video contrast */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-right: 2px solid #ffb7c5;
}

#event-display-area,
#main-visual-area img,
#main-visual-area video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text Window */
#text-window {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb7c5;
    border-radius: 8px;
    padding: 15px 20px;
    z-index: 10;
    color: #333;
    min-height: 100px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#speaker-name {
    display: block;
    font-weight: bold;
    color: #ff69b4;
    font-size: 1rem;
    margin-bottom: 8px;
}

#dialogue-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #444;
}

/* Side Panel - Stable Layout */
#side-panel {
    flex: 1;
    background-color: #fff0f5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* Use space-between carefully or fixed layout */
    justify-content: flex-start;
    border-left: 1px solid #ffb7c5;
    gap: 20px;
    /* Consistent spacing */
}

/* Choice Buttons */
#choice-container {
    /* Fixed height or grow area */
    flex-grow: 1;
}

#choice-container h3 {
    color: #ff69b4;
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#choice-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.choice-btn {
    padding: 15px;
    background-color: #fff;
    border: 2px solid #ffb7c5;
    border-radius: 25px;
    /* Rounder for cute theme */
    color: #ff69b4;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.choice-btn:hover {
    background-color: #ffb7c5;
    color: #fff;
    transform: translateY(-2px);
}

/* Controls Area - Fixed at bottom */
#controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    /* Fix position at bottom of flex container */
    margin-top: auto;
}

.action-btn {
    background-color: transparent;
    border: 4px solid #ff3385;
    width: 100px;
    /* Increased width for text */
    height: 100px;
    /* Increased height */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 1.2rem;
    /* Adjusted font size */
    font-weight: bold;
    color: #ff3385;
    background-color: rgba(255, 255, 255, 0.2);
    transition: transform 0.1s, background-color 0.2s;
    box-shadow: 0 0 15px rgba(255, 51, 133, 0.3);
}

.action-btn:active {
    transform: scale(0.95);
    background-color: #ff3385;
    color: #fff;
    box-shadow: 0 0 5px rgba(255, 51, 133, 0.5);
}

.action-btn:hover {
    background-color: #fff0f5;
    transform: scale(1.02);
    /* Slight scale on click is ok, but not hover shake */
}

.nav-btn {
    background-color: #ffb7c5;
    color: #fff;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
}

.nav-btn:hover {
    background-color: #ff69b4;
}

/* Last Shot Preview - Absolute Position or Fixed Area */
/* To prevent shifting, let's make it overlay or fix its slot */
#last-shot-preview {
    /* Option 1: Absolute position at bottom right over controls? No, hides controls. */
    /* Option 2: Fixed slot in flex layout. */
    width: 100%;
    height: 120px;
    /* Fixed height */
    border: 2px solid #ffb7c5;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    /* Important: Use visibility hidden instead of display none to keep space? 
       Actually user wants it to pop in? 
       If it pops in, things move. 
       Let's put it ABOVE controls and make sure controls are pinned to bottom? 
       Flex layout: 
       [Choices (Grow)]
       [Preview (Fixed Height)]
       [Controls (Bottom)]
    */
    flex-shrink: 0;
    margin-bottom: 20px;
}

#last-shot-preview.hidden {
    /* If we want to reserve space: */
    /* visibility: hidden; display: block !important; */

    /* If user ok with empty box appearing. */
    /* Let's try reserving space so buttons don't jump */
    display: flex !important;
    /* Force display */
    visibility: hidden;
    border-color: transparent;
    /* Hide border when empty */
    background: transparent;
}

#last-shot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Camera Overlay */
#camera-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    padding: 20px;
}

.rec-indicator {
    position: absolute;
    top: 20px;
    left: 30px;
    color: #ff3b30;
    font-weight: bold;
    font-size: 1.2rem;
    animation: blink 2s infinite;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.6);
    border-style: solid;
    border-width: 0;
}

.top-left {
    top: 20px;
    left: 20px;
    border-top-width: 4px;
    border-left-width: 4px;
}

.top-right {
    top: 20px;
    right: 20px;
    border-top-width: 4px;
    border-right-width: 4px;
}

.bottom-left {
    bottom: 20px;
    left: 20px;
    border-bottom-width: 4px;
    border-left-width: 4px;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
    border-bottom-width: 4px;
    border-right-width: 4px;
}

.center-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 2rem;
}

/* Flash Effect */
#flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity 0.1s ease-out;
}

.flash-active {
    opacity: 1 !important;
}

/* End Screen */
#ending-image {
    max-width: 80%;
    max-height: 80%;
    margin-top: 20px;
}

/* Video Intro Overlay */
#video-intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    /* Above everything */
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

#video-intro-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#intro-message {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Side Panel Text Message (during video) */
#side-text-container {
    padding: 10px;
    /* Reduced padding */
    background-color: white;
    border: 2px dashed #ffb3d9;
    border-radius: 10px;
    text-align: center;
    color: #ff66b2;
    font-weight: bold;
    font-size: 1.1rem;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    /* Stack top to bottom */
    justify-content: flex-start;
    /* Start from top */
    align-items: center;
    min-height: 100px;
    /* Height for ~3 lines */
    gap: 5px;
    /* Minimal gap */
}

/* Reverted: Removed .side-message-item and animation */