/* 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; --bar-h: 46px; }

@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 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: 1px solid rgba(80, 60, 110, 0.14); border-radius: 999px; background: #fff; color: #4ec0ca;
      cursor: pointer; font: 600 15px/1 system-ui, -apple-system, sans-serif;
      box-shadow: 0 6px 20px rgba(150, 120, 165, 0.34);
    }

.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; }

/* The win/level/fail overlay centers its card in the PLAY AREA only: it reserves
   the bottom ad strip (--ad-h, always fixed at the viewport bottom) so the card
   never sits behind/under it. Inside a #hero (game-info present) game-info.css
   ALSO reserves the title bar (--bar-h) - see #hero .overlay there. */
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: var(--ad-h); 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; line-height: 1.45; color: #9c5a7e; }

/* How-to-Play caption - shared by EVERY game so it always reads the same and
   stays legible: dark ink + a deep brand-pink <b> emphasis, both clearing WCAG
   AA on the white/light card. Only a dark-themed card (.card with a dark bg)
   overrides these with lighter text. Games must NOT re-tint these pale - a pale
   theme tint on the light card is exactly what made captions vanish. */
#howto .mochi-card { max-width: 340px; }

.tut-cap { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #5a2f4a; }

.tut-cap b { color: #c4205c; }

.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; } }

/* Keyboard focus. Game pages don't load site.css, so the visible focus ring is
   defined here for the shared chrome. The chrome buttons float over an arbitrary
   game background, so a single-colour outline could vanish on some themes - a
   two-tone ring (white halo + dark ink) stays visible on both light and dark
   playfields. The card buttons always sit on the light card, so a solid outline
   is enough there. (Only :focus-visible, so a pointer tap never shows a ring.) */
.chrome-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #5a2f4a, 0 6px 20px rgba(150, 120, 165, 0.34);
}

.mochi-card .btn:focus-visible { outline: 3px solid #5a2f4a; outline-offset: 3px; }

/* Respect a reduced-motion preference: keep the win/level card + stars, but drop
   the pop/starpop entrance animations (scoped to chrome's OWN animations so a
   game's gameplay animations are never touched). */
@media (prefers-reduced-motion: reduce) {
  .overlay.show .card, .overlay.show .mochi-card { animation: none; }
  .mochi-card .star.on { animation: none; }
}