.landing-screen {
  position: relative;
  overflow: hidden;
}

.landing-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.08), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0%, transparent 25%, rgba(255, 255, 255, 0.01) 100%);
  pointer-events: none;
  opacity: 0.8;
}

.landing-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(212, 175, 55, 0.02) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(212, 175, 55, 0.02) 0 1px, transparent 1px 100%);
  background-size: 220px 220px;
  opacity: 0.16;
  pointer-events: none;
}

.deck-card {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 45%),
    url('../assets/cards/back.png');
  background-size: cover;
  background-position: center;
}

.deck-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 18px;
  pointer-events: none;
}

.deck-card:hover {
  transform: translateY(-2px) scale(1.01);
}

.draw-card {
  cursor: pointer;
  filter: saturate(0.96);
}

.draw-card:hover {
  z-index: 8;
  filter: saturate(1.02);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(212, 175, 55, 0.26);
}

.draw-card.is-selected {
  z-index: 10;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(212, 175, 55, 0.34), 0 0 24px rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.46);
}

.reading-option {
  text-align: left;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.reading-option:hover,
.reading-option.is-selected {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.36);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  background: rgba(18, 15, 11, 0.86);
}

.reading-option.is-selected {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.24), 0 16px 36px rgba(0, 0, 0, 0.24);
}

.flow-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 2, 2, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 24px;
}

.flow-overlay__panel {
  width: min(560px, 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(22, 18, 13, 0.98), rgba(10, 8, 6, 0.96));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
  padding: 28px;
}

.flow-step__label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.flow-step h3 {
  margin: 0 0 14px;
  color: var(--accent-strong);
  font-size: 1.5rem;
}

.flow-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 20px;
}

.flow-option {
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}

.flow-option.is-selected {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.34);
  color: var(--accent-strong);
}

.flow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.flow-intro__text {
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 10px;
}