/* ── Futura, self-hosted ─────────────────────────────────────────── */
@font-face { font-family: 'Futura'; src: url('fonts/Futura-Book.ttf') format('truetype');      font-weight: 400; font-display: swap; }
@font-face { font-family: 'Futura'; src: url('fonts/Futura-Demi.ttf') format('truetype');      font-weight: 600; font-display: swap; }
@font-face { font-family: 'Futura'; src: url('fonts/Futura-Bold.ttf') format('truetype');      font-weight: 700; font-display: swap; }
@font-face { font-family: 'Futura'; src: url('fonts/Futura-ExtraBold.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --green-400: #4ade80;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --beige: #f1e2c4;
  --divider: rgba(59, 130, 246, 0.2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Wood frame 9-slice: slice size (% of source) and on-screen frame thickness */
  --panel-slice: 18%;
  --panel-border: 46px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100dvh;
  background: #000;
  color: #fff;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
strong { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Scene: background, character, fruits, logo ─────────────────── */
.bg {
  position: fixed; inset: 0;
  /* --bg-url is the game's background, set by games.js */
  background: var(--bg-url) left top / cover no-repeat;
}
.bg-shade {
  position: fixed; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent 50%, rgba(0,0,0,0.35));
}

/* Starfield from particles.js — over the background, under everything else */
.particles {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.particles.is-ready { opacity: 1; }

/* Character — bottom-left, behind the panel so it never covers the form. On
   wide screens there's room beside the panel, so it steps in front (see the
   1200px query). On mobile it's pushed further off the edge so it hugs the side. */
.chara {
  position: fixed; bottom: 0; left: 0; z-index: 5;
  width: clamp(345px, 52vw, 966px);
  transform: translate(-40%, 15%);
  pointer-events: none; user-select: none;
}

/* Fruits — bottom-right, behind the panel */
.fruits {
  position: fixed; bottom: 0; right: 0; z-index: 5;
  width: clamp(280px, 48vw, 480px);
  transform: translateY(25%);
  pointer-events: none; user-select: none;
}

.logo {
  position: fixed; top: 12px; left: 50%; z-index: 1;
  width: clamp(120px, 30vw, 200px);
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
  pointer-events: none;
}

/* ── Stage + panel ───────────────────────────────────────────────── */
.stage {
  position: relative; z-index: 10;
  width: 100%; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Top padding clears the logo (logo height is ~56% of its width) */
  padding: calc(clamp(120px, 30vw, 200px) * 0.5 + 10px) 8px 48px;
}

/* Slides up from below once the background has decoded (see script.js) */
.panel-wrap {
  position: relative;
  width: 100%; max-width: 36rem;
  transform: translateY(110vh);
  transition: transform 2s var(--ease-out);
}
.is-loaded .panel-wrap { transform: translateY(0); }

/* Wood frame as a CSS 9-slice — corners stay crisp, only edges + navy center stretch */
.panel {
  position: relative; z-index: 10;
  border-style: solid;
  border-width: var(--panel-border);
  border-image-source: url('/game-assets/SHORE/panel.webp');
  border-image-slice: var(--panel-slice) fill;
  border-image-repeat: stretch;
}

.starfish { position: absolute; z-index: 20; pointer-events: none; user-select: none; }
.starfish-1 { top: 4%;  right: -2%; width: 12%; }
.starfish-2 { top: 20%; right: 3%;  width: 7.2%; }

/* ── Views + staggered entrance ──────────────────────────────────── */
.view { display: flex; flex-direction: column; align-items: center; width: 100%; }
.view[hidden] { display: none; }

.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.view.is-in .reveal-item { opacity: 1; transform: none; }
.view.is-in .reveal-item:nth-child(1) { transition-delay: 0.05s; }
.view.is-in .reveal-item:nth-child(2) { transition-delay: 0.13s; }
.view.is-in .reveal-item:nth-child(3) { transition-delay: 0.21s; }
.view.is-in .reveal-item:nth-child(4) { transition-delay: 0.29s; }
.view.is-in .reveal-item:nth-child(n+5) { transition-delay: 0.37s; }
/* Sections shown later on the same page (the keys and what follows), via showLate() */
.late-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.late-item.is-shown { opacity: 1; transform: none; }
.late-item[hidden] { display: none; }

.section {
  width: 100%;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
}
.section:last-child { border-bottom: 0; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: 12px 12px 16px; text-align: center; }

/* Plain beige — no gradient, no glow */
.title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--beige);
}

.lead {
  margin: 0;
  font-size: 16px; line-height: 1.375;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.lead strong { color: var(--blue-300); }

/* Game name → Steam page. Same treatment as "Contact us" so it reads as a link. */
.game-link {
  color: var(--amber-300);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.game-link:hover { color: var(--amber-200); }

/* Steam's store widget. Steam draws it at 190px tall. */
.steam-widget { margin-top: 16px; }
.steam-widget[hidden] { display: none; }
.steam-widget iframe {
  display: block;
  width: 100%; height: 190px;
  border: 0; border-radius: 4px;
}

.eyebrow {
  margin: 0 0 12px;
  text-align: center;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--blue-400);
}

.small-copy {
  margin: -4px 0 12px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
/* Under the keys: extra keys granted but not in stock yet */
.keys-pending {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  text-align: center;
  font-size: 14px; line-height: 1.45;
  color: rgba(255,255,255,0.75);
}
.keys-pending[hidden] { display: none; }

/* Heading and line above the revealed keys */
.keys-section .eyebrow { font-size: 15px; letter-spacing: 0.22em; }
.keys-intro { margin: -4px 0 18px; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.75); }
.keys-intro strong { color: var(--beige); }

/* ── Form ────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.form[hidden] { display: none; }

#invite-code { text-transform: uppercase; letter-spacing: 0.08em; }
#invite-code::placeholder { text-transform: none; letter-spacing: normal; }

/* Personal link opening: spinner while the keys unlock */
.claim-status {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px 20px 34px;
}
.claim-status[hidden] { display: none; }
.claim-status p {
  margin: 0;
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--beige);
}
.claim-spinner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--amber-300);
  animation: spin 0.9s linear infinite;
}

.input-wrap { position: relative; }
.input-wrap input {
  width: 100%;
  padding: 16px 44px 16px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font: inherit; font-size: 16px;
  outline: none;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input-wrap input::placeholder { color: rgba(255,255,255,0.5); }
.input-wrap input:focus {
  background: rgba(255,255,255,0.15);
  border-color: rgba(251,191,36,0.7);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.3);
}
.input-wrap.has-error input { border-color: rgba(248,113,113,0.7); }
.input-wrap.has-error input:focus { border-color: var(--red-400); box-shadow: 0 0 0 3px rgba(248,113,113,0.25); }

.input-ok {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--green-400); font-weight: 700;
  opacity: 0; transition: opacity 0.2s;
}
.input-wrap.is-valid .input-ok { opacity: 1; }

.form-error {
  margin: -4px 0 0; padding: 0 4px;
  font-size: 14px; color: var(--red-300);
}

/* Gold CTA — same treatment as the main site's "Wishlist on Steam" button */
.btn-gold {
  position: relative; overflow: hidden;
  width: 100%; min-height: 54px;
  padding: 16px;
  border: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(ellipse at 50% -10%, var(--amber-200) 0%, var(--amber-400) 35%, var(--amber-500) 100%);
  box-shadow: 0 4px 24px rgba(245,158,11,0.55), 0 0 28px rgba(251,191,36,0.3);
  color: #000;
  font: inherit; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.025em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, opacity 0.15s;
}
.btn-gold:hover { filter: brightness(1.1); }
.btn-gold:active { transform: scale(0.98); }
.btn-gold:disabled { opacity: 0.6; pointer-events: none; }
.btn-gold > * { position: relative; z-index: 1; }
.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
.btn-arrow { width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; }
.btn-label { white-space: nowrap; }
.btn-shine {
  position: absolute !important; inset: 0; z-index: 0 !important;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
}
.btn-gold:hover .btn-shine { transform: translateX(100%); }

.btn-gold.is-loading .btn-icon,
.wave-btn.is-loading .btn-icon { animation: spin 1s linear infinite; }

/* ── Wave button — the main page's FishyButton ───────────────────
   All colours are variables so a game can re-skin it (see the CRACK
   section). Defaults are gold/beige. The rgb triples feed rgba(). */
.wave-btn {
  --wc1: #d9a441; --wc2: #e6b95a; --wc3: #f0cf85; --wc4: #f8e5b5; /* corner waves, back → front */
  --wc-base: #c88f2a;            /* button fill */
  --wc-shine: #e3ae45;           /* shimmer highlight drifting across the fill */
  --wc-text: #2b1a02;
  --wc-glow: 245, 158, 11;       /* outer glow */
  --wc-glow-soft: 253, 230, 138; /* wide hover glow */
  --wc-shade: 90, 55, 0;         /* inner shadow and bottom shading */
  --wc-edge: 120, 70, 0;         /* outline around the waves */
  --wc-light: 255, 236, 180;     /* hover light around the waves */
  position: relative; overflow: hidden;
  width: 100%; min-height: 54px;
  padding: 16px;
  border: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  /* Slow shimmer drifting across the base */
  background: linear-gradient(110deg, var(--wc-base) 0%, var(--wc-shine) 25%, var(--wc-base) 50%, var(--wc-shine) 75%, var(--wc-base) 100%);
  background-size: 200% 100%;
  box-shadow: 0 4px 24px rgba(var(--wc-glow), 0.45), 0 0 8px rgba(var(--wc-shade), 0.25) inset;
  color: var(--wc-text);
  font: inherit; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
  animation: wave-shimmer 6s linear infinite, wave-glow 3s ease-in-out infinite alternate;
  transition: filter 0.3s ease, transform 0.15s, opacity 0.15s;
}
.wave-btn::before {
  content: ''; position: absolute; z-index: 6; inset: 0;
  background: linear-gradient(rgba(var(--wc-shade), 0) 60%, rgba(var(--wc-shade), 0.25));
  pointer-events: none;
}
.wave-btn:active { transform: scale(0.98); }
.wave-btn:disabled { opacity: 0.6; pointer-events: none; }
/* Hover only fades the button a touch brighter. The shimmer and the pulsing glow
   keep running untouched: swapping animations on hover made the light jump on
   and off instead of changing smoothly. */
.wave-btn:hover { filter: brightness(1.1); }

.wave-btn-content {
  position: relative; z-index: 7;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: letter-spacing 1s ease;
}
.wave-btn:hover .wave-btn-content { letter-spacing: 0.1em; }

.wave-btn .wave {
  position: absolute; inset: 0;
  filter: drop-shadow(0 0 3px rgba(var(--wc-edge), 0.55));
  transition: filter 0.8s ease; /* fades both ways on hover */
}
.wave-btn .wave:nth-child(1) { z-index: 1; }
.wave-btn .wave:nth-child(2) { z-index: 2; }
.wave-btn .wave:nth-child(3) { z-index: 3; }
.wave-btn .wave:nth-child(4) { z-index: 5; }
.wave-btn .wave::before,
.wave-btn .wave::after { content: ''; position: absolute; transition: all ease 4.4s; }
.wave-btn .wave::before { transform: rotate(180deg); }

.wave-btn .wave:nth-child(1)::before,
.wave-btn .wave:nth-child(1)::after {
  width: 120px; height: 65px; background: var(--wc1);
  clip-path: path('M140.44,0c-12.81,1.3-12.59,12.11-35.96,10.7-14.56-.88-16.21,19.13-40.12,10.57-17.84-6.39-37.9-1.86-49.13,10.03C2.01,45.31,3.29,51.05,0,65.19H140.44V0Z');
  animation: wave1 linear 3s infinite alternate;
}
.wave-btn .wave:nth-child(2)::before,
.wave-btn .wave:nth-child(2)::after {
  width: 139px; height: 61px; background: var(--wc2);
  clip-path: path('M137.15,.03c-16.75-.44-27.29,4.77-33.69,10.72-6.4,5.96-24.52,19.73-43.08,9.17-13.1-7.46-26.74-3.14-38.25,4.78C6.61,35.38,3.74,44.74,0,59.63H137.15V.03Z');
  animation: wave2 linear 3s infinite alternate;
}
.wave-btn .wave:nth-child(3)::before,
.wave-btn .wave:nth-child(3)::after {
  width: 134px; height: 56px; background: var(--wc3);
  clip-path: path('M132.61,0c-9.18,3.92-11.29,5.2-19.97,4.19-9.33-1.09-10.97,12.29-25.37,15.53-9.69,2.18-17.12-7.15-28.89-5.37-15.68,2.38-16.35,7.79-29.01,9.38C4.37,26.86-.79,50.3,.09,54.49H132.61V0Z');
  animation: wave3 linear 3s infinite alternate;
}
.wave-btn .wave:nth-child(4)::before,
.wave-btn .wave:nth-child(4)::after {
  width: 129px; height: 47px; background: var(--wc4);
  clip-path: path('M128.7,.2c-16.75-.44-23.99-.69-30.39,5.26-6.4,5.96-8.68,12.19-26.99,7.33-9.6-2.54-24.02-4.44-34.16,2.33-10.83,7.23-14.87,9.49-22.83,10.33C1.59,26.81-.72,39.73,.17,43.92H128.7V.2Z');
  animation: wave4 linear 3s infinite alternate;
}
.wave-btn .wave:nth-child(1)::before { top: -16px; left: -16px; }
.wave-btn .wave:nth-child(1)::after  { bottom: -16px; right: -16px; }
.wave-btn .wave:nth-child(n+2)::before { top: -20px; left: -20px; }
.wave-btn .wave:nth-child(n+2)::after  { bottom: -20px; right: -20px; }

/* Hover: the waves swell in toward the corners */
.wave-btn:hover .wave { filter: drop-shadow(0 0 8px rgba(var(--wc-light), 0.55)); }
.wave-btn:hover .wave:nth-child(-n+2)::before { top: -2px; left: -2px; }
.wave-btn:hover .wave:nth-child(-n+2)::after  { bottom: -2px; right: -2px; }
.wave-btn:hover .wave:nth-child(3)::before { top: -3px; left: -3px; }
.wave-btn:hover .wave:nth-child(3)::after  { bottom: -3px; right: -3px; }
.wave-btn:hover .wave:nth-child(4)::before { top: -4px; left: -4px; }
.wave-btn:hover .wave:nth-child(4)::after  { bottom: -4px; right: -4px; }


.help-note {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.help-note a { color: var(--amber-300); font-weight: 600; text-underline-offset: 3px; }
.help-note a:hover { color: var(--amber-200); }

/* ── Key reveal ──────────────────────────────────────────────────── */
/* The whole box is the copy button (copyKey in script.js) */
.key-box {
  position: relative; overflow: hidden;
  padding: 14px 40px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  border-radius: 14px;
  container-type: inline-size;
  border: 2px dashed rgba(251,191,36,0.55);
  background: rgba(0,0,0,0.45);
  box-shadow: 0 0 32px rgba(251,191,36,0.18), inset 0 0 24px rgba(251,191,36,0.06);
  text-align: center;
}
.key-text {
  display: block;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  /* Fit the key to the box whatever its length: ~0.72em per character.
     --key-len is set from script.js; 20px is the fallback for old browsers. */
  font-size: 18px;
  font-size: min(22px, calc(100cqi / (var(--key-len, 17) * 0.72)));
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--amber-300);
  text-shadow: 0 0 16px rgba(251,191,36,0.5);
  white-space: nowrap;
  user-select: all;
  transition: opacity 0.2s, filter 0.2s;
}
.key-text .scrambling { color: rgba(255,255,255,0.45); text-shadow: none; }

/* One sweep of light across the box once the key has settled */
.key-shine {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.key-box.is-settled .key-shine { animation: sweep 1.1s var(--ease-out) forwards; }
.key-box.is-settled { animation: glow 1.4s ease-out; }
.key-box:hover { border-color: rgba(251,191,36,0.85); background: rgba(0,0,0,0.55); }
.key-box:focus-visible { outline: 2px solid var(--amber-300); outline-offset: 3px; }

/* Copy hint, right edge of the box */
.key-copy-icon {
  position: absolute; top: 50%; right: 14px;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  color: rgba(251,191,36,0.55);
  transition: color 0.2s, opacity 0.2s;
}
.key-box:hover .key-copy-icon { color: var(--amber-300); }

/* Copied: the key blurs out behind a "Copied!" badge that pops in, then everything settles back */
.key-copied {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--green-400);
  opacity: 0;
  pointer-events: none;
}
.key-copied svg { width: 20px; height: 20px; }
.key-box.is-copied { animation: copy-flash 1.6s ease-out; border-style: solid; border-color: rgba(74,222,128,0.8); }
.key-box.is-copied .key-copied { animation: copy-pop 1.6s var(--ease-out) forwards; }
.key-box.is-copied .key-text { animation: copy-dim 1.6s ease-out; }
.key-box.is-copied .key-copy-icon { opacity: 0; }
.key-box.is-copied .key-copied svg { animation: copy-check 0.5s 0.1s var(--ease-out) backwards; }
@keyframes copy-flash {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(74,222,128,0); }
  12%  { transform: scale(0.97); }
  30%  { transform: scale(1); box-shadow: 0 0 40px rgba(74,222,128,0.45), inset 0 0 24px rgba(74,222,128,0.18); }
  100% { box-shadow: 0 0 32px rgba(251,191,36,0.18), inset 0 0 24px rgba(251,191,36,0.06); }
}
@keyframes copy-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  18%  { opacity: 1; transform: scale(1.08); }
  30%  { transform: scale(1); }
  78%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes copy-dim {
  0%, 100% { opacity: 1; filter: none; }
  15%, 75% { opacity: 0.15; filter: blur(3px); }
}
@keyframes copy-check {
  from { transform: scale(0) rotate(-45deg); }
}

/* One Activate button under all the keys */
.activate-btn { margin-top: 20px; }

/* Several keys (co-op codes): stacked rows, each labelled */
.key-list { display: flex; flex-direction: column; gap: 22px; }
.key-label {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--beige);
}

/* ── Suggest another creator ─────────────────────────────────────── */
/* Game domain 404: button back to the game's page */
.not-found[hidden] { display: none; }
.not-found-btn { width: 100%; text-decoration: none; }

/* "Invite a creator friend" button that opens the form */
.suggest-open { width: 100%; }
.suggest-open[hidden] { display: none; }
.suggest-panel[hidden] { display: none; }

.suggest-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 17px; font-weight: 700; line-height: 1.3;
  color: var(--beige);
}
.suggest-copy { margin: 0 0 14px; line-height: 1.45; }
.suggest-form { display: flex; flex-direction: column; gap: 10px; }
.suggest-form[hidden] { display: none; }
.suggest-form .btn-ghost { width: 100%; }
.suggest-done {
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: var(--green-400);
}
.link-btn {
  display: block;
  margin: 8px auto 0;
  padding: 0;
  border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--amber-300);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.btn-gold-sm { min-height: 50px; }

.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font: inherit; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }
.btn-ghost svg { width: 18px; height: 18px; flex-shrink: 0; }

.key-meta {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  word-break: break-all;
}
.key-meta span { color: rgba(255,255,255,0.7); }

/* ── Legal footer — fixed to the viewport bottom, outside the panel ─ */
.legal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  margin: 0; padding: 12px 16px 8px;
  text-align: center;
  font-size: 10px; letter-spacing: 0.025em;
  color: rgba(255,255,255,0.3);
}
.legal a { color: inherit; text-underline-offset: 2px; }
.legal a:hover { color: rgba(255,255,255,0.55); }

/* ── Keyframes ───────────────────────────────────────────────────── */
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes sweep { to { transform: translateX(100%); } }
@keyframes glow {
  0%   { box-shadow: 0 0 0 rgba(251,191,36,0); }
  30%  { box-shadow: 0 0 56px rgba(251,191,36,0.55), inset 0 0 24px rgba(251,191,36,0.2); }
  100% { box-shadow: 0 0 32px rgba(251,191,36,0.18), inset 0 0 24px rgba(251,191,36,0.06); }
}

/* Wave button — wave shapes are the main page's fishy-wave paths */
@keyframes wave-shimmer { to { background-position: -200% 0; } }
/* Both ends list the same shadows in the same order (outer, outer, inset), so
   the browser can blend them. Mismatched lists snap halfway instead of fading. */
@keyframes wave-glow {
  from { box-shadow: 0 4px 18px rgba(var(--wc-glow), 0.35), 0 0 0 rgba(var(--wc-glow-soft), 0), 0 0 8px rgba(var(--wc-shade), 0.25) inset; }
  to   { box-shadow: 0 4px 30px rgba(var(--wc-glow), 0.65), 0 0 36px rgba(var(--wc-glow-soft), 0.35), 0 0 8px rgba(var(--wc-shade), 0.25) inset; }
}
@keyframes wave1 {
  0%   { clip-path: path('M140.44,0c-12.81,1.3-12.59,12.11-35.96,10.7-14.56-.88-16.21,19.13-40.12,10.57-17.84-6.39-37.9-1.86-49.13,10.03C2.01,45.31,3.29,51.05,0,65.19H140.44V0Z'); }
  100% { clip-path: path('M140.44,0c-17.21,3.05-17.35,17.42-35.08,14.77-16.69-2.49-23.72-6.62-50.13,7.7-13.98,6.99-26.83-2.07-39.76,8.45C4.54,39.98,3.29,48.5,0,62.64H140.44V0Z'); }
}
@keyframes wave2 {
  0%   { clip-path: path('M137.15,.03c-16.75-.44-27.29,4.77-33.69,10.72-6.4,5.96-24.52,19.73-43.08,9.17-13.1-7.46-26.74-3.14-38.25,4.78C6.61,35.38,3.74,44.74,0,59.63H137.15V.03Z'); }
  100% { clip-path: path('M137.15,0c-17.21,10.16-17.24,10.78-37.72,9.6-14.61-.84-20.23,16.56-38.49,12.08-14.89-3.65-18.21,9.53-31.75,6.88C10.69,24.95,3.74,44.71,0,59.6H137.15V0Z'); }
}
@keyframes wave3 {
  0%   { clip-path: path('M132.61,0c-9.18,3.92-11.29,5.2-19.97,4.19-9.33-1.09-10.97,12.29-25.37,15.53-9.69,2.18-17.12-7.15-28.89-5.37-15.68,2.38-16.35,7.79-29.01,9.38C4.37,26.86-.79,50.3,.09,54.49H132.61V0Z'); }
  100% { clip-path: path('M132.53,0c-3.02,8.29-13.7,3.05-21.15,10.78-6.52,6.76-10.8,3.72-29.64,3.97-9.93,.13-15.11,7.85-26.94,9.14-10.81,1.18-15.58-4.27-28.13-1.99C8.04,25.29-.82,50.3,.06,54.49H132.53V0Z'); }
}
@keyframes wave4 {
  0%   { clip-path: path('M128.7,.2c-16.75-.44-23.99-.69-30.39,5.26-6.4,5.96-8.68,12.19-26.99,7.33-9.6-2.54-24.02-4.44-34.16,2.33-10.83,7.23-14.87,9.49-22.83,10.33C1.59,26.81-.72,39.73,.17,43.92H128.7V.2Z'); }
  100% { clip-path: path('M128.53,0c-13.22,12-19.04,5.96-27.62,4.3-12.9-2.5-14.51,2.69-29.7,10.84-8.75,4.7-15.33,2.81-28.21-.3-15.44-3.72-19.2,7.95-29.03,11.04C4.72,28.8,.76,37.83,0,43.72H128.53V0Z'); }
}

/* ── ≥640px (Tailwind "sm") ──────────────────────────────────────── */
@media (min-width: 640px) {
  .stage { padding: calc(clamp(120px, 30vw, 200px) * 0.5 + 16px) 16px 56px; }
  .logo  { top: 20px; }
  .chara { transform: translate(-5%, 15%); }

  .section { padding: 24px 20px; }
  .hero { padding: 24px 20px 20px; }
  .title { font-size: 40px; margin-bottom: 12px; }
  .lead { font-size: 18px; }
  .eyebrow { margin-bottom: 20px; }

  .btn-gold { font-size: 16px; letter-spacing: 0.1em; padding: 16px 24px; gap: 12px; }
  .btn-gold-sm { font-size: 14px; letter-spacing: 0.06em; }
  .wave-btn { font-size: 16px; letter-spacing: 0.1em; padding: 16px 24px; }
  .wave-btn-content { gap: 12px; }
  .wave-btn:hover .wave-btn-content { letter-spacing: 0.14em; }
  .form { padding-top: 20px; padding-bottom: 24px; }

  .key-box { padding: 16px 44px; }
  .keys-intro { font-size: 17px; }
}

/* Wide screens: enough room beside the panel for the character to sit in front */
@media (min-width: 1200px) {
  .chara {
    z-index: 30;
    width: clamp(345px, 46vw, 900px);
    transform: translate(-10%, 15%);
  }
}

/* ── CRACK ──────────────────────────────────────────────────────────
   Lab art (3840×2160): a dark glass panel instead of the raft frame, no
   fruits or starfish, and the scientist standing on the bottom-left — the
   art's straight bottom edge sits on the bottom of the page. */
[data-game="crack"] .bg { background-position: center; }
[data-game="crack"] .bg-shade {
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.1), rgba(0,0,0,0.55) 85%);
}
/* Source art is 417×399; up to ~1.35× before it starts to look soft.
   Behind the panel at every width, so it can't cover the form. */
[data-game="crack"] .chara {
  z-index: 5;
  left: 2vw;
  width: clamp(210px, 32vw, 560px);
  transform: none;
}

/* CRACK title: two long lines, each on one line from 640px; balanced wrap on phones. */
[data-game="crack"] .title { font-size: 25px; line-height: 1.1; }
[data-game="crack"] .title span { display: block; text-wrap: balance; }
[data-game="crack"] .title br { display: none; }
@media (min-width: 640px) {
  [data-game="crack"] .title { font-size: 31px; }
}

/* "Eggshell": buttons and links in the egg's cream and peach. */
[data-game="crack"] .wave-btn {
  --wc1: #d9b48c; --wc2: #e8c9a6; --wc3: #f4dfc6; --wc4: #fcf2e4;
  --wc-base: #e2c29d; --wc-shine: #f3dcc0; --wc-text: #3a2616;
  --wc-glow: 232, 190, 150; --wc-glow-soft: 250, 234, 216;
  --wc-shade: 90, 60, 35; --wc-edge: 120, 85, 55; --wc-light: 255, 245, 230;
}
[data-game="crack"] .btn-gold {
  background: radial-gradient(ellipse at 50% -10%, #fcf2e4 0%, #f3dcc0 35%, #e2c29d 100%);
  box-shadow: 0 4px 24px rgba(232,190,150,0.45), 0 0 28px rgba(250,234,216,0.25);
  color: #3a2616;
}
[data-game="crack"] .claim-spinner { border-top-color: #f2c29a; }
[data-game="crack"] .game-link,
[data-game="crack"] .help-note a,
[data-game="crack"] .link-btn { color: #f2c29a; }
[data-game="crack"] .game-link:hover,
[data-game="crack"] .help-note a:hover,
[data-game="crack"] .link-btn:hover { color: #fcf2e4; }
[data-game="crack"] .fruits,
[data-game="crack"] .starfish { display: none; }

[data-game="crack"] .panel {
  border: 1px solid rgba(255,255,255,0.14);
  border-image: none;
  border-radius: 20px;
  padding: 12px 8px;
  background: linear-gradient(180deg, rgba(16,24,32,0.88), rgba(8,12,18,0.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (prefers-reduced-motion: reduce) {
  .panel-wrap, .reveal-item, .late-item { transition: none; }
  .claim-spinner { animation-duration: 2.5s; }
  .wave-btn, .wave-btn .wave::before, .wave-btn .wave::after { animation: none; }
  .particles { transition: none; }
  .key-box.is-settled, .key-box.is-settled .key-shine { animation: none; }
  .key-box.is-copied, .key-box.is-copied .key-text, .key-box.is-copied .key-copied svg { animation: none; }
  .key-box.is-copied .key-text { opacity: 0.15; }
  .key-box.is-copied .key-copied { animation: none; opacity: 1; }
}