/* Data oracle page (/orakel/): topic chips, crystal-ball loader, three tarot cards that turn one after another, prophecy, share, wall.
   The cards and the "night" panels use fixed colours, so they read the same in light and dark theme. */
.orp { --night: #140b28; --night-2: #241640; --night-3: #34205a; --gold: #e8c372; --gold-2: #a0803f; --cream: #f4ecdc; --violet: #b49cff; }
.orp-fun { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; font: 700 13px var(--font-m); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream); background: linear-gradient(135deg, #6d3fd6, #b0367f); }
.orp-hero .h2 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em; }
.orp-hero .h2::after { content: " 🔮"; font-size: .6em; vertical-align: .2em; }

/* ---- ask */
.orp-ask { margin: 22px 0 6px; }
.orp-pick { margin: 0 0 10px; font: 600 15px var(--font-m); color: var(--muted); }
.orp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.orp-topic { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line, rgba(127, 127, 127, .35)); background: transparent;
  color: var(--text); font: 600 15px var(--font-b); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.orp-topic:hover { transform: translateY(-1px); border-color: var(--violet); }
.orp-topic[aria-pressed="true"] { background: var(--night-2); color: var(--cream); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232, 195, 114, .25); }
.orp-topic:focus-visible, .orp-go:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.orp-go { min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; color: var(--cream); font: 700 18px var(--font-b); cursor: pointer;
  background: linear-gradient(135deg, #6d3fd6, #b0367f); animation: orp-glow 2.4s infinite; transition: transform .2s, filter .2s; }
.orp-go:hover { filter: brightness(1.1); transform: translateY(-2px); }
.orp-go[disabled] { opacity: .6; cursor: wait; animation: none; transform: none; }
.orp-msg { margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
.orp-msg:empty { display: none; }
.orp-msg.ok { color: var(--ok); font-weight: 600; }
.orp-msg.warn { color: var(--accent); font-weight: 500; }
@keyframes orp-glow { 0% { box-shadow: 0 0 0 0 rgba(180, 156, 255, .5); } 70% { box-shadow: 0 0 0 16px rgba(180, 156, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 156, 255, 0); } }

/* ---- loader: crystal ball with swirling mist */
.orl { margin: 18px 0 8px; padding: 26px 16px 22px; border-radius: var(--radius); text-align: center; color: var(--cream);
  background: radial-gradient(500px 260px at 50% 40%, #3a1f6e, var(--night) 72%); border: 1px solid #3a2766; }
.orl-ball { position: relative; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(180, 156, 255, .25) 30%, #2a1450 70%);
  box-shadow: 0 0 40px rgba(180, 156, 255, .55), inset 0 -12px 30px rgba(0, 0, 0, .45); animation: orl-pulse 2.6s ease-in-out infinite; }
.orl-ball::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 120px; height: 30px; transform: translateX(-50%); }
.orl-ball i { position: absolute; inset: 18%; border-radius: 50%; filter: blur(8px); mix-blend-mode: screen; animation: orl-swirl 4s linear infinite; }
.orl-ball i:nth-child(1) { background: radial-gradient(circle at 30% 40%, #ff7ad9 0, transparent 55%); }
.orl-ball i:nth-child(2) { background: radial-gradient(circle at 70% 60%, #7ad0ff 0, transparent 55%); animation-duration: 5.5s; animation-direction: reverse; }
.orl-ball i:nth-child(3) { background: radial-gradient(circle at 50% 30%, #ffd27a 0, transparent 50%); animation-duration: 3.2s; }
.orl-step { margin: 16px 0 0; font: 500 15px var(--font-m); min-height: 1.6em; transition: opacity .3s; }
.orl-step.out { opacity: 0; }
@keyframes orl-swirl { to { transform: rotate(360deg); } }
@keyframes orl-pulse { 50% { box-shadow: 0 0 70px rgba(180, 156, 255, .85), inset 0 -12px 30px rgba(0, 0, 0, .45); } }

/* ---- reading */
.orr { margin: 22px 0 8px; padding: 22px clamp(12px, 3vw, 28px) 24px; border-radius: var(--radius); color: var(--cream);
  background: radial-gradient(800px 380px at 50% 0, #2c1856, var(--night) 70%); border: 1px solid #3a2766; scroll-margin-top: 80px; }
.orr-meta { margin: 0 0 16px; text-align: center; font: 500 14px var(--font-m); color: #c9bce6; }
.orc-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 20px); }
.orc-slot { cursor: pointer; perspective: 900px; }
.orc-card { position: relative; aspect-ratio: 5 / 8.4; border-radius: 12px; background: var(--night-2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(232, 195, 114, .35); transition: transform .26s ease-in; }
.orc-slot:hover .orc-card { box-shadow: 0 18px 36px rgba(0, 0, 0, .5), 0 0 0 1px var(--gold), 0 0 24px rgba(232, 195, 114, .25); }
.orc-slot.turn .orc-card { transform: scaleX(0); }
.orc-back, .orc-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.orc-back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #2b1850 0 8px, #24143f 8px 16px); }
.orc-back svg { width: 100%; height: 100%; }
.orc-face { display: none; flex-direction: column; align-items: center; padding: 10px 8px 12px; text-align: center;
  background: linear-gradient(180deg, var(--night-3), var(--night-2) 55%); border: 2px solid var(--gold); }
.orc-slot.open .orc-back { display: none; }
.orc-slot.open .orc-face { display: flex; }
.orc-num { font: italic 700 15px Georgia, serif; color: var(--gold); }
.orc-sym { width: 62%; max-width: 120px; margin: 2px 0 0; }
.orc-sym svg { display: block; width: 100%; height: auto; }
.orc-name { margin: 2px 0 2px; font: 700 clamp(11px, 1.6vw, 14px) var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.orc-val { margin: 0; font: italic 700 clamp(17px, 3.2vw, 28px) Georgia, serif; color: var(--cream); }
.orc-sub { margin: 2px 0 6px; font: 400 clamp(10px, 1.4vw, 12px)/1.35 var(--font-m); color: #c9bce6; }
.orc-read { margin: auto 0 0; font: italic 400 clamp(11px, 1.6vw, 14px)/1.4 Georgia, serif; color: var(--cream); }
.orc-seis { stroke-dasharray: 260; stroke-dashoffset: 0; }
.orc-slot.open .orc-seis { animation: orc-draw 1.6s ease-out; }
.orc-slot.open .orc-rays { transform-origin: 60px 60px; animation: orc-spin 18s linear infinite; }
.orc-slot.open .orc-iss { animation: orc-drift 6s ease-in-out infinite alternate; }
@keyframes orc-draw { from { stroke-dashoffset: 260; } }
@keyframes orc-spin { to { transform: rotate(360deg); } }
@keyframes orc-drift { from { transform: translate(-6px, 3px) rotate(-4deg); } to { transform: translate(6px, -3px) rotate(4deg); } }

.orr-pro { max-width: 640px; margin: 26px auto 0; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .8s, transform .8s; }
.orr-pro.on { opacity: 1; transform: none; }
.orr-h { margin: 0 0 8px; font: 700 13px var(--font-m); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.orr-text { margin: 0; font: italic 400 clamp(18px, 2.6vw, 23px)/1.5 Georgia, serif; color: var(--cream); }
.orr-text::before { content: "“"; color: var(--gold); }
.orr-text::after { content: "”"; color: var(--gold); }
.orr-adv { margin: 14px 0 4px; font-size: 16px; color: var(--cream); }
.orr-adv b { color: var(--gold); }
.orr-extra { margin: 0; font: 500 14px var(--font-m); color: #c9bce6; }
.orr-extra b { color: var(--gold); }
.orr-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.orr-share a, .orr-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 14px var(--font-b);
  color: var(--cream); background: rgba(255, 255, 255, .08); border: 1px solid rgba(232, 195, 114, .45); text-decoration: none; cursor: pointer; }
.orr-share a:hover, .orr-share button:hover { background: rgba(232, 195, 114, .16); }
.orr-share .orr-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }

/* ---- wall */
.orw { margin-top: 36px; }
.orw-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.orw-list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--night-2); color: var(--cream); border: 1px solid #3a2766; transition: border-color .2s, transform .2s; }
.orw-list a:hover, .orw-list a.cur { border-color: var(--gold); transform: translateY(-2px); }
.orw-t { font: 700 12px var(--font-m); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.orw-a { font: italic 15px/1.4 Georgia, serif; }
.orw-d { font: 12px var(--font-m); color: #c9bce6; }

/* ---- how it works */
.orh { margin-top: 40px; }
.orh-steps { margin: 14px 0 18px; padding-left: 1.3em; }
.orh-steps li { margin: 0 0 10px; }
.orh-steps b { display: block; }
.orh-steps span { color: var(--muted); }

@media (max-width: 560px) {
  .orc-row { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
  .orc-card { aspect-ratio: auto; min-height: 330px; }
  .orc-sym { width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .orp-go, .orl-ball, .orl-ball i, .orc-slot.open .orc-rays, .orc-slot.open .orc-iss, .orc-slot.open .orc-seis { animation: none; }
  .orc-card, .orr-pro { transition: none; }
}