/* ============================================================
   Sugar Bug Pop — pastel Mighty Pedia palette, Nunito, and the
   arcade cabinet the playfield sits in. Set GAME_CONFIG.chrome
   to false and the cabinet is skipped so a host can draw its own.
   ============================================================ */

:root {
  /* App pastel backdrop (same stops the club and coloring-book use) */
  --bg-1: #FFF5E6;
  --bg-2: #FFEEF0;
  --bg-3: #E8F8F8;
  --bg-4: #F0E0F8;

  --teal: #00B5B5;
  --orange: #FF7639;
  --text-color: #2d3436;
  --text-light: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.2);
  --card-radius: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 35%, var(--bg-3) 65%, var(--bg-4) 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;      /* no vertical centring — it left a strip on iOS */
  position: fixed;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}

/* The shell fills the visible viewport exactly — see fitViewport(). */
#game-container {
  width: 100%;
  max-width: 500px;
  /* the visible region, published by fitViewport() — never runs under iOS
     Safari's bottom bar. svh is the static fallback (viewport at its smallest,
     i.e. bars expanded), so the bezel is visible either way. */
  height: var(--app-vh, 100svh);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  #game-container { max-width: 900px; }
}

/* Screens */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  user-select: none;
  -webkit-user-select: none;
  min-height: 0;
}

.game-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-color);
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  animation: bounce-in 0.6s ease-out;
  text-align: center;
}

@keyframes bounce-in {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Title screen ─── */
.title-screen {
  gap: 26px;
  text-align: center;
}

/* A huddle of germs above the logo. They overlap slightly and each bobs on its
   own beat, so the group reads as alive rather than as a static row of icons. */
.title-germs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -6px;
}

.title-germ {
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.16));
  animation: germ-bob 3.2s ease-in-out infinite;
  margin: 0 -8px;              /* slight overlap so they cluster */
}

.title-germ.lg { width: clamp(78px, 24vw, 112px); z-index: 3; }
.title-germ.md { width: clamp(60px, 18vw, 86px);  z-index: 2; }
.title-germ.sm { width: clamp(46px, 14vw, 66px);  z-index: 1; }

@keyframes germ-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .title-germ { animation: none; }
}

.play-button {
  font-size: 2rem;
  font-weight: 700;
  padding: 20px 60px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #fd79a8, #e84393);
  color: var(--text-light);
  cursor: pointer;
  box-shadow: 0 8px 20px var(--shadow-color);
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.play-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px var(--shadow-color);
}

.play-button:active { transform: scale(0.95); }

.play-button.secondary {
  font-size: 1.4rem;
  padding: 14px 44px;
  background: linear-gradient(135deg, #00B5B5, #00cec9);
  box-shadow: 0 6px 16px rgba(0, 181, 181, 0.4);
}

/* ─── Play screen ─── */
.game-screen {
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;      /* let the cabinet span the full width */
  height: 100%;
  overflow: hidden;
}

.score-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 20px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
  font-weight: 800;
  color: var(--text-color);
}

.score-pill .score-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.score-pill .score-value { font-size: 1.35rem; }

/* The canvas paints straight onto the page gradient — no card, no border,
   matching how the activities sit on the club background. */
.canvas-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sized in px by resize() so the logical board never stretches. */
#game {
  display: block;
  touch-action: none;
}

/* ─── Win / lose screen ─── */
.result-screen { animation: fade-in 0.4s ease-out; }

.result-text {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-color);
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  animation: bounce-in 0.6s ease-out;
  text-align: center;
  z-index: 10;
}

.result-sub {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-color);
  opacity: 0.7;
  margin-top: -24px;
  z-index: 10;
}

.result-score {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--teal);
  z-index: 10;
}

.complete-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

/* Confetti (shared with memory-match) */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ─── Arcade cabinet ────────────────────────────────────────────────────────
   The cabinet deliberately overhangs the viewport on the left, right and
   bottom, so its outer edges are never visible and the screen reads as
   full-bleed rather than as a tablet drawn inside a tablet. Only the marquee
   (brand plate) shows as bezel. Everything else — score, level, lives, mute —
   is overlaid inside the screen. */
.cabinet {
  flex: 1;
  min-height: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  /* Runs edge to edge (no outer radius, so no page shows at the corners) with
     a visible bezel all round: a thin strip at the sides, thicker top and
     bottom. The marquee provides the top. */
  margin: 0;
  /* In standalone (Home Screen) mode the bezel absorbs the notch and the home
     indicator, so nothing of the screen is ever hidden behind them. */
  padding: 0 7px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #2b3648 0%, #1a2333 60%, #141b28 100%);
}

.cabinet-marquee {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(5px + env(safe-area-inset-top, 0px)) 16px 10px;
}

/* Swapped per practice — sized by height so any logo aspect sits correctly. */
.brand-logo {
  height: 42px;
  max-width: 62%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* The screen: full-bleed sideways, rounded only at the top where bezel shows. */
.cabinet .canvas-wrap {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 35%, var(--bg-3) 65%, var(--bg-4) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    inset 0 6px 18px rgba(0, 0, 0, 0.16);
}

/* ─── On-screen HUD ─── */
.screen-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  pointer-events: none;      /* only the mute button takes taps */
  z-index: 5;
}

.screen-hud .score-pill { margin-bottom: 0; padding: 4px 14px; }
.screen-hud .score-pill .score-value { font-size: 1.1rem; }

.hud-level {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.42;
  white-space: nowrap;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Lives readout — hearts on a translucent pill, matching the score pill. */
.lives-pill {
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
  font-size: 1.05rem;
  letter-spacing: 2px;
  color: #e8556d;
  line-height: 1.25;
  min-width: 62px;
  text-align: center;
}

.screen-hud .lives-pill {
  padding: 4px 12px;
  font-size: 0.95rem;
  min-width: 58px;
}

/* Frameless (CFG.chrome === false): the host draws the cabinet, so the game
   renders only the screen and fills the box it is given. Square corners and no
   inset ring — the host's bezel supplies those. */
.game-screen.frameless .canvas-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}