/* The table: a fan of face-down cards to pick from.
   Ported from the app's tiragem/mesa screen. */

/* The card back, shared by the fan and by the dealt cards so the deck looks
   like one deck all the way through. Eight-point star over a violet gradient,
   the same design the app draws in CardBack.tsx. */
:root {
  --card-back-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23d8b76a' fill-opacity='0.85' points='12.00,0.50 13.76,7.75 20.13,3.87 16.25,10.24 23.50,12.00 16.25,13.76 20.13,20.13 13.76,16.25 12.00,23.50 10.24,16.25 3.87,20.13 7.75,13.76 0.50,12.00 7.75,10.24 3.87,3.87 10.24,7.75'/%3E%3C/svg%3E");
  --card-back-wash: linear-gradient(150deg, #2b2142 0%, var(--card-back-color) 55%, #191227 100%);
}

/* The dealt cards, which used to be a flat gradient with a big number on it.
   The number is kept in the DOM for screen readers but no longer drawn. */
#tarot-app-page .card-back {
  background: var(--card-back-star) center / 30% no-repeat, var(--card-back-wash);
  color: transparent;
  font-size: 0;
}

#tarot-app-page .card-back::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(216, 183, 106, 0.28);
  border-radius: 6px;
  pointer-events: none;
}

.card-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem 0 0;
}

.table-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.table-overline {
  margin: 0;
  color: var(--accent-color);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.table-instruction {
  margin: 0.35rem 0 0;
  color: var(--text-color);
  font-size: 1.4rem;
}

/* ------------------------------------------------------------------- slots */

.table-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.table-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Wide enough that two-line position names do not run into the neighbour. */
  width: 5.6rem;
}

.table-slot__box {
  width: 34px;
  height: 48px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  transform: scale(0.94);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.table-slot.is-filled .table-slot__box {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(216, 183, 106, 0.16);
  transform: scale(1);
}

.table-slot__label {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.25;
  text-align: center;
}

/* --------------------------------------------------------------------- fan */

.table-fan {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The fan cards are <button>s, and the page styles every button under
   `#tarot-app-page button` with a lilac gradient and a pill radius. Anchoring
   on the same id wins the card back its own look. */
#tarot-app-page .table-card,
.table-card {
  position: absolute;
  top: 0;
  padding: 0;
  min-width: 0;
  width: auto;
  border: 1px solid rgba(216, 183, 106, 0.45);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0;
  letter-spacing: normal;
  text-transform: none;
  background: var(--card-back-star) center / 32% no-repeat, var(--card-back-wash);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.45s ease,
    box-shadow 0.25s ease;
  animation: table-deal 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Inner hairline, the way the app draws its card back. */
.table-card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(216, 183, 106, 0.28);
  border-radius: 5px;
  pointer-events: none;
}

#tarot-app-page .table-card:hover,
#tarot-app-page .table-card:focus-visible,
.table-card:hover,
.table-card:focus-visible {
  transform: translate(var(--x, 0), calc(var(--y, 0px) - 16px)) rotate(var(--rot, 0deg));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6);
  outline: none;
  border-color: var(--gold);
}

/* Lifted off the table by the reader, then out of the way. */
#tarot-app-page .table-card.is-picked,
.table-card.is-picked {
  transform: translate(var(--x, 0), calc(var(--y, 0px) - 210px)) rotate(var(--rot, 0deg))
    scale(0.65);
  opacity: 0;
  pointer-events: none;
}

.table-fan.is-done .table-card {
  pointer-events: none;
}

#tarot-app-page .table-card.is-scattering,
.table-card.is-scattering {
  animation: table-scatter 0.75s cubic-bezier(0.3, 0.9, 0.3, 1);
}

@keyframes table-deal {
  from {
    opacity: 0;
    transform: translate(var(--x, 0), calc(var(--y, 0px) + 60px)) rotate(var(--rot, 0deg))
      scale(0.9);
  }
}

@keyframes table-scatter {
  35% {
    transform: translate(calc(var(--x, 0px) + var(--sx, 0px)), calc(var(--y, 0px) + var(--sy, 0px)))
      rotate(calc(var(--rot, 0deg) + var(--srot, 0deg)));
  }
}

/* ------------------------------------------------------------------ footer */

.table-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  min-height: 8rem;
}

.table-counter {
  margin: 0;
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.table-hint {
  margin: 0;
  max-width: 22rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

#tarot-app-page .table-shuffle {
  width: auto;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  background-image: none;
  color: var(--text-color);
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

#tarot-app-page .table-shuffle:hover {
  border-color: var(--accent-color);
  color: var(--accent-hover);
  background-image: none;
}

#tarot-app-page .table-reveal {
  width: auto;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--gold);
  background-image: none;
  color: #1c1508;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  animation: table-fade-in 0.35s ease;
}

#tarot-app-page .table-reveal:hover {
  filter: brightness(1.08);
  background-image: none;
}

@keyframes table-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

.table-shuffle[hidden],
.table-reveal[hidden],
.table-hint[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .table-instruction { font-size: 1.15rem; }
  .table-slot__label { font-size: 0.55rem; }
}

/* Hover is a lie on touch, and the dealing animation is the point of the
   screen, so only the large motions are dropped. */
@media (prefers-reduced-motion: reduce) {
  .table-card {
    animation: none;
    transition: opacity 0.2s ease;
  }
  #tarot-app-page .table-card.is-scattering,
.table-card.is-scattering { animation: none; }
  .table-card:hover { transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg)); }
  .table-reveal { animation: none; }
}