/* MCD035 - The Big Arch Game */
/* game.css -- screen compositions, matching the 1080x1920 reference designs.

   The stage is a FIXED 1080x1920 pixel box (see app.css .app-stage) that is
   uniformly scaled to fit the viewport via --stage-scale. That means every
   position here -- whether written in px or % -- maps 1:1 to the design:

     - 1% of stage width  = 10.8 px of design space
     - 1% of stage height = 19.2 px of design space
     - 50%                = stage midline, exactly

   We keep percentages because they read naturally for "50% across",
   "top 7%", etc. Use pixels only when a specific design-space coordinate
   is more readable that way.

   `height: auto` on overlay images preserves the intrinsic aspect ratio
   of each exported asset.
*/


/* ============================================================
   SPLASH SCREEN
   Layers:
     - screen_splash.png     (full background)
     - splash_logo.svg       (logo artwork in the upper/middle area)
     - button_start.svg      (start button in the lower-middle area)
     - splash_t_c.svg        (terms text near the bottom)
   ============================================================ */

.splash-logo {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: auto;
}

/* .screen-btn base class supplies position/centering.
   We only add top/width here. */
.splash-start {
    top: 67%;
    width: 54%;
}

.splash-terms {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: auto;
}


/* ============================================================
   INSTRUCTIONS 1 & 2 (shared layout)
   Layers:
     - screen_instructions.svg   (full background)
     - instruction_top.svg       (title block, top of stage)
     - instruction_middle.svg    (burger/arrow/head composition)
     - instruction_bottom.svg    (body text -- screen 1)
     - instruction_bottom_2.svg  (body text -- screen 2)
     - button_next.svg / button_play.svg
   ============================================================ */

.instructions-top {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
    height: auto;
}

.instructions-middle {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    height: auto;
}

.instructions-bottom {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    height: auto;
}

/* Instruction 1: the body text is longer, so the Next button sits lower. */
.screen-instructions-1 .instructions-btn {
    top: 80%;
    width: 48%;
}

/* Instruction 2: the body text is shorter, so the Play button sits a bit higher. */
.screen-instructions-2 .instructions-btn {
    top: 74%;
    width: 52%;
}


/* ============================================================
   COUNTDOWN SCREENS (3 / 2 / 1 / GO)
   Layers:
     - screen_countdown.svg   (shared background, same for all four)
     - countdown_N.svg        (starburst + pixel number / GO, centered)
   Each of the four countdown states is its own .screen, so the
   existing .screen / .is-active show-one-at-a-time pattern works
   unchanged.
   ============================================================ */

.countdown-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: auto;
}


/* ============================================================
   PLAYING (gameplay) screen
   Layers (bottom to top):
     - game-bg             (background GIF, fills stage)
     - game-character      (open/closed mouth character, full-frame)
     - game-hands          (hands + burger PNG, full-frame)
     - game-hunger-text    (HUNGER METER label, top)
     - game-hunger-meter   (10-step meter, just below label)
     - game-clock          (timer display, bottom)
     - game-tap-area       (invisible full-stage tap button)
   ============================================================ */

.screen-playing .game-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.screen-playing .game-character {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.screen-playing .game-hands {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.screen-playing .game-hunger-text {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 66%;
    height: auto;
}

.screen-playing .game-hunger-meter {
    position: absolute;
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    height: auto;
}

.screen-playing .game-clock {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: auto;
}

/* Full-stage invisible tap capture.
   Sits on top of the visuals; images underneath have pointer-events: none
   (from app.css) so taps pass straight through to this button. */
.screen-playing .game-tap-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}


/* ============================================================
   WIN / LOSE screens
   Both use the yellow screen_countdown.svg as .screen-bg.
   Text, character, and (on WIN) thumbs-up + claim button sit on top.
   ============================================================ */

/* --- WIN --- */

.screen-win .win-text {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: auto;
}

.screen-win .win-character {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 72%;
    height: auto;
}

/* Two thumbs-up icons flanking the character. */
.screen-win .win-thumb {
    position: absolute;
    top: 28%;
    width: 20%;
    height: auto;
}
.screen-win .win-thumb-left {
    left: 4%;
    transform: rotate(-14deg);
}
.screen-win .win-thumb-right {
    right: 4%;
    transform: rotate(14deg) scaleX(-1);
}

.screen-win .win-claim {
    bottom: 8%;
    width: 62%;
}

/* --- LOSE --- */

.screen-lose .lose-text {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: auto;
}

/* character_lose.png carries the red bottom shape / "try again tomorrow"
   messaging in the exported composition, so it stretches toward the
   bottom of the stage. */
.screen-lose .lose-character {
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: auto;
}