body.divination-active, body.divination-active .app-shell { background: #fff; }
.divination-view { --divination-purple: #7b3cf1; --divination-ink: #101b58; width: min(100%, 480px); margin: 0 auto; padding-top: 12px; color: var(--divination-ink); }
.divination-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; color: #7783b4; background: transparent; font-size: .9375rem; }
.divination-back svg { width: 18px; height: 18px; }
.divination-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 22px; }
.divination-heading h1 { margin: 0; color: var(--divination-ink); font-size: clamp(1.9rem, 8vw, 2.9rem); font-weight: 900; line-height: 1.1; letter-spacing: -.045em; }
.divination-heading p { margin: 4px 0 0; color: #7f8bbb; font-size: clamp(.875rem, 3.2vw, 1.15rem); line-height: 1.35; }
.divination-heading > span { display: grid; flex: 0 0 60px; place-items: center; height: 60px; border-radius: 16px; color: var(--divination-purple); background: #f2ebff; }
.divination-heading > span svg { width: 44px; height: 44px; }
.divination-heading > span img { display: block; width: 44px; height: 44px; }
.divination-invitation { margin: 0; text-align: center; font-size: clamp(.9375rem, 3.6vw, 1.2rem); }
.divination-invitation strong { display: block; margin-top: 3px; color: var(--divination-purple); font-size: clamp(1.45rem, 6.5vw, 2rem); line-height: 1.25; font-weight: 900; letter-spacing: -.025em; }
.divination-scene { position: relative; isolation: isolate; width: 100%; aspect-ratio: 440 / 410; margin: 18px auto 0; background: radial-gradient(ellipse at 50% 50%, #d5b0ff55, #eee1ff44 45%, transparent 70%); }
.divination-sparkles { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; color: #b082fa; pointer-events: none; }
.divination-orb { --reveal: 0; position: absolute; z-index: 2; left: 10%; top: 0; display: block; width: 80%; aspect-ratio: 1; padding: 0; border-radius: 50%; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
.divination-orb:active { cursor: grabbing; }
.divination-orb:disabled { cursor: wait; opacity: .75; }
.divination-glass { position: absolute; inset: 0; display: block; overflow: hidden; border: 2px solid #c7a7ff; border-radius: 50%; background: radial-gradient(circle at 37% 24%, #fcf3ff, #d6b2ff 32%, #ac7ce0 65%, #8352c4); box-shadow: inset 0 0 0 5px #ffffffe0, inset 0 0 0 9px #c6a2f8a0, inset 12px 12px 34px #fff9, inset -12px -16px 24px #682dc687, 0 0 30px #d3a6ff55; }
#divinationPhoto { display: block; width: 100%; height: 100%; padding: 10px; border-radius: 50%; object-fit: cover; opacity: var(--reveal); filter: blur(calc((1 - var(--reveal)) * 18px)); transition: opacity .18s, filter .18s; }
#divinationPhoto[hidden] { display: none; }
.divination-mist { position: absolute; inset: -12%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 30% 28%, #fff0 18%, #fff9 25%, #d4a2ff99 35%, transparent 47%), radial-gradient(ellipse at 70% 64%, transparent 14%, #f9e8ffc9 22%, #ac76ea99 38%, transparent 51%), conic-gradient(from 60deg, #b484ed44, #fff9, #bc80ef88, #fcf2ffa8, #d6acff55, #fff9, #b484ed44); opacity: calc(1 - var(--reveal) * .86); filter: blur(7px); transition: opacity .25s; }
.divination-stage[data-phase="rubbing"] .divination-mist { animation: divination-swirl 5s linear infinite; }
.divination-gloss { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 7px #fff7, inset 0 0 28px 12px #c590eea0; background: radial-gradient(ellipse at 70% 87%, #ffffffb8, transparent 18%); pointer-events: none; }
.divination-gloss::before { content: ""; position: absolute; top: 12%; left: 14%; width: 32%; height: 9%; border-radius: 50%; background: #ffffffe3; transform: rotate(-40deg); box-shadow: -17px 13px 0 -6px #fffc; }
.divination-pedestal { position: absolute; z-index: 3; bottom: 0; left: 0; width: 100%; height: auto; pointer-events: none; }
.divination-gesture { position: absolute; z-index: 4; bottom: 13%; left: 30%; width: 40%; color: #fff; filter: drop-shadow(0 1px 5px #66329b); pointer-events: none; transition: opacity .2s; }
.divination-gesture svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.divination-stage[data-phase="result"] .divination-gesture { opacity: 0; }
.divination-progress { width: 100px; height: 4px; overflow: hidden; margin: 0 auto 8px; border-radius: 4px; background: #eee7fa; }
.divination-progress > span { display: block; width: var(--progress, 0%); height: 100%; background: #9759ee; transition: width .12s; }
.divination-status { margin: 6px 0 12px; color: #7d87b2; text-align: center; font-size: .875rem; line-height: 1.4; }
.divination-stage[data-phase="result"] .divination-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.divination-result { position: relative; overflow: hidden; padding: 16px 13px 13px; border: 1px solid #e9deff; border-radius: 15px; background: linear-gradient(120deg, #fcfaff, #f8f5ff); }
.divination-result[hidden], .divination-again[hidden], .divination-recovery[hidden] { display: none; }
.divination-result::after { content: "✧"; position: absolute; right: -3px; top: 2px; font-size: 105px; line-height: 1; color: #e8dbfc; pointer-events: none; }
.divination-result > p { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--divination-purple); font-weight: 850; font-size: .9375rem; }
.divination-result > p svg { width: 26px; height: 26px; }
.divination-result h2 { position: relative; z-index: 1; margin: 0 0 5px; color: var(--divination-ink); font-size: clamp(1.2rem, 5.6vw, 1.8rem); line-height: 1.2; letter-spacing: -.035em; }
.divination-result-meta, .divination-result-location { display: block; position: relative; z-index: 1; margin-top: 4px; color: #7e86b2; font-size: .875rem; line-height: 1.35; }
.divination-result-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 14px; padding: 11px; border-radius: 11px; color: white; background: linear-gradient(110deg, #8441f8, #773be6); font-size: 1rem; font-weight: 850; }
.divination-result-open svg { width: 20px; height: 20px; }
.divination-again { margin: 12px 0 0; color: #7f8bbb; font-size: .875rem; text-align: center; }
.divination-accessible { display: block; min-height: 44px; margin: 4px auto 0; padding: 8px; color: #6d4caa; background: transparent; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.divination-accessible:disabled { opacity: .5; }
.divination-recovery { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.divination-recovery button { min-height: 44px; padding: 10px 14px; border-radius: 12px; background: #f0e7ff; color: #6939b2; font-weight: 800; }
.divination-criteria { margin: 8px 0 0; color: #7f8aaa; text-align: center; font-size: .75rem; line-height: 1.45; }
.divination-view button:focus-visible { outline: 3px solid #6530c3; outline-offset: 4px; }
@keyframes divination-swirl { to { transform: rotate(360deg); } }
@media (min-width: 700px) { .divination-view { padding-top: 24px; }.divination-scene { max-width: 420px; } }
@media (max-width: 360px) { .divination-heading > span { flex-basis: 46px; height: 48px; }.divination-heading > span :is(svg, img) { width: 34px; height: 34px; }.divination-heading { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .divination-stage .divination-mist { animation: none !important; }.divination-view * { transition: none !important; } }
html[data-reduced-motion="true"] .divination-stage .divination-mist { animation: none !important; }
html[data-theme="dark"] body.divination-active, html[data-theme="dark"] body.divination-active .app-shell { background: #191529; }
html[data-theme="dark"] .divination-view { --divination-ink: #f1eaff; --divination-purple: #bb95ff; }
html[data-theme="dark"] .divination-result { background: #241b38; border-color: #483561; }
html[data-theme="dark"] .divination-result::after { color: #433058; }
html[data-theme="dark"] .divination-heading > span { background: #32234b; }
html[data-theme="dark"] :is(.divination-heading p, .divination-status, .divination-criteria, .divination-again, .divination-result-meta, .divination-result-location) { color: #b6a6ce; }
html[data-theme="dark"] .divination-accessible { color: #c9aff1; }