/* Reuse the tested mini-game component styles without allowing the legacy
 * application shell to override the new home page. Unlayered home.css keeps
 * precedence; only game component selectors fill the gaps here. */
@import url("/static/styles.css?v=20260807-games1") layer(legacy-game-components);

.mini-game-overlay {
  --surface: #ffffff;
  --soft: #f5f8fb;
  --ink: #17314d;
  --muted: #607087;
  --line: #dce5ee;
  --border: #dce5ee;
  --primary: #0f9f83;
  --primary-dark: #0b7d68;
  --green: #22c98a;
  --green-soft: #e7f9f2;
  --gold-soft: #fff6d9;
  --pink: #ef4e66;
  --pink-soft: #fff0f3;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 8px 18px rgba(20, 49, 76, 0.1);
  --shadow-soft: 0 12px 30px rgba(20, 49, 76, 0.12);
  --shadow-strong: 0 28px 80px rgba(0, 0, 0, 0.38);
  --grad-candy: linear-gradient(145deg, #7c5cff, #38bdf8);
  color: var(--ink);
  line-height: 1.5;
}

.mini-game-overlay p,
.mini-game-overlay h2,
.mini-game-overlay strong {
  margin-top: 0;
}

.mini-game-overlay button {
  min-height: 42px;
}