:root {
  --bg: #05070f;
  --panel: #0e1424;
  --panel-2: #141c33;
  --line: #233152;
  --text: #e8eefc;
  --accent: #5b8cff;
  --accent-2: #ffd35b;
  /* Subido para cumplir contraste WCAG AA (4.5:1) sobre los paneles oscuros. */
  --muted: #aab8d8;
  --moon: #d9dde6;
  --earth: #4ea1ff;
  --ok: #46d39a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: radial-gradient(1200px 600px at 70% -10%, #11203f 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  min-height: 100vh;
}

/* Foco visible global y accesible (WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Texto solo para lectores de pantalla. */
.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;
}

/* Respeta a quienes prefieren menos movimiento (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 24, 0.6);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo { font-size: 34px; filter: drop-shadow(0 0 14px rgba(255, 211, 91, .4)); }
.logo-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 0 14px rgba(255, 211, 91, .35));
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: .3px; }
.subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.badge {
  font-size: 12px;
  color: var(--accent-2);
  border: 1px solid rgba(255, 211, 91, .35);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(255, 211, 91, .07);
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  padding: 18px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
}
#sim {
  display: block;
  width: 100%;
  height: auto;
  background: #02030a;
}
/* Sacudida de impacto al aterrizar el balón. */
#sim.shake { animation: shake .18s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.stage-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(70, 211, 154, .5);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(70, 211, 154, .5); }
  70% { box-shadow: 0 0 0 6px rgba(70, 211, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 211, 154, 0); }
}

/* Overlay de celebración del disparo (clímax). */
.shot-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(91, 140, 255, .18), rgba(2, 3, 10, .55) 70%);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.shot-celebration.show { animation: celebrate 2.4s ease forwards; }
@keyframes celebrate {
  0% { opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.celebration-kicker {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.celebration-title {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  color: var(--accent-2);
  text-shadow: 0 0 24px rgba(255, 211, 91, .5);
  margin: 0;
}
.celebration-range {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.celebration-club { font-size: 14px; color: var(--muted); }
.celebration-record {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-2);
  border: 1px solid rgba(255, 211, 91, .4);
  border-radius: 999px;
  padding: 3px 12px;
}

/* Botón "Compartir mi hazaña" dentro del overlay de celebración.
   Coherente con .primary (dorado de marca = logro) y reactivable por puntero. */
.share-btn {
  margin-top: 14px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #2a1d00;
  background: linear-gradient(90deg, var(--accent-2), #ffe48a);
  border: 1px solid rgba(255, 211, 91, .6);
  border-radius: 10px;
  cursor: pointer;
  /* El overlay no captura punteros; el botón sí debe ser pulsable. */
  pointer-events: auto;
  box-shadow: 0 6px 18px -8px rgba(255, 211, 91, .8);
  transition: transform .12s ease, filter .12s ease;
}
.share-btn:hover { filter: brightness(1.06); }
.share-btn:active { transform: translateY(1px) scale(.99); }

/* ---------- Panel ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-group > label {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.control-group output { color: var(--text); font-weight: 600; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(91, 140, 255, .25);
  transition: box-shadow .15s ease;
}
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(91, 140, 255, .3); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: #fff; cursor: pointer;
}

/* Segmented control */
.segmented { display: flex; gap: 6px; }
.segmented button {
  flex: 1;
  padding: 9px 8px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s ease;
}
.segmented button.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(91, 140, 255, .15);
}

/* Toggles */
.toggles { gap: 10px; }
.checkbox {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.checkbox input { width: 20px; height: 20px; accent-color: var(--accent); }
.segmented button:hover { background: rgba(91, 140, 255, .08); color: var(--text); }
.checkbox:hover { color: var(--text); }

/* Actions — la acción principal pesa el doble que Reiniciar. */
.actions { display: flex; gap: 10px; }
.actions button {
  padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.actions button:active { transform: translateY(1px) scale(.99); }
.actions button:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
#kick { flex: 2; padding: 14px; font-size: 15px; }
#reset { flex: 1; }
.primary {
  background: linear-gradient(90deg, var(--accent), #7aa2ff);
  color: #03102e;
  box-shadow: 0 6px 18px -8px rgba(91, 140, 255, .8);
}
.primary:hover:not(:disabled) { filter: brightness(1.08); }
.ghost-btn { background: transparent; border-color: var(--line); color: var(--muted); }
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }

/* Metrics */
.metrics {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.metrics h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 4px; }
.metric { display: flex; justify-content: space-between; font-size: 13.5px; }
.metric span { color: var(--muted); }
/* Dorado reservado para logros/marca: las métricas usan color de texto normal. */
.metric strong { color: var(--text); font-variant-numeric: tabular-nums; font-size: 15px; }
.metric strong.flash { animation: flash-metric .6s ease; }
@keyframes flash-metric {
  0% { color: var(--accent-2); text-shadow: 0 0 16px rgba(255, 211, 91, .7); }
  100% { color: var(--text); text-shadow: none; }
}

.hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.hint em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---------- Campo de texto (Club) ---------- */
.text-input {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  transition: border-color .15s ease;
}
.text-input::placeholder { color: var(--muted); }
.text-input:focus { border-color: var(--accent); }

/* ---------- Indicador de latencia (Modo Control de Supervisión) ---------- */
.latency {
  border: 1px solid rgba(255, 211, 91, .35);
  background: rgba(255, 211, 91, .07);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.latency-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--muted);
}
.latency-head strong {
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.latency-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.latency-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.latency-note { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* Botón deshabilitado durante un envío en curso. */
.actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

/* ---------- Top 5 · Clasificatorias ---------- */
.leaderboard {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaderboard h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 4px;
}
.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: pos;
}
.leaderboard-list li {
  counter-increment: pos;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--panel-2);
}
.leaderboard-list li::before {
  content: counter(pos);
  color: var(--muted);
  font-weight: 700;
  min-width: 16px;
}
/* El líder (#1) es el único con tratamiento dorado: "dorado = logro". */
.leaderboard-list li:first-child {
  background: linear-gradient(90deg, rgba(255, 211, 91, .12), rgba(255, 255, 255, .03));
}
.leaderboard-list li:first-child::before { color: var(--accent-2); }
.leaderboard-list .lb-club {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-list .lb-range {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.leaderboard-list li:first-child .lb-range { color: var(--accent-2); }
.leaderboard-list .lb-world { color: var(--muted); font-size: 11px; }

/* Estado vacío: aún no hay disparos registrados. */
.leaderboard-empty {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  padding: 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .02);
}

/* Estado de error discreto: la API no respondió. */
.leaderboard-error {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  padding: 8px 10px;
  text-align: center;
}

/* Skeleton de carga del leaderboard (placeholder animado). */
.lb-skeleton {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lb-skeleton li {
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--panel-2) 25%,
    rgba(91, 140, 255, .12) 37%,
    var(--panel-2) 63%
  );
  background-size: 400% 100%;
  animation: lb-shimmer 1.4s ease infinite;
}
@keyframes lb-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ---------- Waitlist (captación de leads) ---------- */
.waitlist {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.waitlist h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-2);
  margin: 0 0 2px;
}
.waitlist-lead {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.waitlist-lead em { color: var(--text); font-style: normal; font-weight: 600; }

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 211, 91, .35);
  border-radius: 12px;
  background: rgba(255, 211, 91, .06);
}
/* El botón del formulario reutiliza .btn.primary; aquí solo el layout. */
.waitlist-form .btn {
  padding: 11px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.waitlist-form .btn:active { transform: translateY(1px) scale(.99); }
.waitlist-form .btn:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
/* .primary ya define el degradado azul de marca; aquí refuerza el hover. */
.waitlist-form .btn.primary:hover:not(:disabled) { filter: brightness(1.08); }

/* Mensaje de resultado (éxito / error) tras el envío. */
.waitlist-msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
}
.waitlist-msg.is-ok {
  color: var(--ok);
  border: 1px solid rgba(70, 211, 154, .4);
  background: rgba(70, 211, 154, .08);
}
.waitlist-msg.is-error {
  color: var(--accent-2);
  border: 1px solid rgba(255, 211, 91, .4);
  background: rgba(255, 211, 91, .08);
}

/* ---------- Bottom bar ---------- */
.bottombar {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}