:root{--oracle-bg:#070b12;--oracle-panel:rgba(12,18,28,.82);--oracle-text:#f4efe4;--oracle-muted:#b9ad9b;--oracle-gold:#d9b978;--oracle-blue:#bcd7ea;--oracle-line:rgba(217,185,120,.18)}*{box-sizing:border-box}body.oracle-app-page{margin:0;min-height:100vh;color:var(--oracle-text);background:radial-gradient(circle at 50% 0%,rgba(154,195,220,.16),transparent 34rem),radial-gradient(circle at 20% 78%,rgba(164,61,56,.12),transparent 24rem),linear-gradient(180deg,#07101b 0%,#05070c 72%,#030406 100%);font-family:Georgia,"Times New Roman",serif}.oracle-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:24px 0 60px}.oracle-hero{text-align:center;padding:16px 8px 6px}.oracle-kicker{color:var(--oracle-gold);letter-spacing:.22em;text-transform:uppercase;font-size:.76rem}.oracle-hero h1{margin:10px 0;font-size:clamp(2.4rem,6vw,5.2rem);line-height:.94;font-weight:500;text-shadow:0 0 34px rgba(160,200,230,.18)}.oracle-subtitle{max-width:860px;margin:0 auto;color:var(--oracle-muted);font-size:clamp(1rem,2.3vw,1.16rem);line-height:1.68}.oracle-disclaimer-top{margin:16px auto 0;max-width:880px;padding:12px 16px;border:1px solid rgba(217,185,120,.22);border-radius:16px;background:rgba(8,12,18,.62);color:#ddcfbd;font-size:.95rem;line-height:1.6}.oracle-panel{margin-top:24px;padding:22px;border:1px solid var(--oracle-line);border-radius:28px;background:linear-gradient(180deg,rgba(12,18,28,.84),rgba(8,12,18,.82));box-shadow:0 24px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden}.oracle-panel:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 60%,rgba(159,199,223,.13),transparent 18rem),repeating-linear-gradient(110deg,transparent 0 42px,rgba(164,61,56,.04) 43px 44px);animation:oracle-drift 18s linear infinite;pointer-events:none}@keyframes oracle-drift{from{transform:translate3d(-2%,-1%,0) rotate(0)}to{transform:translate3d(2%,1%,0) rotate(1deg)}}.oracle-controls,.oracle-actions{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.oracle-field-group{position:relative;z-index:2;margin-top:18px}.oracle-label{display:block;margin:0 0 8px;color:var(--oracle-blue);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}.oracle-textarea{width:100%;min-height:92px;padding:14px 16px;resize:vertical;color:var(--oracle-text);background:rgba(5,8,13,.8);border:1px solid rgba(217,185,120,.26);border-radius:18px;font:inherit;line-height:1.55}.oracle-textarea:focus{outline:none;border-color:rgba(217,185,120,.56);box-shadow:0 0 0 3px rgba(217,185,120,.08)}.oracle-spread{position:relative;z-index:2;display:grid;justify-content:center;gap:24px;margin-top:30px;align-items:start}.oracle-spread.spread-1{grid-template-columns:260px}.oracle-spread.spread-3{grid-template-columns:repeat(3,240px)}.oracle-spread.spread-5{grid-template-columns:repeat(5,190px)}.oracle-card-wrap{width:100%;justify-self:center;text-align:center}.oracle-position{min-height:38px;margin-bottom:12px;color:var(--oracle-blue);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}.oracle-card{display:block;width:100%;aspect-ratio:2/3;border:0;padding:0;background:transparent;perspective:1200px;cursor:pointer}.oracle-card-inner{display:block;position:relative;width:100%;height:100%;transform:rotateY(0deg) scale(1);transition:transform .56s cubic-bezier(.2,.8,.2,1),filter .34s ease;border-radius:20px;overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.52),0 0 0 1px rgba(217,185,120,.18),inset 0 0 0 1px rgba(255,255,255,.06)}.oracle-card.is-flipping .oracle-card-inner{transform:rotateY(88deg) scale(.985);filter:brightness(.78) saturate(.92)}.oracle-card.is-open .oracle-card-inner{filter:drop-shadow(0 0 24px rgba(159,199,223,.16))}.oracle-card-img{display:block;width:100%;height:100%;object-fit:cover;background:#070b12}.oracle-card-title{margin-top:14px;min-height:44px;color:var(--oracle-text);font-size:1rem}.oracle-card-number{display:block;color:var(--oracle-gold);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}.oracle-card-detail{margin-top:12px;padding:14px 14px 12px;border-radius:16px;border:1px solid rgba(217,185,120,.16);background:rgba(7,10,16,.78);text-align:left;color:#ece6da;font-size:.93rem;line-height:1.55;display:none}.oracle-card-wrap.is-open .oracle-card-detail{display:block}.oracle-card-detail b{color:var(--oracle-gold);font-weight:500}.oracle-result{position:relative;z-index:2;margin-top:28px;padding:18px;border-radius:22px;border:1px solid rgba(217,185,120,.18);background:linear-gradient(180deg,rgba(10,16,24,.92),rgba(6,9,14,.92))}.oracle-status{color:var(--oracle-blue);min-height:24px;font-size:.95rem;margin-bottom:10px}.oracle-output{white-space:pre-wrap;line-height:1.72;font-size:1rem;color:#f4efe4}.oracle-cta{margin-top:22px;padding-top:18px;border-top:1px solid rgba(217,185,120,.16)}.oracle-cta p{margin:0 0 12px;color:#ddd0bf;line-height:1.6}.oracle-note{position:relative;z-index:2;margin:18px auto 0;max-width:880px;color:rgba(244,239,228,.72);line-height:1.65;text-align:center;font-size:.95rem}@media(max-width:1120px){.oracle-spread.spread-5{grid-template-columns:repeat(3,200px)}}@media(max-width:860px){.oracle-spread.spread-3,.oracle-spread.spread-5{grid-template-columns:repeat(2,minmax(180px,240px))}}@media(max-width:580px){.oracle-shell{width:min(100% - 18px,520px);padding-top:16px}.oracle-panel{padding:16px 12px 20px;border-radius:22px}.oracle-spread.spread-1,.oracle-spread.spread-3,.oracle-spread.spread-5{grid-template-columns:minmax(200px,78vw)}}

/* V2: no spoilers. Card number, title and meaning appear only after opening. */
.oracle-card-title {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity .32s ease, visibility .32s ease, transform .32s ease !important;
}

.oracle-card-wrap.is-open .oracle-card-title {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.oracle-card-detail {
  display: none !important;
}

.oracle-card-wrap.is-open .oracle-card-detail {
  display: block !important;
}

.oracle-card-wrap:not(.is-open) .oracle-card-detail,
.oracle-card-wrap:not(.is-open) .oracle-card-title {
  pointer-events: none !important;
}

/* V2 secrecy fix: card names and meanings appear only after the user opens each card. */
.oracle-card-title {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important;
  pointer-events: none !important;
}

.oracle-card-wrap.is-open .oracle-card-title {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.oracle-card-detail {
  display: none !important;
}

.oracle-card-wrap.is-open .oracle-card-detail {
  display: block !important;
}

/* ORACLE UX V2: red thread progress, furnace embers, mobile step mode, paragraph reveal */

.oracle-thread-progress {
  position: relative;
  z-index: 3;
  margin: 18px auto 0;
  max-width: 720px;
  text-align: center;
}

.oracle-thread-label {
  color: var(--oracle-blue);
  font-size: .94rem;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.oracle-thread-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 24px;
}

.oracle-thread-line::before {
  content: "";
  position: absolute;
  width: min(520px, 72%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164,61,56,.45), rgba(217,185,120,.22), transparent);
  z-index: -1;
}

.oracle-thread-dot {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid rgba(217,185,120,.38);
  background: radial-gradient(circle, rgba(20,25,35,.9), rgba(6,8,12,.9));
  box-shadow: 0 0 0 3px rgba(7,10,16,.85);
  position: relative;
}

.oracle-thread-dot.is-done {
  border-color: rgba(217,185,120,.85);
  background:
    radial-gradient(circle at 45% 35%, #fff1b8 0 8%, #d99b4a 18%, #9e433f 48%, #28100b 100%);
  box-shadow:
    0 0 0 3px rgba(7,10,16,.85),
    0 0 18px rgba(217,120,58,.45);
}

.oracle-thread-dot.is-active {
  animation: oracle-dot-pulse 1.35s ease-in-out infinite;
}

.oracle-thread-dot.is-furnace.is-done::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  width: 7px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 60% 60% 50% 50%;
  background: radial-gradient(circle at 50% 85%, #ffd37a, #d46a31 45%, transparent 70%);
  opacity: .72;
  filter: blur(.1px);
  animation: oracle-flame 1.1s ease-in-out infinite alternate;
}

.oracle-thread-dot.is-circle.is-done {
  box-shadow:
    0 0 0 3px rgba(7,10,16,.85),
    0 0 18px rgba(190,220,240,.45);
}

@keyframes oracle-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(7,10,16,.85), 0 0 0 rgba(217,185,120,0); }
  50% { transform: scale(1.14); box-shadow: 0 0 0 3px rgba(7,10,16,.85), 0 0 22px rgba(217,185,120,.42); }
}

@keyframes oracle-flame {
  from { transform: translateX(-50%) scaleY(.9); opacity: .45; }
  to { transform: translateX(-50%) scaleY(1.14); opacity: .86; }
}

.oracle-card-more {
  margin-top: 10px;
  border-top: 1px solid rgba(217,185,120,.14);
  padding-top: 10px;
}

.oracle-card-more summary {
  cursor: pointer;
  color: var(--oracle-gold);
  list-style: none;
}

.oracle-card-more summary::-webkit-details-marker {
  display: none;
}

.oracle-card-more summary::before {
  content: "＋ ";
  color: var(--oracle-red);
}

.oracle-card-more[open] summary::before {
  content: "− ";
}

.oracle-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--oracle-gold);
}

.oracle-ember {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffe2a0, #c45d33 55%, transparent 76%);
  box-shadow: 0 0 16px rgba(217,110,55,.48);
  animation: oracle-ember 1.15s ease-in-out infinite alternate;
}

.oracle-ember:nth-child(2) { animation-delay: .18s; }
.oracle-ember:nth-child(3) { animation-delay: .36s; }

@keyframes oracle-ember {
  from { transform: translateY(2px) scale(.82); opacity: .45; }
  to { transform: translateY(-2px) scale(1.12); opacity: 1; }
}

.oracle-reveal-paragraph {
  margin: 0 0 1em;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  animation: oracle-text-reveal .7s ease forwards;
  position: relative;
}

.oracle-reveal-paragraph::first-letter {
  color: var(--oracle-gold);
}

@keyframes oracle-text-reveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
    text-shadow: 0 0 18px rgba(217,110,55,.28);
  }
  60% {
    opacity: .92;
    filter: blur(.8px);
    text-shadow: 0 0 12px rgba(217,110,55,.16);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    text-shadow: none;
  }
}

.oracle-opened-list {
  grid-column: 1 / -1;
  margin: 4px auto 0;
  max-width: 320px;
  color: rgba(244,239,228,.74);
  line-height: 1.5;
  font-size: .9rem;
}

.oracle-opened-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}

.oracle-opened-chip {
  border: 1px solid rgba(217,185,120,.2);
  background: rgba(8,12,18,.76);
  border-radius: 999px;
  padding: 4px 8px;
}

.oracle-mobile-bar {
  display: none;
}

@media (max-width: 700px) {
  body.oracle-app-page {
    padding-bottom: 104px;
  }

  .oracle-controls {
    gap: 8px;
  }

  .oracle-spread.is-mobile-step {
    grid-template-columns: minmax(210px, 82vw) !important;
    gap: 18px;
  }

  .oracle-card-wrap {
    max-width: 330px;
    margin: 0 auto;
  }

  .oracle-card-detail {
    font-size: .92rem;
  }

  .oracle-result {
    margin-top: 20px;
  }

  .oracle-mobile-bar.is-visible {
    display: block;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    padding: 10px;
    border: 1px solid rgba(217,185,120,.28);
    border-radius: 18px;
    background:
      radial-gradient(circle at 20% 0%, rgba(217,110,55,.16), transparent 12rem),
      linear-gradient(180deg, rgba(13,18,27,.96), rgba(5,7,11,.98));
    box-shadow: 0 18px 60px rgba(0,0,0,.52), 0 0 28px rgba(217,110,55,.08);
    backdrop-filter: blur(10px);
  }

  .oracle-mobile-bar-text {
    color: var(--oracle-blue);
    text-align: center;
    font-size: .88rem;
    margin-bottom: 8px;
  }

  .oracle-mobile-action {
    width: 100%;
  }
}

/* ORACLE MOBILE UX V3: visible progress in top and sticky bottom bar */

.oracle-thread-progress {
  display: block !important;
  position: relative !important;
  z-index: 5 !important;
  margin: 18px auto 8px !important;
  max-width: 760px !important;
  text-align: center !important;
  padding: 10px 8px 4px !important;
}

.oracle-thread-label {
  display: block !important;
  color: var(--oracle-blue) !important;
  font-size: .94rem !important;
  letter-spacing: .06em !important;
  margin-bottom: 10px !important;
}

.oracle-thread-line,
.oracle-mobile-thread-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 24px !important;
  position: relative !important;
}

.oracle-thread-line::before,
.oracle-mobile-thread-line::before {
  content: "" !important;
  position: absolute !important;
  width: min(520px, 78%) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(164,61,56,.5), rgba(217,185,120,.25), transparent) !important;
  z-index: -1 !important;
}

.oracle-thread-dot {
  width: 15px !important;
  height: 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(217,185,120,.38) !important;
  background: radial-gradient(circle, rgba(20,25,35,.95), rgba(6,8,12,.95)) !important;
  box-shadow: 0 0 0 3px rgba(7,10,16,.88) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.oracle-thread-dot.is-done {
  border-color: rgba(217,185,120,.9) !important;
  background:
    radial-gradient(circle at 45% 35%, #fff1b8 0 8%, #d99b4a 18%, #9e433f 48%, #28100b 100%) !important;
  box-shadow:
    0 0 0 3px rgba(7,10,16,.88),
    0 0 18px rgba(217,120,58,.52) !important;
}

.oracle-thread-dot.is-active {
  animation: oracle-dot-pulse-v3 1.25s ease-in-out infinite !important;
}

.oracle-thread-dot.is-busy {
  animation: oracle-dot-busy-v3 1s ease-in-out infinite alternate !important;
}

.oracle-thread-dot.is-furnace.is-done::after,
.oracle-thread-dot.is-furnace.is-busy::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -13px !important;
  width: 7px !important;
  height: 14px !important;
  transform: translateX(-50%) !important;
  border-radius: 60% 60% 50% 50% !important;
  background: radial-gradient(circle at 50% 85%, #ffd37a, #d46a31 45%, transparent 70%) !important;
  opacity: .75 !important;
  animation: oracle-flame-v3 1.05s ease-in-out infinite alternate !important;
}

@keyframes oracle-dot-pulse-v3 {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(7,10,16,.88), 0 0 0 rgba(217,185,120,0);
  }
  50% {
    transform: scale(1.16);
    box-shadow: 0 0 0 3px rgba(7,10,16,.88), 0 0 22px rgba(217,185,120,.48);
  }
}

@keyframes oracle-dot-busy-v3 {
  from { transform: scale(.9); opacity: .55; }
  to { transform: scale(1.1); opacity: 1; }
}

@keyframes oracle-flame-v3 {
  from { transform: translateX(-50%) scaleY(.86); opacity: .45; }
  to { transform: translateX(-50%) scaleY(1.16); opacity: .9; }
}

.oracle-mobile-thread-line {
  margin: 0 auto 8px !important;
  max-width: 260px !important;
}

.oracle-mobile-thread-line::before {
  width: 84% !important;
}

.oracle-mobile-thread-line .oracle-thread-dot {
  width: 12px !important;
  height: 12px !important;
}

.oracle-mobile-bar.is-visible {
  display: block !important;
}

.oracle-mobile-bar.is-waiting {
  border-color: rgba(217,120,58,.42) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.58),
    0 0 32px rgba(217,110,55,.14) !important;
}

.oracle-mobile-bar.is-waiting .oracle-mobile-action {
  opacity: .72 !important;
}

.oracle-loader {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--oracle-gold) !important;
}

.oracle-ember {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, #ffe2a0, #c45d33 55%, transparent 76%) !important;
  box-shadow: 0 0 16px rgba(217,110,55,.48) !important;
  animation: oracle-ember-v3 1.15s ease-in-out infinite alternate !important;
}

.oracle-ember:nth-child(2) { animation-delay: .18s !important; }
.oracle-ember:nth-child(3) { animation-delay: .36s !important; }

@keyframes oracle-ember-v3 {
  from { transform: translateY(2px) scale(.82); opacity: .45; }
  to { transform: translateY(-2px) scale(1.12); opacity: 1; }
}

@media (max-width: 700px) {
  .oracle-thread-progress {
    margin-top: 14px !important;
    padding-top: 8px !important;
  }

  .oracle-thread-label {
    font-size: .88rem !important;
  }

  .oracle-mobile-bar.is-visible {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 99999 !important;
    padding: 10px !important;
    border: 1px solid rgba(217,185,120,.28) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(217,110,55,.16), transparent 12rem),
      linear-gradient(180deg, rgba(13,18,27,.97), rgba(5,7,11,.99)) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.52), 0 0 28px rgba(217,110,55,.08) !important;
    backdrop-filter: blur(10px) !important;
  }

  .oracle-mobile-bar-text {
    color: var(--oracle-blue) !important;
    text-align: center !important;
    font-size: .88rem !important;
    margin-bottom: 6px !important;
  }

  .oracle-mobile-action {
    width: 100% !important;
  }

  body.oracle-app-page {
    padding-bottom: 122px !important;
  }
}