/*
 * ============================================================
 *  JUICE BOX — Stylesheet
 * ============================================================
 *  This file handles all visual presentation: layout, colors,
 *  animations, and hover effects.
 *
 *  Design tokens (shared values) are stored as CSS custom
 *  properties on :root so they can be reused across rules —
 *  and even read from JavaScript (see game.js → FADE_MS).
 * ============================================================
 */

/* ---- Design tokens ---- */
:root {
    /* A "bouncy" easing curve that overshoots then settles.
       Used for both the entrance animation and the hover effect. */
    --bounce-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Each grid cell is a square whose side length is dynamically calculated
       in JavaScript as min(1/5 of screen width, 1/9 of screen height).
       Default fallback value for initial render before JS runs. */
    --cell-size: 60px;

    /* How long the fade-out lasts when transitioning between levels.
       game.js reads this value so the JS timeout stays in sync
       automatically — change it here and both CSS & JS update. */
    --fade-duration: 400ms;
}

/* ---- Reset & global defaults ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* Prevent mobile browsers from waiting 300ms on tap (to detect
       double-tap-to-zoom). Doesn't inherit, so applying to * ensures
       every element gets it. */
    touch-action: manipulation;
}

/* ---- Full-viewport canvas ---- */
html {
    width: 100%;
    height: 100%;
    overflow: hidden;  /* No scrollbars — the game fills the screen */
    max-width: 100vw;
    max-height: 100vh;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;  /* No scrollbars — the game fills the screen */
    max-width: 100vw;
    max-height: 100vh;
}

body {
    /* Warm peach-to-coral gradient background */
    background: linear-gradient(145deg, #ffecd2 0%, #fcb69f 50%, #f7a99c 100%);

    /* Center the grid dead-center in the viewport */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Minimal padding to reduce margin between grid and screen edges */
    padding: 0.5%;

    /* Prevent text selection when rapidly clicking sprites */
    user-select: none;
    -webkit-user-select: none;  /* Safari fallback */
}

/* ---- Title screen ----
   Covers the full viewport with the game title.
   Clicking/tapping anywhere dismisses it and starts the game. */
#title-screen {
    position: fixed;
    inset: 0;                       /* Stretch to fill the entire viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;                    /* Sit above the grid */
    transition: opacity 0.5s ease;
    overflow: hidden;               /* Prevent any content overflow */
    max-width: 100vw;
    max-height: 100vh;

    /* Start invisible to prevent FOUT (Flash of Unstyled Text).
       game.js adds .ready once the Cherry Bomb One font has loaded. */
    opacity: 0;
}

/* Fade in once the font is confirmed loaded */
#title-screen.ready {
    opacity: 1;
}

/* When JS adds .hidden, fade out and disable interaction */
#title-screen.hidden {
    opacity: 0;
    pointer-events: none;
}


#title {
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: clamp(80px, 20vmin, 200px);  /* Very, very big */
    line-height: 1.1;
    text-align: center;

    /* Stack the two <span> children ("Juice" / "Box") vertically */
    display: flex;
    flex-direction: column;
}

/* ---- The invisible grid that holds all sprite cells ---- */
#grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), auto);
    grid-template-rows: repeat(var(--grid-rows, 7), auto);
    overflow: visible;                        /* Allow sprites to scale without clipping */
    max-width: 100vw;
    max-height: 100vh;

    /* Responsive gap between cells, same clamping idea as --cell-size */
    gap: clamp(6px, 1.2vmin, 14px);
}

/* ---- Individual sprite cell ---- */
.cell {
    width: var(--cell-size);
    aspect-ratio: 1;                /* Square: height equals width */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: visible;              /* Allow sprites to scale beyond cell bounds without clipping */

    /* Remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    outline: none;

    /* Start invisible (scaled to zero) and positioned below the screen.
       The .appear class below will animate them sliding up and scaling in. */
    transform: scale(0) translateY(200%);

    /* When .fade-out is added, opacity transitions smoothly to 0
       over --fade-duration. The transition is always defined so
       that adding the class is all it takes to trigger the fade. */
    transition: opacity var(--fade-duration) ease;
}

/* Applied by game.js after a random delay — animates the cell from
   scale(0) to scale(1) with a springy overshoot. "forwards" keeps
   the final keyframe (scale 1) after the animation ends. */
.cell.appear {
    animation: bounceIn 0.55s var(--bounce-ease) forwards;
}

/* Applied to every cell simultaneously when the player wins.
   The opacity transition on .cell handles the smooth fade.
   pointer-events: none prevents further clicks during the fade. */
.cell.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ---- Sprite image inside each cell ---- */
.cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;            /* Scale without cropping */

    /* Hover scale-up uses the same bouncy easing as the entrance */
    transition: transform 0.4s var(--bounce-ease);

    /* Clicks should register on the parent .cell, not the <img> */
    pointer-events: none;

    /* Prevent the image from being dragged (looks janky otherwise) */
    -webkit-user-drag: none;
}

/* When hovering a cell (or when .hover class is added for touch), the image inside scales up bouncily */
.cell:hover img,
.cell.hover img {
    transform: scale(1.22);
}

/* Cancel the hover scale-up during the fade-out so sprites
   don't pop bigger while disappearing */
.cell.fade-out:hover img,
.cell.fade-out.hover img {
    transform: scale(1);
}

/* ---- Entrance animation ----
   A spring-like sequence that combines upward movement with scale:
     0%   → invisible (scale 0) and below screen (translateY 200%)
     50%  → overshoot slightly larger than normal, still moving up
     75%  → settle at full size, nearly in position (never goes below scale 1)
     90%  → tiny overshoot, in final position
     100% → settle at full size and final position (translateY 0) */
@keyframes bounceIn {
    0%   { transform: scale(0) translateY(200%)    }
    50%  { transform: scale(1.15) translateY(-5%) }
    75%  { transform: scale(1) translateY(2%)     }
    90%  { transform: scale(1.05) translateY(-1%) }
    100% { transform: scale(1) translateY(0)       }
}