/* ============================================================
   memetic.cards (fase de prerregistro): lo comun a /pre-registration y /legal.
   Tokens de oro COPIADOS de styles.css del juego (--gold-face, --gold-relief, --gold-edge) para
   que las piezas doradas (chapa, boton, botones fantasma) sean las del juego. Sin guiones largos
   en el texto visible.
   ============================================================ */
:root{
  --bg:#08101f; --text:#e8edf6; --muted:#9fb0c8;
  --gold:#f5c14a; --gold-bright:#fde68a; --gold-edge:#b8821e;
  --gold-face:linear-gradient(180deg, #ffe8a3 0%, var(--gold-bright) 48%, var(--gold) 100%);
  --gold-relief:0 3px 5px rgba(0,0,0,.35), inset 0 2px 1px rgba(255,255,255,.65), inset 0 -3px 5px rgba(150,96,16,.5);
  --gold-relief-hover:0 6px 13px rgba(0,0,0,.4), 0 0 14px rgba(245,193,74,.5), inset 0 2px 1px rgba(255,255,255,.85), inset 0 -3px 5px rgba(150,96,16,.5);
  --gold-relief-press:0 1px 2px rgba(0,0,0,.3), inset 0 3px 6px rgba(120,74,8,.6), inset 0 -1px 0 rgba(255,255,255,.3);
  --surface:rgba(8,16,31,.62); --border-soft:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
  --err:#ff6b6b; --ok:#57e39b; --discord:#5865f2;
  --font-display:'Bowlby One', 'Lilita One', system-ui, sans-serif;
  --font-title:'Lilita One', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*{ box-sizing:border-box; }
html, body{ margin:0; min-height:100%; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:700; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--gold); color:#2a1c00; }
[hidden]{ display:none !important; }

/* ---------- FONDO ---------- */
.bg{ position:fixed; inset:0; z-index:-2; background:url('assets/bg.webp') center 40% / cover no-repeat;
  filter:saturate(.95) brightness(.5); transform:scale(1.06); }
.bg::after{ content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 70% 60% at 70% 45%, rgba(255,200,61,.14), transparent 60%),
  linear-gradient(180deg, rgba(8,16,31,.35) 0%, rgba(8,16,31,.2) 45%, var(--bg) 100%); }
.grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }

/* ---------- CABECERA ---------- */
.top{ display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:18px clamp(16px, 3vw, 40px); }
.top .back{ margin-right:auto; }
.top .back img{ height:40px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.socials{ display:flex; gap:10px; }
.soc{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border-strong);
  background:rgba(255,255,255,.05); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .15s, transform .15s var(--ease-out); }
.soc:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.soc img{ width:20px; height:20px; }

/* ---------- PIEZAS DORADAS DEL JUEGO ---------- */
/* La chapa (como .ui-chip.on del juego, en Bowlby). */
.tag-gold{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:400; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; line-height:1; color:#2a1c00; padding:9px 15px 8px; border-radius:999px;
  border:1px solid var(--gold-edge); background:var(--gold-face); box-shadow:var(--gold-relief); }
.tag-gold .dot{ width:9px; height:9px; border-radius:50%; background:#1fbf6a; box-shadow:0 0 0 2px rgba(42,28,0,.35), 0 0 0 0 rgba(31,191,106,.6); animation:ping 1.8s infinite; }
@keyframes ping{ 70%{ box-shadow:0 0 0 2px rgba(42,28,0,.35), 0 0 0 9px rgba(31,191,106,0); } 100%{ box-shadow:0 0 0 2px rgba(42,28,0,.35), 0 0 0 0 rgba(31,191,106,0); } }

/* El boton dorado (.ui-btn.ui-btn-gold del juego). */
.btn-gold{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:60px; padding:0 30px; border-radius:14px; cursor:pointer;
  font-family:var(--font-display); font-weight:400; font-size:18px; letter-spacing:.04em; line-height:1; text-decoration:none; white-space:nowrap;
  color:#2a1c00; border:1px solid var(--gold-edge); background:var(--gold-face); box-shadow:var(--gold-relief);
  transition:transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .12s var(--ease-out); }
.btn-gold:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.05); box-shadow:var(--gold-relief-hover); }
.btn-gold:active:not(:disabled){ transform:translateY(1px); filter:brightness(.96); box-shadow:var(--gold-relief-press); }
.btn-gold:disabled{ opacity:.6; cursor:wait; }
.btn-gold:focus-visible, .btn-ghost:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* El fantasma dorado (.ui-btn-ghost del juego). */
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 14px; border-radius:11px; cursor:pointer;
  font-family:var(--font-display); font-weight:400; font-size:12px; letter-spacing:.06em; line-height:1; text-decoration:none; white-space:nowrap;
  color:var(--gold-bright); border:1px solid rgba(245,193,74,.45); background:linear-gradient(180deg, rgba(245,193,74,.12), rgba(245,193,74,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.3); transition:transform .12s var(--ease-out), background .15s, border-color .15s; }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--gold-bright); background:linear-gradient(180deg, rgba(245,193,74,.22), rgba(245,193,74,.1)); }
.btn-ghost img{ width:15px; height:15px; }
.btn-ghost.is-done{ color:var(--ok); border-color:rgba(87,227,155,.45); background:rgba(87,227,155,.08); }
.btn-ghost.is-done::before{ content:'✓'; font-family:var(--font-body); font-weight:900; }

/* ---------- PIE ---------- */
footer{ padding:22px clamp(16px, 3vw, 40px) 28px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  font-size:12px; color:#6f7f98; border-top:1px solid rgba(255,255,255,.06); }
footer p{ margin:0; max-width:760px; }
footer a{ color:#9fb0c8; text-decoration:none; } footer a:hover{ color:var(--gold-bright); }

/* entrada escalonada */
.rv{ animation:rise .7s var(--ease-out) both; animation-delay:var(--d, 0ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }
@media (prefers-reduced-motion:reduce){ .rv, .tag-gold .dot{ animation:none; } }