/* ============================================================
   Daily Luck Deck — styles.css
   ------------------------------------------------------------
   Layout:    CSS Grid stage (title / deck / draw), no overlap
   Aesthetic: morning ivory + sun gold, light fortune ritual
   Theming:   5 time-of-day bands swap CSS custom props
   A11y:      prefers-reduced-motion, AA contrast on muted text
   ============================================================ */

:root {
  /* default = 白天 band, applyTimeTheme() overrides at runtime */
  --ivory: #fff8e8;
  --ivory-2: #fff0c8;
  --ink: #4b2d05;
  --ink-2: #2b1800;
  --gold: #d79b23;
  --gold-2: #ffd36a;
  --gold-glow: rgba(255, 200, 84, 0.58);
  --red: #c46a22;
  --muted: #795d33;            /* darkened from #6b7a6e for AA contrast */

  --card-w: clamp(250px, 32dvh, 320px);
  --card-h: clamp(360px, 46dvh, 460px);
  --card-w-open: min(440px, 92vw);
  --card-h-open: min(580px, calc(100dvh - 260px));

  /* parallax targets */
  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ivory);
  color: var(--ink);
  font-family: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  min-height: 100dvh;
  overflow-x: hidden;
}

button, input { font: inherit; }
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(215, 155, 35, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(75, 45, 5, 0.05) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}

/* cinema vignette — gets darker during draw climax for focus */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(75, 45, 5, 0.18) 100%);
  z-index: 2;
  transition: background 0.6s ease;
}
body.dimmed::after {
  background: radial-gradient(ellipse at center, transparent 28%, rgba(75, 45, 5, 0.36) 100%);
}
body.climax::after {
  background: radial-gradient(ellipse at center, rgba(215, 155, 35, 0.18) 0%, transparent 30%, rgba(75, 45, 5, 0.42) 100%);
}

/* mystic symbols with parallax depth — unified tarot vocab (☽ ☉ ✦ ✧ ❦) */
.mystic {
  position: fixed;
  color: var(--ink);
  opacity: 0.06;
  font-family: serif;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

main {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  font-family: "Cormorant Garamond", serif;
  transition: opacity 0.5s;
}
.brand {
  font-size: 22px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.brand .dot { color: var(--gold); margin: 0 6px; }

.topbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* compact pill button — used for 收藏 in topbar
   matches .icon-btn height exactly (36px box) so the two align in .topbar-right */
.fav-btn {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}
.fav-btn:hover {
  background: var(--ink);
  color: var(--ivory);
  box-shadow: 0 0 0 3px rgba(215, 155, 35, 0.2);
}
.fav-btn:active { transform: translateY(1px); }
.fav-btn .count {
  display: inline-block; background: var(--red); color: var(--ivory);
  font-family: "Cormorant Garamond", serif; font-size: 11px; padding: 1px 7px;
  border-radius: 10px; margin-left: 8px; vertical-align: middle; font-weight: 600;
}

/* icon-only square button used in topbar */
.icon-btn {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  position: relative;
}
.icon-btn:hover {
  background: var(--ink); color: var(--ivory);
  box-shadow: 0 0 0 3px rgba(215, 155, 35, 0.2);
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn.muted { opacity: 0.4; }
.icon-btn[data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: -28px; right: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.icon-btn:hover[data-label]::after { opacity: 1; }

/* ============================================================
   STAGE — CSS Grid solves the title/deck/button overlap
   ------------------------------------------------------------
   Rows:
     1. Title slot         (auto height, top-aligned)
     2. Card area          (1fr, the deck/hero live centered here)
     3. Draw-button slot   (auto height, bottom margin)
   Everything stacks into column 1; hero/burst/particles use absolute
   positioning to overlay the whole stage when needed.
   ============================================================ */
.stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "card"
    "draw";
  justify-items: center;
  align-items: center;
  padding: clamp(14px, 2vh, 28px) 20px clamp(22px, 3vh, 48px);
  perspective: 2000px;
  gap: clamp(10px, 2.4vh, 32px);
}

.stage.revealed-state {
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "card"
    "draw";
  gap: clamp(12px, 2vh, 22px);
}
.stage.revealed-state .home-overlay,
.stage.revealed-state .draw-btn-wrap {
  display: none;
}

/* particles + burst + legendary overlay span entire grid */
.particles,
.burst,
.legendary-overlay,
.skip-hint,
.legendary-ribbon {
  grid-area: 1 / 1 / -1 / -1;
}

/* ============================================================
   HOME OVERLAY (title)
   ============================================================ */
.home-overlay {
  grid-area: title;
  text-align: center;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  max-width: 90vw;
  padding: 0 16px;
}
.home-overlay.hidden { opacity: 0; transform: translateY(-30px); }
.home-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(36px, 4.6vw + 1rem, 72px);
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 14px;
  font-weight: 500;
  word-break: keep-all;
}
.home-sub-cn {
  font-family: "Noto Serif SC", serif;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.4em;
  margin-bottom: 6px;
}
.home-sub-en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.25em;
}
.home-today-mark {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold);
  border: 1px solid rgba(215, 155, 35, 0.4);
  opacity: 0;
  transition: opacity 0.4s;
}
.home-today-mark.show { opacity: 1; }

/* ============================================================
   DECK — three back cards
   ------------------------------------------------------------
   Top card (n=2) keeps full ornament; n=1 and n=3 only show
   the thin gold spine (no center star, no inner frame).
   ============================================================ */
.deck {
  grid-area: card;
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
  cursor: pointer;
}
.deck.hidden { opacity: 0; pointer-events: none; }
.deck.empty {
  opacity: 0.45;
  cursor: not-allowed;
}
.deck-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 18px rgba(75, 45, 5, 0.22);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s, box-shadow 0.4s;
}
/* Bottom of stack: tilted left, just shows a spine */
.deck-card:nth-child(1) { transform: translate(-8px, -6px) rotate(-3deg); z-index: 1; }
/* Middle: fully decorated, slight breathing shadow */
.deck-card:nth-child(2) {
  transform: translate(0, 0) rotate(0deg);
  z-index: 3;
  box-shadow: 0 14px 36px rgba(75, 45, 5, 0.34);
  animation: deckBreathe 4.5s ease-in-out infinite;
}
/* Top right side of stack: tilted right, spine only */
.deck-card:nth-child(3) { transform: translate(8px, 6px) rotate(3deg); z-index: 2; }

/* only the middle card has the inner frame + center star */
.deck-card:nth-child(2)::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--gold);
  opacity: 0.6;
}
.deck-card:nth-child(2)::after {
  content: "✦";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 60px; font-family: serif;
  text-shadow: 0 0 12px rgba(212, 176, 122, 0);
  animation: starGlow 4s ease-in-out infinite;
}

/* hover: top card lifts subtly, side cards barely splay */
.deck:hover .deck-card:nth-child(2) {
  transform: translate(0, -4px) rotate(0deg);
  box-shadow: 0 20px 50px rgba(75, 45, 5, 0.38);
}
.deck:hover .deck-card:nth-child(1) { transform: translate(-14px, -10px) rotate(-5deg); }
.deck:hover .deck-card:nth-child(3) { transform: translate(14px, 10px) rotate(5deg); }

/* fanning-out animation when draw starts */
.deck.fanning .deck-card:nth-child(1) { transform: translate(-90px, -40px) rotate(-18deg); opacity: 0; }
.deck.fanning .deck-card:nth-child(3) { transform: translate(90px, 40px) rotate(18deg); opacity: 0; }
.deck.fanning .deck-card:nth-child(2) { opacity: 0; transform: scale(0.96); }

@keyframes deckBreathe {
  0%, 100% { box-shadow: 0 14px 36px rgba(75, 45, 5, 0.34); }
  50%      { box-shadow: 0 18px 44px rgba(215, 155, 35, 0.28); }
}
@keyframes starGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(212, 176, 122, 0); }
  50%      { text-shadow: 0 0 18px rgba(212, 176, 122, 0.6); }
}

/* ============================================================
   HERO CARD — positioned absolutely over the grid card cell
   ============================================================ */
.hero {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(40px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.9s cubic-bezier(0.34, 1.2, 0.4, 1),
    width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    min-height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s;
  will-change: transform, width, height, opacity;
  z-index: 20;
}
.hero-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 1.0s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.hero.rising {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1);
}
.hero.flipping {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1.02);
}
.hero.flipping .hero-inner,
.hero.revealed .hero-inner {
  transform: rotateY(180deg);
}
.hero.revealed {
  opacity: 1;
  width: var(--card-w-open);
  height: var(--card-h-open);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.stage.revealed-state .hero.revealed {
  top: calc(50% - 34px);
}

.hero-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--gold);
  box-shadow: 0 30px 80px rgba(75, 45, 5, 0.45);
}
.hero-back {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  overflow: hidden;
}
/* keep back SVG centered + proportional, no stretch */
.hero-back-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--gold);
}
.hero-back-svg .glow {
  animation: starGlow 3s ease-in-out infinite;
  transform-origin: center;
}
.hero-back-svg .spin-slow {
  animation: spin 60s linear infinite;
  transform-origin: center;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hero-front {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 8%, rgba(255, 226, 125, 0.42), transparent 36%), linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%);
  color: var(--ink);
  padding: 0;
  overflow: hidden;
}

/* ============================================================
   CARD CONTENT (front face)
   ============================================================ */
.card-inner {
  margin: 10px;
  padding: 24px 24px 22px;
  position: relative;
  min-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
}

/* hand-drawn border — viewBox matches actual card aspect ratio,
   preserveAspectRatio="none" then no longer distorts the corners
   because the corners are sized in real card units (20px). */
.card-svg-border {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--gold);
  pointer-events: none;
  overflow: visible;
}
/* perimeter ≈ 2 * (440 + 540) = 1960; corners 20 units each */
.card-svg-border .b-main { stroke-dasharray: 1960; stroke-dashoffset: 1960; }
.card-svg-border .b-tl,
.card-svg-border .b-tr,
.card-svg-border .b-bl,
.card-svg-border .b-br { stroke-dasharray: 40; stroke-dashoffset: 40; }

.card-svg-border.draw-in .b-tl { animation: drawCorner 0.45s 0.00s cubic-bezier(0.5, 0.0, 0.3, 1) forwards; }
.card-svg-border.draw-in .b-tr { animation: drawCorner 0.45s 0.10s cubic-bezier(0.5, 0.0, 0.3, 1) forwards; }
.card-svg-border.draw-in .b-br { animation: drawCorner 0.45s 0.20s cubic-bezier(0.5, 0.0, 0.3, 1) forwards; }
.card-svg-border.draw-in .b-bl { animation: drawCorner 0.45s 0.30s cubic-bezier(0.5, 0.0, 0.3, 1) forwards; }
.card-svg-border.draw-in .b-main { animation: drawMain 1.1s 0.20s cubic-bezier(0.45, 0.0, 0.45, 1) forwards; }
@keyframes drawCorner { to { stroke-dashoffset: 0; } }
@keyframes drawMain { to { stroke-dashoffset: 0; } }

.card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Cormorant Garamond", serif; font-size: 12px;
  color: var(--muted); letter-spacing: 0.18em;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(215, 155, 35, 0.3);
}
.card-id { color: var(--gold); font-weight: 600; }
/* difficulty rendered as Roman numerals Ⅰ-Ⅴ
   .on dots become bright, .off dots stay faint when .difficulty.revealed
   per-dot --di staggers reveal sequence */
.difficulty {
  color: var(--red);
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  letter-spacing: 0.2em;
}
.difficulty .d {
  opacity: 0;
  transition: opacity 0.35s ease;
  transition-delay: calc(var(--di, 0) * 0.09s);
}
.difficulty.revealed .d.on  { opacity: 1; }
.difficulty.revealed .d.off { opacity: 0.18; color: var(--muted); }

.card-name {
  font-family: "Noto Serif SC", "Cormorant Garamond", serif;
  font-size: clamp(19px, 2.7dvh, 24px);
  line-height: 1.28;
  color: var(--ink);
  text-align: center;
  margin: 4px 0 14px;
  font-weight: 500;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-name-text { position: relative; }
.card-name-text .caret {
  display: inline-block;
  width: 2px;
  height: 22px;
  background: var(--gold);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 0.6s steps(1) infinite;
}
.card-name-text .caret.gone { display: none; }
@keyframes blink { 50% { opacity: 0; } }

.card-name-deco {
  color: var(--gold);
  font-size: 13px;
  margin: 0 10px;
  opacity: 0;
  transition: opacity 0.4s;
}
.card-name-deco.show { opacity: 0.7; }

.card-desc {
  font-family: "Noto Serif SC", serif;
  font-size: clamp(12px, 1.55dvh, 14px); line-height: 1.55;
  color: var(--ink); text-align: center;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
}
.card-desc.show { opacity: 1; transform: translateY(0); }

.card-fields {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 16px; font-size: clamp(11px, 1.45dvh, 13px);
}
.card-field {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: "Noto Serif SC", serif;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}
.card-field.show { opacity: 1; transform: translateY(0); }
.card-field-label {
  font-family: "Cormorant Garamond", serif; color: var(--gold);
  letter-spacing: 0.15em; font-size: 12px;
  min-width: 66px; padding-top: 2px;
}
.card-field-value { color: var(--ink); flex: 1; line-height: 1.5; }
.card-field-aux {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 2px;
}
.tag {
  display: inline-block; border: 1px solid var(--ink);
  padding: 2px 8px; font-size: 10.5px; margin: 2px 4px 2px 0;
  color: var(--ink); font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  letter-spacing: 0.05em;
  transition: all 0.2s;
}
.tag:hover { background: var(--ink); color: var(--ivory); }
.tag.type { border-color: var(--red); color: var(--red); }
.tag.type:hover { background: var(--red); color: var(--ivory); }
.tag .tag-sigil {
  margin-right: 4px;
  color: var(--gold);
  font-family: serif;
}


/* ============================================================
   ACTION BUTTONS — slimmer, wrap-safe on narrow viewports
   ============================================================ */
.actions {
  grid-area: draw;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateY(20px);
  z-index: 25;
  width: 100%;
  max-width: 540px;
}
.actions.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.btn {
  height: 38px;
  box-sizing: border-box;
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  padding: 0 18px;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px; letter-spacing: 0.22em;
  cursor: pointer; text-transform: uppercase;
  transition: all 0.25s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.btn:hover {
  background: var(--ink); color: var(--ivory);
  box-shadow: 0 0 0 3px rgba(215, 155, 35, 0.25), inset 0 0 0 1px var(--gold);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--ivory); border-color: var(--gold); }
.btn.primary:hover { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.btn.icon {
  width: 38px;
  padding: 0;
  font-size: 15px;
  letter-spacing: 0;
}
.icon-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ============================================================
   DRAW BUTTON (home)
   ============================================================ */
.draw-btn-wrap {
  grid-area: draw;
  text-align: center;
  transition: opacity 0.4s, transform 0.5s;
  z-index: 15;
}
.draw-btn-wrap.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }
.draw-btn {
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--gold);
  padding: 16px 56px;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px; letter-spacing: 0.4em;
  cursor: pointer; text-transform: uppercase;
  transition: all 0.35s;
  position: relative; overflow: hidden;
}
.draw-btn::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(212, 176, 122, 0.4);
  pointer-events: none;
  transition: inset 0.35s;
}
.draw-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(212, 176, 122, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s;
}
.draw-btn:hover {
  background: var(--gold); color: var(--ink); border-color: var(--ink);
  letter-spacing: 0.5em;
  box-shadow: 0 0 30px rgba(215, 155, 35, 0.4);
}
.draw-btn:hover::after { transform: translateX(100%); }
.draw-btn:active { transform: scale(0.98); }
.draw-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}
.draw-btn:disabled:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--gold);
  letter-spacing: 0.4em;
}
.home-count {
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--muted); font-size: 13px;
  letter-spacing: 0.2em;
}

/* ============================================================
   GOLD BURST — fires at flip climax
   ============================================================ */
.burst {
  align-self: center;
  justify-self: center;
  width: 100px; height: 100px;
  transform: scale(0);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 230, 180, 0.9) 0%,
    rgba(212, 176, 122, 0.6) 30%,
    rgba(215, 155, 35, 0.0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 22;
}
.burst.fire { animation: burstFire 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes burstFire {
  0%   { transform: scale(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(14); opacity: 0; }
}

/* ============================================================
   PARTICLES
   ============================================================ */
.particles {
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.p {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
  opacity: 0;
  animation: pFloat var(--dur, 6s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  top: 110%;
}
@keyframes pFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 0px)); opacity: 0; }
}
.particles.active .p { animation-play-state: running; }

/* ============================================================
   FORTUNE DETAIL VIEW
   ============================================================ */
.prompt-view {
  position: fixed;
  inset: 0;
  background: var(--ivory);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  overflow-y: auto;
}
.prompt-view.show { opacity: 1; pointer-events: auto; }
.prompt-wrap {
  width: 600px;
  max-width: 100%;
}
.prompt-header {
  text-align: center;
  margin-bottom: 28px;
}
.prompt-header-mark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.4em;
  font-size: 14px;
  margin-bottom: 14px;
}
.prompt-header-title {
  font-family: "Noto Serif SC", serif;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.4;
  font-weight: 500;
}
.prompt-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center; color: var(--gold);
  margin: 24px 0 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px; letter-spacing: 0.18em;
  white-space: nowrap;
}
.prompt-divider::before, .prompt-divider::after {
  content: "";
  display: block;
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: var(--gold);
  opacity: 0.35;
}
.prompt-box {
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--gold);
  padding: 24px 26px;
  font-family: "SF Mono", "Menlo", "Noto Serif SC", monospace;
  font-size: 13.5px; line-height: 1.75;
  max-height: 320px; overflow-y: auto;
  white-space: pre-wrap;
  box-shadow: 0 20px 60px rgba(75, 45, 5, 0.25);
}
.prompt-box::-webkit-scrollbar { width: 6px; }
.prompt-box::-webkit-scrollbar-thumb { background: var(--gold); }
.prompt-actions {
  display: flex; gap: 12px; margin-top: 20px;
  flex-wrap: wrap;
}
.prompt-actions .btn { flex: 1; min-width: 140px; }
.copy-feedback {
  text-align: center; margin-top: 14px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic; color: var(--gold);
  height: 18px; letter-spacing: 0.15em;
  font-size: 14px; opacity: 0; transition: opacity 0.3s;
}
.copy-feedback.show { opacity: 1; }

/* ============================================================
   FORTUNE BAG / ALL / RECEIVED DRAWER
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(75, 45, 5, 0.5);
  z-index: 50; display: none;
  backdrop-filter: blur(4px);
}
.drawer-overlay.show { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 100vw;
  background: var(--ivory); z-index: 51;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--gold);
  box-shadow: -20px 0 60px rgba(75, 45, 5, 0.2);
}
.drawer.show { transform: translateX(0); }
.drawer-header {
  padding: 28px 30px 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.drawer-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-size: 28px;
}
.drawer-close {
  background: none; border: none; color: var(--ink);
  font-size: 24px; cursor: pointer; font-family: serif;
  transition: transform 0.2s;
}
.drawer-close:hover { transform: rotate(90deg); color: var(--red); }

.drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(215, 155, 35, 0.3);
}
.drawer-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.drawer-tab .tab-count {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--gold);
  margin-left: 4px;
  letter-spacing: 0.1em;
}
.drawer-tab:hover { color: var(--ink); }
.drawer-tab.active { color: var(--ink); }
.drawer-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 16px; right: 16px;
  height: 2px;
  background: var(--gold);
}

.drawer-search-wrap {
  padding: 14px 30px 0;
}
.drawer-search {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(75, 45, 5, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: var(--ink);
  padding: 0 13px;
  font-family: "Noto Serif SC", "Cormorant Garamond", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.drawer-search::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.drawer-list { flex: 1; overflow-y: auto; padding: 16px 30px 20px; }
.fav-item {
  border: 1px solid var(--ink);
  padding: 14px 18px; margin-bottom: 12px;
  cursor: pointer; transition: all 0.25s;
  position: relative; background: var(--ivory-2);
}
.fav-item:hover {
  background: var(--ink); color: var(--ivory);
  box-shadow: 0 6px 20px rgba(75, 45, 5, 0.2);
  transform: translateY(-1px);
}
.fav-item:hover .fav-item-meta { color: var(--gold-2); }
.fav-item.done {
  opacity: 0.65;
}
.fav-item.done::before {
  content: "✓";
  position: absolute;
  left: -1px; top: -1px;
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: serif;
  font-size: 13px;
}
.fav-item-meta {
  font-family: "Cormorant Garamond", serif;
  font-size: 11px; color: var(--gold);
  letter-spacing: 0.2em; margin-bottom: 6px;
}
.fav-item-name {
  font-family: "Noto Serif SC", serif;
  font-size: 14.5px; font-weight: 500; line-height: 1.4;
  padding-right: 24px;
}
.fav-item-del {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: inherit;
  cursor: pointer; opacity: 0.4; font-size: 16px;
  transition: opacity 0.2s;
}
.fav-item-del:hover { opacity: 1; color: var(--red); }
.fav-empty {
  text-align: center; padding: 60px 20px;
  color: var(--muted);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}
.fav-empty-icon { font-size: 48px; color: var(--gold); opacity: 0.4; margin-bottom: 16px; }

/* RECEIVED marker on revealed card */
.done-badge {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--ink);
  color: var(--gold);
  padding: 4px 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  border-left: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  display: none;
  z-index: 5;
}
.done-badge.show { display: block; }

/* skip hint during animation */
.skip-hint {
  align-self: end;
  justify-self: center;
  margin-bottom: 80px;
  color: var(--muted);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 30;
}
.skip-hint.show { opacity: 0.7; }
.stage.animating { cursor: pointer; }

/* ============================================================
   LEGENDARY aura
   ============================================================ */
.hero.legendary .hero-back,
.hero.legendary .hero-front {
  box-shadow:
    0 0 60px rgba(212, 176, 122, 0.6),
    0 0 120px rgba(215, 155, 35, 0.4),
    0 30px 80px rgba(75, 45, 5, 0.5);
  border-color: var(--gold-2);
}
.hero.legendary .hero-front {
  background: linear-gradient(180deg, #fdf6e3 0%, var(--ivory-2) 100%);
}
.hero.legendary { animation: legendPulse 2s ease-in-out infinite; }
@keyframes legendPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 30px rgba(212, 176, 122, 0.6)); }
}
.legendary-overlay {
  pointer-events: none;
  z-index: 24;
  opacity: 0;
  transition: opacity 0.6s;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 176, 122, 0.15) 0%, transparent 60%);
}
.legendary-overlay.show { opacity: 1; }
.legendary-ribbon {
  align-self: start;
  justify-self: center;
  margin-top: 14vh;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.5em;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s, transform 0.6s;
  z-index: 30;
  text-shadow: 0 0 20px rgba(212, 176, 122, 0.5);
  pointer-events: none;
}
.legendary-ribbon.show { opacity: 1; transform: translateY(0); }

/* ============================================================
   PWA install hint
   ============================================================ */
.pwa-hint {
  position: fixed;
  bottom: 16px; left: 16px;
  background: var(--ink); color: var(--ivory);
  padding: 8px 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  border: 1px solid var(--gold);
  cursor: pointer;
  display: none;
  z-index: 60;
}
.pwa-hint.show { display: block; animation: cardIn 0.5s ease; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  padding: 20px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--muted); font-size: 12px;
  letter-spacing: 0.2em;
  z-index: 10; position: relative;
}

/* ============================================================
   OFF-SCREEN SHARE CANVAS — 1080×1920 instagram story style
   Rendered into DOM only during share, then removed.
   ============================================================ */
.share-canvas {
  position: fixed;
  top: -10000px; left: -10000px;
  width: 1080px; height: 1920px;
  background: var(--ivory);
  color: var(--ink);
  padding: 120px 80px;
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  display: flex; flex-direction: column;
  z-index: -1;
  overflow: hidden;
}
.share-canvas::before {
  content: "";
  position: absolute; inset: 40px;
  border: 2px solid var(--gold);
  pointer-events: none;
}
.share-canvas::after {
  content: "";
  position: absolute; inset: 56px;
  border: 1px solid rgba(215, 155, 35, 0.5);
  pointer-events: none;
}
.share-canvas .sc-mark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 32px;
  letter-spacing: 0.6em;
  color: var(--gold);
  text-align: center;
  margin-top: 40px;
}
.share-canvas .sc-id {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  color: var(--gold);
  letter-spacing: 0.4em;
  text-align: center;
  margin-top: 10px;
}
.share-canvas .sc-star {
  font-size: 80px;
  color: var(--gold);
  text-align: center;
  margin: 60px 0 30px;
}
.share-canvas .sc-name {
  font-family: "Noto Serif SC", serif;
  font-size: 62px;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  font-weight: 500;
  margin-bottom: 40px;
}
.share-canvas .sc-desc {
  font-family: "Noto Serif SC", serif;
  font-size: 30px;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
  margin: 0 60px 60px;
}
.share-canvas .sc-meta {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 60px;
}
.share-canvas .sc-meta-row {
  text-align: center;
}
.share-canvas .sc-meta-label {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.3em;
  margin-bottom: 8px;
}
.share-canvas .sc-meta-value {
  font-family: "Noto Serif SC", serif;
  font-size: 28px;
  color: var(--ink);
}
.share-canvas .sc-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 80px;
}
.share-canvas .sc-tag {
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: 24px;
  padding: 8px 24px;
  border: 1px solid var(--red);
  color: var(--red);
}

.share-canvas .sc-source {
  margin: 54px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: #4b2d05;
}
.share-canvas .sc-source img {
  width: 132px;
  height: 132px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(75, 45, 5, 0.22);
}
.share-canvas .sc-source-kicker {
  font-family: "Noto Serif SC", serif;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: #795d33;
}
.share-canvas .sc-source-url {
  margin-top: 8px;
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  letter-spacing: 0.08em;
  color: #4b2d05;
}

.share-canvas .sc-footer {
  margin-top: auto;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.4em;
  color: var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .topbar { padding: 18px 16px; }
  :root {
    --card-w: 280px;
    --card-h: 400px;
    --card-w-open: min(92vw, 380px);
    --card-h-open: min(60dvh, 500px);
  }
  .stage {
    padding: 16px 16px 32px;
    gap: clamp(10px, 1.8vh, 18px);
  }
  .stage.revealed-state .hero.revealed {
    top: calc(50% - 68px);
  }
  .home-title { font-size: clamp(32px, 8vw, 46px); }
  .home-sub-cn { letter-spacing: 0.32em; }
  .actions { gap: 6px; }
  .btn { padding: 0 14px; font-size: 12px; letter-spacing: 0.15em; }
  .btn.icon { width: 36px; }
  .draw-btn { padding: 14px 40px; font-size: 16px; letter-spacing: 0.3em; }
  .prompt-view {
    align-items: flex-start;
    padding-top: max(44px, env(safe-area-inset-top));
  }
  .prompt-header { margin-bottom: 22px; }
  .prompt-divider { gap: 10px; letter-spacing: 0.12em; }
  .prompt-box {
    max-height: 42dvh;
    padding: 20px 22px;
  }
  .drawer-header { padding: 28px 30px 12px; }
  .drawer-search-wrap { padding: 14px 30px 0; }
}

@media (max-width: 460px) {
  :root {
    --card-w: 260px;
    --card-h: 380px;
    --card-w-open: calc(100vw - 32px);
    --card-h-open: min(59dvh, 500px);
  }
  /* on tiny screens, stack with primary on top */
  .actions { flex-direction: column; }
  .actions .btn.primary { order: 1; width: 100%; }
  .actions .icon-group { order: 2; }
  .actions #reroll-btn { order: 3; }
  .drawer-tabs {
    justify-content: space-between;
    padding: 0 30px;
  }
  .drawer-tab {
    padding: 10px 0;
    letter-spacing: 0.18em;
  }
  .drawer-list {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* ============================================================
   REDUCED MOTION — disable parallax / breathing / spin / typewriter
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .deck-card,
  .hero-back-svg .spin-slow,
  .hero-back-svg .glow,
  .draw-btn::after,
  .hero.legendary { animation: none !important; }
}