*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --ink: #f2eee3;
  --muted: #a8a092;
  --night: #11100f;
  --panel: #1d1a17;
  --line: rgba(224, 210, 183, 0.34);
  --accent: #cbb17b;
  --accent-rgb: 203, 177, 123;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -15%, #322b24 0, transparent 43%),
    linear-gradient(180deg, #171411 0%, var(--night) 62%, #080807 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

button {
  color: inherit;
  font: inherit;
}

.app-shell {
  width: min(100%, 32rem);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(1.25rem, env(safe-area-inset-top, 0px))
    1.15rem
    max(1rem, env(safe-area-inset-bottom, 0px));
  display: block;
  isolation: isolate;
}

.prompt-panel,
.action-panel {
  position: relative;
  z-index: 20;
  text-align: center;
}

.prompt-panel,
.action-panel {
  display: none;
}

.prompt-panel {
  transition: opacity 360ms ease, transform 500ms ease;
}

.app-shell:not([data-state="contemplating"]) .prompt-panel {
  opacity: 0.52;
  transform: translateY(-0.35rem) scale(0.97);
}

.eyebrow,
.prompt-note,
.status-text,
.disclaimer {
  margin: 0;
  color: var(--muted);
}

.eyebrow {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.25em;
}

h1 {
  margin: 0.5rem 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(1.4rem, 5.8vw, 2rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.04em;
}

.prompt-note {
  font-size: 0.78rem;
}

.oracle-stage {
  min-height: 100%;
  height: calc(100dvh - max(2.25rem, env(safe-area-inset-top, 0px)) - max(2rem, env(safe-area-inset-bottom, 0px)));
  position: relative;
  perspective: 900px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

.deck-instruction,
.reveal-instruction,
.action-instruction,
.next-question-instruction {
  position: absolute;
  z-index: 20;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(239, 224, 186, 0.86);
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(0.92rem, 3.8vw, 1.08rem);
  letter-spacing: 0.16em;
  text-align: center;
  text-shadow: 0 0 0.75rem rgba(221, 177, 91, 0.32);
  pointer-events: none;
}

.deck-instruction {
  top: 41%;
  display: none;
}

.reveal-instruction {
  /* A reserved caption zone above the card, never over its artwork. */
  top: max(0.85rem, 9%);
  display: none;
  font-size: clamp(0.76rem, 3.2vw, 0.92rem);
  color: rgba(235, 221, 191, 0.76);
  letter-spacing: 0.13em;
}

.action-instruction {
  /* This is a visual corridor in the WebGL composition: it stays above the
     rendered deck, instead of using the deck button's unrelated CSS bounds. */
  top: auto;
  /* Sit immediately below the revealed card, while preserving a slim gap
     before the deck begins. */
  bottom: 34.5%;
  display: none;
  flex-direction: column;
  gap: 0.32rem;
  width: min(20rem, calc(100% - 3.5rem));
  padding: 0.56rem 0.8rem 0.62rem;
  border: 1px solid rgba(216, 173, 88, 0.28);
  border-radius: 0.55rem;
  background: rgba(12, 11, 10, 0.76);
  box-shadow: 0 0.5rem 1.35rem rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(0.42rem);
  font-size: clamp(0.68rem, 2.9vw, 0.82rem);
  color: rgba(239, 224, 186, 0.84);
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-shadow: 0 0 0.65rem rgba(221, 177, 91, 0.3);
}

.action-instruction span {
  color: rgba(235, 221, 191, 0.48);
  font-size: 0.78em;
}

.action-instruction strong {
  color: rgba(255, 232, 174, 0.98);
  font-weight: 500;
}

.next-question-instruction {
  top: auto;
  bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
  display: none;
  font-size: clamp(0.67rem, 2.8vw, 0.8rem);
  color: rgba(235, 221, 191, 0.62);
  letter-spacing: 0.1em;
  text-shadow: 0 0 0.55rem rgba(221, 177, 91, 0.18);
}

.app-shell[data-state="contemplating"] .deck-instruction {
  display: block;
  animation: oracle-whisper 3.2s ease-in-out infinite;
}

.app-shell[data-state="ready-to-reveal"] .reveal-instruction {
  display: block;
  animation: oracle-whisper 2.7s ease-in-out infinite;
}

.app-shell[data-state="revealed"] .next-question-instruction {
  display: block;
}

.app-shell[data-state="revealed"] .action-instruction {
  display: flex;
  animation: action-arrive 520ms 120ms both;
}

@keyframes action-arrive {
  from {
    opacity: 0;
    transform: translate(-50%, 0.35rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.deck-hit-target {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 73%;
  width: min(8.8rem, 40vw);
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.app-shell:not([data-state="contemplating"]):not([data-state="revealed"]) .deck-hit-target {
  display: none;
}

.deck-hit-target:focus-visible {
  outline: 1px solid rgba(240, 210, 143, 0.72);
  outline-offset: 0.28rem;
}

@keyframes oracle-whisper {
  0%, 100% { opacity: 0.52; transform: translateX(-50%) translateY(0); text-shadow: 0 0 0.45rem rgba(221, 177, 91, 0.16); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-0.18rem); text-shadow: 0 0 1.1rem rgba(229, 187, 99, 0.55); }
}

.oracle-canvas {
  /* `perspective` on the stage makes fixed descendants use the stage as their
     containing block in WebKit. Centre the viewport-sized canvas explicitly,
     otherwise it begins at the narrow app column's left edge on wide screens. */
  position: fixed;
  z-index: 1;
  /* Overscan vertically because this element is contained by the stage's
     perspective context in mobile WebKit, not by the document viewport. */
  top: -4rem;
  left: 50%;
  width: 100vw;
  height: calc(100vh + 4rem);
  height: calc(100dvh + 4rem);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.webgl-ready .oracle-canvas {
  opacity: 1;
  pointer-events: auto;
}

.webgl-ready .table-plane,
.webgl-ready .deck {
  visibility: hidden;
}

.webgl-ready .active-card,
.webgl-ready .app-shell[data-state="drawing-from-deck"] .active-card,
.webgl-ready .app-shell[data-state="dismissing"] .active-card {
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%);
}

.webgl-ready .active-card .card-tilt {
  opacity: 0;
}

.render-diagnostic {
  display: none;
}

.material-tuner {
  position: fixed;
  z-index: 80;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: 0.75rem;
  width: min(12rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid rgba(220, 193, 133, 0.34);
  border-radius: 0.65rem;
  background: rgba(21, 18, 15, 0.92);
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(0.8rem);
  -webkit-backdrop-filter: blur(0.8rem);
  color: var(--ink);
  font-size: 0.72rem;
  text-align: left;
}

.material-tuner--back {
  top: auto;
  right: auto;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  left: 0.75rem;
}

.material-tuner summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.25rem;
  padding: 0.55rem 0.68rem;
  color: #ede4d2;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}

.material-tuner summary::-webkit-details-marker {
  display: none;
}

.material-tuner summary span {
  color: #bcae95;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
}

.material-tuner:not([open]) summary span::before {
  content: "点击展开 · ";
}

.material-tuner[open] summary span::before {
  content: "点击收起 · ";
}

.material-tuner__body {
  display: grid;
  gap: 0.52rem;
  padding: 0.2rem 0.68rem 0.7rem;
  border-top: 1px solid rgba(220, 193, 133, 0.16);
}

.material-tuner label {
  display: grid;
  gap: 0.26rem;
}

.material-tuner label > span {
  display: flex;
  justify-content: space-between;
  color: #cec3ae;
}

.material-tuner output {
  color: #e4bd70;
  font: 600 0.68rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

.material-tuner input {
  width: 100%;
  accent-color: #d5af62;
  touch-action: pan-y;
}

.material-tuner__reset {
  margin-top: 0.08rem;
  min-height: 1.8rem;
  border: 1px solid rgba(220, 193, 133, 0.35);
  border-radius: 0.38rem;
  background: rgba(166, 123, 57, 0.12);
  color: #ead8b1;
  font-size: 0.68rem;
}

.webgl-fallback .render-diagnostic {
  display: block;
  position: fixed;
  z-index: 100;
  left: 1rem;
  right: 1rem;
  top: max(1rem, env(safe-area-inset-top, 0px));
  padding: 0.9rem 1rem;
  border: 1px solid #ff6b5e;
  border-radius: 0.65rem;
  background: rgba(35, 8, 7, 0.96);
  color: #ffb0a8;
  font: 600 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  white-space: pre-wrap;
}

.webgl-fallback .deck,
.webgl-fallback .active-card {
  visibility: hidden !important;
}

.webgl-fallback .primary-action {
  opacity: 0.4;
  pointer-events: none;
}

.oracle-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 70%;
  height: 20%;
  left: 15%;
  bottom: 6%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(1.2rem);
  transform: rotateX(64deg);
}

.table-plane,
.deck,
.active-card {
  position: absolute;
}

.table-plane {
  z-index: -3;
  inset: 24% -48% -42%;
  border: 1px solid rgba(91, 137, 111, 0.16);
  background:
    radial-gradient(ellipse at 46% 24%, rgba(110, 151, 123, 0.12), transparent 48%),
    repeating-linear-gradient(
      114deg,
      transparent 0 0.22rem,
      rgba(255, 255, 255, 0.012) 0.24rem 0.26rem
    ),
    #09251b;
  box-shadow: inset 0 1.5rem 5rem rgba(0, 0, 0, 0.32);
  transform: rotateX(63deg) translateZ(-3rem);
  transform-origin: 50% 100%;
}

.deck {
  z-index: 2;
  width: clamp(6.5rem, 25vw, 7.6rem);
  aspect-ratio: 2 / 3;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%) rotateX(59deg) rotateZ(-2deg);
  transform-style: preserve-3d;
  transition: opacity 400ms ease, transform 620ms ease;
}

.deck-card,
.card-face {
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background-color: #27221d;
}

.deck-card {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0 24%, rgba(206, 175, 119, 0.23) 25% 26%, transparent 27%),
    linear-gradient(135deg, transparent 18%, rgba(202, 169, 111, 0.15) 18.4% 19%, transparent 19.4% 81%, rgba(202, 169, 111, 0.15) 81.4% 82%, transparent 82.4%),
    #25201c;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.34);
}

.deck-card:nth-child(1) { transform: translate3d(-0.16rem, 0.22rem, -0.5rem) rotate(-1deg); }
.deck-card:nth-child(2) { transform: translate3d(0.12rem, 0.1rem, -0.4rem) rotate(0.8deg); }
.deck-card:nth-child(3) { transform: translate3d(-0.05rem, 0, -0.3rem) rotate(-0.4deg); }
.deck-card:nth-child(4) { transform: translate3d(0.16rem, -0.1rem, -0.2rem) rotate(1.1deg); }
.deck-card:nth-child(5) { transform: translate3d(-0.1rem, -0.22rem, -0.1rem) rotate(-0.7deg); }
.deck-card:nth-child(6) { transform: translate3d(0, -0.34rem, 0) rotate(0.2deg); }

.app-shell[data-state="drawing-from-deck"] .deck-card:nth-child(4) {
  animation: open-deck-gap 1100ms ease both;
}

.app-shell[data-state="dismissing"] .deck,
.app-shell[data-state="returning-to-deck"] .deck {
  opacity: 0.66;
}

.active-card {
  --card-rotate: -1.2deg;
  z-index: 10;
  display: none;
  width: clamp(11rem, 46vw, 13.3rem);
  aspect-ratio: 2 / 3;
  left: 50%;
  top: 50%;
  padding: 0;
  border: 0;
  border-radius: 0.8rem;
  outline: 0;
  background: transparent;
  opacity: 1;
  transform: translate(-50%, -50%) rotateZ(var(--card-rotate));
  transform-style: preserve-3d;
  touch-action: none;
  will-change: transform, opacity;
}

.app-shell:not([data-state="contemplating"]):not([data-state="returning-to-deck"])
  .active-card {
  display: block;
}

.app-shell[data-state="drawing-from-deck"] .active-card {
  pointer-events: none;
  animation: draw-from-deck 2100ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.app-shell[data-state="dismissing"] .active-card {
  pointer-events: none;
  animation: dismiss-card 620ms cubic-bezier(0.55, 0.02, 0.75, 0.35) both;
}

.active-card:focus-visible .card-face {
  outline: 2px solid rgba(243, 220, 170, 0.9);
  outline-offset: 0.25rem;
}

.card-tilt,
.card-inner,
.card-face {
  display: block;
  width: 100%;
  height: 100%;
}

.card-tilt {
  transform-style: preserve-3d;
  filter: drop-shadow(0 1.5rem 1.25rem rgba(0, 0, 0, 0.5));
  transition: transform 160ms ease-out;
}

.card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.card-inner.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-face::before {
  content: "";
  position: absolute;
  inset: 0.48rem;
  border: 1px solid rgba(228, 207, 165, 0.38);
  border-radius: 0.45rem;
  pointer-events: none;
}

.card-back {
  background:
    repeating-conic-gradient(from 22.5deg at 50% 50%, rgba(213, 177, 113, 0.08) 0 12.5%, transparent 12.5% 25%),
    radial-gradient(circle at center, #54422e 0 2%, transparent 2.4% 19%, rgba(207, 167, 100, 0.32) 19.5% 20.2%, transparent 20.6%),
    linear-gradient(145deg, #2d2822, #171514);
}

.card-back::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(228, 207, 165, 0.26);
  transform: rotate(45deg);
}

.back-mark,
.answer-symbol,
.answer-kicker,
.answer-text,
.card-corner,
.back-orbit {
  display: block;
  position: absolute;
  z-index: 2;
  text-align: center;
}

.back-mark {
  width: 100%;
  top: 50%;
  left: 0;
  color: #d8bb7e;
  font-size: 2rem;
  transform: translateY(-50%);
}

.back-orbit {
  width: 38%;
  aspect-ratio: 1;
  left: 31%;
  top: 50%;
  border: 1px solid rgba(225, 195, 136, 0.52);
  border-radius: 50%;
  transform: translateY(-50%);
}

.card-corner {
  left: 0;
  width: 100%;
  color: rgba(230, 211, 174, 0.66);
  font-family: Georgia, serif;
  font-size: 0.5rem;
  letter-spacing: 0.26em;
}

.card-corner--top { top: 1.15rem; }
.card-corner--bottom { bottom: 1.15rem; transform: rotate(180deg); }

.card-answer {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 39%, rgba(var(--accent-rgb), 0.24) 0, transparent 36%),
    linear-gradient(160deg, #2a2724 0%, #141313 72%);
}

.card-answer::after {
  content: "";
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  left: 28%;
  top: 23%;
  border: 1px solid rgba(var(--accent-rgb), 0.58);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.45rem rgba(255, 255, 255, 0.018),
    0 0 2.8rem rgba(var(--accent-rgb), 0.18);
}

.answer-kicker {
  width: 80%;
  left: 10%;
  top: 14%;
  color: var(--accent);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
}

.answer-symbol {
  width: 100%;
  left: 0;
  top: 31.5%;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 2.15rem;
  line-height: 1;
  text-shadow: 0 0 1.2rem rgba(var(--accent-rgb), 0.38);
}

.answer-text {
  width: 76%;
  left: 12%;
  top: 58%;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.06em;
}

.active-card[data-mood="positive"] { --accent: #d8ad58; --accent-rgb: 216, 173, 88; --card-rotate: 1.1deg; }
.active-card[data-mood="neutral"] { --accent: #aeb8c8; --accent-rgb: 174, 184, 200; --card-rotate: -0.8deg; }
.active-card[data-mood="negative"] { --accent: #b77b69; --accent-rgb: 183, 123, 105; --card-rotate: 1.4deg; }

.action-panel {
  min-height: 5.8rem;
}

.primary-action {
  min-width: 12rem;
  min-height: 3rem;
  padding: 0.82rem 1.5rem;
  border: 1px solid rgba(244, 231, 202, 0.66);
  border-radius: 999px;
  background: linear-gradient(180deg, #f1eadc, #d9cdb9);
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.32);
  color: #181512;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.primary-action[hidden] {
  display: none;
}

.primary-action:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.primary-action:disabled,
.active-card:disabled {
  cursor: default;
}

.status-text {
  min-height: 1.5em;
  margin-bottom: 0.65rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

.disclaimer {
  margin-top: 0.65rem;
  font-size: 0.64rem;
}

@keyframes draw-from-deck {
  0% {
    opacity: 0.25;
    transform: translate(-50%, 32%) rotateX(57deg) rotateZ(-3deg) scale(0.66);
  }
  42% {
    opacity: 1;
    transform: translate(-50%, -64%) rotateX(10deg) rotateZ(3.5deg) scale(0.88);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(0) rotateZ(var(--card-rotate)) scale(1);
  }
}

@keyframes dismiss-card {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateZ(var(--card-rotate)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(45%, -96%) rotateZ(18deg) scale(0.72);
  }
}

@keyframes open-deck-gap {
  0%, 100% { transform: translate3d(0.16rem, -0.1rem, -0.2rem) rotate(1.1deg); }
  38% { transform: translate3d(1.05rem, -0.7rem, 0) rotate(6deg); }
}

@media (max-height: 43rem) {
  .app-shell {
    grid-template-rows: auto minmax(17rem, 1fr) auto;
    padding-top: max(0.8rem, env(safe-area-inset-top, 0px));
  }

  .oracle-stage {
    min-height: 17rem;
  }

  .prompt-note,
  .disclaimer {
    display: none;
  }

  h1 {
    margin: 0.25rem 0;
    font-size: 1.3rem;
  }

  .active-card {
    width: clamp(9rem, 34vh, 11rem);
  }

  .deck {
    width: clamp(6.4rem, 24vh, 7.5rem);
  }
}

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