/* ============================= Tokens ============================= */
:root {
  --ground: #12162a;
  --ground-deep: #0b0e1c;
  --felt: #171c35;
  --gold: #c9a24a;
  --gold-bright: #e6c876;
  --parchment: #ece5d3;
  --parchment-dim: #b9b2a0;
  --ember: #b8563a;
  --ember-bright: #d47250;
  --line: rgba(201, 162, 74, 0.22);
  --shadow-deep: rgba(4, 5, 12, 0.55);

  --display: Didot, "Big Caslon", "Times New Roman", Georgia, serif;
  --body: Baskerville, Cambria, Georgia, serif;
  --ui: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground: #ece5d3;
  --ground-deep: #ddd5bd;
  --felt: #f4efe0;
  --gold: #8a6a24;
  --gold-bright: #6b5119;
  --parchment: #241f14;
  --parchment-dim: #6b6350;
  --ember: #9c4227;
  --ember-bright: #7e341d;
  --line: rgba(138, 106, 36, 0.28);
  --shadow-deep: rgba(60, 50, 20, 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #ece5d3;
    --ground-deep: #ddd5bd;
    --felt: #f4efe0;
    --gold: #8a6a24;
    --gold-bright: #6b5119;
    --parchment: #241f14;
    --parchment-dim: #6b6350;
    --ember: #9c4227;
    --ember-bright: #7e341d;
    --line: rgba(138, 106, 36, 0.28);
    --shadow-deep: rgba(60, 50, 20, 0.18);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  font-family: var(--body);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  line-height: 1.6;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, var(--felt), transparent),
    var(--ground-deep);
  color: var(--parchment);
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-wrap: balance; }

a { color: var(--gold-bright); }

/* ============================= Header / nav ============================= */
.site-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 1.2rem 0; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--ui); font-size: 0.88rem; }
.site-header nav a { margin-left: 0; color: var(--parchment-dim); text-decoration: none; transition: color .15s; }
.site-header nav a:hover { color: var(--gold-bright); }
.brand { font-family: var(--display); font-weight: 400; font-size: 1.4rem; text-decoration: none; color: var(--parchment); }
.site-footer { display: flex; flex-wrap: wrap; gap: 1rem; padding: 2.5rem 0 3rem; opacity: 0.65; font-size: 0.85rem; font-family: var(--ui); }
.site-footer a { color: var(--parchment-dim); }

/* ============================= Cards / decks encyclopedia ============================= */
.card-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; padding: 0; }
.card-grid img { width: 100%; border-radius: 6px; box-shadow: 0 8px 20px -10px var(--shadow-deep); }
.card-grid a { text-decoration: none; color: inherit; text-align: center; display: block; font-family: var(--ui); font-size: 0.85rem; }
.spread { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.spread-card { flex: 1 1 200px; max-width: 240px; }
.spread-card img { width: 100%; border-radius: 6px; box-shadow: 0 8px 20px -10px var(--shadow-deep); }
.spread-card img.reversed { transform: rotate(180deg); }
.daily-draw img { display: block; width: 100%; max-width: 280px; margin: 0 auto; border-radius: 8px; box-shadow: 0 14px 32px -12px var(--shadow-deep); }
.chip { border-radius: 999px; padding: 0.3rem 0.8rem; border: 1px solid var(--line); background: none; color: inherit; margin: 0 0.2rem; cursor: pointer; font-family: var(--ui); }
.deep-meaning { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.deep-meaning-section { margin-bottom: 1.5rem; }
.deep-meaning-section h3 { font-family: var(--ui); margin-bottom: 0.3rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }

/* ============================= Personal Year Wheel ============================= */
.personal-year-result .summary { opacity: 0.75; margin-top: -0.5rem; font-family: var(--ui); }
.wheel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.wheel-house { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.wheel-house img { width: 100px; display: block; margin-bottom: 0.5rem; border-radius: 6px; }
.wheel-house img.reversed { transform: rotate(180deg); }
.wheel-house h2 { font-size: 0.95rem; opacity: 0.7; margin-bottom: 0.2rem; font-family: var(--ui); }
.wheel-house h3 { font-size: 1rem; margin: 0.3rem 0; }
.numerology-text { font-style: italic; opacity: 0.85; }

/* ============================= Hero ============================= */
.hero { text-align: center; padding: 3rem 0 2.4rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.6rem; }
.hero p { font-family: var(--ui); color: var(--parchment-dim); font-size: 1rem; }
.cta {
  display: inline-block; margin-top: 1.2rem; padding: 0.75rem 1.7rem; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--ground-deep);
  text-decoration: none; font-family: var(--ui); font-weight: 600; font-size: 0.92rem;
  box-shadow: 0 14px 30px -14px rgba(201, 162, 74, 0.55); transition: transform .15s, box-shadow .15s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(201, 162, 74, 0.65); }

/* ============================= "Ask a question" section ============================= */
.more-ways { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.more-ways h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.more-ways-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.more-ways-list li { border-left: 2px solid var(--line); padding-left: 1rem; }
.more-ways-list a { font-weight: 600; text-decoration: none; font-family: var(--ui); }
.more-ways-list p { margin: 0.3rem 0 0; opacity: 0.75; font-size: 0.92rem; font-family: var(--ui); }

/* ============================= Homepage: inline "Ask a question" ============================= */
.ask-question-embed { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); max-width: 480px; margin-left: auto; margin-right: auto; text-align: center; }
.ask-question-embed h2 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.ask-question-embed .dek { font-family: var(--ui); color: var(--parchment-dim); font-size: 0.92rem; margin: 0 0 1.2rem; }
.ask-question-embed form { max-width: none; text-align: left; }
.ask-question-embed .hint { font-family: var(--ui); font-size: 0.78rem; color: var(--parchment-dim); opacity: 0.75; margin-top: 0.8rem; }

/* ============================= Homepage: "Explore the deck" ============================= */
.explore-deck { margin-top: 2.6rem; padding: 2.2rem 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.explore-deck h2 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.explore-deck .dek { font-family: var(--ui); color: var(--parchment-dim); font-size: 0.92rem; margin: 0 0 0.4rem; }
.cta-secondary {
  background: transparent; color: var(--gold-bright); border: 1px solid var(--gold);
  box-shadow: none;
}
.cta-secondary:hover { background: rgba(201, 162, 74, 0.08); box-shadow: none; }

/* ============================= Spread library grid ============================= */
.spread-grid-section { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.spread-grid-section h2 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.spread-grid-intro { font-family: var(--ui); color: var(--parchment-dim); font-size: 0.92rem; margin-top: 0; margin-bottom: 1.5rem; }
.spread-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem;
}
.spread-card-tile {
  display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; padding: 1rem;
  background: var(--felt); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.spread-card-tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 16px 30px -16px var(--shadow-deep); }
.spread-card-thumb { position: relative; flex: 0 0 auto; width: 64px; }
.spread-card-thumb img { width: 100%; border-radius: 6px; display: block; box-shadow: 0 8px 18px -10px var(--shadow-deep); }
.spread-card-body { min-width: 0; }
.spread-card-tile h3 { font-size: 1.02rem; margin: 0 0 0.35rem; line-height: 1.3; }
.spread-card-pitch { font-family: var(--body); font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.5rem; opacity: 0.88; }
.spread-card-meta { font-family: var(--ui); font-size: 0.72rem; color: var(--parchment-dim); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.lock-seal {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(160deg, var(--ember-bright), var(--ember)); color: var(--ground-deep);
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem;
  box-shadow: 0 6px 14px -6px rgba(184, 86, 58, 0.6); border: 2px solid var(--ground-deep);
}
.spread-card-tile.gated .spread-card-thumb img { opacity: 0.72; }

@media (max-width: 480px) {
  .spread-grid { grid-template-columns: 1fr; }
}

/* ============================= Forms ============================= */
form { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; }
form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; font-family: var(--ui); }
form input, form textarea, form button {
  font-family: var(--ui); font-size: 1rem; padding: 0.65rem 0.75rem; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: inherit;
}
form button {
  cursor: pointer; align-self: flex-start; font-weight: 600;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--ground-deep);
  border-color: var(--gold); padding: 0.75rem 1.5rem;
}
form textarea { min-height: 5rem; resize: vertical; }
.position-list { padding-left: 1.4rem; line-height: 1.9; font-family: var(--ui); }

@media (prefers-reduced-motion: reduce) {
  .cta, .spread-card-tile { transition-duration: .01ms !important; }
}

/* ============================= Fan picker (78-card tap-to-reveal) ============================= */
.fan-picker { text-align: center; padding-bottom: 2rem; }
.fan-picker .dek { font-family: var(--ui); color: var(--parchment-dim); max-width: 34rem; margin: 0 auto 1.5rem; }

.status-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.6rem; font-family: var(--ui); font-size: 0.85rem; color: var(--gold-bright); }
.status-row .count-pill { border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.75rem; font-variant-numeric: tabular-nums; }
.auto-pick-btn {
  font-family: var(--ui); font-size: 0.78rem; color: var(--parchment-dim);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.85rem; cursor: pointer; transition: color .15s, border-color .15s;
}
.auto-pick-btn:hover { color: var(--parchment); border-color: var(--gold); }
.auto-pick-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.picked-stage {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  min-height: 148px; padding: 0 1rem; margin: 1rem auto 1.4rem; max-width: 1000px;
}
.picked-slot {
  width: 78px; height: 134px; border-radius: 8px; position: relative;
  border: 1.5px dashed var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.picked-slot .slot-index { font-family: var(--ui); font-size: 0.68rem; color: var(--parchment-dim); opacity: 0.6; }
.picked-slot.filled { border: none; }
.picked-slot .slot-label,
.fan-picker .slot-label {
  position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%);
  font-family: var(--ui); font-size: 0.64rem; color: var(--parchment-dim); white-space: nowrap;
}

.fan-picker .card {
  --w: 78px; --h: 134px;
  width: var(--w); height: var(--h);
  border-radius: 7px; cursor: pointer; perspective: 700px;
  -webkit-tap-highlight-color: transparent; flex-shrink: 0; position: relative;
}
.fan-picker .card .flipper {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(.3,1.1,.4,1);
}
.fan-picker .card.revealed .flipper { transform: rotateY(180deg); }
.fan-picker .card .face {
  position: absolute; inset: 0; border-radius: 7px; overflow: hidden; backface-visibility: hidden;
  box-shadow: 0 10px 22px -10px var(--shadow-deep); border: 1px solid rgba(0,0,0,0.35);
  background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #1a2040;
}
.fan-picker .card .face.front { transform: rotateY(180deg); }
.fan-picker .card.reversed .face.front { transform: rotateY(180deg) rotate(180deg); }
.fan-picker .card-name {
  position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%);
  font-family: var(--ui); font-size: 0.66rem; color: var(--parchment-dim); white-space: nowrap; opacity: 0; transition: opacity .3s;
}
.fan-picker .card.revealed .card-name { opacity: 1; }

.ribbon-wrap { width: 100%; max-width: 1100px; position: relative; margin: 0.6rem auto 0; }
.ribbon-fade-l, .ribbon-fade-r { position: absolute; top: 0; bottom: 0; width: 56px; z-index: 5; pointer-events: none; }
.ribbon-fade-l { left: 0; background: linear-gradient(90deg, var(--ground-deep), transparent); }
.ribbon-fade-r { right: 0; background: linear-gradient(270deg, var(--ground-deep), transparent); }

/* overflow-x:auto forces overflow-y into a clipping mode too, so this box
   must be tall enough on its own for the arch's peak + a hovered card's
   extra size/lift -- there is no "let it overflow" escape hatch here. */
.ribbon {
  display: flex; align-items: flex-end; justify-content: center; overflow-x: auto; overflow-y: hidden;
  height: 380px; padding: 0 1.5rem 3rem; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ribbon::-webkit-scrollbar { height: 6px; }
.ribbon::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.ribbon .card {
  --w: 32px; --h: 55px;
  scroll-snap-align: center;
  transform: rotate(var(--fan-rot, 0deg)) translateY(var(--fan-lift, 0px));
  transform-origin: 50% 50%;
  transition: transform .22s cubic-bezier(.25,.8,.35,1.15), filter .15s ease, width .22s ease, height .22s ease;
}
.ribbon .card:hover:not(.taken),
.ribbon .card:focus-visible:not(.taken) {
  --w: 92px; --h: 158px;
  transform: rotate(0deg) translateY(calc(var(--fan-lift, 0px) - 46px)) scale(1);
  filter: brightness(1.18);
  z-index: 500 !important;
}
.ribbon .card.taken { opacity: 0.14; pointer-events: none; filter: none; }

.ribbon-hint { font-family: var(--ui); font-size: 0.78rem; color: var(--parchment-dim); text-align: center; margin: 0.2rem 0 0; opacity: 0.8; }

@media (max-width: 640px) {
  .fan-picker .card { --w: 62px; --h: 106px; }
  .picked-slot { width: 62px; height: 106px; }
}

/* ============================= Cross-card synthesis ============================= */
.synthesis-block {
  margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: 12px;
  background: var(--felt); border: 1px solid var(--line);
}
.synthesis-block h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.synthesis-note { margin: 0; line-height: 1.6; }