/* Local celestial linework. No remote art, fonts or animation dependencies. */
.divination-entry-icon svg { width: 25px; height: 25px; }
.divination-dialog {
    position: fixed; z-index: 180; inset: 0;
    display: grid; place-items: end center;
    color: #eee5d4;
    --divination-gold: #c9ab73;
}
.divination-dialog [hidden] { display: none !important; }
.divination-dialog[hidden] { display: none !important; }
.divination-backdrop {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: #080a12b8;
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    animation: divination-fade-in 240ms ease both;
}
.divination-sheet {
    /* Scoped palette also keeps the record list legible under either app theme. */
    --bg: #131824; --bg2: #202535; --surface: #1a2030;
    --text: #eee5d4; --text2: #c6bcaa; --text3: #a69c8c;
    --border: #a38b5e38; --accent: #c9ab73; --accent-dim: #c9ab7315;
    position: relative; width: min(500px, 100%);
    max-height: min(93dvh, 850px); min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg);
    background: radial-gradient(ellipse at 50% 0, #39435b44, transparent 60%), var(--bg);
    border: 1px solid #b99c6947; border-bottom: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 24px 100px #0008, inset 0 1px #e4cfa514;
    animation: divination-sheet-in 400ms cubic-bezier(.22,1,.36,1) both;
}
.divination-sheet button { -webkit-tap-highlight-color: transparent; }
.divination-dialog button:focus-visible, #divination-question:focus-visible {
    outline: 2px solid var(--divination-gold); outline-offset: 3px;
}
.divination-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0; gap: 12px; padding: 20px 22px 14px;
}
.divination-header > div:first-child { display: grid; gap: 5px; }
.divination-header strong { font-family: Georgia, 'Songti SC', serif; font-size: 19px; letter-spacing: .13em; font-weight: 500; }
.divination-header small { color: var(--text3); font-size: 10px; letter-spacing: .06em; }
.divination-header-actions { display: flex; align-items: center; gap: 8px; }
.divination-history-toggle {
    min-height: 36px; display: flex; align-items: center; gap: 6px;
    padding: 6px 11px; color: var(--text2); border: 1px solid var(--border);
    border-radius: 30px; font-size: 11px;
}
.divination-history-toggle span { color: var(--accent); font-family: var(--font-mono); font-size: 9px; }
.divination-history-toggle.active { background: var(--accent-dim); border-color: var(--accent); }
.divination-history-toggle:disabled { opacity: .4; }
.divination-close { width: 36px; height: 36px; color: var(--text2); font-size: 25px; border-radius: 50%; background: #ffffff08; }
.divination-steps { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 24px; margin: 0 22px; padding: 12px 0 16px; list-style: none; border-bottom: 1px solid var(--border); }
.divination-steps li { display: flex; gap: 6px; align-items: center; color: #918674; font-size: 10px; letter-spacing: .08em; }
.divination-steps li span { font-family: Georgia, serif; font-size: 11px; opacity: .6; }
.divination-steps .current { color: #ead2a3; }
.divination-steps .current span { opacity: 1; }
.divination-steps .done { color: var(--accent); }
.divination-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9ab7333 transparent; padding: 18px 24px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.divination-setup, .divination-draw, .divination-history { display: grid; gap: 16px; }
.divination-invitation { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 0 6px; }
.divination-seal { position: relative; display: grid; place-items: center; width: 84px; height: 84px; color: #d4b87e; border: 1px solid #c9ab7333; border-radius: 50%; background: radial-gradient(circle, #c9ab7312, transparent 70%); }
.divination-seal::before, .divination-seal::after { content: ''; position: absolute; inset: 9px; border: 1px solid #c9ab732e; border-radius: 50%; }
.divination-seal::after { inset: 22px -9px; transform: rotate(-35deg); }
.divination-seal i { position: absolute; width: 5px; height: 5px; top: 18px; left: 9px; background: #d4b87e; transform: rotate(45deg); box-shadow: 66px 54px 0 -1px #d4b87e; }
.divination-seal span { font-family: Georgia, serif; font-size: 50px; line-height: 1; transform: rotate(-18deg); }
.divination-eyebrow { margin-top: 6px; color: var(--accent); font-family: Georgia, serif; font-size: 8px; letter-spacing: .2em; }
.divination-invitation h2 { margin: 0; font-family: 'Songti SC', 'Noto Serif CJK SC', serif; font-size: 23px; font-weight: 400; letter-spacing: .14em; }
.divination-invitation p { margin: 0; color: var(--text3); font-size: 11px; line-height: 1.9; letter-spacing: .04em; }
.divination-field { display: grid; gap: 9px; }
.divination-field-label { color: var(--text2); font-size: 11px; letter-spacing: .08em; }
.divination-field-label small { margin-left: 6px; color: var(--text3); font-size: 10px; }
.divination-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--border); background: #080d1733; }
.divination-segmented button { min-height: 39px; color: var(--text3); border: 1px solid transparent; border-radius: 8px; font-size: 13px; transition: background 180ms, color 180ms; }
.divination-segmented button small { margin-left: 4px; font-size: 9px; font-family: Georgia, serif; opacity: .7; }
.divination-segmented button.active { color: #ead2a3; border-color: #c9ab733b; background: #c9ab7312; }
#divination-question { width: 100%; min-height: 82px; max-height: 150px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: #090e193b; font-size: 16px; line-height: 1.6; }
#divination-question::placeholder { color: #8e877c; font-size: 12px; }
.divination-spreads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.divination-spreads button { display: flex; gap: 12px; align-items: center; min-height: 68px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text2); text-align: left; background: #ffffff03; }
.divination-spreads button.active { border-color: #c9ab7399; background: #c9ab730c; }
.divination-spreads b { display: grid; place-items: center; width: 29px; height: 40px; flex-shrink: 0; border: 1px solid #c9ab7366; border-radius: 4px; color: var(--accent); font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.divination-spreads span { display: grid; gap: 4px; font-size: 12px; }
.divination-spreads strong { color: var(--text3); font-size: 10px; font-weight: 400; }
.divination-primary, .divination-secondary { min-height: 46px; padding: 12px 14px; border-radius: 12px; font-size: 12px; transition: opacity 180ms, transform 180ms; }
.divination-primary { color: #211c14; background: linear-gradient(120deg, #e0c593, #bd9c61); box-shadow: 0 4px 18px #c9ab7314; font-weight: 600; letter-spacing: .06em; }
#divination-start { margin-top: 2px; }
#divination-start span { margin-left: 10px; }
.divination-secondary { border: 1px solid var(--border); color: var(--text2); background: #ffffff04; }
.divination-primary:disabled { opacity: .32; pointer-events: none; }
.divination-primary:active, .divination-secondary:active { transform: scale(.98); }
.divination-question-preview { margin: 0; padding: 10px 16px; max-height: 86px; overflow: auto; border-left: 1px solid #c9ab7366; color: var(--text2); background: linear-gradient(90deg, #c9ab730b, transparent); font-family: 'Songti SC', serif; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.divination-selected { min-height: 264px; display: grid; grid-template-columns: minmax(0, 145px); justify-content: center; align-items: center; gap: 12px; padding: 18px 4px 6px; background: radial-gradient(ellipse, #c9ab730a, transparent 70%); }
.divination-selected.three { grid-template-columns: repeat(3, minmax(0, 120px)); min-height: 230px; gap: 10px; }
.divination-slot { display: grid; min-width: 0; justify-items: center; gap: 12px; }
.divination-slot-label { color: var(--text3); font-size: 10px; letter-spacing: .12em; }
.divination-card-placeholder, .divination-flip { width: 100%; aspect-ratio: 5 / 8; border-radius: 9px; }
.divination-card-placeholder { position: relative; display: grid; place-items: center; border: 1px solid #c9ab7333; background: #090d160f; color: #c9ab7366; }
.divination-card-placeholder::before { content: ''; position: absolute; inset: 6px; border: 1px dashed #c9ab7326; border-radius: 5px; }
.divination-card-placeholder span { font-size: 24px; }
.divination-card-placeholder small { position: absolute; bottom: 16px; font-family: Georgia, serif; font-size: 9px; }
.divination-flip { perspective: 1000px; }
.divination-flip-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.divination-flip.revealed .divination-flip-inner { transform: rotateY(180deg); }
.divination-flip .divination-card-back, .divination-card-front { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.divination-card-front { transform: rotateY(180deg); }
.divination-card-back { position: relative; overflow: hidden; border: 1px solid #d6b97d; border-radius: 8px; color: #d1b37a; background: radial-gradient(ellipse at 50% 40%, #30384c, #171f31 75%); box-shadow: 0 8px 22px #0004; }
.divination-card-back svg { display: block; width: 100%; height: 100%; }
.divination-card { position: relative; width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid #b9a079; border-radius: 8px; color: #483c2c; background: radial-gradient(ellipse at 40% 20%, #fffaf0, transparent), linear-gradient(140deg, #eee4d1, #d8c8ab); box-shadow: 0 12px 26px #0005, inset 0 0 0 3px #fffbef66; }
.divination-card::before { content: ''; position: absolute; inset: 5px; pointer-events: none; border: 1px solid #8b734c66; border-radius: 4px; }
.divination-card-top, .divination-card-bottom { position: relative; display: flex; justify-content: space-between; gap: 4px; font-family: Georgia, serif; font-size: 8px; line-height: 1.4; }
.divination-card-bottom { flex-direction: column; align-items: center; font-size: 7px; text-align: center; }
.divination-card-art { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; }
.divination-card-halo { position: absolute; width: 90%; aspect-ratio: 1; top: 9%; border: 1px solid #9d7b3e4d; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #b7935314 0deg 1deg, transparent 1deg 15deg); }
.divination-card-halo::before { content: ''; position: absolute; inset: 7px; border: 1px solid #9d7b3e4d; border-radius: 50%; }
.divination-card-glyph { z-index: 1; display: grid; place-items: center; width: 60px; height: 65px; font-family: Georgia, serif; font-size: 45px; line-height: 1; color: #806534; filter: saturate(.35); }
.divination-card.reversed .divination-card-glyph { transform: rotate(180deg); }
.divination-card-name { position: relative; margin-top: 8px; font-family: 'Songti SC', serif; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.3; }
.divination-card-keyword { position: relative; color: #766448; font-size: 9px; text-align: center; line-height: 1.4; }
.divination-card-position.reversed { color: #914f43; }
.divination-selected.three .divination-card { padding: 9px 7px; }
.divination-selected.three .divination-card-glyph { width: 44px; height: 44px; font-size: 34px; }
.divination-selected.three .divination-card-name { font-size: 12px; margin-top: 3px; }
.divination-selected.three .divination-card-art { gap: 5px; padding: 5px 0; }
.divination-selected.three .divination-card-top { font-size: 7px; }
.divination-selected.three .divination-card-keyword { font-size: 8px; }
.divination-hint, .divination-status { min-height: 18px; margin: 0; color: var(--text3); text-align: center; font-size: 11px; line-height: 1.7; }
.divination-status { color: var(--accent); }
.divination-status:empty { display: none; }
.divination-pool { display: flex; gap: 9px; overflow-x: auto; margin-inline: -24px; padding: 14px 24px 20px; scrollbar-width: none; }
.divination-pool::-webkit-scrollbar { display: none; }
.divination-pick { width: 64px; aspect-ratio: 5 / 8; flex: 0 0 64px; padding: 0; transition: transform 200ms, opacity 200ms; animation: divination-deal 440ms var(--deal-delay) cubic-bezier(.22,.75,.22,1) backwards; }
.divination-pick:hover:not(:disabled), .divination-pick:focus-visible:not(:disabled) { transform: translateY(-8px); box-shadow: 0 0 18px #c9ab7330; }
.divination-pick.picked { opacity: .1; transform: translateY(8px) scale(.94); }
.divination-pool.complete .divination-pick:not(.picked) { opacity: .3; }
.divination-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.divination-shuffle { min-height: 290px; display: grid; place-content: center; justify-items: center; gap: 30px; }
.divination-shuffle > span { color: var(--text3); font-size: 11px; letter-spacing: .06em; }
.divination-shuffle-stack { width: 110px; height: 176px; position: relative; }
.divination-shuffle-stack .divination-card-back { position: absolute; inset: 0; width: 100%; height: 100%; animation: divination-shuffle 1000ms calc(var(--i) * -220ms) ease-in-out infinite; }
.divination-flying-card { position: fixed; z-index: 5; transform-origin: left top; pointer-events: none; }
.divination-history {
    gap: 12px;
}

.divination-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.divination-history-heading > div {
    display: grid;
    gap: 2px;
}

.divination-history-heading strong {
    font-size: 14px;
    font-weight: 600;
}

.divination-history-heading small {
    color: var(--text3);
    font-size: 10px;
}

#divination-history-clear {
    padding: 7px 9px;
    color: var(--text3);
    border-radius: 8px;
    font-size: 10px;
}

#divination-history-clear:active {
    color: var(--accent);
    background: var(--accent-dim);
}

.divination-history-list {
    display: grid;
    gap: 9px;
}

.divination-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.divination-history-open {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 12px 10px 11px 13px;
    text-align: left;
}

.divination-history-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
}

.divination-history-meta b {
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
}

.divination-history-question {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.divination-history-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.divination-history-cards span {
    padding: 4px 7px;
    color: var(--text2);
    background: var(--bg2);
    border-radius: 999px;
    font-size: 9px;
}

.divination-history-delete {
    align-self: stretch;
    display: grid;
    place-items: center;
    color: var(--text3);
    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    font-size: 15px;
}

.divination-history-delete:active {
    color: var(--accent);
    background: var(--accent-dim);
}

.divination-history-empty {
    min-height: 260px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    color: var(--text3);
    text-align: center;
}

.divination-history-empty:not([hidden]) {
    display: grid;
}

.divination-history-empty span {
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 34px;
    opacity: .5;
}

.divination-history-empty strong {
    color: var(--text2);
    font-size: 13px;
    font-weight: 500;
}

.divination-history-empty small {
    max-width: 230px;
    font-size: 10px;
    line-height: 1.5;
}


@media (min-width: 620px) {
    .divination-dialog { place-items: center; padding: 24px; }
    .divination-sheet { border-bottom: 1px solid #b99c6947; border-radius: 24px; }
}
@media (max-width: 360px) {
    .divination-header { padding-inline: 16px; }
    .divination-body { padding-inline: 16px; }
    .divination-selected.three { gap: 7px; }
    .divination-pool { margin-inline: -16px; padding-inline: 16px; }
    .divination-selected.three .divination-card-name { font-size: 11px; }
    .divination-selected.three .divination-card-glyph { font-size: 28px; height: 34px; }
    .divination-selected.three .divination-card-top { font-size: 6px; }
    .divination-seal { width: 80px; height: 80px; }
    .divination-seal span { font-size: 46px; }
}
@media (max-height: 650px) {
    .divination-seal { width: 65px; height: 65px; }
    .divination-seal span { font-size: 38px; }
    .divination-invitation { gap: 7px; }
}
@keyframes divination-fade-in { from { opacity: 0; } }
@keyframes divination-sheet-in { from { opacity: 0; transform: translateY(32px) scale(.985); } }
@keyframes divination-deal { from { opacity: 0; transform: translateY(16px) rotate(-8deg); } }
@keyframes divination-shuffle {
    0%, 100% { transform: translateX(0) rotate(calc((var(--i) - 1) * 5deg)); }
    40% { transform: translateX(calc((var(--i) - 1) * 58px)) rotate(calc((var(--i) - 1) * 16deg)) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .divination-dialog *, .divination-dialog *::before, .divination-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}