#omg-header {
  z-index: 450;
}

.tagline {
  opacity: 0.85;
  margin: 0 0 20px;
}

/* Draw a Card / Draw All / Enter Drawing: same pattern as Rune Reading */
.draw-mode-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0 5px;
}
.draw-btn {
  margin: 8px 5px 0 0;
}
.draw-btn.secondary {
  background-color: transparent;
  border: 2px solid #3182ce;
}
.draw-btn.secondary:hover,
.draw-btn.secondary:focus {
  background-color: #2b6cb0;
}
.draw-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* light theme: the theme's buttons have white text, which vanishes on the transparent outline button */
html[data-theme="light"] .draw-btn.secondary {
  color: #2b6cb0;
}
html[data-theme="light"] .draw-btn.secondary:hover,
html[data-theme="light"] .draw-btn.secondary:focus {
  color: white;
}
/* blue theme: the outline button must stand out on the blue background */
html[data-theme="evol-blue"] .draw-btn.secondary {
  color: white;
  border-color: white;
}
html[data-theme="evol-blue"] .draw-btn.secondary:hover,
html[data-theme="evol-blue"] .draw-btn.secondary:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.entry-form {
  display: none;
  max-width: 640px;
  margin: 10px 0 20px;
}
.entry-form.open {
  display: block;
}
.entry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.entry-position {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-right: 40px;
}
.entry-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.entry-selects {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.entry-arcana,
.entry-card {
  width: 100%;
}
.entry-thumb img {
  display: none;
  box-sizing: border-box;
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  border-radius: 4px;
  border: 1px solid silver;
}
.entry-thumb img[src] {
  display: block;
  cursor: pointer;
}
.entry-error {
  min-height: 1.2em;
  color: #e07a7a;
  margin: 6px 0 0;
}
.entry-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.entry-actions button {
  margin: 0;
}
.entry-clear {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
}
.entry-clear:hover,
.entry-clear:focus {
  opacity: 0.85;
}

.back-picker-block {
  margin: 14px 0 5px;
}
.back-picker-label {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 8px;
}
.back-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.back-swatch {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 40px;
  height: 68px;
  border: 1px solid silver;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0.75;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.back-swatch img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.back-swatch:hover {
  opacity: 1;
  transform: scale(1.2);
  position: relative;
  z-index: 1;
}
.back-swatch.selected {
  opacity: 1;
  border-color: currentColor;
  box-shadow: 0 0 0 2px currentColor;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0;
  position: relative;
  z-index: 401;
}
.card-grid.hidden {
  display: none;
}

.interpret-bar {
  min-height: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.interpret-btn {
  margin: 10px 0 5px 0;
}

.interpretation-view {
  display: none;
  position: relative;
  z-index: 401;
}
.interpretation-view.open {
  display: block;
  margin: 20px 0;
}
.interpret-section {
  margin-bottom: 30px;
}
.interpret-section h3 {
  margin: 0 0 14px;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.interpret-credit {
  margin: 100px 0 0;
  font-size: 0.85em;
  opacity: 0.7;
}
.interpret-credit a {
  color: inherit;
}
.interpret-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* Same look as the omg-themes feature cards: themed background, thick
   border, rounded corners. The card art and the explanation text sit
   side by side as two columns nested inside. */
.interpret-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 0 0 auto;
  width: min(340px, 100%);
  box-sizing: border-box;
  background-color: var(--card-bg);
  border: 3px solid var(--card-border);
  border-radius: 10px;
  padding: 15px 20px 20px;
  text-align: left;
  cursor: pointer;
  /* clips the text at the left/right edges while it slides out as the card
     widens (top/bottom are left open so a hovered card image can grow) */
  clip-path: inset(-20px 0);
  transition: width 0.7s ease, border-color 0.15s ease;
}
.interpret-card:hover {
  border-color: color-mix(in srgb, var(--card-border), white 40%);
}
.interpret-card.active {
  border-color: currentColor;
}
/* Held right after the interpretation view is built: the card is only as
   wide as the art + its padding/border (90 + 2*20 + 2*3), and unclipped so
   the card art can fly in from the cross. Once the art has landed the
   class is removed and the card widens to full size while the text slides
   out from under the art. */
.interpret-card.pending {
  width: 136px;
  clip-path: none;
  transition: none;
}
.interpret-card .card-frame {
  width: 90px;
  flex-shrink: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.interpret-card .card-frame {
  transition: transform 0.15s ease;
}
.interpret-card:hover .card-frame {
  transform: scale(1.1);
}
.interpret-card-info {
  /* fixed text-column width (full card 340 - 46 padding/border - 90 art -
     16 gap) so its wrapping, and so the card height, never changes while
     the card is narrow or widening */
  flex: 1 0 188px;
  position: relative;
  z-index: 1;
  transition: transform 0.7s ease, opacity 0.7s ease;
}
/* Held on the info block right after the interpretation view is built, so
   it starts off hidden and shifted under the card art; removed once the
   card has finished flying into place, so the text visibly slides out
   from the card's left edge instead of just appearing alongside it. */
.interpret-card-info.pending {
  opacity: 0;
  transform: translateX(-100%);
  transition: none;
}
.interpret-card-position {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.interpret-card-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--card-strong);
  margin: 2px 0 6px;
}
.interpret-card .keywords {
  justify-content: flex-start;
  margin-bottom: 8px;
}
.interpret-card-line {
  font-size: 0.85em;
  color: var(--card-foot);
  margin: 0;
  line-height: 1.4;
}

.tarot-card {
  width: 130px;
  cursor: pointer;
  text-align: center;
  opacity: 0;
  transform: translateY(-16px);
  animation: card-deal 0.4s ease forwards;
  transition: transform 0.15s ease;
}
/* The deal-in animation (fill-mode: forwards) keeps controlling the card's
   own `transform`, so a :hover transform on the card itself never applies.
   Scale the card art instead. */
.tarot-card .card-frame {
  transition: transform 0.15s ease;
}
.tarot-card:not(.placeholder):hover .card-frame {
  transform: scale(2);
}
.tarot-card:hover:not(.crossing) {
  position: relative;
  z-index: 5;
}
@keyframes card-deal {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tarot-card-position {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 6px;
}
.tarot-card-position.clickable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.tarot-card-position.clickable:hover {
  opacity: 1;
  color: inherit;
}

/* No backing panel around the card art: the frame is just a transparent
   wrapper, so the image sits directly on the page. Its (invisible) border
   is kept so the active / next-up highlight rings still work. */
.card-frame {
  background: none;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 8px;
  box-sizing: border-box;
}

.card-frame img {
  width: 100%;
  border-radius: 7px;
  display: block;
}

.tarot-card .card-frame {
  width: 100%;
}

.tarot-card.active .card-frame {
  border-color: currentColor;
  box-shadow: 0 0 0 2px currentColor;
}

/* A card previewed live on the spread while filling in the "Enter Drawing"
   form -- not yet dealt for real, so it reads as a soft draft, not a
   finished placement. */
.tarot-card.preview {
  cursor: pointer;
}
.tarot-card.preview .card-frame {
  opacity: 0.8;
  border-style: dashed;
}

.tarot-card.next-up .card-frame {
  border-color: currentColor;
  animation: next-up-pulse 1.6s ease-in-out infinite;
}
@keyframes next-up-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px currentColor, 0 0 6px 1px currentColor;
  }
  50% {
    box-shadow: 0 0 0 2px currentColor, 0 0 18px 4px currentColor;
  }
}

.card-flip {
  perspective: 800px;
  position: relative;
  z-index: 2;
}
.card-flip-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.card-flip-inner.flipped {
  transform: rotateY(180deg);
}
.card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-face.card-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(180deg);
}

/* The name rests tucked up behind the card art (which sits above it) and
   slides down out from under the card on hover, rather than fading. */
.tarot-card-name {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 0.85em;
  transform: translateY(calc(-100% - 12px));
  transition: transform 0.3s ease;
}
.tarot-card:hover:has(.card-flip-inner.flipped) .tarot-card-name {
  transform: translateY(0);
}
/* preview cards (Enter Drawing) have no flip, so their name stays put */
.tarot-card.preview .tarot-card-name {
  transform: none;
}

.detail-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
}

.card-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 500;
  padding: 60px 24px 24px;
  border-radius: 0;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
.card-detail.open {
  transform: translateX(0);
}

.detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6em;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 4px 8px;
  margin: 0;
}

.detail-header {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 15px;
}
.detail-header .card-frame {
  width: 100px;
  flex-shrink: 0;
}
.detail-header h3 {
  margin: 0 0 4px;
}
.detail-position {
  opacity: 0.7;
  margin-bottom: 8px;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.keyword {
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
  opacity: 0.85;
}

.card-detail h4 {
  margin: 14px 0 6px;
}
.card-detail ul {
  margin: 0;
  padding-left: 20px;
}
.card-detail .fortune {
  font-style: italic;
}
.card-detail .position-meaning {
  margin: 0;
  line-height: 1.5;
}

.detail-credit {
  margin: 16px 0 0;
  font-size: 0.75em;
  opacity: 0.65;
  line-height: 1.4;
}
.detail-credit a {
  color: inherit;
}

/* Celtic Cross spread: cross-shaped grid + a staff of 4 cards beside it */
.card-grid.celtic-layout {
  align-items: flex-start;
  gap: 60px;
  margin-top: 131px;
}

.celtic-cross {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    ".    top    ."
    "left center right"
    ".    bottom .";
  row-gap: 40px;
  column-gap: 84px;
  margin-top: 30px;
}
.celtic-cross .tarot-card {
  width: 84px;
}
.cross-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.area-top {
  grid-area: top;
}
.area-left {
  grid-area: left;
}
.area-right {
  grid-area: right;
}
.area-bottom {
  grid-area: bottom;
}
.area-center {
  grid-area: center;
  position: relative;
}

.tarot-card.crossing {
  --cross-offset-x: 0px;
  --cross-offset-y: 0px;
  /* The standalone `translate` property composes with `transform` below but,
     unlike a value baked into an animated `transform`, it stays live: CSS
     animations snapshot var() values used inside their keyframes at the
     moment they start, so a custom property changed later (once we've
     measured the real card art and know the correction to apply) would
     otherwise be ignored once the deal-in animation finishes. */
  translate: var(--cross-offset-x) var(--cross-offset-y);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  animation-name: card-deal-crossing;
}
@keyframes card-deal-crossing {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.celtic-staff {
  display: flex;
  flex-direction: column-reverse;
  gap: 14px;
  margin-top: -91px;
}
.celtic-staff .tarot-card {
  width: 84px;
}

/* Placeholder slots, shown until a card is drawn into them */
.placeholder-frame {
  background: transparent;
  border: 1px dashed currentColor;
  aspect-ratio: 2 / 3;
}
.tarot-card.placeholder {
  cursor: default;
}

/* The face-down deck players draw from */
.deck-area {
  padding: 24px;
  position: relative;
  z-index: 401;
}
.deck-band {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}
/* Each card pivots from its own top-center, out at the shared --radius,
   swung to its --angle: together they read as one fanned hand of cards. */
.deck-card {
  position: absolute;
  left: 50%;
  top: var(--pivot-offset);
  width: 70px;
  margin-left: -35px;
  cursor: pointer;
  transform-origin: 50% 0%;
  transform: rotate(var(--angle)) translateY(var(--radius));
  transition: transform 0.15s ease;
}
.deck-card:hover {
  transform: translate(14px, 40px) rotate(var(--angle)) translateY(var(--radius));
}
.deck-card .card-frame {
  width: 100%;
}

/* The card animating from the deck band to its spot in the spread */
.tarot-card.flying {
  position: fixed;
  z-index: 1000;
  opacity: 1;
  transform: none;
  animation: none;
  transition: left 0.5s ease, top 0.5s ease, width 0.5s ease;
  pointer-events: none;
}

@media print {
  .interpret-card {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .interpret-card-info {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* less empty space above the footer (the shared core.css puts 90vh there) */
.big-v-space {
  margin-top: 40px;
}