/* menu.css — the Covenant Gate (the main menu).
 *
 * The paper-styled front door that now precedes the deck codex: a cosmic
 * accretion scene behind a breathing aurora, the champions' foil booster
 * pack shelf (three generated wrappers on the shallow fan arc — the
 * retired avatar-card fan's successor — a static shelf, each pack carrying
 * the rare-card rainbow sweep + flare), and the four ornate plates (Find
 * Match / Practice / Learn / Deck Builder) on the right.
 *
 * Theming: JS stamps --menu-a/--menu-b (the hovered plate's accents) plus
 * soft rgba variants on #main-menu; the aurora, plate glows and sigil colors
 * all read them, so moving through the gate visibly re-lights the room.
 *
 * All motion is transform/opacity only (no filter blur — the headless
 * suites render in software); prefers-reduced-motion parks every animation.
 */

#main-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(18px, 3vh, 38px) clamp(96px, 12vw, 256px) 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 88% 58% at 50% -14%, #3a301e 0%, rgba(28, 23, 16, 0) 62%),
    radial-gradient(ellipse 62% 54% at 82% 78%, var(--menu-b-soft, rgba(138, 184, 230, 0.1)) 0%, transparent 68%),
    linear-gradient(180deg, #100d1c 0%, #090812 54%, #040409 100%);
  color: #e8d9b0;
  isolation: isolate;
  user-select: none;
}

/* ---------------- atmosphere ---------------- */

.menu__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.menu__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 54% at 50% 44%, rgba(0, 0, 0, 0) 0%, rgba(6, 4, 2, 0.6) 100%),
    linear-gradient(180deg, rgba(8, 6, 3, 0.55) 0%, rgba(8, 6, 3, 0) 26%,
      rgba(8, 6, 3, 0) 64%, rgba(6, 4, 2, 0.8) 100%);
}
/* The accretion scene is two canvas layers: the static radial atmosphere
   (painted once per resize) inserted beneath the live canvas, which paints
   only what moves — the twinkling starfield, the flow bands, the falling
   matter. Tree order keeps them under the ::after vignette (unchanged). */
.menu__blackhole-sky,
.menu__blackhole {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}
.menu__aurora {
  position: absolute;
  left: 44%;
  top: 48%;
  width: 980px;
  height: 760px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 44% 46% at 42% 46%, var(--menu-a-soft, rgba(232, 201, 106, 0.2)) 0%, transparent 70%),
    radial-gradient(ellipse 46% 48% at 60% 58%, var(--menu-b-soft, rgba(138, 184, 230, 0.16)) 0%, transparent 72%);
  animation: menu-breathe 6.5s ease-in-out infinite;
}
@keyframes menu-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

/* The gate frame: twin gold hairlines only — the viewfinder corner
   brackets are retired (the user's call). */
.menu__frame {
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
}
.menu__frame::before,
.menu__frame::after {
  content: '';
  position: absolute;
  border-radius: 3px;
}
.menu__frame::before { inset: 0; border: 1px solid rgba(201, 168, 106, 0.17); }
.menu__frame::after { inset: 5px; border: 1px solid rgba(201, 168, 106, 0.07); }

/* ---------------- banner ---------------- */

.menu__brand {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 2px;
}
/* The wordmark wears the pack wrappers' own foil recipe (tools/gen_packs.py
   paints the same stamp on every booster): Radley with the pack's tight
   tracking, a bright cap-line catch, a white-hot specular at ~22% of the
   glyph height, copper mid-tones and a deep-gold baseline, plus the dark
   emboss — so the gate's logo and the packs read as one product. */
.menu__title {
  font-family: 'Radley', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(42px, 6.2vh, 72px);
  line-height: 1;
  letter-spacing: 0.125em;
  text-indent: 0.125em;
  /* The pack stamp is set in caps; the DOM text stays "Cosmoria". */
  text-transform: uppercase;
  /* The gradient stops map to the CAP-HEIGHT band (the glyphs occupy
     roughly 10%..80% of the line box), so the white-hot specular lands on
     the upper third of the letters exactly as the raster bakes it. */
  background: linear-gradient(180deg,
    #fff3cc 9%,
    #fffdf2 20%,
    #ffffff 26%,
    #f0cf9e 34%,
    #c48a56 50%,
    #9a6a3a 66%,
    #483212 82%,
    #2e1f0a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 2px rgba(26, 15, 5, 0.92))
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 26px var(--menu-glow, transparent));
  animation: menu-title-in 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes menu-title-in {
  from { opacity: 0; transform: translateY(-14px); letter-spacing: 0.3em; }
  to   { opacity: 1; transform: none; }
}
/* The pack wrappers' small print, brought to the gate (the user's ask):
   EB Garamond caps with the wrapper's wide tracking (the generator stamps
   "TRADING CARD GAME" at 0.407em), in the small print's cream ink — so the
   logo block and the packs read as one product. The DOM text is
   title-case; the caps are paint-only, like the wordmark's. */
.menu__subtitle {
  margin-top: 8px;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(11px, 1.6vh, 17px);
  line-height: 1;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: #e8d49e;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}
.menu__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(430px, 60vw);
  margin: 11px auto 0;
}
.menu__rule::before,
.menu__rule::after { content: ''; flex: 1; height: 1px; }
.menu__rule::before { background: linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.6)); }
.menu__rule::after { background: linear-gradient(90deg, rgba(201, 168, 106, 0.6), transparent); }
.menu__rule i {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f4e4b4, #a8823e);
  box-shadow: 0 0 10px rgba(232, 201, 106, 0.6);
}
.menu__tagline {
  margin-top: 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1.7vh, 17px);
  letter-spacing: 0.04em;
  color: #b0a17c;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* ---------------- stage ---------------- */

.menu__stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* The two columns spread to the page padding (a balanced outer margin,
     doubled to ~6vw) so the shelf and the plates breathe while the center
     opens up and the black-hole scene reads behind the gate. */
  justify-content: space-between;
  gap: clamp(30px, 4vw, 90px);
  min-height: 0;
  padding: 6px 0;
}
.menu__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-height: 0;
}
.menu__right { flex: 0 0 auto; }

/* The champions' foil booster packs (the retired avatar-card fan's
   successor — the user's call: the gate now shows realistic sealed
   product). THREE large packs sit on the shallow fan arc; each wrapper is
   a generated raster (tools/gen_packs.py) carrying the champion's artwork
   in its arched window, the gold crinkle-cut crimps at top and bottom,
   and the Cosmoria branding. The shelf is STATIC — every champion's pack
   stays put so the wrappers read clearly (the user's call: cycling packs
   was confusing) — and every pack wears the rare-card foil treatment's
   real motion bands (the .foil-sweep rainbow + .foil-flare beam from
   card.css, desynced per slot via --pk-phase) — a foil booster is exactly
   what the rare laminate imitates. The whole fan drifts with the pointer
   (--px/--py, set by JS). */
.menu__packs {
  --pk-w: 288px;
  --pk-h: 480px;
  --pk-step: 158px;
  --pk-tilt: 6deg;
  position: relative;
  width: 668px;
  height: 556px;
  /* The pointer parallax translates the whole shelf, and the JS quantizes
     --px/--py so each product below is a WHOLE number of px (see
     MainMenuView._bindParallax). A fractional transform puts the fan on a
     composited layer that the compositor RESAMPLES at every pointer move —
     the gold inner border lines smear and brighten (the reported "left/top
     inner border lines go pixellated after hovering the wing packs" bug),
     and the old reset handler lived on a pointer-events: none backdrop so
     the resampled state persisted. Whole-pixel translation keeps the
     layer's raster pixel-aligned; the old translate3d + rotate is retired
     (the tiny rotation resampled every tilted raster, and per-pack tilt
     already supplies the fan's angle). */
  transform: translate(
    calc(var(--px, 0) * 16px),
    calc(var(--py, 0) * 10px));
  transition: transform 0.3s ease-out;
}
.menu__pack {
  position: absolute;
  left: 50%;
  top: 50%;
  /* The hover raise is TRANSLATION-ONLY (never regress — the reported
     "hover pixelates the pack and it goes darker then lighter for ~1s"
     bug). Any transform scale or box resize makes the compositor stretch
     its cached raster of the thin gold frame lines and swap in a re-raster
     a beat later; the crossfade between the two fixed-size faces inside
     .menu__pack-art supplies the enlarge instead, so NO raster is ever
     scaled, resized, or re-laid-out. */
  width: var(--pk-w);
  height: var(--pk-h);
  margin: calc(var(--pk-h) / -2) 0 0 calc(var(--pk-w) / -2);
  transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg));
  transition: transform 0.28s ease, z-index 0s;
  animation: menu-pack-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}
/* The --fx/--fy slots are px-valued (a unitless 0 would poison the hover
   transform's calc()). */
.menu__pack--0 { --fx: calc(var(--pk-step) * -1); --fy: 24px; --fr: calc(var(--pk-tilt) * -1); z-index: 1; animation-delay: 0.1s; }
.menu__pack--1 { --fx: 0px; --fy: 0px; --fr: 0deg; z-index: 3; animation-delay: 0.22s; }
.menu__pack--2 { --fx: var(--pk-step); --fy: 24px; --fr: var(--pk-tilt); z-index: 1; animation-delay: 0.34s; }
@keyframes menu-pack-in {
  /* Translation + fade + a rotation settle (rotation resamples the raster
     the same way a scale does, but only while the entry runs; the pack's
     final pose is the CSS class transform, and the hover is
     translation-only — see the wrapper notes). No scale: a scaled raster
     can leave a stale texture behind (the same class of bug the hover
     crossfade exists to avoid). */
  from { opacity: 0; transform: translate(var(--fx, 0), calc(var(--fy, 0px) + 38px)) rotate(0deg); }
  to   { opacity: 1; transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); }
}

/* The wrapper itself: the generated raster, RIGHT-ANGLED corners (the
   user's call — a sealed pack is a straight-edged rectangle) and a contact
   shadow, so a pack reads as a physical sealed product on the shelf. The
   foil sheen rides above it (the rare-card bands). */
.menu__pack-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Visible so the hover face (5% larger) can grow past the rest box — the
     pack's gold outer frame must never be cropped. */
  overflow: visible;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.58),
    0 4px 10px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.26s ease;
}
/* TWO fixed-size raster faces — the rest pack and the 5%-larger hover pack —
   crossfaded on hover (never regress). Neither image is ever scaled,
   resized, or re-laid-out: the enlarge is a DISSOLVE between two crisp
   rasters, each painted at its true on-screen scale, while the pack's
   motion is the slot's translation-only transform. This is the only
   arrangement that cannot produce the stale-raster flash — a scaled or
   resized raster makes the compositor stretch its cached texture and swap
   in a re-raster up to a second later (the reported "hover pixelates the
   pack and it goes darker then lighter for ~1s" bug). The hover face is
   centered on the rest face, so the dissolve grows symmetrically. */
.menu__pack-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pk-w);
  height: var(--pk-h);
  margin: calc(var(--pk-h) / -2) 0 0 calc(var(--pk-w) / -2);
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.menu__pack-img--hover {
  width: calc(var(--pk-w) * 1.05);
  height: calc(var(--pk-h) * 1.05);
  margin: calc(var(--pk-h) * 1.05 / -2) 0 0 calc(var(--pk-w) * 1.05 / -2);
  opacity: 0;
}
.menu__pack--hover > .menu__pack-art > .menu__pack-img--rest { opacity: 0; }
.menu__pack--hover > .menu__pack-art > .menu__pack-img--hover { opacity: 1; }
/* The sheen follows the hover face's 5% growth. Gradients only (the sweep
   band + flare beam), so the compositor's stretch is invisible — and its
   clip/box stays constant, no raster content is affected. */
.menu__pack-foil {
  transform-origin: 50% 50%;
  transition: transform 0.28s ease;
}
.menu__pack--hover > .menu__pack-foil { transform: scale(1.05); }

/* The foil sheen rides the rare-card recipe (card.css owns the bands and
   keyframes — .menu__pack-foil is one of the recipe's surfaces). The film
   is square-cornered to match the wrapper, and the JS shine beat re-arms
   the flare as a one-shot on top of its own slow cycle. */
.menu__pack-foil { border-radius: 0; }
.menu__pack--flash > .menu__pack-foil > .foil-flare {
  animation: foil-flare-move 10s ease-in-out infinite, foil-flare-once 1.15s ease-out;
  animation-delay: calc(var(--pk-phase, 0) * -1.4s), 0s;
}

/* Hover: the pack rises and its glow breathes in the champion's accent
   (stamped by JS from the roster entry). */
.menu__pack--hover { z-index: 9; }
.menu__pack--hover .menu__pack-art {
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.66),
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 38px var(--pk-accent-soft, rgba(232, 201, 106, 0.25));
}
.menu__pack--hover {
  transform: translate(var(--fx, 0), calc(var(--fy, 0) - 20px)) rotate(var(--fr, 0deg));
}
.menu__packs:hover + .menu__fan-plaque { color: #c9b98c; }

/* The plaque under the fan names the hovered pack's champion (JS swaps the
   text). */
.menu__fan-plaque {
  position: relative;
  min-height: 22px;
  padding: 4px 22px;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: #9a8a64;
  transition: color 0.2s ease;
  z-index: 3;
}
.menu__fan-plaque::before,
.menu__fan-plaque::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.4));
}
.menu__fan-plaque::before { left: -6px; }
.menu__fan-plaque::after { right: -6px; transform: scaleX(-1); }

/* ---------------- plates ---------------- */

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.menu__plate {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  width: clamp(330px, 30vw, 408px);
  padding: 14px 18px 14px 14px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border: 1px solid rgba(201, 168, 106, 0.26);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, rgba(68, 56, 39, 0.5), rgba(20, 15, 9, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.09), 0 10px 26px rgba(0, 0, 0, 0.38);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: menu-plate-in 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.menu__plate:nth-child(1) { animation-delay: 0.3s; }
.menu__plate:nth-child(2) { animation-delay: 0.38s; }
.menu__plate:nth-child(3) { animation-delay: 0.46s; }
.menu__plate:nth-child(4) { animation-delay: 0.54s; }
@keyframes menu-plate-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}
.menu__plate::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--menu-a, #e8c96a), transparent);
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.menu__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 244, 214, 0.14) 47%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.menu__plate:hover,
.menu__plate:focus-visible {
  transform: translateX(9px);
  border-color: var(--menu-a, #d6ba80);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 28px var(--menu-glow, rgba(232, 201, 106, 0.3)),
    inset 0 1px 0 rgba(255, 240, 205, 0.14);
}
.menu__plate:hover::before,
.menu__plate:focus-visible::before { opacity: 1; }
.menu__plate:hover::after,
.menu__plate:focus-visible::after { transform: translateX(130%); }
.menu__plate:focus-visible { outline: 2px solid #f4e9c9; outline-offset: 3px; }
.menu__plate-sigil {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(201, 168, 106, 0.3);
  border-radius: 12px;
  color: var(--menu-a, #e8c96a);
  background:
    radial-gradient(circle at 50% 34%, var(--menu-a-soft, rgba(232, 201, 106, 0.2)), rgba(0, 0, 0, 0.28) 78%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.12);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.menu__plate-sigil svg {
  width: 29px;
  height: 29px;
  filter: drop-shadow(0 0 7px var(--menu-glow, rgba(232, 201, 106, 0.4)));
}
.menu__plate-copy { min-width: 0; }
.menu__plate-label {
  display: block;
  font-family: 'Radley', Georgia, serif;
  font-weight: 400;
  font-size: clamp(21px, 2.7vh, 26px);
  line-height: 1.1;
  color: #f4e9c9;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.menu__plate-sub {
  display: block;
  margin-top: 3px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1.6vh, 15.5px);
  color: #a89a76;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__plate-arrow {
  font-size: 27px;
  line-height: 1;
  color: var(--menu-a, #e8c96a);
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-shadow: 0 0 12px var(--menu-glow, transparent);
}
.menu__plate:hover .menu__plate-arrow,
.menu__plate:focus-visible .menu__plate-arrow { opacity: 0.95; transform: none; }

/* ---------------- footer ---------------- */

.menu__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* The keyboard-help line is RETIRED (the user's call): the studio credit
     alone rides the footer's screen-edge end. */
  justify-content: flex-end;
  gap: 20px;
  padding: 4px 4px 0;
}
.menu__mark {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: #6f6347;
  letter-spacing: 0.04em;
}

/* ---------------- overlays (Find Match / Deck Builder) ---------------- */

.menu__overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 30px;
  background: radial-gradient(ellipse 60% 56% at 50% 46%, rgba(20, 15, 9, 0.72) 0%, rgba(5, 4, 2, 0.9) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.menu__overlay--open { opacity: 1; pointer-events: auto; }
.menu__find,
.menu__builder {
  position: relative;
  width: min(760px, 92vw);
  padding: 34px 42px 30px;
  text-align: center;
  border: 1px solid rgba(201, 168, 106, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%),
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(72, 59, 40, 0.55) 0%, rgba(18, 13, 8, 0.94) 70%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 60px var(--menu-glow, rgba(232, 201, 106, 0.16)),
    inset 0 1px 0 rgba(255, 240, 205, 0.12);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.menu__overlay--open .menu__find,
.menu__overlay--open .menu__builder { transform: none; }
.menu__find::before,
.menu__builder::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 168, 106, 0.12);
  border-radius: 12px;
  pointer-events: none;
}

/* -- searching theater -- */

.menu__searching[hidden],
.menu__found[hidden] { display: none; }
.menu__find-sigil {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 4px auto 22px;
}
.menu__find-sigil i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 201, 106, 0.5);
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: menu-spin 3.2s linear infinite;
}
.menu__find-sigil i:nth-child(2) {
  inset: 14px;
  border-color: rgba(232, 201, 106, 0.35);
  border-left-color: transparent;
  border-right-color: transparent;
  animation-duration: 2.1s;
  animation-direction: reverse;
}
.menu__find-sigil i:nth-child(3) {
  inset: 28px;
  border-color: rgba(232, 201, 106, 0.28);
  animation-duration: 1.5s;
}
.menu__find-sigil b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ffeec4, var(--menu-a, #c9a15c));
  box-shadow: 0 0 22px var(--menu-glow, rgba(232, 201, 106, 0.7));
  animation: menu-pulse 1.6s ease-in-out infinite;
}
@keyframes menu-spin { to { transform: rotate(360deg); } }
@keyframes menu-pulse {
  0%, 100% { opacity: 0.7; transform: rotate(45deg) scale(0.9); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.15); }
}
.menu__find-status {
  font-family: 'Radley', Georgia, serif;
  font-weight: 400;
  font-size: 27px;
  letter-spacing: 0.05em;
  color: #f2e6c6;
}
.menu__find-cycling {
  min-height: 24px;
  margin-top: 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: #b0a17c;
  transition: opacity 0.15s ease;
}
.menu__find-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}
.menu__find-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--menu-a, #c9a15c);
  opacity: 0.25;
  animation: menu-dot 1.2s ease-in-out infinite;
}
.menu__find-dots i:nth-child(2) { animation-delay: 0.18s; }
.menu__find-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes menu-dot {
  0%, 100% { opacity: 0.22; transform: translateY(0); }
  50% { opacity: 0.95; transform: translateY(-3px); }
}

/* -- opponent found -- */

.menu__found-title {
  font-family: 'Radley', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.06em;
  color: #f6ebcd;
  text-shadow: 0 0 24px var(--menu-glow, transparent);
  animation: menu-found-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes menu-found-in {
  from { opacity: 0; transform: translateY(-10px); letter-spacing: 0.2em; }
  to   { opacity: 1; transform: none; }
}
.menu__found-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 22px 0 24px;
}
.menu__found-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.menu__found-eyebrow {
  font-family: Verdana, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--menu-a, #c9a15c);
  opacity: 0.9;
}
.menu__mini { display: flex; justify-content: center; }
.menu__mini .card { width: 138px; height: 193px; }
.menu__found-deck {
  font-family: 'Radley', Georgia, serif;
  font-size: 19px;
  line-height: 1.2;
  color: #efe3c0;
}
.menu__found-arch {
  max-width: 250px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  color: #a89a76;
}
.menu__found-vs { width: 52px; color: #9b8154; opacity: 0.85; }
.menu__found-vs svg { width: 100%; height: auto; }
.menu__found-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.menu__duel {
  font-family: 'Radley', Georgia, serif;
  font-size: 21px;
  letter-spacing: 0.04em;
  color: #241705;
  padding: 13px 40px;
  border: 1px solid rgba(255, 240, 200, 0.55);
  border-radius: 12px;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--menu-a, #e8d9b0), var(--menu-b, #c9ab6e));
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 0 24px var(--menu-glow, rgba(232, 201, 106, 0.25)),
    inset 0 1px 0 rgba(255, 244, 214, 0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.menu__duel:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), 0 0 34px var(--menu-glow, rgba(232, 201, 106, 0.4)),
    inset 0 1px 0 rgba(255, 244, 214, 0.9);
}
.menu__ghost {
  font-family: 'Radley', Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #d9c48a;
  padding: 12px 26px;
  border: 1px solid rgba(201, 168, 106, 0.4);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(30, 24, 14, 0.5);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.menu__ghost:hover { border-color: rgba(232, 217, 176, 0.7); background: rgba(52, 42, 26, 0.6); }

/* -- deck builder placeholder -- */

.menu__builder { width: min(620px, 90vw); }
.menu__builder-sigil {
  width: 74px;
  height: 74px;
  margin: 2px auto 16px;
  color: var(--menu-a, #b088e2);
  filter: drop-shadow(0 0 16px var(--menu-glow, rgba(176, 136, 226, 0.5)));
}
.menu__builder-sigil svg { width: 100%; height: 100%; }
.menu__builder-eyebrow {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--menu-a, #b088e2);
  opacity: 0.85;
}
.menu__builder-title {
  margin-top: 10px;
  font-family: 'Radley', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  color: #f2e6c6;
}
.menu__builder-copy {
  max-width: 460px;
  margin: 14px auto 24px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: #b3a37c;
}

/* ---------------- responsive ---------------- */

@media (max-height: 860px) {
  .menu__packs { --pk-w: 252px; --pk-h: 420px; --pk-step: 138px; width: 584px; height: 490px; }
  .menu__title { font-size: clamp(30px, 4.2vh, 42px); }
  .menu__plate { padding: 11px 16px 11px 12px; gap: 13px; }
  .menu__plate-sigil { width: 48px; height: 48px; }
  .menu__plate-sigil svg { width: 25px; height: 25px; }
}
@media (max-height: 720px) {
  #main-menu { padding: 12px clamp(72px, 12vw, 192px) 8px; }
  .menu__packs { --pk-w: 200px; --pk-h: 333px; --pk-step: 110px; width: 464px; height: 386px; }
  .menu__fan-plaque { font-size: 9px; }
  .menu__subtitle { margin-top: 5px; }
  .menu__rule { margin-top: 9px; }
  .menu__tagline { margin-top: 7px; }
  .menu__plate-label { font-size: 19px; }
  .menu__nav { gap: 9px; }
}
@media (max-width: 1460px) {
  .menu__packs { --pk-w: 240px; --pk-h: 400px; --pk-step: 132px; width: 556px; height: 464px; }
  .menu__plate { width: clamp(300px, 28vw, 380px); }
}
@media (max-width: 1270px) {
  .menu__packs { --pk-w: 216px; --pk-h: 360px; --pk-step: 118px; width: 500px; height: 420px; }
  .menu__plate { width: clamp(300px, 28vw, 360px); }
}
@media (max-width: 1180px) {
  .menu__stage { gap: 30px; }
  .menu__packs { --pk-w: 200px; --pk-h: 333px; --pk-step: 110px; width: 464px; height: 386px; }
  .menu__plate { width: clamp(280px, 26vw, 340px); }
}
@media (max-width: 1040px) {
  .menu__packs { --pk-w: 170px; --pk-h: 283px; --pk-step: 94px; width: 394px; height: 329px; }
  .menu__plate { width: clamp(260px, 30vw, 320px); }
}
@media (max-width: 960px) {
  .menu__left { display: none; }  /* the gate stays open on the plates alone */
  .menu__stage { gap: 0; justify-content: center; }
  .menu__plate { width: min(400px, 84vw); }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .menu__aurora,
  .menu__title,
  .menu__plate,
  .menu__pack,
  .menu__find-sigil i,
  .menu__find-sigil b,
  .menu__find-dots i,
  .menu__found-title { animation: none; }
  .menu__packs { transition: none; transform: none; }
  .menu__pack { transition: none; }
  .menu__pack-img,
  .menu__pack-foil { transition: none; }
  .menu__pack--flash > .menu__pack-foil > .foil-flare { animation: none; opacity: 0; }
  .menu__overlay,
  .menu__find,
  .menu__builder { transition: none; }
  .menu__plate,
  .menu__duel,
  .menu__ghost { transition: none; }
  .menu__plate::after { display: none; }
}