/* Three views of one complete 78-card deck. Load after styles.css. */
body[data-deck-layout] .card-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: auto;
  grid-template-rows: none;
  margin-top: 14px;
}

body[data-deck-layout] .selection-zone {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  padding: 12px 0 10px;
  border-bottom: 1px solid #b6c9e31a;
}

body[data-deck-layout] .deck-zone {
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0;
}

.deck-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 16px 0 10px;
  color: #ecddc1;
  font-size: 12px;
  line-height: 1.6;
}

.deck-summary strong { font-weight: 600; }
.deck-summary small,
.deck-summary > span:last-child { color: #abbad0; font-size: 10px; }

.deck-layout-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  padding: 5px;
  border: 1px solid #aac5ed33;
  border-radius: 14px;
  background: #0c172cbd;
  box-shadow: inset 0 1px 0 #d6e4fa0b;
}

.deck-layout-switcher > button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
  min-height: 43px;
  padding: 9px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #a6b8d3;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.deck-layout-switcher > button > svg { flex-shrink: 0; width: 16px; height: 16px; }
.deck-layout-switcher > button > small { font-size: 7px; color: #c8b482; }
.deck-layout-switcher > button:hover { color: #f3deb2; background: #21355480; }
.deck-layout-switcher > button[aria-pressed="true"],
.deck-layout-switcher > button[aria-selected="true"] {
  color: #f6e3bb;
  border-color: #d5b77873;
  background: linear-gradient(135deg, #31476c9c, #1b2c49d9);
  box-shadow: 0 4px 15px #0002, inset 0 1px 0 #e7d3ac17;
}
.deck-layout-switcher > button:focus-visible,
.circle-pagination button:focus-visible {
  outline: 2px solid #e5cb98;
  outline-offset: 3px;
}

.deck-layout-note {
  margin: 10px 3px 0;
  color: #a6b8d0;
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
}

/* Remove the old eleven-card fan geometry and continuous per-card animation. */
body[data-deck-layout] #deck.deck {
  --tile-width: 60px;
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none;
  perspective: none;
  isolation: isolate;
}

body[data-deck-layout] #deck .tarot-card {
  position: relative;
  inset: auto;
  display: block;
  min-width: 40px;
  min-height: 60px;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 911;
  padding: 0;
  transform: none;
  transform-origin: 50% 50%;
  opacity: 1;
  filter: none;
  z-index: 1;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
  touch-action: manipulation;
}

body[data-deck-layout] #deck .card-surface {
  border-radius: 5px;
  box-shadow: 0 4px 9px #0006, 0 0 0 1px #e3c18a26;
  animation: none;
  transform: none;
  transition: box-shadow .2s ease;
  will-change: auto;
}

body[data-deck-layout] #deck .card-glimmer { display: none; animation: none; }
body[data-deck-layout] #deck .card-index {
  bottom: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-color: #f3d99fa8;
  background: #091527f2;
  color: #f4d79e;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 1px 4px #0008;
}

body[data-deck-layout] #deck .tarot-card:hover,
body[data-deck-layout] #deck .tarot-card:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.17);
  z-index: 3 !important;
}

body[data-deck-layout] #deck .tarot-card:focus-visible {
  outline: 2px solid #e8d29e;
  outline-offset: 3px;
}

body[data-deck-layout] #deck .tarot-card.is-picked {
  opacity: .72;
  filter: saturate(.7);
  transform: none;
}

body[data-deck-layout] #deck .tarot-card.is-picked .card-surface {
  box-shadow: 0 0 0 2px #f0d19b, 0 0 17px #9ec3ff69;
}
body[data-deck-layout] #deck .tarot-card.is-picked .card-index {
  border-color: #ffeac3;
  background: #e8cc97;
  color: #101b30;
  font-weight: 700;
}
body[data-deck-layout] #deck .tarot-card.is-picked:hover { opacity: .9; }
body[data-deck-layout] #deck.is-shuffling .tarot-card {
  transform: scale(.94);
  opacity: .55;
  transition-delay: calc(var(--i) * 1ms);
}

/* Rows: comfortable targets; the complete deck scrolls inside its own panel. */
body[data-deck-layout="rows"] #deck {
  display: grid;
  grid-template-columns: repeat(13, minmax(40px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px 7px;
  max-height: min(46svh, 435px);
  min-height: 240px;
  height: auto;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5ae7a88 #10203c;
  border: 1px solid #9cbce42b;
  border-radius: 17px;
  background: radial-gradient(ellipse at 50% 0, #29416b4d, transparent 75%), #0a1427b3;
  box-shadow: inset 0 2px 16px #0003;
}

/* Ribbon: 26 columns, three rows, horizontal thumb-scrolling and snapping. */
body[data-deck-layout="ribbon"] #deck {
  display: grid;
  grid-template-columns: repeat(26, var(--tile-width));
  grid-template-rows: repeat(3, max-content);
  grid-auto-flow: column;
  align-content: start;
  gap: 10px 9px;
  height: auto;
  padding: 15px 13px 17px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5ae7a88 #10203c;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 13px;
  border: 1px solid #9cbce42b;
  border-radius: 17px;
  background: linear-gradient(90deg, #0b162ad9, #1c2d4a91, #0b162ad9);
  box-shadow: inset 0 2px 16px #0003;
}
body[data-deck-layout="ribbon"] #deck .tarot-card { scroll-snap-align: start; }

/* Circle: 13 readable cards per wheel, six pages of the same full deck.
   JS sets --circle-angle, data-circle-page on each card, and the active page
   on body. Hiding inactive pages also removes their buttons from tab order. */
body[data-deck-layout="circle"] #deck.deck {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  container-type: inline-size;
}
body[data-deck-layout="circle"] #deck.deck::before {
  content: '';
  position: absolute;
  inset: 27%;
  border: 1px solid #d4b77d42;
  border-radius: 50%;
  background: radial-gradient(circle, #2a47724d, #14243d26 65%, transparent 66%);
  box-shadow: 0 0 0 9px #a9c7fa03, 0 0 0 10px #9dbcea15, 0 0 60px #648fc51a;
  pointer-events: none;
}
body[data-deck-layout="circle"] #deck.deck::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e3c891;
  font-family: Georgia, serif;
  font-size: 45px;
  line-height: 1;
  text-shadow: 0 0 30px #b3cfff80;
  pointer-events: none;
}
body[data-deck-layout="circle"] #deck .tarot-card {
  --wheel-radius: calc((100cqw - 82px) / 2);
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 79px;
  min-height: 0;
  aspect-ratio: auto;
  transform: translate(-50%, -50%) rotate(var(--circle-angle)) translateY(calc(-1 * var(--wheel-radius)));
}
body[data-deck-layout="circle"][data-circle-page="0"] #deck [data-circle-page="0"],
body[data-deck-layout="circle"][data-circle-page="1"] #deck [data-circle-page="1"],
body[data-deck-layout="circle"][data-circle-page="2"] #deck [data-circle-page="2"],
body[data-deck-layout="circle"][data-circle-page="3"] #deck [data-circle-page="3"],
body[data-deck-layout="circle"][data-circle-page="4"] #deck [data-circle-page="4"],
body[data-deck-layout="circle"][data-circle-page="5"] #deck [data-circle-page="5"],
body[data-deck-layout="circle"]:not([data-circle-page]) #deck [data-circle-page="0"] { display: block; }

body[data-deck-layout="circle"] #deck .tarot-card:hover,
body[data-deck-layout="circle"] #deck .tarot-card:focus-visible,
body[data-deck-layout="circle"] #deck .tarot-card.is-picked {
  transform: translate(-50%, -50%) rotate(var(--circle-angle)) translateY(calc(-1 * var(--wheel-radius)));
}
body[data-deck-layout="circle"] #deck.is-shuffling .tarot-card {
  transform: translate(-50%, -50%) rotate(calc(var(--circle-angle) + 8deg)) translateY(calc(-1 * var(--wheel-radius))) scale(.94);
}

.circle-pagination { display: none; }
body[data-deck-layout="circle"] .circle-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 2px 0 8px;
}
.circle-pagination button {
  display: grid;
  place-items: center;
  min-width: 43px;
  min-height: 43px;
  padding: 8px;
  border: 1px solid #c2b28c5e;
  border-radius: 50%;
  background: #192b46bd;
  color: #eed8ac;
  font-size: 20px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.circle-pagination button:hover { background: #294268; border-color: #e3c793; }
.circle-pagination button:disabled { opacity: .3; cursor: default; }
.circle-pagination button svg { width: 17px; height: 17px; }
#circle-page-label { min-width: 130px; color: #bbc9df; font-size: 11px; text-align: center; }

body[data-deck-layout] .celestial-circle { display: none; }
body[data-deck-layout] .floating-spark { display: none; }
body[data-deck-layout] .deck-controls { margin-top: 8px; }
body[data-deck-layout] .chosen-card.is-arriving { animation: none; }
.selection-slot.is-receiving > .chosen-card { visibility: hidden; }
.flying-card { pointer-events: none; border-radius: 6px; z-index: 100; }

@media (min-width: 651px) and (max-width: 1100px) {
  body[data-deck-layout="rows"] #deck { grid-template-columns: repeat(9, minmax(40px, 1fr)); }
}

@media (max-width: 650px) {
  body[data-deck-layout] .card-table { gap: 11px; margin-top: 10px; }
  body[data-deck-layout] .selection-zone { padding: 10px 0 11px; }
  .deck-summary { margin: 13px 0 9px; font-size: 11px; }
  .deck-summary small,
  .deck-summary > span:last-child { font-size: 9px; }
  .deck-layout-switcher { padding: 4px; gap: 3px; border-radius: 12px; }
  .deck-layout-switcher > button { min-height: 42px; padding: 8px 4px; border-radius: 8px; font-size: 10px; gap: 3px 5px; }
  .deck-layout-switcher > button > svg { width: 14px; height: 14px; }
  .deck-layout-switcher > button > small { font-size: 6px; }
  .deck-layout-note { margin-top: 8px; font-size: 9px; line-height: 1.7; }
  body[data-deck-layout] #deck.deck { --tile-width: 51px; }
  body[data-deck-layout="rows"] #deck {
    grid-template-columns: repeat(6, minmax(40px, 1fr));
    max-height: min(43svh, 370px);
    min-height: 250px;
    padding: 9px;
    gap: 9px 6px;
    border-radius: 13px;
  }
  body[data-deck-layout="ribbon"] #deck { gap: 9px 8px; padding: 13px 10px 15px; border-radius: 13px; }
  body[data-deck-layout] #deck .card-index { min-width: 16px; height: 16px; font-size: 9px; bottom: 4px; }
  body[data-deck-layout="circle"] #deck.deck { max-width: 360px; }
  body[data-deck-layout="circle"] #deck .tarot-card {
    --wheel-radius: calc((100cqw - 62px) / 2);
    width: 40px;
    height: 61px;
  }
  body[data-deck-layout="circle"] #deck.deck::after { font-size: 34px; }
  body[data-deck-layout="circle"] .circle-pagination { gap: 17px; padding-top: 5px; }
  #circle-page-label { min-width: 120px; font-size: 10px; }
}

@media (max-width: 370px) {
  body[data-deck-layout="rows"] #deck { padding: 8px; gap: 8px 5px; }
  .deck-layout-switcher > button { font-size: 9px; gap: 3px; }
  .deck-layout-switcher > button > small { width: 100%; font-size: 6px; }
  .deck-summary { gap: 3px 8px; font-size: 10px; }
  .deck-layout-note { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-deck-layout] #deck { scroll-behavior: auto; scroll-snap-type: none; }
  body[data-deck-layout] #deck .tarot-card,
  body[data-deck-layout] #deck .card-surface { transition: none; animation: none; }
}