.game-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.72), transparent 32rem),
    linear-gradient(145deg, #ffe491 0%, #fff4c8 45%, #f2d67b 100%);
}
.game-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 58px auto 80px;
}
.game-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  margin-bottom: 30px;
}
.game-eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  font-size: .8rem;
  color: #125d2a;
}
.game-intro h1 {
  margin: 0;
  max-width: 900px;
  color: #571821;
  font-size: clamp(2.5rem, 7vw, 5.7rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.game-intro > div > p:not(.game-eyebrow) {
  max-width: 720px;
  color: #6f5942;
  font-size: clamp(1rem, 2vw, 1.24rem);
  line-height: 1.65;
}
.game-intro-badge {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  box-shadow: 0 24px 70px rgba(87,24,33,.15);
}
.game-intro-badge img { width: 74%; height: 74%; object-fit: contain; }
.game-card {
  width: min(900px, 100%);
  margin-inline: auto;
  overflow: hidden;
  background: rgba(255,254,250,.9);
  border: 1px solid rgba(87,24,33,.1);
  border-radius: 32px;
  box-shadow: 0 24px 70px rgba(87,24,33,.15);
}
.game-toolbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(87,24,33,.1);
}
.game-stat { padding: 18px 22px; background: rgba(255,255,255,.94); }
.game-stat > span { display: block; color: #125d2a; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 900; }
.game-corn-value { display: inline-flex !important; align-items: baseline; gap: .18em; white-space: nowrap; }
.game-corn-value span { display: inline; color: inherit; text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: inherit; }
.game-sound-stat {
  appearance: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font: inherit;
}
.game-sound-stat:hover { background: #fff8df; }
.game-sound-stat:focus-visible { outline: 3px solid #24853f; outline-offset: -4px; }
.game-sound-stat strong { white-space: nowrap; }
.game-stat strong { display: block; margin-top: 4px; color: #571821; font-size: 1.35rem; }
.game-canvas-wrap {
  position: relative;
  width: min(calc(100% - 48px), 680px);
  aspect-ratio: 1 / 1;
  margin: 28px auto 20px;
  overflow: hidden;
  border-radius: 0;
  background: #f5d763;
  box-shadow: inset 0 0 0 1px rgba(87,24,33,.12), 0 16px 46px rgba(87,24,33,.12);
  touch-action: none;
}
.game-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.game-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31,40,19,.54);
  backdrop-filter: blur(6px);
}
.game-overlay.is-visible { display: flex; }
.game-overlay-panel {
  width: min(520px, 100%);
  padding: 34px;
  border-radius: 28px;
  text-align: center;
  background: rgba(255,254,250,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}
.game-overlay-panel h2 { margin: 0 0 12px; color: #571821; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -.04em; }
.game-overlay-panel p:not(.game-eyebrow) { color: #6f5942; line-height: 1.55; }
.game-overlay-icon { width: 110px; height: 110px; object-fit: contain; }
.game-primary-button,
.game-secondary-button {
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-primary-button { border: 0; color: #fff; background: linear-gradient(135deg, #24853f, #125d2a); box-shadow: 0 12px 28px rgba(18,93,42,.23); }
.game-secondary-button { color: #571821; background: #fff8df; border: 1px solid rgba(87,24,33,.16); }
.game-primary-button:hover,
.game-secondary-button:hover { transform: translateY(-2px); }
.game-overlay-actions,
.game-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.game-controls { width: 236px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 18px auto; }
.game-controls button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 19px;
  background: #fff8df;
  color: #571821;
  font-size: 1.7rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(87,24,33,.13);
}
.game-controls button:active { transform: scale(.95); background: #ffe799; }
.game-actions { padding: 0 20px 30px; }
.game-tips { margin-top: 32px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.game-tips article { padding: 26px; background: rgba(255,254,250,.78); border-radius: 26px; border: 1px solid rgba(87,24,33,.1); }
.game-tips article > span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f4bf2a; color: #571821; font-weight: 900; }
.game-tips h2 { margin: 18px 0 8px; color: #571821; font-size: 1.2rem; }
.game-tips p { margin: 0; color: #6f5942; line-height: 1.55; }
@media (max-width: 760px) {
  .game-shell { width: min(100% - 18px, 1180px); margin-top: 34px; }
  .game-intro { grid-template-columns: 1fr; }
  .game-intro-badge { display: none; }
  .game-toolbar { grid-template-columns: repeat(2,1fr); }
  .game-sound-stat { grid-column: 1 / -1; align-items: center; }
  .game-canvas-wrap { width: calc(100% - 20px); margin: 14px auto; border-radius: 0; }
  .game-card { border-radius: 22px; }
  .game-tips { grid-template-columns: 1fr; }
  .game-stat { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-page *, .game-page *::before, .game-page *::after { transition: none !important; }
}