/* Oráculo de Delfos — santuario griego con trípode délfico y vapor sagrado (pneuma).
   La Pitia habla con la voz de Apolo: respuesta sí/no/quizá revelada al consultar.
   Todo el santuario es CSS+SVG: mármol, oro, humo ascendente y texto profético. */

.delfos-page { color: #f3ead2; }

.delfos-header { text-align: center; margin-bottom: 1.4rem; }
.delfos-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #f0d68a;
  text-shadow: 0 0 16px rgba(240,214,138,0.5);
  margin: 0 0 .6rem;
}
.delfos-intro {
  max-width: 62ch;
  margin: 0 auto;
  color: rgba(243,234,210,0.85);
  line-height: 1.55;
}

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

/* ---------- Shrine (the oracle scene) ---------- */
.delfos-shrine {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  width: 320px;
  max-width: 92vw;
  height: 360px;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 14px;
  color: #e8cf86; /* drives the SVG via currentColor */
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(255,240,200,0.12), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #2a2a3a 0%, #1a1a26 55%, #11111a 100%);
  box-shadow:
    inset 0 0 0 2px rgba(232,207,134,0.35),
    inset 0 2px 0 rgba(255,255,255,0.08),
    0 18px 40px rgba(0,0,0,0.55);
  overflow: hidden;
}
.delfos-shrine:focus-visible { outline: 3px solid #f0d68a; outline-offset: 4px; }

/* Marble pediment line at the top */
.delfos-shrine::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background:
    linear-gradient(180deg, rgba(232,207,134,0.5), transparent),
    repeating-linear-gradient(90deg, rgba(232,207,134,0.25) 0 1px, transparent 1px 16px);
}

/* Tripod + laurel emblem */
.delfos-emblem {
  position: relative;
  width: 150px;
  height: 175px;
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.delfos-emblem svg { width: 100%; height: 100%; }

/* Sacred smoke (pneuma) rising from the tripod */
.delfos-smoke {
  position: absolute;
  bottom: 120px;
  left: 50%;
  width: 80px;
  height: 160px;
  margin-left: -40px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.delfos-smoke span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,210,255,0.5) 0%, transparent 70%);
  filter: blur(4px);
}
.delfos-smoke span:nth-child(1) { animation: delfos-rise 2.4s ease-in infinite; }
.delfos-smoke span:nth-child(2) { animation: delfos-rise 2.4s ease-in infinite .8s; left: 38%; }
.delfos-smoke span:nth-child(3) { animation: delfos-rise 2.4s ease-in infinite 1.6s; left: 62%; }
@keyframes delfos-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  25%  { opacity: 0.8; }
  100% { transform: translateY(-150px) scale(1.6); opacity: 0; }
}

/* Answer / hint */
.delfos-answer {
  position: relative;
  z-index: 2;
  margin-top: .6rem;
  min-height: 3.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-family: 'Cinzel', 'Times New Roman', serif;
}
.delfos-hint {
  font-size: 0.85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232,207,134,0.7);
  transition: opacity .3s ease;
}
.delfos-text {
  font-size: 1.18rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff7e0;
  text-shadow: 0 0 16px rgba(240,214,138,0.6), 0 2px 4px rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .5s ease, transform .5s ease;
  padding: 0 .3rem;
}

/* Idle: gentle breathing of the emblem */
.delfos-app[data-state="ready"] .delfos-emblem { animation: delfos-breathe 4.5s ease-in-out infinite; }
.delfos-shrine:hover:not([disabled]) .delfos-emblem { filter: drop-shadow(0 6px 14px rgba(240,214,138,0.4)) brightness(1.12); }
@keyframes delfos-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Consulting: smoke rises, emblem trembles, hint fades */
.delfos-app[data-state="consulting"] .delfos-smoke  { opacity: 1; }
.delfos-app[data-state="consulting"] .delfos-hint   { opacity: 0; }
.delfos-app[data-state="consulting"] .delfos-emblem { animation: delfos-tremble 0.5s ease-in-out infinite; }
@keyframes delfos-tremble {
  0%, 100% { transform: translate(0,0) rotate(0); }
  25%      { transform: translate(-2px,1px) rotate(-1deg); }
  75%      { transform: translate(2px,-1px) rotate(1deg); }
}

/* Revealed: prophecy fades in, smoke lingers softly */
.delfos-app[data-state="revealed"] .delfos-smoke { opacity: .5; }
.delfos-app[data-state="revealed"] .delfos-hint  { opacity: 0; }
.delfos-app[data-state="revealed"] .delfos-text  { opacity: 1; transform: scale(1); }
.delfos-app[data-state="revealed"] .delfos-emblem { animation: delfos-glow 2.6s ease-in-out infinite; }
@keyframes delfos-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(240,214,138,0)); }
  50%      { filter: drop-shadow(0 0 18px rgba(240,214,138,0.5)); }
}

/* Verdict-driven tint of the prophecy */
.delfos-app[data-verdict="si"]    .delfos-text { color: #c6ffd2; text-shadow: 0 0 18px rgba(120,255,160,0.8), 0 2px 4px rgba(0,0,0,0.5); }
.delfos-app[data-verdict="no"]    .delfos-text { color: #ffcaca; text-shadow: 0 0 18px rgba(255,160,160,0.8), 0 2px 4px rgba(0,0,0,0.5); }
.delfos-app[data-verdict="maybe"] .delfos-text { color: #ffe7ad; text-shadow: 0 0 18px rgba(255,225,168,0.75), 0 2px 4px rgba(0,0,0,0.5); }

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

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

@media (prefers-reduced-motion: reduce) {
  .delfos-emblem, .delfos-smoke span { animation: none !important; }
}
@media (max-width: 520px) {
  .delfos-shrine { width: 280px; height: 330px; }
  .delfos-emblem { width: 124px; height: 145px; }
  .delfos-text { font-size: 1.05rem; }
}