/**
 * Shared visual shell for games — the "everything is its own small card
 * floating on a full-bleed sky background, nothing is one big enclosing
 * panel" language established on public/sort-it-out.html's redesign
 * (client mockup ask). Link this file (after app.css) in a NEW game and
 * call the matching render*() functions on GamesCommon (public/js/
 * gamesCommon.js) to get the mascot/title/start-screen, HUD+progress bar,
 * and result-screen look for free — same spirit as a gameRules.js entry
 * auto-plugging a new game into admin analytics with zero extra code.
 *
 * Deliberately NOT retrofitted onto any existing game page — see
 * CLAUDE.md's "game-shell abstraction" note for why (scoped to new
 * games only, by explicit product decision). sort-it-out.html's own
 * .sio-redesign block predates this file and still hand-rolls the same
 * look; not unified with this file so that page doesn't shift under
 * its own already-shipped, already-tested styling.
 *
 * Every class here is prefixed `shell-` so it can never collide with a
 * game's own CSS (e.g. sort-it-out.html's `.sio-*`/`.sort-*` classes,
 * water-rescue.html's `.hud-cell`, etc.) — this file is additive, safe
 * to link into any page without auditing the rest of that page's CSS.
 */

/* ---- Full-bleed sky background — link this file and the body gets it
   automatically. Put on `body`, NOT a content wrapper — putting it on a
   narrower centered column (an early mistake on sort-it-out.html) produces
   a "card floating in a box" look instead of an actual full-bleed
   background. ---- */
body.shell-sky {
  background: radial-gradient(circle at 15% 8%, #fff8dc55 0, transparent 40%),
              linear-gradient(180deg, #BFEFF5 0%, #BFEFF5 55%, #DCF5D8 100%);
  min-height: 100vh;
}

.shell-deco {
  position: fixed; /* viewport-relative, not clipped to a narrow content column */
  font-size: 28px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* ---- Mascot + start screen — no enclosing card; sits directly on the
   sky background. ---- */
.shell-mascot { text-align: center; margin-bottom: 4px; }
.shell-mascot img { width: 64px; filter: drop-shadow(0 6px 10px rgba(20,92,52,0.2)); }

.shell-start-screen { text-align: center; }
.shell-start-screen .shell-tagline { color: var(--ink-soft); margin: 0 0 16px; }

.shell-start-actions { margin: 16px 0; }
.shell-start-actions .btn { display: block; width: 100%; margin-bottom: 10px; }

.shell-difficulty-row { display: flex; gap: 8px; justify-content: center; margin: 10px 0 16px; }
.shell-difficulty-btn {
  flex: 1; max-width: 120px; padding: 10px; border-radius: 12px; border: 2px solid var(--green);
  background: var(--white); color: var(--green-dark); font-weight: 700; font-family: 'Baloo 2', sans-serif;
  cursor: pointer; font-size: 0.9rem;
}
.shell-difficulty-btn.active { background: var(--green-dark); color: var(--white); border-color: var(--green-dark); }

/* ---- HUD stat-tiles + progress bar. Label ABOVE the number (small
   text on top, big number below) — matches the client mockup; the
   reverse order was an early mistake worth flagging so it isn't
   repeated. ---- */
.shell-hud-row { display: flex; gap: 8px; margin-bottom: 8px; }
.shell-hud-cell { flex: 1; background: var(--white); border-radius: 12px; padding: 8px 4px; text-align: center; box-shadow: 0 4px 0 rgba(24,58,51,0.12); }
.shell-hud-cell .shell-hud-l { font-size: 0.65rem; font-weight: 700; color: var(--ink-soft); }
.shell-hud-cell .shell-hud-n { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--green-dark); }

.shell-progress-track { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.6); margin-bottom: 16px; overflow: hidden; }
.shell-progress-fill { height: 100%; width: 0%; background: var(--orange); border-radius: 6px; transition: width 1s linear; }

/* Result-screen rules live in app.css now (.games-result + the
   .shell-result-screen.card strip) so EVERY game shares the same compact
   scoreboard whether or not it links this stylesheet — see GamesCommon.
   renderEndScreen() and app.css's "Result scoreboard" section. Nothing
   result-screen stays here. */