:root {
  --bg: #0e0f13;
  --panel: #171922;
  --line: #262a37;
  --text: #e9ebf2;
  --muted: #9aa0b4;
  --accent: #6f5cff;
  --hit: #2e9e5b;
  --near: #d08b1b;
  --miss: #343949;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: 3rem;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.topbar h1 {
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.logo { flex: none; }

/* En pantalla estrecha el título ENCOGE, no desaparece: es el nombre del sitio
   y lo primero que dice de qué va esto. Ocultarlo dejaba una cabecera muda. */
@media (max-width: 30rem) {
  .topbar { padding: .8rem .9rem; gap: .5rem; }
  .topbar h1 { font-size: .9rem; gap: .4rem; }
  .logo { width: 26px; height: 26px; }
  .topbar-actions button { padding: .45rem .6rem; font-size: .85rem; }
}

/* Por debajo de 23rem la cabecera no cabe en una línea y "Adivina el Artista"
   se partía en dos con "Artista" descolgado. Se acorta el botón, no el nombre:
   el nombre es lo que identifica el sitio. */
@media (max-width: 23rem) {
  .topbar h1 { font-size: .82rem; }
  #new-btn { font-size: 0; }
  #new-btn::before { content: "↻"; font-size: 1.1rem; }
}
/* El nombre entero en blanco: en morado, "Artista" se leía como un enlace o un
   botón, y además competía con los controles morados de idioma y dificultad. */
.topbar h1 span { color: inherit; }
.topbar-actions { display: flex; gap: .5rem; }

button {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .45rem .9rem;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }

/* Con texto en vez de "?": un interrogante suelto puede leerse como ayuda
   genérica o soporte, y lo que hay detrás son las reglas del juego. En pantalla
   estrecha se queda solo el icono, donde el espacio manda sobre el matiz. */
#help-btn { white-space: nowrap; }
#help-btn::before { content: "📖 "; }

@media (max-width: 30rem) {
  #help-btn { font-size: 0; padding: .45rem .7rem; }
  #help-btn::before { content: "📖"; font-size: 1rem; }
}

/* -------------------------------------------------------------------- main */

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2rem);
}

.lang-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin-bottom: .5rem;
}
#diff-row { margin-bottom: 1.25rem; }

.lang-btn {
  /* 44px de alto mínimo: es el objetivo táctil que recomienda Apple, y estos
     botones se pulsan con el pulgar en marcha. */
  min-height: 44px;
  padding: .55rem .3rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: .8rem;
}
.lang-btn:hover { border-color: var(--line); }
.lang-btn.active {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}

.tagline { color: var(--muted); margin: 0 0 1rem; min-height: 1.5rem; }
.tagline strong { color: var(--text); }
.tagline.flash { color: var(--near); }

.hint {
  margin: -.5rem 0 1rem;
  padding: .5rem .8rem;
  border-radius: .5rem;
  border: 1px dashed var(--near);
  color: var(--near);
  font-size: .9rem;
}
.hint[hidden] { display: none; }

/* Monoespaciada y con aire: el nombre destapado se lee letra a letra, y con
   una proporcional los guiones bajos se juntan y no se cuentan bien. */
.hint .mask {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--text);
}

.hint-btn {
  min-height: 44px;
  margin-bottom: 1rem;
  font-size: .85rem;
  border-style: dashed;
  border-color: var(--near);
  color: var(--near);
}
.hint-btn[hidden] { display: none; }

/* ------------------------------------------------------ formulario y combo */

#guess-form { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.combo { position: relative; flex: 1; }

#guess {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .6rem .8rem;
}
#guess:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#guess-form button { background: var(--accent); border-color: var(--accent); }

#suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + .3rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: .3rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / .5);
}
#suggestions li { padding: .5rem .6rem; border-radius: .4rem; cursor: pointer; }
#suggestions li:hover,
#suggestions li.active { background: var(--accent); }

/* ----------------------------------------------------------------- tablero */

/* Red de seguridad: si el tablero llegara a no caber, scrollea dentro de su
   propia caja y la PÁGINA nunca scrollea en horizontal. */
.board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.board {
  width: 100%;
  border-collapse: separate;
  border-spacing: .3rem;
  text-align: center;
  table-layout: fixed;
}

.board th, .board td {
  padding: .6rem .3rem;
  font-size: .85rem;
  /* `break-word`, no `anywhere`: parte dentro de una palabra solo cuando esa
     palabra no cabe ni sola en su línea. Con `anywhere` partía siempre que
     ahorrase espacio y salían cosas como "Españ-ol". */
  overflow-wrap: break-word;
}

.board thead th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .7rem;
  padding-bottom: .2rem;
}

.board tbody th, .board tbody td {
  border-radius: .5rem;
  background: var(--miss);
  font-weight: 600;
  /* Aparecen de golpe: el tablero entero se redibuja tras cada intento y una
     transición haría parpadear también las filas viejas. */
  animation: pop .18s ease-out;
}

/* El nombre es la columna que más texto lleva; el resto se reparten lo demás
   a partes iguales gracias a table-layout: fixed. */
.board thead th:first-child { width: 20%; }
.board tbody th.name { text-align: left; padding-left: .6rem; }

.board .hit  { background: var(--hit); }
.board .near { background: var(--near); color: #1b1405; }
.board .miss { background: var(--miss); color: var(--muted); }

.arrow { margin-left: .25rem; opacity: .85; }

@media (max-width: 40rem) {
  .board th, .board td { padding: .5rem .15rem; font-size: .62rem; }
  .board thead th { font-size: .5rem; letter-spacing: 0; }
  .board { border-spacing: .18rem; }
  .board thead th:first-child { width: 19%; }
}

/* Móviles estrechos (360px y menos, que es medio Android).
 *
 * Ahí "Reggaetón" no cabe en su celda y se partía en seco: "Reggaet/ón",
 * "Colombi/a", "Alternati/vo". Dos arreglos, y ninguno es encoger más la letra
 * hasta que no se lea:
 *
 *   · `hyphens: auto` parte por sílabas y con guion — "Reggae-tón" se lee, un
 *     corte arbitrario no. Funciona porque el documento declara lang="es".
 *   · Una pizca menos de tamaño y de padding, lo justo para ganar el par de
 *     píxeles que faltaban.
 *
 * Se descartó darle scroll horizontal al tablero: en este juego se comparan
 * columnas entre sí, y si hay que arrastrar para ver la última, se pierde justo
 * la lectura que hace falta para deducir. */
@media (max-width: 23rem) {
  .board th, .board td {
    font-size: .58rem;
    padding: .45rem .1rem;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .board { border-spacing: .14rem; }
}

@keyframes pop {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------- resultado */

.result {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--panel);
  text-align: center;
}
.result h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.result p { margin: 0 0 1rem; color: var(--muted); }
.result .time {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin: -.4rem 0 .6rem;
  font-variant-numeric: tabular-nums;
}

/* Tres pesos visuales distintos a propósito. Si los tres modos se premiaran
   igual, elegir Difícil no tendría ninguna recompensa y nadie lo elegiría. */
.mode-badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--muted);
}
.mode-badge.normal { border-color: var(--accent); color: var(--text); }
.mode-badge.dificil {
  border-color: #e8823d;
  color: #ffd9bd;
  background: linear-gradient(135deg, #7a2f0d, #b8501a);
  box-shadow: 0 0 18px rgb(232 130 61 / .35);
}

.result .hints-used {
  margin: -.6rem 0 1rem;
  font-size: .8rem;
  color: var(--near);
}

/* POR DETRÁS del resultado, no por delante.
 *
 * En Second Radar el confeti va en z-index 70 porque allí la victoria es un
 * overlay a pantalla completa y el confeti debe cubrirlo. Aquí el resultado es
 * un panel dentro de la página, así que ese mismo valor tapaba justo lo que el
 * jugador quiere leer: el nombre del artista y su tiempo.
 *
 * Con z-index 0 el confeti cae por detrás del panel y por delante del fondo:
 * se celebra sin estorbar. El diálogo de correo, que es <dialog> modal, sigue
 * saliendo por encima de ambos por su capa propia. */
.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* El panel necesita contexto de apilamiento propio para quedar por encima del
   confeti; sin `position` el z-index no hace nada. */
.result { position: relative; z-index: 1; }

.result.won  { border-color: var(--hit); }
.result.lost { border-color: var(--miss); }

.result .actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.result .primary, dialog .primary { background: var(--accent); border-color: var(--accent); }

/* Separado del resultado con una línea: es otra cosa, y tiene que leerse como
   otra cosa y no como parte de la partida. */
.showcrew {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.showcrew p { margin: 0 0 .35rem; color: var(--text); }
/* inline-flex, no flex: así el grupo icono+texto ocupa solo lo que mide y el
   `text-align: center` del panel lo centra como una pieza. Con `flex` se
   estiraba a todo el ancho y el icono quedaba pegado al borde izquierdo,
   descolgado del título y de los botones. */
.showcrew .fine {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 auto .9rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-align: left;
  max-width: 30rem;
}
.showcrew .fine b { color: var(--text); }

.sc-logo {
  flex: none;
  border-radius: .5rem;
  /* El icono viene de la ficha de la tienda y ahí se ve sobre fondo claro.
     Este borde tenue lo despega del panel oscuro sin retocar la imagen. */
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12);
}

.showcrew-links {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.showcrew-cta {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: .6rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.showcrew-cta:hover { filter: brightness(1.1); }

/* ------------------------------------------------------------ modal email */

#subscribe-form { display: flex; flex-direction: column; gap: .8rem; }

#subscribe-email, #subscribe-city {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .6rem .8rem;
  width: 100%;
}
#subscribe-email:focus,
#subscribe-city:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.consent {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}
/* Una casilla de 13px no se acierta con el pulgar. La etiqueta entera ya es
   pulsable —el input va dentro del <label>— pero quien apunta a la casilla
   tiene que poder darle. */
.consent input {
  margin-top: .05rem;
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* El enlace de privacidad del modal: área de pulsación sin agrandar el texto. */
#subscribe .fine a { display: inline-block; padding: .6rem .2rem; }

dialog .actions { display: flex; gap: .5rem; }
#subscribe-note:empty { display: none; }
#subscribe-note { color: var(--near); }

/* ------------------------------------------------------------------- ayuda */

dialog {
  max-width: 32rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--panel);
  color: var(--text);
  padding: 1.5rem;
}
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog h2 { margin-top: 0; }
dialog p { color: var(--muted); }
dialog .fine { font-size: .85rem; }

.legend { list-style: none; padding: 0; margin: 1rem 0; }
.legend li { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.legend b { color: var(--text); }

.chip {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: .3rem;
  background: var(--miss);
}
.chip.hit  { background: var(--hit); }
.chip.near { background: var(--near); }

/* ---------------------------------------------------------------- anuncios */

/* Reserva de altura desde el primer pintado: si el banner empujara el tablero
   al cargar, sería un salto de layout justo donde el usuario está mirando. */
.ad-slot {
  min-height: 90px;
  margin: 0 auto;
  max-width: 60rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot[hidden] { display: none; }

/* ------------------------------------------------------ partida de ejemplo */

/* Atenuada para que se lea como muestra y no como una partida en curso: si
   pareciera real, el jugador creería que ya ha jugado tres intentos. */
#board-body.demo { opacity: .55; }

.demo-note {
  margin: 0 0 .75rem;
  padding: .6rem .8rem;
  border: 1px dashed var(--line);
  border-radius: .5rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.demo-note b { color: var(--text); }
.demo-note em { display: block; margin-top: .2rem; color: var(--accent); font-style: normal; font-weight: 600; }
.demo-note[hidden] { display: none; }

/* Los mismos cuadritos de color que usa el diálogo de ayuda. */
.demo-note .chip {
  display: inline-block;
  width: .7rem; height: .7rem;
  border-radius: .2rem;
  vertical-align: -1px;
}
.demo-note .chip.hit  { background: var(--hit); }
.demo-note .chip.near { background: var(--near); }
.demo-note .chip.miss { background: var(--miss); }

/* Discreto a propósito: es un enlace de cortesía legal, no una sección del
   sitio. Pero SIGUE siendo un enlace normal, legible y pulsable — esconderlo
   de verdad (gris sobre gris, o fuera de pantalla) es justo lo que hace que un
   sitio parezca que tiene algo que ocultar, y además rompe la accesibilidad. */
.site-footer { text-align: center; padding: 3rem 1rem .5rem; }
.site-footer a {
  /* Discreto a la vista pero cómodo al dedo: el `padding` da área de pulsación
     sin agrandar el texto. Un enlace de 14px de alto no se acierta en móvil. */
  display: inline-block;
  padding: .8rem 1.2rem;
  color: var(--muted);
  font-size: .72rem;
  opacity: .55;
  text-decoration: none;
}
.site-footer a:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------------------- privacidad */
/* Estaban en un <style> dentro de privacidad.html. Se mueven aquí para que
   la CSP pueda prohibir estilos en línea, que es de donde salen la mitad de
   los XSS que se cuelan por hueco de plantilla. */
  .legal { max-width: 42rem; margin: 0 auto; padding: 2rem clamp(1rem,4vw,2rem) 4rem; }
  .legal h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
  .legal h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
  .legal p, .legal li { color: var(--muted); }
  .legal ul { padding-left: 1.1rem; }
  .legal li { margin-bottom: .4rem; }
  .legal a { color: var(--accent); }
  .legal .updated { font-size: .82rem; }
  .legal strong { color: var(--text); }
.btn-link { text-decoration: none; }