/* Oráculo Bola de Cristal — esfera de cristal con respuesta breve revelada al consultar.
   La esfera es 100% CSS: gradiente esférico, brillo, niebla animada y texto centrado. */

.bola-page { color: #f5ecd2; }

.bola-header { text-align: center; margin-bottom: 1.4rem; }
.bola-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #d6c0ff;
  text-shadow: 0 0 16px rgba(214,192,255,0.5);
  margin: 0 0 .6rem;
}
.bola-intro {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(245,236,210,0.85);
  line-height: 1.55;
}

.bola-app {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* ---------- Crystal ball ---------- */
.bola-ball {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 280px;
  height: 320px; /* sphere + stand */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.bola-ball:focus-visible .bola-sphere { outline: 3px solid #d6c0ff; outline-offset: 6px; }

.bola-stand {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 200px;
  height: 36px;
  margin-left: -100px;
  background: linear-gradient(180deg, #3a2810 0%, #1a0c04 100%);
  border-radius: 50% / 60%;
  box-shadow:
    inset 0 -4px 6px rgba(0,0,0,0.6),
    inset 0 4px 4px rgba(180,140,80,0.35),
    0 8px 16px rgba(0,0,0,0.55);
}

.bola-sphere {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.7) 0%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(40,15,90,0.85) 0%, transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(80,40,160,0.45) 0%, rgba(20,8,55,0.95) 70%),
    linear-gradient(160deg, #2a1660 0%, #100628 100%);
  box-shadow:
    inset 0 -25px 50px rgba(0,0,0,0.7),
    inset 25px 5px 45px rgba(120,80,220,0.35),
    0 22px 50px rgba(15,5,40,0.7),
    0 0 60px rgba(120,80,220,0.35);
  overflow: hidden;
  transition: transform .3s ease, filter .3s ease;
}

.bola-shine {
  position: absolute;
  top: 8%;
  left: 18%;
  width: 38%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.65) 0%, transparent 70%);
  filter: blur(3px);
  pointer-events: none;
}
.bola-mist {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 70%, rgba(180,140,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(120,80,220,0.18) 0%, transparent 55%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* Answer / hint container */
.bola-answer {
  position: absolute;
  inset: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 18px rgba(120,80,220,0.95), 0 2px 4px rgba(0,0,0,0.6);
  font-family: 'Cinzel', 'Times New Roman', serif;
  pointer-events: none;
}
.bola-hint {
  font-size: 0.95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(214,192,255,0.75);
  opacity: 1;
  transition: opacity .3s ease;
}
.bola-text {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0 .4rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .45s ease, transform .45s ease;
}

/* Idle: subtle breathing */
.bola-app[data-state="ready"] .bola-sphere {
  animation: bola-breathe 4.5s ease-in-out infinite;
}
.bola-ball:hover:not([disabled]) .bola-sphere {
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.1);
}
@keyframes bola-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Shaking: while waiting for AJAX */
.bola-app[data-state="shaking"] .bola-sphere {
  animation: bola-shake 0.6s ease-in-out infinite;
}
.bola-app[data-state="shaking"] .bola-mist { opacity: 1; }
.bola-app[data-state="shaking"] .bola-hint { opacity: 0; }
@keyframes bola-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%      { transform: translate(-6px, 4px) rotate(-2deg); }
  40%      { transform: translate(7px, -3px) rotate(2deg); }
  60%      { transform: translate(-5px, 5px) rotate(-1.5deg); }
  80%      { transform: translate(6px, -2px) rotate(1.5deg); }
}

/* Revealed: answer fades in, mist lingers */
.bola-app[data-state="revealed"] .bola-sphere { animation: bola-glow 2.4s ease-in-out infinite; }
.bola-app[data-state="revealed"] .bola-mist   { opacity: 1; }
.bola-app[data-state="revealed"] .bola-hint   { opacity: 0; }
.bola-app[data-state="revealed"] .bola-text   { opacity: 1; transform: scale(1); }
@keyframes bola-glow {
  0%, 100% { filter: brightness(1)    drop-shadow(0 0 0    rgba(120,80,220,0)); }
  50%      { filter: brightness(1.08) drop-shadow(0 0 24px rgba(120,80,220,0.45)); }
}

/* Verdict-driven color tint of the answer text */
.bola-app[data-verdict="si"]    .bola-text { color: #c0ffce; text-shadow: 0 0 20px rgba(120,255,160,0.85), 0 2px 4px rgba(0,0,0,0.5); }
.bola-app[data-verdict="no"]    .bola-text { color: #ffcaca; text-shadow: 0 0 20px rgba(255,160,160,0.85), 0 2px 4px rgba(0,0,0,0.5); }
.bola-app[data-verdict="maybe"] .bola-text { color: #ffe1a8; text-shadow: 0 0 20px rgba(255,225,168,0.75), 0 2px 4px rgba(0,0,0,0.5); }

/* ---------- Controls ---------- */
.bola-controls { width: 100%; display: flex; flex-direction: column; gap: .9rem; }
.bola-form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: stretch;
}
.bola-label {
  font-size: .9rem;
  color: rgba(245,236,210,0.75);
  text-align: center;
}
.bola-input {
  width: 100%;
  padding: .8rem 1rem;
  background: rgba(20,10,40,0.55);
  border: 1px solid rgba(214,192,255,0.4);
  border-radius: 10px;
  color: #f5ecd2;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.bola-input:focus {
  outline: none;
  border-color: rgba(214,192,255,0.85);
  box-shadow: 0 0 0 3px rgba(214,192,255,0.2);
}
.bola-input::placeholder { color: rgba(245,236,210,0.45); }
.bola-consult, .bola-restart {
  align-self: center;
  padding: .7rem 1.8rem;
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bola-app[data-state="shaking"] .bola-consult,
.bola-app[data-state="shaking"] .bola-input { opacity: .55; pointer-events: none; }
.bola-restart-wrap { margin: 0; text-align: center; }

.bola-error { color: #ff9999; text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .bola-app[data-state="ready"]    .bola-sphere,
  .bola-app[data-state="shaking"]  .bola-sphere,
  .bola-app[data-state="revealed"] .bola-sphere { animation: none; }
}

@media (max-width: 520px) {
  .bola-ball { width: 220px; height: 252px; }
  .bola-sphere { width: 220px; height: 220px; }
  .bola-stand { width: 160px; margin-left: -80px; }
  .bola-text { font-size: 1.2rem; }
}