/* ─────────────────────────────────────────────────────────────
   Naamkaran · Auntie Ji's Blessing Packs
   Palette: aubergine silk night, zari gold, sindoor, marigold
   ───────────────────────────────────────────────────────────── */

:root {
  --night:    #1a0b1e;
  --night-2:  #2a1130;
  --maroon:   #5c1a2e;
  --gold:     #e9b85c;
  --gold-2:   #f6d992;
  --sindoor:  #e8472e;
  --marigold: #ffa02e;
  --ivory:    #fff3de;
  --ivory-60: rgba(255, 243, 222, 0.6);
  --ivory-35: rgba(255, 243, 222, 0.35);

  --display: "Yatra One", cursive;
  --body:    "Karla", sans-serif;
  --dev:     "Tiro Devanagari Hindi", serif;

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; }

body {
  font-family: var(--body);
  color: var(--ivory);
  background:
    radial-gradient(1200px 700px at 50% 30%, var(--night-2), transparent 70%),
    var(--night);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── backdrop layers ─────────────────────────────────────── */

#fx {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.rays {
  position: fixed;
  inset: -50%;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 42%,
    rgba(233, 184, 92, 0.022) 0deg 6deg,
    transparent 6deg 12deg
  );
  animation: rays-turn 240s linear infinite;
  pointer-events: none;
}

@keyframes rays-turn { to { transform: rotate(360deg); } }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(10, 3, 12, 0.75) 100%);
  pointer-events: none;
}

/* ── header ──────────────────────────────────────────────── */

.brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ivory-60);
}

.brand-dev {
  font-family: var(--dev);
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

.brand-rule {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.mute {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 243, 222, 0.06);
  border: 1px solid rgba(233, 184, 92, 0.25);
  color: var(--ivory-60);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}

.mute:hover { color: var(--gold-2); border-color: var(--gold); }
.mute[aria-pressed="true"] .wave { display: none; }
.mute[aria-pressed="true"] .slash { display: inline !important; }

/* ── stage & scenes ──────────────────────────────────────── */

#stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  /* bottom padding reserves the auntie strip so content never overlaps it */
  padding: 74px 24px 185px;
}

.scene {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 20px;
  animation: scene-in 0.7s var(--ease-out) both;
}

.scene[hidden] { display: none; }

@keyframes scene-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--marigold);
}

.eyebrow.second { margin-top: 14px; }

/* ── lobby ───────────────────────────────────────────────── */

.lobby-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.1;
}

.lobby-title em {
  font-style: normal;
  color: var(--gold);
}

.pick-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.chip {
  display: grid;
  gap: 2px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid rgba(233, 184, 92, 0.3);
  background: rgba(255, 243, 222, 0.04);
  color: var(--ivory);
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.25s var(--ease-pop), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.chip small {
  font-family: var(--dev);
  font-size: 12px;
  color: var(--ivory-35);
}

.chip:hover { transform: translateY(-3px); border-color: var(--gold); }

.chip[aria-checked="true"] {
  background: linear-gradient(160deg, rgba(232, 71, 46, 0.35), rgba(255, 160, 46, 0.2));
  border-color: var(--marigold);
  box-shadow: 0 6px 24px rgba(232, 71, 46, 0.35);
  transform: translateY(-3px);
}

.chip[aria-checked="true"] small { color: var(--gold-2); }

/* ── big button ──────────────────────────────────────────── */

.big-btn {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  font-family: var(--display);
  font-size: 19px;
  color: var(--night);
  background: linear-gradient(175deg, var(--gold-2), var(--gold) 55%, #c98f35);
  box-shadow:
    0 10px 34px rgba(233, 184, 92, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.3s var(--ease-pop), box-shadow 0.3s, opacity 0.3s;
}

.big-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 44px rgba(233, 184, 92, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.big-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.big-btn .btn-flower { color: var(--sindoor); font-size: 15px; }

.big-btn.small { font-size: 16px; padding: 12px 26px; margin-top: 0; }

.big-btn.ghost {
  background: transparent;
  color: var(--gold-2);
  box-shadow: none;
}

.big-btn.ghost:hover { box-shadow: 0 10px 30px rgba(233, 184, 92, 0.2); }

/* ── the pack ────────────────────────────────────────────── */

.pack-stage {
  display: grid;
  justify-items: center;
  gap: 26px;
  perspective: 1100px;
}

.pack {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 3 / 4.3;
  transform-style: preserve-3d;
  animation: pack-float 4.5s ease-in-out infinite;
  border-radius: 6px;
  outline-offset: 8px;
}

@keyframes pack-float {
  0%, 100% { transform: translateY(0) rotateY(-7deg) rotateX(2deg); }
  50%      { transform: translateY(-14px) rotateY(7deg) rotateX(-2deg); }
}

.pack.shaking { animation: pack-shake 0.5s ease-in-out infinite; }

@keyframes pack-shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.5deg) translateX(-3px); }
  75%      { transform: rotate(2.5deg) translateX(3px); }
}

.pack-body {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(160deg, #3a1440, #5c1a2e 55%, #2a1130);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(233, 184, 92, 0.35);
  transition: transform 0.6s var(--ease-out), opacity 0.6s;
}

.pack-foil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 20%,
      rgba(246, 217, 146, 0.22) 38%,
      rgba(255, 255, 255, 0.32) 47%,
      rgba(246, 217, 146, 0.22) 56%,
      transparent 75%);
  background-size: 300% 100%;
  animation: foil-sweep 3.2s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes foil-sweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -60% 0; }
}

.pack-art {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 26px 20px;
  text-align: center;
}

.pack-mandala {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 52px, rgba(233, 184, 92, 0.14) 53px, transparent 54px),
    radial-gradient(circle at 50% 44%, transparent 74px, rgba(233, 184, 92, 0.1) 75px, transparent 76px),
    radial-gradient(circle at 50% 44%, transparent 100px, rgba(233, 184, 92, 0.07) 101px, transparent 102px),
    repeating-conic-gradient(from 0deg at 50% 44%,
      rgba(233, 184, 92, 0.07) 0deg 4deg, transparent 4deg 24deg);
  pointer-events: none;
}

.pack-dev {
  font-family: var(--dev);
  font-size: 30px;
  color: var(--gold-2);
  text-shadow: 0 2px 14px rgba(233, 184, 92, 0.5);
}

.pack-name {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1.05;
  color: var(--ivory);
}

.pack-sub {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-60);
}

.pack-seal {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-35);
  border: 1px dashed rgba(233, 184, 92, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
}

.pack-crimp {
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: repeating-linear-gradient(90deg,
    rgba(233, 184, 92, 0.28) 0 5px,
    rgba(26, 11, 30, 0.6) 5px 10px);
}

.pack-crimp.top { top: 0; }
.pack-crimp.bottom { bottom: 0; }

.tear-strip {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  background: linear-gradient(180deg, rgba(246, 217, 146, 0.2), rgba(246, 217, 146, 0.08));
  border-top: 1px dashed rgba(255, 243, 222, 0.5);
  border-bottom: 1px dashed rgba(255, 243, 222, 0.5);
  color: var(--gold-2);
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tear-strip:active { cursor: grabbing; }

.pack.torn .tear-strip {
  transition: transform 0.55s ease-in, opacity 0.55s;
  transform: translateX(120%) rotate(14deg) !important;
  opacity: 0;
}

.pack.torn { animation: none; }

.pack.torn .pack-body {
  transform: translateY(30px) rotateX(-24deg) scale(0.92);
  opacity: 0;
  transition-delay: 0.25s;
}

.tear-hint {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-35);
  animation: hint-pulse 2.4s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ── cards ───────────────────────────────────────────────── */

.card-row {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
  perspective: 1400px;
  flex-wrap: wrap;
}

.card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  width: clamp(120px, 15.5vw, 185px);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(60px) scale(0.6);
  transition: transform 0.7s var(--ease-pop), opacity 0.5s;
}

.card.dealt {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--lean, 0deg));
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-pop);
  transform: rotateY(180deg) rotateX(var(--rx)) rotateY(var(--ry));
}

.card.flipped .card-inner {
  transform: rotateY(0deg) rotateX(var(--rx)) rotateY(var(--ry));
}

.card:not(.flipped):hover .card-inner {
  transform: rotateY(180deg) translateY(-10px);
}

.card:not(.flipped) { cursor: pointer; }

.face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* card back: paisley-ish brocade */
.face.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, transparent 30px, rgba(233, 184, 92, 0.16) 31px, transparent 33px),
    repeating-conic-gradient(from 45deg at 50% 50%,
      rgba(233, 184, 92, 0.1) 0deg 8deg, transparent 8deg 45deg),
    repeating-linear-gradient(45deg,
      rgba(233, 184, 92, 0.06) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg,
      rgba(233, 184, 92, 0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #43163f, #5c1a2e);
  border: 1px solid rgba(233, 184, 92, 0.4);
  display: grid;
  place-items: center;
}

.back-crest {
  font-family: var(--dev);
  font-size: 30px;
  color: rgba(246, 217, 146, 0.85);
  text-shadow: 0 0 22px rgba(233, 184, 92, 0.6);
  border: 1px solid rgba(233, 184, 92, 0.45);
  border-radius: 50%;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
}

/* card front */
.face.front {
  display: grid;
  /* minmax(0,…) stops wide content from blowing the column past the card */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 9px;
  gap: 5px;
  background: linear-gradient(165deg, #2f1235, #1f0c24);
  border: 1px solid rgba(233, 184, 92, 0.4);
}

.face.front::after {          /* foil glare follows the pointer */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.16), transparent 42%);
  pointer-events: none;
}

.tier-tag {
  justify-self: start;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}

.tier-tag .h { font-family: var(--dev); font-size: 10px; letter-spacing: 0; }

.card-medallion {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  /* width-capped square; max-height stops it spilling on short cards */
  width: min(72%, 142px);
  aspect-ratio: 1;
  max-height: 100%;
  border-radius: 50%;
  position: relative;
}

.card-medallion::before {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    currentColor 0deg 3deg, transparent 3deg 15deg);
  opacity: 0.4;
  animation: medallion-spin 24s linear infinite;
}

@keyframes medallion-spin { to { transform: rotate(360deg); } }

.card-initial {
  font-family: var(--dev);
  font-size: clamp(16px, 4.4vw, 48px);
  line-height: 1;
}

.card-title-block { display: grid; gap: 3px; text-align: center; padding-bottom: 4px; }

.card-name {
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 21px);
  line-height: 1.05;
}

.card-sub {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ivory-60);
  line-height: 1.45;
  padding: 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* tier skins */
.r-common  { color: #cdd3e0; }
.r-common .face.front { border-color: rgba(205, 211, 224, 0.45); }
.r-common .tier-tag { background: rgba(205, 211, 224, 0.14); color: #cdd3e0; }
.r-common .card-medallion { background: radial-gradient(circle, rgba(205, 211, 224, 0.16), transparent 70%); }
.r-common .card-initial, .r-common .card-name { color: #e6eaf2; }

.r-rare  { color: var(--gold); }
.r-rare .tier-tag { background: rgba(233, 184, 92, 0.16); color: var(--gold-2); }
.r-rare .card-medallion { background: radial-gradient(circle, rgba(233, 184, 92, 0.2), transparent 70%); }
.r-rare .card-initial, .r-rare .card-name { color: var(--gold-2); }

.r-epic { color: var(--sindoor); }
.r-epic .face.front {
  border-color: rgba(232, 71, 46, 0.55);
  background: linear-gradient(165deg, #3c1030, #240a1c);
}
.r-epic .tier-tag { background: rgba(232, 71, 46, 0.2); color: #ffb3a1; }
.r-epic .card-medallion { background: radial-gradient(circle, rgba(232, 71, 46, 0.25), transparent 70%); }
.r-epic .card-initial { color: #ffcdb8; }
.r-epic .card-name { color: var(--marigold); }

.r-legend { color: var(--gold-2); }
.r-legend .face.front {
  border: 1px solid transparent;
  background:
    linear-gradient(165deg, #2f1235, #1c0a20) padding-box,
    conic-gradient(from var(--holo, 0deg),
      #e9b85c, #e8472e, #d052c0, #4fb3a5, #e9b85c) border-box;
  animation: holo-turn 5s linear infinite;
}

@property --holo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes holo-turn { to { --holo: 360deg; } }

.r-legend .face.front::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(calc(var(--holo, 0deg) + 115deg),
      transparent 30%,
      rgba(233, 184, 92, 0.2) 42%,
      rgba(208, 82, 192, 0.16) 50%,
      rgba(79, 179, 165, 0.16) 58%,
      transparent 72%);
  pointer-events: none;
}

.r-legend .tier-tag {
  background: linear-gradient(90deg, rgba(233, 184, 92, 0.3), rgba(208, 82, 192, 0.25));
  color: var(--ivory);
}
.r-legend .card-medallion { background: radial-gradient(circle, rgba(246, 217, 146, 0.28), transparent 70%); }
.r-legend .card-initial, .r-legend .card-name {
  color: var(--gold-2);
  text-shadow: 0 0 24px rgba(246, 217, 146, 0.55);
}

/* the face-down legendary card hums with promise */
.card.legend-hint:not(.flipped) .face.back {
  animation: legend-hum 1.9s ease-in-out infinite;
}

@keyframes legend-hum {
  0%, 100% {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 14px rgba(246, 217, 146, 0.25);
  }
  50% {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 34px rgba(246, 217, 146, 0.65),
      0 0 70px rgba(232, 71, 46, 0.25);
  }
}

/* crowning: the chosen card glides to center stage (transform set inline) */
.card.crowned {
  z-index: 30;
  transition: transform 1.1s var(--ease-pop);
}

.card.dimmed {
  opacity: 0;
  filter: saturate(0.4);
  pointer-events: none;
  transition: opacity 0.9s ease, filter 0.9s ease;
}

/* ── verdict ─────────────────────────────────────────────── */

/* fixed overlay in the lower half: takes no layout space, so the card
   row stays centered during play and never shifts when this appears */
.verdict {
  position: fixed;
  left: 24px;
  right: 24px;
  top: 46%;
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: start;
  visibility: hidden;
}
.verdict.show { visibility: visible; animation: scene-in 0.7s var(--ease-out) both; }

.verdict-name {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1;
  color: var(--gold-2);
  text-shadow: 0 0 40px rgba(246, 217, 146, 0.45);
}

.verdict-dev { font-family: var(--dev); font-size: 24px; color: var(--marigold); }

.verdict-meaning { max-width: 440px; color: var(--ivory-60); font-size: 14px; line-height: 1.6; }

.verdict-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ── auntie dock ─────────────────────────────────────────── */

#auntieDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 16px;
  pointer-events: none;
}

.auntie-wrap {
  order: -1;
  flex: 0 0 auto;
  width: clamp(110px, 13vw, 160px);
  transform-origin: bottom center;
  animation: auntie-sway 5s ease-in-out infinite;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

@keyframes auntie-sway {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.9deg) translateY(-3px); }
}

.auntie-wrap svg { display: block; width: 100%; height: auto; }

.bubble {
  position: relative;
  margin-bottom: 18px;
  max-width: min(380px, 48vw);
  background: rgba(255, 243, 222, 0.96);
  color: #2c1024;
  border-radius: 18px 18px 18px 4px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.3s, transform 0.35s var(--ease-pop);
}

.bubble.show { opacity: 1; transform: none; }

.bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 10px;
  border: 9px solid transparent;
  border-right-color: rgba(255, 243, 222, 0.96);
}

/* jhumka + parts animation hooks (SVG classes) */
.jhumka { transform-origin: top center; animation: jhumka-swing 3.4s ease-in-out infinite; }
.jhumka.right { animation-delay: 0.4s; }

@keyframes jhumka-swing {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.steam path {
  stroke-dasharray: 6 8;
  animation: steam-rise 3s linear infinite;
  opacity: 0.7;
}

@keyframes steam-rise { to { stroke-dashoffset: -28; } }

/* ── intro ───────────────────────────────────────────────── */

.intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 600px at 50% 40%, rgba(92, 26, 46, 0.55), transparent 70%),
    rgba(16, 6, 19, 0.94);
  backdrop-filter: blur(6px);
  transition: opacity 0.7s, visibility 0.7s;
}

.intro.gone { opacity: 0; visibility: hidden; }

.intro-inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
  animation: scene-in 0.9s var(--ease-out) both;
}

.intro-dev {
  font-family: var(--dev);
  font-size: clamp(30px, 4vw, 44px);
  color: var(--marigold);
  text-shadow: 0 0 34px rgba(255, 160, 46, 0.5);
}

.intro-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02;
  background: linear-gradient(175deg, var(--ivory), var(--gold-2) 70%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro-sub {
  color: var(--ivory-60);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
}

.intro-sub em { color: var(--gold-2); font-style: italic; }

.intro-fine {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-35);
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 760px) {
  #stage { padding: 64px 12px 150px; }
  #auntieDock { padding: 0 10px; }
  .bubble { max-width: none; flex: 1; margin-bottom: 12px; font-size: 12.5px; padding: 10px 13px; }
  .auntie-wrap { width: 98px; }
  .card { width: clamp(88px, 24vw, 120px); }
  .card-row { gap: 8px; }
  /* meaning text is dropped from small card faces; the verdict shows it */
  .card-sub { display: none; }
  .card-name { font-size: 13px; }
  .tier-tag { font-size: 7px; letter-spacing: 0.1em; padding: 3px 8px; }
  .tier-tag .h { display: none; }
  .verdict { left: 12px; right: 12px; top: 44%; }
  .verdict-name { font-size: clamp(30px, 9vw, 44px); }
  .verdict-meaning { font-size: 13px; }
  .big-btn.small { font-size: 14px; padding: 10px 20px; }
  .brand { padding: 14px 16px; }
  .brand-en { display: none; }
}

/* ── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rays, .pack, .auntie-wrap, .jhumka, .pack-foil,
  .card-medallion::before, .r-legend .face.front { animation: none !important; }
  .card.legend-hint:not(.flipped) .face.back {
    animation: none;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(246, 217, 146, 0.5);
  }
  .tear-hint { animation: none; opacity: 0.8; }
  * { transition-duration: 0.15s !important; }
}