/* --- CSS VARIABLES & THEME --- */
:root {
    --bg-blue: #a3c4f3;
    --stripe-blue: #8eb9f5;
    --paper-white: #ffffff;
    --paper-pink: #fbc4ab;
    --booth-yellow: #ffed86;
    --header-green: #9de2af;
    --sketch-black: #1a1a1a;
    --sketch-white: #ffffff;
    --sketch-accent: #2ecc71; 
}

/* --- BASE STYLES --- */
body {
    margin: 0;
    font-family: 'Gaegu', cursive; 
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.hidden { display: none !important; }

/* --- 1. LANDING PAGE (SCRAPBOOK THEME) --- */
.scrapbook-container {
    width: 450px;
    height: 700px;
    background-color: var(--bg-blue);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 35px, var(--stripe-blue) 35px, var(--stripe-blue) 70px);
    border: 12px solid white;
    border-radius: 5px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.header-banner {
    background-color: var(--header-green);
    margin: 10px;
    padding: 20px 10px;
    border-radius: 80px 80px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid rgba(0,0,0,0.05);
    z-index: 10;
}

.title-block span {
    background: white;
    font-family: 'Permanent Marker', cursive;
    font-size: 2.5rem;
    padding: 2px 12px;
    margin: 3px;
    display: inline-block;
    border: 3px solid #000;
}

/* Authentic Tilted Cut-outs */
.title-block span:nth-child(odd) { transform: rotate(-4deg); }
.title-block span:nth-child(even) { transform: rotate(3deg); }

/* Main Content Area (Absolute Positioning Parent) */
.main-content-area {
    position: relative;
    flex-grow: 1;
}

/* Tagline "Sticker" */
.tagline-sticker {
    position: absolute;
    top: 20px;
    left: 40px;
    background: white;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: bold;
    transform: rotate(-8deg);
    border: 1px solid #ddd;
    z-index: 15;
}

/* Scrapbook Paper Cards */
.scrapbook-sticker {
    position: absolute;
    background: var(--paper-pink);
    padding: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    z-index: 5;
}

.inner-paper {
    background: white;
    padding: 10px;
    text-align: center;
    border: 1px solid #eee;
}

/* Position the Coin Card on the left */
.coin-card {
    top: 100px;
    left: 20px;
    width: 110px;
    transform: rotate(-2deg);
    cursor: pointer;
    transition: 0.2s;
}
.coin-card:hover { transform: rotate(-2deg) scale(1.05); }

.coin-hole {
    width: 30px;
    height: 50px;
    border: 4px solid #000;
    border-radius: 15px;
    margin: 10px auto;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Position the Info Card in the middle */
.info-card {
    top: 160px;
    left: 150px;
    width: 80px;
    transform: rotate(5deg);
}

.film-strip-graphic span {
    display: block;
    width: 20px;
    height: 10px;
    border: 2px solid #000;
    margin: 2px auto;
}

/* The Booth Illustration "Sticker" on the right */
.booth-sticker {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 180px;
    height: 300px;
    background: var(--booth-yellow);
    border: 3px solid #333;
    border-radius: 5px;
    overflow: hidden;
}

.booth-roof { height: 50px; background: #000; }

.checker-curtain {
    position: absolute;
    right: 0; top: 50px; bottom: 0; width: 50%;
    background-color: #fff;
    background-image: repeating-linear-gradient(45deg, var(--header-green) 25%, transparent 25%, transparent 75%, var(--header-green) 75%, var(--header-green)), 
                      repeating-linear-gradient(45deg, var(--header-green) 25%, #fff 25%, #fff 75%, var(--header-green) 75%, var(--header-green));
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    border-left: 2px solid #333;
}

.smile-sign {
    background: white;
    border: 2px solid #000;
    padding: 3px 8px;
    position: absolute;
    top: 80px; left: 10px;
    transform: rotate(-5deg);
    font-weight: bold;
}

/* --- 2. CAMERA PAGE (SKETCH THEME) --- */
.sketch-theme {
    background-color: var(--sketch-white);
    width: 95vw;
    max-width: 850px;
    padding: 30px;
    border: 5px solid var(--sketch-black);
}

.sketch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.sketch-viewfinder {
    width: 450px;
    aspect-ratio: 1/1;
    border: 4px solid var(--sketch-black);
    padding: 10px;
    background: white;
    position: relative;
}

video { width: 100%; height: 100%; object-fit: cover; background: #000;}

#countdown {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    color: white;
    font-family: 'Permanent Marker', cursive;
    z-index: 20;
}

.status-light {
    width: 15px; height: 15px;
    border: 2px solid var(--sketch-black);
    border-radius: 50%;
    background: #ff4757;
}
.status-light.ready { background: var(--sketch-accent); }

/* --- 3. PHOTOSTRIP GALLERY --- */
.photostrip-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    padding: 20px 0;
}

.photostrip {
    background: white;
    padding: 12px;
    border: 3px solid var(--sketch-black);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 150px;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
    position: relative;
}

.photostrip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

.strip-footer {
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 0.7rem;
    padding-top: 5px;
    border-top: 1px dashed #ccc;
}

.delete-btn {
    position: absolute;
    top: -10px; right: -10px;
    background: #ff4757;
    color: white;
    border: 2px solid var(--sketch-black);
    border-radius: 50%;
    width: 25px; height: 25px;
    cursor: pointer;
}
/* Custom styling for the Back Button to make it look handwritten */
.handwritten {
    font-family: 'Gaegu', cursive; /* Using the handwritten font from your head */
    font-weight: 700;
    font-size: 1.5rem;
    color: #1a1a1a;
    background: #fff;
    border: 3px solid #000; /* Matching the sketch-theme borders */
    padding: 5px 20px;
    cursor: pointer;
    border-radius: 5px;
    
    /* These properties give it the "imperfection" of handwriting */
    letter-spacing: 2px;
    transform: rotate(-2deg); /* Slight tilt like the letters in your title */
    transition: transform 0.2s ease;
    
    /* Remove default button shading */
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    outline: none;
}

.handwritten:hover {
    transform: rotate(1deg) scale(1.05); /* Interactive feel */
    background-color: #f9f9f9;
}

.handwritten:active {
    transform: scale(0.95);
}
/* Custom Handwritten Style for the Back Button */
.sketch-exit {
    /* Font from your HTML head */
    font-family: 'Gaegu', cursive;
    font-weight: 700;
    font-size: 1.6rem;
    color: #1a1a1a;
    
    /* Sticker Look */
    background: #ffffff;
    border: 3px solid #000000;
    padding: 4px 18px;
    cursor: pointer;
    border-radius: 4px;
    
    /* Handwriting Imperfections */
    letter-spacing: 1px;
    transform: rotate(-1.5deg);
    box-shadow: 3px 3px 0px rgba(0,0,0,0.15);
    
    /* Reset default button styles */
    outline: none;
    -webkit-appearance: none;
}

.sketch-exit:hover {
    transform: rotate(1deg) scale(1.05);
    background-color: #fdfdfd;
}

.sketch-exit:active {
    transform: scale(0.95);
}
/* Unified Sketch-Style Buttons for Camera Page */
.sketch-btn {
    /* Use the handwritten font style from your project head */
    font-family: 'Gaegu', cursive;
    font-weight: 700;
    font-size: 1.4rem;
    
    /* Transparent background with a thick black hand-drawn border */
    background: #ffffff;
    border: 3px solid #000000;
    padding: 10px 25px;
    cursor: pointer;
    border-radius: 4px;
    
    /* Sticker-like tilt and shadow for the "cut-out" effect */
    transform: rotate(1.5deg);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.15);
    
    /* Smooth interaction and reset default browser styles */
    transition: transform 0.1s ease, background-color 0.2s;
    outline: none;
}

/* Hover and Active States for both buttons */
/* Base Style for both buttons */
.sketch-btn {
    font-family: 'Gaegu', cursive;
    font-weight: 700;
    font-size: 1.4rem;
    background: #ffffff;
    border: 3px solid #000000;
    padding: 10px 25px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, background-color 0.2s;
    outline: none;
}

/* START SESSION: Tilted to the Left */
#snap-btn {
    transform: rotate(-3deg);
}

/* CLEAR STRIPS: Tilted to the Right */
#clear-btn {
    transform: rotate(3deg);
}

/* Hover effects: Straighten them out slightly when hovered */
#snap-btn:hover {
    transform: scale(1.05) rotate(-1deg);
    background-color: #f8f8f8;
}

#clear-btn:hover {
    transform: scale(1.05) rotate(1deg);
    background-color: #f8f8f8;
}

/* Active state for both */
.sketch-btn:active {
    transform: scale(0.95);
}

/* Disabled state during the 4-shot sequence */
.sketch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #eee;
    transform: rotate(0deg); /* Flatten when disabled */
}
/* Container to center the buttons horizontally */
.viewfinder-ui {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    gap: 20px;               /* Space between buttons */
    margin-top: 20px;        /* Spacing from the video above */
    width: 100%;  
               /* Ensure it takes full width of the viewfinder */
}
/* Container to stack Back and Filter at the top */
.sketch-top-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between Back button and Filter */
    width: 100%;
    margin-bottom: 20px;
}

/* Larger Filter Toggle styling */
.filter-toggle-sketch {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: 'Gaegu', cursive;
    font-size: 2rem; /* Significantly bigger text */
    font-weight: 700;
}

/* Larger handwritten-style dropdown */
.sketch-select {
    font-family: 'Gaegu', cursive;
    font-size: 1.8rem;
    padding: 5px 15px;
    border: 3px solid #000000;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transform: rotate(1deg); /* Slight tilt to match stickers */
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
}

/* Ensure the Back button remains styled correctly */
.sketch-exit {
    font-family: 'Gaegu', cursive;
    font-weight: 700;
    font-size: 1.6rem;
    padding: 4px 18px;
    border: 3px solid #000;
    background: #fff;
    cursor: pointer;
    transform: rotate(-1.5deg);
}
/* --- FOOTER LAYOUT --- */
.sketch-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

/* --- INSTRUCTIONS: SEPARATE BOXES --- */
.sketch-instructions-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.instr-step-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 3px solid #000;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    font-family: 'Gaegu', cursive;
    font-weight: 700;
}



.step-num {
    font-size: 2rem;
    border: 2px solid #000;
    padding: 0 10px;
    min-width: 30px;
    text-align: center;
}

/* --- HARDWARE: SEPARATE BOXES --- */
.sketch-hardware-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.hardware-item-box {
    background: #fff;
    border: 3px solid #000;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    transform: rotate(2deg);
}

.hardware-item-box:nth-child(even) { transform: rotate(-2deg); }

.status-light {
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #ff4757; /* Red */
    margin-bottom: 5px;
}

.status-light.ready { background: #2ecc71; } /* Green when initCamera runs */

.hardware-slot {
    width: 5px;
    height: 40px;
    background: #000;
}

.hardware-box {
    width: 35px;
    height: 35px;
    border: 2px solid #000;
}
/* Centering the gallery heading */
.gallery-section-sketch h2 {
    text-align: center;      /* Centers the text */
    font-family: 'Permanent Marker', cursive; /* Matches the bold titles */
    font-size: 2.2rem;       /* Makes it clearly visible */
    margin-bottom: 30px;     /* Space above the photostrips */
    text-transform: uppercase;
    letter-spacing: 2px;     /* Adds to the handwritten look */
    
    /* Optional: Add a slight tilt to match the stickers */
    transform: rotate(-1deg); 
}

/* Ensuring the gallery container itself is centered */
.photostrip-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center; /* Centers the photostrips horizontally */
    padding: 20px 0;
    width: 100%;
}
.download-btn {
    margin-top: 10px;
    background: #fff;
    border: 2px solid #000;
    font-family: 'Gaegu', cursive;
    font-weight: 700;
    font-size: 1rem;
    padding: 5px 10px;
    cursor: pointer;
    transform: rotate(-1deg);
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    transition: 0.2s;
}

.download-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05) rotate(0deg);
}
/* --- MOBILE RESPONSIVE OVERRIDES --- */
@media (max-width: 600px) {
    /* 1. Scale the Scrapbook Container */
    .scrapbook-container {
        width: 95vw; /* Use 95% of the phone's width */
        height: 90vh; /* Adjust height for mobile screens */
        border-width: 8px; /* Slightly thinner border for small screens */
    }

    /* 2. Scale the Camera Page */
    .sketch-theme {
        width: 95vw;
        padding: 15px;
    }

    .sketch-viewfinder {
        width: 100%; /* Box fills the phone width */
        max-width: 350px;
        aspect-ratio: 1/1;
    }

    /* 3. Adjust the "Eye Level" Position for Mobile */
    .eye-level-marker {
        left: 5px; /* Move it inside the frame or closer so it doesn't hide */
        top: -25px; /* Place it above the frame on mobile */
        text-align: left;
    }

    /* 4. Center the instruction stickers */
    .instr-step-box {
        width: 100% !important;
        font-size: 1.1rem;
    }

    /* 5. Center and stack the Filter/Color options */
    .filter-toggle-sketch {
        flex-direction: column;
        gap: 10px;
        font-size: 1.5rem;
    }

    /* 6. Fix the Photostrip Gallery */
    .photostrip {
        width: 140px; /* Slimmer strips for mobile viewing */
    }
}
@media (max-width: 600px) {
   @media (max-width: 600px) {
    /* 1. Ensure the main wrapper doesn't overflow */
    .sketch-wrapper {
        width: 95vw;
        padding: 10px;
        margin: 0 auto;
        overflow-x: hidden; /* Prevent horizontal scrolling */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 2. Scale the viewfinder so it fits the mobile frame */
    .sketch-viewfinder {
        width: 100% !important;
        max-width: 320px; /* Smaller for mobile screens */
        margin: 0 auto;
        padding: 5px;
    }

    /* 3. Fix the instruction boxes that are cutting off */
    .instr-step-box {
        width: 90% !important; /* Bring them inside the main frame */
        margin: 5px auto;
        font-size: 0.9rem; /* Smaller text for better fit */
        padding: 8px;
    }

    /* 4. Fix the buttons overlapping the border */
    .viewfinder-ui {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 0 5px;
    }

    .sketch-btn {
        font-size: 0.9rem;
        padding: 8px 10px;
        flex: 1; /* Make buttons share the space equally */
    }

    /* 5. Center the Filter and READY indicators */
    .filter-toggle-sketch, .hardware-item-box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 10px 0;
    }
}