/* ─────────────────────────────────────────────────────────────
   Naamkaran · Auntie Ji's Blessing Packs (ceremony page)
   Tokens, reset, backdrop and the brand header live in base.css;
   reusable UI (buttons, chips, eyebrow, title, Auntie's note) in
   components.css. This sheet owns only what is unique to the
   ceremony: the stage, the foil pack, the trading cards, the
   verdict, Auntie's dock and the intro curtain.
   ───────────────────────────────────────────────────────────── */

/* The ceremony is a fixed stage: nothing scrolls, scenes swap in place. */
body { overflow: hidden; }

/* ── backdrop: petal canvas ──────────────────────────────── */

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

/* ── Auntie sound toggle ─────────────────────────────────── */

/* A quiet secondary control shared by the intro and Auntie's dock. */
.mute {
  margin-left: 0;
  padding: 7px 14px;
  border-color: var(--gold-25);
  color: var(--ivory-60);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: left;
  line-height: var(--leading-snug);
  white-space: nowrap;
  min-height: 44px;
  pointer-events: auto;
}

.mute:hover:not(:disabled) { transform: none; }
/* Both states occupy the longer label's footprint, including when it wraps. */
.mute-label-slot { display: grid; }
.mute-label-slot > span { grid-area: 1 / 1; }
.mute-label-size { visibility: hidden; }
.mute[aria-pressed="true"] .wave { display: none; }
.mute[aria-pressed="true"] .slash { display: inline !important; }

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

#stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-page);
  display: grid;
  place-items: center;
  /* bottom padding reserves the auntie strip so content never overlaps it */
  padding:
    calc(74px + env(safe-area-inset-top))
    var(--space-5)
    calc(185px + env(safe-area-inset-bottom));
}

/* Scene entrances (rise + fade) are GSAP's: app.js show() runs them. */
.scene {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 20px;
}

.scene[hidden] { display: none; }

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

.pick-row { justify-content: center; gap: var(--space-3); }

.summon { margin-top: 18px; }

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

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

/* The idle float, the shake while the strip is gripped, and the torn-open
   collapse are all GSAP timelines in app.js (packFx / tearPack). */
.pack {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 3 / 4.3;
  transform-style: preserve-3d;
  border-radius: 6px;
  outline-offset: var(--space-2);
}

.pack-body {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-pack);
  box-shadow: 0 30px 70px var(--ink-60), inset 0 0 0 1px var(--gold-35);
}

.pack-foil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 20%,
      var(--gold-2-20) 38%,
      var(--glint-32) 47%,
      var(--gold-2-20) 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: var(--space-2);
  padding: 26px 20px;
  text-align: center;
}

.pack-mandala {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 52px, var(--gold-16) 53px, transparent 54px),
    radial-gradient(circle at 50% 44%, transparent 74px, var(--gold-10) 75px, transparent 76px),
    radial-gradient(circle at 50% 44%, transparent 100px, var(--gold-06) 101px, transparent 102px),
    repeating-conic-gradient(from 0deg at 50% 44%,
      var(--gold-06) 0deg 4deg, transparent 4deg 24deg);
  pointer-events: none;
}

.pack-dev {
  font-family: var(--dev);
  font-size: var(--text-4xl);
  color: var(--gold-2);
  text-shadow: 0 2px 14px var(--gold-50);
}

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

.pack-sub {
  font-size: var(--text-sm);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ivory-60);
}

.pack-seal {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ivory-35);
  border: 1px dashed var(--gold-40);
  border-radius: var(--radius-pill);
  padding: 5px var(--space-3);
}

.pack-crimp {
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: repeating-linear-gradient(90deg,
    var(--gold-30) 0 5px,
    var(--night-60) 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: var(--space-3);
  background: linear-gradient(180deg, var(--gold-2-20), var(--gold-2-10));
  border-top: 1px dashed var(--ivory-50);
  border-bottom: 1px dashed var(--ivory-50);
  color: var(--gold-2);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

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

.tear-hint {
  font-size: var(--text-sm);
  letter-spacing: var(--track-wider);
  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 motion — the deal, the flip, the hover lift, and the pointer tilt —
   is GSAP-owned (app.js dealCards / revealFace / attachTilt). CSS holds only
   the resting pose: fanned lean on the card, face-down on the inner. */
.card {
  --mx: 50%;
  --my: 50%;
  width: clamp(120px, 15.5vw, 185px);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transform: rotate(var(--lean, 0deg));
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

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

.face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* card back: paisley-ish brocade */
.face.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, transparent 30px, var(--gold-16) 31px, transparent 33px),
    repeating-conic-gradient(from 45deg at 50% 50%,
      var(--gold-10) 0deg 8deg, transparent 8deg 45deg),
    repeating-linear-gradient(45deg,
      var(--gold-06) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg,
      var(--gold-06) 0 2px, transparent 2px 14px),
    var(--surface-brocade);
  border: 1px solid var(--gold-40);
  display: grid;
  place-items: center;
}

.back-crest {
  font-family: var(--dev);
  font-size: var(--text-4xl);
  color: var(--gold-2-85);
  text-shadow: 0 0 22px var(--gold-60);
  border: 1px solid var(--gold-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: var(--surface);
  border: 1px solid var(--gold-40);
}

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

.tier-tag {
  justify-self: start;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  padding: var(--space-1) 9px;
  border-radius: var(--radius-pill);
}

.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: var(--leading-none);
}

.card-title-block { display: grid; gap: 3px; text-align: center; padding-bottom: var(--space-1); }

.card-name {
  font-family: var(--display);
  /* JS measures the rendered name and writes --name-size so long names shrink
     to the card instead of clipping. The clamp is the pre-fit / no-JS value. */
  font-size: var(--name-size, clamp(15px, 1.7vw, 21px));
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
}

.card-sub {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-normal);
  color: var(--ivory-60);
  line-height: var(--leading-normal);
  padding: 0 var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* tier skins · each tier sets currentColor, which the medallion ring reads */
.r-common  { color: var(--tier-common); }
.r-common .face.front { border-color: var(--tier-common-45); }
.r-common .tier-tag { background: var(--tier-common-14); color: var(--tier-common); }
.r-common .card-medallion { background: radial-gradient(circle, var(--tier-common-16), transparent 70%); }
.r-common .card-initial, .r-common .card-name { color: var(--tier-common-2); }

.r-rare  { color: var(--tier-rare); }
.r-rare .tier-tag { background: var(--gold-16); color: var(--tier-rare-2); }
.r-rare .card-medallion { background: radial-gradient(circle, var(--gold-20), transparent 70%); }
.r-rare .card-initial, .r-rare .card-name { color: var(--tier-rare-2); }

.r-epic { color: var(--tier-epic); }
.r-epic .face.front {
  border-color: var(--sindoor-55);
  background: var(--surface-epic);
}
.r-epic .tier-tag { background: var(--sindoor-20); color: var(--tier-epic-2); }
.r-epic .card-medallion { background: radial-gradient(circle, var(--sindoor-25), transparent 70%); }
.r-epic .card-initial { color: var(--tier-epic-3); }
.r-epic .card-name { color: var(--marigold); }

.r-legend { color: var(--tier-legend); }
.r-legend .face.front {
  border: 1px solid transparent;
  background:
    var(--surface) padding-box,
    conic-gradient(from var(--holo, 0deg),
      var(--gold), var(--sindoor), var(--holo-pink), var(--holo-teal), var(--gold)) 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%,
      var(--gold-20) 42%,
      var(--holo-pink-16) 50%,
      var(--holo-teal-16) 58%,
      transparent 72%);
  pointer-events: none;
}

.r-legend .tier-tag {
  background: var(--gradient-holo-tag);
  color: var(--ivory);
}
.r-legend .card-medallion { background: radial-gradient(circle, var(--gold-2-25), transparent 70%); }
.r-legend .card-initial, .r-legend .card-name {
  color: var(--tier-legend);
  text-shadow: 0 0 24px var(--gold-2-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: var(--shadow-lg), 0 0 14px var(--gold-2-25);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 0 34px var(--gold-2-65), 0 0 70px var(--sindoor-25);
  }
}

/* The first crowning beat happens in the existing hand: a GSAP keyframe tween
   in app.js crown() lifts the winner while the losers fade out via autoAlpha
   (opacity ending in visibility: hidden, which is what keeps iOS Safari from
   repainting a settled fade back to full strength). Layout remains untouched
   until the final, in-flow state takes over. */
.card.crowned { z-index: var(--z-crown); }

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

.verdict {
  display: none;
  gap: var(--space-2);
  justify-items: center;
  align-content: start;
}

/* The selected card and verdict share one layout, so they cannot collide.
   Taller content scrolls inside the stage instead of falling behind fixed UI. */
#cardScene.is-final {
  align-self: stretch;
  width: min(100%, 720px);
  min-height: 0;
  grid-template-rows: minmax(120px, 1fr) auto;
  gap: clamp(12px, 2dvh, 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: var(--space-1);
}

/* The verdict rises 26px into place and the winner FLIPs in from the fanned
   row; those transforms extend the scrollable area for a few frames, which
   flashes a scrollbar over the finale. The scene stays clipped while they
   play (app.js morphToFinal) and opens to scrolling once everything lands. */
#cardScene.is-final.is-morphing { overflow: hidden; }

#cardScene.is-final .card-row {
  min-height: 0;
  flex-wrap: nowrap;
  align-items: center;
}

/* The winner keeps its on-screen position and size across this layout change:
   app.js measures before/after and plays the gap back as one GSAP FLIP morph
   that clears its own transform on landing. So the card owns no CSS transform
   of its own in the final state — not even the fanned lean. */
#cardScene.is-final .card.crowned {
  width: auto;
  height: min(100%, 210px);
  max-width: min(52vw, 200px);
  transform: none;
}

#cardScene.is-final .verdict.show { display: grid; }

.verdict-name {
  font-family: var(--display);
  font-size: var(--display-hero);
  line-height: var(--leading-none);
  color: var(--gold-2);
  text-shadow: var(--glow-gold);
}

.verdict-dev { font-family: var(--dev); font-size: var(--text-3xl); color: var(--marigold); }

.verdict-meaning { max-width: 440px; color: var(--ivory-60); font-size: var(--text-base); line-height: var(--leading-relaxed); }

.verdict-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: 10px; }

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

#auntieDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dock);
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  padding:
    0
    calc(16px + env(safe-area-inset-right))
    env(safe-area-inset-bottom)
    calc(16px + env(safe-area-inset-left));
  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 var(--ink-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; }

/* an .nk-note.nk-note--tail placed beside Auntie; the kit paints it */
.auntie-speech {
  margin-bottom: 18px;
  max-width: min(380px, 48vw);
  min-width: 0;
}
#auntieSound:not(:empty) { margin-top: var(--space-2); }
.bubble {
  /* Hidden resting pose; the first caption pops it in via GSAP. */
  opacity: 0;
  transform: translateY(8px) scale(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: var(--z-curtain);
  overflow-y: auto;
  padding: calc(104px + env(safe-area-inset-top)) 32px calc(48px + env(safe-area-inset-bottom));
  display: grid;
  align-items: center;
  background:
    radial-gradient(900px 600px at 70% 45%, var(--maroon-55), transparent 70%),
    var(--scrim-strong);
}

.intro-inner {
  width: min(1100px, 100%);
  margin-inline: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

.intro-copy { min-width: 0; }

.intro-dev {
  margin-bottom: 18px;
  font-family: var(--dev);
  font-size: clamp(30px, 3vw, 40px);
  color: var(--marigold);
}

.intro-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gold-2);
}

.intro-sub {
  max-width: 43ch;
  margin-top: 24px;
  color: var(--catalog-secondary);
  font-size: var(--text-lede);
  line-height: var(--leading-relaxed);
}

.intro-actions {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 30px;
}

.intro-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--gold-30);
  border-radius: var(--radius-sm);
  background: var(--ivory-06);
  font-size: var(--text-md);
  color: var(--gold-2);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.intro-link:hover { background: var(--gold-10); border-color: var(--gold); }

.intro-fine {
  max-width: 38ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--catalog-secondary);
}

/* The same animated Auntie joins the ceremony dock after the opening. */
.intro #auntieDock {
  position: relative;
  inset: auto;
  padding: 0;
  display: grid;
  align-self: center;
  justify-items: center;
  min-width: 0;
}

.intro .auntie-wrap { width: min(100%, 350px); }
.intro .auntie-speech { display: none; }

@media (max-width: 760px) {
  .intro {
    padding: calc(92px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    align-items: start;
  }
  .intro-inner { grid-template-columns: 108px minmax(0, 1fr); gap: 18px; max-width: 480px; }
  .intro-copy { display: contents; }
  .intro-dev { grid-column: 1 / -1; margin: 0; font-size: 27px; }
  .intro-title { grid-column: 1 / -1; font-size: clamp(31px, 7.6vw, 44px); }
  .intro-sub { grid-column: 2; grid-row: 3; margin: 0; align-self: center; font-size: 16px; }
  .intro #auntieDock { grid-column: 1; grid-row: 3; }
  .intro .auntie-wrap { width: 108px; }
  .intro-actions { grid-column: 1 / -1; margin-top: 6px; justify-items: stretch; }
  .intro-link { justify-content: center; gap: 12px; }
  .intro-fine { max-width: none; text-align: center; }
  .intro-actions .nk-btn--lg { padding: 16px; font-size: 18px; }
}

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

@media (max-width: 760px) {
  #stage {
    padding:
      calc(64px + env(safe-area-inset-top))
      var(--space-3)
      calc(150px + env(safe-area-inset-bottom));
  }
  #auntieDock {
    padding:
      0
      calc(10px + env(safe-area-inset-right))
      env(safe-area-inset-bottom)
      calc(10px + env(safe-area-inset-left));
  }
  .auntie-speech { max-width: none; flex: 1; margin-bottom: var(--space-3); }
  .bubble { font-size: 12.5px; padding: 10px 13px; }
  .auntie-wrap { width: 98px; }
  .card { width: clamp(88px, 24vw, 120px); }
  .card-row { gap: var(--space-2); }
  /* meaning text is dropped from small card faces; the verdict shows it */
  .card-sub { display: none; }
  .card-name { font-size: var(--name-size, 13px); }
  .tier-tag { font-size: 7px; letter-spacing: 0.1em; padding: 3px var(--space-2); }
  .tier-tag .h { display: none; }
  .verdict-name { font-size: clamp(30px, 9vw, 44px); }
  .verdict-meaning { font-size: var(--text-md); }
  .verdict-actions .nk-btn { font-size: var(--text-base); padding: 10px 20px; }
  .verdict-actions .nk-btn--primary { font-size: var(--text-base); }
}

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

/* GSAP-driven motion respects reduced motion in app.js (the DUR helper and
   packFx); this block covers what is still pure CSS. */
@media (prefers-reduced-motion: reduce) {
  .auntie-wrap, .jhumka, .steam path, .pack-foil,
  .card-medallion::before, .r-legend .face.front { animation: none !important; }
  .card.legend-hint:not(.flipped) .face.back {
    animation: none;
    box-shadow: var(--shadow-lg), 0 0 30px var(--gold-2-45);
  }
  .tear-hint { animation: none; opacity: 0.8; }
  * { transition-duration: 0.15s !important; }
}

/* Keep the intro action comfortable on narrow phones. */
@media (max-width: 380px) {
  .intro { padding-inline: 18px; }
  .intro-inner { grid-template-columns: 80px minmax(0, 1fr); }
  .intro .auntie-wrap { width: 80px; }
  .intro-actions .nk-btn--lg { font-size: var(--text-base); padding-inline: var(--space-2); }
  .intro-inner .nk-btn { white-space: normal; }
}

.intro-invite { display: grid; gap: var(--space-2); min-width: 0; max-width: 100%; }
.intro-start { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.intro-start .mute { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; justify-content: center; color: var(--catalog-secondary); }
.intro-start .mute svg { width: 20px; height: 20px; }
.intro-start .mute-label-slot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .intro-start { width: 100%; }
  .intro-start #enterBtn { flex: 1; min-width: 0; padding-inline: var(--space-2); font-size: var(--text-base); white-space: nowrap; }
  .intro-start .nk-btn-flower { display: none; }
}
@media (max-width: 380px) {
  .intro-start #enterBtn { font-size: var(--text-sm); }
}