:root {
  --bg1: #0b1220;
  --bg2: #111f3b;
  --ink: #eaf2ff;
  --accent: #ffb703;
  --accent2: #43e97b;
  --card: rgba(9, 20, 42, 0.82);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 20% 15%, #19305c 0%, var(--bg1) 42%), linear-gradient(135deg, var(--bg1), var(--bg2));
  min-height: 100vh;
}
.bg-shape { position: fixed; border-radius: 50%; filter: blur(45px); opacity: .2; pointer-events: none; }
.bg-shape.a { width: 280px; height: 280px; background: #ffb703; right: -70px; top: -60px; }
.bg-shape.b { width: 360px; height: 360px; background: #43e97b; left: -130px; bottom: -150px; }
.shell { width: min(1080px, 94vw); margin: 26px auto 40px; display: grid; gap: 18px; }
.game-leaderboard-row { display: grid; gap: 14px; align-items: start; }
.hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: .4px; }
.hero p { max-width: 760px; margin: 10px 0; opacity: .95; }
.hero #confirmBanner { color: #43e97b; font-weight: 700; opacity: 1; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .9rem; }
.play-wrap, .card { background: var(--card); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; backdrop-filter: blur(10px); }
.play-wrap { width: min(100%, 560px); justify-self: center; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
button, .go-back { background: linear-gradient(90deg, var(--accent), #ffd166); color: #1f1300; border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.secondary { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.start-overlay-btn {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 12px 26px;
  font-size: 1.03rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #11284f, #0e1f3f);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.overlay { position: absolute; inset: 0; display: grid; place-content: center; background: rgba(2,8,20,.84); text-align: center; padding: 16px; }
.countdown-overlay {
  z-index: 4;
  background: rgba(2, 8, 20, .72);
}
.countdown-text {
  margin: 0;
  font-size: clamp(3rem, 14vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: #ffd166;
  text-shadow: 0 0 22px rgba(255, 190, 11, .45);
}
.play-wrap { position: relative; overflow: hidden; }
.hidden { display: none; }
#resultView { position: relative; z-index: 2; }
.score-kicker { letter-spacing: .18em; font-weight: 700; opacity: .9; margin: 0; }
.score-main { margin: 8px 0 16px; font-size: clamp(2.6rem, 8vw, 4.3rem); line-height: 1; color: #ffd166; text-shadow: 0 0 24px rgba(255, 190, 11, .35); }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.result-actions.delayed-show {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.result-actions.delayed-show.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.stars-burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.star {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7bf 0%, #ffd166 50%, #ffb703 100%);
  transform: translate(-50%, -50%) translate(0, 0) scale(1);
  opacity: 0;
  animation: starburst 3600ms ease-out forwards;
}
@keyframes starburst {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.8); }
  18% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--dx) * .28), calc(var(--dy) * .28)) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.48); }
}
#submitForm { display: grid; gap: 8px; width: min(360px, 88vw); margin: 0 auto; }
#submitForm.hidden { display: none; }
input[type="text"], input[type="email"] { padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); color: #fff; }
.terms { font-size: .9rem; display: flex; gap: 8px; justify-content: center; }
.submit-card { text-align: center; }
.submit-card h3 { margin-top: 0; }
.submit-score-label { margin: 0 0 12px; opacity: .95; }
.grid { display: grid; gap: 14px; }
.card { padding: 14px; }
.row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: .94rem; }
.row:last-child { border-bottom: 0; }
.msg { min-height: 20px; }
.shell-thanks { width: min(1080px, 94vw); }
.thanks-card, .promo-card { text-align: center; }
.thanks-card h1 { margin-top: 6px; margin-bottom: 10px; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.thanks-lead { font-size: 1.08rem; margin: 0 0 8px; color: #fff3bf; font-weight: 700; }
.thanks-sub { max-width: 760px; margin: 0 auto 14px; opacity: .95; }
.thanks-debug { margin: 0 0 14px; }
.thanks-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.promo-card h2 { margin-top: 4px; }
.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.promo-item {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease;
}
.promo-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.32); }
.promo-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(255,255,255,.08);
  display: block;
}
.promo-item h3 {
  margin: 10px 10px 2px;
  font-size: .96rem;
  line-height: 1.25;
  min-height: 2.5em;
}
.promo-price {
  margin: 0 10px 10px;
  color: #ffd166;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .shell { width: min(1240px, 94vw); }
  .hero {
    width: min(100%, 938px);
    justify-self: center;
  }
  .game-leaderboard-row {
    grid-template-columns: minmax(420px, 560px) minmax(280px, 360px);
    justify-content: center;
    gap: 18px;
  }
  .play-wrap { width: 100%; justify-self: stretch; }
  .grid {
    grid-template-columns: minmax(420px, 560px) minmax(280px, 360px);
    justify-content: center;
    gap: 18px;
  }
}
@media (max-width: 1023px) { .grid { grid-template-columns: 1fr; } }