/* Polar Bear Pop Delivery — soft pastel theme + canvas container. The card
   shell (.gb-frame/.gb-frame-top/.gb-play-wrap/.gb-overlay) comes from the
   shared ../../css/game-board.css template; this file supplies the palette
   and the canvas-specific sizing (the canvas fills its own card rather than
   the literal browser window, since it's embedded in the site's normal
   page chrome like every other game — see js/game.js's resize() for why
   touch zones are measured against the canvas's own bounding box, not
   window.innerWidth/innerHeight). */

.pop-delivery-theme {
    --accent:        #6FBF8B;
    --accent-dark:   #4F9C6B;
    --accent-pink:   #F2C9A0;
    --accent-blue:   #8FD0F0;
    --accent-yellow: #F2CE5C;

    --bg:            #FBF8EE;
    --card:          #FFFFFF;
    --card-alt:      #F3F8EF;
    --border:        #DCEFE0;
    --text:          #2B3A2F;
    --muted:         #748776;
    --subtle:        #EAF5EC;

    /* Canvas-internal palette — pastel lawns/street, kept distinct from the
       site chrome colors above so the in-game world reads consistently
       regardless of future site theme tweaks. */
    --pd-sky:     #CFE8D8;
    --pd-street:  #B9BEC2;
    --pd-curb:    #E7E2D2;
    --pd-lawn:    #9ED6A6;
    --pd-house:   #F2C9A0;
}

.pop-delivery-theme body,
body.pop-delivery-theme {
    background:
        radial-gradient(ellipse 480px 260px at 10% 0%, rgba(111, 191, 139, 0.10), transparent 60%),
        radial-gradient(ellipse 420px 280px at 95% 10%, rgba(242, 201, 160, 0.18), transparent 60%),
        var(--bg);
}

/* ── HUD (lives/score/combo) ─────────────────────────────────────────────── */

.pd-lives { font-size: 1.1em; letter-spacing: 2px; }

.pd-hud-stats { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 700; }
.pd-hud-stats span { font-weight: 400; opacity: 0.85; margin-right: 4px; }

/* ── Canvas container ─────────────────────────────────────────────────────
   aspect-ratio locks to the game's internal world resolution (480x800) so
   the canvas's CSS box always matches that proportion; js/game.js reads the
   element's actual rendered size each resize and maps the internal pixel
   buffer to it — no JS-computed letterboxing needed since the box itself
   is already the right shape. */

.pd-play-wrap {
    padding: 0;
    background: var(--pd-sky);
    aspect-ratio: 480 / 800;
    max-height: 75vh;
    margin: 0 auto;
    overflow: hidden;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none; /* this game owns all touch gestures on the canvas — no browser pan/zoom/scroll to fight */
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.pd-guest-banner {
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
}