/* The outer plane deals the card; the inner plane turns it over. */
.reading-page .chat-card__deal { position: relative; transform-origin: center; }
.reading-page .chat-card__stage { cursor: pointer; }
.reading-page .chat-card__stage:disabled { opacity: 1; cursor: default; }
.reading-page .chat-card__flip { transform: rotateY(180deg); transition: transform 700ms cubic-bezier(.4,0,.6,1); }
.reading-page .chat-card.is-revealed .chat-card__flip { transform: rotateY(0); }
.reading-page .chat-card__front, .reading-page .chat-card__back { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 2px 1px 0 #8c784f, 3px 2px 0 #554b37, 0 10px 18px #0004; }
.reading-page .chat-card__front { transform: translateZ(1px); overflow: hidden; }
.reading-page .chat-card__back { background: radial-gradient(ellipse at 30% 20%, #d6b66e20, transparent 65%), var(--surface); visibility: visible; transition: visibility 0s 350ms; }
/* Explicitly retire the back at the edge-on midpoint: WebKit can keep painting
   its pseudo-elements after a preserve-3d parent returns to an identity matrix. */
.reading-page .chat-card.is-revealed .chat-card__back { visibility: hidden; }
.reading-page .chat-card__front::after { content: ''; position: absolute; inset: -30%; background: linear-gradient(110deg, transparent 35%, #fff3 49%, transparent 62%); transform: translateX(-110%); pointer-events: none; }
.reading-page .chat-card.is-revealed .chat-card__front::after { animation: card-glint 850ms 220ms ease-out both; }
.reading-page .chat-card__caption { visibility: hidden; }
.reading-page .chat-card.is-revealed .chat-card__caption { visibility: visible; }
.reading-page .is-stacked .chat-card__deal { transform: translate3d(var(--deal-x), var(--deal-y), 0) rotate(var(--deal-angle)); }
.reading-page .is-dealing .chat-card__deal { transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.reading-page .is-static .chat-card__flip { transition: none; }
.reading-page .is-static .chat-card__back,
.reading-page .chat-card.is-instant .chat-card__flip,
.reading-page .chat-card.is-instant .chat-card__back { transition: none; }
.reading-page .is-static .chat-card__front::after { animation: none; }
.card-spread-status { color: var(--muted); font-size: .8125rem; margin: 12px 0 0; min-height: 1.6em; }
.chat-card__load-error { position: absolute; inset: 6px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 4px; border-radius: 10px; background: var(--surface); font-size: .75rem; line-height: 1.4; color: var(--muted); }
.chat-card__load-error[hidden] { display: none; }
.chat-card__load-error button { min-height: 44px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); color: var(--text); font: inherit; cursor: pointer; }
.card-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 12px; }
.card-sparks i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: card-spark 1000ms 250ms ease-out both; }
@keyframes card-glint { to { transform: translateX(110%); } }
@keyframes card-spark { from { opacity: 0; transform: scale(.3); } 25% { opacity: .85; } to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.2); } }
.guest-chat-note { width: 100%; max-width: 900px; margin: 0 auto 12px; padding: 0 24px 20px; color: var(--muted); font-size: .8125rem; }
.guest-chat-note a { color: var(--accent); }
.guest-chat-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.guest-chat-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.is-guest-chat #spread-picker, .is-guest-chat #chat-limit, .is-guest-chat #chat-context-note, .is-guest-chat #chat-spread-hint { display: none; }
.is-guest-chat .app-tabs [data-view="catalog"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .reading-page .chat-card__deal, .reading-page .chat-card__flip, .reading-page .chat-card__back { transition: none; }
  .reading-page .chat-card__front::after, .card-sparks { display: none; animation: none; }
}