/* ============================================================
   BTF Date Night — "cosmic crystal" design system
   Landscape game board. Dark, mystical, tarot-adjacent.
   The purple is intentional + textured (a crystal stone on a
   starfield), never a flat gradient.
   ============================================================ */

:root {
  /* void / atmosphere */
  --void:      #0a0712;
  --void-2:    #140b22;
  --void-3:    #1c0f33;

  /* crystal stone */
  --stone:     #7b44bd;
  --stone-2:   #b27ee8;
  --stone-deep:#2a1640;

  /* metals + ember */
  --gold:      #e9c87d;
  --gold-hi:   #fff3cf;
  --silver:    #d7dcec;
  --burn:      #ff5a3c;

  /* ink */
  --fg:        #ece6f7;
  --muted:     #9a8fb8;
  --hair:      rgba(202,166,239,0.22);   /* faint stone hairline */

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--body);
  color: var(--fg);
  background: var(--void);
  /* atmosphere: starfield dots layered over a deep nebula wash */
  background-image:
    radial-gradient(2px 2px at 18% 24%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 16%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 72%, rgba(231,225,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 86% 64%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 44%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(123,68,189,0.20), transparent 70%),
    radial-gradient(ellipse 70% 70% at 78% 88%, rgba(63,31,108,0.30), transparent 70%),
    linear-gradient(160deg, var(--void), var(--void-2) 60%, var(--void-3));
  background-attachment: fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* grain overlay — adds tooth so the dark never reads as flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the scaffold's container becomes a full-bleed stage */
.container {
  width: 100%;
  height: 100dvh;
  display: block;
}

/* ============================================================
   Board — landscape, three columns, the centre is widest
   ============================================================ */
.board {
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: clamp(0.6rem, 1.8vw, 1.75rem);
  padding: calc(env(safe-area-inset-top) + clamp(0.6rem, 2vh, 1.5rem))
           calc(env(safe-area-inset-right) + clamp(0.75rem, 2.4vw, 2rem))
           calc(env(safe-area-inset-bottom) + clamp(0.6rem, 2vh, 1.5rem))
           calc(env(safe-area-inset-left) + clamp(0.75rem, 2.4vw, 2rem));
}

.pane { min-width: 0; min-height: 0; }

/* staggered entrance — one orchestrated page load */
.pane--left   { animation: rise 0.7s var(--ease) both 0.05s; }
.pane--center { animation: rise 0.7s var(--ease) both 0.18s; }
.pane--right  { animation: rise 0.7s var(--ease) both 0.31s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- LEFT: card (2/3) over locks (1/3) ---- */
.pane--left {
  display: grid;
  grid-template-rows: 2fr 1fr;
  gap: clamp(0.5rem, 1.4vh, 1rem);
}

/* ---- CENTER: egg + label + feedback, vertically centred ---- */
.pane--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.6vh, 1.1rem);
}

/* ---- RIGHT: number (top half) over tooltip (bottom, hugging the corner) ---- */
.pane--right {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

/* ============================================================
   The Card (left, top 2/3) — a tarot face
   ============================================================ */
.card {
  /* per-suit template accent (overridden by [data-suit] below) */
  --suit-accent: var(--gold);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.4vh, 0.9rem);
  text-align: center;
  padding: clamp(0.75rem, 2vh, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--suit-accent) 30%, var(--hair));
  border-radius: 14px;
  background:
    radial-gradient(ellipse 90% 65% at 50% 0%,
      color-mix(in srgb, var(--suit-accent) 22%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(28,15,51,0.78), rgba(10,7,18,0.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03),
              inset 0 1px 26px color-mix(in srgb, var(--suit-accent) 14%, transparent),
              0 18px 40px -24px #000;
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}

/* the five flavors — each suit its own accent (template backgrounds drop in here later) */
.card[data-suit="scene"]    { --suit-accent: #9fb4d8; }  /* moonlit silver */
.card[data-suit="focus"]    { --suit-accent: #e89ab0; }  /* rose */
.card[data-suit="action"]   { --suit-accent: #ff7a4d; }  /* ember */
.card[data-suit="prop"]     { --suit-accent: #6fc89a; }  /* jade */
.card[data-suit="position"] { --suit-accent: #e9c87d; }  /* gold */

/* gilt corners */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid color-mix(in srgb, var(--suit-accent) 70%, transparent);
}
.card::before { top: 8px;    left: 8px;    border-right: 0; border-bottom: 0; }
.card::after  { bottom: 8px; right: 8px;   border-left: 0;  border-top: 0;    }

.card__eyebrow {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.4vw, 0.78rem);
  color: var(--suit-accent);
}

.card__art {
  font-size: clamp(2.2rem, 9vh, 4.5rem);
  line-height: 1;
  color: var(--stone-2);
  text-shadow: 0 0 26px rgba(178,126,232,0.6);
}

/* The print fills the whole card slot (~full-bleed); eyebrow + title overlay it. */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  cursor: zoom-in;
  z-index: 0;
}
/* a drawn card: art fills the slot, label pinned top, title pinned bottom over it */
.card:not([data-empty="true"]) { justify-content: space-between; gap: 0; }
.card:not([data-empty="true"])::before,
.card:not([data-empty="true"])::after { display: none; } /* art carries its own frame */
.card:not([data-empty="true"]) .card__eyebrow,
.card:not([data-empty="true"]) .card__title { position: relative; z-index: 2; }
.card:not([data-empty="true"]) .card__eyebrow {
  text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 0 18px rgba(0,0,0,0.7);
}
.card:not([data-empty="true"]) .card__title {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.92), 0 0 30px rgba(0,0,0,0.78);
}

.card__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* empty / pre-roll state */
.card[data-empty="true"] .card__art   { color: var(--muted); text-shadow: none; opacity: 0.6; }
.card[data-empty="true"] .card__title { color: var(--muted); font-weight: 600; }
/* pre-roll "ghost card" — a faint glimpse of the deck waiting behind the prompt,
   so the opening board hints at what a draw looks like (image fades in on load). */
.card[data-empty="true"] {
  background:
    radial-gradient(ellipse 90% 65% at 50% 0%,
      color-mix(in srgb, var(--suit-accent) 16%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(18,10,32,0.80), rgba(10,7,18,0.90)),
    url("../cards/stockings.jpg") center / cover no-repeat;
}
.card[data-empty="true"] .card__art { animation: ghostPulse 4.5s var(--ease) infinite; }
@keyframes ghostPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; text-shadow: 0 0 24px rgba(178,126,232,0.55); }
}

/* deal animation on each draw */
.card.is-dealing { animation: deal 0.5s var(--ease); }
@keyframes deal {
  0%   { transform: perspective(900px) rotateY(34deg) translateZ(-30px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ============================================================
   Tier selector (left, bottom 1/3) — a compact dropdown (was a button stack)
   ============================================================ */
.stagenav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  align-items: flex-start;
}
.stagesel__label {
  font-family: var(--display);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.3vw, 0.7rem);
  color: var(--muted);
}
.stagesel {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.62rem, 1.4vw, 0.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--hair);
  border-radius: 9px;
  padding: 0.6em 2em 0.6em 0.9em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e9c87d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 0.7em;
  transition: border-color 0.25s var(--ease);
}
.stagesel:hover { border-color: rgba(202,166,239,0.5); }
.stagesel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.stagesel option { color: var(--fg); background: var(--void-2); }

/* ============================================================
   The Egg (centre) — the button that rules the page
   ============================================================ */
.egg {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  width: clamp(140px, 30vh, 300px);
  line-height: 0;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55))
          drop-shadow(0 0 26px rgba(123,68,189,0.45));
  animation: eggFloat 7s ease-in-out infinite, eggGlow 4.5s ease-in-out infinite;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.egg:hover  { filter: drop-shadow(0 26px 44px rgba(0,0,0,0.55)) drop-shadow(0 0 38px rgba(178,126,232,0.7)); }
.egg:active { transform: scale(0.955); }
.egg:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 50%; }
.egg.is-rolling { animation: eggRoll 0.6s var(--ease); }

.egg__svg { width: 100%; height: auto; display: block; overflow: visible; }
.egg__marble    { mix-blend-mode: screen; opacity: 0.5; }
.egg__streak    { mix-blend-mode: screen; }
.egg__highlight { transform-origin: center; animation: sheenDrift 7s ease-in-out infinite; }

@keyframes eggFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes eggGlow {
  0%,100% { filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(123,68,189,0.40)); }
  50%     { filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(178,126,232,0.65)); }
}
@keyframes sheenDrift {
  0%,100% { opacity: 0.55; transform: translate(0,0) rotate(-24deg); }
  50%     { opacity: 0.9;  transform: translate(10px,6px) rotate(-24deg); }
}
@keyframes eggRoll {
  0%   { transform: scale(0.955) rotate(-6deg); }
  40%  { transform: scale(1.04) rotate(5deg); }
  70%  { transform: scale(0.99) rotate(-2deg); }
  100% { transform: none; }
}

.egg__label {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
  color: var(--gold);
  text-indent: 0.4em; /* compensate tracking */
}

/* ---- roll bar (under the egg): CTA + tier crumb (dots + name) ---- */
.rollbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stage__dots { display: flex; gap: 0.4rem; }
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid var(--hair);
  transition: all 0.3s var(--ease);
}
.dot.is-done    { background: var(--stone-2); border-color: var(--stone-2); }
.dot.is-current { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px -1px var(--gold); transform: scale(1.25); }
.stage__name {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: clamp(0.62rem, 1.5vw, 0.9rem);
  color: var(--fg);
}

/* ---- advance / "deepen" (manual escape hatch; lit when locks cue it) ---- */
.advance {
  appearance: none;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 2vw, 1.05rem);
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.72em 1.6em;
  margin-top: 0.2rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.advance__mini { display: none; }   /* portrait swaps to the short "deepen" label */
.advance:hover { color: var(--fg); border-color: rgba(202,166,239,0.5); }
.advance.is-cued {
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 0 18px -2px rgba(233,200,125,0.7);
  animation: cuePulse 2.2s ease-in-out infinite;
}
@keyframes cuePulse {
  0%,100% { box-shadow: 0 0 14px -3px rgba(233,200,125,0.55); }
  50%     { box-shadow: 0 0 22px 0 rgba(233,200,125,0.85); }
}

/* finale card glows */
.card[data-finale="true"] {
  border-color: rgba(233,200,125,0.6);
  box-shadow: inset 0 0 0 1px rgba(233,200,125,0.25),
              inset 0 1px 30px rgba(233,200,125,0.15),
              0 0 40px -16px var(--gold);
}
.card[data-finale="true"] .card__art { color: var(--gold); text-shadow: 0 0 26px rgba(233,200,125,0.7); }

/* ---- action row under the egg: Deepen (long pill) + Spike (round pink) ---- */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.6vw, 1rem);
}

/* Spike = "not for us": veto the card for the session + reroll. Round + pink to
   contrast the long gold Deepen pill. */
.spike-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.spike__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.52rem, 1.3vw, 0.66rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffb3cd;
  text-indent: 0.22em; /* offset tracking */
}

.spike {
  appearance: none;
  width: clamp(2.9rem, 6.6vh, 3.8rem);
  height: clamp(2.9rem, 6.6vh, 3.8rem);
  display: grid;
  place-items: center;
  font-size: clamp(1.05rem, 2.7vh, 1.4rem);
  color: #5a1730;
  background: radial-gradient(circle at 38% 30%, #ffe1ec, #ff9ec2 72%);
  border: 1px solid #ffc1d6;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 16px -3px rgba(255,158,194,0.6);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.spike:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 22px -2px rgba(255,158,194,0.85); }
.spike:active { transform: scale(0.92); }
.spike:focus-visible { outline: 2px solid #ff9ec2; outline-offset: 3px; }

/* dormant until the first roll */
.spike:disabled {
  opacity: 0.3;
  filter: grayscale(0.75);
  cursor: default;
  box-shadow: none;
}
.spike:disabled:hover { transform: none; box-shadow: none; }
.spike-wrap:has(.spike:disabled) .spike__label { color: var(--muted); opacity: 0.4; }

/* ---- finish ("bind completed"): bottom-centre, grayed until hover ---- */
.finish {
  appearance: none;
  margin-top: clamp(0.5rem, 1.8vh, 1.2rem);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.3vw, 0.72rem);
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.22;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease), letter-spacing 0.3s var(--ease);
}
.finish:hover, .finish:focus-visible {
  opacity: 1;
  color: var(--gold);
  letter-spacing: 0.34em;
  outline: none;
}
.spike.is-spiked { animation: spikePop 0.4s var(--ease); }
@keyframes spikePop {
  0%   { transform: scale(0.8) rotate(-8deg); }
  50%  { transform: scale(1.12) rotate(6deg); }
  100% { transform: none; }
}

/* ============================================================
   Right column — number (top) + tooltip (bottom right)
   ============================================================ */
.numeral {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0.12em;
}
.numeral__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 28vh, 15rem);
  line-height: 0.82;
  color: var(--fg);
  text-shadow: 0 0 38px rgba(178,126,232,0.5);
}
.numeral__value.is-rolling { animation: tick 0.5s var(--ease); }
@keyframes tick {
  0% { opacity: 0; transform: translateY(-0.15em) scale(0.92); }
  100% { opacity: 1; transform: none; }
}
.numeral__label {
  font-family: var(--display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.3vw, 0.72rem);
  color: var(--muted);
}
.numeral__hint {
  margin-top: 0.15rem;
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(0.62rem, 1.5vh, 0.82rem);
  line-height: 1.3;
  max-width: 24ch;
  color: var(--muted);
  opacity: 0.7;
}
/* the number hint only orients the first paint; reclaim its space after a roll */
.board.has-rolled .numeral__hint { display: none; }
/* pre-roll: the number field idly shuffles faint digits (set in board.js) under
   a soft violet glow so it reads as "waiting to roll", not a dead blank. The
   glow breathes; the digits flow. Both stop once a real number is rolled in. */
.numeral[data-empty] .numeral__value {
  color: var(--muted);
  animation: numBreathe 2.8s var(--ease) infinite;
}
@keyframes numBreathe {
  0%, 100% { opacity: 0.38; text-shadow: 0 0 0 transparent; }
  50%      { opacity: 0.72; text-shadow: 0 0 40px rgba(178,126,232,0.6); }
}

.tip {
  align-self: stretch;          /* fill the bottom half of the right column */
  justify-self: stretch;        /* full width */
  display: flex;
  align-items: center;
  padding: clamp(0.8rem, 2.2vh, 1.4rem) clamp(0.9rem, 1.8vw, 1.4rem);
  text-align: left;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28,15,51,0.7), rgba(10,7,18,0.7));
  box-shadow: 0 16px 36px -26px #000;
}
.tip__text {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.6rem, 6vh, 3rem);
  line-height: 1.35;
  color: var(--fg);
  transition: opacity 0.4s var(--ease);
}
.tip[data-empty="true"] .tip__text { color: var(--muted); }
.tip__text.is-fading { opacity: 0; }

/* ============================================================
   Portrait — the rite wants landscape
   ============================================================ */
.rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  padding: 2rem;
  background: radial-gradient(ellipse at center, var(--void-2), var(--void));
}
.rotate__glyph {
  font-size: 3.5rem;
  color: var(--gold);
  animation: rock 2.4s ease-in-out infinite;
}
@keyframes rock { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(78deg); } }
.rotate__text {
  font-family: var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--fg);
  line-height: 1.8;
}
.rotate__text span { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.16em; }

/* ============================================================
   Mobile PORTRAIT -> single stacked column. (Phone landscape keeps the
   3-column board, compacted — see the landscape block further down.)
   ============================================================ */
@media (orientation: portrait) {
  .rotate { display: none !important; }   /* the stacked layout is first-class now */

  /* allow the page to scroll in portrait (base body is overflow:hidden for the
     full-screen landscape board) so the stacked content below the fold is reachable */
  html, body { height: auto; overflow-y: auto; }
  .container { height: auto; min-height: 100dvh; }
  /* Two-column grid. The ONLY split row is "egg | deepen" — the two center
     buttons sit either side of the centre line so the player can roll AND move
     to the next stage without scrolling. Everything else spans full width. The
     tier selector drops to the bottom (it used to steal Deepen's space up top). */
  .board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    column-gap: clamp(0.5rem, 3vw, 1.1rem);
    row-gap: clamp(0.4rem, 1.4vh, 0.85rem);
    padding: clamp(0.7rem, 2.5vh, 1.3rem) clamp(0.9rem, 4vw, 1.5rem)
             calc(env(safe-area-inset-bottom) + 2.4rem);
    grid-template-areas:
      "title  title"
      "card   card"
      "egg    num"
      "egg    deepen"
      "crumb  crumb"
      "tip    tip"
      "tier   tier"
      "finish finish";
  }
  .pane--left, .pane--center, .pane--right { display: contents; }

  /* `.board .title-banner` (not bare `.title-banner`) so this beats the base
     `.title-banner{position:fixed}` rule defined LATER in the file. */
  .board .title-banner { position: static; transform: none; grid-area: title; text-align: center; }
  .card    { grid-area: card; width: min(82%, 320px); aspect-ratio: 1 / 1; padding: clamp(0.6rem, 2vh, 1rem); }

  /* big, clickable egg on the left; the rolled Number sits top-right beside it,
     Deepen bottom-right. (The "Next"/skip button is gone — see no-repeat draws.) */
  .egg     { grid-area: egg; justify-self: end; align-self: center;
             width: clamp(118px, 36vw, 172px); }
  .numeral { grid-area: num; align-self: end; align-items: center; text-align: center; justify-self: center; }
  .actions { grid-area: deepen; align-self: start; justify-self: center;
             flex-direction: column; align-items: center; gap: 0.5rem; margin: 0; }

  .rollbar { grid-area: crumb; }
  .tip     { grid-area: tip; width: min(92%, 460px); justify-self: center; }
  .stagenav { grid-area: tier; width: min(80%, 300px); align-items: stretch; }
  .finish  { grid-area: finish; }

  /* "Deepen the night ›" -> compact "deepen" beside the egg */
  .advance .advance__full { display: none; }
  .advance .advance__mini { display: inline; }

  .numeral__value { font-size: clamp(2.3rem, 12vw, 3.6rem); }
  .numeral__hint { display: none; }  /* keep portrait tight; the cue carries it */
}

/* ============================================================
   Phone LANDSCAPE (short + touch): keep the desktop 3-column board but
   COMPACT it so the whole rite fits the short height with no scrolling.
   `(max-height:480px) and (pointer:coarse)` = a phone held sideways; a
   real desktop/laptop (fine pointer) or tablet (taller) never matches, so
   their full-size landscape board is untouched.
   ============================================================ */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  .board {
    gap: clamp(0.4rem, 1.4vw, 1rem);
    /* extra bottom padding keeps the pinned controls clear of the dvh/URL-bar edge */
    padding: calc(env(safe-area-inset-top) + 0.4rem)
             calc(env(safe-area-inset-right) + 0.7rem)
             calc(env(safe-area-inset-bottom) + 1.4rem)
             calc(env(safe-area-inset-left) + 0.7rem);
  }
  .pane--left { gap: 0.4rem; }
  /* center: egg sits just under the (fixed) title with tap-room around it,
     and the Deepen/Next + finish controls are pinned to the BOTTOM rather
     than riding up against the egg. */
  .pane--center {
    gap: 0.3rem;
    justify-content: flex-start;
    padding-top: clamp(3.2rem, 12vh, 3.8rem);   /* drop the egg clear below the fixed title */
  }
  .actions { margin-top: auto; }
  /* a smaller title here lifts its baseline (egg clears it) and frees vertical
     budget so the bottom controls never clip; it ghosts on play anyway */
  .title-banner__name { font-size: clamp(1rem, 3.4vw, 1.5rem); }
  .title-banner__tag  { font-size: 0.5rem; letter-spacing: 0.2em; }

  /* card: tighter padding/type; the print is full-bleed (base rule) */
  .card { padding: clamp(0.45rem, 1.6vh, 0.85rem); gap: 0.3rem; }
  .card__art  { font-size: clamp(1.6rem, 7vh, 2.8rem); }
  .card__title { font-size: clamp(0.9rem, 4.4vh, 1.35rem); }
  .card__eyebrow { font-size: 0.58rem; letter-spacing: 0.26em; }

  /* egg sized off the short axis so the whole center column fits with the
     Deepen/finish controls pinned to the bottom (no clip) — +5% per request */
  .egg { width: clamp(78px, 21vh, 147px); }

  /* right column: tame the giant numeral + cue, drop the pre-roll hint */
  .numeral__value { font-size: clamp(2.8rem, 26vh, 6rem); }
  .numeral__hint { display: none; }
  .tip { padding: clamp(0.45rem, 1.6vh, 0.9rem) clamp(0.55rem, 1.6vw, 1rem); }
  .tip__text { font-size: clamp(0.95rem, 5vh, 1.55rem); line-height: 1.25; }
}

/* ---- subtle brand footer (lower-left): link + version (also a refresh check) ---- */
.brand-footer {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 0.9rem);
  bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;              /* was near-invisible; tasteful but legible */
  pointer-events: none;       /* subtle; only the link is interactive */
  transition: opacity 0.3s var(--ease);
}
.brand-footer:hover { opacity: 0.95; }
.brand-footer__link { color: var(--muted); text-decoration: none; pointer-events: auto; }
.brand-footer__link:hover { color: var(--gold); }
.brand-footer__ver { color: var(--muted); opacity: 0.7; }
/* BTF heart-wings mark, recoloured via mask so the black line-art sits in the footer tone.
   Size is decoupled from the text (it's branding, not a bullet) — ratio ~0.6 (297x499). */
.brand-footer__logo {
  flex: none;
  width: 17px;
  height: 28px;
  background-color: var(--gold);
  -webkit-mask: url("../brand/btf-logo.png") center / contain no-repeat;
  mask: url("../brand/btf-logo.png") center / contain no-repeat;
}

/* Desktop: the mark basically IS the site branding — make it substantially
   larger and more present (touch devices keep the compact footer above). */
@media (pointer: fine) and (min-width: 768px) {
  .brand-footer { gap: 0.7rem; font-size: 0.72rem; opacity: 0.8; }
  .brand-footer__logo { width: 40px; height: 66px; }
}

/* ---- reset session (lower-right): mirrors the footer; destructive on hover ---- */
.reset-session {
  position: fixed;
  right: calc(env(safe-area-inset-right) + 0.9rem);
  bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
  z-index: 60;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.42em 0.95em;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s var(--ease);
}
.reset-session:hover {
  opacity: 1;
  color: var(--burn);
  border-color: var(--burn);
  box-shadow: 0 0 14px -3px rgba(255,90,60,0.6);
}

/* ---- brand title banner: pre-roll, top-center; fades once play starts ---- */
.title-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top) + clamp(0.4rem, 2vh, 1.3rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  text-align: center;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.title-banner.is-ghosted {
  opacity: 0.16;       /* ghosted, not gone — restored on reset */
  pointer-events: none;
}
.title-banner__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  letter-spacing: 0.06em;
  color: var(--fg);
  text-shadow: 0 0 26px rgba(178,126,232,0.5);
}
.title-banner__tag {
  margin: 0.1rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(0.55rem, 1.4vw, 0.78rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  text-indent: 0.34em;
}

/* ---- fullscreen lightbox: tap a card image to enlarge it ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(5, 3, 12, 0.92);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: min(96vw, 1040px);
  max-height: 92vh;
}
.lightbox__img {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: 92vh;
  border-radius: 16px;
  box-shadow: 0 30px 90px -20px #000, 0 0 70px -10px rgba(123,68,189,0.55);
}
/* detail panel shown only when the card carries how-to / links */
.lightbox__detail {
  flex: 0 1 340px;
  align-self: stretch;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border-radius: 16px;
  cursor: auto;
  background: linear-gradient(180deg, rgba(28,15,51,0.92), rgba(10,7,18,0.92));
  border: 1px solid var(--hair);
}
.lightbox__detail[hidden] { display: none; }
.lightbox__title {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; line-height: 1.1; color: var(--fg);
}
.lightbox__head {
  margin: 0.2rem 0 0; font-family: var(--display); letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 0.6rem; color: var(--gold);
}
.lightbox__guide {
  margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem;
  font-family: var(--body); font-size: 0.98rem; line-height: 1.4; color: var(--fg);
}
.lightbox__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.lightbox__link {
  font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
  border: 1px solid var(--hair); border-radius: 999px; padding: 0.4em 0.8em;
}
.lightbox__link:hover { border-color: var(--gold); }
/* stack image over detail on tall/narrow screens */
@media (orientation: portrait) {
  .lightbox__inner { flex-direction: column; max-height: 94vh; }
  .lightbox__img { max-height: 52vh; }
  .lightbox__detail { flex: 0 1 auto; align-self: stretch; max-height: 38vh; width: 100%; }
}

/* ---- "bind completed" finale overlay: bind, then fly ---- */
.complete {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vmin;
  background: radial-gradient(ellipse at center, rgba(20,11,34,0.97), rgba(5,3,12,0.985));
  backdrop-filter: blur(6px);
}
.complete[hidden] { display: none; }
.complete__eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1.6vw, 0.85rem);
  color: var(--gold);
}
.complete__title {
  margin: 0 0 1.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 6.5rem);
  line-height: 0.95;
  color: var(--fg);
  text-shadow: 0 0 44px rgba(178,126,232,0.6);
}
.complete__again {
  appearance: none;
  font-family: var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1.8vw, 0.95rem);
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border: 0;
  border-radius: 999px;
  padding: 0.72em 1.8em;
  cursor: pointer;
  box-shadow: 0 0 24px -4px rgba(233,200,125,0.7);
}
.complete__again:hover { filter: brightness(1.05); }

/* ---- 18+ age gate: covers everything until confirmed (persists per device) ---- */
.age-ok .agegate { display: none; }
.agegate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vmin;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(123,68,189,0.22), transparent 70%),
    linear-gradient(160deg, var(--void), var(--void-2) 60%, var(--void-3));
}
.agegate__inner { max-width: 46ch; }
.agegate__brand {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1.6vw, 0.85rem);
  color: var(--gold);
  text-indent: 0.4em;
}
.agegate__title {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 4rem);
  color: var(--fg);
  text-shadow: 0 0 36px rgba(178,126,232,0.5);
}
.agegate__body {
  margin: 0 0 1.4rem;
  font-family: var(--body);
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted);
}
.agegate__confirm {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(0.72rem, 1.8vw, 0.95rem);
  color: var(--fg);
}
.agegate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.agegate__enter {
  appearance: none;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 2vw, 1.05rem);
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border: 0;
  border-radius: 999px;
  padding: 0.8em 2em;
  cursor: pointer;
  box-shadow: 0 0 26px -4px rgba(233,200,125,0.7);
  transition: transform 0.2s var(--ease);
}
.agegate__enter:hover { transform: translateY(-2px); }
.agegate__leave {
  font-family: var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1.4vw, 0.75rem);
  color: var(--muted);
  text-decoration: none;
}
.agegate__leave:hover { color: var(--burn); }

/* ---- Books tab (top-right) + companion feed panel ---- */
/* landscape/desktop: both tabs clustered at top-right */
.tabbar {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.7rem);
  right: calc(env(safe-area-inset-right) + 0.9rem);
  z-index: 60;
  display: flex;
  gap: 0.5rem;
}
/* portrait: spread to opposite corners — Cards left, Books right */
@media (orientation: portrait) {
  .tabbar {
    left: calc(env(safe-area-inset-left) + 0.9rem);
    justify-content: space-between;
  }
}
.deck-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6rem;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s var(--ease);
}
.deck-tab:hover { opacity: 1; color: var(--gold); border-color: var(--gold); }
.deck-tab__glyph { color: var(--gold); font-size: 1.05em; }

.books {
  position: fixed;
  inset: 0;
  z-index: 220;
  overflow-y: auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.2rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,68,189,0.18), transparent 70%),
    linear-gradient(160deg, var(--void), var(--void-2) 70%, var(--void-3));
}
.books[hidden] { display: none; }
.books__close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.8rem);
  right: calc(env(safe-area-inset-right) + 1rem);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--fg);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair);
  border-radius: 50%;
  cursor: pointer;
}
.books__close:hover { border-color: var(--gold); color: var(--gold); }
.books__back {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.85rem);
  left: calc(env(safe-area-inset-left) + 1rem);
  z-index: 1;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem);
  color: var(--fg);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.books__back:hover { border-color: var(--gold); color: var(--gold); }
.books__inner { max-width: 680px; margin: 0 auto; }
.books__eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1.4vw, 0.78rem);
  color: var(--gold);
}
.books__title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--fg);
}
.books__lede {
  margin: 0 0 1.2rem;
  max-width: 52ch;
  font-family: var(--body);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted);
}
.books__cta {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(0.72rem, 1.8vw, 0.92rem);
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-radius: 999px;
  padding: 0.7em 1.5em;
  text-decoration: none;
  box-shadow: 0 0 22px -4px rgba(233,200,125,0.6);
}
.books__cta:hover { filter: brightness(1.05); }

.books__feed {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.bookcard {
  display: flex;
  gap: 1.1rem;
  padding: 1rem;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28,15,51,0.6), rgba(10,7,18,0.6));
}
.bookcard__cover {
  flex: none;
  width: clamp(72px, 18vw, 104px);
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--stone), var(--stone-deep));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -12px #000;
}
.bookcard__placeholder {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--gold);
  opacity: 0.85;
}
.bookcard__body { display: flex; flex-direction: column; gap: 0.25rem; }
.bookcard__tagline {
  margin: 0;
  font-family: var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.6rem;
  color: var(--gold);
}
.bookcard__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--fg);
}
.bookcard__blurb {
  margin: 0.2rem 0 0.5rem;
  font-family: var(--body);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.45;
  color: var(--muted);
}
.bookcard__link {
  margin-top: auto;
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--gold);
  text-decoration: none;
}
.bookcard__link:hover { color: var(--gold-hi); }

/* ============================================================
   Cards browser — flip through the deck by suit
   ============================================================ */
.cardsbrowser {
  position: fixed;
  inset: 0;
  z-index: 220;
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't let scroll chain to a browser back/refresh */
  padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 6vh, 3rem);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,68,189,0.18), transparent 70%),
    linear-gradient(160deg, var(--void), var(--void-2) 70%, var(--void-3));
}
.cardsbrowser[hidden] { display: none; }
.cardsbrowser__inner { max-width: 760px; margin: 0 auto; }
.cardsbrowser__head { text-align: center; margin-bottom: clamp(0.8rem, 2.5vh, 1.4rem); }

/* top toolbar: Back (left) + the primary "Draw this card" (right) */
.cardsbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0 0.6rem;
}
.cardsbar__back, .cardsbar__draw {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.66rem;
  border-radius: 999px;
  padding: 0.6em 1.1em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.cardsbar__back {
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair);
}
.cardsbar__back:hover { color: var(--fg); border-color: rgba(202,166,239,0.5); }
.cardsbar__draw {
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border: 1px solid var(--gold);
  box-shadow: 0 0 18px -2px rgba(233,200,125,0.6);
}
.cardsbar__draw:hover { filter: brightness(1.06); }

/* suit selector chips */
.suitbar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; margin-bottom: clamp(1rem, 3vh, 1.6rem);
}
.suitchip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--display); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.66rem;
  color: var(--muted); background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 0.5em 0.95em; cursor: pointer; transition: all 0.25s var(--ease);
}
.suitchip:hover { color: var(--fg); border-color: rgba(202,166,239,0.5); }
.suitchip[aria-selected="true"] {
  color: var(--void); background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold);
}
.suitchip__glyph { font-size: 1.1em; }

/* carousel */
.carousel { position: relative; display: flex; align-items: center; gap: 0.4rem; }
.carousel__track {
  flex: 1; min-width: 0;        /* allow the flex track to shrink so slides scroll, not overflow */
  display: flex; align-items: flex-start;
  gap: clamp(0.8rem, 3vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain;   /* swiping past the ends won't trigger browser back */
  padding: 0.4rem 0.2rem 1rem; scrollbar-width: thin;
}
.carousel__nav {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
  color: var(--fg); background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair); cursor: pointer; transition: all 0.25s var(--ease);
}
.carousel__nav:hover { border-color: var(--gold); color: var(--gold); }
/* touch / narrow screens swipe instead — drop the arrows so nothing overflows */
@media (max-width: 560px) { .carousel__nav { display: none; } }

/* a slide */
.deckslide {
  flex: 0 0 min(86%, 340px); scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 0.6rem;
  background: linear-gradient(180deg, rgba(28,15,51,0.6), rgba(10,7,18,0.6));
  border: 1px solid color-mix(in srgb, var(--suit-accent, var(--gold)) 28%, var(--hair));
  border-radius: 16px; padding: clamp(0.8rem, 2.5vw, 1.15rem);
}
.deckslide__art {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.deckslide__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deckslide__suit {
  margin: 0; font-family: var(--display); letter-spacing: 0.28em;
  text-transform: uppercase; font-size: 0.6rem; color: var(--suit-accent, var(--gold));
}
.deckslide__title {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 1.4rem; line-height: 1.1; color: var(--fg);
}
.deckslide__gallery { display: flex; gap: 0.4rem; }
.deckslide__gallery img {
  width: 3rem; height: 3rem; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--hair);
}
.deckslide__guidehead {
  margin: 0.2rem 0 0; font-family: var(--display); letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 0.58rem; color: var(--suit-accent, var(--muted));
}
.deckslide__guide {
  margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--body); font-size: 0.92rem; line-height: 1.4; color: var(--fg);
}
.deckslide__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.deckslide__link {
  font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
  border: 1px solid var(--hair); border-radius: 999px; padding: 0.4em 0.8em;
}
.deckslide__link:hover { border-color: var(--gold); }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}