/* THE VAULT — simple, premium, editorial. Hyro x Creatine $50k.
   Deep warm near-black canvas, generous negative space, one red accent.
   The "vault" reads through restraint: a single hairline seam, a tactile
   4-digit entry, and one confident unlock moment. No 3D safe, no chrome,
   no gimmick motion. Apple/luxury landing language. */

:root {
  --red: #fb0d1b;
  --red-soft: #ff2b38;
  --gold: #ffd979;
  --ink: #0a0807;            /* near-black, warm */
  --ink-2: #110d0c;
  --paper: #f6f1ea;          /* warm off-white */
  --paper-dim: rgba(246, 241, 234, 0.62);
  --paper-faint: rgba(246, 241, 234, 0.34);
  --line: rgba(246, 241, 234, 0.12);
  --line-strong: rgba(246, 241, 234, 0.24);
  --serif: "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --lemon: "Lemon", "Trebuchet MS", Helvetica, sans-serif;

  /* consistent radius scale */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* tinted premium shadows (never pure black, never neon) */
  --shadow-red: 0 12px 34px -14px rgba(251, 13, 27, 0.6);
  --shadow-soft: 0 18px 48px -22px rgba(0, 0, 0, 0.72);

  /* safe-area insets (notch / home bar) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Hyro headline font */
@font-face {
  font-family: "Lemon";
  src: url("/assets/Lemon-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100dvh; }

/* warm radial vignette — subtle, expensive, not busy */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(80, 22, 18, 0.42), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(20, 12, 10, 0.9), var(--ink) 70%);
  pointer-events: none;
  z-index: 0;
}

.vault-root {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    calc(clamp(28px, 6vh, 72px) + var(--safe-t))
    calc(24px + var(--safe-r))
    calc(clamp(28px, 6vh, 72px) + var(--safe-b))
    calc(24px + var(--safe-l));
  text-align: center;
}
@media (max-width: 400px) {
  .vault-root { padding-left: calc(20px + var(--safe-l)); padding-right: calc(20px + var(--safe-r)); }
}

/* ---------------------------------------------------------------- */
/* Type                                                              */
/* ---------------------------------------------------------------- */
.kicker {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-weight: 600;
  margin-bottom: 22px;
}

/* $50K vault badge on the Confirm Entry screen */
.entry-badge {
  display: block;
  width: clamp(180px, 42vw, 260px);
  height: auto;
  margin: 0 auto clamp(18px, 3vh, 28px);
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.45));
  animation: entry-badge-in 0.7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes entry-badge-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .entry-badge { width: clamp(150px, 52vw, 220px); margin-bottom: 16px; }
}

/* ================================================================== */
/* MOBILE CONFIRM-ENTRY SCREEN: fit the whole form on one screen, no    */
/* scroll. Keeps the 2-column field grid, shrinks the badge, and trims  */
/* vertical rhythm so badge + headline + 7 fields + accept + button all  */
/* sit within the viewport.                                             */
/* ================================================================== */
@media (max-width: 560px) {
  .entry-badge { width: clamp(112px, 30vw, 150px); margin-bottom: 10px; }
  .panel + .seam, .entry { }
  .entry h2 { font-size: clamp(18px, 4.8vw, 21px); margin-bottom: 8px; }
  .form-note { font-size: 12px; line-height: 1.4; margin-bottom: 12px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .ff { min-height: 44px; padding: 11px 13px; }
  .accept { margin: 12px 0 12px; min-height: 0; font-size: 12px; line-height: 1.4; }
  .entry .unlock-btn { margin-top: 14px; }
}

/* Confirm-entry screen: pull the headline block tighter to the badge so the
   form has room (the entry screen is the tallest state). */
@media (max-width: 560px) {
  .vault-root:has(.entry) .kicker { margin-bottom: 10px; }
  .vault-root:has(.entry) .headline { margin-bottom: 10px; }
  .vault-root:has(.entry) .seam { height: 16px; margin: 0 auto 12px; }
}

/* Shorter phones (iPhone SE 375x667 and similar): squeeze the entry screen
   further so it still fits with no scroll. */
@media (max-width: 560px) and (max-height: 720px) {
  .vault-root:has(.entry) { padding-top: calc(6px + var(--safe-t)); padding-bottom: calc(6px + var(--safe-b)); justify-content: flex-start; }
  .entry-badge { width: clamp(72px, 19vw, 88px); margin-bottom: 2px; }
  .vault-root:has(.entry) .kicker { margin-bottom: 4px; font-size: 9.5px; }
  .vault-root:has(.entry) .headline { margin-bottom: 3px; font-size: clamp(25px, 7vw, 32px); line-height: 1.05; }
  .vault-root:has(.entry) .seam { height: 8px; margin: 0 auto 6px; }
  .entry h2 { font-size: clamp(16px, 4.4vw, 18px); margin-bottom: 5px; }
  .form-note { font-size: 10.5px; line-height: 1.3; margin-bottom: 6px; max-width: 30ch; }
  .form-grid { gap: 6px; }
  .ff { min-height: 37px; padding: 8px 12px; font-size: 16px; }
  .accept { margin: 6px 0 5px; font-size: 10.5px; line-height: 1.3; }
  .entry .unlock-btn { margin-top: 6px; padding: 11px 38px; }
}

.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--paper);
}
.headline .amt { color: var(--red); font-style: italic; }

/* Confirm Entry landing headline: Lemon font, ALL CAPS (Hyro brand headline).
   Scoped so only the entry-screen headline uses Lemon, not the other screens. */
.vault-root:has(.entry) .headline {
  font-family: var(--lemon);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
  /* 15% larger than the base headline clamp(34px, 7vw, 76px) */
  font-size: clamp(39px, 8.05vw, 87px);
}
.vault-root:has(.entry) .headline .amt { font-style: normal; }

.sub {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 30ch;
  margin: 0 auto 40px;
  font-weight: 400;
}

/* ---------------------------------------------------------------- */
/* The seam — the one ornament. A thin vertical line of light that   */
/* "splits" on the win moment. Reads as a vault door joint.          */
/* ---------------------------------------------------------------- */
.seam {
  position: relative;
  width: 1px;
  height: clamp(30px, 4.5vh, 48px);
  margin: 4px auto 26px;
  /* a hairline joint that fades from a central lock-node outward */
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line-strong) 46%,
    var(--line-strong) 54%,
    transparent);
}
.seam::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(251, 13, 27, 0.75), 0 0 2px rgba(251, 13, 27, 0.9);
}
@media (max-width: 400px) {
  .seam { height: clamp(24px, 4vh, 36px); margin: 2px auto 22px; }
}

/* ---------------------------------------------------------------- */
/* Countdown — clean, airy, mono-ish numerals                        */
/* ---------------------------------------------------------------- */
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  margin: 6px auto 42px;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.cd-num {
  font-family: var(--serif);
  font-size: clamp(38px, 7vw, 64px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.cd-lbl {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.cd-sep {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 52px);
  color: var(--line-strong);
  line-height: 1;
  align-self: flex-start;
}

/* ---------------------------------------------------------------- */
/* Buttons / CTA                                                     */
/* ---------------------------------------------------------------- */
.cta, .unlock-btn, .again-btn {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  min-height: 48px;
  cursor: pointer;
  border: 0;
  border-radius: var(--r-pill);
  transition: transform 0.18s cubic-bezier(.16,1,.3,1), background 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--red);
  color: #fff;
  padding: 15px 34px;
  box-shadow: var(--shadow-red);
}
.cta:focus-visible, .unlock-btn:focus-visible, .again-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(251, 13, 27, 0.6);
}
.cta:hover, .unlock-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--red-soft); box-shadow: 0 16px 40px -14px rgba(251, 13, 27, 0.7); }
.cta:active, .unlock-btn:active:not(:disabled) { transform: translateY(0) scale(0.99); }

.fine {
  margin: 22px auto 0;
  font-size: 12px;
  color: var(--paper-faint);
  max-width: 34ch;
  line-height: 1.55;
}

.tc-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-decoration: none;
}
.tc-link > span, .tc-link::first-line { }
.tc-link {
  position: relative;
}
.tc-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 1px;
  background: var(--line);
  transition: background 0.18s;
}
.tc-link:hover { color: var(--paper-dim); }
.tc-link:hover::after { background: var(--line-strong); }

/* ---------------------------------------------------------------- */
/* Email gate                                                        */
/* ---------------------------------------------------------------- */
.panel { width: 100%; max-width: 460px; }

.entry h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 5.4vw, 24px);
  margin: 0 0 16px;
  color: var(--paper);
  letter-spacing: 0.01em;
}
/* Legacy underline field style — scoped so it never clobbers boxed .ff inputs
   OR the accept checkbox (text/email/etc. only). */
.entry input:not(.ff):not([type="checkbox"]),
.email-field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  text-align: left;
  padding: 14px 6px;
  outline: none;
  transition: border-color 0.2s;
}
.entry input:not(.ff):not([type="checkbox"])::placeholder,
.email-field::placeholder { color: var(--paper-faint); }
.entry input:not(.ff):not([type="checkbox"]):focus,
.email-field:focus { border-color: var(--red); }
.entry .unlock-btn { margin-top: 24px; }

.unlock-btn {
  background: var(--red);
  color: #fff;
  padding: 14px 38px;
  box-shadow: 0 10px 30px -12px rgba(251, 13, 27, 0.7);
}
.unlock-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.unlock-btn.big { padding: 16px 52px; font-size: 14px; margin-top: 4px; }

/* ---------------------------------------------------------------- */
/* The lock — premium tactile 4-digit entry                          */
/* ---------------------------------------------------------------- */
.lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
}

.attempts-left {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 6px;
}
.attempts-left.none { color: var(--red); }

.digits {
  display: flex;
  gap: clamp(10px, 3vw, 16px);
  justify-content: center;
  margin-bottom: 28px;
}
.digit {
  width: clamp(58px, 17vw, 74px);
  height: clamp(74px, 21vw, 94px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lemon);
  font-weight: 700;
  font-size: clamp(32px, 8.4vw, 44px);
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(246, 241, 234, 0.045), rgba(246, 241, 234, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px -14px rgba(0, 0, 0, 0.7);
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.digit.filled {
  background: linear-gradient(180deg, rgba(246, 241, 234, 0.08), rgba(246, 241, 234, 0.04));
  border-color: var(--line-strong);
}
.digit.active {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(251, 13, 27, 0.35), 0 12px 34px -16px rgba(251, 13, 27, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.digit.active::after {
  content: "";
  position: absolute;
  bottom: 14px;
  width: 1.5px; height: 22px;
  background: var(--red);
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Keypad */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 3vw, 16px);
  width: 100%;
  max-width: 300px;
  margin: 0 auto 26px;
}
.key {
  aspect-ratio: 1 / 1;
  min-width: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lemon);
  font-weight: 700;
  font-size: clamp(22px, 6vw, 28px);
  color: var(--paper);
  background:
    radial-gradient(120% 120% at 50% 22%, rgba(246, 241, 234, 0.07), rgba(246, 241, 234, 0.03));
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px -6px rgba(0, 0, 0, 0.6);
  transition: background 0.15s, transform 0.1s cubic-bezier(.16,1,.3,1), border-color 0.15s, box-shadow 0.15s;
}
.key:hover { background: rgba(246, 241, 234, 0.1); border-color: var(--line-strong); }
.key:active {
  transform: scale(0.93);
  background: radial-gradient(120% 120% at 50% 30%, rgba(251, 13, 27, 0.28), rgba(251, 13, 27, 0.12));
  border-color: var(--red);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 18px -6px rgba(251, 13, 27, 0.7);
}
.key.fn {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.key.fn:hover { color: var(--paper-dim); background: rgba(246,241,234,0.04); }
.key.fn:active { transform: scale(0.93); background: rgba(246,241,234,0.06); box-shadow: none; border-color: var(--line); }
.key[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }

.dial-hint {
  font-size: 11px;
  color: var(--paper-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------- */
/* Unlocking + result                                                */
/* ---------------------------------------------------------------- */
.unlocking-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 18px 0;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

.result {
  margin-top: 6px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 6.2vw, 28px);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
  line-height: 1.12;
  max-width: 22ch;
}
.result .r-miss { color: var(--paper); }
.result .r-dup, .result .r-err { color: var(--red); }
.result p { color: var(--paper-dim); font-size: 14px; line-height: 1.55; margin: 0 0 20px; max-width: 34ch; }
.again-btn {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 13px 32px;
}
.again-btn:hover { border-color: var(--red); color: #fff; transform: translateY(-1px); }
.again-btn:active { transform: translateY(0) scale(0.99); }

.view-wall {
  display: inline-block;
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.view-wall:hover { color: var(--paper-dim); }

/* ---------------------------------------------------------------- */
/* Wall — minimal, eliminated codes                                  */
/* ---------------------------------------------------------------- */
.wall {
  margin: 30px auto 0;
  width: 100%;
  max-width: 460px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.wall-head {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wall-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.wall-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  max-height: 168px;
  overflow-y: auto;
}
.wall-code {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--paper-faint);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.wall-code::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: 52%;
  height: 1px;
  background: var(--red);
  opacity: 0.55;
}

/* ---------------------------------------------------------------- */
/* Win takeover — restrained, editorial, one big number              */
/* ---------------------------------------------------------------- */
/* ================================================================== */
/* WIN REVEAL (rebuilt clean). One elegant unlock moment.              */
/* Layers: gold bloom (the vault opening) -> staggered typographic      */
/* reveal -> physics confetti (canvas-confetti, separate layer).        */
/* ================================================================== */
/* the frozen opened dial sits under the reveal so it dissolves in (crossfade, no cut) */
.win-underlay {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
}
.win-underlay .unlockseq {
  animation: none;
  background: radial-gradient(circle at 50% 42%, rgba(20,14,12,0.86), rgba(6,5,4,0.97) 70%);
}
.win-underlay .vd-ring { animation: none; opacity: 0; transform: scale(1.14); }
.win-underlay .vd-track { border-color: rgba(255,215,140,0.7); box-shadow: 0 0 60px 10px rgba(255,200,110,0.4), inset 0 0 30px rgba(255,190,90,0.2); transform: scale(1.05); }
.win-underlay .vd-glow { opacity: 1; background: radial-gradient(circle, rgba(255,220,140,0.7) 0%, rgba(255,180,70,0.18) 46%, transparent 72%); transform: scale(1.3); }
.win-underlay .vd-hub { box-shadow: 0 0 70px 14px rgba(255,200,110,0.75), inset 0 0 20px rgba(255,210,130,0.25); border-color: rgba(255,215,140,0.85); transform: scale(1.06); }
.win-underlay .vd-tick { opacity: 0; }

.winv {
  position: fixed;
  inset: 0;
  z-index: 70; /* above the dial (z60) so it crossfades in over it, never behind */
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(40px + var(--safe-t))
    calc(24px + var(--safe-r))
    calc(40px + var(--safe-b))
    calc(24px + var(--safe-l));
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  background: #0b0806;
  /* dissolve in over the opened dial — a smooth crossfade, not a hard cut */
  animation: winv-fadein 1.1s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes winv-fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* the vault opening: a warm gold light that blooms out from the centre */
.winv-bloom {
  position: absolute;
  left: 50%; top: 46%;
  width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 236, 190, 0.42) 0%,
    rgba(251, 13, 27, 0.20) 24%,
    rgba(120, 20, 16, 0.28) 42%,
    transparent 62%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.winv.s1 .winv-bloom {
  animation: winv-bloom 2.4s cubic-bezier(.2,.7,.25,1) forwards;
}
@keyframes winv-bloom {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

/* slow-rotating volumetric rays behind the number */
.winv-rays {
  position: absolute;
  left: 50%; top: 46%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%) rotate(0deg);
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 226, 165, 0.06) 0deg 6deg,
    transparent 6deg 14deg);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%);
          mask: radial-gradient(circle, #000 0%, transparent 62%);
}
.winv.s2 .winv-rays { animation: winv-rays 26s linear infinite, winv-rays-in 1.2s ease forwards; }
@keyframes winv-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes winv-rays-in { to { opacity: 1; } }

/* the content column, revealed once the bloom is underway */
.winv-inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
}
.winv.s2 .winv-inner { animation: winv-rise 0.9s cubic-bezier(.16,1,.3,1) 0.05s forwards; }
@keyframes winv-rise { to { opacity: 1; transform: none; } }

/* staggered children entrance */
.winv-congrats, .winv-kicker, .winv-cash, .winv-aud, .winv-meta {
  opacity: 0;
  transform: translateY(12px);
}
.winv.s2 .winv-congrats { animation: winv-child 0.7s cubic-bezier(.16,1,.3,1) 0.10s forwards; }
.winv.s2 .winv-kicker   { animation: winv-child 0.7s cubic-bezier(.16,1,.3,1) 0.22s forwards; }
.winv.s2 .winv-cash     { animation: winv-cash 0.9s cubic-bezier(.16,1,.3,1) 0.34s forwards; }
.winv.s2 .winv-aud      { animation: winv-child 0.7s cubic-bezier(.16,1,.3,1) 0.5s forwards; }
.winv.s2 .winv-meta     { animation: winv-child 0.7s cubic-bezier(.16,1,.3,1) 0.62s forwards; }
@keyframes winv-child { to { opacity: 1; transform: none; } }
@keyframes winv-cash {
  0%   { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}

.winv-congrats {
  font-family: var(--lemon);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 8vw, 66px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: #ffd979;
  text-shadow: 0 0 42px rgba(255, 200, 90, 0.4);
}
.winv-kicker {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--paper);
}
.winv-cash {
  margin-top: clamp(24px, 5vh, 34px);
  font-family: var(--lemon);
  font-size: clamp(54px, 17vw, 160px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 70px rgba(255, 214, 130, 0.42), 0 3px 40px rgba(0,0,0,0.5);
}
.winv-aud {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.winv-meta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.winv-code {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.winv-code b { color: var(--red); font-weight: 700; letter-spacing: 0.12em; }
.winv-winner {
  font-family: var(--lemon);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 19px;
  color: var(--paper);
}

/* next-steps panel rises in at stage 4 */
.winv-next {
  margin-top: 36px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
  border-top: 1px solid var(--line);
  padding-top: 28px;
  pointer-events: none;
}
.winv.s4 .winv-next { opacity: 1; transform: none; pointer-events: auto; }
.rv-next-title {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 18px;
}
.rv-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 26px;
  max-width: 420px;
  text-align: left;
}
.rv-steps li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 1.5;
  padding: 9px 0;
}
.rv-n {
  flex: none;
  font-family: var(--serif);
  color: var(--red);
  font-size: 15px;
  width: 18px;
}

/* Win reveal — tighten vertical rhythm on short / narrow screens */
@media (max-width: 430px) {
  .winv-congrats { font-size: clamp(30px, 8.5vw, 44px); }
  .winv-cash { margin-top: clamp(18px, 4vh, 28px); }
  .winv-meta { margin-top: 24px; }
  .winv-next { margin-top: 28px; padding-top: 24px; }
  .rv-steps li { font-size: 12.5px; padding: 8px 0; }
}
@media (max-height: 720px) {
  .winv { align-items: flex-start; }
  .winv-congrats { font-size: clamp(28px, 7vw, 40px); }
  .winv-cash { margin-top: 18px; }
}

/* ---------------------------------------------------------------- */
/* Turnstile — visually hidden background widget                     */
/* ---------------------------------------------------------------- */
.ts-wrap {
  position: fixed;
  bottom: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.ts-wrap.needs {
  width: auto; height: auto;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}
.ts-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--paper-dim);
  text-align: center;
}

/* hide Turnstile's own injected badge/iframe when not needed */
.ts-wrap:not(.needs) iframe { visibility: hidden; }

/* ---------------------------------------------------------------- */
/* Reduced motion                                                    */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .unlocking-label, .digit.active::after { animation: none; }
  .winv, .winv-bloom, .winv-rays, .winv-inner,
  .winv-congrats, .winv-kicker, .winv-cash, .winv-aud, .winv-meta, .winv-next {
    animation: none !important; transition: none !important; opacity: 1; transform: none;
  }
  .winv-bloom { opacity: 0.7; }
}

@media (max-width: 420px) {
  .digit { border-radius: 11px; }
}

/* ---------------------------------------------------------------- */
/* Entries-progress activation meter (pre-activation)                */
/* ---------------------------------------------------------------- */
.entries { width: min(440px, 88vw); margin: 8px auto 34px; text-align: center; }
.entries-count {
  font-family: var(--serif);
  font-size: clamp(40px, 9vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.entries-count .entries-slash { color: var(--paper-faint); font-size: 0.46em; letter-spacing: 0.01em; }
.entries-lbl {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--paper-dim);
}
.entries-bar {
  position: relative;
  margin: 22px auto 0;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(246, 241, 234, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(246, 241, 234, 0.05);
  overflow: hidden;
}
.entries-fill {
  position: relative;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  transition: width 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 0 16px rgba(251, 13, 27, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* soft leading highlight on the fill edge for a premium sheen */
.entries-fill::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 22px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28));
  border-radius: var(--r-pill);
}
.entries-pct {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ---------------------------------------------------------------- */
/* Full entry-confirm form (T&Cs clause 8.3)                         */
/* ---------------------------------------------------------------- */
.form-note {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-dim);
  text-align: center;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-bottom: 4px;
  text-align: left;
}
.ff {
  width: 100%;
  min-height: 50px;
  padding: 14px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(246, 241, 234, 0.03);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  text-align: left;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ff::placeholder { color: var(--paper-faint); text-align: left; }
.ff:hover { border-color: rgba(246, 241, 234, 0.32); }
.ff:focus {
  border-color: var(--red);
  background: rgba(246, 241, 234, 0.05);
  box-shadow: 0 0 0 3px rgba(251, 13, 27, 0.14);
}
.ff-wide { grid-column: 1 / -1; }
select.ff {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 40px;
  /* custom chevron */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23f6f1ea' stroke-opacity='0.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
select.ff:invalid, select.ff option[value=""] { color: var(--paper-faint); }
select.ff option { color: #111; }

.gate-msg {
  margin: 14px 0 2px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid rgba(251, 13, 27, 0.4);
  background: rgba(251, 13, 27, 0.08);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.accept {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 20px;
  padding: 4px 0;
  min-height: 44px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-dim);
  text-align: left;
  cursor: pointer;
}
.accept input {
  margin-top: 1px;
  width: 20px;
  height: 20px;
  accent-color: var(--red);
  flex: none;
  cursor: pointer;
}
.accept span { flex: 1 1 auto; min-width: 0; }
.accept a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.accept a:hover { color: #fff; }

@media (max-width: 420px) {
  /* keep 2 columns so the whole form fits one screen without scroll */
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================== */
/* UNLOCK SEQUENCE — the cinematic moment. Full-stage takeover.        */
/* ================================================================== */
.unlockseq {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 40px);
  padding:
    calc(24px + var(--safe-t))
    calc(24px + var(--safe-r))
    calc(24px + var(--safe-b))
    calc(24px + var(--safe-l));
  background: radial-gradient(circle at 50% 42%, rgba(20,14,12,0.86), rgba(6,5,4,0.97) 70%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: useq-in 0.4s ease both;
}
@keyframes useq-in { from { opacity: 0; } to { opacity: 1; } }

.useq-stage {
  position: relative;
  width: min(360px, 80vw);
  height: min(360px, 80vw);
  display: grid;
  place-items: center;
}

/* ============================================================ */
/* MINIMAL COMBINATION DIAL. One continuously-rotating ring on a  */
/* fixed track. It never swaps duration or resets its angle, so   */
/* the motion stays perfectly smooth from tension through unlock. */
/* ============================================================ */
.vault-door {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* soft ambient glow under the dial */
.vd-glow {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,241,234,0.05), transparent 62%);
  opacity: 0;
  transition: opacity 0.8s ease, background 0.8s ease;
  z-index: 0;
}
.tension .vd-glow { opacity: 1; }

/* the fixed outer track (does not move) */
.vd-track {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(246,241,234,0.14);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  z-index: 1;
}

/* the single rotating ring. One steady, continuous spin. */
.vd-ring {
  position: absolute; inset: 9%;
  border-radius: 50%;
  border: 1.5px solid rgba(246,241,234,0.16);
  z-index: 2;
  will-change: transform;
  animation: vd-spin 3.4s linear infinite;
}
/* one bright marker dot on the ring so the rotation is legible + premium */
.vd-tick {
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(251,13,27,0.8);
}
@keyframes vd-spin { to { transform: rotate(360deg); } }

/* centre hub with the entered code */
.vd-hub {
  position: relative;
  z-index: 3;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #241b18, #0b0807 72%);
  border: 1px solid rgba(246,241,234,0.12);
  display: grid;
  place-items: center;
  box-shadow: inset 0 3px 16px rgba(0,0,0,0.7), 0 0 30px rgba(0,0,0,0.5);
  transition: box-shadow 1s ease, border-color 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.vd-code { display: flex; gap: 7px; }
.vd-d {
  font-family: var(--lemon);
  font-weight: 700;
  font-size: clamp(24px, 6.5vw, 36px);
  color: var(--paper);
  opacity: 0.92;
  font-variant-numeric: tabular-nums;
}

/* status line */
.useq-status { text-align: center; min-height: 26px; }
.useq-line {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--paper-dim);
  transition: opacity 0.4s ease;
}
.useq-line.big {
  font-family: var(--lemon);
  font-weight: 700;
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 0.12em;
  color: #ffd979;
  text-shadow: 0 0 24px rgba(255,200,90,0.45);
  animation: useq-rise 0.6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes useq-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================ */
/* WIN: ONE continuous, staged progression on the SAME dial.     */
/*   .won        -> correct combination locked in (ring eases,    */
/*                  stops spinning cleanly, no snap)              */
/*   .wg1        -> circle OUTLINES turn gold (track + ring rim)  */
/*   .wg2        -> circle INNER (hub) goes gold                  */
/*   .wopen      -> vault unlocks: gold light blooms, dial dissolves*/
/* Each step is its own transition so the beats read distinctly   */
/* and nothing ever jumps or remounts.                            */
/* ============================================================ */

/* the ring eases to a smooth stop the instant the code is correct */
.unlockseq.won .vd-ring {
  animation: vd-spin 3.4s linear infinite, vd-stop 0.9s cubic-bezier(.15,.85,.2,1) forwards;
  transition: border-color 0.7s ease, box-shadow 0.7s ease, opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
@keyframes vd-stop { to { animation-play-state: paused; } }
.unlockseq.won .vd-tick { opacity: 0; transition: opacity 0.5s ease; }

/* everything transitions smoothly between the staged states */
.unlockseq.won .vd-track { transition: border-color 0.7s ease, box-shadow 0.7s ease, transform 0.8s cubic-bezier(.2,.7,.2,1); }
.unlockseq.won .vd-glow  { transition: opacity 0.8s ease, background 0.9s ease, transform 0.9s ease; }

/* STEP 3 — outlines gold: the fixed track + the ring rim glow gold */
.unlockseq.won.wg1 .vd-track {
  border-color: rgba(255,215,140,0.85);
  box-shadow: 0 0 34px 4px rgba(255,200,110,0.35), inset 0 0 24px rgba(255,190,90,0.14);
}
.unlockseq.won.wg1 .vd-ring {
  border-color: rgba(255,215,140,0.9);
  box-shadow: 0 0 26px 2px rgba(255,200,110,0.4);
}

/* STEP 4 — inner gold: the centre hub fills with warm gold */
.unlockseq.won.wg2 .vd-hub {
  background: radial-gradient(circle at 42% 36%, #ffe6a6 0%, #f7b64e 55%, #d98b1f 100%);
  border-color: rgba(255,225,160,0.95);
  box-shadow: 0 0 60px 12px rgba(255,200,110,0.7), inset 0 0 22px rgba(255,235,190,0.5);
  transform: scale(1.04);
}
.unlockseq.won.wg2 .vd-d { color: #3a2506; opacity: 1; }

/* STEP 5 — vault unlocks: the whole dial blooms open and dissolves away */
.unlockseq.won.wopen .vd-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(255,225,150,0.85) 0%, rgba(255,185,80,0.22) 46%, transparent 72%);
  transform: scale(1.5);
}
.unlockseq.won.wopen .vd-track { border-color: rgba(255,225,160,0.9); box-shadow: 0 0 80px 16px rgba(255,205,120,0.5), inset 0 0 30px rgba(255,195,95,0.2); transform: scale(1.08); }
.unlockseq.won.wopen .vd-ring { opacity: 0; transform: scale(1.18); }
.unlockseq.won.wopen .vd-hub  { box-shadow: 0 0 100px 24px rgba(255,205,120,0.85), inset 0 0 26px rgba(255,235,190,0.6); transform: scale(1.12); }

/* wrapper that holds the dial during the win; fades out cleanly as the reveal
   crossfades in over it (no hard cut, no jump). */
.win-dialwrap { transition: opacity 1s cubic-bezier(.4,0,.2,1); }
.win-dialwrap.gone { opacity: 0; }

/* ---- MISS: a single tight shudder, then the dial holds ---- */
.unlockseq.miss .useq-stage { animation: door-shudder 0.55s cubic-bezier(.36,.07,.19,.97); }
.unlockseq.miss .vd-track { border-color: rgba(255,43,56,0.5); transition: border-color 0.3s ease; }
.unlockseq.miss .vd-ring { animation-play-state: paused; }
@keyframes door-shudder {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-8px); }
  40%,60% { transform: translateX(8px); }
}
.unlockseq.miss .vd-hub {
  box-shadow: inset 0 3px 16px rgba(0,0,0,0.7), 0 0 30px 4px rgba(255,43,56,0.4);
  border-color: rgba(255,43,56,0.6);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.unlockseq.miss { animation: useq-in 0.4s ease both, miss-flash 0.5s ease; }
@keyframes miss-flash { 0%,100% { background-color: transparent; } 30% { background-color: rgba(255,43,56,0.07); } }

@media (prefers-reduced-motion: reduce) {
  .vd-ring, .vd-glow, .unlockseq, .useq-stage, .useq-line.big { animation: none !important; }
  .unlockseq.won .vd-hub { box-shadow: 0 0 50px 10px rgba(255,200,110,0.6); }
}

/* ---- Per-order attempts + your own previous guesses ---- */
.attempts-order {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 0;
  margin-bottom: 22px;
}
.your-guesses {
  width: min(420px, 86vw);
  margin: 18px auto 26px;
  text-align: center;
}
.yg-title {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 12px;
}
.yg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.yg-code {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--paper-dim);
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(246, 241, 234, 0.03);
  text-decoration: line-through;
  text-decoration-color: rgba(251, 13, 27, 0.6);
}

/* ================================================================== */
/* GLOBAL MOBILE POLISH — rhythm + overflow safeguards                 */
/* Breakpoints validated at 320 / 390 / 430 (mobile), 768, 1200.       */
/* ================================================================== */

/* never allow a horizontal scrollbar on any device */
html, body { overflow-x: hidden; max-width: 100%; }

/* tablet and below: tighten the display headline + vertical rhythm */
@media (max-width: 768px) {
  .kicker { margin-bottom: 18px; }
  .headline { margin-bottom: 16px; }
  .sub { margin-bottom: 30px; }
}

/* phones */
@media (max-width: 430px) {
  .kicker { letter-spacing: 0.34em; margin-bottom: 16px; }
  .sub { margin-bottom: 26px; }
  .panel { max-width: 100%; }
  .lock { max-width: 100%; }
  .cta { padding: 15px 30px; }
  .unlock-btn.big { padding: 16px 40px; }

  /* CODE-INPUT SCREEN: compress so the whole keypad + button fit on one screen
     (no scroll, kicker never clipped). Reclaims the ~100px overflow. */
  .vault-root { padding-top: calc(16px + var(--safe-t)); padding-bottom: calc(16px + var(--safe-b)); }
  .attempts-left { margin-bottom: 4px; }
  .attempts-order { margin-bottom: 4px; }
  .digits { gap: clamp(9px, 2.6vw, 13px); margin-bottom: 16px; }
  .digit {
    width: clamp(50px, 15vw, 62px);
    height: clamp(60px, 18vw, 74px);
    font-size: clamp(28px, 8vw, 38px);
  }
  .keypad { gap: clamp(8px, 2.4vw, 12px); max-width: 264px; margin: 0 auto 14px; }
  .key { font-size: clamp(21px, 6vw, 26px); min-width: 48px; min-height: 48px; }
  .dial-hint { margin-bottom: 14px; }
  .attempts-left + .attempts-order { margin-top: 2px; }
}

/* code-input screen on shorter phones: trim a touch more so nothing scrolls */
@media (max-width: 430px) and (max-height: 780px) {
  .digit { height: clamp(54px, 16vw, 66px); }
  .digits { margin-bottom: 12px; }
  .keypad { gap: clamp(7px, 2.2vw, 10px); margin-bottom: 12px; }
  .dial-hint { margin-bottom: 10px; }
  .seam { height: clamp(18px, 2.6vh, 26px); margin: 2px auto 14px; }
}

/* small/short phones (e.g. iPhone SE 375x667): guarantee the whole code screen
   fits with the T&Cs link visible and the kicker clear of the top. */
@media (max-width: 430px) and (max-height: 700px) {
  .vault-root { padding-top: calc(12px + var(--safe-t)); padding-bottom: calc(12px + var(--safe-b)); }
  .attempts-left { font-size: 10px; margin-bottom: 2px; }
  .attempts-order { font-size: 11px; margin-bottom: 2px; }
  .seam { height: 14px; margin: 0 auto 10px; }
  .digit { width: clamp(46px, 14vw, 56px); height: clamp(48px, 14vw, 58px); font-size: clamp(26px, 7vw, 34px); }
  .digits { gap: 8px; margin-bottom: 10px; }
  .keypad { max-width: 236px; gap: 7px; margin-bottom: 8px; }
  .key { min-width: 42px; min-height: 42px; font-size: clamp(19px, 5.4vw, 24px); }
  .dial-hint { margin-bottom: 8px; }
  .unlock-btn.big { padding: 12px 36px; }
  .tc-link { margin-top: 10px; }
}

/* very small phones (320px): guarantee no clipping / overflow */
@media (max-width: 340px) {
  .digits { gap: 9px; }
  .digit { width: clamp(52px, 25vw, 60px); height: clamp(66px, 30vw, 76px); font-size: clamp(30px, 13vw, 38px); }
  .keypad { gap: 10px; }
  .key { font-size: 22px; }
  .headline { font-size: clamp(30px, 8.5vw, 40px); }
  .winv-code, .winv-winner { word-break: break-word; }
}

/* short viewports (landscape phones): keep content reachable */
@media (max-height: 620px) {
  .vault-root { justify-content: flex-start; }
}

/* ================================================================== */
/* COUNTDOWN LANDING — vault as a centred inline image (deterministic). */
/*                                                                      */
/* Three stacked blocks in normal flow:                                 */
/*   .topband   headline + countdown  (plain dark bg)                   */
/*   .vault-img the vault cutout, centred (its own row — text can never  */
/*              overlap it because it is a real element in the column)   */
/*   .botband   CTA + fine print       (plain dark bg)                  */
/* Responsive via <picture> (mobile asset < 560px) + fluid sizing.      */
/* ================================================================== */
.vault-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 26px);
  text-align: center;
}
.vault-cd .topband,
.vault-cd .botband { width: 100%; }
.vault-cd .topband { display: flex; flex-direction: column; align-items: center; }
.vault-cd .botband { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 26px); }
.vault-cd .headline {
  margin-bottom: 0;
  /* Hyro brand headline: Lemon font, ALL CAPS, 20% larger than base. */
  font-family: var(--lemon);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
  /* base is clamp(34px, 7vw, 76px); +20% = clamp(41px, 8.4vw, 91px) */
  font-size: clamp(41px, 8.4vw, 91px);
}
.vault-cd .headline .amt { font-style: normal; }
/* countdown now sits UNDER the vault image, button under that */
.vault-cd .botband .cdwrap { margin-top: 0; }
.vault-cd .botband .cta { margin: 0; }

/* the vault image — centred, capped, with a soft glow to seat it on black */
.vault-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  line-height: 0;
}
.vault-img {
  display: block;
  width: auto;
  height: clamp(300px, 42vh, 520px);
  max-width: 92vw;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.55));
}

/* fine print a touch tighter under the CTA on the countdown page */


/* ---- Desktop / wide ---- */
@media (min-width: 861px) {
  .vault-img { height: clamp(320px, 42vh, 480px); }
  .vault-cd { gap: clamp(10px, 2.2vh, 22px); }
  .vault-cd { padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(28px, 5vh, 56px); }
}

/* ---- Tablet ---- */
@media (max-width: 860px) and (min-width: 561px) {
  .vault-img { height: clamp(300px, 40vh, 440px); }
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
  .vault-cd { gap: clamp(10px, 2.4vh, 20px); padding-top: calc(clamp(18px,3.5vh,30px) + var(--safe-t)); padding-bottom: calc(clamp(18px,3.5vh,30px) + var(--safe-b)); }
  .vault-cd .headline { font-size: clamp(32px, 9.1vw, 46px); margin-bottom: 0; }
  .vault-img { height: clamp(220px, 32vh, 330px); max-width: 82vw; }
  .vault-cd .botband { gap: clamp(12px, 2.4vh, 20px); }
  .cdwrap { margin-top: 0; }
  .cd-when { font-size: 8px; letter-spacing: 0.04em; margin-top: 10px; white-space: nowrap; }
  /* keep all 4 units + separators on ONE row — never stack */
  .countdown { gap: clamp(4px, 1.4vw, 8px); flex-wrap: nowrap; }
  .cd-num { font-size: clamp(26px, 8.4vw, 40px); }
  .cd-unit { min-width: clamp(38px, 15vw, 54px); }
  .cd-lbl { font-size: 8.5px; letter-spacing: 0.16em; }
  .cd-sep { font-size: clamp(20px, 6vw, 30px); }
}

/* ---- Short viewports (landscape phones / small laptops) ---- */
@media (max-height: 620px) {
  .vault-cd { justify-content: center; gap: 8px; }
  .vault-img { height: clamp(180px, 34vh, 280px); }
}

/* ---- Very small phones ---- */
@media (max-width: 360px) {
  .vault-img { height: clamp(190px, 28vh, 260px); }
  .cd-when { font-size: 7px; letter-spacing: 0.02em; }
  .countdown { gap: 4px; flex-wrap: nowrap; }
  .cd-num { font-size: clamp(22px, 8vw, 32px); }
  .cd-unit { min-width: clamp(34px, 14vw, 46px); }
  .cd-sep { font-size: clamp(18px, 6vw, 26px); }
  .cd-lbl { font-size: 8px; }
}

/* countdown wrapper caption + spacing (countdown page) */
.cdwrap { margin: clamp(8px, 2vh, 20px) auto 0; }
.cd-when {
  margin-top: 16px;
  /* fluid so the full launch date always fits on ONE line, even on narrow phones.
     ~41 uppercase chars; scale with viewport width and drop to no letter-spacing
     on small screens. Caps at 11px on desktop. */
  font-size: clamp(8px, 2.7vw, 11px);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  opacity: 0.92;
}
@media (min-width: 561px) { .cd-when { letter-spacing: 0.22em; } }
.countdown { margin: 0 auto; }
.cd-unit { min-width: clamp(52px, 13vw, 72px); }

/* ================================================================== */
/* HOW-TO-PLAY ACCORDION + T&Cs LINK (countdown lander)                */
/* A restrained disclosure under the CTA: hairline pill that expands to */
/* reveal 4 numbered steps + fine print. Premium, on-brand, accessible. */
/* ================================================================== */
.htp {
  width: min(440px, 90vw);
  margin: clamp(2px, 1vh, 8px) auto 0;
  text-align: left;
}
.htp-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(246, 241, 234, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--paper-dim);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 46px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.htp-head:hover { background: rgba(246, 241, 234, 0.07); border-color: var(--line-strong); color: var(--paper); }
.htp-head:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(251, 13, 27, 0.5); }
.htp-title { line-height: 1; }
.htp-chev {
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.24s cubic-bezier(.16,1,.3,1);
}
.htp.open .htp-chev { transform: rotate(-135deg) translateY(-1px); }

/* animated panel */
.htp-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(.16,1,.3,1);
}
.htp.open .htp-panel { max-height: 460px; }
.htp-inner {
  padding: 18px 20px 4px;
}
.htp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.htp-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper-dim);
}
.htp-n {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.htp-fine {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--paper-faint);
}

/* T&Cs apply — quiet underlined link pinned at the very bottom */
.tc-apply {
  display: inline-block;
  margin-top: clamp(14px, 2.4vh, 22px);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: color 0.18s;
}
.tc-apply:hover { color: var(--paper-dim); }

@media (max-width: 560px) {
  .htp { width: min(400px, 88vw); }
  .htp-head { font-size: 11px; min-height: 44px; padding: 11px 18px; }
  .htp-steps li { font-size: 12.5px; }
  .htp-inner { padding: 15px 14px 2px; }
  .tc-apply { font-size: 10px; margin-top: 14px; }
}

/* ================================================================== */
/* REGISTER / CONFIRM-ENTRY PAGE — brought in line with the lander.    */
/* Real vault image (not the old badge), Lemon-caps headline, brand     */
/* form styling. Compact so badge+headline+7 fields+accept+CTA fit.     */
/* ================================================================== */
.vault-register { justify-content: flex-start; padding-top: clamp(28px, 6vh, 64px); }
.reg-img {
  margin: 0 auto clamp(8px, 2vh, 18px);
}
.reg-img .vault-img {
  height: clamp(150px, 26vh, 260px);
  filter: drop-shadow(0 24px 56px rgba(0, 0, 0, 0.55));
}
/* headline already Lemon+caps via .vault-root:has(.entry); tighten rhythm */
.vault-register .headline { margin-bottom: clamp(14px, 2.6vh, 22px); }
/* entry heading -> brand voice (Lemon caps, small) instead of serif */
.vault-register .entry h2 {
  font-family: var(--lemon);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(17px, 4vw, 20px);
  color: var(--paper);
}
.vault-register .form-note { color: var(--paper-dim); }

@media (max-width: 560px) {
  .reg-img .vault-img { height: clamp(120px, 20vh, 170px); }
  .vault-register { padding-top: calc(clamp(12px,3vh,24px) + var(--safe-t)); }
}
@media (max-width: 560px) and (max-height: 720px) {
  .reg-img .vault-img { height: clamp(92px, 15vh, 130px); }
}