/* MCD035 - The Big Arch Game */
/* app.css -- reset, mobile hygiene, and the fixed 1080x1920 design stage. */


/* -----------------------------------------------------------
   Reset
   ----------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* TEMP DEBUG: dark slate outside the stage so the letterbox is obvious.
       Set back to #000 once the scaling refactor is verified. */
    background: #222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #fff;

    /* Mobile hygiene: no selection, no callout, no tap highlight,
       no overscroll bounce, no double-tap zoom. */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: none;
}


/* -----------------------------------------------------------
   .viewport -- fills the device screen and centers the stage.
   position:fixed keeps it pinned regardless of any transient
   mobile-Safari scroll weirdness. Anything outside the scaled
   stage is flat-black letterbox (dark slate under debug).
   ----------------------------------------------------------- */
.viewport {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* TEMP DEBUG: match body background so the letterbox reads
       as "outside the stage". */
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* -----------------------------------------------------------
   .app-stage -- the real 1080x1920 design surface.
   Every screen and every overlay positions itself inside this
   fixed coordinate space. The stage is uniformly scaled to fit
   the viewport via --stage-scale (written by the inline scaler
   in index.php on load / resize / orientationchange). Aspect
   ratio is preserved because scale() is uniform.

   transform-origin:center composes with the flex centering on
   .viewport so letterbox bleeds evenly on whichever axis has
   the extra space. flex:0 0 auto prevents flexbox from trying
   to stretch the stage to container size.
   ----------------------------------------------------------- */
.app-stage {
    position: relative;
    width: 1080px;
    height: 1920px;
    flex: 0 0 auto;
    overflow: hidden;
    background: #000;

    transform: scale(var(--stage-scale, 1));
    transform-origin: center center;

    /* TEMP DEBUG: bright red frame at the real 1080x1920 stage edge.
       It scales with the stage, so visually you see it drawn around
       the actual rendered play area. Remove when done verifying. */
    outline: 12px solid #ff1744;
    outline-offset: -12px;

    /* Promote to its own compositing layer -- smoother resize /
       orientation transitions, and avoids subpixel seams at the
       letterbox edge on some mobile browsers. */
    will-change: transform;
    backface-visibility: hidden;
}


/* -----------------------------------------------------------
   TEMP DEBUG LABEL
   Fixed to the top-left corner, sits OUTSIDE .app-stage so it is
   never affected by the scale transform. Shows viewport size and
   computed scale in real time. Text is updated by the inline
   scaler in index.php. Remove this block once verified.
   ----------------------------------------------------------- */
.stage-debug {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 99999;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.85);
    color: #39ff14;
    font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border: 1px solid #39ff14;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
}


/* -----------------------------------------------------------
   Images should never be draggable or intercept pointer events.
   Taps pass through to the full-stage invisible .game-tap-area.
   ----------------------------------------------------------- */
img {
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}


/* -----------------------------------------------------------
   Buttons -- reset native chrome, stay tap-friendly.
   Pointer events survive the parent transform scaling.
   ----------------------------------------------------------- */
button {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

button:focus { outline: none; }


/* -----------------------------------------------------------
   .screen -- full-stage layered container.
   Only the .is-active screen is visible.
   ----------------------------------------------------------- */
.screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.screen.is-active {
    display: block;
}


/* -----------------------------------------------------------
   Shared primitives used across screens.
   ----------------------------------------------------------- */

/* Full-bleed background image for a screen.
   Stage is exactly 1080x1920, so cover / contain behave the same
   when the asset was also exported at 1080x1920 -- cover is a
   defensive default for any slight aspect mismatch. */
.screen-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Pressable image button primitive.
   Horizontally centered by default; screens provide `top` and `width`.
   The nested .screen-btn-img is the image that gets swapped on press. */
.screen-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    line-height: 0;
    padding: 0;
}

.screen-btn .screen-btn-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}