:root {
  --oracle-bg: #08070c;
  --oracle-panel: rgba(16, 14, 22, 0.82);
  --oracle-panel-strong: rgba(28, 23, 35, 0.94);
  --oracle-line: rgba(255, 255, 255, 0.16);
  --oracle-text: #fff8dc;
  --oracle-muted: rgba(255, 248, 220, 0.68);
  --oracle-gold: #f8c95a;
  --oracle-gold-2: #c99024;
  --oracle-blue: #78c8ff;
  --oracle-red: #ff6d7a;
  --oracle-shadow: 0 28px 90px rgba(0, 0, 0, 0.54);
}

* {
  box-sizing: border-box;
}

.adivino-page {
  background: var(--oracle-bg);
  color: var(--oracle-text);
  font-family: Georgia, "Times New Roman", serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.adivino-page button,
.adivino-page input,
.adivino-page select,
.adivino-page textarea {
  font-family: Arial, Helvetica, sans-serif;
}

.adivino-bg {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.adivino-bg::before {
  background:
    linear-gradient(90deg, rgba(248, 201, 90, 0.04) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(248, 201, 90, 0.04) 1px, transparent 1px) 0 0 / 72px 72px,
    radial-gradient(circle at 50% 12%, rgba(248, 201, 90, 0.18), transparent 34%),
    linear-gradient(145deg, #08070c 0%, #11101b 48%, #06050a 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.adivino-bg canvas {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.aurora,
.light-beam {
  position: absolute;
}

.aurora {
  border-radius: 50%;
  filter: blur(6px);
  height: 420px;
  opacity: 0.55;
  width: 420px;
}

.aurora.a1 {
  animation: driftOne 12s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(248, 201, 90, 0.28), transparent 68%);
  left: -120px;
  top: 7vh;
}

.aurora.a2 {
  animation: driftTwo 14s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(120, 200, 255, 0.22), transparent 70%);
  bottom: 2vh;
  right: -110px;
}

.light-beam {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  height: 76vh;
  opacity: 0.28;
  top: -10vh;
  transform: rotate(18deg);
  width: 130px;
}

.light-beam.b1 {
  left: 16%;
}

.light-beam.b2 {
  right: 18%;
  transform: rotate(-18deg);
}

.adivino-header,
.adivino-layout,
.site-footer {
  position: relative;
  z-index: 1;
}

.adivino-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 16px clamp(16px, 3vw, 34px);
}

.adivino-brand,
.adivino-home,
.adivino-actions {
  align-items: center;
  display: inline-flex;
}

.adivino-brand {
  color: #fff;
  gap: 12px;
  text-decoration: none;
}

.adivino-logo {
  align-items: center;
  background: radial-gradient(circle at 35% 28%, #fff7bf, var(--oracle-gold) 52%, #9d6718);
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(248, 201, 90, 0.42);
  color: #19100a;
  display: inline-flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.adivino-brand small {
  color: var(--oracle-muted);
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adivino-brand strong {
  display: block;
  font-size: 25px;
  line-height: 1;
}

.adivino-actions {
  gap: 10px;
}

.adivino-help-button {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 900;
}

.adivino-home,
.adivino-icon-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  color: #fff;
  min-height: 44px;
  text-decoration: none;
}

.adivino-home {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  padding: 0 16px;
}

.adivino-icon-button {
  font-size: 22px;
  width: 48px;
}

.adivino-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 0.82fr) minmax(460px, 1.36fr);
  margin: 0 auto;
  max-width: 1180px;
  min-height: calc(100vh - 130px);
  padding: 4px clamp(16px, 3vw, 34px) 30px;
}

.oracle-stage,
.oracle-console,
.settings-panel {
  background: var(--oracle-panel);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  box-shadow: var(--oracle-shadow);
  overflow: hidden;
  position: relative;
}

.oracle-stage {
  align-content: end;
  display: grid;
  min-height: 690px;
  padding: clamp(18px, 3vw, 32px);
}

.oracle-stage::before,
.oracle-console::before,
.settings-panel::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 30% 70%, rgba(248, 201, 90, 0.09));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.crystal-wrap {
  display: grid;
  inset: 0 0 25%;
  place-items: center;
  position: absolute;
}

.crystal-ball {
  animation: floatBall 4.2s ease-in-out infinite;
  border-radius: 50%;
  height: min(58vw, 360px);
  max-height: 360px;
  max-width: 360px;
  position: relative;
  width: min(58vw, 360px);
}

.crystal-ball::before {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.94), transparent 10%),
    radial-gradient(circle at 50% 54%, rgba(120, 200, 255, 0.48), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(248, 201, 90, 0.3), transparent 63%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04));
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  box-shadow: inset 0 -26px 46px rgba(0, 0, 0, 0.28), 0 0 82px rgba(248, 201, 90, 0.34);
  content: "";
  inset: 0;
  position: absolute;
}

.crystal-core {
  animation: pulseCore 2.6s ease-in-out infinite;
  background: radial-gradient(circle, rgba(248, 201, 90, 0.58), transparent 68%);
  border-radius: 50%;
  inset: 24%;
  position: absolute;
}

.crystal-ring {
  border: 1px solid rgba(248, 201, 90, 0.48);
  border-radius: 50%;
  inset: 13%;
  position: absolute;
}

.crystal-ring.r1 {
  animation: spinRing 8s linear infinite;
  transform: rotateX(72deg) rotateZ(16deg);
}

.crystal-ring.r2 {
  animation: spinRing 10s linear infinite reverse;
  inset: 25%;
  transform: rotateX(62deg) rotateZ(-32deg);
}

.oracle-copy,
.reading-status {
  position: relative;
  z-index: 1;
}

.age-badge {
  background: rgba(255, 109, 122, 0.14);
  border: 1px solid rgba(255, 109, 122, 0.42);
  border-radius: 999px;
  color: #ffd7dc;
  display: inline-flex;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  margin-top: 12px;
  padding: 8px 11px;
  text-transform: uppercase;
}

.oracle-eyebrow {
  color: var(--oracle-gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.oracle-copy h1 {
  font-size: clamp(46px, 4.8vw, 76px);
  line-height: 0.88;
  margin: 10px 0 16px;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.oracle-copy p:not(.oracle-eyebrow) {
  color: var(--oracle-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0;
}

.reading-status {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  gap: 10px;
  margin-top: 20px;
  min-height: 52px;
  padding: 0 14px;
}

.reading-status span {
  animation: pulseLamp 1.6s ease-in-out infinite;
  background: var(--oracle-gold);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--oracle-gold);
  height: 10px;
  width: 10px;
}

.oracle-console {
  display: grid;
  gap: 18px;
  grid-template-rows: auto minmax(330px, 1fr) auto minmax(190px, auto);
  padding: clamp(16px, 3vw, 24px);
}

.console-topline {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.console-topline h2,
.settings-title h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  margin: 8px 0 0;
}

.secret-lamp {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--oracle-line);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  gap: 8px;
  padding: 9px 12px;
}

.secret-lamp span {
  background: #72ef9b;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(114, 239, 155, 0.7);
  height: 10px;
  width: 10px;
}

.secret-lamp.active span {
  animation: pulseLamp 0.8s ease-in-out infinite;
  background: var(--oracle-red);
  box-shadow: 0 0 18px var(--oracle-red);
}

.secret-lamp b {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  text-transform: uppercase;
}

.question-field {
  background:
    linear-gradient(90deg, rgba(248, 201, 90, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(248, 201, 90, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    rgba(6, 5, 10, 0.78);
  border: 1px solid rgba(248, 201, 90, 0.28);
  border-radius: 8px;
  display: grid;
  min-height: 330px;
  overflow: hidden;
  position: relative;
}

.question-field span {
  color: rgba(255, 248, 220, 0.48);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  left: 18px;
  position: absolute;
  text-transform: uppercase;
  top: 16px;
  z-index: 1;
}

.question-field textarea {
  background: transparent;
  border: 0;
  color: #fff7d2;
  font-size: clamp(28px, 4.3vw, 52px);
  font-weight: 700;
  height: 100%;
  line-height: 1.18;
  outline: 0;
  padding: 56px 18px 22px;
  resize: none;
  text-shadow: 0 0 22px rgba(248, 201, 90, 0.16);
  width: 100%;
}

.fake-cursor {
  animation: blinkCursor 0.9s steps(2, start) infinite;
  background: var(--oracle-gold);
  bottom: 21px;
  box-shadow: 0 0 14px var(--oracle-gold);
  height: 42px;
  left: 18px;
  opacity: 0;
  position: absolute;
  width: 3px;
}

.question-field:focus-within .fake-cursor {
  opacity: 1;
}

.console-actions {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.42fr);
}

.adivino-primary,
.adivino-secondary {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  min-height: 58px;
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.adivino-primary {
  background: linear-gradient(180deg, #fff1a4, var(--oracle-gold) 58%, var(--oracle-gold-2));
  box-shadow: 0 8px 0 #8c611e, 0 0 28px rgba(248, 201, 90, 0.2);
  color: #1a1208;
}

.adivino-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--oracle-line);
  color: #fff;
}

.adivino-primary:hover,
.adivino-secondary:hover,
.adivino-home:hover,
.adivino-icon-button:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.adivino-primary:disabled {
  cursor: wait;
  opacity: 0.6;
  transform: none;
}

.reveal-panel {
  align-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 201, 90, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.08);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  display: grid;
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  place-items: center;
  position: relative;
  text-align: center;
}

.reveal-orbit {
  animation: spinRing 9s linear infinite;
  border: 1px solid rgba(248, 201, 90, 0.35);
  border-radius: 50%;
  height: 220px;
  position: absolute;
  transform: rotateX(70deg);
  width: 220px;
}

.reveal-panel p,
.reveal-panel strong {
  position: relative;
  z-index: 1;
}

.reveal-panel p {
  color: var(--oracle-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}

.reveal-panel strong {
  animation: revealScale 0.36s ease both;
  color: #fff4b8;
  display: block;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1;
  margin-top: 12px;
  overflow-wrap: anywhere;
  text-shadow: 0 0 36px rgba(248, 201, 90, 0.48);
}

.reveal-panel small {
  color: rgba(255, 248, 220, 0.74);
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 800;
  line-height: 1.42;
  margin-top: 12px;
  max-width: 620px;
  position: relative;
  z-index: 1;
}

.question-field.secret-pulse::after {
  animation: secretPulse 0.42s ease both;
  border: 1px solid rgba(248, 201, 90, 0.42);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.adivino-help-overlay {
  align-items: center;
  background: rgba(2, 2, 6, 0.74);
  backdrop-filter: blur(12px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 20;
}

.adivino-help-overlay[hidden] {
  display: none;
}

.adivino-help-card {
  animation: revealScale 0.22s ease both;
  background:
    radial-gradient(circle at 82% 12%, rgba(248, 201, 90, 0.18), transparent 38%),
    rgba(17, 14, 23, 0.97);
  border: 1px solid rgba(248, 201, 90, 0.28);
  border-radius: 8px;
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.62);
  max-width: 560px;
  padding: clamp(22px, 4vw, 34px);
  position: relative;
  width: min(100%, 560px);
}

.adivino-help-card h2 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 0.95;
  margin: 8px 0 18px;
}

.adivino-help-card ol {
  color: rgba(255, 248, 220, 0.84);
  display: grid;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 800;
  gap: 12px;
  line-height: 1.42;
  margin: 0;
  padding-left: 22px;
}

.help-lore {
  color: rgba(255, 248, 220, 0.78);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.42;
  margin: 0 0 18px;
}

.adivino-help-card b,
.adivino-help-card code {
  color: #fff4b8;
}

.help-example {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  color: rgba(255, 248, 220, 0.78);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  margin: 18px 0 0;
  padding: 14px;
}

.adivino-help-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--oracle-line);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 26px;
  height: 42px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
}

.settings-panel {
  align-self: start;
  display: grid;
  gap: 18px;
  padding: clamp(16px, 3vw, 22px);
}

.settings-grid {
  display: grid;
  gap: 12px;
}

.settings-grid label {
  display: grid;
  gap: 7px;
}

.settings-grid span,
.switch-row span,
.performance-card span {
  color: var(--oracle-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-grid select,
.settings-grid input[type="range"] {
  accent-color: var(--oracle-gold);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  color: #fff;
  min-height: 42px;
  padding: 0 12px;
}

.settings-grid option {
  background: #15111d;
  color: #fff;
}

.settings-switches {
  display: grid;
  gap: 10px;
}

.switch-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--oracle-line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
}

.switch-row input {
  accent-color: var(--oracle-gold);
  height: 18px;
  width: 18px;
}

.performance-card {
  background: linear-gradient(145deg, rgba(248, 201, 90, 0.16), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(248, 201, 90, 0.28);
  border-radius: 8px;
  padding: 16px;
}

.performance-card strong {
  color: #fff5b8;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  margin-top: 7px;
}

.adivino-page[data-theme="azul"] {
  --oracle-gold: #78c8ff;
  --oracle-gold-2: #287dc6;
  --oracle-red: #b68cff;
}

.adivino-page[data-theme="rojo"] {
  --oracle-gold: #ff9f6e;
  --oracle-gold-2: #b9502c;
  --oracle-red: #ffdf70;
}

.adivino-page.revealing .crystal-ball,
.adivino-page.revealing .reveal-panel {
  animation: suspenseShake 0.8s ease-in-out infinite;
}

.adivino-page.revealed .crystal-core {
  animation: finalGlow 0.9s ease both;
}

@keyframes driftOne {
  to { transform: translate(70px, 42px) scale(1.08); }
}

@keyframes driftTwo {
  to { transform: translate(-80px, -38px) scale(1.06); }
}

@keyframes floatBall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes pulseCore {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes spinRing {
  to { rotate: 360deg; }
}

@keyframes pulseLamp {
  0%, 100% { transform: scale(0.8); }
  50% { transform: scale(1.18); }
}

@keyframes blinkCursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes revealScale {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes suspenseShake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-1px); }
  70% { transform: translateX(1px); }
}

@keyframes finalGlow {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.75); transform: scale(1.18); }
}

@keyframes secretPulse {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.018); }
}

@media (max-width: 1120px) {
  .adivino-layout {
    grid-template-columns: 1fr;
  }

  .oracle-stage {
    min-height: 520px;
  }

  .settings-panel {
    align-self: stretch;
  }

  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .adivino-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .adivino-actions {
    display: grid;
    grid-template-columns: 48px 48px 1fr;
  }

  .adivino-home {
    justify-content: center;
  }

  .oracle-stage {
    min-height: 440px;
  }

  .console-topline,
  .console-actions {
    grid-template-columns: 1fr;
  }

  .console-topline {
    display: grid;
  }

  .question-field {
    min-height: 280px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}