/* ─── LEVEL-UP POPUP — parchment "storybook" restyle ─────────────────────────
   Matches Figma node 3327-2 (J Uy's team library). Loaded AFTER style.css so
   these same-selector rules win by source order. Layout uses the exact Figma
   percentages: a 1075×1440 (aspect 0.747) parchment page whose 3 card-slots are
   baked into assets/levelup/parchment.png; the 3 powerup choices are laid over
   those slots, with a scroll-banner header on top. Container-query units (cqw)
   size all text to the page so it scales as one piece.
   Serif: EB Garamond is already self-hosted and is a near-twin of the design's
   Spectral (kept the game's storybook serif rather than add a CDN font).  */

#powerup-screen {
  background: radial-gradient(ellipse at center, rgba(26, 16, 8, 0.72), rgba(8, 6, 4, 0.92)) !important;
  padding: 2vh 0;
  gap: 1.6vh;
}
/* Kill the cosmic nebula sweep. */
#powerup-screen::before { display: none !important; }

/* ── The parchment page ── */
#powerup-page {
  position: relative;
  aspect-ratio: 538 / 720;          /* = 1075/1440 */
  /* svh (small viewport height), NOT vh: in landscape the page is vh-bound, so
     when the mobile URL bar hides/shows after a tap, plain vh changes and the
     popup "suddenly shrinks" between picks. svh is the stable small-viewport
     height (and never overflows), so the page holds one size across picks. The
     plain-vh line is a fallback for browsers without svh (pre-2022). */
  height: min(94vh, 128vw);
  height: min(94svh, 128vw);
  max-width: 96vw;
  container-type: size;
  background: url('../assets/levelup/parchment.png') center/100% 100% no-repeat;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
#powerup-screen.entering #powerup-page {
  animation: luPageIn 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes luPageIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Scroll banner header ── */
#powerup-banner {
  position: absolute; left: 2.2%; top: 0.8%; width: 95.6%; height: 9.9%;
  background: url('../assets/levelup/banner.png') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
}
#powerup-screen #powerup-banner h2 {
  margin: 0; padding: 0 0 0.6cqw;
  font-family: 'EB Garamond', 'Spectral', Georgia, serif;
  font-weight: 700; font-size: 4.7cqw; letter-spacing: 0.5px;
  color: #45271f; background: none; -webkit-text-fill-color: #45271f;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.4);
  animation: none; filter: none;
}
/* LVL chip — small gold seal pinned to the banner's right end. */
#powerup-screen #level-up-chip {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0.3cqw 1.6cqw 0.4cqw; gap: 0.5cqw;
  background: radial-gradient(120% 130% at 50% 20%, #f7e2a6, #c79a4e 75%, #9c7536);
  border: 0.25cqw solid #6e4f2a; border-radius: 999px;
  box-shadow: 0 0.3cqw 0.8cqw rgba(0,0,0,0.35), inset 0 0.15cqw 0 rgba(255,255,255,0.45);
  opacity: 1; font-family: 'EB Garamond', serif;
}
#powerup-screen #level-up-chip .lvl-word { font-size: 1.7cqw; font-weight: 700; color: #5a3c1c; letter-spacing: 0.4px; }
#powerup-screen #level-up-chip .lvl-num {
  font-size: 2.6cqw; font-weight: 700; color: #3a2410;
  background: none; -webkit-text-fill-color: #3a2410; filter: none;
}
#powerup-screen.entering #level-up-chip { animation: none; }

/* No subtitle in the design — the cards start right under the banner. */
#powerup-sub { display: none !important; }

/* ── Choices container fills the page; cards sit on the baked slots. ── */
#powerup-choices {
  position: absolute; inset: 0;
  display: block; max-width: none; gap: 0; perspective: none;
}

/* ── A powerup card laid over a parchment slot ── */
.powerup-card {
  position: absolute;
  background: none !important;
  border: 0 !important; border-radius: 1.2cqw;
  padding: 0 3% 0 3.5%;
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "icon name" "icon desc" "icon tier";
  align-content: center; column-gap: 2.5%; row-gap: 0.4cqw;
  overflow: visible;
  cursor: pointer;
  /* The whole row is tappable (handler is pointer-tap based, see powerups.js).
     manipulation kills the double-tap-zoom gesture so a tap anywhere on the big
     card body registers cleanly instead of only the small icon. */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transform-style: flat;
  transition: transform 0.18s ease, filter 0.18s ease;
  animation: luCardIn 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Exact slot rectangles from the Figma (top→bottom). */
.powerup-card:nth-child(1) { top: 14.4%; left: 4.7%; width: 91.7%; height: 25.8%; animation-delay: 120ms; }
.powerup-card:nth-child(2) { top: 42.1%; left: 4.6%; width: 91.0%; height: 25.9%; animation-delay: 210ms; }
.powerup-card:nth-child(3) { top: 70.9%; left: 2.8%; width: 93.2%; height: 25.7%; animation-delay: 300ms; }
@keyframes luCardIn {
  0%   { opacity: 0; transform: translateX(-10px) scale(0.97); }
  100% { opacity: 1; transform: translateX(0)     scale(1); }
}
.powerup-card::before { display: none !important; }   /* kill the cosmic shimmer sweep */

.powerup-card:hover, .powerup-card:focus-visible {
  transform: scale(1.015);
  filter: drop-shadow(0 0.6cqw 1.2cqw rgba(90, 55, 20, 0.4));
  background: radial-gradient(120% 120% at 18% 50%, rgba(255, 246, 214, 0.5), transparent 60%) !important;
  border: 0 !important; box-shadow: none !important; outline: none;
}

/* Icon — framed medallion on the parchment. The powerup glyphs (from
   src/powerup-icons.js) are bright/light icons authored for the old DARK
   cosmic card, so the medallion centre is a deep navy disc (not light
   parchment) — that lets them read at full strength like the old popup,
   while the gold ring keeps them framed for the parchment storybook. */
.powerup-card .icon {
  grid-area: icon;
  width: 88%; height: 88%; max-height: 22cqw; aspect-ratio: 1; margin: auto;
  align-self: center; justify-self: center;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* Tier-tinted core glow (--ic) over a deep navy disc. */
  background:
    radial-gradient(circle at 50% 42%, var(--ic, rgba(150,170,220,0.42)), transparent 64%),
    radial-gradient(circle at 50% 38%, #332f5a, #211e42 66%, #15122c);
  border: 0.6cqw solid #b8924e;
  box-shadow:
    0 0 0 0.28cqw rgba(255,247,216,0.6) inset,
    0 0 0 0.95cqw rgba(110, 79, 42, 0.55),
    0 0.5cqw 1.1cqw rgba(60,40,20,0.4);
  font-size: 8cqw; line-height: 1;
}
.powerup-card[data-tier="Offense"]  .icon { --ic: rgba(255, 120, 92, 0.48); }
.powerup-card[data-tier="Defense"]  .icon { --ic: rgba(110, 196, 224, 0.48); }
.powerup-card[data-tier="Mobility"] .icon { --ic: rgba(110, 224, 150, 0.48); }
.powerup-card[data-tier="Utility"]  .icon { --ic: rgba(255, 216, 120, 0.52); }
/* Full-size glyph (like the old card's svg{100%}) so the icon isn't shrunk. */
.powerup-card .icon svg { width: 84%; height: 84%; display: block; filter: drop-shadow(0 0 0.5cqw rgba(0,0,0,0.45)); }
/* Gear-power cards swap the glyph for the equipped item's baked GLB thumbnail. */
.powerup-card .icon img.pu-card-thumb { width: 90%; height: 90%; object-fit: contain; display: block; filter: drop-shadow(0 0.2cqw 0.5cqw rgba(0,0,0,0.5)); }
.powerup-card:hover .icon { transform: none; filter: none; }

/* Text block (serif, dark-brown ink). */
.powerup-card .name {
  grid-area: name; align-self: end;
  font-family: 'EB Garamond', 'Spectral', Georgia, serif;
  font-weight: 700; font-size: 3.7cqw; line-height: 1.05;
  color: #3f2620; margin: 0; text-align: left;
}
.powerup-card .desc {
  grid-area: desc;
  font-family: 'EB Garamond', 'Spectral', Georgia, serif;
  font-weight: 400; font-size: 2.7cqw; line-height: 1.18;
  color: #4f372d; margin: 0.3cqw 0 0; text-align: left;
}
.powerup-card .tier {
  grid-area: tier; align-self: start;
  font-family: 'EB Garamond', 'Spectral', Georgia, serif;
  font-weight: 700; font-size: 2.3cqw; letter-spacing: 1px;
  text-transform: uppercase; color: #7a5a2e; margin: 0.4cqw 0 0; text-align: left;
}
/* Per-tier ink accent on the tier label (kept within the parchment palette). */
.powerup-card[data-tier="Offense"]  .tier { color: #9a3f2a; }
.powerup-card[data-tier="Defense"]  .tier { color: #2f5d6a; }
.powerup-card[data-tier="Mobility"] .tier { color: #3a6a4a; }
.powerup-card[data-tier="Utility"]  .tier { color: #8a6d2e; }
.powerup-card[data-tier="Offense"]:hover, .powerup-card[data-tier="Defense"]:hover,
.powerup-card[data-tier="Mobility"]:hover, .powerup-card[data-tier="Utility"]:hover {
  border: 0 !important; box-shadow: none !important;
}

/* ── Reroll — gold-bordered parchment button below the page. ── */
#reroll-btn {
  margin-top: 0.4vh;
  font-family: 'EB Garamond', 'Spectral', Georgia, serif;
  font-weight: 700; letter-spacing: 0.6px;
  color: #f3e4c0;
  background: linear-gradient(#6b4a2c, #4e3420);
  border: 2px solid #c79a4e;
  border-radius: 999px;
  padding: 8px 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,236,196,0.25);
}
#reroll-btn:hover:not(:disabled) { background: linear-gradient(#7c5733, #5a3d25); border-color: #e6c275; }
#reroll-btn:disabled { opacity: 0.5; }

/* ── Selection: fade out, never SHRINK ──────────────────────────────────────
   The shared `card-burst` ends at scale(0) (cards collapse to nothing) and
   card-dismissed scales to 0.82 — so on pick the popup visibly shrank before
   it vanished. The player wants it to just disappear. Scope a non-shrinking
   fade to the level-up cards (shop/stage cards keep their own burst). */
#powerup-screen .powerup-card.card-picked {
  animation: lu-card-pick 300ms ease forwards !important;
}
@keyframes lu-card-pick {
  0%   { opacity: 1; filter: brightness(1); }
  45%  { opacity: 1; filter: brightness(1.35); }
  100% { opacity: 0; filter: brightness(1); }
}
#powerup-screen .powerup-card.card-dismissed {
  transform: none !important;
  filter: none !important;
  transition: opacity 200ms ease !important;
  opacity: 0 !important;
}