/* PalSummon stage. The world and the constellations are drawn on canvas; this file styles the little DOM
   that sits in the sky with them: the status line, Skip, the name under each constellation (.ps-tag), the
   info under the one in view (.ps-info), the hint and the actions. Labels are positioned every frame by
   summon.js (inline transform), and GSAP owns their entrances, so nothing here transitions transform on
   them. One radius system (full pills), hairline borders, no glows: the light comes from the sky. */

.ps-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ps-text, #fff);
  font-family: var(--ps-font-body, system-ui, sans-serif);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #060a16;
}
.ps-stage.is-active { pointer-events: auto; cursor: default; }
.ps-stage.is-pointing { cursor: pointer; }

.ps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ps-world { z-index: 0; }
.ps-fx { z-index: 3; pointer-events: none; }
.ps-layer, .ps-ui { position: absolute; inset: 0; }
.ps-layer { z-index: 2; }

/* the night between scenes, and the reduced-motion stand-in for the flight */
.ps-veil { position: absolute; inset: 0; background: #060a16; opacity: 0; pointer-events: none; }
.ps-veil-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(60vmin 60vmin at 50% 46%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%);
}
.ps-veil.has-glow .ps-veil-glow { opacity: 1; }

.ps-status {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translate(-50%, 6px);
  font: 500 clamp(14px, 2.2vmin, 19px) var(--ps-font-display);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(243, 245, 255, 0.92);
  text-shadow: 0 1px 10px rgba(4, 8, 24, 0.7);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ps-status.is-on { opacity: 1; transform: translate(-50%, 0); }

.ps-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  z-index: 5;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(225, 232, 255, 0.24);
  background: rgba(9, 14, 34, 0.32);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f3f5ff;
  font: 500 14px var(--ps-font-display);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, border-color 0.2s ease;
  touch-action: manipulation;
}
.ps-skip span { font-size: 9px; margin-left: 4px; opacity: 0.8; }
.ps-skip.is-on { opacity: 1; pointer-events: auto; }
.ps-skip:hover { border-color: rgba(225, 232, 255, 0.4); }
.ps-skip:active { transform: scale(0.98); }
.ps-skip:focus-visible { outline: 2px solid rgba(240, 244, 255, 0.8); outline-offset: 2px; }

/* ---------------------------------------------------------------- labels in the sky */

.ps-tag, .ps-info { position: absolute; left: 0; top: 0; will-change: transform; }

/* a multi-wish: the name under each constellation */
.ps-tag {
  padding: 4px 10px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  touch-action: manipulation;
}
.ps-tag.is-on { opacity: 1; }
.ps-tag.is-dim { opacity: 0.4; }
.is-browsing .ps-tag.is-on { pointer-events: auto; cursor: pointer; }
.ps-tag-in { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform 0.15s ease; }
.ps-tag:active .ps-tag-in { transform: scale(0.98); }
.ps-tag:focus-visible { outline: 2px solid rgba(240, 244, 255, 0.8); outline-offset: 0; }
.ps-tag-name {
  font: 500 clamp(12px, 1.7vmin, 15px) var(--ps-font-display);
  color: #f3f5ff;
  text-shadow: 0 1px 8px rgba(4, 8, 24, 0.85);
}
.ps-tag-meta {
  font: 600 10px var(--ps-font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg);
  text-shadow: 0 1px 6px rgba(4, 8, 24, 0.85);
}
.ps-tag-meta b { margin-left: 4px; color: #f3f5ff; font-weight: 700; }

/* the constellation in view: rarity, its stars, the name, the tagline, the bonus */
.ps-info {
  width: max-content;
  max-width: min(86vw, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 1px 12px rgba(4, 8, 24, 0.75);
}
.ps-info-kicker { display: flex; align-items: center; gap: 10px; }
.ps-info-rarity {
  font: 600 12px var(--ps-font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rg);
}
.ps-info.rarity-mythic .ps-info-rarity {
  background: linear-gradient(90deg, #ffb3b3, #ffe08a, #b8ffd6, #a8dcff, #dcc0ff, #ffb0d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.ps-info-stars { display: flex; gap: 2px; font-size: 12px; line-height: 1; }
.ps-info-stars i { font-style: normal; color: rgba(236, 240, 255, 0.2); transition: color 0.25s ease; }
.ps-info-stars i.is-lit { color: var(--sc, var(--rg)); }
.ps-info-name {
  font: 600 clamp(28px, 5.2vmin, 44px)/1.05 var(--ps-font-display);
  letter-spacing: 0.01em;
  color: #fff;
  overflow-wrap: anywhere;
}
.ps-info-name.is-long { font-size: clamp(22px, 4vmin, 34px); }
.ps-info-line { font: 400 clamp(13px, 1.8vmin, 15px) var(--ps-font-body); color: rgba(236, 240, 255, 0.74); }
.ps-info-bonus { margin-top: 2px; font: 600 13px var(--ps-font-body); color: rgba(236, 240, 255, 0.78); }
.ps-info-bonus span { margin-right: 2px; }
.ps-info-bonus.is-new { color: var(--rg); }

.ps-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  text-align: center;
  font: 600 11px var(--ps-font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 240, 255, 0.62);
  text-shadow: 0 1px 6px rgba(4, 8, 24, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ps-hint.is-on { opacity: 1; }
.ps-hint.is-high { bottom: max(86px, calc(env(safe-area-inset-bottom) + 74px)); }

/* ---------------------------------------------------------------- actions */

.ps-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ps-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(225, 232, 255, 0.24);
  background: rgba(9, 14, 34, 0.32);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f3f5ff;
  font: 500 15px var(--ps-font-display);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
  touch-action: manipulation;
}
.ps-btn:hover { border-color: rgba(225, 232, 255, 0.4); background-color: rgba(14, 20, 46, 0.44); }
.ps-btn:active { transform: scale(0.98); }
.ps-btn:focus-visible { outline: 2px solid rgba(240, 244, 255, 0.8); outline-offset: 2px; }
.ps-btn.is-primary { border-color: transparent; background: #f3f5ff; color: #0a1024; }
.ps-btn.is-primary:hover { background: #fff; }
.ps-btn.is-quiet { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(236, 240, 255, 0.74); }
.ps-btn.is-quiet:hover { color: #fff; background: rgba(240, 244, 255, 0.06); }

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

.ps-reduced .ps-tag,
.ps-reduced .ps-hint,
.ps-reduced .ps-info-stars i { transition-duration: 0.15s; }
.ps-reduced .ps-btn,
.ps-reduced .ps-tag-in { transition: none; }
.ps-reduced .ps-btn:active,
.ps-reduced .ps-tag:active .ps-tag-in { transform: none; }