/* ============================================================
 * Pong — game-specific styles.
 * Layout mirrors speedgame: a centered column inside the #game section, with
 * gameUI on top, a constrained Phaser canvas in the middle, and pong-controls
 * (= speedgame's .footer equivalent) below.
 * ============================================================ */

/*---------------------------------*/
/* Slightly shorter header (override of shell's --header-height: 18rem) to give
   the court more vertical room. Notched-phone overrides keep the same vh bump
   on top of the new base. */
/* The body becomes a flex column purely so `order` can move the banner below <main>.
   Heights are unchanged, so this renders identically at the default order.
   See config.layout + applyLayoutOrder() in src/game/pong-game.js. */
body {
    display: flex;
    flex-direction: column;
}

:root {
    --header-height: 16rem;

    /* Surround around the court. Was #2fac69 (the brand green); the design reference
       puts the court on a soft blue instead. Approximated from the reference image —
       adjust here if the exact brand value differs. */
    --court-surround: #8CB3D9;
}
@media (max-width: 600px) and (min-height: 750px) and (orientation: portrait) {
    :root { --header-height: calc(16rem + 8vh); }
}
@media (max-width: 350px) and (min-height: 750px) and (orientation: portrait) {
    :root { --header-height: calc(16rem + 20vh); }
}

/*---------------------------------*/
/* Header logo cap.
   Shell sets `.logo { height: 11rem }`. On large viewports (4K landscape with
   root font-size 12px → ~132px tall logo) the absolute-centered logo grows
   wide enough that its right edge encroaches on the ?/IT buttons (the buttons
   live inside a max-width inner div, the logo is centered relative to the full
   header — so they don't share the same reference frame). Cap the logo height
   in absolute px so it never grows past this overlap point. */
.logo {
    max-height: 100px;
}

/*---------------------------------*/
/* Sections (intro / start / rules / score) */

#start .text-container,
#rules .text-container {
    padding-left: 6rem;
    padding-right: 6rem;
}

#rules .text-container {
    padding-top: 9rem;
}

#score .rules-panel {
    padding-top: 4rem;
}

#score .btn:first-of-type {
    margin-top: 4rem;
}

/*---------------------------------*/
/* Game layout — flex column inside the green column:
     gameUI (top — timer + score, sized in cqh of the column for consistent scaling)
     pong-stage (court, anchored just below the UI)
     [auto-margin gap]
     pong-controls (pinned at bottom)
   container-type on #pong-game enables `cqh` units on descendants so the UI
   scales with the column height (= the canvas size class), not with the
   viewport-based root font-size. */

/* --court-surround is the area around the court, seen through the transparent Phaser
   canvas. It lives only on the game screen — the other sections use the rachetBg image,
   and shell.css's --light-green is the header buttons, not a section background. */

/* justify-content: center — the scene shrinks #pong-stage to the court's own height, so
   whatever is left over is real slack. Centring the scoreboard + court as one group keeps
   the scoreboard off the header and close to the court, instead of pinning it to the top
   with the entire surplus wedged underneath it. */

/* padding 3rem, not the template's 9rem: the court carries its own 15% surround, so a wide
   column padding on top of it charged the margin twice — 26% of the screen width on a
   phone — and was the main reason the court sat small in a sea of background. */

#pong-game {
    /* padding-bottom matches the top so the column itself never lets its last child touch
       the page edge, whichever block config.layout.order puts there. */
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background-color: var(--court-surround);
    height: 100%;
    justify-content: center;
    container-type: size;
    /* The whole column is the drag surface, so the browser must not claim the gesture for
       scrolling or pull-to-refresh part-way through a swipe. */
    touch-action: none;
}

/*---------------------------------*/
/* gameUI — flex row just above the court. Timer at the left edge, score at the right.
   The strip has an explicit height matching the old image height (5cqh) so the
   outer footprint stays the same as before. The images inside are slightly smaller
   (4cqh) and vertically centered — the 0.5cqh of empty space on top and bottom
   becomes natural breathing room between UI and header/court. */

#gameUI {
    flex-shrink: 0;
    width: 100%;
    /* Line the timer and score up with the court. The court's on-screen width depends on
       which axis the fit bound against, which CSS cannot work out — the scene measures it
       and publishes it as --court-width on #pong-game. The fallback keeps the UI sane if
       the scene never runs (e.g. Phaser failed to boot). */
    max-width: var(--court-width, 100%);
    height: 5cqh;
    /* Symmetric on purpose. This used to put the gap only on the side facing the court,
       which left nothing on the outer side — so under any layout order that ends with the
       scoreboard it sat flush against the page edge. It has to breathe both ways, because
       config.layout.order decides which side faces what. */
    margin: 2cqh auto;
}

#timer img,
#scoreSymbol,
#scoreHImg, #scoreDImg, #scoreImg {
    height: 4cqh;          /* shrunk from 5cqh (~20% smaller) */
}

#timer .colon {
    height: 2cqh;
}

/* The multiplier is plain type, deliberately NOT the dot-matrix number images the timer
   and score are built from: bright white so it reads as a live callout against the
   scoreboard's orange rather than as another field of it. Both the "x" and the digit are
   one text node, so there is nothing to keep in visual step. */
#multiplier {
    font-family: 'Archivo';
    font-weight: bolder;
    font-style: italic;
    color: #FFFFFF;
    font-size: 4.4cqh;
    line-height: 1;
    /* Glow: three stacked shadows — tight and near-opaque for the hot core, then wider and
       fainter for the falloff. Radii are in cqh like the font size, so the halo keeps its
       proportion to the glyphs on every device instead of turning into a smudge on small
       screens and a hairline on large ones. */
    text-shadow:
        0 0 0.5cqh rgba(255, 255, 255, 0.95),
        0 0 1.5cqh rgba(255, 255, 255, 0.65),
        0 0 3.2cqh rgba(255, 255, 255, 0.35);
}

/*---------------------------------*/
/* Pong stage — takes whatever vertical space is left in the column after the gameUI.
   Deliberately pins NO aspect-ratio: the Phaser canvas is sized at boot from this box's
   measured shape, and the court is then fitted inside it, so the stage's job is simply to
   hand over the largest area available on this device. Pinning a ratio here would put the
   letterboxing back. */

#pong-stage {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;                    /* allow it to shrink inside the flex column */
    margin: 0 auto;
    position: relative;
}

#pong-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/*---------------------------------*/
/* Pong controls — hidden, the court gets that vertical space instead (the reserve
   in #pong-stage's max-height and #gameUI's max-width was reduced by the 12rem this
   strip used to take: 8rem of button + 2rem of padding top and bottom).
   The paddle is still driven by drag anywhere in the lower half of the court, plus
   the arrow keys on desktop. Markup and listeners are left in place, so bringing the
   buttons back means flipping `display` here and restoring those two reserves. */

#pong-controls {
    display: none;
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    background-color: var(--court-surround);
    padding: 2rem;
}

.pongButton {
    aspect-ratio: 1;
    border-radius: 10000px;
    background-color: var(--yellow-header);
    border: 0.4rem solid var(--circle-black);
    height: 8rem;
    cursor: pointer;
}

.pongButton img {
    height: 60%;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}


/*---------------------------------*/
/* Design reference (portrait): banner, titles and vertical rhythm, measured off the mock-ups
   in CONFIGURAZIONI / the numbered screens. Expressed in vh / rem, so they hold on any 9:16
   screen. Landscape keeps shell.css's own sizing. */
@media (orientation: portrait) {
    :root { --header-height: 11.5vh; }

    /* Banner: logo on the left, "?" and language buttons on the right, both inset ~9% from
       the edge, everything vertically centred. Overrides shell.css's desktop rule that
       absolutely centres the logo. */
    header > div.px-5 {
        padding-left: 9%;
        padding-right: 9%;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }
    header > div.align-items-end { align-items: center; }
    .header-logo-container {
        position: static;
        transform: none;
    }

    /* Titles sit about 17% down the screen on every text screen, and are a touch larger. */
    #start .text-container,
    #rules .text-container,
    #score .text-container,
    #languageSelection .text-container {
        padding-top: 17vh;
    }
    h1.main-text { font-size: 5.4em; }
    .rules-panel h1 { font-size: 3.1rem; }

    #start .btn { margin-top: calc(5rem + 8vh); }
    #rules .rules-panel,
    #score .rules-panel { margin-top: 2.8vh; }

    /* Titles get nearly the full width ("You returned 24 shots." has to stay on one line);
       the glass panels are inset a little further, ~11.5% from each edge, with less side
       padding so the rules fit on two lines. */
    #rules .text-container,
    #score .text-container,
    #languageSelection .text-container {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    #rules .rules-panel,
    #score .rules-panel,
    #languageSelection .rules-panel {
        margin-left: 2.8rem;
        margin-right: 2.8rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    #languageSelection .rules-panel { flex: 1; }

    /* The rules screen is the tallest one; start it a little higher so the panel clears the
       banner instead of sitting right on top of it. */
    #rules .text-container { padding-top: 12vh; }
}

/* Large vertical monitors scale the root (see shell.css), so the logo's 100px cap, which is
   for a 16px root, has to scale with it: the same cap in rem. */
@media (min-width: 1440px) and (orientation: portrait) {
    .logo { max-height: 6.25rem; }
}