:root {
  --fondo: #0b0614;
  --texto: #e9e1ff;
  --tenue: #9b8fbf;
  --acento: #b07cff;
  --oro: #f3c969;
  --campo: #160d26;
  --borde: #3a2a5c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(ellipse at top, #241341 0%, var(--fondo) 60%);
  color: var(--texto);
  font-family: Georgia, "Times New Roman", serif;
}

.cuenta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 16px 0;
  color: var(--tenue);
  font-size: .85rem;
}
.cuenta span { min-width: 0; overflow-wrap: anywhere; }
button.mini { flex: none; padding: 8px 14px; font-size: .85rem; }

.panel {
  background: var(--campo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 16px;
}
.panel p { margin: 0 0 6px; }
.nota { color: var(--tenue); font-size: .85rem; }
.sesion { color: var(--tenue); font-size: .85rem; min-height: 1.2em; margin: 0 0 8px; }

.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.packs small { opacity: .75; }

.aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  background: #2a1d44;
  color: var(--texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso.malo { background: #5a1f2e; }

.escena {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  text-align: center;
}

.titulo {
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  margin: 0;
  letter-spacing: .08em;
  color: var(--oro);
  text-shadow: 0 0 18px rgba(243, 201, 105, .45);
  user-select: none;
}

.subtitulo { color: var(--tenue); margin: 8px 0 24px; font-style: italic; }

.bola {
  position: relative;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0%, #8a5cf655 18%, #2a1450 60%, #0d0620 100%);
  box-shadow: 0 0 40px #6d3fd055, inset 0 0 40px #000a;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: box-shadow .6s;
}

.bola__niebla {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg, transparent, #b07cff33, transparent, #f3c96922, transparent);
  animation: girar 14s linear infinite;
  opacity: .6;
}

.bola__texto {
  position: relative;
  margin: 0;
  padding: 0 14%;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  color: #fff;
  text-shadow: 0 0 12px var(--acento);
  min-height: 1.5em;
}

.bola.pensando { box-shadow: 0 0 80px #b07cffaa, inset 0 0 40px #000a; }
.bola.pensando .bola__niebla { animation-duration: 1.4s; opacity: 1; }
.bola.revelando { box-shadow: 0 0 90px #f3c969aa, inset 0 0 40px #000a; }

@keyframes girar { to { transform: rotate(360deg); } }

.formulario { display: grid; gap: 8px; text-align: left; }

label { color: var(--tenue); font-size: .9rem; margin-top: 8px; }

input {
  width: 100%;
  padding: 14px;
  font: inherit;
  font-size: 1.05rem;
  color: var(--texto);
  background: var(--campo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  outline: none;
}
input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px #b07cff33; }

.acciones { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

button {
  flex: 1;
  padding: 14px 18px;
  font: inherit;
  font-size: 1rem;
  color: #1a0f00;
  background: var(--oro);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: wait; }
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }

/* Señal discreta para el operador: se enciende en modo secreto. */
.senal {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff10;
}
.senal.activa { background: #ffffff55; }

.secreto {
  max-width: 440px;
  background: #160d26;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px;
}
.secreto::backdrop { background: #000c; }
.secreto h2 { margin-top: 0; color: var(--oro); }
.secreto li { margin-bottom: 8px; }
kbd { background: #2a1d44; padding: 1px 6px; border-radius: 4px; }