/* v2 keeps constant carousel geometry; transforms never animate card layout. */
.coverflow {
  touch-action: pan-y;
  user-select: none;
}
.flow-cards {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.flow-card {
  will-change: transform;
}
/* The printed artwork remains still; only angle-driven material highlights move. */
.card-art:after,
.card-glimmer {
  display: none;
}
.clarke-card .card-art {
  background: #050817;
  border-radius: 0;
}
.clarke-card .card-art > img {
  object-fit: contain;
}
.clarke-card .card-front:after {
  background: linear-gradient(180deg, transparent 66%, #080e0ed9 91%, transparent 98%);
}
.theme-back {
  background: #0d100f;
  --back-image: url("./assets/backs/atelier.webp");
  --back-art-height: 103.2%;
}
.back-clarke {
  --back-image: url("./assets/backs/clarke.webp");
  --back-art-height: 103.55%;
  border-color: #dcc282;
}
.back-classic {
  --back-image: url("./assets/backs/classic.webp");
  --back-art-height: 100%;
}
.back-half {
  position: absolute;
  inset: 0;
  background-image: var(--back-image);
  background-size: 100% var(--back-art-height, 100%);
  clip-path: inset(0 0 50% 0);
}
/* Reuse the same upper half after a half turn: the printed back cannot reveal orientation. */
.back-half-turn {
  transform: rotate(180deg);
}
.back-finish {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(118deg, transparent 0 18%, #fff0bd22 22%, transparent 28% 42%);
  background-size: 250% 250%;
  background-position: var(--back-light, 50%) 50%;
  mix-blend-mode: screen;
  opacity: .5;
}
.back-clarke .back-finish {
  opacity: .65;
}
.symbol-story {
  margin-top: 24px;
  border-top: 1px solid #c4a66b44;
  padding-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}
.symbol-story summary {
  color: var(--gold-bright);
  cursor: pointer;
}
.symbol-story h3 {
  margin: 20px 0 12px;
  font: 19px/1.7 var(--serif);
  color: #ead4ad;
}
.symbol-story dt { color: #dcc49d; margin-top: 14px; }
.symbol-story dd { margin: 5px 0 0; }
.symbol-story a { color: #cdb482; font-size: 12px; }
.symbol-adaptation { border-left: 1px solid #c4a66b55; padding-left: 14px; }
.symbol-adaptation strong { display: block; color: #dcc49d; font-weight: 400; }
.angle-secret {
  position: absolute;
  z-index: 8;
  left: 10%;
  right: 10%;
  bottom: 32%;
  padding: 8px 9px;
  border-top: 1px solid #ffdd9599;
  border-bottom: 1px solid #ffdd9544;
  font: 12px/1.6 var(--serif);
  color: #fff0c6;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(90deg, #17222b00, #10191fe6, #17222b00);
  opacity: var(--secret-visibility, 0);
  pointer-events: none;
  text-shadow: 0 0 8px #e8c277;
}
.angle-secret span {
  display: block;
  font-size: 20px;
  line-height: 1.2;
}
.viewer-stage > .card-shell {
  touch-action: none;
  transition: none;
  cursor: grab;
}
.viewer-stage > .card-shell:active {
  cursor: grabbing;
}
.reading-reversed {
  transform: rotateZ(180deg);
}
.orbit-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.angle-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  width: min(100%, 360px);
  margin: 10px auto 0;
}
.angle-control input {
  width: 170px;
  accent-color: #d9ba81;
}
.angle-control output {
  min-width: 35px;
}
.pure-view .orbit-controls,
.pure-view .angle-control {
  display: flex;
}
.ritual-page {
  overflow: hidden;
  padding-bottom: 120px;
}
.ritual-flow {
  height: 440px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  --flow-width: 218px;
  --flow-height: 336px;
  perspective: 1100px;
}
.ritual-flow .flow-card {
  top: 50%;
}
.ritual-flow .card-shell {
  box-shadow: none;
}
.ritual-flow .card-back {
  display: grid;
  transform: translateZ(0.2px);
}
.ritual-card-shell {
  overflow: hidden;
}
.ritual-flow .stage-aura {
  --aura: #ac87e9;
}
.ritual-sparks {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0;
  border: 1px solid #ead49c;
}
.drawing .ritual-sparks {
  animation: draw-wave 0.65s ease-out;
}
.ritual-flow .flow-card.picked-flight {
  transition:
    transform 0.62s cubic-bezier(0.2, 0.7, 0.15, 1),
    opacity 0.6s !important;
  transform: translateY(-160px) translateZ(160px) rotateZ(8deg) scale(0.35) !important;
  opacity: 0 !important;
}
.ritual-picked {
  height: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
}
.picked-token {
  color: #e5c890;
  animation: token-arrive 0.4s ease-out;
  font-size: 18px;
}
.picked-token small {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
}
.ritual-counter {
  min-width: 140px;
  color: var(--muted);
  font-size: 12px;
}
.ritual-page .flow-controls {
  margin: 0 auto 24px;
}
.reading-context {
  margin: 0 0 24px;
  border: 1px solid #b9a17330;
  border-radius: 12px;
  padding: 16px;
}
.reading-context summary {
  cursor: pointer;
  color: #cfbb97;
  font-size: 13px;
}
.reading-context summary span {
  font-size: 10px;
  color: var(--muted);
  margin-left: 8px;
}
.context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.context-grid label,
.spirit-form label,
.api-settings label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: #d0c1a8;
}
.context-grid label:first-child {
  grid-column: 1/-1;
}
.context-grid textarea {
  min-height: 85px;
}
.context-grid textarea,
.context-grid select,
.spirit-form input,
.spirit-form textarea,
.api-settings input {
  width: 100%;
  padding: 12px;
  color: #e6dcc7;
  background: #0c1517;
  border: 1px solid #b8a27840;
  border-radius: 7px;
  font: 13px/1.7 var(--sans);
  box-sizing: border-box;
}
.reversal-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  color: #d5c5a8;
}
.reversal-inline input {
  accent-color: #c9ac79;
}
.reversal-inline span {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.insight-jump {
  display: block;
  width: fit-content;
  margin: 18px auto;
  color: #d8bd89;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid #a48b5d55;
  padding-bottom: 6px;
}
.insight-panel {
  max-width: 920px;
  margin: 24px auto;
  text-align: left;
  scroll-margin-top: 100px;
}
.insight-heading {
  border-top: 1px solid #ae956333;
  padding-top: 36px;
}
.insight-heading h2 {
  font: 26px/1.6 var(--serif);
  color: #ead8b4;
}
.insight-panel p {
  font: 14px/2 var(--sans);
  color: #bcbcaf;
}
.insight-cards {
  display: flex;
  gap: 24px;
  margin: 26px 0;
}
.insight-cards article {
  flex: 1;
  padding: 20px;
  border-left: 1px solid #c4a77544;
  background: #16222366;
}
.insight-panel h3 {
  font: 18px/1.8 var(--serif);
  color: #dacaad;
  margin: 10px 0;
}
.possibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}
.possibility-grid article {
  padding: 22px;
  border: 1px solid #bd9d6733;
  border-radius: 12px;
}
.possibility-grid small,
.action-note small {
  display: block;
  color: var(--muted);
  font: 12px/1.9 var(--sans);
  margin-top: 8px;
}
.insight-unknowns {
  padding: 20px 0;
  font-size: 13px;
  color: #cabb9c;
  cursor: pointer;
}
.insight-panel .reflection-question {
  color: #d9c397;
  font-family: var(--serif);
  padding: 20px 0;
}
.deepseek-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
}
.deepseek-actions .api-notice,
.deepseek-actions .ai-status {
  width: 100%;
  font-size: 11px;
  margin: 0;
}
.deepseek-actions .ai-status {
  color: #e2bb82;
}
.primary-button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.api-settings {
  border-top: 1px solid #ac936133;
  margin-top: 24px;
  padding-top: 20px;
}
.api-settings h3 {
  color: #d9c29b;
  font-family: var(--serif);
}
.api-settings p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}
.api-settings form {
  display: grid;
  gap: 16px;
}
.sample-links {
  padding: 24px 0 0;
}
.sample-links p {
  font: 12px/1.8 var(--sans);
  color: var(--muted);
}
.sample-links > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.spirit-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 70px;
  max-width: 1050px;
  margin: 42px auto;
}
.spirit-portrait {
  text-align: center;
}
.spirit-card {
  display: block;
  width: 230px;
  height: 354px;
  margin: 0 auto 28px;
  border: 0;
  background: none;
  padding: 0;
}
.spirit-portrait h2 {
  color: #e0cbab;
  font-family: var(--serif);
}
.spirit-portrait p,
.spirit-portrait small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.spirit-portrait > small,
.spirit-portrait > .text-button {
  display: block;
  margin: 12px auto;
}
.spirit-stats {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin: 26px 0;
  color: var(--muted);
  font-size: 11px;
}
.spirit-stats strong {
  display: block;
  font: 28px var(--serif);
  color: #dcc398;
  margin-bottom: 8px;
}
.spirit-form {
  display: grid;
  gap: 24px;
  align-content: start;
}
.spirit-form textarea {
  min-height: 100px;
  resize: vertical;
}
.spirit-form #spirit-notes {
  min-height: 150px;
}
.spirit-form small {
  color: var(--muted);
  line-height: 1.8;
}
.spirit-form #spirit-status {
  font-size: 12px;
  color: #d0b88d;
}
.spirit-encounters h3 {
  font-family: var(--serif);
  color: #d2bd96;
}
.spirit-encounters p {
  font-size: 13px;
  color: var(--muted);
}
.history-link {
  display: flex;
  gap: 16px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #a1876022;
  background: none;
  padding: 16px 0;
  color: #cdbf9e;
  width: 100%;
}
.history-link time {
  font-size: 11px;
  color: var(--muted);
}
.history-link span {
  flex: 1;
}
.room-side .section-mark .text-button {
  font-size: 10px;
  padding: 0;
}
.bottom-nav {
  grid-template-columns: repeat(5, 1fr);
}
@keyframes draw-wave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(26);
  }
}
@keyframes token-arrive {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .ritual-flow {
    height: 350px;
    --flow-width: 200px;
    --flow-height: 307px;
  }
  .ritual-page h1 {
    font-size: 26px;
  }
  .ritual-page .reading-lead {
    font-size: 12px;
  }
  .context-grid,
  .possibility-grid {
    grid-template-columns: 1fr;
  }
  .insight-cards {
    flex-direction: column;
    gap: 12px;
  }
  .spirit-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .spirit-portrait {
    max-width: 350px;
    margin: auto;
  }
  .reversal-inline {
    flex-wrap: wrap;
  }
  .reversal-inline span {
    font-size: 10px;
  }
  .orbit-controls {
    gap: 14px;
  }
  .viewer-stage > .subtle-hint {
    font-size: 10px;
  }
  .viewer-stage {
    padding-bottom: 8px;
  }
  .viewer-dialog.pure-view .viewer-stage > .card-shell {
    max-height: calc(100dvh - 280px);
  }
  .bottom-nav .nav-item {
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ritual-sparks {
    animation: none !important;
  }
  .picked-flight {
    transition: none !important;
  }
}