/* ===========================================================
   Roccoa "Own the GOAT" — design system
   Tokens + fonts recovered from the original Lovable build.
   =========================================================== */

@font-face {
  font-family: "Bebas Neue Brand";
  src: url("/fonts/Bebas.woff2") format("woff2"), url("/fonts/Bebas.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Bahnschrift Brand";
  src: url("/fonts/Bahnschrift.woff2") format("woff2"), url("/fonts/Bahnschrift.ttf") format("truetype");
  font-display: swap;
}
/* Self-hosted Unicode Sinhala + Tamil (subset to each script + Latin punctuation/
   digits, so the WHOLE run renders from one font — no fallback split, no artifacts).
   Named after the system fonts so the stacks resolve to these self-hosted files
   first and rendering is identical on every device. */
@font-face {
  font-family: "Noto Sans Sinhala";
  src: url("/fonts/NotoSansSinhala-Regular.woff2") format("woff2"), url("/fonts/NotoSansSinhala-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Noto Sans Sinhala";
  src: url("/fonts/NotoSansSinhala-Bold.woff2") format("woff2"), url("/fonts/NotoSansSinhala-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Noto Sans Tamil";
  src: url("/fonts/NotoSansTamil-Regular.woff2") format("woff2"), url("/fonts/NotoSansTamil-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Noto Sans Tamil";
  src: url("/fonts/NotoSansTamil-Bold.woff2") format("woff2"), url("/fonts/NotoSansTamil-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}

:root {
  --navy:        oklch(24% .13 268);
  --navy-deep:   oklch(17% .11 270);
  --gold:        oklch(78% .14 82);
  --gold-soft:   oklch(88% .1 92);
  --cream:       oklch(96% .025 85);
  --cocoa:       oklch(28% .06 50);
  --gradient-gold: linear-gradient(135deg, oklch(88% .1 92), oklch(72% .16 75) 50%, oklch(88% .1 92));
  --gradient-navy: linear-gradient(180deg, oklch(24% .13 268), oklch(14% .1 270));
  --shadow-gold: 0 10px 40px -10px oklch(78% .14 82/.45);
  --shadow-elegant: 0 20px 60px -20px oklch(0% 0 0/.6);

  --radius: 0.875rem;
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --font-display: "Bebas Neue Brand", "Bahnschrift Brand", system-ui, sans-serif;
  --font-body: "Bahnschrift Brand", system-ui, -apple-system, sans-serif;
  /* Sinhala & Tamil render in self-hosted Unicode fonts (the @font-face above wins
     over the same-named system fonts). One font owns each run — letters AND
     punctuation/digits — so there is no fallback split and none of the phantom
     "artifact" glyphs the old setup produced. The legacy non-Unicode "Tharu Mahee"
     face was removed entirely. */
  --font-sinhala: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", "Sinhala Sangam MN", var(--font-body);
  --font-tamil:   "Noto Sans Tamil", "Latha", "Nirmala UI", "Tamil Sangam MN", var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: #0c1335;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* safety net: never let any element create a horizontal scroll / pop out of frame */
}

/* ===== Sinhala / Tamil rendering + responsiveness =====
   Each script is forced onto its own proper Unicode font (--font-sinhala / the
   Tamil stack) so the WHOLE run — letters AND punctuation/digits — comes from one
   font; this is what prevents the stray "artifact" glyphs that appear when letters
   fall back to the system font while punctuation stays in a Latin brand face. Both
   scripts run taller & longer than Latin, so the Bebas headings get the script font
   with looser line-height and long strings wrap — nothing clips, overlaps, or
   spills out of the frame in the multilingual versions. */
:lang(si) { font-family: var(--font-sinhala); }
:lang(ta) { font-family: var(--font-tamil); }
:lang(si), :lang(ta) { overflow-wrap: break-word; }

:lang(si) .display, :lang(si) h1, :lang(si) h2, :lang(si) h3, :lang(si) .text-prize,
:lang(si) .btn, :lang(si) .lbl, :lang(si) .pill, :lang(si) .badge, :lang(si) .hdr-link, :lang(si) .rc-toast-title {
  font-family: var(--font-sinhala); letter-spacing: 0;
}
:lang(ta) .display, :lang(ta) h1, :lang(ta) h2, :lang(ta) h3, :lang(ta) .text-prize,
:lang(ta) .btn, :lang(ta) .lbl, :lang(ta) .pill, :lang(ta) .badge, :lang(ta) .hdr-link, :lang(ta) .rc-toast-title {
  font-family: var(--font-tamil); letter-spacing: 0;
}
/* Bebas display is heavy; give the SI/TA display headings the bold weight so they
   carry the same visual weight as the Latin brand titles. */
:lang(si) .display, :lang(ta) .display, :lang(si) .text-prize, :lang(ta) .text-prize,
:lang(si) h1, :lang(ta) h1, :lang(si) h2, :lang(ta) h2, :lang(si) h3, :lang(ta) h3 { font-weight: 700; }
/* Loosen the tight Latin line-heights so SI/TA ascenders/descenders aren't cut. */
:lang(si) .display, :lang(ta) .display,
:lang(si) h1, :lang(ta) h1, :lang(si) h2, :lang(ta) h2, :lang(si) h3, :lang(ta) h3 { line-height: 1.2; }
:lang(si) .text-prize, :lang(ta) .text-prize { line-height: 1.26; }
/* Long SI/TA labels wrap inside their button/card instead of overflowing. */
:lang(si) .btn, :lang(ta) .btn { white-space: normal; line-height: 1.25; }
:lang(si) .lbl, :lang(ta) .lbl, :lang(si) .pill, :lang(ta) .pill,
:lang(si) .badge, :lang(ta) .badge { line-height: 1.3; }
/* Narrow 1/3-width stat cards: shrink long SI/TA labels so they wrap cleanly. */
:lang(si) .stat .lbl, :lang(ta) .stat .lbl { font-size: .56rem; line-height: 1.2; overflow-wrap: anywhere; }

.display { font-family: var(--font-display); letter-spacing: .02em; }
.text-gold-grad {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* iOS Safari: clip gradient to glyphs, not the box */
  color: transparent;
}
/* Signature gold title (matches original "OWN THE GOAT" / screen titles) */
.text-prize {
  font-family: var(--font-display);
  color: #f5c518;
  text-transform: uppercase;
  letter-spacing: .01em;
  -webkit-text-stroke: 2px #0c1335;
  paint-order: stroke fill;
  text-shadow: 0 3px #0c1335, 0 6px 18px #00000073;
  font-weight: 900;
  line-height: .9;
}
.text-gold-soft { color: var(--gold-soft); }
.text-cream { color: var(--cream); }
.muted { color: color-mix(in oklch, var(--cream) 65%, transparent); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.tracking { letter-spacing: .15em; }

a { color: inherit; }

/* ---------- Layout shells ---------- */
.screen {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden;
}
.bg-fixed {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--gradient-navy);
}
.bg-fixed img { width: 100%; height: 100%; object-fit: cover; }
/* On inner (shell) pages the split-stadium art is context, not the subject — hold it well
   back with a deep navy wash + vignette so forms, cards and copy own the attention.
   (The home hero uses its own lighter treatment; this only affects .bg-fixed pages.) */
.bg-fixed::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(125% 90% at 50% 18%, rgba(9,14,38,.52) 0%, rgba(9,14,38,.78) 68%, rgba(6,10,28,.9) 100%),
    linear-gradient(180deg, rgba(9,14,38,.28) 0%, rgba(9,14,38,.5) 100%); }
/* GOAT page is hero art, not a form — skip the inner-page wash; just a whisper of
   top vignette for the language pill. The goat-scrim handles lower-UI contrast. */
.bg-fixed--vivid::after { background: linear-gradient(180deg, rgba(9,14,38,.20) 0%, rgba(9,14,38,0) 24%); }

/* Ambient stadium lighting shared by every inner (shell) page so they echo the
   hero's premium feel. Fixed above the background image but below all content
   (z:2 < .shell z:10) and purely decorative — kept subtle so it never fights the UI. */
.ambient { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ambient::before { /* soft floodlight bloom from the top, gently pulsing */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44%;
  background: radial-gradient(120% 88% at 50% 0%, rgba(185,222,255,.12) 0%, rgba(185,222,255,0) 62%);
  animation: hero-shimmer 8s ease-in-out infinite;
}
.ambient::after { /* faint warm glow low on the pitch */
  content: ""; position: absolute; left: 50%; bottom: -20%; transform: translateX(-50%);
  width: min(120vw, 720px); height: 60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,130,.10) 0%, rgba(255,214,130,0) 66%);
  animation: hero-halo 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ambient::before, .ambient::after { animation: none; }
  .ambient .hero-spark { display: none; }
}

.shell {
  position: relative; z-index: 10;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 20px 12px;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
.shell-header {
  position: absolute; top: 12px; left: 16px; right: 16px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 30px; /* matches the lang pill height so left/right stay aligned */
}
.hdr-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hdr-link { background: none; border: none; padding: 0; cursor: pointer; text-decoration: none;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; line-height: 1;
  color: color-mix(in oklch, var(--cream) 72%, transparent); }
.hdr-link:hover { color: var(--gold-soft); }

/* Instructions: right-edge bookmark tab + slide-in drawer (present on every screen) */
.instr-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1500;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  padding: 14px 6px; color: var(--gold);
  background: oklch(24% .13 268/.94); border: 1.5px solid var(--gold); border-right: none;
  border-radius: 12px 0 0 12px; box-shadow: -5px 4px 18px -6px rgba(0,0,0,.6); backdrop-filter: blur(4px);
  transition: padding-right .15s ease, background .2s ease, opacity .2s ease; }
.instr-tab:hover { background: oklch(28% .13 268/.98); padding-right: 9px; }
.instr-tab svg { flex-shrink: 0; }
.instr-tab-label { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .14em;
  font-size: .58rem; font-weight: 700; line-height: 1; }
/* Hide the tab while the live camera is full-screen or the drawer is open, so it never
   covers other controls. */
body.cam-active .instr-tab, body.modal-open .instr-tab { opacity: 0; pointer-events: none; }

.instr-drawer { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.62);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  display: flex; align-items: center; justify-content: flex-end; padding: 16px; }
.instr-drawer.open { opacity: 1; pointer-events: auto; }
/* The panel HUGS the (landscape) image — a gold-framed card, not a full-height column, so
   there's no empty space above/below. It slides in from the right and back out on close. */
.instr-panel { position: relative; width: min(95vw, 600px); max-height: 92vh;
  border: 2px solid var(--gold); border-radius: 14px; overflow: hidden; background: #0b1130;
  box-shadow: -14px 0 44px -10px rgba(0,0,0,.7);
  transform: translateX(calc(100% + 24px)); transition: transform .36s cubic-bezier(.4, 0, .2, 1); }
.instr-drawer.open .instr-panel { transform: translateX(0); }
.instr-panel img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain;
  opacity: 0; transition: opacity .3s ease; }
.instr-panel img.loaded { opacity: 1; }
/* Spinner shown until the image is fully decoded, so it never paints in top-down chunks. */
.instr-spin { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.22); border-top-color: var(--gold);
  animation: instr-spin-kf .8s linear infinite; }
@keyframes instr-spin-kf { to { transform: rotate(360deg); } }
.instr-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; font-size: 1.1rem;
  background: rgba(0,0,0,.55); border: 1.5px solid var(--gold); color: var(--gold); }
.instr-close:hover { background: rgba(0,0,0,.85); }
@media (prefers-reduced-motion: reduce) { .instr-panel { transition: none; } .instr-spin { animation: none; } }
body.modal-open { overflow: hidden; }
/* Content starts just below the lockup element at the top of the shell. */
.shell-content { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 18px; }
.shell-credit { margin-top: auto; padding-top: 48px; padding-bottom: var(--music-btn-zone); text-align: center; }
.shell-credit p { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.28); padding-top: 12px; margin: 0; }
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo img { width: 40px; height: auto; }

.title-block { text-align: center; margin-top: 8px; }
.title-block .display { font-size: 2rem; line-height: 1; }
.title-sm .display { font-size: 1.5rem; }

/* ---------- Cards ---------- */
.card-premium {
  background: linear-gradient(180deg, oklch(26% .11 268/.95), oklch(20% .1 270/.95));
  border: 1px solid oklch(78% .14 82/.25);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-elegant);
  backdrop-filter: blur(8px);
  padding: 20px;
}
/* White card variant (instructions steps) */
.card-premium-white {
  background: #fff;
  border: 1px solid oklch(78% .14 82/.25);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-elegant);
}
/* Gold numbered circle */
.step-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 9999px;
  background: linear-gradient(135deg, oklch(78% .14 82/.85), oklch(78% .14 82/.4));
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; cursor: pointer; font-family: var(--font-display);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center;
  padding: 12px 28px; font-size: 1rem; transition: transform .1s, filter .2s; }
.btn:active { transform: scale(.97); }
/* In-flight submit state: button is locked + shows a spinner so slow-network taps
   don't fire the action repeatedly. */
.btn.is-loading { pointer-events: none; opacity: .8; cursor: wait; }
.btn.is-loading::before { content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .85;
  animation: rc-spin .7s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.btn-gold { background: var(--gradient-gold); color: var(--navy-deep); font-weight: 700;
  border: 3px solid oklch(95% .06 92/.9); outline: 2px solid oklch(78% .14 82/.7); outline-offset: 3px;
  box-shadow: var(--shadow-gold); }
.btn-gold:disabled { opacity: .5; cursor: not-allowed; }
.btn-white { background: #fff; color: var(--navy); border: 2px solid oklch(78% .14 82/.6);
  box-shadow: 0 4px 15px -4px oklch(0% 0 0/.2); }
.btn-ghost-gold { background: transparent; color: var(--gold-soft); border: 1px solid color-mix(in oklch, var(--gold) 50%, transparent); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 48px; font-size: 1.15rem; }

/* Language-selection cards: tactile press + a bouncy gold "pop" glow on select. The label
   stays put (no loading text-swap — the form is data-no-loading). */
.lang-card { transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s ease; }
.lang-card:hover { box-shadow: 0 0 0 1px var(--gold), 0 12px 30px -12px rgba(0,0,0,.5); }
.lang-card:active { transform: scale(.96); }
.lang-card.lang-selected { transform: scale(1.04); box-shadow: 0 0 0 2px var(--gold), 0 0 30px -2px oklch(78% .14 82/.75); }
@media (prefers-reduced-motion: reduce) { .lang-card { transition: box-shadow .2s ease; } .lang-card:active, .lang-card.lang-selected { transform: none; } }
.animate-cta { animation: cta-breathe 1.8s ease-in-out infinite; }
@keyframes cta-breathe {
  0%,100% { transform: scale(1); box-shadow: 0 12px 50px -8px oklch(78% .14 82/.55), 0 0 0 0 oklch(78% .14 82/.4); }
  50%     { transform: scale(1.06); box-shadow: 0 16px 60px -6px oklch(78% .14 82/.75), 0 0 0 8px oklch(78% .14 82/0); }
}
.animate-tap { animation: tap-breathe 2.4s ease-in-out infinite; }
@keyframes tap-breathe {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 oklch(78% .14 82/.35); }
  50%     { transform: scale(1.015); box-shadow: 0 0 0 6px oklch(78% .14 82/0); }
}

/* ---------- Share buttons (done screen) ---------- */
.share-btn {
  width: 3rem; height: 3rem; border-radius: 9999px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25); box-shadow: 0 6px 20px -4px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease; animation: share-pop 2.5s ease-in-out infinite;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -4px rgba(0,0,0,.45); }
.share-btn:active { transform: scale(.95); }
.share-wa { background: linear-gradient(135deg, #25d366, #128c7e); animation-delay: 0s; }
.share-fb { background: linear-gradient(135deg, #1877f2, #0d5cb6); animation-delay: .25s; }
.share-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); animation-delay: .5s; }
@keyframes share-pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- Inputs ---------- */
.input-premium {
  width: 100%; box-sizing: border-box; min-height: 3rem; padding: .85rem 1rem; border-radius: .75rem;
  background: #fff; border: 1px solid oklch(78% .14 82/.3);
  color: var(--navy); font-size: 1rem; font-family: var(--font-body);
  -webkit-appearance: none; appearance: none; /* stop iOS date inputs rendering wider/native */
}
.input-premium::placeholder { color: oklch(30% 0 0); opacity: 1; }
.input-premium:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px oklch(78% .14 82/.25); }
/* Date field: match the text/email fields exactly (iOS Safari box-model quirk) */
input.input-premium[type="date"] { display: block; min-width: 0; text-align: left; }
input.input-premium[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input.input-premium[type="date"]::-webkit-calendar-picker-indicator { margin: 0; opacity: .55; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--cream); margin-bottom: 5px; }

/* ---------- Code card ---------- */
.code-card-frame {
  background: linear-gradient(180deg, oklch(88% .12 90), oklch(76% .14 82) 50%, oklch(56% .13 75));
  padding: 3px; border-radius: 2rem;
  box-shadow: 0 20px 50px -10px oklch(78% .14 82/.4), 0 0 40px -10px oklch(78% .14 82/.2);
  border: none; width: 100%; cursor: pointer;
}
.code-card-inner {
  background: linear-gradient(135deg, oklch(20% .11 270/.98), oklch(12% .09 270/.98));
  border-radius: 1.85rem; border: 1px solid oklch(100% 0 0/.08);
  display: flex; flex-direction: column; align-items: center;
}
.code-value { font-family: var(--font-display); font-size: 2.1rem; color: #fff;
  letter-spacing: .12em; text-shadow: 0 2px 12px rgba(0,0,0,.5); word-break: break-all; }

/* ---------- Live camera (capture-only, no gallery) ---------- */
.cam-wrap { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: #000;
  border: 2px solid oklch(78% .14 82/.4); box-shadow: var(--shadow-elegant); }
.cam-wrap video { width: 100%; display: block; max-height: 62vh; object-fit: cover; background: #000; }
.cam-shutter { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: 66px; height: 66px; border-radius: 9999px; background: #fff; cursor: pointer;
  border: 4px solid rgba(255,255,255,.6); box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
  transition: transform .1s ease; }
.cam-shutter:active { transform: translateX(-50%) scale(.93); }
.cam-cancel { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; line-height: 1;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(3px); }

/* While the live camera is active it takes over the whole viewport, so the capture
   surface is as large as possible with only the shutter + close control on top.
   The captured image is always the FULL sensor frame (see capturePhoto), so nothing
   framed near the edges is lost even though the preview is cover-cropped to fill. */
.cam-wrap.cam-fs { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh;
  border: 0; border-radius: 0; box-shadow: none; }
.cam-wrap.cam-fs video { width: 100%; height: 100dvh; max-height: none; object-fit: cover; }
.cam-wrap.cam-fs .cam-shutter { width: 72px; height: 72px;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px)); }
.cam-wrap.cam-fs .cam-cancel { width: 42px; height: 42px; right: 14px; font-size: 1.15rem;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)); }
/* Lock the page + hide the floating music button behind the full-screen camera. */
body.cam-active { overflow: hidden; }
body.cam-active #music-toggle { display: none; }

/* Luxury copy button (used on the code card) */
.btn-luxury {
  background: linear-gradient(90deg, oklch(76% .14 82), oklch(88% .12 90), oklch(76% .14 82));
  color: oklch(15% .1 270); font-family: var(--font-display); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: .85rem 1.5rem; border-radius: 1rem;
  box-shadow: 0 10px 25px -5px oklch(78% .14 82/.45); border: 1px solid oklch(88% .1 92/.5);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-luxury:hover { transform: translateY(-1px); box-shadow: 0 14px 35px -5px oklch(78% .14 82/.6); }
.btn-luxury:disabled { opacity: .5; cursor: not-allowed; }

/* Carousel prev/next circles (code-reveal instruction slider) */
.carousel-nav {
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background: rgba(255,255,255,.9); border: 2px solid var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .1s ease;
}
.carousel-nav:active { transform: scale(.95); }

/* Ribbon / numbered badge (code carousel, done ribbon) */
.ribbon-gold {
  background: var(--gradient-gold); color: var(--navy-deep); font-weight: 700;
  padding: .35rem 1rem; border-radius: .375rem; display: inline-block;
  text-transform: uppercase; letter-spacing: .08em; font-size: .75rem;
}

/* ---------- Ticket stub ---------- */
.ticket-stub {
  position: relative; color: var(--navy-deep);
  background: linear-gradient(160deg, oklch(94% .025 85), oklch(82% .08 82));
  border: 1px solid oklch(78% .14 82/.4); border-radius: .5rem; padding: 16px;
  box-shadow: 0 10px 30px -10px oklch(0% 0 0/.45);
}
.ticket-perf-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: oklch(24% .13 268); }
.ticket-stamp { font-family: var(--font-display); color: var(--navy-deep);
  font-weight: 900; text-transform: uppercase; letter-spacing: .06em; line-height: 1.32; }
/* SI/TA: Bebas has no Indic glyphs and Indic must not be uppercased/tight-tracked — use the
   script font, normal case, and a looser line-height so conjuncts/vowel marks aren't clipped. */
:lang(si) .ticket-stamp { font-family: var(--font-sinhala); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.5; }
:lang(ta) .ticket-stamp { font-family: var(--font-tamil); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.5; }

/* ---------- Stat grid ---------- */
/* minmax(0,1fr) + min-width:0 let the three columns shrink to equal thirds instead
   of being forced wider by long SI/TA labels (which otherwise push the row out of
   the frame). The label wraps inside its column. */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { text-align: center; min-width: 0; }
.stat .num { font-family: var(--font-display); font-size: 2rem; }
.stat .lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in oklch, var(--cream) 65%, transparent); }

/* ---------- Badges ---------- */
.badge { display: inline-block; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.badge-approved     { color: #6ee7b7; border-color: rgba(110,231,183,.4); }
.badge-rejected     { color: #fca5a5; border-color: rgba(252,165,165,.4); }
.badge-needs_review { color: #fcd34d; border-color: rgba(252,211,77,.4); }
.badge-pending      { color: var(--cream); border-color: rgba(255,255,255,.2); }
.badge-not_submitted, .badge-expired { color: color-mix(in oklch,var(--cream) 50%, transparent); border-color: rgba(255,255,255,.15); }
.badge-ai_unavailable { color: #93c5fd; border-color: rgba(147,197,253,.45); }   /* captured during AI outage, no verdict */

/* ---------- Toasts (match Lovable sonner styling) ---------- */
.rc-toast-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.rc-toast { pointer-events: auto; max-width: 28rem; width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 18px;
  background: linear-gradient(oklch(26% .11 268/.95), oklch(20% .1 270/.95));
  border: 1.5px solid oklch(78% .14 82/.35); box-shadow: var(--shadow-gold);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: rc-toast-in .3s ease; }
.rc-toast.rc-out { animation: rc-toast-out .3s ease forwards; }
.rc-toast-title { font-family: var(--font-display); color: var(--gold-soft);
  text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; line-height: 1.15; }
.rc-toast-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--gold); }
.rc-toast-desc { color: var(--cream); font-size: .9rem; line-height: 1.25; }
.rc-toast-success { border-color: oklch(65% .18 145/.7); }
.rc-toast-success .rc-toast-icon { color: oklch(72% .16 145); }
.rc-toast-error { border-color: oklch(62% .22 25/.7); }
.rc-toast-error .rc-toast-icon { color: oklch(72% .2 25); }
.rc-toast-warning { border-color: oklch(78% .14 82/.55); }
.rc-toast-warning .rc-toast-icon { color: var(--gold); }
.rc-toast-info { border-color: oklch(60% .12 220/.55); }
.rc-toast-info .rc-toast-icon { color: oklch(70% .12 220); }
@keyframes rc-toast-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rc-toast-out { to { opacity: 0; transform: translateY(-14px); } }

/* ---------- Filled status pills (entries) ---------- */
.pill { display: inline-block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 14px; border-radius: 9999px; color: #fff; font-weight: 700; white-space: nowrap; }
.pill-approved     { background: #10b981; }
.pill-pending      { background: #0ea5e9; }
.pill-needs_review { background: #f59e0b; }
.pill-rejected     { background: #ef4444; }
.pill-not_submitted, .pill-expired { background: rgba(255,255,255,.15); color: var(--cream); }

/* ---------- Circular pager (entries) ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.pager-btn { flex-shrink: 0; width: 56px; height: 56px; border-radius: 9999px; border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; text-decoration: none; box-shadow: 0 0 20px rgba(255,255,255,.15); }
.pager-btn.is-off { opacity: .2; pointer-events: none; }
.pager-mid { text-align: center; flex: 1; }
.pager-num { font-family: var(--font-display); font-size: 2.5rem; color: #fff; line-height: 1; font-weight: 700; }
.pager-total { font-size: .6rem; text-transform: uppercase; letter-spacing: .25em; color: color-mix(in oklch,var(--cream) 40%,transparent); margin-top: 6px; }

/* ---------- Music toggle ---------- */
/* Reserve its footprint as a variable so footers/credits always clear it. */
:root { --music-btn-zone: 58px; }
.wa-help { position: fixed; bottom: 14px; right: 14px; z-index: 65; width: 54px; height: 54px;
  display: block; text-decoration: none; transition: transform .15s ease;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.wa-help img { width: 100%; height: 100%; display: block; }
.wa-help-bubble { position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(8px); white-space: nowrap;
  background: #fff; color: #0c1335; font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  padding: 8px 13px; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.wa-help-bubble::after { content: ''; position: absolute; right: -5px; top: 50%;
  transform: translateY(-50%); border: 6px solid transparent; border-left-color: #fff; border-right: 0; }
.wa-help.show-bubble .wa-help-bubble { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.wa-help:hover { transform: scale(1.06); }
.wa-help:active { transform: scale(.95); }
body.cam-active .wa-help { display: none; }
.music-toggle { position: fixed; bottom: 14px; left: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  background: rgba(0,0,0,.42); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ---------- Language switch ---------- */
.lang-switch { position: relative; z-index: 20; flex-shrink: 0; }
.lang-btn { padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255,255,255,.1); color: var(--cream);
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.lang-menu { position: absolute; right: 0; margin-top: 6px; background: var(--navy-deep);
  border: 1px solid color-mix(in oklch, var(--gold) 30%, transparent); border-radius: 12px; overflow: hidden; min-width: 130px; }
.lang-menu button { display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: none; color: var(--cream); cursor: pointer; }
.lang-menu button:hover { background: color-mix(in oklch, var(--gold) 12%, transparent); }

/* ---------- Consent / terms (onboarding) ---------- */
.check-row { display: flex; align-items: flex-start; gap: 12px; padding-top: 4px; }
.check-gold { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px;
  accent-color: var(--gold); }
.check-label { font-size: .72rem; line-height: 1.5; color: color-mix(in oklch, var(--cream) 90%, transparent); cursor: pointer; }
.link-gold { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
  background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; }
.terms-panel { margin-top: 12px; max-height: 16rem; overflow-y: auto; border-radius: 8px;
  border: 1px solid oklch(78% .14 82/.3); background: oklch(24% .13 268/.4); padding: 12px; }
.terms-content { font-size: 11px; line-height: 1.55; color: color-mix(in oklch, var(--cream) 90%, transparent); }
.terms-content p { margin: 0 0 12px; }
.terms-content b { color: var(--cream); }
.terms-h { font-weight: 700; color: var(--gold-soft); text-transform: uppercase; letter-spacing: .04em; }
.terms-sub { font-weight: 700; color: var(--cream); }
.terms-italic { font-style: italic; color: color-mix(in oklch, var(--cream) 70%, transparent); }
.terms-end { color: color-mix(in oklch, var(--cream) 60%, transparent); padding-top: 4px; }

/* ---------- Progressive blur-up images ---------- */
.blur-wrap { position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
.blur-up { display: block; opacity: 0; transition: opacity .7s ease; }
.blur-up.loaded { opacity: 1; }
/* if JS/onload misses (cached), reveal after paint */
.no-js .blur-up, html.assets-ready .blur-up { opacity: 1; }

/* hero full-bleed */
.hero-cover { position: absolute; inset: 0; }
.hero-cover .blur-up { width: 100%; height: 100%; object-fit: cover; }

/* ===== Layered responsive hero (landing) — separate elements, no baked text ===== */
.hero-screen { position: relative; height: 100dvh; width: 100%; overflow: hidden; background: #0c1335; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .blur-wrap, .hero-bg .blur-up { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg .blur-up { object-fit: cover; object-position: center 38%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,28,.15) 0%, rgba(6,10,28,0) 26%, rgba(6,10,28,0) 60%, rgba(6,10,28,.55) 100%); }
/* Deferred home hero video — sits over the static stadium webp but BELOW the ::after
   vignette (no z-index: DOM order puts it above the still image, generated ::after paints
   last so the vignette still tints it). Fades in only once it can actually play. */
.hero-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 38%; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.hero-bgvideo.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-bgvideo { display: none; } }

/* ===== Ambient stadium lights — sits BEHIND the jersey (z5), so the prize is
   backlit and haloed but stays crisp. Lights on top would wash it out. ===== */
.hero-glow { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.hero-glow::before { /* warm backlight halo behind the jersey */
  content: ""; position: absolute; left: 50%; top: 52%;
  width: min(94vw, 560px); height: min(94vw, 560px); transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,130,.30) 0%, rgba(150,190,255,.12) 42%, rgba(150,190,255,0) 68%);
  animation: hero-halo 6.5s ease-in-out infinite;
}
.hero-glow::after { /* upper floodlight bloom, gently shimmering */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%;
  background: radial-gradient(120% 92% at 50% 0%, rgba(185,222,255,.20) 0%, rgba(185,222,255,0) 60%);
  animation: hero-shimmer 7.5s ease-in-out infinite;
}
.hero-spark { position: absolute; bottom: -12px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,180,.95) 0%, rgba(255,236,180,0) 70%);
  filter: blur(.5px); opacity: 0; animation: spark-rise linear infinite; }
@keyframes hero-halo    { 0%,100% { opacity: .6; transform: translate(-50%,-50%) scale(1); }    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.07); } }
@keyframes hero-shimmer { 0%,100% { opacity: .5; }  50% { opacity: .95; } }
@keyframes spark-rise   { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: .85; } 88% { opacity: .4; } 100% { transform: translateY(-72vh) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-glow::before, .hero-glow::after { animation: none; }
  .hero-spark { display: none; }
}
/* Premium lower scrim — calm, high-contrast zone for the prize line + CTAs so the
   split artwork owns the top ~55% and the actions read decisively at the bottom. */
.hero-scrim { position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(9,14,38,0) 0%, rgba(9,14,38,0) 42%,
    rgba(9,14,38,0.34) 62%, rgba(9,14,38,0.72) 82%, rgba(9,14,38,0.94) 100%); }

.hero-fg {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  max-width: 480px; margin: 0 auto;
  /* top padding clears the absolute header (pill + language switch) so the lockup
     never sits under them. On normal screens the jersey is capped by dvh, not this.
     Extra bottom padding keeps the CTAs off the very edge, seated in the scrim zone. */
  padding: max(2vh, 50px) 20px max(3.4vh, 22px);
}
/* Flexible spacers distribute the rows evenly AND collapse under pressure, so
   items can never overlap the way justify-content: space-between does. */
.hero-gap { flex: 1 1 0; min-height: 6px; }
.hero-lockup { flex: 0 0 auto; width: min(80%, 340px); height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
/* Jersey zone fills the space between the lockup and the buttons — large prize.
   flex: 1 1 0 lets it shrink on short screens so it can never push into overlap.
   margin-top guarantees a gap under the OWN THE GOAT lockup even with the float. */
.hero-mid { flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; margin-top: 16px; }
/* max-height reserves ~52px below the jersey for the overlapping banner, so the
   jersey + banner group never spills out of hero-mid into the CTA buttons. */
.hero-jersey { max-height: min(calc(100% - 52px), 56dvh); max-width: 68%; height: auto; object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
  animation: jersey-float 5.5s ease-in-out infinite; will-change: transform; }
/* Premium, slow hover — gentle lift + a hair of sway, GPU-accelerated. */
@keyframes jersey-float {
  0%   { transform: translateY(0)      rotate(-0.5deg); }
  50%  { transform: translateY(-12px)  rotate(0.5deg); }
  100% { transform: translateY(0)      rotate(-0.5deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-jersey { animation: none; } }
/* SI/TA CTAs wrap to 2 lines (longer text), which on short screens would steal height
   from the jersey and make it look shrunk vs English. Reclaim it by reserving less below
   the jersey; the 56dvh cap is unchanged, so on normal screens the size matches English. */
:lang(si) .hero-jersey, :lang(ta) .hero-jersey { max-height: min(calc(100% - 34px), 56dvh); }
/* Banner sits in front of and overlaps the lower part of the jersey. */
.hero-banner { width: min(84%, 340px); height: auto; margin-top: -11%; position: relative; z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }

/* ===== Dual-prize hero — single combined-jerseys artwork ===== */
.hero-jersey-both { max-height: min(calc(100% - 56px), 50dvh); max-width: 94%; width: auto; height: auto;
  object-fit: contain; filter: drop-shadow(0 14px 28px rgba(0,0,0,.55)); will-change: transform;
  animation: jersey-float 5.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-jersey-both { animation: none; } }
/* Trilingual prize headline. Condensed display glyphs + a heavy navy stroke read as
   "crunched" when tightly set, so we open the tracking, lift the line-height and balance
   the wrap — legible without losing the signature gold-stroke look. */
.hero-prize { margin: 20px 0 0; max-width: 340px; text-align: center; padding: 0 14px;
  font-size: clamp(.95rem, 4.4vw, 1.42rem); line-height: 1.24; letter-spacing: .05em;
  word-spacing: .04em; text-wrap: balance; }
:lang(si) .hero-prize, :lang(ta) .hero-prize { font-size: clamp(.85rem, 4.2vw, 1.28rem);
  line-height: 1.35; letter-spacing: 0; }
@media (max-height: 560px) { .hero-jersey-both { max-height: 42dvh; } }

/* ===== GOAT choice buttons (team-coloured; the players/jerseys live in the background art) ===== */
.goat-choices { width: 100%; margin-top: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Decisive team pills — narrower than full width so the artwork breathes on the sides. */
.goat-btn { width: 100%; max-width: 240px; padding: 15px 24px; border-radius: 999px; text-decoration: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2.5px solid rgba(255,255,255,.92);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .12s ease; }
.goat-btn span { font-size: 1.5rem; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.goat-messi   { background: linear-gradient(180deg,#6fb9ec,#2f7fc4); }   /* Argentina sky blue */
.goat-ronaldo { background: linear-gradient(180deg,#e5514a,#c11722); }   /* Portugal red */
.goat-btn:active, .goat-btn.goat-tapped { transform: scale(.96); }
.goat-current { outline: 3px solid var(--gold); outline-offset: 3px; }
/* Animated /goat background video — sits above the static goat-bg.webp (z:0),
   below the ambient sparks (z:2) and content (z:10). Fades in once it plays; the
   still image is the instant placeholder + the reduced-motion / fallback frame. */
.goat-bgvideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.goat-bgvideo.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .goat-bgvideo { display: none; } }

/* /goat premium-minimal layout: full-bleed art is the hero; the choice UI is anchored to a
   scrimmed lower zone so it reads calm and premium rather than crowded. */
.goat-scrim { position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(9,14,38,0.16) 0%, rgba(9,14,38,0) 12%, rgba(9,14,38,0) 30%,
    rgba(9,14,38,0.52) 50%, rgba(9,14,38,0.82) 72%, rgba(9,14,38,0.95) 100%); }
/* The header is position:absolute, so the only in-flow child is .shell-content —
   anchor it to the bottom so the UI sits low and the artwork owns the top ~65%. */
.goat-page .shell { justify-content: flex-end; }
.goat-page .shell-content { padding-top: 0; }
.goat-panel { width: 100%; display: flex; flex-direction: column; align-items: center;
  padding-bottom: max(4.5vh, 24px); }
/* Title is now a restrained gold eyebrow, not a big display headline. */
.goat-eyebrow { text-align: center; margin: 0 0 16px; font-family: var(--font-display);
  font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft);
  text-shadow: 0 2px 12px rgba(0,0,0,.8); }
/* QA#3: Sinhala/Tamil (Indic scripts) must not be uppercased or wide-tracked —
   it mangles conjunct rendering. Render them naturally. */
:lang(si) .goat-eyebrow, :lang(ta) .goat-eyebrow {
  text-transform: none; letter-spacing: normal; font-size: 1.05rem; line-height: 1.35; }
/* The eyebrow's default Bebas is a Latin-ONLY, caps-only display face, so in SI/TA it jams the
   Latin "Team Messi" / "Team Ronaldo" words together. Switch to the script font (its subset
   carries proper mixed-case Latin) so the mixed heading reads cleanly. */
:lang(si) .goat-eyebrow { font-family: var(--font-sinhala); }
:lang(ta) .goat-eyebrow { font-family: var(--font-tamil); }
.goat-sub { text-align: center; margin: 0 0 10px; max-width: 340px; font-size: .76rem; line-height: 1.45;
  color: color-mix(in oklch, var(--cream) 92%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.7); }
/* Motivator line — "the more entries, the greater your chances" — emphasized in gold. */
.goat-chances { text-align: center; margin: 0 0 18px; max-width: 340px; font-size: .82rem; line-height: 1.4;
  font-weight: 700; color: var(--gold-soft); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.goat-panel .goat-choices { margin-top: 0; }

/* ===== Fan balance (Messi vs Ronaldo) ===== */
.fan-balance { padding: 18px 20px; text-align: center; }
.fb-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin: 0 0 12px; }
.fb-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.fb-seg { height: 100%; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.fb-messi { background: linear-gradient(180deg,#6cc0f0,#3a86c9); }
.fb-ronaldo { background: linear-gradient(180deg,#ef5a52,#c9362f); }
.fb-legend { display: flex; justify-content: center; gap: 24px; margin-top: 12px; font-size: .84rem;
  color: color-mix(in oklch,var(--cream) 82%,transparent); }
.fb-lg { display: inline-flex; align-items: center; gap: 7px; }
.fb-lg b { font-weight: 700; }
.fb-lg-mine { color: var(--gold); }
.fb-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.fb-dot-messi { background: #4aa3e0; }
.fb-dot-ronaldo { background: #e0463d; }
.fb-count { font-size: .7rem; margin: 10px 0 0; }
.fb-you { margin: 6px 0 0; font-size: .84rem; color: var(--gold-soft); font-weight: 600; }
/* Decisive CTAs — narrower than full width so the artwork breathes on the sides (as on
   /goat). Primary (Start Now) leads; secondary (How to enter) is a quieter pill beneath. */
.hero-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; margin-top: 22px; }
.hero-cta .btn { width: min(74%, 290px); }
.hero-cta-primary { padding: 17px 32px; font-size: 1.22rem;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.7), var(--shadow-gold); }
.hero-cta-secondary { padding: 12px 26px; font-size: .82rem;
  background: rgba(255,255,255,.94); box-shadow: 0 10px 28px -12px rgba(0,0,0,.8); }
.hero-credit { flex: 0 0 auto; margin: 18px 0 0; text-align: center; max-width: calc(100% - 88px);
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.32); }

/* Very short screens: trim the lockup so the flexible spacers have room */
@media (max-height: 560px) {
  .hero-lockup { width: min(56%, 260px); }
}

/* ===== Inner-page lockup (replaces the logo that was baked into the old bg) ===== */
.shell-lockup { display: block; margin: max(7vh, 52px) auto 0; width: min(60vw, 210px); height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }

/* inner fixed background */
.bg-fixed .blur-wrap { position: absolute; inset: 0; }
.bg-fixed .blur-up { width: 100%; height: 100%; object-fit: cover; }

/* inline framed reference image */
.ref-img { width: 100%; border-radius: 14px; border: 2px solid color-mix(in oklch,var(--gold) 40%,transparent); }
.ref-img .blur-up { width: 100%; height: auto; }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 14px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.grow { flex: 1; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; } /* min-width:0 so long SI/TA labels wrap instead of overflowing the row */
.center-col { display: flex; flex-direction: column; align-items: center; }
.hero-bottom { position: absolute; inset-inline: 0; bottom: 0; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.credit { position: absolute; bottom: 6px; inset-inline: 0; text-align: center; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }

.alert { border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin-bottom: 12px; }
.alert-error { background: rgba(220,38,38,.15); border: 1px solid rgba(248,113,113,.4); color: #fca5a5; }
.alert-info  { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: var(--cream); }
.alert-ok    { background: rgba(16,185,129,.12); border: 1px solid rgba(52,211,153,.4); color: #6ee7b7; }

/* ---------- Inline notification boxes (match Lovable upload AI banners) ---------- */
.rc-note {
  border-radius: 12px; border: 2px solid; padding: 12px 16px;
  font-family: var(--font-display); letter-spacing: .02em; font-size: .9rem; line-height: 1.3;
  display: flex; align-items: center; gap: 8px;
}
.rc-note-ok  { border-color: #10b981; background: #ecfdf5; color: #065f46; }  /* emerald 500/50/800 */
.rc-note-bad { border-color: #ef4444; background: #fef2f2; color: #991b1b; }  /* red 500/50/800 */
.rc-note-info{ border-color: oklch(78% .14 82/.6); background: #ffffff; color: var(--navy); }
.rc-note-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 9999px; background: var(--gold); animation: rc-pulse 1.4s ease-in-out infinite; }
@keyframes rc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.pill-nav { display: flex; gap: 6px; align-items: center; }

/* Natural (auto) column layout: columns size to their content. Headers stay on one
   line; the parent card uses overflow-x:auto so wide tables scroll on narrow screens
   instead of squishing. (Previously table-layout:fixed + 3rem/4rem pins squeezed the
   admin tables — that pinning was for the now-removed consumer leaderboard.) */
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th { text-align: left; padding: 10px; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; color: color-mix(in oklch,var(--cream) 60%, transparent); background: color-mix(in oklch,var(--navy-deep) 60%, transparent); }
table.data td { padding: 10px; border-top: 1px solid rgba(255,255,255,.06); vertical-align: top; overflow-wrap: break-word; }
:lang(si) table.data th, :lang(ta) table.data th { letter-spacing: 0; white-space: normal; }
.mono { font-family: var(--font-mono); font-size: .8rem; }

/* ---------- Smooth cross-page transitions (progressive enhancement) ---------- */
/* Supported browsers get a soft cross-fade between page loads; others are
   unaffected. Disabled entirely under reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- PWA install prompt (slim, non-intrusive) ---------- */
.pwa-install {
  position: fixed; z-index: 900; left: 10px; right: 10px;
  bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  max-width: 24rem; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 8px 9px 8px 10px;
  border-radius: 14px; border: 1px solid oklch(78% .14 82/.4);
  background: linear-gradient(180deg, oklch(24% .13 268/.96), oklch(17% .11 270/.96));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); color: var(--cream);
  animation: pwa-rise .3s ease-out both;
}
@keyframes pwa-rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* CRITICAL: our .pwa-install { display:flex } (author rule) overrides the UA
   [hidden]{display:none}, so without this the `hidden` attribute wouldn't hide the
   banner — which is why the ✕ / hide() did nothing and it stayed persistent. */
.pwa-install[hidden] { display: none !important; }
.pwa-install-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; }
/* min-width:0 + text clamping keep long SI/TA copy from ever breaking the layout. */
.pwa-install-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pwa-install-text strong { font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-install-text span { font-size: .63rem; color: color-mix(in oklch, var(--cream) 64%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pwa-install-btn {
  flex-shrink: 0; max-width: 7.5rem; border: none; cursor: pointer; border-radius: 999px;
  padding: 7px 13px; font-family: var(--font-display); font-size: .7rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--navy);
  background: var(--gradient-gold); box-shadow: var(--shadow-gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pwa-install-btn:active { transform: scale(.97); }
.pwa-install-close {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .72rem; line-height: 1;
  background: rgba(255,255,255,.08); color: color-mix(in oklch, var(--cream) 65%, transparent);
  border: 1px solid rgba(255,255,255,.16);
}
/* Show the right copy + hide the (non-functional) Install button on iOS. */
.pwa-install[data-mode="android"] .pwa-when-ios { display: none; }
.pwa-install[data-mode="ios"] .pwa-when-android { display: none; }
.pwa-install[data-mode="ios"] .pwa-install-btn { display: none; }
.pwa-install[data-mode="ios"] .pwa-install-text span { -webkit-line-clamp: 3; }
@media (prefers-reduced-motion: reduce) { .pwa-install { animation: none; } }
/* An installed PWA (any display mode) must NEVER show the install prompt — this is
   a pure-CSS guarantee that holds even if the page is running older/cached JS. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  #pwa-install { display: none !important; }
}