:root {
  --bg: #0b0b0d;
  --panel: #17171a;
  --text: #f2f2f2;
  --muted: #9a9a9a;
  --green: #3fb950;
  --yellow: #e8c33d;
  --orange: #e8823d;
  --red: #e8493d;
  --purple: #a855f7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100%;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
}

.ghost-btn {
  background: none;
  border: 1px solid #333;
  color: var(--text);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
}

.difficulty-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.diff-btn {
  padding: 10px 1px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: #1c1c1f;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -.2px;
  cursor: pointer;
  transition: all .15s ease;
  opacity: .55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diff-easy { color: var(--green); }
.diff-medium { color: var(--yellow); }
.diff-hard { color: var(--orange); }
.diff-expert { color: var(--red); }
.diff-impossible { color: var(--purple); }

.diff-btn.active { opacity: 1; }
.diff-easy.active { background: rgba(63,185,80,.15); border-color: var(--green); }
.diff-medium.active { background: rgba(232,195,61,.15); border-color: var(--yellow); }
.diff-hard.active { background: rgba(232,130,61,.15); border-color: var(--orange); }
.diff-expert.active { background: rgba(232,73,61,.15); border-color: var(--red); }
.diff-impossible.active { background: rgba(168,85,247,.15); border-color: var(--purple); }

.progress-bar-track {
  height: 10px;
  background: #333;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 2%;
  border-radius: 999px;
  background: var(--orange);
  transition: width .3s ease, background .3s ease;
}

.player-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
}

.play-btn {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: none;
  background: var(--orange);
  color: #10100f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(232,130,61,.35);
  transition: background .3s ease, box-shadow .3s ease, transform .1s ease;
}

.play-btn:active { transform: scale(.96); }
.play-btn.playing { animation: pulse 1s infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,130,61,.45); }
  70% { box-shadow: 0 0 0 18px rgba(232,130,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,130,61,0); }
}

.timer-label {
  font-weight: 800;
  font-size: 16px;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.feedback {
  min-height: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.feedback.correct { color: var(--green); }
.feedback.wrong { color: var(--red); }
.feedback.skip { color: var(--muted); }

.search-row {
  display: flex;
  gap: 10px;
}

.search-box-wrap {
  position: relative;
  flex: 1;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1.5px solid #2a2a2e;
  border-radius: 999px;
  padding: 12px 16px;
}

.search-icon { color: var(--muted); flex-shrink: 0; }

.search-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  width: 100%;
}

.search-box input::placeholder { color: var(--muted); }

.suggestions {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #201f1a;
  border: 1px solid #3a352a;
  border-radius: 14px;
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
}

.suggestions.hidden { display: none; }

.suggestions li {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.suggestions li:hover, .suggestions li.highlighted {
  background: rgba(255,255,255,.06);
}

.sugg-title { font-weight: 700; font-size: 14px; }
.sugg-artist { font-size: 12px; color: var(--muted); }

.guess-btn {
  padding: 0 24px;
  border-radius: 999px;
  border: none;
  background: var(--orange);
  color: #10100f;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}

.guess-btn:disabled { opacity: .4; cursor: default; }

.secondary-row {
  display: flex;
  gap: 10px;
}

.skip-btn, .giveup-btn {
  flex: 1;
  padding: 12px;
  border-radius: 999px;
  border: 1.5px solid #2a2a2e;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.giveup-btn { color: var(--muted); border-color: #262626; background: transparent; }

.reveal-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid #2a2a2e;
  border-radius: 16px;
  padding: 14px;
}

.reveal-card.hidden { display: none; }

.reveal-art {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #2a2a2e;
  flex-shrink: 0;
}

.reveal-info { flex: 1; min-width: 0; }
.reveal-title { font-weight: 800; font-size: 15px; }
.reveal-artist { font-size: 13px; color: var(--muted); }

/* On a win the card becomes a centred overlay — the moment worth filming,
   and it never gets pushed below the fold on a phone. */
.reveal-card.win {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 40px));
  flex-direction: column;
  text-align: center;
  gap: 12px;
  padding: 24px 18px;
  border-color: var(--green);
  background-color: #141815; /* opaque base — the gradient alone would let the page show through */
  background-image: linear-gradient(180deg, rgba(63,185,80,.18), rgba(20,24,21,0));
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
  z-index: 60;
  animation: popIn .45s cubic-bezier(.18,.9,.32,1.4);
}

/* Dims the board behind the win overlay. */
.win-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 55;
  animation: fadeIn .25s ease;
}
.win-backdrop.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reveal-card.win .reveal-art {
  width: 168px;
  height: 168px;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
}

.reveal-card.win .reveal-title { font-size: 20px; }
.reveal-card.win .reveal-artist { font-size: 15px; }
.reveal-card.win .next-btn { width: 100%; padding: 14px; }

@keyframes popIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Loss: a short shake instead of a celebration. */
.reveal-card.lose { animation: shake .4s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 70; /* falls in front of the win overlay */
}

.next-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--green);
  color: #0a1f0d;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* ===========================================================================
   Idioma
   Reutiliza la forma de .diff-btn: misma familia visual, un control más.
   =========================================================================== */

.lang-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.lang-btn {
  padding: 9px 4px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: #1c1c1f;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
  opacity: .6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-btn.active {
  opacity: 1;
  color: var(--text);
  background: rgba(77,171,247,.15);
  border-color: #4dabf7;
}

/* ===========================================================================
   Tiempo y ranking (solo en victoria)
   =========================================================================== */

.reveal-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(63,185,80,.22);
}

.reveal-stats.hidden { display: none; }

.stat-time { font-size: 14px; color: var(--muted); }
.stat-time b { color: var(--green); font-size: 20px; font-weight: 800; }

/* Llega después que el tiempo, cuando responde Supabase. Sin min-height la
   tarjeta pegaría un salto al aparecer el percentil. */
.stat-rank {
  min-height: 18px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-rank b { color: var(--yellow); font-size: 15px; }
.stat-rank.rank-early { color: var(--muted); font-size: 12px; font-style: italic; }
.rank-avg { font-size: 11px; color: var(--muted); }

/* ===========================================================================
   Badge de Apple Music
   =========================================================================== */

.apple-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.apple-badge:hover { transform: scale(1.02); }
.apple-badge:active { opacity: .8; }
.apple-badge.hidden { display: none; }

/* ===========================================================================
   Acciones de la tarjeta
   =========================================================================== */

.reveal-actions { display: flex; gap: 8px; width: 100%; }

/* Inline (derrota) la tarjeta es una fila: los botones no deben estirarse.
   Solo en .win pasan a ocupar el ancho. */
.reveal-card:not(.win) .reveal-actions { width: auto; }

.share-btn {
  flex: 1;
  padding: 14px;
  border-radius: 999px;
  border: 1.5px solid var(--green);
  background: transparent;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.share-btn:hover { background: rgba(63,185,80,.12); }
.share-btn.hidden { display: none; }

.reveal-card.win .reveal-actions .next-btn { flex: 1; width: auto; }

/* ===========================================================================
   Modal de email
   z-index 80: por encima del confeti (70), o quedaría enterrado justo cuando
   se muestra. Escalera completa: backdrop 55, tarjeta 60, confeti 70, email 80.
   =========================================================================== */

.email-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.82);
  animation: fadeIn .2s ease;
}
.email-modal.hidden { display: none; }

.email-card {
  position: relative;
  width: min(360px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid #2a2a2e;
  border-radius: 18px;
  padding: 26px 22px 20px;
  text-align: center;
  animation: popInPlain .35s cubic-bezier(.18,.9,.32,1.4);
}

/* La tarjeta de victoria centra con translate(-50%,-50%); esta usa flex del
   padre, así que necesita su propia animación sin ese desplazamiento. */
@keyframes popInPlain {
  0% { opacity: 0; transform: scale(.88); }
  100% { opacity: 1; transform: scale(1); }
}

.email-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.email-close.hidden { display: none; }

.email-title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.email-sub { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.45; }

#emailForm { display: flex; flex-direction: column; gap: 9px; }

#emailForm input[type="text"],
#emailForm input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2a2a2e;
  background: #101013;
  color: var(--text);
  font-size: 15px;   /* <16px hace que iOS haga zoom al enfocar */
  outline: none;
}
#emailForm input:focus { border-color: var(--green); }

.email-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  cursor: pointer;
  padding: 2px 0 4px;
}
.email-consent input { margin-top: 1px; accent-color: var(--green); flex-shrink: 0; }

.email-submit {
  padding: 13px;
  border-radius: 999px;
  border: none;
  background: var(--green);
  color: #0a1f0d;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.email-submit:disabled { opacity: .55; cursor: default; }

.email-msg { min-height: 18px; font-size: 12.5px; margin-top: 9px; }
.email-msg.ok { color: var(--green); }
.email-msg.error { color: var(--red); }

.email-skip {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
}
.email-skip:hover { text-decoration: underline; }
.email-skip.hidden { display: none; }

/* Reloj de pared: dato secundario. El que manda es el audio, así que este va
   pequeño y apagado — si compitieran visualmente, se leería el equivocado. */
.stat-clock { font-size: 11px; color: var(--muted); font-weight: 400; }

/* Enlace legal. Obligatorio desde el momento en que se recogen correos, así
   que tiene que estar accesible desde cualquier página. */
.site-footer { text-align: center; padding: 30px 0 26px; }
/* Deliberadamente tenue. La ley exige que sea accesible, no que destaque.
   Pero NO se baja de aquí: por debajo de este contraste dejaría de ser
   "accesible" y el consentimiento del formulario perdería validez. */
.site-footer a {
  color: #3a3a3a;
  font-size: 10px;
  text-decoration: none;
  padding: 6px 10px;   /* área de clic cómoda en móvil aunque el texto sea pequeño */
}
.site-footer a:hover { color: var(--muted); }

/* Hueco para la X de cerrar: con títulos largos ("Estás en el top 13%") el
   texto llegaba a tocarla. */
.email-title { padding: 0 26px; }

/* Enlace a privacidad dentro del formulario del email. Discreto pero presente:
   sin él, el consentimiento no está informado y por tanto no es válido. */
.email-legal {
  display: block;
  text-align: left;
  font-size: 10px;
  color: #4a4a4a;
  text-decoration: underline;
  margin: -4px 0 2px 26px;
}
.email-legal:hover { color: var(--muted); }

/* Los enlaces legales nacen OCULTOS y solo aparecen si la captura de correos
   está activa. Al revés —visibles y que JS los oculte— asomarían un instante
   mientras carga el script. */
.site-footer, .email-legal { display: none; }
.site-footer.legal-on { display: block; }
.email-legal.legal-on { display: block; }

/* En derrota la tarjeta es una fila horizontal, así que el badge no puede ir
   a ancho completo: se encoge y se coloca bajo el título. Solo en victoria,
   donde la tarjeta es una columna, ocupa todo el ancho. */
.reveal-card.lose { flex-wrap: wrap; }
.reveal-card:not(.win) .apple-badge {
  width: auto;
  padding: 7px 12px;
  font-size: 11px;
  flex-basis: 100%;
  justify-content: flex-start;
  background: transparent;
  color: var(--muted);
  border: 1px solid #2a2a2e;
}
.reveal-card:not(.win) .apple-badge:hover {
  transform: none;
  color: var(--text);
  border-color: #3a3a3e;
}

/* Un poco más alto que los 260px originales: con 50 resultados el scroll es
   la forma de recorrerlos, y 260px solo dejaba ver cinco.
   El tope en vh evita que en un móvil bajo el desplegable tape la pantalla. */
.suggestions { max-height: min(340px, 45vh); }

/* Aviso de que hay más resultados. No es una opción: no reacciona al ratón. */
.sugg-more {
  padding: 9px 12px;
  font-size: 11px;
  color: #6a6558;
  text-align: center;
  font-style: italic;
  border-top: 1px solid #3a352a;
  cursor: default;
  position: sticky;
  bottom: 0;
  background: #201f1a;
}
.sugg-more:hover { background: #201f1a; }

/* Los créditos largos son normales en reggaetón ("Polimá Westcoast, Pailita,
   Feid, Paloma Mami..."), así que no se filtran — se recortan al mostrarlos.
   Sin esto, una sola sugerencia ocupaba cuatro líneas y descolocaba la lista. */
.sugg-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sugg-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}