/* ==========================================================================
   The Fogus Oracle: the King's magic 8-ball.
   Everything lives inside .chamber-body; the <dialog> itself is never transformed.
   ========================================================================== */

.chamber-oracle { width: min(800px, calc(100vw - 24px)); }

.chamber-oracle .chamber-body {
  --pad: clamp(18px, 4vw, 44px);
  padding: clamp(16px, 2.6vw, 28px) var(--pad) var(--pad);
  overflow-x: hidden;
  isolation: isolate;
}

.oracle-kicker,
.chamber-oracle .chamber-title,
.chamber-oracle .chamber-sub,
.oracle-ask,
.oracle-rites,
.oracle-scroll { position: relative; z-index: 1; }

.oracle-kicker {
  margin: 0;
  color: var(--gold-2);
  font: 700 .7rem/1.4 var(--font-head);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255, 176, 56, .6);
}
.chamber-oracle .chamber-title { margin-top: .05em; }
.chamber-oracle .chamber-sub {
  margin-bottom: .2em;
  max-width: 30em;
  color: var(--text);
  text-shadow: 0 1px 2px #000, 0 0 12px #000;
}

/* --------------------------------------------------------------------------
   Stage: sky (rays, halo), floating orb, pedestal
   -------------------------------------------------------------------------- */
.oracle-stage {
  --orb: min(340px, 74vw, 46dvh);
  --lift: calc(var(--orb) * .08);
  --sky-top: 60vh;
  --cy: calc(var(--sky-top) + var(--lift) + var(--orb) / 2);
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--lift);
  user-select: none;
  -webkit-user-select: none;
}

/* The sky spans the chamber's full width and clips its own rays, so nothing scrolls. */
.oracle-sky {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--sky-top));
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  bottom: -10rem;
  overflow: hidden;
  pointer-events: none;
}
.oracle-sun,
.oracle-rays,
.oracle-halo {
  position: absolute;
  left: 50%;
  top: var(--cy);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.oracle-sun {
  width: calc(var(--orb) * 2.7);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 140, .5), rgba(255, 176, 64, .24) 32%, rgba(255, 140, 30, .08) 62%, transparent);
  transition: opacity 1s ease, scale 1.4s var(--ease-divine);
}
.oracle-rays {
  width: calc(var(--orb) * 3.6);
  opacity: .85;
  transition: rotate 2.4s var(--ease-divine), opacity 1s ease;
  -webkit-mask: radial-gradient(closest-side, #000 16%, rgba(0, 0, 0, .55) 42%, transparent 100%);
  mask: radial-gradient(closest-side, #000 16%, rgba(0, 0, 0, .55) 42%, transparent 100%);
}
.oracle-rays span { position: absolute; inset: 0; border-radius: 50%; }
.rays-a {
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0) 0deg, rgba(255, 226, 150, .38) 2.6deg, rgba(255, 226, 150, 0) 5.2deg, transparent 15deg);
  animation: oracle-spin 110s linear infinite;
}
.rays-b {
  background: repeating-conic-gradient(from 4deg, transparent 0deg, rgba(255, 196, 100, .2) 1.3deg, transparent 2.6deg, transparent 8deg);
  animation: oracle-spin 170s linear infinite reverse;
}
.oracle-halo {
  width: calc(var(--orb) * 1.44);
  opacity: .8;
  -webkit-mask: linear-gradient(180deg, transparent 4%, #000 26%);
  mask: linear-gradient(180deg, transparent 4%, #000 26%);
}
.halo-disc {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: oracle-spin 200s linear infinite;
}
.halo-line { fill: none; stroke: var(--gold-2); stroke-width: 1.4; opacity: .7; }
.halo-line-thin { stroke-width: .6; opacity: .5; }
.halo-ticks { fill: none; stroke: var(--gold-1); stroke-width: 6; stroke-dasharray: 1 7.8; opacity: .55; }
.halo-script {
  fill: var(--gold-1);
  font: 700 14px var(--font-head);
  letter-spacing: 2px;
  opacity: .85;
}
@keyframes oracle-spin { to { rotate: 360deg; } }

/* Golden light rising from the cradle to the orb, and embers drifting up around it. */
.oracle-beam {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--lift) + var(--orb) * .7);
  width: calc(var(--orb) * .62);
  height: calc(var(--orb) * .36);
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 72% at 50% 100%, rgba(255, 224, 150, .75), rgba(255, 170, 60, .28) 45%, transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: oracle-beam 6s ease-in-out infinite;
}
@keyframes oracle-beam { 50% { opacity: .65; scale: .92 1; } }

.oracle-sparks {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--lift) + var(--orb) * 1.02);
  width: calc(var(--orb) * 1.1);
  height: 0;
  translate: -50% 0;
  pointer-events: none;
}
.oracle-sparks span {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff1c4;
  box-shadow: 0 0 6px 2px rgba(255, 180, 60, .85);
  opacity: 0;
  animation: oracle-spark var(--t) ease-out var(--d) infinite;
}
@keyframes oracle-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--orb) * -.75)) scale(.3); }
}

.oracle-float {
  position: relative;
  z-index: 2;
  width: var(--orb);
  aspect-ratio: 1;
  animation: oracle-float 6s ease-in-out infinite;
}
@keyframes oracle-float { 50% { translate: 0 calc(var(--orb) * -.028); } }

/* --------------------------------------------------------------------------
   The orb
   -------------------------------------------------------------------------- */
.oracle-orb {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.oracle-orb.is-grabbed { cursor: grabbing; }
.oracle-orb:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 10px; }
.oracle-orb span { display: block; }
.orb-drag,
.orb-shaker { position: absolute; inset: 0; border-radius: 50%; }

.orb-aura {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 96, .7), rgba(255, 160, 50, .32) 50%, rgba(255, 130, 30, .1) 74%, transparent);
  animation: orb-aura 5s ease-in-out infinite;
  transition: opacity .8s ease;
}
@keyframes orb-aura { 50% { opacity: .72; scale: .95; } }

.orb-shell {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 24%, #77706a 0%, #34302b 8%, #151311 24%, #070707 45%, #000 68%);
  box-shadow:
    inset calc(var(--orb) * -.05) calc(var(--orb) * -.07) calc(var(--orb) * .14) rgba(0, 0, 0, .92),
    0 0 0 1px rgba(255, 214, 140, .2),
    0 calc(var(--orb) * .06) calc(var(--orb) * .12) rgba(0, 0, 0, .8);
}
/* Golden light bouncing up from the cradle onto the underside. */
.orb-bounce {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 58% 26% at 50% 100%, rgba(255, 196, 90, .55), rgba(255, 160, 50, .16) 55%, transparent 80%),
    radial-gradient(ellipse 40% 50% at 92% 62%, rgba(255, 190, 90, .14), transparent 70%);
  mix-blend-mode: screen;
}
/* Rim light from the sun behind. */
.orb-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 85%, rgba(255, 208, 128, .4) 95%, rgba(255, 244, 210, .95) 99.3%, transparent 100%);
  -webkit-mask: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, .35) 30%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .7) 85%, #000 100%);
  mask: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, .35) 30%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .7) 85%, #000 100%);
  mix-blend-mode: screen;
}

/* The window: a gold-ringed porthole into the oracle's depths. */
.orb-bezel {
  position: absolute;
  left: 15%;
  top: 15%;
  width: 70%;
  height: 70%;
  padding: 3%;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #fff0b8, #c8902a 10%, #5c3a0c 22%, #f2cf74 36%, #8a5a14 50%, #fff4cc 60%, #b07a22 74%, #4a2c07 87%, #fff0b8);
  box-shadow:
    0 0 0 calc(var(--orb) * .007) #000,
    0 0 calc(var(--orb) * .06) rgba(255, 190, 70, .6),
    inset 0 0 0 1px rgba(255, 244, 210, .55),
    inset 0 0 calc(var(--orb) * .012) rgba(0, 0, 0, .6);
}
.orb-bezel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(42, 23, 3, .7) 0 .9deg, transparent .9deg 7.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93%, #000 98.5%, transparent 99.5%);
  mask: radial-gradient(closest-side, transparent 92%, #000 93%, #000 98.5%, transparent 99.5%);
}
.orb-window {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: #02020c;
  perspective: calc(var(--orb) * 1.4);
  isolation: isolate;
}
.orb-window > span { position: absolute; inset: 0; }

/* The murky liquid and the die. */
.orb-liquid {
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #2c3cbc 0%, #17207c 24%, #0a0f46 50%, #04051c 76%, #010109 100%);
}
.murk {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  animation: oracle-spin 28s linear infinite paused;
}
.murk-a {
  background:
    radial-gradient(circle at 30% 36%, rgba(3, 4, 26, .9), transparent 22%),
    radial-gradient(circle at 70% 64%, rgba(58, 24, 130, .55), transparent 24%),
    radial-gradient(circle at 64% 28%, rgba(2, 3, 20, .8), transparent 20%),
    radial-gradient(circle at 36% 72%, rgba(10, 30, 120, .5), transparent 22%);
}
.murk-b {
  background:
    radial-gradient(circle at 60% 40%, rgba(70, 40, 160, .35), transparent 20%),
    radial-gradient(circle at 30% 60%, rgba(2, 2, 16, .75), transparent 22%),
    radial-gradient(circle at 75% 75%, rgba(1, 2, 14, .8), transparent 20%);
  animation-duration: 41s;
  animation-direction: reverse;
}
.die-halo {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(90, 140, 255, .6), rgba(40, 70, 220, .22) 50%, transparent);
  opacity: 0;
  transition: opacity .5s ease;
}

.orb-window > .orb-die {
  inset: auto;
  left: 10%;
  top: 4.6%;
  width: 80%;
  aspect-ratio: 1 / .866;
  container-type: inline-size;
  opacity: 0;
  transform: translateY(18%) translateZ(calc(var(--orb) * -.8)) rotateX(34deg) rotateZ(-18deg) scale(.7);
  filter: blur(7px) brightness(.3);
  transition: transform .6s ease-in, filter .6s ease-in, opacity .5s ease-in;
}
.die-bob { position: absolute; inset: 0; animation: die-wobble 5.6s ease-in-out infinite paused; }
@keyframes die-wobble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(1.6%, -2.2%) rotate(1.8deg); }
  50% { transform: translate(-1%, 1.6%) rotate(-1.2deg); }
  75% { transform: translate(-1.8%, -1.2%) rotate(-2.2deg); }
}
.die-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--orb) * .01) rgba(140, 180, 255, .95)) drop-shadow(0 0 calc(var(--orb) * .04) rgba(60, 100, 255, .75));
}
.die-face { fill: url(#orcDieFace); stroke: #c6d8ff; stroke-width: 1; stroke-linejoin: round; }
.die-glint { fill: url(#orcDieGlow); }
.die-side { fill: url(#orcDieSide); stroke: rgba(130, 160, 255, .3); stroke-width: .5; stroke-linejoin: round; opacity: .8; }
.die-bevel { fill: none; stroke: rgba(220, 232, 255, .25); stroke-width: .6; stroke-linejoin: round; }

.die-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  filter: drop-shadow(0 .05em 0 rgba(6, 10, 52, .95)) drop-shadow(0 0 .04em rgba(6, 10, 52, .9)) drop-shadow(0 0 .3em rgba(255, 200, 90, .55));
}
.die-line {
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 900;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fffdf2 10%, #ffe7a0 42%, #f2c25a 68%, #fff4cc 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.murk-front {
  background:
    radial-gradient(circle at 18% 84%, rgba(2, 3, 20, .85), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(2, 3, 20, .7), transparent 26%),
    radial-gradient(circle at 50% 104%, rgba(1, 1, 10, .9), transparent 34%);
  opacity: 0;
  transition: opacity .8s ease;
}

.orb-bubbles span {
  position: absolute;
  left: var(--x);
  bottom: -6%;
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(220, 232, 255, .8), rgba(120, 150, 255, .2) 60%, transparent 72%);
  opacity: 0;
  animation: bubble-rise var(--t) linear var(--d) infinite paused;
}
@keyframes bubble-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .75; }
  85% { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--orb) * -.66)); }
}

/* The King, his eyes ablaze. */
.orb-window > .orb-king {
  transform-origin: 50% 64%;
  transition: transform 1s var(--ease-divine), opacity .8s ease .1s, filter 1s ease;
  filter: brightness(1);
}
.orb-king img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.orb-eye {
  position: absolute;
  width: 24%;
  height: 13%;
  border-radius: 50%;
  translate: -50% -50%;
  rotate: 20deg;
  background: radial-gradient(closest-side, #fff 0%, #fff3c4 16%, rgba(255, 206, 92, .8) 38%, rgba(255, 160, 40, .28) 66%, transparent);
  mix-blend-mode: screen;
  animation: eye-pulse 2.6s ease-in-out infinite;
}
.orb-eye::after {
  content: '';
  position: absolute;
  left: -32%;
  right: -32%;
  top: 45%;
  height: 10%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .9) 45%, #fff 50%, rgba(255, 240, 200, .9) 55%, transparent);
}
.orb-eye + .orb-eye { animation-delay: -.25s; }
@keyframes eye-pulse {
  0%, 100% { opacity: .5; scale: .82; }
  50% { opacity: 1; scale: 1.12; }
}

/* Blinding gold that floods the window as the King answers; it also builds while shaking. */
.orb-blaze {
  background: radial-gradient(circle at 50% 42%, #fffdf0 0%, #fff0b8 22%, rgba(255, 206, 96, .92) 48%, rgba(255, 150, 40, .6) 76%, rgba(140, 70, 0, .4));
  mix-blend-mode: screen;
  opacity: calc(var(--stir, 0) * .4);
  transition: opacity .9s ease;
}
.window-shade {
  border-radius: 50%;
  box-shadow:
    inset 0 0 calc(var(--orb) * .05) calc(var(--orb) * .01) rgba(0, 0, 0, .85),
    inset 0 calc(var(--orb) * .035) calc(var(--orb) * .05) rgba(0, 0, 0, .7);
}
.window-glint {
  background:
    radial-gradient(ellipse 34% 16% at 34% 16%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 115%, rgba(255, 210, 120, .14), transparent 70%);
}

/* Glass highlights over everything. */
.orb-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 55% 57%, transparent 86%, rgba(255, 255, 255, .16) 95%, transparent 100%);
}
.orb-gloss::before {
  content: '';
  position: absolute;
  left: 9%;
  top: 4%;
  width: 52%;
  height: 30%;
  border-radius: 50%;
  rotate: -32deg;
  background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .1) 46%, transparent 70%);
}
.orb-gloss::after {
  content: '';
  position: absolute;
  left: 21%;
  top: 11%;
  width: 14%;
  height: 7%;
  border-radius: 50%;
  rotate: -36deg;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .7) 35%, transparent);
}

.orb-arcs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  height: 170%;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  filter: drop-shadow(0 0 2px #fff2c0) drop-shadow(0 0 6px rgba(255, 176, 48, .95));
}
.orb-arcs polyline {
  fill: none;
  stroke: #fff6d8;
  stroke-width: .8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   Pedestal
   -------------------------------------------------------------------------- */
.oracle-pedestal {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--orb) * .94);
  height: auto;
  margin-top: calc(var(--orb) * .02);
  overflow: visible;
  pointer-events: none;
}
.ped-stone { fill: url(#orcStone); filter: url(#orcGrain); }
.ped-stone-lid { fill: url(#orcStoneLid); filter: url(#orcGrain); }
.ped-gold { fill: url(#orcGold); }
.ped-gold-lid { fill: url(#orcGoldLid); stroke: rgba(255, 244, 204, .7); stroke-width: .4; }
.ped-rim { fill: url(#orcGoldLid); stroke: #fff4cc; stroke-width: .5; }
.ped-dish { fill: url(#orcDish); }
.ped-glow { fill: #ffe7a0; filter: url(#orcBlur); opacity: .9; mix-blend-mode: screen; }
.ped-carve path { stroke: rgba(0, 0, 0, .5); stroke-width: .9; }
.ped-engrave { fill: none; stroke: rgba(42, 23, 3, .85); stroke-width: 1.1; stroke-dasharray: 3 2.2; }
.ped-engrave-hi { stroke: rgba(255, 240, 200, .4); stroke-width: .5; }
.ped-plaque { fill: #0f0904; stroke: url(#orcGold); stroke-width: 1.1; }
.ped-text {
  font: 700 8px var(--font-head);
  letter-spacing: 2.4px;
  fill: url(#orcGoldV);
}
.ped-text-shadow { fill: #000; opacity: .8; }
.ped-spike { fill: url(#orcGold); stroke: rgba(42, 23, 3, .6); stroke-width: .35; }
.ped-spike-back { opacity: .85; }
.ped-pearl { fill: #fff6dc; }
.ped-jewel { fill: #c0182c; stroke: #2a1703; stroke-width: .3; }

/* --------------------------------------------------------------------------
   States: consulting (shaking, flaring), revealed, legendary
   -------------------------------------------------------------------------- */
.is-consulting .orb-shaker { animation: orb-quake 1.5s linear both; }
.is-consulting .orb-arcs { opacity: 1; }
.is-consulting .orb-aura { animation: orb-surge 1.5s ease-in both; }
.is-consulting .orb-eye { animation: eye-flare 1.5s ease-in both; }
.is-consulting .oracle-sun { scale: 1.25; }
.is-consulting .oracle-rays { opacity: 1; }
.is-consulting .oracle-beam { animation: oracle-beam-surge 1.5s ease-in both; }
.is-flaring .orb-blaze { opacity: 1; transition: opacity 1.2s cubic-bezier(.6, 0, .9, .4) .25s; }
.is-consulting .murk { animation-play-state: running; }

@keyframes orb-quake {
  0% { transform: none; }
  6% { transform: translate(-1px, 1px) rotate(-1deg); }
  12% { transform: translate(2px, -1px) rotate(1deg); }
  18% { transform: translate(-3px, 2px) rotate(-2deg); }
  24% { transform: translate(4px, -2px) rotate(2deg); }
  30% { transform: translate(-5px, 1px) rotate(-3deg); }
  36% { transform: translate(6px, 3px) rotate(3deg); }
  42% { transform: translate(-8px, -3px) rotate(-4deg); }
  48% { transform: translate(9px, 2px) rotate(4deg); }
  54% { transform: translate(-10px, 4px) rotate(-5deg); }
  60% { transform: translate(11px, -4px) rotate(5deg); }
  66% { transform: translate(-12px, 2px) rotate(-6deg); }
  72% { transform: translate(13px, 5px) rotate(6deg); }
  78% { transform: translate(-14px, -5px) rotate(-7deg); }
  84% { transform: translate(14px, 3px) rotate(7deg); }
  90% { transform: translate(-11px, -2px) rotate(-5deg); }
  95% { transform: translate(5px, 1px) rotate(2deg) scale(1.03); }
  100% { transform: scale(1.04); }
}
@keyframes orb-surge { to { opacity: 1; scale: 1.25; } }
@keyframes eye-flare {
  from { opacity: .8; scale: 1; }
  to { opacity: 1; scale: 3.6; }
}
@keyframes oracle-beam-surge { to { opacity: 1; scale: 1.25 1.15; } }

/* Revealed: the King tips back and sinks; the die rises out of the murk. */
.is-revealed .orb-window > .orb-king {
  opacity: 0;
  transform: translateY(16%) translateZ(calc(var(--orb) * -.6)) rotateX(76deg) rotateZ(-6deg) scale(.8);
  filter: brightness(.25) blur(2px);
  transition: transform .95s cubic-bezier(.55, 0, .7, .3), opacity .7s ease .25s, filter .8s ease;
}
.is-revealed .orb-window > .orb-die {
  opacity: 1;
  transform: none;
  filter: none;
  transition: transform 1.3s var(--ease-divine) .35s, filter 1.1s ease-out .35s, opacity .7s ease-out .35s;
}
.is-revealed .die-bob,
.is-revealed .murk,
.is-revealed .orb-bubbles span { animation-play-state: running; }
.is-revealed .die-halo { opacity: 1; transition: opacity 1.2s ease .5s; }
.is-revealed .murk-front { opacity: .7; }
.is-revealed .orb-eye { animation-play-state: paused; }

.is-legendary .die-face { fill: url(#orcDieGold); stroke: #fffbe6; }
.is-legendary .die-side { fill: #5c3a0c; stroke: rgba(255, 220, 140, .4); }
.is-legendary .die-shape { filter: drop-shadow(0 0 calc(var(--orb) * .012) #fff1c4) drop-shadow(0 0 calc(var(--orb) * .05) rgba(255, 176, 48, .95)); }
.is-legendary .die-halo { background: radial-gradient(closest-side, rgba(255, 210, 110, .85), rgba(255, 150, 40, .3) 50%, transparent); }
.is-legendary .die-text { filter: drop-shadow(0 .04em 0 rgba(255, 244, 210, .7)); }
.is-legendary .die-line { background: none; color: #2a1703; }
.is-legendary .orb-liquid { background: radial-gradient(circle at 50% 50%, #6b4a16 0%, #3a2306 30%, #140c05 62%, #050302 100%); }
.is-legendary .oracle-rays { opacity: 1; }
.is-legendary .oracle-sun { scale: 1.35; }
.is-legendary .orb-aura { animation-duration: 1.6s; }

/* --------------------------------------------------------------------------
   Question form, rites, voice toggle
   -------------------------------------------------------------------------- */
.oracle-ask {
  display: flex;
  gap: .6rem;
  max-width: 580px;
  margin: .5rem auto 0;
}
.oracle-input {
  flex: 1;
  min-width: 0;
  padding: .8em 1.1em;
  border: 1px solid transparent;
  border-radius: 3px;
  background: linear-gradient(#0d0703, #050302) padding-box, var(--gold-frame) border-box;
  box-shadow: 0 0 0 1px #000, inset 0 2px 14px rgba(0, 0, 0, .85);
  color: var(--gold-hi);
  font: italic 600 1.2rem/1.2 var(--font-body);
  transition: box-shadow .3s;
}
.oracle-input::placeholder { color: var(--text-dim); opacity: .85; }
.oracle-input:focus { outline: none; box-shadow: 0 0 0 1px #000, inset 0 2px 14px rgba(0, 0, 0, .85), var(--glow-strong); }
.oracle-input:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.oracle-consult { flex: none; }

.oracle-rites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem 1.6rem;
  margin: .8rem auto 0;
}
.oracle-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 1rem;
  font-style: italic;
}
.oracle-voice {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: .3em .4em;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: 600 .72rem/1.2 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s;
}
.oracle-voice[hidden] { display: none; }
.oracle-voice:hover { color: var(--gold-1); }
.oracle-voice-icon { display: inline-flex; }
.oracle-voice-icon svg { width: 1.5em; height: 1.5em; }
.oracle-voice-track {
  position: relative;
  width: 2.9em;
  height: 1.55em;
  border: 1px solid var(--gold-4);
  border-radius: 1em;
  background: #0d0703;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8);
  transition: background .3s, border-color .3s;
}
.oracle-voice-track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: .18em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  translate: 0 -50%;
  background: linear-gradient(#8a6a3a, #4a3416);
  transition: left .3s var(--ease-divine), background .3s, box-shadow .3s;
}
.oracle-voice[aria-pressed='true'] { color: var(--gold-1); }
.oracle-voice[aria-pressed='true'] .oracle-voice-track { border-color: var(--gold-2); background: linear-gradient(#6b440e, #3a2306); }
.oracle-voice[aria-pressed='true'] .oracle-voice-track::after {
  left: calc(100% - 1.28em);
  background: linear-gradient(#fff4cc, #e0ad45);
  box-shadow: 0 0 10px rgba(255, 196, 80, .8);
}

/* --------------------------------------------------------------------------
   The scroll of past prophecies
   -------------------------------------------------------------------------- */
.oracle-scroll {
  max-width: 540px;
  margin: 1.8rem auto .6rem;
  padding: 1.2rem clamp(1rem, 4vw, 1.8rem) 1.3rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 190, 80, .1), transparent 60%),
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 9%, transparent 91%, rgba(0, 0, 0, .45)),
    linear-gradient(#2a1b0c, #1a1007);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .7), 0 10px 30px rgba(0, 0, 0, .5);
  text-align: left;
}
.oracle-scroll::before,
.oracle-scroll::after {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff0b8, #c8902a 38%, #5c3a0c 70%, #e8bd59);
  box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, .7);
}
.oracle-scroll::before { top: -6px; }
.oracle-scroll::after { bottom: -6px; }
.oracle-scroll-title {
  margin: 0 0 .5rem;
  color: var(--gold-1);
  font: 700 .78rem/1.3 var(--font-head);
  letter-spacing: .3em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 176, 56, .5);
}
.oracle-scroll-title::before,
.oracle-scroll-title::after { content: ' ✦ '; color: var(--gold-3); }
.oracle-scroll-empty {
  margin: 0;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
}
.oracle-scroll-empty[hidden] { display: none; }
.oracle-scroll-list { margin: 0; padding: 0; list-style: none; }
.prophecy {
  padding: .5em 0;
  border-top: 1px solid rgba(176, 122, 34, .28);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.prophecy:first-child { border-top: 0; }
.prophecy-q { color: var(--text); font-style: italic; }
.prophecy-q.is-unspoken { color: var(--text-dim); }
.prophecy-arrow { margin: 0 .45em; color: var(--gold-3); }
.prophecy-a {
  color: var(--gold-1);
  font: 700 .82rem/1.3 var(--font-head);
  letter-spacing: .08em;
  text-shadow: 0 0 12px rgba(255, 176, 56, .45);
}
.prophecy.is-legendary .prophecy-a { color: var(--gold-hi); text-shadow: 0 0 10px rgba(255, 200, 80, .9), 0 0 24px rgba(255, 150, 40, .6); }
.prophecy.is-new { animation: prophecy-in .9s var(--ease-divine); }
@keyframes prophecy-in {
  from { opacity: 0; transform: translateY(-10px); background: rgba(255, 190, 80, .18); }
}

/* --------------------------------------------------------------------------
   Small screens and calm souls
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .oracle-ask { flex-direction: column; }
  .oracle-consult { width: 100%; }
  .oracle-rites { gap: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-rays span,
  .oracle-halo,
  .oracle-float,
  .oracle-beam,
  .oracle-sparks span,
  .orb-aura,
  .murk,
  .die-bob,
  .orb-bubbles span,
  .is-consulting .orb-shaker,
  .is-consulting .orb-aura,
  .is-consulting .oracle-beam { animation: none !important; }
  .oracle-rays { transition: opacity 1s ease; }
  .oracle-sparks { display: none; }
  .orb-eye { animation: none; opacity: .85; }
  .is-consulting .orb-eye { animation: none; opacity: 1; }
  /* A simple crossfade instead of the flip and the rise. */
  .orb-window > .orb-king,
  .is-revealed .orb-window > .orb-king { transform: none; filter: none; transition: opacity .6s ease; }
  .orb-window > .orb-die,
  .is-revealed .orb-window > .orb-die { transform: none; filter: none; transition: opacity .6s ease; }
  .is-revealed .orb-window > .orb-die { transition-delay: .2s; }
  .is-flaring .orb-blaze { transition: opacity .6s ease; }
}