.oracle { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.orb-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.orb { width: 8rem; height: 8rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xl); background: var(--bg-2); color: var(--text-2); box-shadow: inset 0 0 0 2px var(--ring, transparent), 0 14px 30px -18px rgb(26 25 21 / .6); }
.ans { flex: none; min-width: 4.25rem; padding: 2px 8px; border-radius: 99px; text-align: center; font-size: var(--fs-xs); background: var(--bg-2); }
[data-answer="yes"] { background: var(--accent); color: var(--bg-0); }
[data-answer="no"] { background: var(--btn-bg); color: var(--btn-fg); }
.orb[data-answer="maybe"] { --ring: var(--border-strong); background: var(--bg-1); color: var(--text-1); }
.orb:not([data-answer="none"]) { animation: reveal var(--dur-3) var(--ease); }
.is-asking { animation: wobble .7s cubic-bezier(.3, .6, .4, 1); }
@keyframes wobble { 20% { transform: rotate(-8deg) scale(1.04); } 45% { transform: rotate(7deg) scale(1.06); } 70% { transform: rotate(-4deg); } }
@keyframes reveal { from { opacity: 0; transform: scale(.94); } }
.oracle-result { width: 100%; }
.oracle .readout-label { margin: 0; min-height: 3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.oracle .is-quiet, .opt, .history .hint, .ask-log .is-quiet { color: var(--text-3); }
.opt { font-weight: 400; }
.touch .card > .ask-btn { justify-self: stretch; }
.history { display: grid; gap: var(--sp-4); }
.history > .btn { justify-self: start; }
.history-title { font-size: var(--fs-md); }
.ask-log li { align-items: flex-start; }
.ask-log .main { display: grid; white-space: normal; overflow-wrap: anywhere; }
.ask-log time { font-size: var(--fs-xs); }
@media (min-width: 48em) { .orb { width: 11rem; height: 11rem; font-size: var(--fs-3xl); } }
@media (prefers-reduced-motion: reduce) { .is-asking, .orb { animation: none !important; } }