/* chrome.css — the shared game chrome, in one place.
 *
 * Every game links this (../../chrome.css) instead of duplicating ~60 lines
 * of identical CSS. It owns: the fixed ad-banner strip, the back/settings
 * chrome buttons, the in-play HUD (level badge + objective), the win/level
 * card + stars, and the base reset.
 *
 * THE WIN/LEVEL CARD IS NAMESPACED `.mochi-card`. Its children
 * (.title/.sub/.btn/.btns/.stars/.star) are scoped *under* `.mochi-card`, so a
 * game gets the shared pink card by putting `mochi-card` on its card element.
 * A game with its own card look keeps a plain `.card` (or any class) and styles
 * it itself — chrome.css no longer defines a generic `.card`, so this theme can
 * NEVER leak into a partially-overridden game card. Only the `.overlay` wrapper
 * stays generic/shared: it's pure layout + the `.show` toggle, with no theme to
 * leak, and every game's overlay relies on it to appear.
 *
 * Generated from g/beam/index.html — edit there or regenerate, then the
 * migration strips the matching rules from every game.
 */

html, body { margin: 0; height: 100%; overflow: hidden; }

:root { --ad-h: 56px; }

@media (min-width: 768px) { :root { --ad-h: 90px; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { touch-action: none; -webkit-user-select: none; user-select: none; font-family: system-ui, -apple-system, sans-serif; }

#game { display: block; width: 100vw; height: calc(100vh - var(--ad-h)); height: calc(100dvh - var(--ad-h)); touch-action: none; }

#ad-banner { position: fixed; left: 0; right: 0; bottom: 0; height: var(--ad-h); z-index: 60;
      display: flex; align-items: center; justify-content: center; overflow: hidden;
      background: #f6ecdc; border-top: 1px solid rgba(120,90,60,0.14); }

#ad-banner .ad-ph { font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(92,72,55,0.4); }

#ad-banner ins.adsbygoogle { display: block; width: 100%; height: var(--ad-h); }

.chrome-btn {
      position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 10;
      display: inline-flex; align-items: center; justify-content: center;
      border: none; border-radius: 999px; background: var(--ch-glass, rgba(120, 50, 90, 0.4)); color: #fff;
      cursor: pointer; font: 600 15px/1 system-ui, -apple-system, sans-serif; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }

.chrome-btn:active { transform: scale(0.95); }

#back { left: calc(env(safe-area-inset-left, 0px) + 12px); width: 40px; height: 40px; padding: 0; }

#back svg { width: 22px; height: 22px; }

#settings { right: calc(env(safe-area-inset-right, 0px) + 12px); width: 40px; height: 40px; padding: 0; }

#settings svg { width: 22px; height: 22px; }

/* in-play HUD: level badge (+ optional objective indicator) */
    #hud { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; transform: translateX(-50%);
      z-index: 9; display: none; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }

#hud.show { display: flex; }

#lvlbadge { font: 800 12px/1 system-ui; letter-spacing: 0.08em; text-transform: uppercase;
      color: #fff; background: var(--ch-badge, rgba(120, 50, 90, 0.42)); padding: 5px 12px; border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18); }

#objective { display: none; font: 800 13px/1 system-ui; color: #fff; background: rgba(120, 50, 90, 0.42);
      padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); align-items: center; gap: 6px; }

#objective.show { display: inline-flex; }

.overlay { position: fixed; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; padding: 24px; text-align: center; }

.overlay.show { display: flex; }

.overlay.show .card, .overlay.show .mochi-card { animation: pop 0.25s ease both; }

@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

.mochi-card { min-width: 230px; max-width: 84vw; padding: 26px 30px 28px; border-radius: 22px;
      background: rgba(255,255,255,0.96); border: 1px solid rgba(190,120,160,0.22);
      box-shadow: 0 16px 50px rgba(130,40,90,0.34); color: #5a2f4a; }

.mochi-card .title { font-weight: 900; font-size: clamp(24px, 7vw, 36px); }

.mochi-card .sub { margin-top: 8px; font-size: 14px; color: #ad6b90; }

.mochi-card .btn { margin-top: 20px; cursor: pointer; border: none; border-radius: 14px; padding: 13px 28px;
      background: #ff7ea8; color: #fff; font: 900 16px/1 system-ui; box-shadow: 0 4px 14px rgba(255,93,143,0.4); }

.mochi-card .btn:active { transform: scale(0.96); }

.mochi-card .btn.alt { background: #f0cfe0; color: #72385a; box-shadow: none; margin-left: 8px; padding: 13px 20px; }

.mochi-card .btns { margin-top: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }

.mochi-card .btns .btn { margin-top: 0; }

.mochi-card .stars { margin-top: 12px; font-size: 44px; line-height: 1; letter-spacing: 6px; }

.mochi-card .star { color: #e9d9e3; }

.mochi-card .star.on { color: #ffcb3d; text-shadow: 0 2px 8px rgba(255,180,40,0.5); animation: starpop .35s ease both; }

.mochi-card .star.on:nth-child(2) { animation-delay: .12s; }

.mochi-card .star.on:nth-child(3) { animation-delay: .24s; }

@keyframes starpop { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } to { transform: scale(1); opacity: 1; } }