/* gbresp — World Cup 2026 sweepstake
   Modern aesthetic: deep navy + emerald + amber + rose accents,
   glass cards with depth, generous spacing, mobile-first, accessible.
   Honours prefers-reduced-motion. No FIFA marks, no trademarked artwork.
*/

:root {
  /* Surfaces */
  --bg-0:        #060b18;
  --bg-1:        #0a1628;
  --bg-2:        #11233f;
  --bg-card:     rgba(255, 255, 255, 0.04);
  --bg-card-2:   rgba(255, 255, 255, 0.07);
  --border:      rgba(255, 255, 255, 0.10);
  --border-2:    rgba(255, 255, 255, 0.18);

  /* Type */
  --ink:         #f1f5f9;
  --ink-2:       #cbd5e1;
  --ink-dim:     #94a3b8;
  --ink-faint:   #64748b;

  /* Accents — modern, vibrant */
  --emerald:     #10b981;
  --emerald-soft:#34d399;
  --amber:       #fbbf24;
  --amber-soft:  #fcd34d;
  --rose:        #f43f5e;
  --rose-soft:   #fb7185;
  --violet:      #8b5cf6;

  /* GB/ES subtle nods */
  --gb-blue:     #0a3a8c;
  --gb-red:      #ce1126;
  --es-red:      #c60b1e;
  --es-gold:     #ffc400;

  /* Display */
  --radius-xl:   24px;
  --radius-lg:   18px;
  --radius-md:   12px;
  --radius-sm:   8px;

  --shadow-1:    0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 32px -8px rgba(0,0,0,0.5);
  --shadow-2:    0 2px 0 rgba(255,255,255,0.08) inset, 0 24px 48px -12px rgba(0,0,0,0.65);
  --shadow-tile: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 16px -6px rgba(0,0,0,0.55);

  --t-fast:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-medium:    cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Backdrop: layered radial gradients for a stadium-light feel without flat
   green stripes. Subtle, modern, sits behind everything. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(251, 191, 36, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 30%, rgba(16, 185, 129, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 65%, rgba(244, 63, 94, 0.08), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(139, 92, 246, 0.06), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

body > * { position: relative; z-index: 1; }

/* ───── flag marquee — global tournament decoration ───── */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.65rem 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 100%);
  border-bottom: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.25rem;
  animation: marquee-scroll 240s linear infinite;
  white-space: nowrap;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.85;
  flex: 0 0 auto;
}
.marquee-item img {
  width: 28px; height: 21px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  display: block;
}
.marquee-item span {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ───── header ───── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 4.5vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.wm-gbr, .wm-esp { display: inline-flex; }

/* The GBR + ESP halves sit flush together — one wordmark, two flag identities. */
/* Letter shadow gives every colour the same legible weight on the dark bg. */
.wm-letter {
  display: inline-block;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.45),
    0 0 14px rgba(0,0,0,0.3);
}

/* GBR — Union flag palette: red / white / blue */
.wm-gbr-1 { color: #cf142b; }    /* G — Union red */
.wm-gbr-2 { color: #ffffff; }    /* B — white */
.wm-gbr-3 { color: #1d4ed8; }    /* R — blue (brighter than the flag's navy
                                        for contrast on dark) */
/* ESP — rojigualda: red / yellow / red */
.wm-esp-1 { color: #c60b1e; }    /* E — Spanish red */
.wm-esp-2 { color: #ffc400; }    /* S — Spanish yellow */
.wm-esp-3 { color: #c60b1e; }    /* P — Spanish red */

/* Subtle outline under each letter so white + yellow stay legible on
   blurred / glassy backdrops too. */
@supports (-webkit-text-stroke: 0.5px black) {
  .wm-gbr-2 { -webkit-text-stroke: 0.5px rgba(0,0,0,0.4); }
  .wm-esp-2 { -webkit-text-stroke: 0.5px rgba(120,53,15,0.6); }
}

.brand:hover .wm-letter { transform: translateY(-1px); transition: transform 0.2s var(--t-fast); }

.brand-sub {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lang-switch {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  padding: 0.4rem 0.85rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s var(--t-fast), color 0.2s var(--t-fast);
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg-0);
}

/* ───── main ───── */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

/* ───── hero ───── */
.hero {
  text-align: center;
  padding: 2.5rem 0 2.5rem;
  position: relative;
}
.hero-trophy {
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 24px 48px rgba(217, 119, 6, 0.45))
          drop-shadow(0 0 32px rgba(251, 191, 36, 0.25));
  animation: trophy-float 6s ease-in-out infinite;
}
.hero-trophy svg { display: block; max-width: 56vw; height: auto; }
@media (min-width: 720px) {
  .hero-trophy svg { max-width: 220px; }
}
@keyframes trophy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-trophy { animation: none !important; }
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 0.4rem 0.85rem;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.hero h1 {
  margin: 0;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero h1 .hero-line-1 {
  display: block;
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 60%, #ea580c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(251, 191, 36, 0.25));
}
.hero h1 .hero-line-2 {
  display: block;
  margin-top: 0.1em;
  color: var(--ink);
}
.hero-sub {
  max-width: 650px;
  margin: 1.25rem auto 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--ink-2);
}
/* (hero rules + second-pick-note removed — consolidated into .hiw-card) */

/* ───── How-it-works card ───── */
.hiw-card .card-eyebrow { color: var(--amber-soft); }
.hiw-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.85rem;
}
.hiw-step {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hiw-step:hover {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--emerald);
}
.hiw-num {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--amber-soft);
  background: linear-gradient(135deg, var(--amber), #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  align-self: center;
}
.hiw-text {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ───── card primitive ───── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  margin: 1.5rem auto;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
/* Subtle gradient border-glow on cards */
.card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.card-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  margin-bottom: 0.6rem;
}
.card-eyebrow.accent { color: var(--rose-soft); }
.card h2 {
  margin: 0 0 0.65rem;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.enter-help, .grid-hint {
  margin: 0 0 1.5rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

/* ───── prizes card ───── */
.prizes-card .card-eyebrow { color: var(--amber-soft); }
.prizes-card h2 {
  text-align: center;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

/* Entry-fee callout — money-IN band, sits above the medal list. Visually
   ties to the GBR/ESP wordmark colours: amber-gold on a tinted glass strip. */
.entry-fee {
  margin: 1.25rem auto 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(255, 255, 255, 0.04) 80%);
  border: 1px solid rgba(251, 191, 36, 0.40);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tile);
}
.entry-fee-price {
  display: grid;
  place-items: center;
  padding-right: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.entry-fee-amount {
  display: block;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--amber-soft) 0%, var(--amber) 60%, #ea580c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.35));
}
.entry-fee-per {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.entry-fee-body { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.entry-fee-body p { margin: 0; }
.entry-fee-body strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }
@media (max-width: 480px) {
  .entry-fee {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }
  .entry-fee-price {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.75rem;
  }
}

.prizes-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 640px) {
  .prizes-list { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
.prize {
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-tile);
  position: relative;
  overflow: hidden;
}
.prize::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% -10%, var(--accent-glow) 0%, transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.prize-1 { --accent-glow: rgba(251, 191, 36, 0.45); border-color: rgba(251, 191, 36, 0.55); }
.prize-2 { --accent-glow: rgba(203, 213, 225, 0.40); border-color: rgba(203, 213, 225, 0.40); }
.prize-3 { --accent-glow: rgba(245, 158, 11, 0.30); border-color: rgba(217, 119, 6, 0.35); }
.prize-medal {
  font-size: 2.4rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  line-height: 1;
}
.prize-place {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.prize-amount {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--amber-soft) 0%, var(--amber) 60%, #ea580c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-top: 0.25rem;
  filter: drop-shadow(0 2px 12px rgba(251, 191, 36, 0.25));
}
.prize-2 .prize-amount {
  background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 60%, #94a3b8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(203, 213, 225, 0.2));
}
.prize-3 .prize-amount {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 60%, #92400e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.prizes-note {
  text-align: center;
  max-width: 600px;
  margin: 1.5rem auto 0;
  color: var(--ink-dim);
  font-size: 0.85rem;
}
/* (reveal-when removed — consolidated into .hiw-card item 6) */

/* ───── opens-at card ───── */
.opens-at-card { text-align: center; }
.opens-at-card .card-eyebrow { color: var(--amber-soft); }
.opens-at-card h2 {
  color: var(--amber);
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}
.opens-sub {
  max-width: 540px;
  margin: 0 auto 1.5rem;
  color: var(--ink-2);
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  max-width: 520px;
  margin: 0 auto;
}
.countdown div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 0.5rem 0.85rem;
}
.countdown strong {
  display: block;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  line-height: 1;
  font-weight: 900;
  background: linear-gradient(180deg, var(--amber-soft) 0%, var(--amber) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.countdown span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.opens-target {
  margin-top: 1.5rem;
  color: var(--ink-dim);
  font-size: 0.85rem;
}
body.before-open .enter-card,
body.before-open .grid-card,
body.before-open .code-card {
  opacity: 0.35;
  pointer-events: none;
  filter: saturate(0.4);
}

/* ───── code gate ─────
   Step 1 in the flow. While code-locked, the entry form and the picks
   grid are visually dimmed and non-interactive — but the server is the
   real enforcer, see functions/api/claim.ts. */
/* Locked state veil — must NOT smother the tile colours. Previously this
   ran opacity 0.30 + saturate 0.4 + blur(0.4px) which washed the amber/
   red contrast back into a uniform dark block at TV distance. The new
   values keep the grid almost fully visible (so taken vs available reads
   from across the room) while still cueing "not yet interactive" via
   pointer-events:none and the lock messages in the code/form cards. */
body.code-locked .enter-card,
body.code-locked .grid-card {
  opacity: 0.9;
  pointer-events: none;
  filter: none;
}
body.code-locked .enter-card input,
body.code-locked .grid-card .tile {
  pointer-events: none;
}
.code-card .form-status .code-locked-msg,
.code-card .form-status .code-unlocked-msg { display: none; }
body.code-locked   .code-card .form-status .code-locked-msg   { display: inline; color: var(--amber); }
body.code-unlocked .code-card .form-status .code-unlocked-msg { display: inline; color: var(--emerald-soft); }
body.code-unlocked .code-card input { opacity: 0.7; }
#code-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { #code-form { grid-template-columns: 2fr 1fr; align-items: end; } }
#code-form input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#code-form input:focus {
  outline: none;
  border-color: var(--emerald);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
#code-form button {
  font: inherit;
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--emerald);
  color: #04261b;
  cursor: pointer;
  letter-spacing: 0.04em;
}
#code-form button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Honeypot — accessibly hidden so screen readers don't trip, but bots
   that auto-fill every input still see and populate it. NOT display:none
   (some bots skip display:none fields). */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ───── entry form ───── */
#entry-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { #entry-form { grid-template-columns: 1fr 1fr; } }
#entry-form label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
}
#entry-form label > span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
#entry-form input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: border-color 0.2s var(--t-fast), box-shadow 0.2s var(--t-fast), background 0.2s var(--t-fast);
}
#entry-form input::placeholder { color: var(--ink-faint); }
#entry-form input:hover { background: rgba(255, 255, 255, 0.08); }
#entry-form input:focus {
  outline: none;
  border-color: var(--emerald);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
.email-hint {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.form-status {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.form-status .locked-msg, .form-status .unlocked-msg { display: none; }
body.form-empty .form-status .locked-msg   { display: inline; color: var(--amber); }
body.form-valid .form-status .unlocked-msg { display: inline; color: var(--emerald-soft); }

/* ───── grid ───── */
.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.grid-header h2 { margin: 0; }
.meta-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.meta-counter strong {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  color: var(--emerald-soft);
  font-weight: 800;
  font-size: 1.05rem;
}
.counter-of { color: var(--ink-faint); }
.counter-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  margin-left: 0.3rem;
  color: var(--ink-dim);
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
}
@media (min-width: 480px) { .grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(8, 1fr); } }

/* Tile contrast tuned for TV / room-distance / poor-lighting legibility.
   AVAILABLE = bright amber/gold (high luminance, brand accent + es-gold).
   TAKEN     = deep red maroon (low luminance, gb-red/es-red), dimmed
               number, padlock badge. The hue gap (gold→red) plus the
               luminance gap (bright→dark) means the two states stay
               distinguishable even under glare, motion blur, or
               desaturated TV output. */
.tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid #f59e0b;
  background:
    linear-gradient(160deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
  color: #0a1628;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  user-select: none;
  transition: transform 0.18s var(--t-medium), border-color 0.18s var(--t-fast), background 0.18s var(--t-fast), box-shadow 0.2s var(--t-fast);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 8px 18px -6px rgba(251, 191, 36, 0.55),
    0 4px 10px -4px rgba(0,0,0,0.45);
}
.tile:hover {
  transform: translateY(-3px);
  border-color: #ffffff;
  background:
    linear-gradient(160deg, #fef3c7 0%, #fcd34d 55%, #fbbf24 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 28px -8px rgba(251, 191, 36, 0.75),
    0 6px 14px -4px rgba(0,0,0,0.5);
}
.tile:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(251, 191, 36, 0.45),
    0 8px 18px -6px rgba(251, 191, 36, 0.55);
}
.tile:active { transform: translateY(0); }

.tile.taken {
  cursor: not-allowed;
  filter: none;
  border: 2px solid #6b0a1a;
  background:
    linear-gradient(160deg, #ce1126 0%, #9a0d1d 55%, #6b0a1a 100%);
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 6px 14px -6px rgba(0,0,0,0.65);
}
.tile.taken::after {
  content: "🔒";
  position: absolute;
  bottom: 6px; right: 8px;
  font-size: 0.95rem;
  opacity: 0.95;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
}
/* form-not-yet-valid: tiles still claimable but disabled. Crucially, do
   NOT touch .tile.taken in this state — the deep-red taken tile must
   stay strong vs the muted-amber available so the operator can see, at
   a glance, what's already gone even before unlocking. Available tiles
   keep their amber colour (slightly desaturated) and stay padlock-free
   — only .tile.taken should ever show the padlock badge so an amber
   tile is never visually conflated with a "locked/taken" tile. */
body.form-empty .tile:not(.taken) {
  cursor: not-allowed;
  filter: saturate(0.75) brightness(0.85);
  pointer-events: none;
  border-color: rgba(245, 158, 11, 0.55);
}
body.form-empty .tile:hover { transform: none; box-shadow:
  0 1px 0 rgba(255,255,255,0.45) inset,
  0 8px 18px -6px rgba(251, 191, 36, 0.45),
  0 4px 10px -4px rgba(0,0,0,0.4); }

/* Claim animation */
@keyframes pop-claim {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22) rotate(-3deg); box-shadow: 0 0 28px var(--emerald-soft); border-color: var(--emerald); }
  100% { transform: scale(1); }
}
.tile.claiming { animation: pop-claim 0.55s var(--t-medium); }

/* ───── reveal ───── */
.reveal-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 640px) { .reveal-list { grid-template-columns: 1fr 1fr; } }
.reveal-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.75rem;
  align-items: center;
  background: rgba(255,255,255,0.04);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--amber);
}
.reveal-list .r-num {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  color: var(--amber-soft);
}
.reveal-list .r-team { font-weight: 700; color: var(--ink); }

/* ───── privacy + footer ───── */
.privacy {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
  max-width: 640px;
  margin: 3rem auto 0;
}
footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
}
footer p { margin: 0.4rem 0; }
.footer-credit a {
  color: var(--ink-dim);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
}

/* ───── modals ───── */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 11, 24, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 1rem;
  animation: modal-in 0.22s var(--t-medium);
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: linear-gradient(180deg, rgba(16,185,129,0.12) 0%, rgba(11,15,26,0.95) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem 1.75rem;
  max-width: 28rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  animation: card-pop 0.32s var(--t-medium);
}
@keyframes card-pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-card h3 {
  margin: 0.5rem 0 0.6rem;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 800;
  color: var(--emerald-soft);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.modal-card p { color: var(--ink-2); }
.modal-card .muted { color: var(--ink-dim); font-size: 0.9rem; }
.modal-card .picked-num {
  display: block;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 6rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber) 60%, #f97316);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 4px 20px rgba(251, 191, 36, 0.45));
}
.modal-card .picked-num-inline {
  display: inline-block;
  background: var(--amber);
  color: var(--bg-0);
  padding: 0.1rem 0.6rem;
  border-radius: 6px;
  margin: 0 0.15rem;
  font-weight: 900;
}
.modal-close {
  margin-top: 1.5rem;
  background: linear-gradient(180deg, var(--emerald-soft), var(--emerald));
  color: var(--bg-0);
  border: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 16px -4px rgba(16, 185, 129, 0.5);
  transition: transform 0.15s var(--t-fast), box-shadow 0.2s var(--t-fast);
}
.modal-close:hover { transform: translateY(-1px); box-shadow: 0 12px 20px -4px rgba(16, 185, 129, 0.6); }
.modal-close:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* confetti (modal) */
.celebrate .confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.celebrate .confetti::before, .celebrate .confetti::after {
  content: "";
  position: absolute;
  width: 200%; height: 200%; top: -50%; left: -50%;
  background:
    radial-gradient(circle at 10% 20%, var(--amber-soft) 2px, transparent 3px) 0 0 / 60px 60px,
    radial-gradient(circle at 65% 30%, var(--rose-soft) 2px, transparent 3px) 30px 30px / 80px 80px,
    radial-gradient(circle at 80% 60%, var(--emerald-soft) 2px, transparent 3px) 0 20px / 50px 50px,
    radial-gradient(circle at 40% 85%, var(--ink) 2px, transparent 3px) 25px 0 / 70px 70px;
  animation: confetti-drift 4s linear infinite;
  opacity: 0.65;
}
@keyframes confetti-drift { to { transform: translate(-30px, 30px); } }

/* ───── toast ───── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  background: rgba(11, 15, 26, 0.95);
  color: var(--ink);
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 60;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  border: 1px solid var(--border-2);
  max-width: 90vw;
  text-align: center;
  animation: toast-in 0.28s var(--t-medium);
}
.toast.err  { border-left: 4px solid var(--rose); }
.toast.warn { border-left: 4px solid var(--amber); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ───── prefers-reduced-motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none !important; }
  .tile.claiming { animation: none !important; }
}