/* --- CHAIIWALA BRAND TYPOGRAPHY --- */
@font-face {
    font-family: 'MyriadPro';
    src: url('../assets/MYRIADPRO-REGULAR.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MyriadPro';
    src: url('../assets/MYRIADPRO-SEMIBOLD.OTF') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MyriadPro';
    src: url('../assets/MYRIADPRO-BOLD.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Centaur';
    src: url('../assets/CentaurMTStd-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- CHAIIWALA BRAND PALETTE --- */
:root {
    --karak-beige:   #e3dbd4;
    --karak-beige-2: #f1ece7;
    --chaii-brown:   #937264;
    --chaii-brown-d: #6b4f43;
    --chaii-brown-x: #3a2620;
    --paper:         #ffffff;
}

/* --- FUNDAMENTALS & RESET --- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; font-family: 'MyriadPro', sans-serif; outline: none;}

/* --- FORCE MYRIADPRO ON ALL ELEMENTS (browsers ignore * for form elements) --- */
button, input, select, textarea, label, h1, h2, h3, h4, h5, h6, p, span, a, div, li, td, th {
    font-family: 'MyriadPro', sans-serif !important;
}

body, html { 
    width: 100%; height: 100%; overflow: hidden; 
    background-color: #FFF8F0; 
    background-image: url('../assets/images/mainbackgroundpicture.png'); 
    background-size: 108% 100%; 
    background-position: center; 
    background-repeat: no-repeat;
}

#brightness-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); pointer-events: none; z-index: 9999; }

/* --- SMOOTH ANIMATIONS --- */
@keyframes dropDownBounce {
  0% { transform: translateY(-200px); opacity: 0; }
  50% { transform: translateY(20px); opacity: 1; }
  75% { transform: translateY(-10px); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes bubblePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes galleryIn {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- BUTTON & LOGO STYLING --- */
.btn { border: none; border-radius: 20px; font-size: 2rem; font-weight: bold; cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,0.2); transition: transform 0.1s, box-shadow 0.1s; display: flex; align-items: center; justify-content: center; gap: 10px;}
.btn:active { transform: translateY(8px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.bubble-animate:active { animation: bubblePop 0.3s ease-out; }
.app-logo { max-height: 60px; display: block; margin: 0 auto; margin-bottom: -15px;}

/* --- PAGE MANAGEMENT --- */
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; }
.page.active { display: flex; }

/* --- 1. HOME SCREEN --- */
.header-area { position: relative; width: 100%; top: 8%; text-align: center; }

/* --- FLOATING HOME PICTURES --- */
/* ========================================== */
/* --- UNIQUE ROUGH-BORDER HOME PICTURES ---   */
/* ========================================== */
.home-deco {
    position: absolute;
    border-radius: 18px;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
    background: var(--paper);
    padding: 8px;
    box-shadow: 0 16px 36px rgba(58,38,32,0.28);
    transition: transform 0.3s ease;
}

/* Override the legacy chunky black box-shadows on each deco tile */
#deco-top-left,
#deco-mid-left,
#deco-bot-left,
#deco-bot-right,
#deco-top-right,
#deco-corner-left,
#deco-corner-right {
    box-shadow: 0 16px 36px rgba(58,38,32,0.28) !important;
    background: var(--paper) !important;
    padding: 8px !important;
    border-radius: 18px !important;
}

/* THE FIX: We use multiple messy shadows to make unique, crayon-like outlines for each image! */

/* Pos 1: Top-Left (On the left till station counter) */
#deco-top-left { 
    top: 2%; 
    left: 25px; 
    width: 200px; 
    height: 200px; 
    transform: rotate(-10deg); 
    
    /* Unique rough crayon outline! */
    box-shadow: 
        0 0 0 5px rgba(255, 255, 255, 0.9), /* Thin base white border */
        10px 10px 15px rgba(0, 0, 0, 0.8), /* Soft, large blended shadow for "merging" */
        -2px -2px 0 3px rgba(0, 0, 0, 1), /* Irregular sketch line top-left */
        3px 3px 0 2px rgba(0, 0, 0, 0.9); /* Irregular sketch line bottom-right */
}

/* Pos 2: Mid-Left (Floating below the counter) */
#deco-mid-left { 
    top: 40%; 
    left: 3%; 
    width: 200px; 
    height: 200px; 
    transform: rotate(8deg); 
    
    /* A slightly different rough outline effect! */
    box-shadow: 
        0 0 0 6px rgba(255, 255, 255, 0.8),
        15px 15px 25px rgba(0, 0, 0, 0.7), /* Extra soft blending shadow */
        1px 1px 0 5px rgba(0, 0, 0, 0.9),  /* Messier crayon texture */
        -3px 3px 0 3px rgba(0, 0, 0, 1);    /* Another uneven line */
}

/* Pictures perfectly placed over the two POS screens! */

/* Pos 3: Bottom-Left (Large picture perfectly on the left till screen) */
#deco-bot-left { 
    bottom: 6%; 
    left: 21%; 
    width: 200px; 
    height: 200px; 
    transform: rotate(-6deg); 
    
    /* Unique screen rough outline! */
    box-shadow: 
        0 0 0 5px rgba(255, 255, 255, 1),
        8px 8px 12px rgba(0, 0, 0, 0.9),   /* Sharp, textured screen bezel shadow */
        -2px -2px 0 2px rgba(0, 0, 0, 0.8); /* Uneven screen line */
}

/* Pos 4: Bottom-Right (Large picture perfectly on the right till screen) */
#deco-bot-right { 
    bottom: 5%; 
    right: 26%; 
    width: 200px; 
    height: 200px; 
    transform: rotate(4deg); 
    
    /* A final, completely unique rough-crayon border style! */
    box-shadow: 
        0 0 0 4px rgba(255, 255, 255, 1),
        6px 6px 15px rgba(0, 0, 0, 0.95),  /* High contrast sketch shadow */
        3px -3px 0 4px rgba(0, 0, 0, 0.8), /* Irregular line style on top-right */
        -2px 3px 0 2px rgba(0, 0, 0, 0.9); /* And bottom-left */
}

/* Pos 5: Top-Right (Above the Settings button) */
#deco-top-right {
    top: 2%;
    right: 4%;
    width: 170px;
    height: 170px;
    transform: rotate(9deg);
    
    /* Unique rough crayon outline! */
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.9),
        -8px 10px 15px rgba(0, 0, 0, 0.7), /* Shadow pushes down and left */
        2px -2px 0 3px rgba(0, 0, 0, 0.8),
        -3px 3px 0 2px rgba(0, 0, 0, 1);
}

/* Pos 6: Bottom-Left Corner (Tucked by the printer) */
#deco-corner-left {
    bottom: -15px; /* Pulls it slightly off-screen for a scattered look! */
    left: -15px;
    width: 200px;
    height: 200px;
    transform: rotate(12deg);
    
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.85),
        10px -10px 20px rgba(0, 0, 0, 0.8),
        -2px 3px 0 3px rgba(0, 0, 0, 0.9);
}

/* Pos 7: Bottom-Right Corner (Tucked by the jars) */
#deco-corner-right {
    bottom: -15px; /* Pulls it slightly off-screen! */
    right: -15px;
    width: 200px;
    height: 200px;
    transform: rotate(-15deg);
    
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.9),
        -10px -10px 20px rgba(0, 0, 0, 0.8),
        3px 2px 0 3px rgba(0, 0, 0, 0.9);
}

/* --- HOME TITLE: chaiiwala logo + game name --- */
.header-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: dropDownBounce 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.brand-logo {
    width: clamp(220px, 38vw, 360px);
    height: auto;
    background: rgba(255,255,255,0.92);
    padding: 18px 28px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(58,38,32,0.25);
    /* Logo guidelines: never recolour, distort or shadow the mark itself.
       The shadow is on the white panel behind it. */
}

.game-name {
    font-family: 'MyriadPro', sans-serif !important;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 64px);
    text-transform: lowercase;
    letter-spacing: -0.04em;
    color: var(--paper);
    background: var(--chaii-brown-x);
    padding: 6px 24px;
    border-radius: 12px;
    line-height: 1;
    margin-top: -8px;
    box-shadow: 0 8px 22px rgba(58,38,32,0.3);
}

/* Legacy .title — fallback hidden if anything still references it */
.title { display: none; }
.main-buttons { 
    position: absolute;
    /* THE FIX: Changed from 8% to 4% to push it much further to the right edge */
    z-index: 10;
    right: 4%; 
    top: 50%;  
    transform: translateY(-50%); 
    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    
    /* THE FIX: Increased the gap from 25px to 45px for more breathing room */
    gap: 45px; 
    
    /* THE FIX: Shrunk the overall container from 340px to 280px so PLAY isn't so huge */
    width: 280px; 

    
}

.main-buttons .btn {
    justify-content: center;
}

.btn-play { 
    width: 100%; 
    /* THE FIX: Reduced padding and font size to make it a more normal size */
    padding: 25px 0; 
    font-size: 3rem; 
    border-radius: 40px; 
}

.btn-side { 
    /* THE FIX: Set to 70% so they stay proportionally smaller than the PLAY button */
    width: 70%; 
    padding: 15px 0; 
    font-size: 1.8rem; 
}s

.btn-side { 
    width: 60%; /* Shrinks Settings and Leave to be much smaller than PLAY */
    padding: 15px 0; 
    font-size: 1.8rem; 
}
.btn-back { 
    position: absolute; 
    top: 40px; 
    left: 30px; 
    background: white; 
    color: #333;
    border: 6px solid #333; 
    border-radius: 20px; 
    padding: 15px 25px; 
    font-size: 1.8rem; 
    font-weight: bold; 
    cursor: pointer; 
    z-index: 100; 
    box-shadow: 0 10px 0 #333; 
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-back:active {
    transform: translateY(8px);
    box-shadow: 0 2px 0 #333;
}

/* --- 2. SETTINGS / LEAVE --- */
#page-settings { 
    background-image: url('../assets/images/mainbackgroundpicture.png'); 
    background-size: 106% 106%; 
    background-position: center; 
    background-repeat: no-repeat;
    background-color: #118AB2; 
    
}

.content-box { 
    background: #f5cb58; 
    padding: 40px; /* Slightly reduced padding so it fits nicely on smaller screens */
    border-radius: 30px;    
    width: 90%; /* Automatically scales based on the window! */
    max-width: 600px; /* Stops it from getting too wide on giant monitors */
    
    /* THE FIX: 'margin: auto' combined with your flexbox layout perfectly centers it! */
    margin: auto; 
    
    /* THE FIX: Ensures the box never grows taller than the screen, adding a scrollbar if needed */
    max-height: 85vh;
    overflow-y: auto;
    
    border: 6px solid #333; 
    box-shadow: 0 12px 0 #333, 0 20px 20px rgba(0,0,0,0.4); 
}

/* Make sure to completely DELETE the old `#page-settings .content-box` rule 
   that had the "margin: 140px auto 0 auto;" in it! */

/* Pushes the settings box down so it doesn't hide the background text */
#page-settings .content-box {
    margin: 140px auto 0 auto; 
}

/* --- SETTINGS NEW BUTTONS --- */
.settings-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    align-items: center;
}

.btn-action {
    width: 85%;
    padding: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 20px;
    border: 4px solid #333;
    cursor: pointer;
    box-shadow: 0 6px 0 #333;
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-action:active {
    transform: translateY(6px);
    box-shadow: 0 0px 0 #333;
}

.btn-fullscreen { background-color: #06D6A0; color: #333; }
.btn-reset { background-color: #EF476F; color: white; border-color: #333; }
.setting-item { margin: 25px 0; }
.setting-item label { font-size: 2rem; display: block; margin-bottom: 20px; font-weight: bold; color: #333; }

/* THE FIX: Centers the sliders perfectly */
input[type=range] { 
    width: 60%; 
    transform: scale(1.5); 
    transform-origin: center center; 
    cursor: pointer; 
    display: block; 
    margin: 15px auto 0 auto; 
}

.text-center { text-align: center; }

/* --- 3. SELECTION PAGE --- */
#page-selection {
    background-image: url('../assets/images/mainbackgroundpicture.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--karak-beige);
    padding-top: 110px;   /* leave room for the floating Back / Live Camera buttons */
    padding-bottom: 20px;
    min-height: 0;
}

.page-leave { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.page-coloring { background-color: #FFF8F0; }
.selection-title {
    color: var(--paper);
    font-family: 'MyriadPro', sans-serif !important;
    font-weight: 700;
    font-size: 2.8rem;
    text-transform: lowercase;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 25px auto 0;
    padding: 14px 36px;
    background-color: var(--chaii-brown-x);
    border-radius: 14px;
    width: fit-content;
    box-shadow: 0 10px 28px rgba(58,38,32,0.3);
}
.gallery {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    align-content: center;
    justify-content: start;
    gap: 24px;
    padding: 18px 40px 30px 40px;
    margin-top: 0;
    flex: 1 1 auto;
    min-height: 0;          /* allow grid to shrink inside flex parent */
    overflow-x: auto;
    overflow-y: hidden;
}

.gallery::-webkit-scrollbar { height: 15px; }
.gallery::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 10px; }
.gallery::-webkit-scrollbar-thumb { background: white; border-radius: 10px; border: 3px solid #333; }

.thumb {
    /* size from row height so two rows fit any viewport */
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    max-height: min(300px, calc((100vh - 220px) / 2));
    object-fit: cover;
    cursor: pointer;
    background: var(--paper);
    border: 2px solid var(--chaii-brown);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(58,38,32,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.thumb:hover {
    border-color: var(--chaii-brown-x);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 24px 50px rgba(58,38,32,0.35);
}

.thumb:active {
    transform: translateY(2px) scale(1);
    box-shadow: 0 10px 24px rgba(58,38,32,0.25);
}

/* --- 4. COLOURING PAGE --- */
.canvas-container { flex-grow: 1; position: relative; width: 100%; background: white; display: flex; justify-content: center; align-items: center; overflow: hidden; margin-top: 0; border-bottom: 2px solid #ddd; }
.zoom-wrapper { position: absolute; width: 100%; height: 100%; transform-origin: 0 0; display: flex; justify-content: center; align-items: center; }
#drawing-canvas { position: absolute; z-index: 1; touch-action: none; background: white; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
#coloring-template { position: absolute; z-index: 2; pointer-events: none; max-width: 100%; max-height: 100%; display: block; mix-blend-mode: multiply; }

.zoom-controls { 
    position: absolute; 
    right: 20px; 
    top: 200px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 100; 
}
.zoom-btn { background: rgba(255,255,255,0.8); border: 3px solid #E45E25; color: #E45E25; width: 60px; height: 60px; border-radius: 50%; font-size: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.toolbar-small { height: 80px; background: #333; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; z-index: 10; border-top: 2px solid #555;}
.tools-left, .tools-right { display: flex; gap: 10px; align-items: center; }
.tool-btn { width: 55px; height: 55px; font-size: 1.8rem; border-radius: 10px; border: 3px solid transparent; background: #555; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.3); }
.tool-btn.active { border-color: #06D6A0; background: #777; transform: translateY(-3px); }
.color-swatch { width: 50px; height: 50px; border-radius: 50%; border: 4px solid white; cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
.color-swatch.active { transform: scale(1.1); border-color: #06D6A0; box-shadow: 0 0 10px white; }

/* --- 5. MODALS (TOOLS & COLORS) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 2000; padding: 20px;}
.modal-overlay.active { display: flex; }
.modal-content { background: white; padding: 30px; border-radius: 30px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 8px solid #FFD166; }
.modal-content h3 { font-size: 2.5rem; margin-bottom: 25px; color: #333; }

.size-options-centered { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
.modal-size-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #eee; border: 3px solid #ccc; border-radius: 20px; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.1s; color: #333; }
.modal-size-btn:hover, .modal-size-btn.active { background: #06D6A0; border-color: white; color: white; transform: scale(1.05); }

.modal-size-btn[data-size-id="small"] { width: 100px; height: 100px; padding: 10px;}
.modal-size-btn[data-size-id="medium"] { width: 120px; height: 120px; padding: 10px;}
.modal-size-btn[data-size-id="big"] { width: 140px; height: 140px; padding: 10px;}
.size-preview-dot { background: currentColor; border-radius: 50%; margin-bottom: 10px; }
.btn-modal-close { background: #E45E25; color: white; border: none; padding: 15px 30px; border-radius: 30px; font-size: 1.5rem; font-weight: bold; cursor: pointer;}

.color-grid-centered { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 30px; }
.extended-color-swatch { width: 65px; height: 65px; border-radius: 50%; border: 6px solid #eee; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,0.1); transition: transform 0.1s, border-color 0.1s; }
.extended-color-swatch:active, .extended-color-swatch.active { transform: translateY(4px) scale(1.1); border-color: #06D6A0; box-shadow: 0 0 15px rgba(0,214,160,0.5); }

/* --- CUSTOM CURSORS FOR TOOLS --- */
.cursor-pencil { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>') 0 32, crosshair !important; }
.cursor-brush { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34a1.49 1.49 0 0 0-2.12 0L9.83 10.71l3.46 3.46 7.42-7.42a1.49 1.49 0 0 0 0-2.12z"/></svg>') 0 32, crosshair !important; }
.cursor-eraser { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4" ry="4" fill="white" stroke="black" stroke-width="2"/></svg>') 16 16, cell !important; }

.ref-thumb {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 160px; 
    height: 160px; 
    border: 4px solid #333;
    border-radius: 15px;
    background: white;
    cursor: pointer;
    object-fit: cover;
    z-index: 100;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.ref-large-img {
    max-width: 90%;
    max-height: 90%;
    border: 8px solid white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    background: white;
}



/* --- UPLOAD PICTURE BUTTON (TOP RIGHT) --- */
.btn-upload {
    position: absolute;
    top: 40px; 
    right: 30px; 
    background: #FFD166; 
    color: #333;
    border: 6px solid #333; 
    border-radius: 20px; 
    padding: 15px 25px; 
    font-size: 1.8rem; 
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 10px 0 #333; 
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-upload:active {
    transform: translateY(8px);
    box-shadow: 0 2px 0 #333;
}

#custom-image-upload { display: none; }

/* --- "SHARE" BUTTON (BOTTOM RIGHT) --- */
.btn-done {
    position: absolute;
    bottom: 100px; 
    right: 20px;   
    background: #FFD166; 
    color: #333;
    
    /* THE FIX: Thinner border, smaller text, and tighter padding! */
    border: 4px solid #333; 
    border-radius: 15px; 
    padding: 8px 20px; 
    font-size: 1.5rem; 
    
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 6px 0 #333; 
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-done:active {
    transform: translateY(6px); 
    box-shadow: 0 0px 0 #333;
}

.btn-done:active {
    transform: translateY(6px); /* Pushes straight down when clicked */
    box-shadow: 0 2px 0 #333;
}                       

/* --- MAGIC CONFETTI --- */
.confetti-piece {
    position: fixed;
    top: -20px;
    z-index: 9999;
    pointer-events: none; /* So kids can't accidentally click the falling confetti */
    animation: fall linear forwards;
}
@keyframes fall {
    to { transform: translateY(110vh) rotate(720deg); }
}

/* --- EMAIL INPUT FIELD --- */
#share-email-input {
    width: 95%;
    padding: 15px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    border: 5px solid #333;
    border-radius: 15px;
    margin-bottom: 20px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

#share-email-input:focus {
    border-color: #E45E25; /* Turns Chaiiwala Orange when they click to type! */
}

/* --- EMAIL MODAL FIXES --- */
.email-subtitle {
    font-size: 1.5rem; 
    margin-bottom: 20px;
}

.email-send-btn {
    width: 100%; 
    margin-top: 10px; 
    font-size: 2rem; 
    padding: 15px;
}

.email-cancel-btn {
    margin-top: 15px;
}

/* --- BRUSH POINTER TRACKER --- */
#brush-pointer {
    position: fixed;
    border-radius: 50%;
    pointer-events: none; /* CRITICAL: Lets them tap 'through' the dot */
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: none; 
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    transition: width 0.1s, height 0.1s, background-color 0.1s;
}

/* --- HELP BUTTON & TINY BRUSH --- */
#btn-help-tutorial {
    position: absolute;
    bottom: 100px; 
    left: 20px; /* Anchored to the left, opposite of the Share button! */
    background: #06D6A0; 
    color: #333;
    border: 4px solid #333; 
    border-radius: 15px; 
    padding: 8px 20px; 
    font-size: 1.5rem; 
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 6px 0 #333; 
    transition: transform 0.1s, box-shadow 0.1s;
    display: none; /* Hidden by default until they enter the mode */
}

#btn-help-tutorial:active {
    transform: translateY(6px); 
    box-shadow: 0 0px 0 #333;
}

/* Adds the 4th 'Tiny' size to your modal menu! */
.modal-size-btn[data-size-id="tiny"] { width: 85px; height: 85px; padding: 10px;}
/* --- TUTORIAL MODAL STYLING --- */
.tut-modal-custom { border: 8px solid #06D6A0; max-width: 650px; }
.tut-title-custom { font-size: 3rem; color: #118AB2; }
.tut-desc-custom { font-size: 1.8rem; margin: 30px 0; color: #333; line-height: 1.4; }
.tut-buttons-container { 
    display: flex; 
    justify-content: center; /* Centers the buttons perfectly */
    gap: 30px; /* Adds a nice, clean space between them so they don't touch */
    margin-top: 40px; 
}

/* THE FIX: We override the giant Home Screen sizes so they fit nicely here! */
.tut-buttons-container .btn {
    width: 45% !important; /* Makes both buttons equal size, taking up half the box each */
    padding: 15px 0 !important; 
    font-size: 2.2rem !important;
    border-width: 5px !important; /* Shrinks the chunky border */
    box-shadow: 6px 6px 0 #000 !important; /* Shrinks the massive drop shadow */
    border-radius: 20px !important;
}

/* ========================================================= */
/* --- CHAIIWALA-BRANDED BUTTON THEME --- */
/* Karak beige paper, chaii brown ink, refined modern feel.   */
/* ========================================================= */

.btn-play, .btn-side, .btn-back, .btn-action, .btn-upload, .btn-done,
#btn-help-tutorial, .btn-modal-close {
    background-color: var(--paper) !important;
    color: var(--chaii-brown-x) !important;
    border: 1.5px solid var(--chaii-brown) !important;
    box-shadow: 0 8px 24px rgba(58,38,32,0.18) !important;
    border-radius: 16px !important;
    font-family: 'MyriadPro', sans-serif !important;
    font-weight: 700 !important;
    text-transform: lowercase !important;
    letter-spacing: -0.02em !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

/* The PLAY button: solid chaii-brown ink button — the primary CTA */
.btn-play {
    background-color: var(--chaii-brown-x) !important;
    color: var(--paper) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 22px 0 !important;
    font-size: 2.2rem !important;
    box-shadow: 0 14px 36px rgba(58,38,32,0.32) !important;
}

.btn-play:hover {
    background-color: var(--chaii-brown) !important;
    color: var(--paper) !important;
    transform: translateY(-2px) !important;
}

.btn-side:hover, .btn-back:hover, .btn-action:hover, .btn-upload:hover,
.btn-done:hover, #btn-help-tutorial:hover, .btn-modal-close:hover {
    background-color: var(--karak-beige) !important;
    transform: translateY(-2px) !important;
}

.btn-play:active {
    transform: translateY(2px) !important;
    box-shadow: 0 6px 16px rgba(58,38,32,0.32) !important;
}

.btn-side:active, .btn-back:active, .btn-action:active, .btn-upload:active,
.btn-done:active, #btn-help-tutorial:active, .btn-modal-close:active {
    transform: translateY(2px) !important;
    box-shadow: 0 4px 12px rgba(58,38,32,0.18) !important;
}