:root {
  --ink: #013244;
  --muted: #4f7280;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-strong: #ffffff;
  --brand-black: #000000;
  --brand-deep: #013c50;
  --brand-deeper: #012c3c;
  --brand-teal: #51a8b2;
  --brand-teal-light: #8bd0d7;
  --accent: #ffd166;
  --accent-hot: #ff8a3d;
  --danger: #ff5f7a;
  --shadow: 0 24px 70px rgba(1, 60, 80, 0.2);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 8% 18%, rgba(81, 168, 178, 0.24) 0 5rem, transparent 5.2rem),
    radial-gradient(circle at 92% 12%, rgba(255, 209, 102, 0.32) 0 6rem, transparent 6.2rem),
    radial-gradient(circle at 84% 82%, rgba(81, 168, 178, 0.18) 0 7rem, transparent 7.3rem),
    linear-gradient(135deg, #f5fdff 0%, #e9f8fb 45%, #fff8e6 100%);
}

body.result-showcase-active {
  overflow: hidden;
}

body.result-showcase-active::before {
  position: fixed;
  z-index: 8000;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  content: "";
}

.fireworks-layer {
  position: fixed;
  z-index: 8500;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.fireworks-layer.winner-mode {
  z-index: 12500;
}

.fireworks-layer.show {
  display: block;
}

.firework {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  background:
    radial-gradient(circle, hsl(var(--hue) 100% 58%) 0 0.14rem, transparent 0.18rem) 50% 0 / 100% 100%,
    radial-gradient(circle, hsl(calc(var(--hue) + 58) 100% 64%) 0 0.14rem, transparent 0.18rem) 100% 50% / 100% 100%,
    radial-gradient(circle, hsl(calc(var(--hue) + 128) 100% 62%) 0 0.14rem, transparent 0.18rem) 50% 100% / 100% 100%,
    radial-gradient(circle, hsl(calc(var(--hue) + 210) 100% 70%) 0 0.14rem, transparent 0.18rem) 0 50% / 100% 100%,
    conic-gradient(from 0deg, transparent 0 8deg, hsl(var(--hue) 100% 62%) 9deg 11deg, transparent 12deg 42deg, #ffffff 43deg 45deg, transparent 46deg 88deg, hsl(calc(var(--hue) + 80) 100% 62%) 89deg 92deg, transparent 93deg 136deg, #ffd166 137deg 140deg, transparent 141deg 184deg, hsl(calc(var(--hue) + 170) 100% 64%) 185deg 188deg, transparent 189deg 236deg, #ffffff 237deg 240deg, transparent 241deg 292deg, hsl(calc(var(--hue) + 250) 100% 64%) 293deg 296deg, transparent 297deg 360deg);
  filter: drop-shadow(0 0 0.7rem hsl(var(--hue) 100% 62%));
  animation: fireworkBurst 1.15s ease-out forwards;
}

body.result-showcase-active::after {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: clamp(1rem, 5vh, 3rem);
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 0.8rem 1.15rem;
  color: #ffffff;
  font-weight: 900;
  background: var(--brand-deep);
  box-shadow: 0 14px 32px rgba(1, 60, 80, 0.28);
  content: "Press Space or Enter to continue";
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  color: var(--brand-deep);
  font: inherit;
  font-weight: 800;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(1, 60, 80, 0.16);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(1, 60, 80, 0.22);
}

button:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

.video-overlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000000;
}

.video-overlay video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000000;
}

.winner-announcement {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.winner-announcement > div {
  position: relative;
  z-index: 13000;
  width: min(100%, 42rem);
  border: 3px solid rgba(255, 209, 102, 0.88);
  border-radius: 0.85rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  text-align: center;
  background: #ffffff;
  box-shadow: 0 0 4rem rgba(255, 209, 102, 0.55);
  pointer-events: auto;
}

.winner-announcement p {
  margin-bottom: 0.6rem;
  color: var(--brand-deep);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.winner-announcement h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(2rem, 5vw, 4rem);
}

.winner-announcement span {
  color: #b91c1c;
}

.setup-screen {
  display: grid;
  min-height: 100vh;
  padding: 1rem;
  place-items: center;
}

.setup-card {
  display: grid;
  width: min(100%, 32rem);
  gap: 1rem;
  border: 1px solid rgba(81, 168, 178, 0.28);
  border-radius: 0.75rem;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.setup-logo {
  width: min(18rem, 80%);
  height: auto;
}

.setup-card h1 {
  font-size: clamp(2.2rem, 7vw, 4rem);
}

.setup-card label {
  display: grid;
  gap: 0.4rem;
  color: var(--brand-deep);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.setup-card input {
  min-height: 3.4rem;
  border: 2px solid rgba(81, 168, 178, 0.38);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--brand-deep);
  font: inherit;
  font-size: 2rem;
  font-weight: 900;
}

.setup-card input:focus {
  outline: 4px solid rgba(255, 209, 102, 0.75);
  outline-offset: 2px;
}

.page-shell {
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem clamp(0.75rem, 2vw, 2rem) 2rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(13rem, 22rem) minmax(20rem, 1fr) minmax(16rem, 20rem);
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-bottom: 1.2rem;
}

.brand-heading {
  text-align: center;
}

.brand-logo {
  width: clamp(13rem, 22vw, 20rem);
  height: auto;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
}

h2 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(5.5rem, 1fr));
  gap: 0.7rem;
}

.stats .event-date {
  grid-column: 1 / -1;
}

.stats div {
  border: 2px solid rgba(139, 208, 215, 0.28);
  border-radius: 0.5rem;
  padding: 0.8rem;
  text-align: center;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(1, 60, 80, 0.14);
}

.stats span {
  display: block;
  font-size: 2rem;
  font-weight: 900;
}

.stats .event-date span {
  font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  white-space: nowrap;
}

.stats small {
  color: var(--brand-deep);
  font-weight: 800;
  text-transform: uppercase;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(28rem, 1.35fr) minmax(18rem, 0.75fr);
  gap: 1rem;
}

.spinner-panel,
.prize-panel,
.history-panel,
.board-panel {
  border: 1px solid rgba(81, 168, 178, 0.28);
  border-radius: 0.5rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.prize-panel {
  padding: 1rem;
}

.participant-field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(81, 168, 178, 0.28);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(1, 60, 80, 0.1);
}

.participant-field span {
  color: var(--brand-deep);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.participant-field input {
  width: 100%;
  min-height: 3rem;
  border: 2px solid rgba(81, 168, 178, 0.38);
  border-radius: 0.45rem;
  padding: 0.45rem 0.7rem;
  color: var(--brand-deep);
  font: inherit;
  font-size: 1.8rem;
  font-weight: 900;
}

.participant-field input:focus {
  outline: 4px solid rgba(255, 209, 102, 0.75);
  outline-offset: 2px;
}

.prize-list {
  display: grid;
  gap: 0.65rem;
}

.prize-card {
  border: 1px solid rgba(81, 168, 178, 0.24);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(1, 60, 80, 0.1);
  overflow: hidden;
}

.prize-card.redeemed {
  opacity: 0.82;
  background: #eef8fa;
}

.prize-card-button {
  display: flex;
  width: 100%;
  min-height: auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  border-radius: 0;
  padding: 0.75rem;
  text-align: left;
  box-shadow: none;
}

.prize-card-button span {
  display: grid;
  gap: 0.15rem;
}

.prize-card-button small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.prize-card-button b {
  white-space: nowrap;
  color: #001923;
}

.delete-prize-button {
  width: calc(100% - 1.5rem);
  min-height: 38px;
  margin: 0 0.75rem 0.75rem;
  border-radius: 0.45rem;
  color: #ffffff;
  background: #b91c1c;
  box-shadow: none;
}

.delete-prize-button:hover:not(:disabled) {
  background: #991b1b;
}

.winner-form {
  display: grid;
  gap: 0.55rem;
  padding: 0 0.75rem 0.75rem;
}

.winner-form label {
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.winner-form input {
  width: 100%;
  min-height: 42px;
  border: 2px solid rgba(81, 168, 178, 0.38);
  border-radius: 0.45rem;
  padding: 0.65rem 0.75rem;
  color: var(--brand-deep);
  font: inherit;
  font-weight: 800;
}

.winner-form input:focus {
  outline: 4px solid rgba(255, 209, 102, 0.75);
  outline-offset: 2px;
}

.winner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.winner-actions button {
  min-height: 38px;
  padding: 0.55rem 0.7rem;
}

.redeemed-prizes {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(81, 168, 178, 0.28);
}

.redeemed-prizes h3 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  text-transform: uppercase;
}

.loser-action {
  margin-top: 1rem;
}

.loser-button {
  width: 100%;
  color: #ffffff;
  background: linear-gradient(135deg, #b91c1c, #ff8a3d);
}

.empty-prizes {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.spinner-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

body.result-showcase-active .spinner-panel {
  overflow: visible;
}

.spinner-panel::before,
.spinner-panel::after {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  content: "";
  opacity: 0.26;
  pointer-events: none;
}

.spinner-panel::before {
  left: -2.5rem;
  top: 1rem;
  background: repeating-linear-gradient(45deg, var(--brand-teal) 0 1rem, #ffffff 1rem 1.7rem);
}

.spinner-panel::after {
  right: -2rem;
  bottom: -2rem;
  background: repeating-linear-gradient(-45deg, var(--brand-deep) 0 1rem, var(--accent) 1rem 1.7rem);
}

.message {
  min-height: 2rem;
  margin-bottom: 1rem;
  color: var(--brand-deep);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
}

.ball-stage {
  display: grid;
  min-height: clamp(17rem, 38vw, 26rem);
  place-items: center;
  perspective: 900px;
}

.bingo-ball {
  position: relative;
  display: grid;
  width: clamp(13rem, 32vw, 22rem);
  aspect-ratio: 1;
  place-items: center;
  border: 10px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 19%, rgba(255, 255, 255, 0.98) 0 0.72rem, transparent 0.9rem),
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.72) 0 3rem, transparent 6.2rem),
    radial-gradient(circle at 33% 28%, #92eff7 0 14%, #3cc8df 28%, transparent 46%),
    radial-gradient(circle at 64% 68%, #148aad 0 14%, #05617f 46%, #013c50 100%);
  box-shadow:
    inset -34px -40px 58px rgba(0, 34, 52, 0.58),
    inset 20px 18px 42px rgba(255, 255, 255, 0.28),
    inset 0 0 0 2px rgba(255, 255, 255, 0.36),
    0 28px 44px rgba(20, 138, 173, 0.28),
    0 56px 84px rgba(1, 60, 80, 0.34);
  transform-style: preserve-3d;
}

.bingo-ball::before,
.bingo-ball::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.bingo-ball::before {
  z-index: 0;
  inset: 5%;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.88) 0 8%, rgba(255, 255, 255, 0.32) 9% 18%, transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 45%);
  mix-blend-mode: screen;
}

.bingo-ball::after {
  z-index: 0;
  inset: 2%;
  background: radial-gradient(circle at 70% 82%, rgba(0, 33, 50, 0.38), transparent 46%);
  box-shadow: inset -16px -18px 32px rgba(0, 33, 50, 0.24);
}

.ball-shine {
  position: absolute;
  z-index: 1;
  inset: 9%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 27% 18%, rgba(255, 255, 255, 0.78) 0 9%, rgba(255, 255, 255, 0.24) 10% 19%, transparent 34%),
    radial-gradient(circle at 68% 80%, rgba(0, 33, 50, 0.2), transparent 42%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.bingo-ball strong {
  z-index: 2;
  display: grid;
  width: 54%;
  aspect-ratio: 1;
  place-items: center;
  border: 8px solid #eaf8fb;
  border-radius: 50%;
  color: var(--brand-deep);
  font-size: clamp(4rem, 12vw, 8.6rem);
  line-height: 1;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0 36%, #edf8fa 68%, #d5edf1 100%);
  box-shadow:
    inset 8px 10px 20px rgba(255, 255, 255, 0.88),
    inset -10px -14px 20px rgba(1, 60, 80, 0.14),
    0 8px 18px rgba(0, 33, 50, 0.28),
    0 0 0 6px rgba(255, 255, 255, 0.28),
    0 0 0 9px rgba(1, 60, 80, 0.22);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.bingo-ball.spinning {
  animation: spinBounce 8s linear both;
}

.bingo-ball.result-pop {
  animation: resultPop 620ms cubic-bezier(0.17, 0.9, 0.24, 1.22) both;
}

.bingo-ball.result-showcase {
  position: fixed;
  z-index: 9500;
  top: 50%;
  left: 50%;
  width: clamp(19rem, 56vw, 34rem);
  backface-visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
  overflow: visible;
  animation:
    showcaseEnter 520ms cubic-bezier(0.17, 0.9, 0.24, 1.2) both,
    showcaseFlash 760ms ease-in-out 520ms infinite alternate;
}

.bingo-ball.result-showcase::before {
  inset: -18%;
  background:
    radial-gradient(circle, #ffffff 0 0.18rem, transparent 0.22rem) 8% 18% / 18% 18%,
    radial-gradient(circle, var(--accent) 0 0.2rem, transparent 0.25rem) 82% 22% / 20% 20%,
    radial-gradient(circle, #ffffff 0 0.16rem, transparent 0.21rem) 18% 78% / 16% 16%,
    radial-gradient(circle, var(--brand-teal-light) 0 0.22rem, transparent 0.28rem) 90% 72% / 22% 22%,
    radial-gradient(circle, var(--accent) 0 0.17rem, transparent 0.22rem) 50% 4% / 18% 18%;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  animation: sparkleBurst 900ms ease-in-out infinite;
}

.bingo-ball.result-showcase::after {
  inset: -10%;
  background:
    conic-gradient(from 0deg, transparent 0 12deg, rgba(255, 209, 102, 0.8) 13deg 15deg, transparent 16deg 74deg, rgba(255, 255, 255, 0.9) 75deg 77deg, transparent 78deg 162deg, rgba(139, 208, 215, 0.8) 163deg 166deg, transparent 167deg 250deg, rgba(255, 209, 102, 0.72) 251deg 253deg, transparent 254deg 360deg);
  filter: drop-shadow(0 0 0.6rem rgba(255, 209, 102, 0.55));
  opacity: 0.82;
  animation: sparkleSpin 2s linear infinite;
}

.controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.primary-button {
  color: #001923;
  background: linear-gradient(135deg, var(--accent), var(--brand-teal-light));
  font-size: 1.15rem;
}

.history-panel {
  max-height: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.9);
}

.previous-list {
  display: flex;
  max-height: 24rem;
  margin: 0;
  padding: 0.2rem 0.2rem 0.4rem;
  flex-wrap: wrap;
  gap: 0.45rem;
  overflow: auto;
  list-style: none;
}

.previous-list li,
.number-cell {
  display: grid;
  place-items: center;
  font-weight: 900;
}

.previous-list li {
  width: 2.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #ffffff;
  background: var(--brand-deep);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.previous-list li:first-child {
  color: #001923;
  background: var(--accent);
}

.board-panel {
  grid-column: 1 / -1;
  padding: 1rem;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.section-heading.stacked {
  display: block;
}

.section-heading p {
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-weight: 700;
}

.number-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(2.25rem, 1fr));
  gap: 0.45rem;
}

.number-cell {
  min-height: 3rem;
  border: 2px solid rgba(81, 168, 178, 0.22);
  border-radius: 0.45rem;
  color: var(--brand-deep);
  background: var(--panel-strong);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.number-cell.drawn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-teal), var(--brand-deep));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.number-cell.latest {
  color: #001923;
  background: linear-gradient(135deg, var(--accent), #ffffff);
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(81, 168, 178, 0.42), 0 12px 24px rgba(0, 0, 0, 0.24);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes spinBounce {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(10800deg) scale(1);
  }
}

@keyframes resultPop {
  0% {
    transform: scale(0.82);
  }
  58% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes showcaseEnter {
  0% {
    transform: translate(-50%, -50%) scale(0.3) rotate(-22deg);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes showcaseFlash {
  0% {
    filter: brightness(1);
    box-shadow:
      inset -34px -40px 58px rgba(0, 34, 52, 0.58),
      inset 20px 18px 42px rgba(255, 255, 255, 0.28),
      inset 0 0 0 2px rgba(255, 255, 255, 0.36),
      0 0 0 0 rgba(255, 209, 102, 0),
      0 34px 70px rgba(1, 60, 80, 0.36);
  }
  100% {
    filter: brightness(1.16);
    box-shadow:
      inset -34px -40px 58px rgba(0, 34, 52, 0.5),
      inset 20px 18px 42px rgba(255, 255, 255, 0.35),
      inset 0 0 0 2px rgba(255, 255, 255, 0.45),
      0 0 0 1rem rgba(255, 209, 102, 0.28),
      0 0 4rem rgba(81, 168, 178, 0.62),
      0 42px 90px rgba(1, 60, 80, 0.42);
  }
}

@keyframes fireworkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }
  14% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(28deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18) rotate(42deg);
  }
}

@keyframes sparkleBurst {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.94) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.08) rotate(12deg);
  }
}

@keyframes sparkleSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
  }

  .stats {
    grid-column: 1 / -1;
  }

  .game-layout {
    grid-template-columns: minmax(17rem, 0.8fr) minmax(24rem, 1.2fr);
  }

  .history-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .stats {
    width: auto;
  }

  .brand-logo {
    width: 14rem;
  }

  .brand-heading {
    text-align: left;
  }

  .game-layout {
    grid-template-columns: 1fr;
  }

  .history-panel {
    order: 4;
  }

  .board-panel {
    order: 3;
  }

  .prize-panel {
    order: 2;
  }
}

@media (max-width: 560px) {
  .page-shell {
    width: min(100% - 1rem, 1180px);
    padding-top: 0.75rem;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .number-board {
    grid-template-columns: repeat(5, minmax(2.5rem, 1fr));
    gap: 0.35rem;
  }

  .number-cell {
    min-height: 2.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}