/* ── Refer-a-Friend Rewards Hub — neon arcade high-score screen ─────
   Indigo CRT with scanlines, pixel headline with magenta/cyan echo,
   INSERT COIN prompt, holographic player pass with QR, arcade-gold
   high score table, cabinet start button, drifting pixel stars. */

:root {
  --crt: #0d0b26;
  --crt-deep: #070617;
  --magenta: #ff3df0;
  --cyan: #2ee6ff;
  --gold: #ffcf3d;
  --white: #f2f0ff;
  --dim: #8d89b8;
  --err: #ff6b5e;
  --pixel: 'Press Start 2P', monospace;
  --sans: 'Rubik', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.hidden { display: none !important; }

body {
  font-family: var(--sans);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% 20%, #191542, var(--crt) 55%, var(--crt-deep));
  background-attachment: fixed;
  min-height: 100vh;
}

/* CRT scanlines + curve vignette */
.crt {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.crt::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 3;
}

.crt::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.55));
  pointer-events: none;
  z-index: 3;
}

/* ── Starfield ────────────────────────────────────────────────────── */
.starfield { position: absolute; inset: 0; pointer-events: none; }

.starfield span {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: drift 9s linear infinite;
  opacity: 0.7;
}

.starfield span:nth-child(1) { left: 8%; top: 15%; animation-delay: 0s; }
.starfield span:nth-child(2) { left: 85%; top: 25%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); animation-delay: -2s; }
.starfield span:nth-child(3) { left: 20%; top: 65%; animation-delay: -4s; }
.starfield span:nth-child(4) { left: 75%; top: 75%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation-delay: -6s; }
.starfield span:nth-child(5) { left: 50%; top: 40%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); animation-delay: -3s; }
.starfield span:nth-child(6) { left: 35%; top: 88%; animation-delay: -7s; }

@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-18px); opacity: 0.25; }
}

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

main { flex: 1 0 auto; padding-bottom: 60px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 2; text-align: center; padding: 54px 24px 8px; }

.kicker {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}

.pixel-title {
  font-family: var(--pixel);
  font-size: clamp(1.7rem, 8vw, 3rem);
  line-height: 1.35;
  color: var(--magenta);
  text-shadow:
    3px 3px 0 var(--cyan),
    0 0 24px rgba(255, 61, 240, 0.55);
}

.sub { color: var(--dim); font-weight: 500; max-width: 430px; margin: 20px auto 0; }
.sub strong { color: var(--gold); }

/* ── Insert coin ──────────────────────────────────────────────────── */
.insert-coin {
  font-family: var(--pixel);
  font-size: 0.62rem;
  color: var(--gold);
  text-align: center;
  margin: 28px 0 14px;
  animation: blink 1.2s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0.15; } }

/* ── Cabinet panel ────────────────────────────────────────────────── */
.cab-panel {
  background: rgba(13, 11, 38, 0.85);
  border: 2px solid var(--magenta);
  border-radius: 14px;
  padding: 26px 26px 24px;
  box-shadow: 0 0 30px rgba(255, 61, 240, 0.25), inset 0 0 22px rgba(255, 61, 240, 0.08);
}

.field { margin-bottom: 16px; }

label {
  display: block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 7px;
}

input[type="text"], input[type="email"] {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--white);
  background: rgba(7, 6, 23, 0.9);
  border: 2px solid #332e63;
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(46, 230, 255, 0.3); }
input.error { border-color: var(--err); }
input::placeholder { color: #565284; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--pixel);
  font-size: 0.72rem;
  color: var(--crt-deep);
  background: linear-gradient(180deg, #ffe27a, var(--gold));
  border: none;
  border-radius: 10px;
  padding: 17px 30px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 5px 0 #b8901f, 0 0 22px rgba(255, 207, 61, 0.35);
}

.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 #b8901f, 0 0 30px rgba(255, 207, 61, 0.5); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.btn-block { width: 100%; }
.btn-small { padding: 12px 18px; font-size: 0.56rem; width: 100%; margin-top: 8px; }

.form-error { color: var(--err); font-weight: 700; text-align: center; margin-top: 14px; font-size: 0.9rem; }

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2.5px solid rgba(13, 11, 38, 0.3);
  border-top-color: var(--crt-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Player pass ──────────────────────────────────────────────────── */
#pass-section { margin-top: 28px; }

.player-pass {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 61, 240, 0.14), rgba(46, 230, 255, 0.14)), rgba(13, 11, 38, 0.92);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 24px 26px 26px;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(255, 61, 240, 0.6), 0 0 34px rgba(46, 230, 255, 0.25);
  animation: passIn 0.5s ease;
}

@keyframes passIn {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pp-label {
  font-family: var(--pixel);
  font-size: 0.56rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
}

.pp-name {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.pp-body { display: flex; gap: 22px; margin-top: 18px; align-items: flex-start; }

.pp-qr { text-align: center; flex: 0 0 auto; }

.pp-qr img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}

.pp-qr-cap { font-size: 0.68rem; color: var(--dim); margin-top: 8px; max-width: 120px; }

.pp-link { flex: 1; min-width: 0; }

.pp-link-label {
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 7px;
}

#share-url {
  font-size: 0.78rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-buttons { display: flex; gap: 8px; margin-top: 10px; }

.share-btn {
  flex: 1;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--white);
  background: transparent;
  border: 2px solid #332e63;
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.share-btn:hover { border-color: var(--magenta); color: var(--magenta); }

/* ── High scores ──────────────────────────────────────────────────── */
.scores { margin-top: 38px; text-align: center; }

.scores-title {
  font-family: var(--pixel);
  font-size: 1.1rem;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 207, 61, 0.5);
}

.scores-sub { color: var(--dim); font-size: 0.82rem; margin-top: 8px; }

.score-table {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-family: var(--pixel);
  font-size: 0.62rem;
}

.score-table th {
  color: var(--cyan);
  padding: 10px 8px;
  border-bottom: 2px solid #332e63;
  text-align: left;
}

.score-table th:last-child, .score-table td:last-child { text-align: right; }

.score-table td {
  color: var(--white);
  padding: 12px 8px;
  border-bottom: 1px solid rgba(51, 46, 99, 0.5);
}

.score-table tr.rank-1 td { color: var(--gold); }
.score-table tr.rank-2 td { color: #d8d6ec; }
.score-table tr.rank-3 td { color: #d99a5b; }

.score-table tr.you td {
  color: var(--magenta);
  animation: youPulse 1.4s ease-in-out infinite;
}

@keyframes youPulse { 50% { opacity: 0.45; } }

.scores-note { color: var(--dim); font-size: 0.7rem; margin-top: 14px; }

/* ── Footer ───────────────────────────────────────────────────────── */
.foot {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px 20px;
  color: var(--dim);
  font-size: 0.78rem;
}

#wbx-powered-by-slot { margin-top: 12px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pp-body { flex-direction: column; align-items: center; }
  .pp-link { width: 100%; text-align: center; }
  .share-buttons { flex-direction: column; }
}