:root {
  --fondo: #17102f; --tinta: #f3eeff; --suave: #b9add9; --linea: #3a2a78;
  --acento: #ff5fa2; --acento-tinta: #2a0b1c; --panel: #241656;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo); color: var(--tinta);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.45;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
[hidden] { display: none !important; }

.pantalla {
  min-height: 100%; max-width: 26rem; margin: 0 auto; padding: 2.2rem 1.25rem 2rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
h1 { font-size: 3.4rem; line-height: 1; margin: 0; color: var(--acento); letter-spacing: -0.02em; }
h2 { font-size: 1.9rem; margin: 0; }
h2 span { color: var(--acento); letter-spacing: 0.12em; }
.bajada { margin: 0; color: var(--suave); }
form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
label { font-weight: 700; }
input {
  font: inherit; color: var(--tinta); background: var(--panel); border: 2px solid var(--linea);
  border-radius: 12px; padding: 0.75rem 0.9rem; width: 100%;
}
input:focus-visible, button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
button {
  font: inherit; font-weight: 700; color: var(--tinta); background: var(--panel); border: 2px solid var(--linea);
  border-radius: 999px; padding: 0.75rem 1.2rem; cursor: pointer; touch-action: manipulation;
}
button.principal { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-size: 1.1rem; }
button:disabled { opacity: 0.5; cursor: default; }
.aviso { color: #ffd23f; margin: 0; }

#lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
#lista li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; background: var(--panel); border-radius: 12px; }
#lista .punto { width: 1.1rem; height: 1.1rem; border-radius: 35%; flex: none; }
#lista .vos { color: var(--suave); margin-left: auto; font-size: 0.85rem; }
#lista .fuera { opacity: 0.45; }
.invitar { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
.invitar p { margin: 0; color: var(--suave); font-size: 0.95rem; }
#qr { align-self: center; background: #fff; border-radius: 12px; padding: 6px; }
#link { font-size: 0.9rem; text-align: center; }
.ayuda { margin: 0; padding: 0 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; color: var(--suave); }
.ayuda b { color: var(--tinta); }
.ayuda b.rosa { color: #ffb3e6; }
.ayuda b.naranja { color: #ffc08a; }
.opcion { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.95rem; color: var(--suave); }
.opcion input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; flex: none; accent-color: var(--acento); }

/* El juego ocupa toda la pantalla; en la compu queda como una columna de celu */
#juego { position: fixed; inset: 0; display: flex; justify-content: center; background: #0d081d; }
#marco { position: relative; width: 100%; max-width: 30rem; height: 100%; overflow: hidden; }
#lienzo { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
/* El HUD no tapa los toques: solo el botón se puede tocar */
#hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.5rem;
  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 0.7rem 0; pointer-events: none; }
#altura { font-weight: 800; font-size: 1.35rem; background: rgba(18, 10, 46, 0.78); padding: 0.2rem 0.8rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
#estrellas { font-weight: 800; font-size: 1.05rem; color: #ffd23f; background: rgba(18, 10, 46, 0.78); padding: 0.32rem 0.7rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
#corazones { display: flex; gap: 0.25rem; background: rgba(18, 10, 46, 0.78); padding: 0.42rem 0.6rem; border-radius: 999px; }
#corazones i { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #ff4d6d; display: block; }
#corazones i.perdido { background: #4a3a70; }
#reiniciar { margin-left: auto; pointer-events: auto; width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.25rem; background: rgba(18, 10, 46, 0.78); border-color: transparent; }
#reiniciar.seguro { background: #ff4d6d; color: #2a0b1c; }
#pista { position: absolute; left: 0.8rem; right: 0.8rem; top: calc(3.8rem + env(safe-area-inset-top, 0px)); margin: 0; text-align: center;
  background: rgba(18, 10, 46, 0.85); padding: 0.5rem 0.8rem; border-radius: 14px; font-weight: 700; font-size: 0.98rem; pointer-events: none; }
#fin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(13, 8, 29, 0.84); padding: 1.5rem; text-align: center; }
#fin p { margin: 0; }
.fin-titulo { color: var(--suave); font-size: 1.1rem; }
#fin-altura { font-size: 4.2rem; font-weight: 800; line-height: 1; color: #ffd23f; font-variant-numeric: tabular-nums; }
#fin-estrellas { color: #ffd23f; font-weight: 800; font-size: 1.3rem; }
#fin-logros { color: #ffc08a; font-weight: 700; }
#fin-record { color: var(--suave); margin-bottom: 0.8rem !important; }
#fin button { min-width: 13rem; }
#fin-texto { font-size: 0.9rem; color: var(--suave); user-select: all; -webkit-user-select: all; max-width: 22rem; }