/* =============================================
   sample.css — the Sample Game at /sample
   ---------------------------------------------
   Aaron: "I want the UI to look similar to the actual game, but make it super
   clean." So: the game's navy and gold, the game's answer buttons, the game's
   running score — and then nothing else. No bubbles, no floaters, no second
   idea anywhere on a screen. One thing to read, one thing to tap.

   Two rules carried over from CLAUDE.md, and they are not style preferences:
     • Back / Exit buttons go BOTTOM-LEFT. The top strip of an iPhone sits
       under the status bar and the Dynamic Island, and taps there hit the
       system UI instead of the button.
     • A screen that fades in animates OPACITY ONLY. A transform on an ancestor
       becomes the containing block for position:fixed children and drags the
       fixed Back button around with it.
   ============================================= */

:root {
  --sg-bg: #0b1220;
  --sg-bg2: #111c35;
  --sg-ink: #eef2f8;
  --sg-muted: #93a3bb;
  --sg-gold: #e6b830;
  --sg-gold-soft: #f7d873;
  --sg-blue: #4a90d9;
  --sg-green: #34d399;
  --sg-green-deep: #0f6848;
  --sg-red: #f87171;
  --sg-red-deep: #7f1d1d;
  --sg-card: rgba(255, 255, 255, 0.055);
  --sg-line: rgba(255, 255, 255, 0.11);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--sg-bg);
  color: var(--sg-ink);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* A soft gold/blue bloom behind everything, the same one the taster uses, so
   the page never reads as flat navy. */
body::before {
  content: '';
  position: fixed;
  inset: -20vh -20vw auto;
  height: 90vh;
  background:
    radial-gradient(ellipse at 28% 0%, rgba(230, 184, 48, 0.18), transparent 58%),
    radial-gradient(ellipse at 76% 12%, rgba(74, 144, 217, 0.20), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Screens ───────────────────────────────────────────────────────────────── */
.sg-screen {
  display: none;
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: 26px 18px calc(104px + env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sg-screen.active { display: flex; animation: sgFade 300ms ease both; }
@keyframes sgFade { from { opacity: 0; } to { opacity: 1; } }

.sg-wrap { width: 100%; max-width: 560px; margin: 0 auto; }

/* ── Type ──────────────────────────────────────────────────────────────────── */
.sg-kicker {
  font-size: 12px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sg-gold-soft); margin-bottom: 12px;
}
.sg-h1 { font-size: clamp(30px, 8vw, 46px); font-weight: 900; line-height: 1.08; letter-spacing: -0.01em; }
.sg-h2 { font-size: clamp(22px, 5.6vw, 30px); font-weight: 900; line-height: 1.16; }
.sg-sub { font-size: 15px; color: var(--sg-muted); line-height: 1.55; margin-top: 10px; }
.sg-gold { color: var(--sg-gold); }

.sg-logo { width: 148px; max-width: 54vw; height: auto; margin: 0 auto 18px; display: block; }

/* ── The neon promise ──────────────────────────────────────────────────────── */
/* "in neon writing (keep it classy, though)" — gold on navy with a breathing
   glow, not a nightclub. It is a thin rule box rather than loose text so it
   reads as a sign above the button, which is what it is.
   @media (prefers-reduced-motion) kills the pulse; the glow stays. */
.sg-neon {
  display: block;
  max-width: 540px;
  margin: 0 auto 20px;
  padding: 13px 18px;
  border: 1.5px solid rgba(230, 184, 48, 0.55);
  border-radius: 14px;
  background: rgba(230, 184, 48, 0.055);
  color: var(--sg-gold-soft);
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(247, 216, 115, 0.55), 0 0 22px rgba(230, 184, 48, 0.28);
  box-shadow: 0 0 16px rgba(230, 184, 48, 0.16), inset 0 0 18px rgba(230, 184, 48, 0.07);
  animation: sgNeon 3.4s ease-in-out infinite;
}
@keyframes sgNeon {
  0%, 100% { box-shadow: 0 0 14px rgba(230, 184, 48, 0.14), inset 0 0 16px rgba(230, 184, 48, 0.06); }
  50%      { box-shadow: 0 0 26px rgba(230, 184, 48, 0.30), inset 0 0 22px rgba(230, 184, 48, 0.11); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-neon { animation: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  border: none; border-radius: 15px;
  background: linear-gradient(135deg, var(--sg-gold), #c9971f);
  color: #14233f;
  font-family: inherit; font-size: 17px; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(230, 184, 48, 0.30);
  transition: transform 110ms ease, box-shadow 110ms ease, opacity 110ms ease;
}
.sg-btn:active { transform: scale(0.97); }
.sg-btn:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.sg-btn-wide { width: 100%; max-width: 420px; }
.sg-btn-big { font-size: 21px; padding: 20px 40px; border-radius: 18px; }
.sg-btn-ghost {
  background: transparent; color: var(--sg-ink);
  border: 1.5px solid var(--sg-line); box-shadow: none; font-weight: 800;
}

.sg-cta-stack { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 22px; }

/* Back / Leave. BOTTOM-LEFT, always — see the header of this file. */
.sg-exit {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  padding: 11px 18px;
  border: 1.5px solid var(--sg-line); border-radius: 13px;
  background: rgba(11, 18, 32, 0.86);
  color: var(--sg-muted);
  font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.sg-exit:active { transform: scale(0.96); }

/* The mute switch sits bottom-RIGHT, so it can never be confused for Back. */
.sg-mute {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 44px; height: 44px;
  border: 1.5px solid var(--sg-line); border-radius: 50%;
  background: rgba(11, 18, 32, 0.86);
  color: var(--sg-muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
}
.sg-mute:active { transform: scale(0.94); }

/* ── Intake ────────────────────────────────────────────────────────────────── */
.sg-steps {
  display: flex; justify-content: center; gap: 7px; margin-bottom: 22px;
}
.sg-steps i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 200ms ease, transform 200ms ease;
}
.sg-steps i.done { background: var(--sg-gold); }
.sg-steps i.now  { background: var(--sg-gold-soft); transform: scale(1.5); }

.sg-field { margin: 26px auto 0; max-width: 420px; }
.sg-field input {
  width: 100%;
  padding: 17px 18px;
  border: 2px solid var(--sg-line); border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--sg-ink);
  font-family: inherit; font-size: 19px; font-weight: 700; text-align: center;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.sg-field input::placeholder { color: rgba(147, 163, 187, 0.65); font-weight: 600; }
.sg-field input:focus { border-color: var(--sg-gold); background: rgba(255, 255, 255, 0.075); }
.sg-field-sub { font-size: 13px; color: var(--sg-muted); margin-top: 10px; }
.sg-field-err { font-size: 13.5px; color: var(--sg-red); font-weight: 800; margin-top: 10px; min-height: 18px; }

/* ── The playing screen ────────────────────────────────────────────────────── */
.sg-play { justify-content: flex-start; padding-top: calc(18px + env(safe-area-inset-top, 0px)); }

.sg-playhead { width: 100%; max-width: 560px; margin: 0 auto 16px; }

.sg-scoreline {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; font-weight: 900;
}
.sg-qcount { color: var(--sg-muted); letter-spacing: 0.04em; }
.sg-running {
  color: var(--sg-gold);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
}
.sg-running b { font-size: 24px; }
/* The score counting up after a right answer. */
.sg-running.bump { animation: sgBump 420ms ease; }
@keyframes sgBump {
  0% { transform: scale(1); }
  38% { transform: scale(1.22); color: var(--sg-green); }
  100% { transform: scale(1); }
}

/* The dot strip: one per question, filled as they go. */
.sg-dots { display: flex; gap: 6px; justify-content: center; margin: 12px 0 10px; }
.sg-dots i {
  flex: 1 1 0; max-width: 42px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.sg-dots i.now   { background: var(--sg-gold); }
.sg-dots i.right { background: var(--sg-green); }
.sg-dots i.wrong { background: var(--sg-red); }

/* The clock. Turns amber at half and red at a quarter, so it is readable
   without reading the number. */
.sg-timer { display: flex; align-items: center; gap: 10px; }
.sg-timer-track {
  flex: 1 1 auto; height: 7px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.11); overflow: hidden;
}
.sg-timer-fill {
  height: 100%; width: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--sg-green), #6ee7b7);
  transition: width 100ms linear, background 300ms ease;
}
.sg-timer.warn .sg-timer-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sg-timer.crit .sg-timer-fill { background: linear-gradient(90deg, #dc2626, var(--sg-red)); }
.sg-timer-num {
  min-width: 38px; text-align: right;
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--sg-muted);
}
.sg-timer.crit .sg-timer-num { color: var(--sg-red); }

/* The question itself. */
.sg-qcard {
  width: 100%; max-width: 560px; margin: 0 auto 16px;
  padding: 22px 20px;
  border: 1.5px solid var(--sg-line); border-radius: 18px;
  background: var(--sg-card);
  position: relative;
}
.sg-worth {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 4px 13px; border-radius: 999px;
  background: linear-gradient(135deg, var(--sg-gold), #c9971f);
  color: #14233f; font-size: 12px; font-weight: 900; letter-spacing: 0.04em;
  white-space: nowrap;
}
.sg-q {
  font-size: clamp(18px, 4.6vw, 23px); font-weight: 800; line-height: 1.42;
}

/* The answers. Same four-button shape as the real game. */
.sg-answers { width: 100%; max-width: 560px; margin: 0 auto; display: grid; gap: 10px; }
@media (min-width: 520px) { .sg-answers { grid-template-columns: 1fr 1fr; } }

.sg-ans {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 16px;
  border: 2px solid var(--sg-line); border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--sg-ink);
  font-family: inherit; font-size: 18px; font-weight: 800; text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, transform 110ms ease;
}
.sg-ans:active { transform: scale(0.985); }
.sg-ans .sg-key {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.09);
  font-size: 14px; font-weight: 900; color: var(--sg-gold-soft);
}
.sg-ans .sg-tx { flex: 1 1 auto; min-width: 0; }
/* Hebrew answers (Aaron, 2026-11-09: "coming out small"). Hebrew with nikud
   reads much smaller than English at the same size, so it gets more. */
.sg-ans .sg-tx.sg-he { font-size: 25px; line-height: 1.35; }

/* Aaron: "correct flashes green if chosen, and red if it's the wrong answer
   (and then it highlights the correct answer)". So three states, and the
   correct one is always shown whichever way the question went. */
.sg-ans.right {
  border-color: var(--sg-green);
  background: rgba(52, 211, 153, 0.18);
  animation: sgFlashGreen 620ms ease;
}
.sg-ans.wrong {
  border-color: var(--sg-red);
  background: rgba(248, 113, 113, 0.18);
  animation: sgShake 420ms ease;
}
.sg-ans.dim { opacity: 0.38; }
@keyframes sgFlashGreen {
  0%, 100% { background: rgba(52, 211, 153, 0.18); }
  30%      { background: rgba(52, 211, 153, 0.46); }
}
@keyframes sgShake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-7px); }
  48% { transform: translateX(6px); }
  74% { transform: translateX(-3px); }
}

/* The verdict line under the answers. */
.sg-react {
  width: 100%; max-width: 560px; margin: 16px auto 0;
  min-height: 48px;
  font-size: 17px; font-weight: 900; line-height: 1.4;
}
.sg-react.good { color: var(--sg-green); }
.sg-react.bad  { color: var(--sg-red); }
.sg-react .sg-answer-is { display: block; color: var(--sg-ink); font-weight: 800; margin-top: 4px; }
.sg-react .sg-answer-is b { color: var(--sg-green); }
.sg-react .sg-gain { color: var(--sg-gold); }

/* ── The score screen ──────────────────────────────────────────────────────── */
/* The ring is one conic-gradient; --p is the percentage. */
.sg-ring {
  width: 168px; height: 168px; margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(var(--sg-gold) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.10) 0);
  position: relative;
}
.sg-ring::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--sg-bg);
}
.sg-ring b, .sg-ring small { position: relative; z-index: 1; display: block; }
.sg-ring b { font-size: 50px; font-weight: 900; line-height: 1; color: var(--sg-gold); }
.sg-ring small { font-size: 14px; font-weight: 800; color: var(--sg-muted); margin-top: 5px; }
.sg-ring.pass b { color: var(--sg-green); }
.sg-ring.pass { background: conic-gradient(var(--sg-green) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.10) 0); }

/* ── Prizes from the wheel ─────────────────────────────────────────────────── */
.sg-prizes { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.sg-prize {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 14px 16px;
  border: 1.5px solid rgba(230, 184, 48, 0.4); border-radius: 15px;
  background: rgba(230, 184, 48, 0.08);
}
.sg-prize-ic { font-size: 28px; flex: 0 0 auto; }
.sg-prize-t { display: block; font-size: 17px; font-weight: 900; color: var(--sg-gold-soft); }
.sg-prize-d { display: block; font-size: 13.5px; color: var(--sg-muted); margin-top: 2px; line-height: 1.45; }

/* ── Picking a mini-game ───────────────────────────────────────────────────── */
.sg-picks { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }
.sg-pick {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; padding: 16px;
  border: 2px solid var(--sg-line); border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--sg-ink);
  font-family: inherit; cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, transform 110ms ease;
}
.sg-pick:active { transform: scale(0.985); }
.sg-pick:hover { border-color: rgba(230, 184, 48, 0.55); background: rgba(230, 184, 48, 0.07); }
.sg-pick-ic { font-size: 32px; flex: 0 0 auto; }
.sg-pick-tx { flex: 1 1 auto; min-width: 0; }
.sg-pick-n { display: block; font-size: 17px; font-weight: 900; }
.sg-pick-like {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(74, 144, 217, 0.22); color: #9ec7f0;
  font-size: 11px; font-weight: 900; letter-spacing: 0.04em; vertical-align: middle;
}
.sg-pick-d { display: block; font-size: 13.5px; color: var(--sg-muted); margin-top: 4px; line-height: 1.45; }

/* ── The finish ────────────────────────────────────────────────────────────── */
/* "it should flash and prompt" — one gold flash across the screen as the
   sign-up prompt lands, then it is gone. */
.sg-flash {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(247, 216, 115, 0.92), rgba(230, 184, 48, 0) 62%);
  animation: sgFlash 900ms ease forwards;
}
@keyframes sgFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.sg-flash-word {
  position: fixed; left: 0; right: 0; top: 34%; z-index: 91;
  text-align: center; pointer-events: none;
  font-size: clamp(34px, 11vw, 70px); font-weight: 900; color: #14233f;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
  animation: sgFlashWord 1100ms ease forwards;
}
@keyframes sgFlashWord {
  0% { opacity: 0; transform: scale(0.82); }
  22% { opacity: 1; transform: scale(1.04); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.sg-recap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 16px 0 4px;
}
.sg-recap span {
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid rgba(230, 184, 48, 0.35);
  background: rgba(230, 184, 48, 0.08);
  color: var(--sg-gold-soft);
  font-size: 13.5px; font-weight: 900;
}

.sg-fine { font-size: 12.5px; color: var(--sg-muted); margin-top: 24px; line-height: 1.6; }
.sg-fine a { color: var(--sg-blue); }

/* ── The "played before" card ──────────────────────────────────────────────── */
.sg-card {
  max-width: 460px; margin: 0 auto;
  padding: 26px 22px;
  border: 1.5px solid var(--sg-line); border-radius: 20px;
  background: var(--sg-card);
}

/* ── Toddler pictures ──────────────────────────────────────────────────────── */
.sg-pics { width: 100%; max-width: 520px; margin: 0 auto; display: grid; gap: 11px; grid-template-columns: 1fr 1fr; }
.sg-pic {
  aspect-ratio: 1 / 1;
  border: 3px solid var(--sg-line); border-radius: 19px;
  background: rgba(255, 255, 255, 0.055);
  padding: 9px; cursor: pointer; overflow: hidden;
  transition: border-color 140ms ease, transform 120ms ease, opacity 200ms ease;
}
.sg-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sg-pic:active { transform: scale(0.97); }
.sg-pic.yes  { border-color: var(--sg-green); background: rgba(52, 211, 153, 0.16); }
.sg-pic.nope { border-color: var(--sg-red); opacity: 0.4; }

.sg-speak {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border: 1.5px solid var(--sg-line); border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--sg-gold-soft); font-size: 20px; cursor: pointer;
}
.sg-speak.talking { animation: sgTalk 900ms ease-in-out infinite; }
@keyframes sgTalk {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ── Confetti ──────────────────────────────────────────────────────────────── */
.sg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.sg-confetti i {
  position: absolute; top: -12vh;
  width: 9px; height: 15px; border-radius: 2px;
  animation: sgFall linear forwards;
}
@keyframes sgFall {
  to { transform: translate(var(--dx, 0), 118vh) rotate(var(--r, 360deg)); opacity: 0.1; }
}

/* ── 2026-11-09, second round ─────────────────────────────────────────────── */

/* The age, as two buttons in place of a number box. */
.sg-choices { display: none; gap: 12px; margin: 26px auto 0; max-width: 420px; }
.sg-choice { font-size: 18px; }

/* A quiet text button: "Skip for now", "No thanks". */
.sg-linkbtn {
  display: block; margin: 16px auto 0; padding: 8px 14px; border: 0; background: none;
  color: var(--sg-muted); font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* The prize screen: "Wow! What a spin!" — and, for a toddler, in very large
   letters ("Wow! Great Spin!"). */
.sg-wow {
  font-size: clamp(34px, 9vw, 52px); font-weight: 900; line-height: 1.08;
  color: var(--sg-gold-soft);
  text-shadow: 0 0 18px rgba(230, 184, 48, 0.55), 0 0 42px rgba(230, 184, 48, 0.25);
  animation: sgWow 900ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.sg-wow.huge { font-size: clamp(46px, 13vw, 78px); }
@keyframes sgWow { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.sg-prize-ask { font-size: 17px; color: var(--sg-ink); font-weight: 700; }
#screenPrize .sg-field { margin-top: 16px; }
#screenPrize .sg-field input {
  width: 100%; text-align: center;
}

/* "Wow! You're great at this!" — over whichever mini-game is running. Above
   every game overlay; never takes a tap. */
.sg-compliment {
  /* A small banner at the very top edge, so it never sits over the board,
     the ball or the paddle — and pointer-events: none, so it never takes a tap. */
  position: fixed; left: 50%; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 2147483000;
  translate: -50% 0; pointer-events: none; white-space: nowrap;
  padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(247, 216, 115, 0.94), rgba(230, 184, 48, 0.94)); color: #0b1220;
  font-family: "Nunito", system-ui, sans-serif; font-size: clamp(14px, 3.8vw, 17px); font-weight: 900;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  animation: sgCompliment 2.4s ease both;
}
@keyframes sgCompliment {
  0% { opacity: 0; scale: .5; }
  12% { opacity: 1; scale: 1.12; }
  20% { scale: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; translate: -50% -24px; }
}

/* "Oops! You're only playing a sample game." Fades to black over whatever
   was on screen; bright letters; a small 15-minute clock at the top. */
.sg-screen.sg-oops { background: #000; }
/* Black from the first frame — the game has already faded the screen to black
   (js/fade-black.js) — and only the words fade in. */
.sg-screen.sg-oops.active { animation: none; }
.sg-oops.active .sg-wrap, .sg-oops.active .sg-oops-clock { animation: sgFadeBlack 1100ms ease both; }
@keyframes sgFadeBlack { from { opacity: 0; } to { opacity: 1; } }
.sg-oops-clock {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0;
  padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(250, 204, 21, 0.5);
  color: #fde047; font-size: 14px; font-weight: 900; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.sg-oops-title {
  font-size: clamp(54px, 15vw, 96px); font-weight: 900; line-height: 1; color: #facc15;
  text-shadow: 0 0 24px rgba(250, 204, 21, 0.7), 0 0 60px rgba(250, 204, 21, 0.35);
  animation: sgWow 900ms 500ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.sg-oops-line { margin-top: 14px; font-size: clamp(20px, 5.4vw, 28px); font-weight: 900; color: #fff; }
.sg-oops-cta {
  display: block; width: 100%; max-width: 460px; margin: 28px auto 0; padding: 18px 20px;
  border: 0; border-radius: 18px; cursor: pointer;
  background: linear-gradient(135deg, #22d3ee, #34d399); color: #04131a;
  font: inherit; font-size: clamp(18px, 4.8vw, 22px); font-weight: 900; line-height: 1.3;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 0 34px rgba(52, 211, 153, 0.55);
  animation: sgPulse 1.8s ease-in-out infinite;
}
@keyframes sgPulse { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 54px rgba(52, 211, 153, 0.85); } }
.sg-oops-exp { margin-top: 14px; font-size: 15px; font-weight: 800; color: #fde047; }
.sg-oops .sg-linkbtn { color: rgba(255, 255, 255, 0.55); }

/* "Try it out!" flashes lightly (2026-11-09): a soft glow that swells and a
   gentle shine across it, never a hard blink. */
.sg-flashy { position: relative; overflow: hidden; animation: sgFlashy 1.6s ease-in-out infinite; }
.sg-flashy::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); animation: sgShine 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes sgFlashy {
  0%, 100% { filter: brightness(1); box-shadow: 0 10px 26px rgba(230, 184, 48, 0.30); }
  50% { filter: brightness(1.14); box-shadow: 0 10px 40px rgba(230, 184, 48, 0.65), 0 0 0 4px rgba(247, 216, 115, 0.18); }
}
@keyframes sgShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .sg-flashy, .sg-flashy::after { animation: none; } }
/* The promise line, now UNDER the button. */
.sg-neon.sg-neon-under { margin: 20px auto 0; }