.oracle-experience {
  --oracle-ink: #173f36;
  --oracle-muted: rgb(37 65 59 / 0.68);
  --oracle-red: #a84a35;
  --oracle-ease: cubic-bezier(0.22, 0.78, 0.24, 1);
  position: absolute;
  inset: 0;
  z-index: 18;
  overflow: hidden;
  isolation: isolate;
  color: var(--oracle-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  background: #e7efeb;
}

.oracle-experience[hidden] { display: none; }
.oracle-experience__camera,
.oracle-experience__interior,
.oracle-room,
.oracle-daily,
.oracle-ten { position: absolute; inset: 0; }

.oracle-experience__camera {
  z-index: -3;
  background: url("./scene.webp?v=20260722-entry-webp-v1") center / cover no-repeat;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.oracle-experience.is-entering .oracle-experience__camera {
  transform: translate3d(0, 10px, 0) scale(2.08);
  transition: transform 1600ms var(--oracle-ease);
}

.oracle-experience.is-switching .oracle-experience__camera,
.oracle-experience.is-interior .oracle-experience__camera { opacity: 0; transition: opacity 620ms ease 380ms; }

.oracle-experience__interior {
  inset: -1%;
  z-index: -2;
  overflow: hidden;
  opacity: 0;
  background: url("./oracle-assets/oracle-interior-master-v2-aligned.png") calc(50% + 12px) center / cover no-repeat;
  transform: translateZ(0) scale(1.001);
  will-change: opacity;
}

.oracle-experience.is-switching .oracle-experience__interior {
  opacity: 1;
  transition: opacity 160ms linear;
}
.oracle-experience.is-interior .oracle-experience__interior { opacity: 1; }

.oracle-experience__wave {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 61.5%, transparent 0 8%, rgb(220 239 233 / .16) 10%, transparent 13%),
    radial-gradient(circle at 50% 61.5%, transparent 0 18%, rgb(255 255 255 / .24) 20%, transparent 23%);
  transform: scale(.24);
  pointer-events: none;
}
.oracle-experience.is-switching .oracle-experience__wave:not(.is-ready) { animation: oracle-water-reveal 1600ms ease-out both; }
.oracle-experience__wave.is-ready {
  opacity: 1;
  background: none;
  transform: none;
}
.oracle-experience__wave canvas { display: block; width: 100%; height: 100%; }

.oracle-experience__motes i {
  position: absolute;
  left: calc(38% + var(--i, 0) * 5%);
  top: calc(58% + (var(--i, 0) % 3) * 5%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ebce7d;
  box-shadow: 0 0 7px rgb(235 206 125 / .7);
  opacity: 0;
}
.oracle-experience__motes i:nth-child(1) { --i: 0; }
.oracle-experience__motes i:nth-child(2) { --i: 1; }
.oracle-experience__motes i:nth-child(3) { --i: 2; }
.oracle-experience__motes i:nth-child(4) { --i: 3; }
.oracle-experience__motes i:nth-child(5) { --i: 4; }
.oracle-experience__motes i:nth-child(6) { --i: 5; }
.oracle-experience.is-interior .oracle-experience__motes i { animation: oracle-mote 7s ease-in-out calc(var(--i) * .7s) infinite; }

.oracle-room {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 720ms var(--oracle-ease), transform 900ms var(--oracle-ease);
}
.oracle-experience.is-interior .oracle-room { opacity: 1; transform: translateY(0); }
.oracle-experience.is-interior .oracle-room { pointer-events: auto; }

.oracle-back {
  position: absolute;
  top: 88px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--oracle-muted);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .15em;
}
.oracle-back span { font-size: 17px; transition: transform 320ms var(--oracle-ease); }
.oracle-back:hover span { transform: translateX(-4px); }

.oracle-room__heading {
  position: absolute;
  top: clamp(150px, 21vh, 218px);
  left: clamp(54px, 5.6vw, 104px);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-shadow: 0 2px 18px rgb(248 250 247 / .94);
}
.oracle-room__heading > span {
  padding: 8px 5px 7px;
  border: 1px solid rgb(168 74 53 / .38);
  color: var(--oracle-red);
  font: 13px/1.25 "STKaiti", "KaiTi", serif;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}
.oracle-room__heading h1 {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  margin: 0;
  font: 500 clamp(16px, 1.28vw, 20px)/1.36 "Songti SC", "STSong", serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
}
.oracle-room__heading h1:focus { outline: none; }

.oracle-room__actions {
  position: absolute;
  left: 50%;
  bottom: clamp(72px, 11vh, 118px);
  display: flex;
  width: min(820px, calc(100vw - 48px));
  align-items: stretch;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 22px rgb(40 65 59 / .11));
  transition: opacity 220ms ease, visibility 0s linear 0s;
}
.oracle-experience.is-daily-result .oracle-room__actions,
.oracle-experience.is-ten-open .oracle-room__actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.oracle-room__actions > i { width: 1px; margin: 17px 0; background: linear-gradient(transparent, rgb(35 66 59 / .3), transparent); }
.oracle-cloud-action {
  position: relative;
  display: grid;
  flex: 1 1 0;
  min-height: 96px;
  place-items: center;
  gap: 8px;
  padding: 14px 22px 18px;
  border: 0;
  background: transparent;
  color: var(--oracle-ink);
  cursor: pointer;
}
.oracle-cloud-action img { position: absolute; left: 50%; bottom: 0; width: 90%; max-width: 350px; transform: translateX(-50%) scaleX(.94); opacity: .68; transition: .6s var(--oracle-ease); }
.oracle-cloud-action strong,
.oracle-cloud-action small { position: relative; z-index: 1; }
.oracle-cloud-action strong { align-self: end; font: 600 clamp(21px, 1.8vw, 26px) "Songti SC", "STSong", serif; letter-spacing: .12em; }
.oracle-cloud-action small { align-self: start; color: var(--oracle-muted); font-size: 11px; white-space: nowrap; }
.oracle-cloud-action:hover img,
.oracle-cloud-action:focus-visible img { opacity: .95; transform: translateX(-50%) scaleX(1); filter: drop-shadow(0 0 12px rgb(207 178 102 / .45)); }
.oracle-room__status { position: absolute; left: 50%; bottom: 4.5vh; min-height: 18px; margin: 0; transform: translateX(-50%); color: var(--oracle-muted); font: 11px "Songti SC", serif; letter-spacing: .14em; white-space: nowrap; }
.oracle-experience.is-busy .oracle-cloud-action { pointer-events: none; opacity: .62; }

.oracle-daily,
.oracle-ten { z-index: 5; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 420ms ease, visibility 0s linear 420ms; }
.oracle-experience.is-daily-open,
.oracle-experience.is-ten-open { z-index: 100; }
.oracle-experience.is-daily-open .oracle-daily,
.oracle-experience.is-ten-open .oracle-ten { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.oracle-daily { overflow: hidden; background: #e8efeb; }
.oracle-daily video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 680ms var(--oracle-ease), transform 900ms var(--oracle-ease); }
.oracle-daily__result { position: absolute; inset: 0; display: grid; place-items: center; padding: 3vh 88px; opacity: 0; transform: translateY(16px) scale(.982); transition: opacity 720ms var(--oracle-ease), transform 900ms var(--oracle-ease); }
.oracle-experience.is-daily-result .oracle-daily { background: transparent; }
.oracle-experience.is-daily-result .oracle-daily video { opacity: 0; transform: scale(1.012); }
.oracle-experience.is-daily-result .oracle-daily__result { opacity: 1; transform: none; }
.oracle-daily__panel { position: relative; display: grid; justify-items: center; gap: 12px; }
.oracle-daily__card { --rank-ink: oklch(.29 .045 230); --rank-accent: oklch(.54 .09 228); --rank-paper: oklch(.96 .018 220); --rank-line: oklch(.72 .018 145 / .42); --rank-wash: none; --rank-filter: none; --rank-mark: "中"; position: relative; isolation: isolate; width: min(33.6vh, 362px, calc(100vw - 176px)); aspect-ratio: 864/1821; margin: 0; overflow: hidden; border-radius: 9px; background: var(--rank-paper); box-shadow: 0 24px 58px oklch(.29 .028 150 / .14), 0 0 0 1px var(--rank-line); transition: box-shadow 220ms cubic-bezier(.22,1,.36,1); }
.oracle-daily__card[data-rank-theme="upper"] { --rank-ink: oklch(.28 .052 166); --rank-accent: oklch(.48 .105 158); --rank-paper: oklch(.965 .025 145); --rank-wash: none; --rank-filter: none; --rank-mark: "上"; }
.oracle-daily__card[data-rank-theme="top"] { --rank-ink: oklch(.29 .048 74); --rank-accent: oklch(.49 .145 36); --rank-paper: oklch(.965 .028 88); --rank-wash: none; --rank-filter: none; --rank-mark: ""; }
.oracle-daily__card > img { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--rank-filter); transition: filter 220ms cubic-bezier(.22,1,.36,1); }
.oracle-daily__card::before { position: absolute; inset: 0; z-index: 1; content: ""; pointer-events: none; background: var(--rank-wash); box-shadow: inset 0 0 0 1px oklch(.98 .01 90 / .36), inset 0 0 42px oklch(.36 .045 190 / .08); }
.oracle-daily__card::after { position: absolute; z-index: 2; top: 8.5%; left: 50%; display: grid; width: clamp(54px, 8.2vh, 82px); aspect-ratio: 1; place-items: center; border: 1px solid var(--rank-line); border-radius: 50%; color: var(--rank-accent); content: var(--rank-mark); transform: translateX(-50%); box-shadow: 0 0 0 5px color-mix(in oklch, var(--rank-paper) 70%, transparent), 0 0 0 6px color-mix(in oklch, var(--rank-line) 54%, transparent); font: 500 clamp(22px, 3.3vh, 34px) "STKaiti", "KaiTi", serif; letter-spacing: .08em; }
.oracle-daily__card[data-rank-theme="top"]::after { display: none; }
.oracle-daily__card[data-rank-theme="middle"]::after,
.oracle-daily__card[data-rank-theme="upper"]::after { display: none; }
.oracle-daily__card figcaption { position: absolute; right: 7%; bottom: 5.8%; left: 7%; z-index: 3; display: grid; place-items: center; gap: 8px; padding: 6% 4% 4%; color: var(--rank-ink); font-family: "Songti SC", "STSong", serif; text-align: center; }
.oracle-daily__card figcaption::before { display: none; content: none; }
.oracle-daily__card figcaption small { display: none; }
.oracle-daily__card figcaption strong { font-size: clamp(18px, 2.45vh, 27px); font-weight: 500; letter-spacing: .22em; }
.oracle-daily__card figcaption i { width: 58%; height: 1px; background: linear-gradient(90deg, transparent, var(--rank-line), transparent); }
.oracle-daily__card figcaption p { margin: 0; font-size: clamp(10px, 1.25vh, 13px); letter-spacing: .14em; line-height: 1.7; }
.oracle-daily__card figcaption .oracle-daily__reading { max-width: 26em; color: var(--oracle-muted); font-size: clamp(8px, 1.02vh, 11px); letter-spacing: .06em; line-height: 1.55; }
.oracle-daily__guidance { display: flex; justify-content: center; gap: 14px; color: var(--rank-accent); font-size: clamp(8px, .96vh, 10px); letter-spacing: .12em; }
.oracle-daily__guidance span { display: inline-flex; gap: 5px; align-items: baseline; }
.oracle-daily__guidance b { color: var(--rank-ink); font-weight: 500; }
.oracle-overlay-close { position: absolute; top: 0; left: calc(100% + 12px); z-index: 7; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgb(49 75 68 / .46); background: rgb(248 244 231 / .92); color: var(--oracle-muted); cursor: pointer; touch-action: manipulation; font: 20px serif; }
.oracle-save { position: relative; display: grid; width: 206px; min-height: 58px; place-items: center; padding: 8px 28px 16px; border: 0; background: transparent; color: var(--oracle-ink); cursor: pointer; font: 12px "Songti SC", serif; letter-spacing: .2em; }
.oracle-save img { position: absolute; inset: auto 0 0; width: 100%; opacity: .72; }
.oracle-save span { position: relative; z-index: 1; }

.oracle-ten { display: grid; place-items: center; }
.oracle-ten__panel { position: relative; display: grid; width: min(760px, calc(100vw - 150px)); justify-items: center; gap: clamp(10px, 1.6vh, 18px); }
.oracle-ten__panel header { display: grid; place-items: center; gap: 4px; }
.oracle-ten__panel header span { color: var(--oracle-red); font: 11px "STKaiti", "KaiTi", serif; letter-spacing: .34em; }
.oracle-ten__panel h2 { margin: 0; font: 500 clamp(20px, 2.5vw, 30px) "Songti SC", "STSong", serif; letter-spacing: .24em; }
.oracle-ten__grid { display: grid; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(7px, 1.15vw, 13px); perspective: 1100px; }
.oracle-ten-card { position: relative; display: grid; grid-template-rows: auto minmax(30px, auto); gap: 5px; min-width: 0; opacity: 0; transform: translateY(14px) scale(.965); transition: opacity 420ms ease calc(var(--i) * 38ms), transform 680ms var(--oracle-ease) calc(var(--i) * 38ms); }
.oracle-experience.is-ten-appearing .oracle-ten-card { opacity: 1; transform: none; }
.oracle-ten-card__back,
.oracle-ten-card__front,
.oracle-ten-card__glow { position: absolute; inset: 0; }
.oracle-ten-card__shell { position: relative; aspect-ratio: 378/800; transform-style: preserve-3d; transition: transform 760ms var(--oracle-ease) calc(var(--i) * 34ms); }
.oracle-experience.is-ten-revealed .oracle-ten-card__shell { transform: rotateY(180deg); }
.oracle-ten-card__back,
.oracle-ten-card__front { display: grid; overflow: hidden; border-radius: 3%; backface-visibility: hidden; }
.oracle-ten-card__back img,
.oracle-ten-card__front > img { width: 100%; height: 100%; object-fit: cover; }
.oracle-ten-card__front { place-items: center; transform: rotateY(180deg); }
.oracle-ten-card__front > img { position: absolute; inset: 0; }
.oracle-ten-card__reward { position: absolute; inset: 15% 8% 24%; z-index: 2; display: grid; place-items: center; overflow: visible; pointer-events: none; }
.oracle-ten-card__reward[hidden] { display: none; }
.oracle-ten-card__reward img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 9px rgb(31 61 53 / .2)); transition: opacity 220ms var(--oracle-ease); }
.oracle-ten-card__reward img.is-preparing { opacity: 0; }
.oracle-ten-card[data-reward-kind="fragment"] .oracle-ten-card__reward img { width: 94%; }
.oracle-ten-card[data-reward-kind="fortuneSeal"] .oracle-ten-card__reward img { width: 92%; }
.oracle-ten-card[data-reward-kind="destinySeal"] .oracle-ten-card__reward img { width: 96%; }
.oracle-ten-card[data-reward-kind="artifact"][data-artifact-category="weapon"] .oracle-ten-card__reward img { transform: scale(2); }
.oracle-ten-card[data-reward-kind="artifact"][data-artifact-category="outfit"] .oracle-ten-card__reward img { transform: scale(1.25); }
.oracle-ten-card[data-reward-kind="artifact"][data-artifact-category="ornament"] .oracle-ten-card__reward img { transform: scale(1.65); }
.oracle-ten-card[data-reward-kind="artifact"][data-artifact-category="pet"] .oracle-ten-card__reward img { transform: scale(1.4); }
.oracle-ten-card__rare-effect { position: absolute; inset: 15% 8% 24%; z-index: 3; pointer-events: none; }
.oracle-ten-card__rare-effect[hidden] { display: none; }
.oracle-ten-card[data-reward-kind="fortuneSeal"] .oracle-ten-card__rare-effect::before { position: absolute; inset: 12% 18%; border-radius: 50%; background: radial-gradient(circle, oklch(88% .11 70 / .7), oklch(79% .1 55 / .18) 46%, transparent 74%); filter: blur(6px); opacity: .34; content: ""; }
.oracle-ten-card[data-reward-kind="fortuneSeal"] .oracle-ten-card__rare-effect::after { position: absolute; inset: 10% 12%; background: radial-gradient(circle at 24% 70%, oklch(85% .12 62 / .9) 0 1.3px, transparent 2.4px), radial-gradient(circle at 68% 30%, oklch(92% .08 84 / .92) 0 1.6px, transparent 2.8px), radial-gradient(circle at 79% 66%, oklch(83% .1 55 / .82) 0 1.1px, transparent 2.2px), radial-gradient(circle at 36% 26%, oklch(94% .06 91 / .88) 0 1px, transparent 2px); opacity: 0; content: ""; }
.oracle-experience.is-ten-revealed .oracle-ten-card[data-reward-kind="fortuneSeal"] .oracle-ten-card__rare-effect::before { animation: oracle-ten-fortune-aura 3.8s var(--oracle-ease) -.8s infinite; }
.oracle-experience.is-ten-revealed .oracle-ten-card[data-reward-kind="fortuneSeal"] .oracle-ten-card__rare-effect::after { animation: oracle-ten-fortune-motes 4.2s var(--oracle-ease) -1.15s infinite; }
.oracle-ten-card__artifact-particles { position: absolute; inset: 1% 16% 2%; mix-blend-mode: screen; transform: scale(1.16); transform-origin: center; }
.oracle-ten-card__artifact-particles > i { position: absolute; top: var(--y); left: var(--x); width: var(--size); height: var(--size); border-radius: 50%; background: oklch(94% .11 86 / .96); box-shadow: 0 0 3px oklch(95% .09 88 / .95), 0 0 8px oklch(86% .12 78 / .78), 0 0 14px oklch(79% .1 70 / .32); opacity: 0; will-change: transform, opacity; }
.oracle-ten-card__artifact-particles > i:nth-child(3n) { background: oklch(90% .085 225 / .96); box-shadow: 0 0 3px oklch(94% .06 220 / .95), 0 0 8px oklch(78% .1 225 / .78), 0 0 14px oklch(70% .09 232 / .3); }
.oracle-ten-card__artifact-particles > i:nth-child(4n) { width: 1px; height: calc(var(--size) + var(--size) + 2px); border-radius: 999px; }
.oracle-ten-card__artifact-particles > i:nth-child(5n) { background: transparent; box-shadow: none; }
.oracle-ten-card__artifact-particles > i:nth-child(5n)::before,
.oracle-ten-card__artifact-particles > i:nth-child(5n)::after { position: absolute; top: 50%; left: 50%; border-radius: 999px; background: oklch(96% .08 88 / .96); box-shadow: 0 0 7px oklch(86% .12 78 / .84); content: ""; transform: translate(-50%, -50%); }
.oracle-ten-card__artifact-particles > i:nth-child(5n)::before { width: calc(var(--size) + var(--size) + 1px); height: 1px; }
.oracle-ten-card__artifact-particles > i:nth-child(5n)::after { width: 1px; height: calc(var(--size) + var(--size) + 1px); }
.oracle-experience.is-ten-revealed .oracle-ten-card[data-reward-kind="artifact"] .oracle-ten-card__artifact-particles > i { animation: oracle-ten-artifact-particle var(--duration) var(--oracle-ease) var(--delay) infinite; }
.oracle-ten-card__caption { display: grid; gap: 2px; min-width: 0; justify-items: center; align-content: start; text-align: center; }
.oracle-ten-card__caption strong { max-width: 100%; overflow: hidden; color: var(--oracle-ink); font: 500 clamp(10px, 1.15vw, 14px)/1.1 "Songti SC", serif; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.oracle-ten-card__front > small { position: absolute; right: 8%; bottom: 21%; left: 8%; z-index: 4; overflow: hidden; color: var(--oracle-muted); font: 500 clamp(7px, .82vw, 10px)/1.1 "STKaiti", "KaiTi", serif; letter-spacing: .08em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.oracle-ten-card__glow { z-index: 5; overflow: visible; pointer-events: none; }
.oracle-ten-card__glow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oracle-ten-card__light-trail {
  fill: none;
  stroke: oklch(88% 0.12 83 / .96);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 14px oklch(91% 0.105 87 / .72));
  opacity: 0;
}
.oracle-experience.is-ten-breathing .oracle-ten-card__light-trail { animation: oracle-ten-card-light-trail 1500ms linear 2; }
.oracle-ten__panel > p { min-height: 18px; margin: 0; color: var(--oracle-muted); font: 11px "STKaiti", "KaiTi", serif; letter-spacing: .2em; }
.oracle-ten .oracle-overlay-close { top: 6px; }

@keyframes oracle-water-reveal { 0% { opacity: 0; transform: scale(.24); } 18% { opacity: .62; } 72% { opacity: .18; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes oracle-mote { 0%,15%,100% { opacity: 0; transform: translateY(6px); } 45% { opacity: .58; } 85% { opacity: .16; transform: translateY(-26px); } }
@keyframes oracle-ten-card-light-trail {
  0% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  8% { opacity: .9; }
  24% { opacity: 1; stroke-dasharray: 22 78; stroke-dashoffset: 0; }
  88% { opacity: .94; }
  100% { opacity: 0; stroke-dasharray: 22 78; stroke-dashoffset: -100; }
}
@keyframes oracle-ten-fortune-aura { 0%,100% { opacity: .3; transform: scale(.92); } 46% { opacity: .76; transform: scale(1.1); } 74% { opacity: .42; transform: scale(1.02); } }
@keyframes oracle-ten-fortune-motes { 0%,8%,100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.94); } 34% { opacity: .92; transform: translate3d(0, 0, 0) scale(1); } 72% { opacity: .3; transform: translate3d(0, -11px, 0) scale(1.1); } }
@keyframes oracle-ten-artifact-particle { 0%,12%,100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.18); } 28% { opacity: var(--alpha); transform: translate3d(0, 0, 0) scale(1); } 62% { opacity: .52; transform: translate3d(var(--drift), -11px, 0) scale(.78); } 82% { opacity: 0; transform: translate3d(calc(var(--drift) + var(--drift)), -20px, 0) scale(.24); } }

.oracle-experience.is-returning .oracle-experience__interior { opacity: 0; transition: opacity 500ms ease; }
.oracle-experience.is-returning .oracle-experience__camera { opacity: 1; transform: translate3d(0, 10px, 0) scale(2.08); transition: opacity 500ms ease; }
.oracle-experience.is-returning.is-pulling-back .oracle-experience__camera { transform: translate3d(0, 0, 0) scale(1); transition: transform 1300ms var(--oracle-ease); }

@media (max-width: 720px) {
  .oracle-experience.is-entering .oracle-experience__camera,
  .oracle-experience.is-returning .oracle-experience__camera { transform: translate3d(0, 18px, 0) scale(1.72); }
  .oracle-back { top: 70px; left: 18px; }
  .oracle-room__heading { top: 18vh; left: 24px; }
  .oracle-room__actions { bottom: 8vh; width: calc(100vw - 24px); }
  .oracle-cloud-action { min-height: 86px; padding-inline: 8px; }
  .oracle-cloud-action strong { font-size: 18px; }
  .oracle-cloud-action small { font-size: 9px; }
  .oracle-ten__panel { width: min(620px, calc(100vw - 42px)); }
  .oracle-ten__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .oracle-overlay-close { top: -42px; left: auto; right: 0; }
  .oracle-daily__result { padding: 54px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-experience *, .oracle-experience *::before, .oracle-experience *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media (max-width: 767px) {
  .oracle-experience {
    bottom: var(--mobile-nav-height, calc(68px + env(safe-area-inset-bottom)));
  }

  .oracle-experience__camera {
    background-size: auto 100%;
  }

  .oracle-experience__interior {
    background-position: 50% center;
    background-size: auto 100%;
  }

  .oracle-back {
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    min-width: 92px;
    min-height: 44px;
  }

  .oracle-room__heading {
    top: 12%;
    left: 18px;
  }

  .oracle-room__actions {
    bottom: 32px;
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100vw - 28px);
    max-width: 452px;
    gap: 7px;
  }

  .oracle-room__actions > i {
    display: none;
  }

  .oracle-cloud-action {
    min-height: 72px;
    padding: 8px 12px 14px;
  }

  .oracle-cloud-action img {
    width: min(88%, 330px);
  }

  .oracle-cloud-action strong {
    font-size: 18px;
  }

  .oracle-cloud-action small {
    max-width: 30em;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .oracle-room__status {
    bottom: 8px;
    width: calc(100% - 32px);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
  }

  .oracle-daily__result {
    padding: max(54px, calc(env(safe-area-inset-top) + 44px)) 18px 16px;
  }

  .oracle-daily__card {
    width: min(46vw, 210px, 29vh);
  }

  .oracle-save {
    min-height: 50px;
  }

  .oracle-ten__panel {
    width: calc(100vw - 24px);
    gap: 10px;
  }

  .oracle-ten__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .oracle-ten-card strong {
    font-size: 8px;
  }

  .oracle-overlay-close {
    width: 44px;
    height: 44px;
  }

  .oracle-daily .oracle-overlay-close {
    top: 10px;
    right: 10px;
    left: auto;
    border-radius: 50%;
  }
}

.oracle-mobile-focus,
.oracle-mobile-title {
  display: none;
}

@media (max-width: 767px) {
  .oracle-experience {
    top: var(--mobile-topbar, calc(58px + env(safe-area-inset-top)));
    bottom: var(--mobile-nav-height, calc(68px + env(safe-area-inset-bottom)));
    background:
      radial-gradient(circle at 16% 26%, oklch(0.4 0.02 82 / 0.05) 0 0.5px, transparent 0.8px) 0 0 / 13px 17px,
      linear-gradient(112deg, oklch(0.974 0.009 88), oklch(0.95 0.012 82));
  }

  .oracle-experience__camera {
    background-position: 50% 54%;
    background-size: auto 100%;
  }

  .oracle-experience__interior {
    inset: 0 0 auto;
    height: 31%;
    background-position: 50% 53%;
    background-size: auto 118%;
    border-bottom: 1px solid oklch(0.55 0.035 80 / 0.24);
    mask-image: linear-gradient(180deg, #000 0 82%, transparent 100%);
  }

  .oracle-back,
  .oracle-room__heading {
    display: none;
  }

  .oracle-mobile-focus {
    position: absolute;
    top: 17%;
    left: 50%;
    display: block;
    width: 184px;
    height: 225px;
    overflow: hidden;
    border-radius: 50% 50% 42% 42%;
    transform: translateX(-50%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0 55%, transparent 76%);
  }

  .oracle-mobile-focus::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 730px;
    height: 411px;
    background: url("./oracle-assets/oracle-interior-master-v2-aligned.png") 50% 58% / 100% 100% no-repeat;
    filter: saturate(0.9) contrast(1.04) brightness(0.98);
    transform: translate(-50%, -51%);
    content: "";
  }

  .oracle-mobile-focus i {
    position: absolute;
    right: 16px;
    bottom: 13px;
    left: 16px;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, oklch(0.58 0.055 76 / 0.48), transparent);
  }

  .oracle-mobile-title {
    position: absolute;
    top: 48%;
    right: 18px;
    left: 18px;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
  }

  .oracle-mobile-title span {
    color: var(--oracle-red);
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .oracle-mobile-title strong {
    color: var(--oracle-ink);
    font-family: "Songti SC", "STSong", serif;
    font-size: 31px;
    font-weight: 500;
    letter-spacing: 0.17em;
  }

  .oracle-room__actions {
    top: 60%;
    bottom: auto;
    display: grid;
    grid-template-columns: 1fr;
    width: min(100% - 40px, 390px);
    gap: 9px;
    filter: none;
  }

  .oracle-cloud-action {
    min-height: 62px;
    padding: 8px 18px;
    border: 1px solid oklch(0.55 0.05 75 / 0.36);
    border-radius: 28px;
    background: oklch(0.965 0.014 88 / 0.92);
    box-shadow: 0 6px 18px oklch(0.31 0.03 166 / 0.08);
  }

  .oracle-cloud-action[data-oracle-choice="ten"] {
    order: 1;
    color: oklch(0.96 0.012 88);
    border-color: oklch(0.48 0.11 37 / 0.72);
    background: oklch(0.53 0.115 37);
  }

  .oracle-cloud-action[data-oracle-choice="daily"] {
    order: 2;
  }

  .oracle-cloud-action img,
  .oracle-room__actions > i {
    display: none;
  }

  .oracle-cloud-action strong {
    align-self: end;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.16em;
  }

  .oracle-cloud-action small {
    align-self: start;
    color: currentColor;
    font-size: 9px;
    opacity: 0.68;
  }

  .oracle-room__status {
    bottom: 7px;
  }
}

/* Mobile tabs open their destination directly, without camera, ripple, mist, or page choreography. */
@media (max-width: 767px) {
  .oracle-experience__camera,
  .oracle-experience__wave,
  .oracle-experience__motes {
    display: none;
  }

  .oracle-experience,
  .oracle-experience__interior,
  .oracle-room,
  .oracle-room__actions,
  .oracle-cloud-action,
  .oracle-mobile-focus,
  .oracle-mobile-title {
    animation: none;
    transition: none;
  }

  .oracle-experience.is-interior .oracle-experience__interior,
  .oracle-experience.is-interior .oracle-room {
    opacity: 1;
    transform: none;
  }

  .oracle-experience {
    background: url("./mobile-assets/frame-v1/paper-tile.png") center / 420px auto repeat;
  }

  .oracle-experience__interior {
    background-image: url("./mobile-assets/frame-v1/scene-oracle.png");
    background-position: center;
    background-size: cover;
  }
}