/* Probar JEV en el cel. El llano de noche: solo brillan el fuego (el titulo) y el pulso. */
:root {
  --noche: #141A33; --horizonte: #232A4F; --estero: #0E1828; --moriche: #0F1A1F;
  --lomo: #5B4A6E; --panza: #77688C; --linea: #0A0D1A; --brasa: #E8B865; --pulso: #FFD98A;
  --polvo: #C9D3F2; --morado: #7E5BB8; --morado-claro: #9B7FD4;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--polvo);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--noche) 0%, var(--horizonte) 65%, var(--estero) 100%) fixed;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(150px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent;
}
.cielo {
  position: fixed; inset: 0; pointer-events: none; z-index: -2; opacity: .6;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--polvo), transparent),
    radial-gradient(1px 1px at 27% 7%, var(--polvo), transparent),
    radial-gradient(1px 1px at 41% 22%, var(--polvo), transparent),
    radial-gradient(1.5px 1.5px at 63% 11%, var(--polvo), transparent),
    radial-gradient(1px 1px at 79% 27%, var(--polvo), transparent),
    radial-gradient(1.5px 1.5px at 91% 9%, var(--polvo), transparent),
    radial-gradient(1px 1px at 6% 44%, var(--polvo), transparent),
    radial-gradient(1px 1px at 95% 52%, var(--polvo), transparent);
  animation: mecer 14s ease-in-out infinite;
}
.llano { position: fixed; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; pointer-events: none; }
.llano svg { width: 100%; height: 100%; display: block; }
.orilla { fill: var(--moriche); }
.palma path { stroke: var(--moriche); }
.rastro { fill: var(--panza); opacity: .3; }
.cabeza { text-align: center; padding: 2.4rem 1rem 1rem; }
h1 {
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif; font-weight: normal;
  letter-spacing: .4em; margin: 0 0 .5rem; padding-left: .4em;
  font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--brasa);
  text-shadow: 0 0 18px rgba(232, 184, 101, .25); animation: aparecer 6s ease-out both;
}
.sub { margin: 0; opacity: .85; }
.pulso {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--pulso);
  vertical-align: middle; margin-right: .35rem; box-shadow: 0 0 10px 2px rgba(255, 217, 138, .45);
  animation: respirar 6s ease-in-out infinite;
}
main { max-width: 640px; margin: 0 auto; padding: 0 1rem; display: grid; gap: 1.4rem; }
.piedra { background: rgba(14, 24, 40, .92); border: 5px solid var(--linea); border-radius: 30px; padding: 1.5rem 1.6rem; }
form { display: grid; gap: .7rem; }
.codigo { display: grid; gap: .5rem; margin-bottom: .4rem; }
.campo { font-family: Georgia, "Palatino Linotype", serif; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; opacity: .85; }
.fila-titulo { display: flex; justify-content: space-between; align-items: baseline; margin-top: .5rem; }
.ayuda { text-transform: none; letter-spacing: 0; font-family: system-ui, sans-serif; font-size: .85rem; opacity: .7; }
textarea, input {
  font: inherit; font-size: max(16px, 1rem); color: var(--polvo); background: var(--moriche);
  border: 3px solid var(--linea); border-radius: 16px; padding: .7rem .85rem; width: 100%; min-height: 48px;
}
textarea { resize: vertical; min-height: 3.4rem; }
textarea:focus, input:focus { outline: 3px solid var(--morado-claro); outline-offset: 1px; }
::placeholder { color: var(--polvo); opacity: .4; }
.opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; counter-reset: op; }
.opciones li { display: flex; align-items: center; gap: .5rem; counter-increment: op; }
.opciones li::before {
  content: counter(op); flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .85rem; background: var(--lomo); border: 3px solid var(--linea);
}
.opciones input { flex: 1; min-width: 0; }
.quitar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font: inherit; font-size: 1.3rem;
  line-height: 1; color: var(--polvo); background: transparent; border: 3px solid var(--lomo); touch-action: manipulation;
}
.quitar:hover, .quitar:focus-visible { background: var(--lomo); }
.quitar:disabled { opacity: .25; cursor: default; background: transparent; }
.boton {
  font: inherit; color: #fff; cursor: pointer; min-height: 48px; touch-action: manipulation;
  background: linear-gradient(180deg, var(--morado-claro), var(--morado));
  border: 4px solid var(--linea); border-radius: 999px; padding: .55rem 1.4rem; justify-self: start;
  transition: filter .4s ease, transform .4s ease;
}
.boton:hover, .boton:focus-visible { filter: brightness(1.1); }
.boton:active { transform: translateY(1px); }
.boton.suave { background: var(--lomo); color: var(--polvo); padding: .35rem 1.2rem; }
.boton.suave:hover, .boton.suave:focus-visible { background: var(--panza); }
.boton.grande { justify-self: stretch; font-size: 1.15rem; padding: .8rem 1.4rem; margin-top: .8rem; }
.boton:disabled { opacity: .55; cursor: wait; }
.aviso { margin: 0; min-height: 1.3rem; text-align: center; }
.aviso.mal { color: #E7B5B5; }
.aviso.sombra { color: var(--polvo); }
.esperando .aviso::before {
  content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem;
  background: var(--pulso); animation: respirar 6s ease-in-out infinite; vertical-align: middle;
}
.nota { margin: .2rem 0 0; font-size: .8rem; opacity: .6; text-align: center; }
.resultado { text-align: center; animation: subir 1.2s ease-out both; }
.resultado:focus { outline: 3px solid var(--morado-claro); outline-offset: 4px; }
.eyebrow { margin: 0; font-family: Georgia, serif; letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; opacity: .7; }
.ganadora {
  margin: .3rem 0 1.3rem; font-family: Georgia, "Palatino Linotype", serif;
  font-size: clamp(2rem, 10vw, 3.6rem); line-height: 1.1; color: #fff; overflow-wrap: anywhere;
}
.duda { color: var(--brasa); font-weight: bold; margin-top: -.3rem; }
.barras { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .7rem; text-align: left; }
.barra-fila { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; align-items: center; }
.barra-nombre { overflow-wrap: anywhere; }
.barra-num { font-variant-numeric: tabular-nums; opacity: .85; }
.barra { grid-column: 1 / -1; height: .9rem; border-radius: 999px; overflow: hidden; background: var(--moriche); border: 3px solid var(--linea); }
.barra-llena { height: 100%; border-radius: 999px; background: var(--lomo); transition: width 1.6s ease-out; width: 0; }
.barra-fila.gana .barra-llena { background: linear-gradient(90deg, var(--morado), var(--morado-claro)); }
.barra-fila.gana .barra-nombre { color: #fff; }
.datos { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; border-top: 3px dashed var(--lomo); padding-top: 1rem; }
.datos div { display: grid; gap: .1rem; }
.datos dt { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; opacity: .65; }
.datos dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes respirar { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes mecer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 520px) {
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .llano { height: 90px; }
  .cabeza { padding-top: 1.6rem; }
  main { padding: 0 .6rem; gap: 1rem; }
  .piedra { padding: 1.1rem 1rem; border-radius: 24px; border-width: 4px; }
  .datos { grid-template-columns: 1fr; text-align: left; }
  .datos div { grid-template-columns: 7rem 1fr; }
}
[hidden] { display: none !important; }