:root {
  --hud-font-display: "Space Grotesk", "Sora", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --hud-font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --hud-radius-sm: 10px;
  --hud-radius-md: 14px;
  --hud-radius-lg: 18px;
  --hud-ease: cubic-bezier(.22, 1, .36, 1);
  --hud-fast: 160ms;
  --hud-mid: 260ms;
  --hud-slow: 420ms;
  --hud-border-soft: rgba(227, 244, 255, 0.2);
  --hud-border-strong: rgba(174, 226, 255, 0.42);
  --hud-glow-cyan: rgba(121, 216, 255, 0.38);
  --hud-glow-mint: rgba(142, 240, 191, 0.32);
  --hud-glow-gold: rgba(255, 214, 138, 0.32);
}

.progression-results-card {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 14px;
  border-radius: var(--hud-radius-lg);
  border: 1px solid var(--hud-border-soft);
  box-shadow:
    0 26px 62px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  background:
    radial-gradient(140% 140% at 16% -16%, rgba(88, 210, 255, 0.2), transparent 58%),
    radial-gradient(130% 160% at 96% 8%, rgba(255, 231, 112, 0.16), transparent 60%),
    rgba(8, 16, 28, 0.92);
}

#ambientStreakAnchor {
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
}

/* Reward minigames and Season Pass claim polish */
.season-pass-reward-lane.is-club {
  border-color: rgba(255, 212, 105, 0.78);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 242, 173, 0.34), transparent 34%),
    linear-gradient(135deg, rgba(112, 64, 10, 0.92), rgba(45, 25, 58, 0.94) 48%, rgba(158, 95, 18, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 192, 0.24),
    inset 0 18px 42px rgba(255, 229, 137, 0.15),
    0 18px 50px rgba(255, 186, 54, 0.2);
}

.season-pass-reward-lane.is-club::before {
  background:
    linear-gradient(115deg, transparent 0 26%, rgba(255, 255, 255, 0.2) 37%, transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 226, 135, 0.09) 0 8px, transparent 8px 18px);
  opacity: 0.88;
}

.season-pass-reward-lane.is-club.is-ready {
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 195, 0.34),
    0 0 0 1px rgba(255, 216, 95, 0.44),
    0 24px 68px rgba(255, 192, 48, 0.34);
}

.season-pass-reward-lane.is-club .season-pass-lane-chip {
  color: #3d2605;
  background: linear-gradient(135deg, #fff1a6, #ffc246 52%, #a66a12);
  border-color: rgba(255, 246, 190, 0.86);
  box-shadow: 0 10px 28px rgba(255, 191, 55, 0.32);
}

.season-pass-reward-lane.is-club .season-pass-state-pill.is-banked,
.season-pass-reward-lane.is-club .season-pass-state-pill.is-locked {
  border-color: rgba(255, 217, 113, 0.42);
  color: #ffe6a3;
  background: rgba(70, 45, 15, 0.58);
}

.season-pass-reward-lane.is-club .season-pass-claim-btn {
  background: linear-gradient(135deg, #fff2a8, #ffc64d 48%, #d88920);
  color: #2f1c03;
  box-shadow: 0 12px 30px rgba(255, 190, 50, 0.36);
}

.season-claim-reveal-shell,
.reward-minigame-shell {
  position: fixed;
  inset: 0;
  z-index: 18000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  color: #fff;
}

.season-claim-reveal-backdrop,
.reward-minigame-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 223, 116, 0.2), transparent 34%),
    rgba(5, 8, 20, 0.82);
  backdrop-filter: blur(16px);
}

.season-claim-reveal-card,
.scratch-card-panel,
.wheel-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(132, 228, 255, 0.36);
  background: linear-gradient(160deg, rgba(20, 35, 72, 0.97), rgba(25, 21, 57, 0.98));
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48);
}

.season-claim-reveal-card {
  width: min(560px, 94vw);
  min-height: min(720px, 88vh);
  transform: translateY(18px) scale(0.97);
  animation: seasonClaimArrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.season-claim-reveal-shell.is-club .season-claim-reveal-card,
.wheel-shell.is-luxury .wheel-panel {
  border-color: rgba(255, 223, 116, 0.78);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 229, 122, 0.35), transparent 34%),
    linear-gradient(150deg, rgba(92, 54, 12, 0.98), rgba(31, 23, 62, 0.98) 52%, rgba(134, 78, 16, 0.97));
  box-shadow: 0 36px 110px rgba(255, 189, 53, 0.26), 0 30px 90px rgba(0, 0, 0, 0.5);
}

.season-claim-reveal-aura {
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 240, 165, 0.24), transparent, rgba(106, 225, 255, 0.2), transparent);
  animation: seasonClaimSpin 7s linear infinite;
}

.season-claim-reveal-track,
.season-claim-reveal-copy,
.season-claim-reveal-actions {
  position: relative;
  z-index: 2;
}

.season-claim-reveal-track {
  margin: 22px;
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.season-claim-reveal-visual {
  position: relative;
  z-index: 1;
  height: min(440px, 52vh);
  margin: 0 18px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
}

.season-claim-reveal-visual .season-pass-visual {
  position: absolute;
  inset: 0;
}

.season-claim-reveal-copy {
  display: grid;
  gap: 6px;
  padding: 18px 26px 0;
}

.season-claim-reveal-copy span,
.wheel-copy span,
.scratch-card-copy span,
.wheel-result span {
  color: rgba(255, 232, 164, 0.92);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.season-claim-reveal-copy strong {
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  line-height: 1;
  letter-spacing: 0;
}

.season-claim-reveal-copy small,
.scratch-card-copy small,
.wheel-copy small,
.wheel-result small {
  color: rgba(238, 247, 255, 0.74);
  font-weight: 700;
}

.season-claim-reveal-actions,
.scratch-card-actions,
.wheel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 22px 26px 26px;
}

.scratch-card-panel,
.wheel-panel {
  width: min(760px, 96vw);
  min-height: min(760px, 92vh);
}

.scratch-close,
.wheel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
}

.scratch-card-copy,
.wheel-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  padding: 28px 92px 12px 28px;
}

.scratch-card-copy strong,
.wheel-copy strong {
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.scratch-card-stage {
  position: relative;
  height: min(470px, 55vh);
  margin: 12px auto 0;
  width: min(620px, calc(100% - 42px));
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(140deg, rgba(28, 46, 88, 0.94), rgba(56, 28, 82, 0.96));
}

.scratch-prize,
.scratch-card-canvas,
.scratch-shine {
  position: absolute;
  inset: 0;
}

.scratch-card-canvas {
  z-index: 3;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.scratch-shine {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,0.2) 42%, transparent 52%);
  mix-blend-mode: screen;
}

.scratch-prize {
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 239, 165, 0.28), transparent 40%),
    radial-gradient(circle at 25% 22%, rgba(104, 230, 255, 0.2), transparent 28%);
}

.scratch-prize-title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.36);
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 2.05rem);
}

.scratch-prize-art {
  position: relative;
  width: min(360px, 74%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 28px 36px rgba(0,0,0,0.36));
}

.scratch-prize-art.is-coins span {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff9bf, #ffd45a 44%, #a56c10 72%);
  border: 3px solid rgba(255,255,255,0.34);
}

.scratch-prize-art.is-coins span:nth-child(1) { left: 12%; top: 46%; transform: rotate(-14deg); }
.scratch-prize-art.is-coins span:nth-child(2) { left: 34%; top: 32%; transform: rotate(9deg); }
.scratch-prize-art.is-coins span:nth-child(3) { right: 10%; top: 48%; transform: rotate(17deg); }
.scratch-prize-art.is-coins span:nth-child(4) { left: 24%; bottom: 8%; transform: rotate(4deg); }
.scratch-prize-art.is-coins span:nth-child(5) { right: 24%; bottom: 12%; transform: rotate(-8deg); }

.scratch-prize-art.is-season img,
.scratch-prize-art.is-cosmetic img {
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
}

.scratch-prize-art.is-card span,
.scratch-prize-art.is-freeze span {
  width: 72%;
  aspect-ratio: 0.78;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff4ae, #e7a62d 48%, #6e4311);
  border: 4px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 0 42px rgba(255,255,255,0.26);
}

.wheel-stage {
  position: relative;
  width: min(520px, 74vw, 54vh);
  aspect-ratio: 1;
  margin: 8px auto;
  filter: drop-shadow(0 32px 44px rgba(0,0,0,0.4));
}

.wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  z-index: 2;
  width: 34px;
  height: 52px;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(180deg, #fff6b8, #ffb93e);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.34));
}

.wheel-result {
  position: relative;
  z-index: 2;
  display: none;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 14px;
  width: min(520px, calc(100% - 42px));
  margin: 8px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.28);
}

.wheel-result.is-visible {
  display: grid;
}

.wheel-result strong {
  display: block;
  font-size: clamp(1.15rem, 3vw, 1.85rem);
  line-height: 1;
}

.wheel-result-art {
  height: 74px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.84), transparent 18%),
    linear-gradient(135deg, #ffcf55, #865cff);
  box-shadow: inset 0 0 28px rgba(255,255,255,0.24);
}

@keyframes seasonClaimArrive {
  to { transform: translateY(0) scale(1); }
}

@keyframes seasonClaimSpin {
  to { transform: rotate(360deg); }
}

#galleryTopBtn {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 64px);
  left: max(12px, env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  z-index: 60;
  width: 132px;
  min-width: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transform: none;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(116, 217, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gallery-mode-glyph {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid rgba(173, 226, 255, 0.42);
  border-radius: 999px;
  background:
    conic-gradient(from 45deg, rgba(255, 231, 151, 0.88), rgba(126, 221, 255, 0.72), rgba(186, 245, 211, 0.72), rgba(255, 231, 151, 0.88)),
    radial-gradient(circle at 50% 50%, rgba(8, 18, 31, 0.92) 0 45%, transparent 46%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 18px rgba(116, 217, 255, 0.18);
}

.gallery-mode-glyph::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(5, 13, 24, 0.96);
  box-shadow:
    0 0 0 2px rgba(214, 244, 255, 0.82),
    0 -8px 0 -2px rgba(255, 232, 158, 0.92),
    0 8px 0 -2px rgba(126, 221, 255, 0.82);
}

.gallery-mode-glyph span,
.gallery-mode-glyph i {
  display: none;
}

#galleryTopBtn::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.5);
  background: #ff3b4f;
  box-shadow:
    0 0 0 2px rgba(8, 14, 24, 0.92),
    0 0 18px rgba(255, 59, 79, 0.58);
  transition: opacity 180ms ease, transform 220ms var(--hud-ease);
}

#galleryTopBtn.has-new-mode::after {
  opacity: 1;
  transform: scale(1);
}

#galleryTopBtn:hover {
  transform: translateY(-1px);
}

.wandering-difficulty-chooser {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 260ms var(--hud-ease),
    transform 420ms var(--hud-ease);
}

.wandering-difficulty-chooser.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wandering-difficulty-shell {
  width: min(820px, calc(100vw - 26px));
  padding: 22px;
  color: rgba(245, 252, 255, 0.96);
  transform: translateY(clamp(-118px, -13vh, -54px));
  border: 1px solid rgba(205, 237, 255, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(66% 90% at 50% -12%, rgba(255, 226, 161, 0.16), transparent 62%),
    radial-gradient(82% 118% at 100% 0%, rgba(121, 216, 255, 0.13), transparent 58%),
    linear-gradient(180deg, rgba(8, 15, 27, 0.78), rgba(5, 10, 18, 0.68));
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wandering-difficulty-chooser.is-committing .wandering-difficulty-shell {
  transform: translateY(clamp(-118px, -13vh, -54px)) scale(0.992);
}

.wandering-difficulty-kicker {
  color: rgba(255, 226, 161, 0.86);
  font: 900 11px/1 var(--hud-font-body);
  letter-spacing: 0;
  text-transform: uppercase;
}

.wandering-difficulty-title {
  margin-top: 7px;
  color: #fff;
  font: 900 clamp(28px, 4vw, 48px)/0.98 var(--hud-font-display);
  letter-spacing: 0;
}

.wandering-difficulty-copy {
  max-width: 640px;
  margin-top: 8px;
  color: rgba(224, 238, 248, 0.72);
  font: 650 14px/1.5 var(--hud-font-body);
}

.wandering-difficulty-options {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wandering-difficulty-option {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid rgba(205, 237, 255, 0.16);
  border-radius: 8px;
  padding: 15px;
  text-align: left;
  color: rgba(235, 248, 255, 0.88);
  background:
    radial-gradient(84% 76% at 60% 20%, rgba(255, 255, 255, 0.1), transparent 60%),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition:
    transform 260ms var(--hud-ease),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
  opacity: 0;
  animation: wandering-option-in 520ms var(--hud-ease) forwards;
}

.wandering-difficulty-option:nth-child(1) { animation-delay: 40ms; }
.wandering-difficulty-option:nth-child(2) { animation-delay: 95ms; }
.wandering-difficulty-option:nth-child(3) { animation-delay: 150ms; }

@keyframes wandering-option-in {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.wandering-difficulty-option::before {
  content: '';
  position: absolute;
  inset: auto 13px 13px auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.11);
  transition: transform 260ms var(--hud-ease), border-color 220ms ease;
}

.wandering-difficulty-option:nth-child(2)::before {
  transform: translate(8px, -8px);
}

.wandering-difficulty-option:nth-child(3)::before {
  transform: translate(-16px, 5px) scale(0.9);
}

.wandering-difficulty-option:hover,
.wandering-difficulty-option:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(205, 237, 255, 0.34);
  outline: none;
}

.wandering-difficulty-option.is-selected {
  transform: translateY(-6px);
  border-color: rgba(255, 226, 161, 0.58);
  background:
    radial-gradient(84% 76% at 60% 20%, rgba(255, 226, 161, 0.18), transparent 62%),
    rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 30px rgba(255, 226, 161, 0.12);
}

.wandering-difficulty-chooser.is-committing .wandering-difficulty-option:not(.is-selected) {
  opacity: 0.32;
  transform: translateY(6px) scale(0.985);
}

.wandering-difficulty-chooser.is-committing .wandering-difficulty-option.is-selected {
  transform: translateY(-7px) scale(1.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 42px rgba(255, 226, 161, 0.20);
}

.wandering-difficulty-option.is-selected::before {
  border-color: rgba(255, 226, 161, 0.82);
  box-shadow: 0 0 30px rgba(255, 226, 161, 0.2);
}

.wandering-difficulty-name {
  display: block;
  color: #fff;
  font: 900 22px/1 var(--hud-font-display);
  letter-spacing: 0;
}

.wandering-difficulty-meta {
  display: block;
  max-width: 170px;
  margin-top: 8px;
  color: rgba(224, 238, 248, 0.7);
  font: 700 12px/1.45 var(--hud-font-body);
}

.wandering-difficulty-hint {
  margin-top: 13px;
  color: rgba(205, 229, 240, 0.58);
  font: 800 11px/1 var(--hud-font-body);
  letter-spacing: 0;
  text-transform: uppercase;
}

#ambientChestAnchor {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
}

.ambient-chest-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ambient-chest-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 2px;
  color: rgba(230, 250, 255, 0.96);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px) scale(0.86);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(.2, .82, .18, 1);
  text-shadow:
    0 0 10px rgba(128, 223, 255, 0.58),
    0 0 22px rgba(128, 223, 255, 0.3);
}

#ambientChestAnchor[data-ready-count]:not([data-ready-count="0"]) .ambient-chest-overflow {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#ambientChestAnchor.is-rollover .ambient-chest-overflow {
  animation: ambient-chest-overflow-pop 360ms cubic-bezier(.18, .9, .22, 1);
}

#ambientChestAnchor.is-impacting {
  transform: translateY(-1px) scale(1.012);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(190, 232, 255, 0.4) inset,
    0 0 24px rgba(126, 214, 255, 0.32);
}

#ambientChestAnchor.is-impacting .ambient-chest-fill {
  filter: brightness(1.12);
}

#ambientChestAnchor.is-checkpoint-full {
  transform: translateY(-2px) scale(1.024);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(224, 250, 255, 0.48) inset,
    0 0 34px rgba(146, 229, 255, 0.52);
}

#ambientChestAnchor.is-checkpoint-full .ambient-chest-fill {
  filter: brightness(1.24) saturate(1.08);
}

#ambientChestAnchor.is-rollover-settling .ambient-chest-fill,
#ambientChestAnchor.is-rolling-over .ambient-chest-fill {
  box-shadow:
    inset 0 0 0 1px rgba(223, 250, 255, 0.5),
    0 0 32px rgba(155, 231, 255, 0.66);
}

#ambientChestAnchor.is-transfer-settled {
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(174, 220, 255, 0.26) inset,
    0 0 20px rgba(132, 215, 255, 0.22);
}

#ambientXpBoostAnchor {
  position: fixed;
  z-index: 45;
  min-width: 168px;
  height: 58px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(139, 233, 255, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 233, 255, 0.26), transparent 42%),
    linear-gradient(135deg, rgba(10, 23, 37, 0.94), rgba(22, 28, 54, 0.92));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #eaffff;
}

#ambientXpBoostAnchor[data-active="1"] {
  border-color: rgba(255, 216, 112, 0.64);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 220, 112, 0.34), transparent 45%),
    linear-gradient(135deg, rgba(39, 24, 7, 0.96), rgba(33, 22, 48, 0.94));
}

#ambientXpBoostAnchor[data-active="1"][data-boost-tier="prism"] {
  border-color: rgba(255, 141, 238, 0.62);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 119, 223, 0.3), transparent 43%),
    radial-gradient(circle at 80% 30%, rgba(113, 132, 255, 0.24), transparent 46%),
    linear-gradient(135deg, rgba(27, 16, 56, 0.96), rgba(43, 14, 48, 0.94));
}

.ambient-xp-boost-glass {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  transform: rotate(-14deg);
  transform-origin: 50% 58%;
}

#ambientXpBoostAnchor[data-active="1"] .ambient-xp-boost-glass {
  animation: xp-boost-ambient-pulse 1.8s ease-in-out infinite;
}

.ambient-xp-boost-glass::before,
.xp-boost-potion-fallback::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 13px;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(241, 252, 255, 0.9);
  border-radius: 47% 51% 50% 48% / 50% 48% 52% 50%;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.95) 0 4px, transparent 5px),
    linear-gradient(142deg, rgba(143, 246, 255, 0.96) 0%, rgba(93, 229, 221, 0.94) 44%, rgba(98, 241, 111, 0.98) 100%);
  box-shadow:
    0 0 20px rgba(94, 231, 255, 0.3),
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 5px 7px 10px rgba(255, 255, 255, 0.26),
    inset -7px -8px 12px rgba(33, 120, 135, 0.2);
  transform: translateX(-50%);
}

#ambientXpBoostAnchor[data-boost-tier="gold"] .ambient-xp-boost-glass::before {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.95) 0 4px, transparent 5px),
    linear-gradient(142deg, rgba(255, 244, 167, 0.98) 0%, rgba(255, 184, 80, 0.96) 48%, rgba(255, 102, 54, 0.98) 100%);
  box-shadow:
    0 0 20px rgba(255, 198, 86, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 5px 7px 10px rgba(255, 255, 255, 0.26),
    inset -7px -8px 12px rgba(151, 72, 20, 0.24);
}

#ambientXpBoostAnchor[data-boost-tier="prism"] .ambient-xp-boost-glass::before {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.95) 0 4px, transparent 5px),
    linear-gradient(142deg, rgba(138, 238, 255, 0.96) 0%, rgba(132, 108, 255, 0.96) 44%, rgba(255, 83, 218, 0.98) 100%);
  box-shadow:
    0 0 22px rgba(183, 109, 255, 0.36),
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 5px 7px 10px rgba(255, 255, 255, 0.24),
    inset -7px -8px 12px rgba(98, 38, 158, 0.26);
}

.ambient-xp-boost-glass::after,
.xp-boost-potion-fallback::after {
  content: '';
  position: absolute;
  left: 24px;
  top: 3px;
  width: 17px;
  height: 14px;
  border: 2px solid rgba(241, 252, 255, 0.92);
  border-bottom: 0;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgba(234, 253, 255, 0.24), rgba(72, 176, 208, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: rotate(14deg);
}

.ambient-xp-boost-glass > span,
.xp-boost-potion-fallback > span {
  position: absolute;
  left: 17px;
  top: 24px;
  z-index: 2;
  width: 15px;
  height: 5px;
  border-radius: 999px;
  background: rgba(232, 255, 247, 0.56);
  transform: rotate(-34deg);
}

.ambient-xp-boost-glass > span::before,
.ambient-xp-boost-glass > span::after,
.xp-boost-potion-fallback > span::before,
.xp-boost-potion-fallback > span::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(185, 250, 255, 0.92) 43% 57%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(185, 250, 255, 0.92) 43% 57%, transparent 58%);
  transform: rotate(34deg);
}

.ambient-xp-boost-glass > span::before,
.xp-boost-potion-fallback > span::before {
  left: -20px;
  top: -16px;
}

.ambient-xp-boost-glass > span::after,
.xp-boost-potion-fallback > span::after {
  left: 34px;
  top: -12px;
  width: 5px;
  height: 5px;
}

.ambient-xp-boost-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.05;
}

.ambient-xp-boost-meta {
  font-size: 13px;
  font-weight: 900;
}

.ambient-xp-boost-left {
  margin-top: 4px;
  color: rgba(231, 249, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

@keyframes xp-boost-ambient-pulse {
  0%, 100% { transform: rotate(-14deg) scale(1); filter: brightness(1); }
  50% { transform: rotate(-11deg) scale(1.06); filter: brightness(1.14); }
}

.xp-boosts-surface {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.xp-boost-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(132, 229, 255, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 10%, rgba(124, 236, 255, 0.22), transparent 44%),
    radial-gradient(circle at 90% 5%, rgba(255, 218, 116, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(10, 22, 38, 0.94), rgba(18, 20, 43, 0.94));
  overflow: hidden;
}

.xp-boost-hero.is-active {
  border-color: rgba(255, 217, 112, 0.5);
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 217, 112, 0.26), transparent 44%),
    radial-gradient(circle at 88% 8%, rgba(255, 105, 220, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(41, 24, 8, 0.96), rgba(28, 19, 48, 0.94));
}

.xp-boost-kicker {
  color: rgba(198, 239, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.xp-boost-title {
  margin-top: 6px;
  color: #fff;
  font: 900 28px/1.05 var(--hud-font-display);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.xp-boost-body {
  max-width: 620px;
  margin-top: 8px;
  color: rgba(226, 244, 255, 0.74);
  font: 700 14px/1.45 var(--hud-font-body);
  overflow-wrap: anywhere;
}

.xp-boost-hero-orb {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.95), rgba(139, 234, 255, 0.7) 28%, rgba(111, 92, 255, 0.28) 62%, rgba(8, 13, 27, 0.88));
  box-shadow: 0 0 24px rgba(121, 226, 255, 0.24);
  color: #102033;
  font: 1000 30px/1 var(--hud-font-display);
}

.xp-boost-hero-orb > span:last-child {
  position: relative;
  z-index: 2;
  margin-top: -18px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(8, 17, 31, 0.74);
  color: rgba(238, 252, 255, 0.96);
  font: 1000 16px/1 var(--hud-font-display);
}

.xp-boost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.xp-boost-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  min-height: 214px;
  border: 1px solid rgba(145, 230, 255, 0.24);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(7, 13, 24, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  contain: layout paint style;
}

.xp-boost-card-gold {
  border-color: rgba(255, 217, 116, 0.48);
  background: rgba(27, 18, 8, 0.92);
}

.xp-boost-card-prism {
  border-color: rgba(255, 141, 238, 0.5);
  background: rgba(18, 10, 32, 0.92);
  box-shadow: 0 14px 30px rgba(146, 95, 255, 0.14), 0 12px 28px rgba(0, 0, 0, 0.26);
}

.xp-boost-card-art,
.xp-boost-card-art .reward-visual,
.xp-boost-card-art .reward-visual-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xp-boost-card-art {
  background:
    radial-gradient(circle at 34% 24%, rgba(156, 246, 255, 0.22), transparent 34%),
    radial-gradient(circle at 72% 76%, rgba(101, 239, 132, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(10, 30, 47, 0.92), rgba(14, 18, 40, 0.94));
}

.xp-boost-card-gold .xp-boost-card-art {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 223, 119, 0.28), transparent 34%),
    radial-gradient(circle at 76% 72%, rgba(255, 133, 78, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(49, 31, 9, 0.92), rgba(31, 19, 29, 0.94));
}

.xp-boost-card-prism .xp-boost-card-art {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 132, 232, 0.25), transparent 34%),
    radial-gradient(circle at 72% 72%, rgba(118, 118, 255, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(24, 16, 55, 0.94), rgba(38, 12, 43, 0.94));
}

.xp-boost-potion-fallback {
  position: absolute;
  left: 50%;
  top: 43%;
  display: block;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%) rotate(-14deg);
  transform-origin: 50% 58%;
}

.xp-boost-potion-fallback::before {
  top: 24px;
  width: 62px;
  height: 62px;
  border-width: 3px;
  box-shadow:
    0 0 30px rgba(94, 231, 255, 0.28),
    0 18px 30px rgba(0, 0, 0, 0.28),
    inset 8px 10px 16px rgba(255, 255, 255, 0.25),
    inset -12px -14px 18px rgba(33, 120, 135, 0.22);
}

.xp-boost-potion-fallback::after {
  left: 49px;
  top: 6px;
  width: 30px;
  height: 23px;
  border-width: 3px;
  border-radius: 10px 10px 4px 4px;
}

.xp-boost-potion-fallback > span {
  left: 30px;
  top: 47px;
  width: 27px;
  height: 8px;
}

.xp-boost-potion-fallback > span::before {
  left: -34px;
  top: -30px;
  width: 10px;
  height: 10px;
}

.xp-boost-potion-fallback > span::after {
  left: 62px;
  top: -24px;
  width: 8px;
  height: 8px;
}

.xp-boost-potion-fallback--gold::before {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.95) 0 6px, transparent 7px),
    linear-gradient(142deg, rgba(255, 244, 167, 0.98) 0%, rgba(255, 184, 80, 0.96) 48%, rgba(255, 102, 54, 0.98) 100%);
  box-shadow:
    0 0 30px rgba(255, 198, 86, 0.32),
    0 18px 30px rgba(0, 0, 0, 0.28),
    inset 8px 10px 16px rgba(255, 255, 255, 0.25),
    inset -12px -14px 18px rgba(151, 72, 20, 0.24);
}

.xp-boost-potion-fallback--prism::before {
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.95) 0 6px, transparent 7px),
    linear-gradient(142deg, rgba(138, 238, 255, 0.96) 0%, rgba(132, 108, 255, 0.96) 44%, rgba(255, 83, 218, 0.98) 100%);
  box-shadow:
    0 0 32px rgba(183, 109, 255, 0.34),
    0 18px 30px rgba(0, 0, 0, 0.28),
    inset 8px 10px 16px rgba(255, 255, 255, 0.24),
    inset -12px -14px 18px rgba(98, 38, 158, 0.26);
}

.xp-boost-potion-fallback--hero {
  position: relative;
  left: auto;
  top: auto;
  width: 70px;
  height: 70px;
  transform: rotate(-14deg);
}

.xp-boost-potion-fallback--hero::before {
  top: 18px;
  width: 46px;
  height: 46px;
}

.xp-boost-potion-fallback--hero::after {
  left: 36px;
  top: 4px;
  width: 23px;
  height: 18px;
}

.xp-boost-potion-fallback--hero > span {
  left: 24px;
  top: 36px;
  width: 20px;
  height: 6px;
}

.xp-boost-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px;
  background: linear-gradient(to top, rgba(4, 8, 17, 0.86), transparent 62%);
}

.xp-boost-card-copy {
  width: 100%;
  min-width: 0;
}

.xp-boost-card-title {
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1.05;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-boost-card-meta,
.xp-boost-count {
  color: rgba(231, 246, 255, 0.76);
  font-size: 12px;
  font-weight: 850;
}

.xp-boost-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

.xp-boost-card-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 10px;
}

.xp-boost-activate-btn {
  min-width: 104px;
  max-width: 132px;
  white-space: normal;
}

.xp-boost-card.is-activating {
  animation: xp-boost-card-activate 520ms cubic-bezier(.16,.84,.23,1);
}

@keyframes xp-boost-card-activate {
  0% { transform: scale(1); filter: brightness(1); }
  46% { transform: scale(1.035); filter: brightness(1.28); }
  100% { transform: scale(1); filter: brightness(1); }
}

.xp-boost-store {
  padding: 16px;
  border: 1px solid rgba(180, 224, 255, 0.16);
  border-radius: 16px;
  background: rgba(8, 14, 25, 0.74);
  min-width: 0;
}

.xp-boost-store-title {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.xp-boost-store-sub {
  margin-top: 4px;
  color: rgba(220, 238, 248, 0.66);
  font-size: 12px;
  font-weight: 750;
}

.xp-boost-offers {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.xp-boost-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.xp-boost-offer > div {
  min-width: 0;
}

.xp-boost-offer-title {
  color: #fff;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.xp-boost-offer-sub {
  margin-top: 3px;
  color: rgba(224, 239, 248, 0.68);
  font-size: 12px;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.xp-boost-offer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.xp-boost-offer-chips span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(140, 226, 255, 0.12);
  color: rgba(231, 248, 255, 0.86);
  font-size: 11px;
  font-weight: 850;
}

.xp-boost-feedback[data-tone="positive"] {
  color: #95ffd4;
}

.xp-boost-feedback[data-tone="warning"] {
  color: #ffd39a;
}

@media (max-width: 760px) {
  .xp-boost-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .xp-boost-title {
    font-size: 24px;
  }

  .xp-boost-hero-orb {
    width: 82px;
    height: 82px;
    font-size: 24px;
  }

  .xp-boost-grid {
    grid-template-columns: 1fr;
  }

  .xp-boost-card {
    aspect-ratio: auto;
    min-height: 220px;
  }

  .xp-boost-card-overlay {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
  }

  .xp-boost-card-side {
    align-items: stretch;
  }

  .xp-boost-activate-btn {
    max-width: none;
  }

  .xp-boost-offer {
    align-items: stretch;
    flex-direction: column;
  }
}

@keyframes ambient-chest-overflow-pop {
  0% { transform: translateY(2px) scale(0.86); filter: brightness(0.9); }
  52% { transform: translateY(-1px) scale(1.16); filter: brightness(1.35); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.ambient-results-dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 20px));
  border: 1px solid var(--hud-border-soft);
  border-radius: var(--hud-radius-lg);
  padding: 12px 14px;
  z-index: 56;
  background:
    radial-gradient(140% 126% at 6% -14%, rgba(88, 210, 255, 0.24), transparent 62%),
    radial-gradient(130% 120% at 100% 0%, rgba(255, 231, 112, 0.14), transparent 58%),
    rgba(8, 14, 24, 0.9);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(122, 208, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ambient-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.ambient-results-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.ambient-results-meta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.82;
}

.ambient-results-xp-line {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ambient-results-streak {
  margin-top: 8px;
  opacity: 0.78;
}

.ambient-results-pb-line {
  margin-top: 6px;
  opacity: 0.8;
}

.ambient-results-chip-row {
  margin-top: 8px;
}

.ambient-results-actions {
  margin-top: 10px;
}

.ambient-coop-analysis-float {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%) !important;
  z-index: 56;
  min-width: 0;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  text-transform: lowercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 18px rgba(118, 255, 204, 0.12);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  will-change: auto;
}

.ambient-coop-analysis-float:hover,
.ambient-coop-analysis-float:focus-visible,
.ambient-coop-analysis-float:active {
  transform: translateX(-50%) !important;
}

.ambient-run-notification {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  top: clamp(76px, 16vh, 150px);
  z-index: 48;
  width: min(430px, calc(100vw - 40px));
  display: none;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  pointer-events: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.36));
  transform: translate3d(-42px, -16px, 0);
  opacity: 0;
}

.ambient-run-notification-stack {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  top: clamp(146px, 18vh, 210px);
  z-index: 45;
  display: none;
  grid-template-columns: minmax(220px, 380px) 1fr minmax(220px, 380px);
  gap: clamp(24px, 7vw, 120px);
  pointer-events: none;
  align-items: start;
}

.ambient-run-notification-stack.is-visible {
  display: grid;
}

.ambient-run-notification-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ambient-run-notification-column--right {
  grid-column: 3;
  align-items: stretch;
}

.ambient-run-notification-stack .ambient-run-notification {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  max-width: 380px;
  display: grid;
}

.ambient-run-notification.is-from-right {
  grid-template-columns: 1fr auto;
  text-align: right;
}

.ambient-run-notification.is-from-right .ambient-run-notification-icon {
  order: 2;
}

.ambient-run-notification.is-visible {
  display: grid;
}

.ambient-run-notification-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 26px rgba(128, 214, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ambient-run-notification-flame {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 160, 74, 0.5));
}

.ambient-run-notification-copy {
  min-width: 0;
}

.ambient-run-notification-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(248, 253, 255, 0.98);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.68),
    0 0 24px rgba(126, 214, 255, 0.22);
}

.ambient-run-notification-detail {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.86;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.64);
}

.ambient-run-notification.is-good {
  color: #a6ffd4;
}

.ambient-run-notification.is-good .ambient-run-notification-icon {
  color: #93f1c2;
  border-color: rgba(137, 240, 191, 0.45);
  background: rgba(137, 240, 191, 0.18);
}

.ambient-run-notification.is-accent {
  color: #b7e7ff;
}

.ambient-run-notification.is-accent .ambient-run-notification-icon {
  color: #99ddff;
  border-color: rgba(133, 212, 255, 0.44);
  background: rgba(133, 212, 255, 0.18);
}

.ambient-run-notification.is-warn {
  color: #ffd7a2;
}

.ambient-run-notification.is-warn .ambient-run-notification-icon {
  color: #ffd7a2;
  border-color: rgba(255, 207, 145, 0.45);
  background: rgba(255, 207, 145, 0.18);
}

.ambient-run-notification.is-streak {
  filter:
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 24px rgba(255, 173, 102, 0.18));
}

.ambient-run-notification.is-streak .ambient-run-notification-icon {
  transform: scale(1.06);
  transition: transform 140ms ease-out;
}

@media (max-width: 920px) {
  .ambient-run-notification-stack {
    top: clamp(152px, 18vh, 184px);
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
  }

  .ambient-run-notification-column,
  .ambient-run-notification-column--right {
    grid-column: 1;
    align-items: stretch;
    gap: 8px;
  }

  .ambient-run-notification-stack .ambient-run-notification {
    max-width: min(430px, calc(100vw - 28px));
    margin-inline: auto;
    gap: 8px;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .ambient-run-notification-stack .ambient-run-notification.is-from-right {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .ambient-run-notification-stack .ambient-run-notification-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 15px;
  }

  .ambient-run-notification-stack .ambient-run-notification-title {
    font-size: clamp(15px, 4.4vw, 20px);
    line-height: 1.02;
  }

  .ambient-run-notification-stack .ambient-run-notification-detail {
    margin-top: 3px;
    font-size: 10px;
  }
}

@media (max-width: 920px) and (max-height: 720px) {
  .ambient-run-notification-stack {
    top: 148px;
    gap: 5px;
  }

  .ambient-run-notification-column,
  .ambient-run-notification-column--right {
    gap: 5px;
  }

  .ambient-run-notification-stack .ambient-run-notification {
    gap: 7px;
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .ambient-run-notification-stack .ambient-run-notification.is-from-right {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .ambient-run-notification-stack .ambient-run-notification-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 13px;
  }

  .ambient-run-notification-stack .ambient-run-notification-title {
    font-size: clamp(13px, 4vw, 17px);
  }

  .ambient-run-notification-stack .ambient-run-notification-detail {
    font-size: 9px;
  }
}

.ambient-chest-xp-flow-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: visible;
}

.ambient-chest-xp-orb {
  position: fixed;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(214, 248, 255, 0.66);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(196, 242, 255, 0.96) 34%, rgba(119, 213, 255, 0.84) 100%);
  box-shadow:
    0 0 14px rgba(112, 206, 255, 0.9),
    0 0 30px rgba(112, 206, 255, 0.48);
  opacity: 0;
  will-change: transform, opacity;
}

.ambient-chest-xp-orb.is-swarming {
  width: 14px;
  height: 14px;
  border-color: rgba(222, 250, 255, 0.72);
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 1) 0%, rgba(213, 249, 255, 0.98) 30%, rgba(120, 218, 255, 0.88) 100%);
  box-shadow:
    0 0 12px rgba(136, 224, 255, 0.94),
    0 0 24px rgba(105, 205, 255, 0.46),
    0 0 42px rgba(105, 205, 255, 0.18);
}

.blackout-intro-title {
  position: fixed;
  left: 50%;
  top: 45%;
  z-index: 98;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -100%, 0) scale(0.96);
  transform-origin: center bottom;
  transition: none;
  --blackout-title-line: 0;
  will-change: opacity, transform;
}

.blackout-intro-veil {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: none;
  pointer-events: none;
  background: #000000;
  opacity: 0;
  will-change: opacity;
}

.blackout-intro-veil.is-visible {
  display: block;
}

.blackout-intro-title.is-visible {
  opacity: 1;
}

.blackout-intro-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 26px);
}

.blackout-intro-line {
  width: clamp(42px, 10vw, 142px);
  height: 1px;
  display: block;
  opacity: calc(var(--blackout-title-line) * 0.82);
  transform: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.42),
    0 0 28px rgba(125, 207, 255, 0.26);
}

.blackout-intro-line--left {
  transform-origin: right center;
}

.blackout-intro-line--right {
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.blackout-intro-word {
  font-family: var(--hud-font-display);
  font-size: clamp(42px, 7vw, 104px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  color: #ffffff;
  text-align: center;
  text-shadow:
    0 6px 22px rgba(0, 0, 0, 0.96),
    0 0 20px rgba(255, 255, 255, 0.52),
    0 0 58px rgba(255, 255, 255, 0.26),
    0 0 92px rgba(95, 190, 255, 0.34);
  white-space: nowrap;
}

.progression-results-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.progression-results-divider {
  opacity: 0.45;
}

.progression-quality-row {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.progression-quality-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.progression-quality-badge.is-qualified {
  border-color: rgba(106, 236, 169, 0.65);
  background: rgba(106, 236, 169, 0.16);
}

.progression-quality-badge.is-participation {
  border-color: rgba(143, 215, 255, 0.6);
  background: rgba(143, 215, 255, 0.16);
}

.progression-quality-badge.is-unqualified {
  border-color: rgba(255, 173, 173, 0.55);
  background: rgba(255, 173, 173, 0.16);
}

.progression-quality-hint {
  opacity: 0.72;
}

.progression-experimental-note {
  margin-top: 8px;
  border: 1px solid rgba(255, 196, 120, 0.34);
  border-radius: 10px;
  padding: 7px 9px;
  color: rgba(255, 216, 158, 0.94);
  background: rgba(56, 34, 10, 0.35);
}

.progression-xp-panel {
  margin-top: 12px;
  border: 1px solid rgba(189, 229, 255, 0.24);
  background:
    radial-gradient(140% 120% at 6% -25%, rgba(120, 205, 255, 0.2), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 12px 13px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 12px 28px rgba(0, 0, 0, 0.2);
}

.progression-xp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.progression-level-label {
  font-size: 15px;
  font-weight: 700;
}

.progression-xp-gain {
  font-size: 13px;
  font-weight: 700;
  color: #7fd3ff;
}

.progression-xp-track {
  margin-top: 8px;
  height: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(214, 240, 255, 0.12) inset;
}

.progression-xp-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #57c7ff 0%, #9be8ff 55%, #fff3a6 100%);
  box-shadow:
    0 0 18px rgba(87, 199, 255, 0.44),
    0 0 0 1px rgba(196, 244, 255, 0.28) inset;
}

.progression-xp-meta {
  margin-top: 7px;
  opacity: 0.82;
}

.progression-levelup-notice {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff3a6;
  opacity: 0.92;
}

.progression-levelup-notice::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff3a6;
  box-shadow: 0 0 8px rgba(255, 243, 166, 0.75);
}

.progression-levelup-notice.is-pulsing {
  animation: progression-levelup-pulse 280ms ease-out;
}

.progression-chip-row {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.progression-chip-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.progression-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  border: 1px solid rgba(214, 242, 255, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition:
    transform var(--hud-fast) var(--hud-ease),
    border-color var(--hud-fast) var(--hud-ease),
    box-shadow var(--hud-fast) var(--hud-ease),
    background var(--hud-fast) var(--hud-ease);
}

.progression-chip.is-positive {
  border-color: rgba(106, 236, 169, 0.62);
  background: linear-gradient(180deg, rgba(106, 236, 169, 0.24), rgba(106, 236, 169, 0.1));
  box-shadow: 0 0 20px rgba(106, 236, 169, 0.18);
}

.progression-chip.is-accent {
  border-color: rgba(127, 211, 255, 0.64);
  background: linear-gradient(180deg, rgba(127, 211, 255, 0.24), rgba(127, 211, 255, 0.1));
  box-shadow: 0 0 22px rgba(127, 211, 255, 0.22);
}

.progression-chip.is-neutral {
  border-color: rgba(153, 220, 255, 0.54);
  background: linear-gradient(180deg, rgba(153, 220, 255, 0.2), rgba(153, 220, 255, 0.08));
}

.progression-chip.is-warning {
  border-color: rgba(255, 209, 148, 0.6);
  background: linear-gradient(180deg, rgba(255, 209, 148, 0.26), rgba(255, 209, 148, 0.1));
  box-shadow: 0 0 20px rgba(255, 209, 148, 0.2);
}

.progression-chip.is-muted {
  opacity: 0.74;
}

.progress-chip-check {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11px;
}

.progress-checkbox-inline {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(196, 234, 255, 0.6);
  background: rgba(12, 24, 38, 0.74);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
}

.progress-checkbox-inline-native,
.progress-checkbox-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.progress-checkbox-inline-mark {
  width: 7px;
  height: 4px;
  border-left: 2px solid rgba(228, 248, 255, 0.96);
  border-bottom: 2px solid rgba(228, 248, 255, 0.96);
  transform: rotate(-45deg) scale(0.7);
  opacity: 0.22;
  transition: transform var(--hud-fast) var(--hud-ease), opacity var(--hud-fast) var(--hud-ease);
}

.progress-chip-check.is-done .progress-checkbox-inline,
.progress-checkbox-inline.is-checked {
  border-color: rgba(139, 243, 188, 0.82);
  background: linear-gradient(180deg, rgba(106, 236, 169, 0.36), rgba(106, 236, 169, 0.18));
  box-shadow: 0 0 16px rgba(106, 236, 169, 0.34);
}

.progress-chip-check.is-done .progress-checkbox-inline-mark,
.progress-checkbox-inline.is-checked .progress-checkbox-inline-mark {
  transform: rotate(-45deg) scale(1);
  opacity: 1;
}

.progress-checkbox-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(184, 226, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  transition:
    border-color var(--hud-fast) var(--hud-ease),
    background var(--hud-fast) var(--hud-ease),
    transform var(--hud-fast) var(--hud-ease),
    box-shadow var(--hud-fast) var(--hud-ease);
}

.progress-checkbox-row.is-done {
  border-color: rgba(126, 236, 180, 0.42);
  background: linear-gradient(180deg, rgba(106, 236, 169, 0.12), rgba(106, 236, 169, 0.04));
  box-shadow: 0 0 18px rgba(106, 236, 169, 0.14);
}

.progress-checkbox {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1px solid rgba(199, 238, 255, 0.66);
  background: rgba(10, 20, 34, 0.82);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition:
    border-color var(--hud-fast) var(--hud-ease),
    background var(--hud-fast) var(--hud-ease),
    box-shadow var(--hud-fast) var(--hud-ease),
    transform var(--hud-fast) var(--hud-ease);
}

.progress-checkbox-mark {
  width: 8px;
  height: 5px;
  border-left: 2px solid rgba(236, 251, 255, 0.98);
  border-bottom: 2px solid rgba(236, 251, 255, 0.98);
  transform: rotate(-45deg) scale(0.64);
  opacity: 0.2;
  transform-origin: 50% 50%;
  transition:
    transform var(--hud-fast) var(--hud-ease),
    opacity var(--hud-fast) var(--hud-ease);
}

.progress-checkbox-row.is-done .progress-checkbox,
.progress-checkbox.is-checked,
.progress-checkbox.is-claimed,
.mission-state-icon.is-claimed,
.achievement-state-icon.is-claimed {
  border-color: rgba(139, 243, 188, 0.86);
  background: linear-gradient(180deg, rgba(106, 236, 169, 0.46), rgba(106, 236, 169, 0.2));
  box-shadow: 0 0 16px rgba(106, 236, 169, 0.32);
}

.progress-checkbox-row.is-done .progress-checkbox-mark,
.progress-checkbox.is-checked .progress-checkbox-mark,
.progress-checkbox.is-claimed .progress-checkbox-mark,
.mission-state-icon.is-claimed .progress-checkbox-mark,
.achievement-state-icon.is-claimed .progress-checkbox-mark {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.mission-state-icon.is-claimable,
.achievement-state-icon.is-claimable {
  border-color: rgba(142, 220, 255, 0.84);
  background: linear-gradient(180deg, rgba(127, 211, 255, 0.42), rgba(127, 211, 255, 0.18));
  box-shadow: 0 0 14px rgba(127, 211, 255, 0.26);
}

.mission-state-icon.is-progress,
.achievement-state-icon.is-progress {
  border-color: rgba(199, 238, 255, 0.52);
  background: rgba(8, 20, 34, 0.82);
}

.mission-state-icon.is-progress .progress-checkbox-mark,
.achievement-state-icon.is-progress .progress-checkbox-mark {
  opacity: 0.08;
  transform: rotate(-45deg) scale(0.45);
}

.mission-state-icon.is-claimable .progress-checkbox-mark,
.achievement-state-icon.is-claimable .progress-checkbox-mark {
  opacity: 0.9;
  transform: rotate(-45deg) scale(0.86);
}

.progress-checkbox-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(232, 246, 255, 0.93);
  min-width: 0;
}

.progress-checkbox-value {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(214, 243, 255, 0.98);
  white-space: nowrap;
}

.progression-results-streak {
  margin-top: 8px;
  opacity: 0.74;
}

.progression-results-pb {
  margin-top: 7px;
  opacity: 0.8;
}

.progression-results-recognition {
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(174, 226, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(224, 244, 255, 0.9);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.progression-level-req-row {
  margin-top: 8px;
  margin-bottom: 2px;
}

.progression-results-chest-panel {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 11px;
  padding: 9px 10px;
}

.progression-results-chest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.progression-results-chest-track-wrap {
  position: relative;
  margin-top: 7px;
}

.progression-results-chest-track {
  height: 7px;
  position: relative;
}

.progression-results-chest-fill {
  transition: width 620ms cubic-bezier(.2,.85,.25,1);
  will-change: width;
}

.progression-results-chest-preview {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(190, 239, 255, 0.38) 0%, rgba(206, 247, 255, 0.56) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(214, 248, 255, 0.42),
    0 0 18px rgba(173, 235, 255, 0.58);
  transition:
    width 340ms cubic-bezier(.2,.85,.25,1),
    opacity 260ms ease-out;
  pointer-events: none;
}

.progression-results-chest-fill-heat {
  background: linear-gradient(90deg, #6fd4ff 0%, #9ee8ff 38%, #ffe08a 72%, #ffba8d 100%);
}

.progression-results-chest-meta {
  margin-top: 7px;
  opacity: 0.76;
}

.progression-results-sequence-beat {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  padding: 9px 10px;
  background: rgba(12, 23, 36, 0.78);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.progression-results-sequence-beat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.progression-results-sequence-beat.is-neutral {
  border-color: rgba(174, 220, 255, 0.34);
}

.progression-results-sequence-beat.is-accent {
  border-color: rgba(141, 230, 255, 0.44);
  background: rgba(14, 34, 50, 0.84);
}

.progression-results-sequence-beat.is-positive {
  border-color: rgba(170, 243, 190, 0.4);
  background: rgba(14, 35, 29, 0.82);
}

.progression-results-sequence-beat-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.progression-results-sequence-beat-detail {
  margin-top: 3px;
  opacity: 0.82;
}

.progression-results-chest-particles {
  position: absolute;
  inset: -18px 0 -4px 0;
  pointer-events: none;
}

.progression-results-chest-sticker {
  position: absolute;
  left: 10%;
  bottom: -3px;
  border-radius: 999px;
  border: 1px solid rgba(160, 228, 255, 0.48);
  background: rgba(14, 31, 50, 0.9);
  color: rgba(214, 244, 255, 0.98);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  white-space: nowrap;
  opacity: 0;
  animation: progression-results-chest-sticker 680ms cubic-bezier(.2,.75,.24,1) forwards;
}

.progression-results-row {
  margin-top: 12px;
}

.progression-share-feedback {
  margin-top: 10px;
  min-height: 16px;
  opacity: 0.72;
}

.progression-skip-hint {
  margin-top: 8px;
  opacity: 0.72;
}

.progression-results-card.is-sequencing .progression-skip-hint {
  opacity: 0.84;
}

.progression-results-card.is-ready .progression-skip-hint {
  opacity: 0.66;
}

.progression-xp-transfer-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 94;
  overflow: visible;
}

.progression-xp-transfer-piece {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: rgba(242, 251, 255, 0.96);
  border: 1px solid rgba(210, 248, 255, 0.68);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.94) 0%, rgba(209, 245, 255, 0.86) 36%, rgba(123, 214, 255, 0.82) 100%);
  box-shadow:
    0 0 18px rgba(147, 226, 255, 0.72),
    0 0 34px rgba(126, 213, 255, 0.5);
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes progression-levelup-pulse {
  0% { transform: scale(0.96); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.95; }
}

@media (max-width: 640px) {
  .progression-results-card {
    padding: 16px 14px 12px;
  }

  .progression-results-recognition {
    font-size: 11px;
  }

  .reward-intel-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .reward-intel-orb {
    width: 36px;
    height: 36px;
  }

  .reward-intel-actions {
    gap: 6px;
  }

  .reward-intel-action {
    flex: 1 1 88px;
  }

  .progression-results-row {
    align-items: stretch;
  }

  .progression-results-row .ui-btn {
    flex: 1 1 120px;
  }

  .progression-xp-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.progression-hub-card {
  width: min(780px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(198, 234, 255, 0.18);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  background:
    radial-gradient(145% 132% at 10% -26%, rgba(88, 210, 255, 0.2), transparent 58%),
    radial-gradient(150% 140% at 100% 0%, rgba(255, 231, 112, 0.12), transparent 60%),
    rgba(8, 16, 28, 0.94);
}

.progression-hub-card.is-surface-missions {
  box-sizing: border-box;
  width: min(1280px, calc(100vw - 40px));
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  padding: 20px 22px 18px;
  background:
    radial-gradient(140% 125% at 6% -20%, rgba(92, 200, 255, 0.26), transparent 58%),
    radial-gradient(136% 144% at 100% 0%, rgba(255, 231, 112, 0.12), transparent 58%),
    rgba(8, 16, 28, 0.95);
}

.progression-hub-card.is-surface-missions .progression-hub-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
}

.progression-hub-card.is-surface-achievements {
  background:
    radial-gradient(140% 122% at 2% -22%, rgba(142, 214, 255, 0.2), transparent 56%),
    radial-gradient(140% 146% at 100% 0%, rgba(154, 235, 196, 0.24), transparent 56%),
    rgba(8, 16, 28, 0.95);
}

.progression-hub-card.is-surface-chests {
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  padding: 18px 20px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(135deg, rgba(14, 34, 46, 0.96), rgba(32, 18, 42, 0.92) 46%, rgba(37, 29, 15, 0.94)),
    linear-gradient(90deg, rgba(109, 220, 255, 0.16), rgba(255, 216, 125, 0.13) 48%, rgba(132, 238, 179, 0.12));
}

.progression-hub-card.is-surface-chests .progression-hub-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding-right: 0;
}

.progression-hub-card.is-surface-chests .progression-hub-head {
  flex: 0 0 auto;
}

.progression-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.progression-hub-title-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}

.progression-hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  border: 1px solid rgba(208, 238, 255, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 18px rgba(120, 206, 255, 0.14);
}

.progression-hub-meta {
  margin: 0;
  opacity: 0.78;
}

.progression-helper-copy {
  margin-top: 6px;
  opacity: 0.82;
}

.progression-hub-head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.progression-hub-claimable {
  white-space: nowrap;
  border-color: rgba(167, 249, 220, 0.72);
  background: linear-gradient(180deg, rgba(129, 241, 190, 0.3), rgba(129, 241, 190, 0.12));
  color: rgba(227, 255, 242, 0.98);
  box-shadow:
    0 0 20px rgba(123, 240, 188, 0.36),
    0 0 0 1px rgba(205, 255, 230, 0.2) inset;
}

.progression-hub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.progression-surface-tabs .progression-hub-tab {
  min-width: 120px;
  text-align: center;
}

.progression-hub-tab {
  padding: 9px 12px;
  border-radius: 12px;
  transition:
    border-color var(--hud-fast) var(--hud-ease),
    background var(--hud-fast) var(--hud-ease),
    transform var(--hud-fast) var(--hud-ease),
    box-shadow var(--hud-fast) var(--hud-ease);
}

.progression-hub-tab.is-active {
  border-color: rgba(127, 211, 255, 0.72);
  background: linear-gradient(180deg, rgba(127, 211, 255, 0.28), rgba(127, 211, 255, 0.12));
  box-shadow: 0 0 22px rgba(127, 211, 255, 0.24);
}

.progression-hub-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(183, 227, 255, 0.52);
}

.progression-hub-panel {
  min-height: 320px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding-right: 2px;
  transition: opacity 120ms ease-out;
}

.progression-hub-panel-surface {
  min-height: 300px;
}

.progression-hub-surface-loading {
  min-height: min(360px, 52vh);
  display: grid;
  place-items: center;
  gap: 10px;
  color: rgba(231, 246, 255, 0.86);
  font: 900 15px/1 var(--hud-font-body, system-ui, sans-serif);
}

.progression-hub-surface-loading .progression-hub-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(137, 226, 255, 0.26);
  background: rgba(8, 20, 33, 0.58);
  color: rgba(255, 240, 184, 0.95);
}

.progression-hub-panel.is-tab-swapping {
  opacity: 0.78;
}

.progression-hub-card {
  position: relative;
}

.progression-hub-input-shield {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: block;
  pointer-events: none;
  background: transparent;
}

.progression-hub-card.is-input-settling .progression-hub-input-shield {
  pointer-events: auto;
  cursor: progress;
}

.progression-hub-card.is-input-settling {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.progression-hub-card.is-input-settling *,
.progression-hub-card.is-input-settling *::before,
.progression-hub-card.is-input-settling *::after {
  animation: none !important;
  transition: none !important;
}

.progression-hub-actions {
  margin-top: 2px;
}

.progression-surface-keyline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.progression-symbol-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(188, 230, 255, 0.34);
  background: linear-gradient(180deg, rgba(164, 218, 255, 0.2), rgba(164, 218, 255, 0.06));
  color: rgba(241, 250, 255, 0.92);
  box-shadow: 0 0 14px rgba(112, 206, 255, 0.14);
}

.streak-overlay-card {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(130% 120% at 8% -20%, rgba(127, 211, 255, 0.18), transparent 58%),
    radial-gradient(130% 140% at 100% 0%, rgba(154, 235, 196, 0.12), transparent 56%),
    rgba(8, 16, 28, 0.95);
}

.streak-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.streak-overlay-sub {
  margin: 0;
  opacity: 0.78;
}

.streak-overlay-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.streak-inline-flame {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 158, 71, 0.45));
}

.streak-close-btn {
  border-color: rgba(255, 204, 188, 0.44);
  background: linear-gradient(180deg, rgba(112, 67, 74, 0.78), rgba(48, 30, 37, 0.9));
  color: rgba(255, 232, 226, 0.96);
}

.progression-hub-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progression-hub-xp-panel {
  margin-top: 0;
}

.progression-hub-streak-card {
  border: 1px solid rgba(146, 220, 255, 0.36);
  border-radius: 14px;
  background:
    radial-gradient(145% 108% at 0% 0%, rgba(127, 211, 255, 0.22) 0%, rgba(127, 211, 255, 0.03) 58%, rgba(8, 14, 24, 0.52) 100%);
  padding: 12px 14px;
  box-shadow:
    0 0 0 1px rgba(199, 236, 255, 0.07) inset,
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.progression-hub-streak-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.progression-hub-streak-title {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 700;
}

.progression-hub-streak-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.streak-freeze-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.streak-freeze-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.streak-freeze-section {
  border: 1px solid rgba(179, 228, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 30, 49, 0.6), rgba(9, 20, 35, 0.42));
  padding: 12px;
}

.streak-freeze-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.82;
  margin-bottom: 8px;
}

.streak-freeze-section-shop {
  border-color: rgba(255, 204, 124, 0.28);
  background: rgba(30, 20, 8, 0.26);
}

.streak-freeze-item {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(188, 228, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  opacity: 0.74;
  transition:
    transform var(--hud-fast) var(--hud-ease),
    border-color var(--hud-fast) var(--hud-ease),
    box-shadow var(--hud-fast) var(--hud-ease),
    opacity var(--hud-fast) var(--hud-ease);
}

.streak-freeze-item.is-active {
  border-color: rgba(131, 226, 255, 0.62);
  box-shadow: 0 0 24px rgba(131, 226, 255, 0.3);
  opacity: 1;
  transform: translateY(-1px) scale(1.02);
}

.streak-freeze-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  opacity: 0.74;
  filter: grayscale(0.18) drop-shadow(0 0 10px rgba(107, 198, 255, 0.22));
}

.streak-freeze-item.is-active .streak-freeze-icon {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(127, 211, 255, 0.55));
}

.progression-hub-streak-value {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.streak-value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}

.streak-value-flame {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 165, 79, 0.52));
}

.streak-value-number {
  display: inline-flex;
  align-items: center;
  min-width: 2ch;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.progression-hub-streak-next {
  text-align: right;
  opacity: 0.8;
  min-width: 10ch;
}

.progression-hub-streak-reward {
  margin-top: 6px;
  opacity: 0.82;
}

.progression-hub-streak-protection {
  margin-top: 4px;
  color: rgba(142, 240, 191, 0.92);
}

.streak-freeze-buy-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.streak-freeze-buy-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
}

.streak-coin-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.progression-hub-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.progression-hub-stat {
  border: 1px solid rgba(205, 238, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  padding: 11px 13px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.progression-hub-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.68;
}

.progression-hub-stat-value {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 800;
}

.progression-hub-inline-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.progression-hub-mission-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.progression-mission-feedback {
  min-height: 16px;
  margin-bottom: 8px;
  opacity: 0.8;
}

.progression-mission-feedback:empty {
  display: none;
}

.progression-mission-feedback[data-tone="positive"] {
  color: #8ef0bf;
}

.progression-mission-feedback[data-tone="warning"] {
  color: #ffd59a;
}

.progression-hub-missions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
}

.progression-mission-ad-panel {
  border: 1px solid rgba(131, 208, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  padding: 8px 10px 8px 14px;
}

.progression-mission-ad-head {
  margin-bottom: 0;
  align-items: center;
}

.progression-mission-ad-meta {
  opacity: 0.82;
}

.mission-focus-shelf {
  border: 1px solid rgba(153, 225, 255, 0.22);
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(110% 130% at 2% -20%, rgba(111, 213, 255, 0.15), transparent 60%),
    rgba(255, 255, 255, 0.032);
}

.mission-focus-shelf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mission-focus-shelf-title {
  color: rgba(246, 252, 255, 0.95);
  font: 850 13px/1.25 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mission-focus-shelf-meta {
  margin-top: 3px;
  color: rgba(219, 235, 246, 0.74);
  font: 650 12px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.mission-focus-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mission-focus-path {
  min-width: 0;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(205, 237, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.mission-focus-path.is-accepted {
  border-color: rgba(134, 223, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(134, 223, 255, 0.08) inset;
}

.mission-focus-path.is-complete {
  border-color: rgba(255, 222, 150, 0.38);
  background:
    radial-gradient(100% 110% at 100% 0%, rgba(255, 222, 150, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.035);
}

.mission-focus-path-kicker,
.daily-focus-kicker {
  color: rgba(159, 224, 255, 0.88);
  font: 850 10px/1.1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mission-focus-path-title {
  margin-top: 4px;
  color: rgba(247, 252, 255, 0.95);
  font: 850 13px/1.2 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
}

.mission-focus-path-body {
  margin-top: 6px;
  color: rgba(219, 235, 246, 0.78);
  font: 650 12px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.mission-focus-path-meta {
  margin-top: 7px;
  color: rgba(255, 226, 161, 0.82);
  font: 800 10px/1.2 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mission-focus-path-btn,
.mission-support-btn {
  align-self: flex-start;
}

.mission-support-route {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 161, 0.2);
  background: rgba(255, 226, 161, 0.055);
}

.mission-support-title {
  color: rgba(250, 252, 255, 0.94);
  font: 850 12px/1.2 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
}

.mission-support-meta {
  margin-top: 3px;
  color: rgba(224, 236, 246, 0.72);
  font: 650 11px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

@property --mission-progress-deg {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

.mission-section {
  border: 1px solid rgba(155, 220, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(110% 120% at 4% -18%, rgba(104, 205, 255, 0.12), transparent 62%),
    rgba(255, 255, 255, 0.03);
  padding: 14px;
  overflow: hidden;
}

.mission-section-daily {
  --mission-grid-gap: 10px;
  --mission-daily-track-max: 188px;
  --mission-daily-grid-width: calc((var(--mission-daily-track-max) * 3) + (var(--mission-grid-gap) * 2));
  position: relative;
  border-color: rgba(135, 226, 255, 0.3);
  background:
    radial-gradient(120% 120% at 8% -18%, rgba(102, 205, 255, 0.18), transparent 64%),
    rgba(8, 16, 28, 0.76);
}

.mission-section-weekly {
  --mission-grid-gap: 10px;
  --mission-weekly-track: 224px;
  --mission-weekly-row-width: calc((224px * 5) + (10px * 4));
  position: relative;
  border-color: rgba(190, 222, 247, 0.2);
  background:
    radial-gradient(80% 100% at 92% -12%, rgba(255, 220, 126, 0.1), transparent 62%),
    radial-gradient(90% 115% at 4% -10%, rgba(166, 104, 255, 0.08), transparent 62%),
    rgba(255, 255, 255, 0.028);
}

.mission-section-weekly.mission-weekly-cols-1 {
  --mission-weekly-row-width: 224px;
}

.mission-section-weekly.mission-weekly-cols-2 {
  --mission-weekly-row-width: calc((224px * 2) + 10px);
}

.mission-section-weekly.mission-weekly-cols-3 {
  --mission-weekly-row-width: calc((224px * 3) + (10px * 2));
}

.mission-section-weekly.mission-weekly-cols-4 {
  --mission-weekly-row-width: calc((224px * 4) + (10px * 3));
}

.mission-section-weekly.mission-weekly-cols-5 {
  --mission-weekly-row-width: calc((224px * 5) + (10px * 4));
}

.mission-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  min-height: 24px;
}

.mission-section-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission-section-meta,
.mission-section-reset {
  opacity: 0.75;
}

.mission-daily-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 188px));
  width: min(100%, var(--mission-daily-grid-width));
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
  align-items: stretch;
  gap: var(--mission-grid-gap);
  overflow: visible;
}

.mission-weekly-grid {
  display: flex;
  flex-wrap: wrap;
  width: min(100%, var(--mission-weekly-row-width));
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
  gap: var(--mission-grid-gap);
  align-items: stretch;
}

.mission-daily-seal-row,
.mission-weekly-seal-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.mission-daily-seal-row {
  margin-top: 10px;
}

.mission-weekly-seal-row {
  margin-top: 0;
  margin-bottom: 10px;
}

.mission-seal-bar {
  width: min(100%, var(--mission-daily-grid-width, 531px));
  isolation: isolate;
  border: 1px solid rgba(255, 221, 145, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(95% 150% at 6% 0%, rgba(255, 225, 145, 0.14), transparent 58%),
    rgba(255, 255, 255, 0.032);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  padding: 9px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1);
}

.mission-seal-bar::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), rgba(127, 255, 218, 0.16) 32%, transparent 66%),
    linear-gradient(100deg, transparent 16%, rgba(255, 255, 255, 0.2) 46%, transparent 72%);
  transform: scale(0.24);
}

.mission-seal-bar-main {
  min-width: 0;
}

.mission-seal-bar-kicker {
  color: rgba(255, 228, 162, 0.82);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mission-seal-bar-title {
  margin-top: 1px;
  color: rgba(241, 249, 255, 0.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-seal-bar-track {
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 239, 192, 0.1);
}

.mission-seal-bar-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 225, 143, 0.98), rgba(111, 246, 197, 0.94));
  box-shadow: 0 0 14px rgba(255, 219, 142, 0.3);
  position: relative;
  overflow: hidden;
  transform: scaleX(var(--mission-progress, 0));
  transform-origin: left center;
  transition:
    transform 580ms cubic-bezier(.16,.84,.23,1),
    filter 220ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
  will-change: transform;
}

.mission-seal-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.74) 48%, transparent 74%);
  opacity: 0;
  transform: translateX(-110%);
}

.mission-seal-bar-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mission-seal-bar-progress {
  color: rgba(236, 246, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.mission-seal-bar-reward {
  padding: 3px 8px;
  font-size: 10px;
  white-space: nowrap;
}

.mission-seal-bar-actions {
  min-height: 0;
  justify-content: flex-end;
}

.mission-seal-bar-weekly {
  width: min(100%, var(--mission-weekly-row-width));
  border-color: rgba(255, 226, 150, 0.52);
  background:
    radial-gradient(110% 190% at 4% 0%, rgba(255, 225, 145, 0.22), transparent 60%),
    radial-gradient(115% 190% at 96% 0%, rgba(124, 223, 255, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.024));
  box-shadow:
    0 0 0 1px rgba(255, 240, 188, 0.08) inset,
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 30px rgba(255, 211, 118, 0.12);
  padding-block: 8px;
}

.mission-seal-bar-weekly::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 26px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 245, 180, 0.92), rgba(255, 211, 103, 0.38) 45%, transparent 68%);
  box-shadow:
    0 0 18px rgba(255, 218, 123, 0.24),
    0 0 24px rgba(111, 231, 255, 0.12);
  opacity: 0.66;
  z-index: 0;
}

.mission-seal-bar-weekly .mission-seal-bar-main {
  padding-left: 18px;
}

.mission-seal-bar-weekly .mission-seal-bar-track {
  height: 7px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.14);
}

.mission-seal-bar-weekly .mission-seal-bar-kicker {
  color: rgba(255, 232, 161, 0.98);
  text-shadow: 0 0 12px rgba(255, 222, 137, 0.22);
}

.mission-seal-bar-weekly .mission-seal-bar-fill {
  background: linear-gradient(90deg, rgba(255, 232, 148, 1), rgba(125, 247, 209, 0.98), rgba(109, 218, 255, 0.96));
  box-shadow:
    0 0 16px rgba(255, 222, 132, 0.34),
    0 0 22px rgba(111, 231, 255, 0.18);
}

.mission-seal-bar.is-claimable {
  border-color: rgba(255, 226, 154, 0.44);
  box-shadow: 0 0 24px rgba(255, 219, 142, 0.14), inset 0 0 0 1px rgba(255, 239, 192, 0.1);
}

.mission-seal-bar[data-mission-claim]:hover,
.mission-seal-bar[data-mission-claim]:focus-visible {
  border-color: rgba(255, 235, 169, 0.62);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.mission-seal-bar.is-claimable .mission-seal-bar-fill {
  animation: mission-seal-bar-ready 1.8s ease-in-out infinite;
}

.mission-seal-bar.is-claimed .mission-seal-bar-fill {
  background: linear-gradient(90deg, rgba(123, 240, 176, 0.96), rgba(153, 255, 213, 0.94));
}

.mission-seal-bar.is-progress-updated .mission-seal-bar-fill {
  animation: mission-seal-progress-update 620ms cubic-bezier(.16,.84,.23,1);
}

.mission-seal-bar.is-claiming {
  transform: scale(0.992);
  filter: brightness(0.96);
}

.mission-seal-bar.is-claim-collecting {
  animation: mission-seal-collect-card 760ms cubic-bezier(.16,.84,.23,1);
  border-color: rgba(255, 237, 168, 0.76);
  filter: brightness(1.08) saturate(1.06);
}

.mission-seal-bar.is-claim-collecting::after {
  animation: mission-collect-sheen 760ms cubic-bezier(.16,.84,.23,1);
}

.mission-seal-bar.is-claim-collecting .mission-seal-bar-fill {
  animation: mission-seal-bar-claim 760ms cubic-bezier(.16,.84,.23,1);
  filter: brightness(1.24) saturate(1.1);
}

.mission-seal-bar.is-claim-collecting .mission-seal-bar-fill::after {
  animation: mission-fill-spark-sweep 820ms cubic-bezier(.16,.84,.23,1);
}

.mission-seal-bar.is-claim-collecting .mission-seal-bar-reward {
  animation: mission-reward-chip-settle 620ms cubic-bezier(.16,.84,.23,1);
}

.mission-seal-bar.is-claim-settling {
  border-color: rgba(128, 244, 184, 0.58);
  filter: brightness(1.02);
}

.mission-seal-bar.is-claim-settling .mission-seal-bar-fill {
  background: linear-gradient(90deg, rgba(123, 240, 176, 0.96), rgba(153, 255, 213, 0.94));
}

.mission-card {
  box-sizing: border-box;
  position: relative;
  transition:
    opacity 180ms ease,
    transform 190ms cubic-bezier(.2,.8,.2,1),
    filter 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  will-change: transform;
}

.mission-card[data-mission-claim] {
  z-index: 1;
}

.mission-orb {
  --mission-ring-fill: rgba(101, 218, 255, 0.95);
  --mission-ring-fill-2: rgba(111, 246, 197, 0.92);
  --mission-ring-empty: rgba(255, 255, 255, 0.09);
  --mission-ring-core: rgba(8, 16, 28, 0.94);
  --mission-ring-size: 136px;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(195, 236, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(100% 90% at 50% 4%, rgba(105, 205, 255, 0.13), transparent 66%),
    rgba(255, 255, 255, 0.028);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  padding: 9px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  text-align: center;
  overflow: hidden;
  transform-origin: center center;
}

.mission-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.38), rgba(130, 244, 255, 0.16) 24%, transparent 58%);
  transform: scale(0.18);
  z-index: 0;
}

.mission-orb-daily {
  --mission-ring-size: 144px;
  width: 100%;
  min-width: 176px;
  max-width: 188px;
  min-height: 232px;
}

.mission-orb-weekly {
  --mission-weekly-accent: rgba(104, 217, 255, 0.9);
  --mission-weekly-accent-2: rgba(122, 246, 199, 0.86);
  --mission-weekly-warm: rgba(255, 214, 121, 0.12);
  --mission-ring-size: 152px;
  --mission-ring-fill: var(--mission-weekly-accent);
  --mission-ring-fill-2: var(--mission-weekly-accent-2);
  width: min(100%, 224px);
  flex: 0 0 min(100%, 224px);
  justify-self: center;
  min-height: 246px;
  border-color: color-mix(in srgb, var(--mission-weekly-accent) 32%, rgba(195, 236, 255, 0.16));
  background:
    radial-gradient(90% 85% at 50% 0%, color-mix(in srgb, var(--mission-weekly-accent) 18%, transparent), transparent 66%),
    radial-gradient(80% 90% at 92% 6%, var(--mission-weekly-warm), transparent 62%),
    rgba(255, 255, 255, 0.03);
}

.mission-weekly-grid .mission-orb-weekly:nth-child(5n + 1) {
  --mission-weekly-accent: rgba(92, 217, 255, 0.96);
  --mission-weekly-accent-2: rgba(119, 246, 203, 0.9);
  --mission-weekly-warm: rgba(255, 224, 139, 0.12);
}

.mission-weekly-grid .mission-orb-weekly:nth-child(5n + 2) {
  --mission-weekly-accent: rgba(167, 126, 255, 0.92);
  --mission-weekly-accent-2: rgba(105, 226, 255, 0.9);
  --mission-weekly-warm: rgba(255, 177, 235, 0.1);
}

.mission-weekly-grid .mission-orb-weekly:nth-child(5n + 3) {
  --mission-weekly-accent: rgba(255, 197, 111, 0.92);
  --mission-weekly-accent-2: rgba(126, 246, 198, 0.88);
  --mission-weekly-warm: rgba(255, 229, 135, 0.13);
}

.mission-weekly-grid .mission-orb-weekly:nth-child(5n + 4) {
  --mission-weekly-accent: rgba(255, 126, 168, 0.88);
  --mission-weekly-accent-2: rgba(255, 215, 121, 0.9);
  --mission-weekly-warm: rgba(255, 159, 183, 0.1);
}

.mission-weekly-grid .mission-orb-weekly:nth-child(5n) {
  --mission-weekly-accent: rgba(116, 236, 170, 0.92);
  --mission-weekly-accent-2: rgba(107, 213, 255, 0.9);
  --mission-weekly-warm: rgba(179, 255, 172, 0.1);
}

.mission-orb[data-mission-category="capture"] {
  --mission-weekly-accent: rgba(92, 225, 255, 0.96);
  --mission-weekly-accent-2: rgba(112, 250, 198, 0.9);
  --mission-weekly-warm: rgba(148, 255, 211, 0.1);
}

.mission-orb[data-mission-category="survival"] {
  --mission-weekly-accent: rgba(255, 210, 112, 0.94);
  --mission-weekly-accent-2: rgba(255, 129, 165, 0.88);
  --mission-weekly-warm: rgba(255, 220, 126, 0.15);
}

.mission-orb[data-mission-category="score"] {
  --mission-weekly-accent: rgba(166, 126, 255, 0.94);
  --mission-weekly-accent-2: rgba(96, 224, 255, 0.9);
  --mission-weekly-warm: rgba(184, 142, 255, 0.12);
}

.mission-orb[data-mission-category="drops"] {
  --mission-weekly-accent: rgba(113, 238, 179, 0.94);
  --mission-weekly-accent-2: rgba(120, 213, 255, 0.9);
  --mission-weekly-warm: rgba(165, 255, 187, 0.12);
}

.mission-orb[data-mission-category="chests"],
.mission-orb[data-mission-category="collection"] {
  --mission-weekly-accent: rgba(255, 224, 128, 0.96);
  --mission-weekly-accent-2: rgba(128, 240, 255, 0.9);
  --mission-weekly-warm: rgba(255, 224, 128, 0.17);
}

.mission-orb[data-mission-category="shop"] {
  --mission-weekly-accent: rgba(255, 141, 203, 0.9);
  --mission-weekly-accent-2: rgba(255, 217, 126, 0.9);
  --mission-weekly-warm: rgba(255, 156, 210, 0.12);
}

.mission-orb-ring {
  width: var(--mission-ring-size);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 8px;
  position: relative;
  background:
    conic-gradient(from -90deg, var(--mission-ring-fill) 0deg, var(--mission-ring-fill-2) var(--mission-progress-deg), var(--mission-ring-empty) var(--mission-progress-deg), var(--mission-ring-empty) 360deg);
  box-shadow: 0 0 26px rgba(88, 214, 255, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.05);
  transition:
    --mission-progress-deg 580ms cubic-bezier(.16,.84,.23,1),
    transform 190ms cubic-bezier(.2,.8,.2,1),
    filter 180ms ease,
    box-shadow 180ms ease;
}

.mission-orb-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.08), transparent 42%),
    var(--mission-ring-core);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
}

.mission-orb-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(143, 255, 201, 0.18);
  font-size: 0;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 180ms ease, transform 180ms ease;
}

.mission-orb-check::before {
  content: '\2713';
  font-size: 58px;
}

.mission-orb-progress {
  z-index: 1;
  max-width: calc(var(--mission-ring-size) - 42px);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(247, 252, 255, 0.96);
}

.mission-orb-state {
  z-index: 1;
  color: rgba(207, 228, 247, 0.68);
  max-width: 92%;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mission-orb-title {
  width: 100%;
  min-height: 24px;
  color: rgba(235, 246, 255, 0.9);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mission-orb-reward {
  justify-content: center;
  max-width: 100% !important;
  padding: 3px 8px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-orb-actions {
  justify-content: center;
  min-height: 28px;
}

.mission-card[data-mission-claim] {
  cursor: pointer;
}

.mission-card[data-mission-claim]:hover {
  border-color: rgba(143, 241, 255, 0.64);
  transform: translateY(-2px);
  z-index: 3;
}

.mission-card.is-claimable[data-mission-claim]:hover {
  transform: translateY(-3px) scale(1.018);
}

.mission-card[data-mission-claim]:focus-visible {
  outline: 2px solid rgba(146, 246, 255, 0.9);
  outline-offset: 4px;
}

.mission-card[data-mission-claim]:active {
  transform: translateY(0) scale(0.988);
}

.mission-card.is-claimable[data-mission-claim]:active {
  transform: translateY(0) scale(1.004);
}

.mission-card[data-mission-claim]:hover .mission-orb-ring {
  filter: brightness(1.1) saturate(1.04);
  transform: translateY(-1px) scale(1.012);
  box-shadow:
    0 0 34px rgba(88, 214, 255, 0.24),
    inset 0 0 18px rgba(255, 255, 255, 0.07);
}

.mission-orb:not([data-mission-claim]):hover .mission-orb-ring {
  filter: brightness(1.045);
}

.mission-card.is-progress {
  filter: saturate(0.92);
}

.mission-card.is-claimable {
  --mission-ring-fill: rgba(141, 247, 255, 1);
  --mission-ring-fill-2: rgba(132, 255, 204, 1);
  border-color: rgba(135, 237, 255, 0.48);
  box-shadow: 0 0 30px rgba(96, 223, 255, 0.2), inset 0 0 0 1px rgba(184, 245, 255, 0.12);
}

.mission-card.is-focus-target {
  border-color: rgba(137, 228, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(137, 228, 255, 0.08) inset,
    0 0 22px rgba(110, 215, 255, 0.1);
}

.mission-focus-badge {
  width: fit-content;
  max-width: 100%;
  margin: -2px auto 0;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(137, 228, 255, 0.24);
  color: rgba(177, 232, 255, 0.9);
  background: rgba(137, 228, 255, 0.08);
  font: 850 9px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-card.is-focus-target .mission-orb-ring {
  box-shadow:
    0 0 0 1px rgba(145, 226, 255, 0.14) inset,
    0 0 20px rgba(111, 213, 255, 0.14);
}

.mission-card.is-focus-target.is-claimed .mission-focus-badge {
  color: rgba(255, 226, 161, 0.92);
  border-color: rgba(255, 226, 161, 0.26);
  background: rgba(255, 226, 161, 0.08);
}

.mission-seal-bar-weekly.is-claimable {
  border-color: rgba(255, 230, 151, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 244, 190, 0.16) inset,
    0 16px 34px rgba(0, 0, 0, 0.2),
    0 0 34px rgba(255, 218, 125, 0.22),
    0 0 26px rgba(110, 231, 255, 0.12);
}

.mission-seal-bar-weekly.is-claimable .mission-seal-bar-reward {
  border-color: rgba(255, 235, 168, 0.58);
  background: linear-gradient(180deg, rgba(255, 239, 177, 0.2), rgba(111, 221, 255, 0.1));
}

.mission-card.is-claimable .mission-orb-ring {
  animation: claimable-pulse-mission 1.7s ease-in-out infinite;
}

.mission-card.is-claimable .mission-orb-state::after {
  content: ' to claim';
}

.mission-card.is-claimed {
  --mission-ring-fill: rgba(123, 240, 176, 0.96);
  --mission-ring-fill-2: rgba(153, 255, 213, 0.94);
  border-color: rgba(109, 232, 169, 0.4);
}

.mission-card.is-claimed .mission-orb-check {
  opacity: 1;
  transform: scale(1);
}

.mission-card.is-claimed .mission-orb-reward {
  animation: mission-reward-chip-settle 520ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claiming {
  opacity: 0.9;
  transform: scale(0.992);
  filter: brightness(0.96);
}

.mission-card.is-claiming .mission-orb-ring {
  transform: scale(0.965);
  filter: brightness(0.96);
}

.mission-card.is-claiming .mission-orb-actions,
.mission-card.is-claiming .mission-orb-reward {
  opacity: 0.72;
}

.mission-card.is-progress-updated .mission-orb-ring {
  animation: mission-orb-progress-update 640ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claim-collecting {
  animation: mission-claim-card-collect 940ms cubic-bezier(.16,.84,.23,1);
  border-color: rgba(150, 249, 255, 0.74);
  filter: brightness(1.08) saturate(1.06);
}

.mission-orb.is-claim-collecting::before {
  animation: mission-claim-wave 880ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claim-collecting .mission-orb-ring {
  animation: mission-claim-ring-settle 940ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claim-collecting .mission-orb-core::after {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(127, 255, 213, 0.12) 42%, transparent 68%);
  opacity: 0;
  animation: mission-core-bloom 860ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claim-collecting .mission-orb-core::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, 0.36) 48%, transparent 74%);
  opacity: 0;
  transform: translateX(-120%) rotate(18deg);
  animation: mission-core-sheen 760ms cubic-bezier(.16,.84,.23,1);
  pointer-events: none;
}

.mission-card.is-claim-collecting .mission-orb-reward {
  animation: mission-reward-chip-settle 620ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claim-settling {
  --mission-ring-fill: rgba(123, 240, 176, 0.96);
  --mission-ring-fill-2: rgba(153, 255, 213, 0.94);
  border-color: rgba(109, 232, 169, 0.52);
  filter: brightness(1.02);
}

.mission-card.is-claim-settling .mission-orb-check {
  opacity: 1;
  transform: scale(1);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.16,.84,.23,1);
}

.mission-card.is-claim-settling .mission-orb-state {
  color: rgba(152, 247, 199, 0.88);
}

.mission-card.is-claim-settling .mission-orb-state::after {
  content: '';
}

.mission-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mission-action-btn {
  min-width: 0;
  min-height: 30px;
  padding: 6px 10px;
  text-align: center;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
}

.mission-action-btn-reroll {
  border-style: dashed;
  border-color: rgba(172, 214, 255, 0.54);
  background: linear-gradient(180deg, rgba(115, 161, 207, 0.42), rgba(32, 56, 86, 0.78));
  color: rgba(236, 245, 255, 0.96);
}

.progression-hub-achievement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.progression-achievement-feedback {
  min-height: 16px;
  margin-bottom: 8px;
  opacity: 0.94;
}

.progression-achievement-feedback[data-tone="positive"] {
  color: #8ef0bf;
}

.progression-achievement-feedback[data-tone="warning"] {
  color: #ffd59a;
}

.achievement-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.achievement-card {
  border: 1px solid rgba(190, 238, 212, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 8% -22%, rgba(156, 235, 198, 0.14), transparent 66%),
    radial-gradient(110% 100% at 96% 4%, rgba(255, 217, 154, 0.14), transparent 58%),
    linear-gradient(170deg, rgba(35, 58, 78, 0.2), rgba(18, 30, 46, 0.22) 45%, rgba(255, 255, 255, 0.03));
  padding: 14px 14px 13px;
  transition: border-color 160ms ease, background 160ms ease, transform 150ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 12px 28px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.achievement-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 239, 198, 0.12), rgba(255, 255, 255, 0) 44%);
  opacity: 0.8;
}

.achievement-card.is-locked {
  border-color: rgba(164, 196, 225, 0.24);
  background:
    radial-gradient(120% 120% at 8% -22%, rgba(132, 184, 214, 0.08), transparent 66%),
    linear-gradient(170deg, rgba(24, 34, 46, 0.46), rgba(12, 20, 33, 0.52));
}

.achievement-card.is-claimable {
  border-color: rgba(255, 222, 164, 0.84);
  background:
    radial-gradient(120% 120% at 8% -22%, rgba(127, 211, 255, 0.24), transparent 66%),
    radial-gradient(120% 120% at 95% 6%, rgba(255, 225, 156, 0.28), transparent 56%),
    linear-gradient(170deg, rgba(122, 208, 255, 0.2), rgba(255, 225, 156, 0.16) 56%, rgba(255, 255, 255, 0.03));
  box-shadow:
    0 0 22px rgba(127, 211, 255, 0.22),
    0 0 24px rgba(255, 210, 136, 0.26),
    0 0 0 1px rgba(255, 234, 188, 0.22) inset;
  animation: claimable-pulse-achievement 1.7s ease-in-out infinite;
}

.achievement-card.is-claimed {
  border-color: rgba(109, 232, 169, 0.6);
  background:
    radial-gradient(120% 120% at 8% -22%, rgba(109, 232, 169, 0.22), transparent 66%),
    rgba(109, 232, 169, 0.09);
}

.achievement-card.is-claiming {
  opacity: 0.82;
  transform: scale(0.995);
}

.achievement-card.is-claim-flash {
  animation: achievement-claim-flash 180ms ease-out;
}

.achievement-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.achievement-card-title {
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.achievement-card-glyph {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(155, 233, 198, 0.5);
  background: radial-gradient(120% 120% at 25% 20%, rgba(155, 233, 198, 0.34), rgba(155, 233, 198, 0.08));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.achievement-card-flame {
  width: 17px;
  height: 17px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 158, 72, 0.5));
}

.achievement-card-glyph .achievement-state-icon {
  width: 16px;
  height: 16px;
}

.achievement-card-state {
  font-size: 11px;
  opacity: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(220, 241, 255, 0.96);
}

.achievement-card.is-locked .achievement-card-state {
  color: rgba(193, 216, 239, 0.72);
}

.achievement-card.is-claimable .achievement-card-state {
  color: rgba(255, 236, 199, 0.98);
  text-shadow: 0 0 12px rgba(255, 203, 121, 0.44);
}

.achievement-card.is-claimed .achievement-card-state {
  color: rgba(197, 255, 220, 0.98);
}

.achievement-card-description {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(224, 237, 255, 0.84);
}

.achievement-card-progress {
  margin-top: 8px;
}

.achievement-progress-track {
  margin-top: 0;
  height: 8px;
}

.achievement-progress-fill {
  box-shadow: 0 0 10px rgba(87, 199, 255, 0.3);
}

.achievement-progress-meta {
  margin-top: 7px;
  opacity: 0.9;
  font-size: 11px;
}

.achievement-card-footer {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.achievement-claim-btn {
  min-width: 96px;
  min-height: 38px;
  padding-inline: 14px;
  text-align: center;
  border-radius: 999px;
  letter-spacing: 0.05em;
  font-weight: 800;
}

.achievement-claim-btn-live {
  border-color: rgba(153, 236, 199, 0.52);
  background: linear-gradient(180deg, rgba(190, 248, 212, 0.98), rgba(136, 231, 179, 0.96));
  color: #072318;
  text-shadow: none;
  box-shadow: 0 10px 22px rgba(60, 145, 106, 0.3);
}

.achievement-card.is-claimable .achievement-claim-btn-live:not(:disabled) {
  border-color: rgba(255, 226, 164, 0.86);
  background: linear-gradient(180deg, rgba(255, 241, 199, 0.98), rgba(255, 210, 131, 0.95));
  color: #2b1700;
  box-shadow:
    0 0 0 1px rgba(255, 241, 206, 0.26) inset,
    0 0 22px rgba(255, 204, 122, 0.45),
    0 12px 24px rgba(159, 104, 45, 0.32);
}

.achievement-card.is-locked .achievement-claim-btn-live:disabled {
  border-color: rgba(154, 188, 218, 0.28);
  background: linear-gradient(180deg, rgba(66, 89, 115, 0.56), rgba(20, 34, 52, 0.78));
  color: rgba(212, 227, 243, 0.78);
  opacity: 1;
}

.achievement-card.is-claimed .achievement-claim-btn-live:disabled {
  border-color: rgba(136, 237, 192, 0.58);
  background: linear-gradient(180deg, rgba(120, 228, 177, 0.5), rgba(68, 156, 117, 0.46));
  color: rgba(228, 255, 240, 0.96);
  opacity: 1;
}

.progression-hub-chests {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chest-summary-card,
.chest-history-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}

.season-pass-panel {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.season-pass-loading {
  height: 100%;
  display: grid;
  place-items: center;
  gap: 12px;
  color: rgba(239, 250, 255, 0.92);
  font: 900 18px/1.2 var(--hud-font-display);
}

.season-pass-loading img {
  width: min(34vw, 160px);
  height: min(34vw, 160px);
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(126, 221, 255, 0.42));
}

.season-pass-stage {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 0.8fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(218, 238, 255, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(255, 213, 126, 0.13), rgba(102, 216, 255, 0.11) 54%, rgba(132, 238, 179, 0.11)),
    rgba(6, 13, 22, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 38px rgba(0, 0, 0, 0.18);
}

.season-pass-stage-mascot {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: end center;
  border-radius: 14px;
  border: 1px solid rgba(255, 223, 151, 0.22);
  background:
    linear-gradient(180deg, rgba(21, 55, 62, 0.66), rgba(38, 24, 49, 0.42)),
    rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.season-pass-stage-mascot img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  transform: translateY(5px);
  filter:
    drop-shadow(0 14px 16px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 18px rgba(255, 222, 146, 0.22));
}

.season-pass-stage-copy {
  min-width: 0;
}

.season-pass-kicker {
  color: rgba(255, 224, 168, 0.9);
  font: 900 11px/1 var(--hud-font-body);
  letter-spacing: 0;
  text-transform: uppercase;
}

.season-pass-title {
  margin-top: 3px;
  color: #fff;
  font: 900 clamp(24px, 3.1vw, 42px)/0.98 var(--hud-font-display);
  letter-spacing: 0;
}

.season-pass-meta {
  margin-top: 5px;
  color: rgba(224, 242, 250, 0.78);
  font: 750 12px/1.3 var(--hud-font-body);
}

.season-pass-xp-card {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(132, 231, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(30, 58, 72, 0.62), rgba(12, 24, 34, 0.46)),
    rgba(255, 255, 255, 0.04);
}

.season-pass-xp-top,
.season-pass-xp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.season-pass-xp-top {
  color: rgba(242, 251, 255, 0.96);
  font: 900 13px/1.15 var(--hud-font-body);
}

.season-pass-xp-top strong {
  color: rgba(255, 224, 168, 0.98);
  font: 950 18px/1 var(--hud-font-display);
}

.season-pass-xp-track {
  position: relative;
  height: 14px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(204, 235, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}

.season-pass-xp-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(116, 224, 255, 0.96), rgba(255, 215, 121, 0.98), rgba(149, 241, 184, 0.94));
  box-shadow: 0 0 18px rgba(255, 214, 138, 0.34);
  transition: width 420ms var(--hud-ease);
}

.season-pass-xp-meta {
  margin-top: 7px;
  color: rgba(223, 238, 248, 0.74);
  font: 800 11px/1.2 var(--hud-font-body);
}

.season-pass-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.season-pass-actions .ui-btn {
  min-height: 38px;
  border-radius: 999px;
  padding-inline: 14px;
}

.season-pass-runway-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.season-pass-panel.is-entering .season-pass-runway-shell {
  pointer-events: none;
}

.season-pass-runway-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.season-pass-arrow {
  width: 44px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  font: 950 18px/1 var(--hud-font-display);
}

.season-pass-arrow.is-pressed,
.season-pass-arrow:active {
  transform: translateY(1px) scale(0.97);
  filter: brightness(1.12) saturate(1.08);
}

.season-pass-runway-spacer {
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(126, 221, 255, 0.24), rgba(255, 220, 142, 0.32), transparent);
}

.season-pass-runway {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  padding: 4px 20px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 217, 136, 0.58) rgba(255, 255, 255, 0.08);
}

.season-pass-virtual-spacer {
  flex: 0 0 auto;
  min-width: 1px;
  height: 100%;
  pointer-events: none;
  scroll-snap-align: none;
  opacity: 0.42;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 9px,
      rgba(126, 221, 255, 0.12) 10px,
      rgba(126, 221, 255, 0.12) calc(var(--season-spacer-card, 396px) - 28px),
      transparent calc(var(--season-spacer-card, 396px) - 27px),
      transparent var(--season-spacer-card, 396px)
    );
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.season-pass-runway::-webkit-scrollbar {
  height: 10px;
}

.season-pass-runway::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.season-pass-runway::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120, 220, 255, 0.82), rgba(255, 217, 136, 0.9));
}

.season-pass-runway.is-scrolling .season-pass-checkpoint-card,
.season-pass-runway.is-scrolling .season-pass-checkpoint-card * {
  pointer-events: none;
}

.season-pass-checkpoint-card,
.season-pass-lane-pair,
.season-pass-reward-lane,
.season-pass-visual,
.season-pass-check-overlay,
.season-pass-reward-copy {
  pointer-events: none;
}

.season-pass-reward-action,
.season-pass-reward-action * {
  pointer-events: auto;
}

.season-pass-checkpoint-card {
  flex: 0 0 clamp(326px, 30.5vw, 414px);
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 414px 520px;
  scroll-snap-align: center;
  display: block;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(223, 239, 255, 0.17);
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 221, 255, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(24, 40, 55, 0.72), rgba(10, 18, 29, 0.88)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0.78;
}

.season-pass-checkpoint-card.is-reached,
.season-pass-checkpoint-card.is-current {
  opacity: 1;
}

.season-pass-checkpoint-card.is-current {
  border-color: rgba(126, 221, 255, 0.48);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(126, 221, 255, 0.12) inset,
    0 0 34px rgba(126, 221, 255, 0.18);
}

.season-pass-checkpoint-card.is-better {
  border-color: rgba(145, 240, 188, 0.34);
}

.season-pass-checkpoint-card.is-major {
  border-color: rgba(169, 131, 255, 0.46);
}

.season-pass-checkpoint-card.is-finale {
  border-color: rgba(255, 224, 142, 0.62);
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 224, 142, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(72, 42, 84, 0.8), rgba(38, 25, 22, 0.9)),
    rgba(255, 255, 255, 0.05);
}

.season-pass-check-head {
  display: none;
}

.season-pass-check-overlay {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  max-width: calc(100% - 76px);
  pointer-events: none;
}

.season-pass-check-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 238, 191, 0.34), rgba(255, 255, 255, 0.08)),
    rgba(3, 10, 18, 0.58);
  color: #fff;
  font: 950 16px/1 var(--hud-font-display);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.season-pass-check-xp {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(224, 241, 255, 0.18);
  background: rgba(3, 10, 18, 0.54);
  color: rgba(238, 250, 255, 0.9);
  font: 950 11px/1 var(--hud-font-body);
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.season-pass-lane-pair {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.season-pass-lane-pair::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(50% - 1px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 168, 0.28), transparent);
  pointer-events: none;
}

.season-pass-reward-lane {
  position: relative;
  min-height: 0;
  box-sizing: border-box;
  contain: layout paint style;
  display: block;
  isolation: isolate;
  border-radius: 15px;
  border: 1px solid rgba(207, 236, 255, 0.14);
  background:
    radial-gradient(circle at 76% 22%, rgba(126, 221, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03)),
    rgba(8, 18, 30, 0.46);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.season-pass-reward-lane::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 8, 15, 0.72) 0%, rgba(2, 8, 15, 0.46) 22%, rgba(2, 8, 15, 0.04) 52%, rgba(2, 8, 15, 0.22) 100%),
    linear-gradient(0deg, rgba(2, 8, 15, 0.78) 0%, rgba(2, 8, 15, 0.42) 28%, rgba(2, 8, 15, 0.04) 58%),
    linear-gradient(180deg, rgba(2, 8, 15, 0.58) 0%, transparent 34%);
}

.season-pass-reward-lane::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.62;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.14), transparent 28%, transparent 72%, rgba(126, 221, 255, 0.1)),
    radial-gradient(circle at 88% 16%, rgba(126, 221, 255, 0.2), transparent 30%);
}

.season-pass-reward-lane.is-club {
  border-color: rgba(255, 215, 137, 0.5);
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 222, 142, 0.28), transparent 35%),
    linear-gradient(180deg, rgba(255, 215, 137, 0.16), rgba(255, 255, 255, 0.025)),
    rgba(13, 16, 30, 0.54);
  box-shadow:
    0 0 28px rgba(255, 213, 125, 0.16),
    0 14px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 209, 0.22);
}

.season-pass-reward-lane.is-club::after {
  opacity: 0.82;
  background:
    linear-gradient(118deg, rgba(255, 249, 221, 0.24), transparent 24%, transparent 64%, rgba(255, 206, 99, 0.16)),
    radial-gradient(circle at 86% 18%, rgba(255, 224, 142, 0.36), transparent 32%),
    repeating-linear-gradient(135deg, rgba(255, 227, 153, 0.08) 0 2px, transparent 2px 9px);
}

.season-pass-reward-lane.is-ready {
  border-color: rgba(142, 240, 191, 0.58);
  box-shadow:
    0 0 26px rgba(142, 240, 191, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.season-pass-reward-lane.is-claimed {
  opacity: 0.68;
  filter: saturate(0.75);
}

.season-pass-reward-lane.is-uncommon {
  --season-rarity: 126, 221, 255;
}

.season-pass-reward-lane.is-rare {
  --season-rarity: 134, 241, 186;
}

.season-pass-reward-lane.is-epic {
  --season-rarity: 184, 128, 255;
}

.season-pass-reward-lane.is-legendary {
  --season-rarity: 255, 219, 121;
}

.season-pass-reward-lane.is-rare,
.season-pass-reward-lane.is-epic,
.season-pass-reward-lane.is-legendary {
  border-color: rgba(var(--season-rarity), 0.48);
  box-shadow:
    0 0 24px rgba(var(--season-rarity), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.season-pass-lane-chip {
  position: absolute;
  z-index: 6;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 42px;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 8px 0;
  border-radius: 999px;
  border: 1px solid rgba(154, 229, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(79, 184, 226, 0.3), rgba(4, 18, 30, 0.72)),
    rgba(6, 14, 22, 0.58);
  color: rgba(242, 250, 255, 0.94);
  font: 950 10px/1 var(--hud-font-body);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.season-pass-reward-lane.is-club .season-pass-lane-chip {
  border-color: rgba(255, 220, 136, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 221, 137, 0.56), rgba(97, 56, 12, 0.74)),
    rgba(26, 16, 8, 0.72);
  color: rgba(255, 246, 216, 0.98);
  box-shadow:
    0 0 22px rgba(255, 219, 121, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.season-pass-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: inherit;
  border: 0;
  background:
    radial-gradient(circle at 68% 28%, rgba(255, 218, 123, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(36, 72, 88, 0.58), rgba(72, 34, 82, 0.34) 48%, rgba(86, 65, 28, 0.42)),
    rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.season-pass-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 34%, rgba(255, 236, 180, 0.18), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 38%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
}

.season-pass-visual.is-coins {
  background:
    radial-gradient(circle at 58% 42%, rgba(255, 231, 142, 0.52), transparent 33%),
    radial-gradient(circle at 70% 70%, rgba(255, 145, 75, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(88, 52, 12, 0.72), rgba(18, 62, 78, 0.44) 58%, rgba(29, 17, 42, 0.62));
}

.season-pass-visual.is-loot-drop {
  background:
    radial-gradient(circle at 58% 42%, rgba(126, 221, 255, 0.44), transparent 34%),
    radial-gradient(circle at 42% 72%, rgba(184, 128, 255, 0.26), transparent 38%),
    linear-gradient(145deg, rgba(20, 54, 74, 0.76), rgba(50, 31, 84, 0.66));
}

.season-pass-visual.is-season-bundle,
.season-pass-reward-lane.is-legendary .season-pass-visual {
  background:
    radial-gradient(circle at 62% 32%, rgba(255, 231, 147, 0.48), transparent 34%),
    radial-gradient(circle at 35% 76%, rgba(255, 112, 202, 0.24), transparent 36%),
    linear-gradient(145deg, rgba(84, 44, 82, 0.76), rgba(88, 56, 16, 0.68));
}

.season-pass-visual.is-lantern-style,
.season-pass-visual.is-ring-style,
.season-pass-visual.is-soundscape,
.season-pass-visual.is-turtle-scene-item,
.season-pass-visual.is-postcard,
.season-pass-visual.is-memory-fragment,
.season-pass-visual.is-mode-key-fragment,
.season-pass-visual.is-constellation,
.season-pass-visual.is-badge,
.season-pass-visual.is-title,
.season-pass-visual.is-trial-ticket,
.season-pass-visual.is-week-pass,
.season-pass-visual.is-variant-unlock {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 224, 154, 0.22), transparent 32%),
    radial-gradient(circle at 28% 70%, rgba(126, 221, 255, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(22, 68, 88, 0.66), rgba(68, 38, 102, 0.5) 54%, rgba(74, 52, 22, 0.5));
}

.season-pass-reward-lane.is-club .season-pass-visual {
  filter: saturate(1.08) brightness(1.04);
}

.season-pass-coin-pile {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.season-pass-coin-pile::before {
  content: '';
  position: absolute;
  inset: 6% -2% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 132, 0.56), rgba(255, 185, 79, 0.18) 46%, transparent 68%);
  filter: blur(10px);
}

.season-pass-coin-pile::after {
  content: '';
  position: absolute;
  inset: 5% 0 2%;
  opacity: 0.52;
  background:
    conic-gradient(from 10deg, transparent 0 10deg, rgba(255, 231, 145, 0.2) 12deg 19deg, transparent 21deg 48deg);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), transparent 68%);
}

.season-pass-coin-pile.is-large::after,
.season-pass-coin-pile.is-huge::after,
.season-pass-coin-pile.is-jackpot::after {
  opacity: 0.78;
}

.season-pass-coin-img {
  position: absolute;
  left: calc(var(--coin-x, 50) * 1%);
  top: calc(var(--coin-y, 55) * 1%);
  z-index: var(--coin-z, 1);
  width: clamp(52px, 20%, 92px);
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--coin-r, 0deg)) scale(var(--coin-s, 1));
  filter:
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 10px rgba(255, 217, 116, 0.16));
}

.season-pass-coin-pile.is-huge .season-pass-coin-img,
.season-pass-coin-pile.is-jackpot .season-pass-coin-img {
  width: clamp(56px, 21%, 100px);
}

.season-pass-drop-aura {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 999px;
  background:
    conic-gradient(from 25deg, transparent 0 10deg, rgba(126, 221, 255, 0.24) 12deg 20deg, transparent 22deg 52deg),
    radial-gradient(circle, rgba(126, 221, 255, 0.5), rgba(184, 128, 255, 0.14) 54%, transparent 72%);
  filter: blur(1px);
  transform: rotate(-8deg);
}

.season-pass-drop-img,
.season-pass-turtle-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  z-index: 1;
  filter:
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 28px rgba(126, 221, 255, 0.28));
}

.season-pass-turtle-img {
  transform: translate(8px, 13px) scale(1.15);
}

.season-pass-costume-spark {
  position: absolute;
  top: 22%;
  right: 22%;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255, 222, 146, 0.84);
  box-shadow: 0 0 18px rgba(255, 222, 146, 0.42);
}

.season-pass-amount {
  position: absolute;
  z-index: 5;
  right: 12px;
  top: 50px;
  min-width: 48px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 231, 153, 0.22), rgba(255, 255, 255, 0.04)),
    rgba(5, 13, 22, 0.72);
  color: #fff;
  font: 950 18px/1 var(--hud-font-display);
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

.season-pass-shop-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.season-pass-shop-canvas.is-ready {
  display: block;
}

.season-pass-visual.is-thumb-ready > .season-pass-css-icon,
.season-pass-visual.is-thumb-ready > .season-pass-wheel-art,
.season-pass-visual.is-thumb-ready > .season-pass-scratch-art,
.season-pass-visual.is-thumb-ready > .season-pass-bundle-art,
.season-pass-visual.is-thumb-ready > .season-pass-lantern-art,
.season-pass-visual.is-thumb-ready > .season-pass-ring-art,
.season-pass-visual.is-thumb-ready > .season-pass-sound-bars,
.season-pass-visual.is-thumb-ready > .season-pass-postcard-art,
.season-pass-visual.is-thumb-ready > .season-pass-stars-art,
.season-pass-visual.is-thumb-ready > .season-pass-badge-art,
.season-pass-visual.is-thumb-ready > .season-pass-portal-art {
  opacity: 0;
}

.season-pass-atlas-preview {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  border-radius: inherit;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter:
    saturate(1.14)
    contrast(1.06)
    brightness(1.04);
}

.season-pass-art-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 70% 28%, rgba(255, 224, 154, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(126, 221, 255, 0.26), rgba(184, 128, 255, 0.28) 50%, rgba(255, 219, 121, 0.22));
  color: rgba(247, 252, 255, 0.95);
  font: 950 22px/1 var(--hud-font-display);
  text-align: center;
}

.season-pass-art-fallback span {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(4, 12, 20, 0.46);
  color: rgba(247, 252, 255, 0.94);
  font: 950 12px/1 var(--hud-font-body);
  text-transform: uppercase;
}

.season-pass-visual.is-thumb-ready .season-pass-art-fallback {
  opacity: 0;
}

.season-pass-visual.has-atlas-preview .season-pass-art-fallback {
  opacity: 0;
}

.season-pass-visual.is-background .season-pass-art-fallback,
.season-pass-visual[data-thumb-item^="bg_"] .season-pass-art-fallback {
  background:
    linear-gradient(135deg, rgba(21, 80, 102, 0.62), rgba(112, 43, 136, 0.5) 48%, rgba(232, 172, 75, 0.42)),
    linear-gradient(0deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

.season-pass-visual.is-background .season-pass-art-fallback::after,
.season-pass-visual[data-thumb-item^="bg_"] .season-pass-art-fallback::after {
  content: '';
  width: 148px;
  height: 92px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(165deg, rgba(255, 229, 153, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(125, 224, 255, 0.7), rgba(184, 128, 255, 0.62) 52%, rgba(255, 220, 124, 0.52));
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.26);
}

.season-pass-visual.is-lens .season-pass-art-fallback {
  background:
    linear-gradient(135deg, rgba(30, 78, 98, 0.72), rgba(70, 38, 102, 0.62) 54%, rgba(20, 32, 52, 0.76));
}

.season-pass-visual.is-lens .season-pass-art-fallback::after {
  content: '';
  width: 132px;
  height: 132px;
  border-radius: 999px;
  border: 12px solid rgba(126, 221, 255, 0.72);
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.08) 22%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(184, 128, 255, 0.46), rgba(126, 221, 255, 0.16) 56%, transparent 58%);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.14),
    0 0 34px rgba(126, 221, 255, 0.32);
}

.season-pass-visual.is-vfx .season-pass-art-fallback {
  background:
    linear-gradient(135deg, rgba(64, 31, 88, 0.72), rgba(23, 76, 96, 0.64) 58%, rgba(83, 61, 25, 0.58));
}

.season-pass-visual.is-vfx .season-pass-art-fallback::before,
.season-pass-visual.is-vfx .season-pass-art-fallback::after {
  content: '';
  position: absolute;
  border-radius: 999px;
}

.season-pass-visual.is-vfx .season-pass-art-fallback::before {
  width: 128px;
  height: 128px;
  border: 8px solid rgba(255, 219, 121, 0.74);
  box-shadow:
    0 0 30px rgba(255, 219, 121, 0.32),
    inset 0 0 26px rgba(126, 221, 255, 0.22);
}

.season-pass-visual.is-vfx .season-pass-art-fallback::after {
  width: 58px;
  height: 58px;
  background: rgba(126, 221, 255, 0.88);
  box-shadow:
    -52px -12px 0 -14px rgba(255, 112, 202, 0.9),
    54px 18px 0 -16px rgba(149, 241, 184, 0.9),
    0 0 24px rgba(126, 221, 255, 0.52);
}

.season-pass-visual.is-shard .season-pass-art-fallback::after {
  content: '';
  width: 72px;
  height: 92px;
  clip-path: polygon(50% 0%, 90% 30%, 74% 100%, 22% 100%, 8% 30%);
  background: linear-gradient(145deg, rgba(184, 246, 255, 0.96), rgba(111, 122, 255, 0.9));
  filter: drop-shadow(0 0 22px rgba(126, 221, 255, 0.4));
}

.season-pass-visual.is-shard .season-pass-art-fallback span,
.season-pass-visual.is-mote .season-pass-art-fallback span {
  bottom: 12px;
  font-size: 13px;
}

.season-pass-visual.is-mote .season-pass-art-fallback::after {
  content: '';
  width: 86px;
  height: 86px;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 8px, transparent 8px) 0 0 / 18px 18px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 8px, transparent 8px) 0 0 / 18px 18px,
    linear-gradient(135deg, rgba(255, 219, 121, 0.92), rgba(255, 111, 202, 0.9));
  box-shadow: 0 0 22px rgba(255, 111, 202, 0.34);
}

.season-pass-lantern-art,
.season-pass-ring-art,
.season-pass-sound-bars,
.season-pass-room-art,
.season-pass-postcard-art,
.season-pass-fragment-art,
.season-pass-stars-art,
.season-pass-badge-art,
.season-pass-title-art,
.season-pass-ticket-art,
.season-pass-portal-art,
.season-pass-bundle-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 22px 24px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 22px rgba(126, 221, 255, 0.16));
}

.season-pass-lantern-art {
  width: min(44%, 138px);
  height: min(72%, 166px);
  border-radius: 32px 32px 18px 18px;
  border: 3px solid rgba(255, 224, 154, 0.9);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 237, 168, 0.72), rgba(255, 190, 91, 0.18) 44%, transparent 56%),
    linear-gradient(180deg, rgba(255, 226, 142, 0.34), rgba(111, 215, 255, 0.22));
  box-shadow:
    0 0 44px rgba(255, 224, 154, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.season-pass-lantern-art::before {
  content: '';
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 225, 128, 0.92);
  box-shadow: 0 0 26px rgba(255, 225, 128, 0.68);
}

.season-pass-ring-art {
  width: min(58%, 168px);
  height: min(78%, 168px);
  border-radius: 999px;
  border: clamp(9px, 1.8vw, 16px) solid rgba(255, 223, 126, 0.86);
  box-shadow:
    0 0 40px rgba(255, 223, 126, 0.46),
    inset 0 0 30px rgba(126, 221, 255, 0.3);
}

.season-pass-sound-bars {
  grid-template-columns: repeat(5, 12px);
  align-items: end;
  gap: 10px;
  height: min(76%, 142px);
}

.season-pass-sound-bars i {
  display: block;
  width: 14px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(126, 221, 255, 0.94), rgba(149, 241, 184, 0.86));
  box-shadow: 0 0 18px rgba(126, 221, 255, 0.28);
}

.season-pass-sound-bars i:nth-child(2) { height: 74px; }
.season-pass-sound-bars i:nth-child(3) { height: 104px; background: linear-gradient(180deg, rgba(255, 219, 121, 0.96), rgba(126, 221, 255, 0.84)); }
.season-pass-sound-bars i:nth-child(4) { height: 62px; }
.season-pass-sound-bars i:nth-child(5) { height: 88px; }

.season-pass-room-art {
  width: min(68%, 196px);
  height: min(58%, 126px);
  border-radius: 36px 36px 18px 18px;
  background:
    linear-gradient(180deg, rgba(149, 241, 184, 0.92), rgba(77, 142, 102, 0.86));
  box-shadow:
    0 18px 0 -6px rgba(255, 224, 154, 0.52),
    0 0 28px rgba(149, 241, 184, 0.28);
}

.season-pass-postcard-art {
  width: min(68%, 198px);
  height: min(58%, 126px);
  border-radius: 10px;
  transform: rotate(-6deg);
  background:
    linear-gradient(135deg, rgba(255, 244, 214, 0.96), rgba(255, 216, 126, 0.88));
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.28);
}

.season-pass-postcard-art::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  border: 2px solid rgba(47, 97, 119, 0.44);
}

.season-pass-fragment-art {
  width: min(50%, 142px);
  height: min(68%, 142px);
  clip-path: polygon(52% 0%, 100% 42%, 78% 100%, 20% 86%, 0% 28%);
  background: linear-gradient(135deg, rgba(126, 221, 255, 0.96), rgba(184, 128, 255, 0.86));
  box-shadow: 0 0 28px rgba(184, 128, 255, 0.34);
}

.season-pass-stars-art {
  width: min(74%, 212px);
  height: min(68%, 142px);
  background:
    radial-gradient(circle at 22% 30%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 18%, rgba(255, 224, 154, 0.96) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 54%, rgba(126, 221, 255, 0.96) 0 4px, transparent 5px),
    radial-gradient(circle at 36% 74%, rgba(149, 241, 184, 0.96) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(126, 221, 255, 0.05));
  border-radius: 18px;
  border: 1px solid rgba(223, 239, 255, 0.2);
}

.season-pass-badge-art {
  width: min(46%, 136px);
  height: min(72%, 154px);
  clip-path: polygon(50% 0%, 92% 18%, 82% 78%, 50% 100%, 18% 78%, 8% 18%);
  background: linear-gradient(180deg, rgba(255, 224, 154, 0.98), rgba(184, 128, 255, 0.82));
  box-shadow: 0 0 30px rgba(255, 224, 154, 0.28);
}

.season-pass-title-art {
  width: min(70%, 202px);
  height: min(36%, 74px);
  border-radius: 999px;
  border: 2px solid rgba(255, 224, 154, 0.72);
  background: rgba(8, 16, 28, 0.72);
  color: rgba(255, 224, 154, 0.98);
  font: 950 20px/1 var(--hud-font-display);
  box-shadow: 0 0 26px rgba(255, 224, 154, 0.24);
}

.season-pass-ticket-art {
  width: min(70%, 202px);
  height: min(48%, 104px);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(126, 221, 255, 0.94), rgba(149, 241, 184, 0.86));
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.28);
}

.season-pass-ticket-art::before {
  content: '';
  position: absolute;
  inset: 14px 20px;
  border-top: 2px dashed rgba(5, 19, 27, 0.48);
  border-bottom: 2px dashed rgba(5, 19, 27, 0.48);
}

.season-pass-portal-art {
  width: min(46%, 138px);
  height: min(78%, 168px);
  border-radius: 999px 999px 22px 22px;
  border: 8px solid rgba(184, 128, 255, 0.86);
  background:
    conic-gradient(from 120deg, rgba(126, 221, 255, 0.76), rgba(255, 219, 121, 0.72), rgba(184, 128, 255, 0.78), rgba(126, 221, 255, 0.76));
  box-shadow: 0 0 36px rgba(184, 128, 255, 0.42);
}

.season-pass-bundle-art {
  width: min(68%, 204px);
  height: min(62%, 140px);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 224, 154, 0.96), rgba(255, 112, 202, 0.84) 48%, rgba(126, 221, 255, 0.9));
  box-shadow:
    0 0 34px rgba(255, 224, 154, 0.35),
    0 18px 26px rgba(0, 0, 0, 0.28);
}

.season-pass-bundle-art::before,
.season-pass-bundle-art::after {
  content: '';
  position: absolute;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.28);
}

.season-pass-bundle-art::before {
  width: 86px;
  height: 22px;
  top: -10px;
}

.season-pass-bundle-art::after {
  width: 22px;
  height: 126px;
}

.season-pass-reward-copy {
  position: absolute;
  z-index: 6;
  left: 66px;
  right: 96px;
  bottom: 12px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  min-width: 0;
  pointer-events: none;
}

.season-pass-reward-title {
  color: rgba(248, 252, 255, 0.97);
  font: 950 16px/1.08 var(--hud-font-body);
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(126, 221, 255, 0.16);
}

.season-pass-reward-note {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 224, 168, 0.22);
  background: rgba(5, 13, 22, 0.54);
  color: rgba(255, 224, 168, 0.88);
  font: 900 10px/1 var(--hud-font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.season-pass-reward-action {
  position: absolute;
  z-index: 7;
  right: 10px;
  bottom: 10px;
  max-width: 88px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.season-pass-claim-btn {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(142, 240, 191, 0.22);
}

.season-pass-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: 88px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(224, 241, 255, 0.14);
  background: rgba(4, 12, 20, 0.56);
  color: rgba(224, 238, 248, 0.72);
  font: 900 10px/1 var(--hud-font-body);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.season-pass-state-pill.is-claimed {
  border-color: rgba(142, 240, 191, 0.36);
  color: rgba(166, 246, 205, 0.92);
}

.season-pass-state-pill.is-banked {
  border-color: rgba(255, 224, 168, 0.34);
  color: rgba(255, 224, 168, 0.9);
}

.season-pass-feedback {
  flex: 0 0 auto;
  align-self: center;
  max-width: min(720px, 90vw);
  margin-top: -4px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(224, 241, 255, 0.14);
  background: rgba(6, 13, 22, 0.58);
  color: rgba(222, 238, 248, 0.84);
  font: 850 12px/1.2 var(--hud-font-body);
}

.season-pass-feedback.is-positive {
  border-color: rgba(142, 240, 191, 0.36);
  color: rgba(164, 242, 201, 0.96);
}

.season-pass-feedback.is-warning {
  border-color: rgba(255, 211, 132, 0.34);
  color: rgba(255, 211, 132, 0.96);
}

.chest-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.chest-action-btn {
  border-radius: 999px;
  min-height: 40px;
  padding-inline: 16px;
  min-width: 122px;
  font-weight: 800;
}

.chest-action-btn-open {
  border-color: rgba(157, 239, 199, 0.58);
  background: linear-gradient(180deg, rgba(194, 248, 214, 0.98), rgba(140, 232, 182, 0.96));
  color: #072319;
  text-shadow: none;
  box-shadow:
    0 0 0 1px rgba(179, 243, 209, 0.2) inset,
    0 10px 24px rgba(62, 146, 107, 0.32);
}

.chest-action-btn-skip {
  border-color: rgba(178, 219, 255, 0.46);
  background: linear-gradient(180deg, rgba(111, 156, 201, 0.44), rgba(30, 52, 83, 0.78));
  color: rgba(236, 245, 255, 0.96);
}

.progression-hub-card.is-surface-missions .progression-hub-icon {
  border-color: rgba(133, 218, 255, 0.38);
  background: rgba(133, 218, 255, 0.14);
  color: #95d6ff;
}

.progression-hub-card.is-surface-achievements .progression-hub-icon {
  border-color: rgba(156, 235, 198, 0.36);
  background: rgba(156, 235, 198, 0.14);
  color: #9debc6;
}

.progression-hub-card.is-surface-chests .progression-hub-icon {
  border-color: rgba(255, 218, 154, 0.4);
  background: rgba(255, 218, 154, 0.15);
  color: #ffd59a;
}

.progression-hub-card.is-surface-missions .mission-section {
  border-color: rgba(132, 210, 255, 0.24);
}

.progression-hub-card.is-surface-missions .mission-section {
  border-radius: 18px;
  border-left-width: 1px;
  border-left-color: rgba(132, 210, 255, 0.24);
  background:
    radial-gradient(110% 120% at 4% -18%, rgba(104, 205, 255, 0.12), transparent 62%),
    rgba(255, 255, 255, 0.03);
}

.progression-hub-card.is-surface-missions .mission-card {
  border-radius: 22px;
}

.progression-hub-card.is-surface-missions .mission-section-daily {
  position: relative;
  border-color: rgba(135, 226, 255, 0.3);
  background:
    radial-gradient(120% 120% at 8% -18%, rgba(102, 205, 255, 0.18), transparent 64%),
    rgba(8, 16, 28, 0.76);
}

.progression-hub-card.is-surface-missions .progression-mission-ad-panel {
  border-radius: 999px;
  border-color: rgba(131, 208, 255, 0.24);
  background: rgba(255, 255, 255, 0.045);
  padding: 8px 10px 8px 14px;
}

.progression-hub-card.is-surface-missions .mission-section-weekly {
  position: relative;
  z-index: auto;
  border-color: rgba(176, 211, 240, 0.16);
  background:
    radial-gradient(120% 130% at 95% 0%, rgba(255, 225, 150, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.026);
}

.progression-hub-card.is-surface-achievements .achievement-card {
  border-color: rgba(255, 219, 158, 0.34);
}

.progression-hub-card.is-surface-achievements .achievement-card {
  border-radius: 18px;
  background:
    radial-gradient(130% 120% at 8% -20%, rgba(154, 235, 196, 0.12), transparent 62%),
    radial-gradient(130% 120% at 100% 0%, rgba(255, 220, 152, 0.2), transparent 58%),
    rgba(255, 255, 255, 0.03);
}

.progression-hub-card.is-surface-achievements .achievement-card-state {
  color: rgba(255, 236, 201, 0.92);
}

.progression-hub-card.is-surface-achievements .achievement-card {
  box-shadow:
    0 0 0 1px rgba(255, 228, 178, 0.08) inset,
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.progression-hub-card.is-surface-achievements .progression-hub-claimable {
  border-color: rgba(255, 224, 168, 0.74);
  background: linear-gradient(180deg, rgba(255, 219, 148, 0.3), rgba(255, 219, 148, 0.12));
  color: rgba(255, 246, 224, 0.98);
  box-shadow:
    0 0 22px rgba(255, 201, 111, 0.34),
    0 0 0 1px rgba(255, 238, 198, 0.2) inset;
}

.progression-hub-card.is-surface-chests .chest-summary-card,
.progression-hub-card.is-surface-chests .chest-history-card {
  border-color: rgba(255, 209, 148, 0.22);
}

.progression-hub-card.is-surface-chests .chest-summary-card {
  border-width: 1px;
  border-radius: 14px;
  background:
    radial-gradient(145% 120% at 0% -30%, rgba(255, 213, 138, 0.2), transparent 65%),
    rgba(255, 255, 255, 0.035);
}

.progression-hub-card.is-surface-chests .chest-history-card {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.chest-summary-title {
  font-size: 14px;
  font-weight: 800;
}

.chest-meter-block {
  margin-top: 10px;
}

.chest-clarity-copy {
  margin-top: 8px;
  opacity: 0.86;
}

.chest-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.chest-meter-track {
  margin-top: 6px;
  height: 14px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}

.chest-meter-fill {
  box-shadow: 0 0 10px rgba(95, 189, 255, 0.3);
  transition: width 620ms cubic-bezier(.2,.85,.25,1);
  will-change: width;
}

.chest-meter-track-xp {
  border: 1px solid rgba(146, 224, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(17, 37, 58, 0.9), rgba(10, 22, 35, 0.9));
  box-shadow:
    0 0 0 1px rgba(181, 236, 255, 0.1) inset,
    0 0 18px rgba(108, 205, 255, 0.18);
}

.chest-meter-fill-xp {
  background: linear-gradient(90deg, #62cfff 0%, #8be5ff 46%, #c6f7ff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(209, 246, 255, 0.24),
    0 0 18px rgba(114, 215, 255, 0.48);
}

.chest-meter-track-heat {
  border: 1px solid rgba(255, 210, 150, 0.42);
  background:
    linear-gradient(180deg, rgba(42, 28, 14, 0.84), rgba(28, 18, 10, 0.88));
  box-shadow:
    0 0 0 1px rgba(255, 227, 170, 0.11) inset,
    0 0 18px rgba(255, 181, 104, 0.2);
}

.chest-meter-fill-heat {
  background: linear-gradient(90deg, #6fd4ff 0%, #9ee8ff 38%, #ffe08a 72%, #ffba8d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 205, 0.26),
    0 0 18px rgba(255, 193, 116, 0.42);
}

.chest-meter-track-wrap {
  position: relative;
}

.chest-meter-particles {
  position: absolute;
  inset: -26px 0 -6px 0;
  pointer-events: none;
  overflow: visible;
}

.chest-meter-sticker {
  position: absolute;
  left: 12%;
  bottom: -6px;
  border-radius: 999px;
  border: 1px solid rgba(160, 228, 255, 0.48);
  background: rgba(16, 35, 58, 0.86);
  color: rgba(210, 241, 255, 0.96);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  white-space: nowrap;
  opacity: 0;
  animation: chest-meter-sticker-fly 680ms cubic-bezier(.2,.75,.24,1) forwards;
}

.chest-threshold-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chest-threshold-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.chest-pity-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chest-pity-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(127, 211, 255, 0.38);
  background: rgba(127, 211, 255, 0.12);
}

.chest-summary-actions {
  margin-top: 10px;
}

.chest-reward-spin-btn {
  margin-top: 10px;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  transition:
    transform var(--hud-fast) var(--hud-ease),
    border-color var(--hud-fast) var(--hud-ease),
    box-shadow var(--hud-mid) var(--hud-ease),
    background var(--hud-fast) var(--hud-ease);
}

.drop-session-card {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(156, 219, 255, 0.22);
  background: linear-gradient(180deg, rgba(7, 24, 39, 0.8), rgba(5, 18, 29, 0.6));
  display: grid;
  gap: 8px;
}

.drop-session-card.is-active {
  border-color: rgba(158, 220, 255, 0.44);
  box-shadow: 0 8px 28px rgba(14, 50, 82, 0.34), inset 0 0 0 1px rgba(146, 218, 255, 0.1);
}

.drop-session-card.is-opened {
  border-color: rgba(255, 203, 134, 0.54);
  box-shadow: 0 10px 30px rgba(85, 52, 11, 0.32), inset 0 0 0 1px rgba(255, 206, 142, 0.14);
}

.drop-session-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chest-reward-spin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(178, 225, 255, 0.45);
  background: rgba(120, 196, 255, 0.12);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    0 0 20px rgba(129, 209, 255, 0.26);
}

.chest-reward-spin-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.chest-reward-spin-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
}

.chest-reward-spin-btn.is-spin .chest-reward-spin-img {
  transform: rotate(360deg);
}

.chest-reward-spin-btn-drop {
  margin-top: 4px;
  width: min(88vw, 420px);
  min-height: min(78vw, 360px);
  justify-self: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 34%, rgba(133, 212, 255, 0.26), rgba(133, 212, 255, 0.02) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(165, 225, 255, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 16px 40px rgba(6, 28, 45, 0.42),
    0 0 30px rgba(118, 197, 255, 0.24);
}

.chest-reward-spin-img-drop {
  width: min(60vw, 280px);
  height: min(60vw, 280px);
  filter: drop-shadow(0 0 24px rgba(147, 218, 255, 0.45));
  transition: transform 520ms cubic-bezier(0.2, 0.92, 0.26, 1), filter 320ms ease;
}

.chest-reward-spin-btn-drop:hover:not(:disabled) .chest-reward-spin-img-drop {
  filter: drop-shadow(0 0 34px rgba(151, 224, 255, 0.62));
}

.drop-session-reward {
  color: rgba(226, 244, 255, 0.96);
  border: 1px solid rgba(154, 216, 255, 0.3);
  border-radius: 11px;
  background: rgba(8, 24, 37, 0.72);
  padding: 8px 10px;
}

.drop-overlay-shell {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: grid;
  place-items: center;
}

.drop-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.drop-overlay-card {
  position: relative;
  width: min(94vw, 560px);
  max-height: calc(100vh - 18px);
  border-radius: 22px;
  border: 1px solid rgba(149, 219, 255, 0.36);
  background:
    radial-gradient(circle at 50% 10%, rgba(111, 197, 255, 0.14), rgba(111, 197, 255, 0.02) 50%),
    linear-gradient(180deg, rgba(10, 25, 39, 0.95), rgba(7, 19, 31, 0.9));
  box-shadow:
    0 24px 60px rgba(4, 14, 22, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 14px;
  display: grid;
  gap: 8px;
  --drop-accent-rgb: 125, 210, 255;
  --drop-hue: 0deg;
  --drop-gem-sat: 1.2;
  --drop-gem-bright: 1.05;
  --drop-gem-contrast: 1.08;
  overflow: hidden;
}

.drop-overlay-card[data-drop-rarity="super_rare"] {
  --drop-accent-rgb: 106, 227, 233;
  --drop-hue: 16deg;
  --drop-gem-sat: 1.26;
  --drop-gem-bright: 1.08;
}

.drop-overlay-card[data-drop-rarity="epic"] {
  --drop-accent-rgb: 181, 122, 255;
  --drop-hue: 74deg;
  --drop-gem-sat: 1.36;
  --drop-gem-bright: 1.1;
}

.drop-overlay-card[data-drop-rarity="mythic"] {
  --drop-accent-rgb: 255, 108, 219;
  --drop-hue: 128deg;
  --drop-gem-sat: 1.46;
  --drop-gem-bright: 1.12;
}

.drop-overlay-card[data-drop-rarity="legendary"] {
  --drop-accent-rgb: 255, 211, 120;
  --drop-hue: 198deg;
  --drop-gem-sat: 1.54;
  --drop-gem-bright: 1.17;
  --drop-gem-contrast: 1.15;
}

.drop-overlay-card::before {
  content: '';
  position: absolute;
  inset: -28%;
  pointer-events: none;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(var(--drop-accent-rgb), 0.14) 0deg,
      rgba(var(--drop-accent-rgb), 0.03) 75deg,
      rgba(var(--drop-accent-rgb), 0.12) 150deg,
      rgba(var(--drop-accent-rgb), 0.02) 240deg,
      rgba(var(--drop-accent-rgb), 0.14) 360deg);
  opacity: 0.34;
  transform: rotate(0deg);
  animation: drop-chamber-swirl 13s linear infinite;
}

.drop-overlay-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 36%, rgba(var(--drop-accent-rgb), 0.2), rgba(var(--drop-accent-rgb), 0) 58%);
  opacity: 0.65;
}

.drop-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.drop-overlay-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(232, 247, 255, 0.96);
}

.drop-overlay-meta {
  color: rgba(204, 232, 248, 0.94);
  position: relative;
  z-index: 2;
}

.drop-overlay-rarity {
  min-height: clamp(48px, 8vw, 84px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  font-size: clamp(28px, 6vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--drop-accent-rgb), 0.98);
  text-shadow:
    0 0 16px rgba(var(--drop-accent-rgb), 0.52),
    0 0 42px rgba(var(--drop-accent-rgb), 0.26);
  transition:
    transform 360ms cubic-bezier(0.18, 0.86, 0.24, 1),
    color 320ms cubic-bezier(0.22, 0.78, 0.24, 1),
    text-shadow 320ms cubic-bezier(0.22, 0.78, 0.24, 1),
    filter 320ms cubic-bezier(0.22, 0.78, 0.24, 1);
  position: relative;
  z-index: 2;
}

.drop-overlay-card[data-drop-phase="upgrade"] .drop-overlay-rarity {
  animation: drop-rarity-pop 460ms cubic-bezier(0.16, 0.9, 0.22, 1);
  filter: brightness(1.2);
}

.drop-overlay-gem {
  width: min(76vw, 58vh, 360px);
  min-height: min(76vw, 58vh, 360px);
  margin: 2px auto;
  border-radius: 999px;
  border: none;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 280ms cubic-bezier(0.18, 0.86, 0.24, 1),
    filter 300ms cubic-bezier(0.22, 0.78, 0.24, 1),
    opacity 220ms cubic-bezier(0.22, 0.78, 0.24, 1);
  position: relative;
  isolation: isolate;
  z-index: 2;
}

.drop-overlay-gem:hover {
  transform: translateY(-2px) scale(1.012);
  filter: brightness(1.1);
}

.drop-overlay-gem.is-disabled {
  opacity: 0.62;
  cursor: default;
}

.drop-overlay-gem-img {
  width: min(62vw, 46vh, 298px);
  height: min(62vw, 46vh, 298px);
  object-fit: contain;
  filter:
    hue-rotate(var(--drop-hue))
    saturate(var(--drop-gem-sat))
    contrast(var(--drop-gem-contrast))
    brightness(var(--drop-gem-bright))
    drop-shadow(0 0 32px rgba(var(--drop-accent-rgb), 0.56))
    drop-shadow(0 18px 38px rgba(0, 0, 0, 0.44));
  transition: filter 300ms cubic-bezier(0.22, 0.78, 0.24, 1);
  will-change: transform, filter;
}

.drop-overlay-gem::before,
.drop-overlay-gem::after {
  content: '';
  position: absolute;
  inset: 16% 16%;
  border-radius: 999px;
  pointer-events: none;
}

.drop-overlay-gem::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--drop-accent-rgb), 0.34), rgba(var(--drop-accent-rgb), 0.03) 64%, rgba(var(--drop-accent-rgb), 0) 76%);
  opacity: 0.55;
  transform: scale(0.94);
  transition:
    opacity 300ms cubic-bezier(0.22, 0.78, 0.24, 1),
    transform 380ms cubic-bezier(0.18, 0.86, 0.24, 1);
}

.drop-overlay-gem::after {
  border: 1px solid rgba(var(--drop-accent-rgb), 0.46);
  box-shadow:
    0 0 20px rgba(var(--drop-accent-rgb), 0.22),
    inset 0 0 14px rgba(var(--drop-accent-rgb), 0.18);
  opacity: 0;
  transform: scale(0.76);
}

.drop-overlay-gem.is-spin .drop-overlay-gem-img {
  filter:
    hue-rotate(var(--drop-hue))
    saturate(calc(var(--drop-gem-sat) + 0.22))
    contrast(calc(var(--drop-gem-contrast) + 0.12))
    brightness(calc(var(--drop-gem-bright) + 0.12))
    drop-shadow(0 0 46px rgba(var(--drop-accent-rgb), 0.82))
    drop-shadow(0 30px 48px rgba(0, 0, 0, 0.45));
}

.drop-overlay-gem.is-spin {
  animation: none;
}

.drop-overlay-card[data-drop-phase="tap_spin"] .drop-overlay-gem::before {
  opacity: 0.84;
  transform: scale(1.12);
}

.drop-overlay-card[data-drop-phase="tap_spin"] .drop-overlay-gem::after {
  animation: drop-gem-ring var(--drop-spin-duration-ms, 360ms) cubic-bezier(0.2, 0.82, 0.24, 1) both;
}

.drop-overlay-card[data-drop-phase="tap_spin"] .drop-overlay-vortex {
  opacity: 0.46;
  transform: scale(1.08);
}

.drop-overlay-gem.is-upgrade .drop-overlay-gem-img {
  animation: drop-upgrade-glow 520ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
}

.drop-overlay-gem.is-opened .drop-overlay-gem-img {
  animation: drop-open-burst 820ms cubic-bezier(0.18, 0.96, 0.24, 1) both;
}

.drop-overlay-reveal-stage {
  border-radius: 14px;
  border: 1px solid rgba(var(--drop-accent-rgb), 0.32);
  background:
    radial-gradient(circle at 50% -10%, rgba(var(--drop-accent-rgb), 0.16), rgba(var(--drop-accent-rgb), 0.03) 60%),
    rgba(8, 21, 34, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 10px 12px 11px;
  opacity: 0;
  transform: translateY(5px) scale(0.985);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 2;
}

.drop-overlay-reveal-stage.is-type,
.drop-overlay-reveal-stage.is-detail {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.drop-overlay-reward-type {
  text-align: center;
  font-size: clamp(18px, 4.4vw, 32px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
  color: rgba(var(--drop-accent-rgb), 0.98);
  text-shadow: 0 0 18px rgba(var(--drop-accent-rgb), 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 170ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.drop-overlay-reveal-stage.is-type .drop-overlay-reward-type,
.drop-overlay-reveal-stage.is-detail .drop-overlay-reward-type {
  opacity: 1;
  transform: translateY(0);
}

.drop-overlay-reward-detail {
  text-align: center;
  font-size: clamp(20px, 5.2vw, 36px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(242, 251, 255, 0.98);
  text-shadow: 0 0 20px rgba(var(--drop-accent-rgb), 0.3);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 190ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.drop-overlay-reveal-stage.is-detail .drop-overlay-reward-detail {
  opacity: 1;
  transform: translateY(0);
}

.drop-overlay-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  justify-content: center;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(var(--drop-accent-rgb), 0.28);
  background: rgba(12, 31, 49, 0.64);
  padding: 6px 8px;
  color: rgba(226, 244, 255, 0.95);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.drop-overlay-reveal-stage.is-detail .drop-overlay-reward-chip {
  opacity: 1;
  transform: translateY(0);
}

.drop-reward-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(var(--drop-accent-rgb), 0.4), rgba(var(--drop-accent-rgb), 0.2));
  border: 1px solid rgba(var(--drop-accent-rgb), 0.44);
  box-shadow: 0 0 16px rgba(var(--drop-accent-rgb), 0.28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.drop-overlay-collect-hint {
  margin-top: -1px;
  opacity: 0;
  text-align: center;
  color: rgba(215, 239, 255, 0.88);
  transition: opacity 170ms ease;
  position: relative;
  z-index: 2;
}

.drop-overlay-vortex,
.drop-overlay-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.drop-overlay-vortex {
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--drop-accent-rgb), 0.24), rgba(var(--drop-accent-rgb), 0.05) 44%, rgba(var(--drop-accent-rgb), 0) 70%);
  opacity: 0.24;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 280ms ease;
}

.drop-overlay-card[data-drop-rarity="epic"] .drop-overlay-vortex {
  opacity: 0.32;
}

.drop-overlay-card[data-drop-rarity="mythic"] .drop-overlay-vortex {
  opacity: 0.4;
}

.drop-overlay-card[data-drop-rarity="legendary"] .drop-overlay-vortex {
  opacity: 0.46;
}

.drop-overlay-flash {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.86), rgba(var(--drop-accent-rgb), 0.25) 26%, rgba(var(--drop-accent-rgb), 0) 56%);
  opacity: 0;
}

.drop-overlay-card[data-drop-phase="open_burst"] {
  animation: drop-card-bloom 520ms cubic-bezier(0.18, 0.86, 0.24, 1);
}

.drop-overlay-card[data-drop-phase="open_burst"] .drop-overlay-flash {
  animation: drop-open-flash 560ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
}

.drop-overlay-card[data-drop-phase="open_burst"] .drop-overlay-vortex {
  opacity: 0.62;
  transform: scale(1.12);
}

.drop-overlay-card[data-drop-phase="upgrade"] .drop-overlay-vortex {
  opacity: 0.48;
  transform: scale(1.06);
}

.drop-overlay-card[data-drop-phase="upgrade"] .drop-overlay-flash {
  animation: drop-upgrade-flash 380ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
}

.drop-overlay-card[data-drop-rarity="mythic"][data-drop-phase="upgrade"] .drop-overlay-vortex,
.drop-overlay-card[data-drop-rarity="legendary"][data-drop-phase="upgrade"] .drop-overlay-vortex {
  opacity: 0.62;
  transform: scale(1.1);
}

.drop-overlay-collect-hint.is-visible {
  opacity: 1;
}

@keyframes drop-open-burst {
  0% { transform: scale(1) rotate(0deg); }
  42% { transform: scale(1.12) rotate(4deg); }
  72% { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes drop-rarity-pop {
  0% { transform: scale(0.97) translateY(1px); }
  48% { transform: scale(1.09) translateY(-1px); }
  100% { transform: scale(1); }
}

@keyframes drop-card-bloom {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  42% { transform: translate3d(0, -1px, 0) scale(1.012); }
  78% { transform: translate3d(0, 0, 0) scale(0.996); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes drop-open-flash {
  0% { opacity: 0; transform: scale(0.7); }
  16% { opacity: 0.95; transform: scale(1.02); }
  36% { opacity: 0.44; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.36); }
}

@keyframes drop-upgrade-glow {
  0% {
    filter:
      hue-rotate(var(--drop-hue))
      saturate(calc(var(--drop-gem-sat) + 0.18))
      contrast(calc(var(--drop-gem-contrast) + 0.08))
      brightness(calc(var(--drop-gem-bright) + 0.06))
      drop-shadow(0 0 44px rgba(var(--drop-accent-rgb), 0.76))
      drop-shadow(0 24px 44px rgba(0, 0, 0, 0.42));
  }
  48% {
    filter:
      hue-rotate(var(--drop-hue))
      saturate(calc(var(--drop-gem-sat) + 0.48))
      contrast(calc(var(--drop-gem-contrast) + 0.16))
      brightness(calc(var(--drop-gem-bright) + 0.2))
      drop-shadow(0 0 66px rgba(var(--drop-accent-rgb), 0.96))
      drop-shadow(0 26px 48px rgba(0, 0, 0, 0.42));
  }
  100% {
    filter:
      hue-rotate(var(--drop-hue))
      saturate(calc(var(--drop-gem-sat) + 0.2))
      contrast(calc(var(--drop-gem-contrast) + 0.08))
      brightness(calc(var(--drop-gem-bright) + 0.08))
      drop-shadow(0 0 44px rgba(var(--drop-accent-rgb), 0.72))
      drop-shadow(0 24px 44px rgba(0, 0, 0, 0.42));
  }
}

@keyframes drop-gem-ring {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  44% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: scale(1.36);
  }
}

@keyframes drop-click-punch {
  0% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-2px) scale(1.028); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes drop-upgrade-flash {
  0% { opacity: 0; transform: scale(0.8); }
  42% { opacity: 0.72; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.2); }
}

.drop-tap-spark {
  position: fixed;
  z-index: 194;
  pointer-events: none;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(241, 252, 255, 0.98);
  box-shadow:
    0 0 10px rgba(177, 232, 255, 0.8),
    0 0 18px rgba(177, 232, 255, 0.38);
  animation: drop-tap-spark-fly var(--drop-spin-duration-ms, 320ms) cubic-bezier(0.16, 0.9, 0.22, 1) forwards;
}

.drop-tap-spark.is-super_rare {
  background: rgba(196, 255, 246, 0.98);
  box-shadow: 0 0 12px rgba(110, 240, 220, 0.82), 0 0 20px rgba(110, 240, 220, 0.38);
}

.drop-tap-spark.is-epic {
  background: rgba(232, 196, 255, 0.98);
  box-shadow: 0 0 14px rgba(184, 122, 255, 0.82), 0 0 24px rgba(184, 122, 255, 0.4);
}

.drop-tap-spark.is-mythic {
  background: rgba(255, 196, 241, 0.98);
  box-shadow: 0 0 14px rgba(255, 120, 220, 0.86), 0 0 24px rgba(255, 120, 220, 0.42);
}

.drop-tap-spark.is-legendary {
  background: rgba(255, 241, 194, 0.98);
  box-shadow: 0 0 16px rgba(255, 214, 114, 0.88), 0 0 28px rgba(255, 214, 114, 0.48);
}

@keyframes drop-tap-spark-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drop-tap-end-x), var(--drop-tap-end-y), 0) scale(0.2);
  }
}

@keyframes drop-chamber-swirl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.drop-collect-token {
  position: fixed;
  z-index: 196;
  pointer-events: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 228, 255, 0.6);
  background: rgba(12, 30, 48, 0.96);
  color: rgba(230, 247, 255, 0.98);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow:
    0 0 14px rgba(140, 209, 255, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.35);
  animation: drop-token-fly 940ms cubic-bezier(0.2, 0.82, 0.26, 1) forwards;
}

.drop-open-spark {
  position: fixed;
  z-index: 195;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(235, 249, 255, 0.96);
  box-shadow:
    0 0 16px rgba(178, 233, 255, 0.72),
    0 0 24px rgba(178, 233, 255, 0.3);
  animation: drop-open-spark-fly 780ms cubic-bezier(0.2, 0.84, 0.3, 1) forwards;
}

.drop-open-spark.is-epic {
  background: rgba(223, 176, 255, 0.98);
  box-shadow: 0 0 18px rgba(202, 149, 255, 0.74), 0 0 26px rgba(202, 149, 255, 0.34);
}

.drop-open-spark.is-mythic {
  background: rgba(255, 172, 234, 0.98);
  box-shadow: 0 0 18px rgba(255, 133, 221, 0.76), 0 0 28px rgba(255, 133, 221, 0.36);
}

.drop-open-spark.is-legendary {
  background: rgba(255, 236, 180, 0.98);
  box-shadow: 0 0 20px rgba(255, 216, 124, 0.8), 0 0 30px rgba(255, 216, 124, 0.4);
}

@keyframes drop-open-spark-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45);
  }
  16% {
    opacity: 1;
    transform: translate3d(var(--drop-open-mid-x), var(--drop-open-mid-y), 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drop-open-end-x), var(--drop-open-end-y), 0) scale(0.24);
  }
}

.drop-collect-token.is-coins {
  border-color: rgba(255, 219, 137, 0.75);
  box-shadow: 0 0 15px rgba(255, 214, 123, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.drop-collect-token.is-cosmetic_unlock {
  border-color: rgba(255, 166, 233, 0.72);
  box-shadow: 0 0 16px rgba(246, 134, 230, 0.46), 0 8px 24px rgba(0, 0, 0, 0.35);
}

@keyframes drop-token-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.65);
  }
  20% {
    opacity: 1;
    transform: translate(var(--drop-mid-x), var(--drop-mid-y)) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(var(--drop-end-x), var(--drop-end-y)) scale(0.78);
  }
}

.progression-chest-feedback {
  min-height: 16px;
  opacity: 0.8;
}

.streak-feedback-toast {
  opacity: 0;
  transform: translateY(3px);
}

.streak-feedback-toast.is-visible {
  animation: streak-feedback-fade 2400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.progression-chest-feedback[data-tone="positive"] {
  color: #8ef0bf;
}

.progression-chest-feedback[data-tone="warning"] {
  color: #ffd59a;
}

.progression-float-reward {
  position: fixed;
  z-index: 220;
  pointer-events: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 238, 168, 0.82);
  background:
    radial-gradient(120% 180% at 50% 0%, rgba(255, 246, 176, 0.48), transparent 58%),
    linear-gradient(180deg, rgba(38, 84, 72, 1), rgba(12, 45, 44, 0.99));
  color: rgba(255, 252, 222, 1);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.42),
    0 0 12px rgba(255, 234, 156, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.13) inset,
    0 14px 34px rgba(0, 0, 0, 0.32),
    0 0 42px rgba(113, 245, 203, 0.48),
    0 0 28px rgba(255, 225, 136, 0.28);
  animation: progression-float-reward 2150ms cubic-bezier(.16,.84,.23,1) forwards;
}

.progression-float-reward::before {
  content: '+';
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  color: rgba(7, 35, 29, 0.96);
  background: linear-gradient(180deg, rgba(255, 242, 166, 1), rgba(133, 255, 208, 0.96));
  text-shadow: none;
}

.progression-level-req-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.chest-history-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chest-history-item {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 9px;
}

.chest-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chest-history-reward {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

.chest-history-meta {
  margin-top: 4px;
  opacity: 0.75;
}

.chest-reveal-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.chest-reveal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 14, 0.6);
  backdrop-filter: blur(4px);
}

.chest-reveal-card {
  position: relative;
  width: min(460px, calc(100vw - 24px));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(130% 110% at 8% -12%, rgba(95, 198, 255, 0.18), transparent 60%),
    rgba(10, 18, 30, 0.96);
  padding: 14px 14px 12px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
}

.chest-reveal-phase {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}

.chest-reveal-phase.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chest-reveal-tier-value {
  margin-top: 4px;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chest-reveal-reward {
  margin-top: 10px;
}

.chest-reveal-reward-title {
  font-size: 16px;
  font-weight: 800;
}

.chest-reveal-reward-sub {
  margin-top: 5px;
  opacity: 0.8;
}

.chest-reveal-conversion {
  margin-top: 8px;
}

.chest-reveal-actions {
  margin-top: 12px;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.progression-hub-stats-note {
  margin-bottom: 8px;
  opacity: 0.76;
}

.progression-hub-stats-host .ui-card {
  width: 100%;
  box-sizing: border-box;
}

.analysis-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 214, 162, 0.28);
  background:
    radial-gradient(128% 122% at 0% -18%, rgba(255, 210, 135, 0.2), transparent 62%),
    radial-gradient(120% 116% at 100% 0%, rgba(132, 219, 255, 0.16), transparent 58%),
    rgba(10, 16, 28, 0.95);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 24px rgba(255, 196, 120, 0.12);
}

.analysis-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analysis-metric-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.analysis-metric {
  border: 1px solid rgba(209, 235, 255, 0.16);
  border-radius: 11px;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
  background:
    linear-gradient(175deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.analysis-metric span {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(201, 223, 245, 0.78);
}

.analysis-metric b {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.analysis-metric small {
  font-size: 11px;
  color: rgba(199, 219, 236, 0.82);
}

.analysis-metric-wide {
  grid-column: 1 / -1;
}

.analysis-chart-wrap {
  margin-top: 18px;
  border: 1px solid rgba(154, 225, 255, 0.2);
  border-radius: 12px;
  padding: 10px 10px 6px;
  background:
    radial-gradient(120% 110% at 8% -16%, rgba(142, 220, 255, 0.16), transparent 64%),
    rgba(6, 14, 25, 0.72);
}

.analysis-actions {
  margin-top: 14px;
}

.coop-analysis-card {
  position: fixed;
  left: 50%;
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px));
  z-index: 57;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  min-height: 0;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 12px;
  text-align: center;
  border-radius: 12px;
  background: rgba(7, 13, 22, 0.94);
}

.coop-analysis-kicker {
  color: rgba(255,255,255,0.48);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.coop-analysis-title {
  font-size: 25px;
  letter-spacing: 0;
  text-transform: lowercase;
}

.coop-analysis-body {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.35;
  max-width: 560px;
  margin: 0 auto;
}

.coop-analysis-body.is-compact {
  max-width: 100%;
  font-size: 14px;
}

.coop-analysis-duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(560px, 100%);
  margin: 0 auto;
}

.coop-analysis-duel-card {
  min-height: 104px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.045);
}

.coop-analysis-duel-card.is-winner {
  border-color: color-mix(in srgb, var(--player, #fff) 78%, white 4%);
  background: color-mix(in srgb, var(--player, #fff) 11%, rgba(255,255,255,0.045));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--player, #fff) 16%, transparent) inset;
}

.coop-analysis-duel-value {
  color: rgba(255,255,255,0.94);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.coop-analysis-duel-line {
  color: rgba(255,255,255,0.68);
  font-weight: 800;
  font-size: 12px;
}

.coop-analysis-duel-note {
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 800;
  margin-top: -2px;
  text-transform: lowercase;
}

.coop-analysis-actions {
  justify-content: center;
}

.coop-analysis-exit {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.055);
  color: rgba(245,252,255,0.84);
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: lowercase;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.coop-analysis-exit:hover:not(:disabled),
.coop-analysis-exit:focus-visible {
  transform: none;
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.095);
  color: rgba(255,255,255,0.94);
  box-shadow: none;
}

.coop-analysis-exit:active {
  transform: none;
}

.progression-hub-actions,
.progression-hub-inline-actions,
.mission-card-actions,
.chest-summary-actions,
.chest-reveal-actions,
.analysis-actions,
.ambient-results-actions,
.coop-analysis-actions {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mission-card-actions,
.progression-hub-inline-actions {
  justify-content: flex-start;
}

.coop-analysis-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.coop-analysis-player-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  padding: 12px;
  display: grid;
  gap: 5px;
}

.coop-analysis-card-title {
  color: var(--player, #fff);
  font-weight: 900;
}

.coop-analysis-player-card b {
  font-size: 22px;
}

.coop-analysis-player-card span {
  color: rgba(255,255,255,0.64);
}

.coop-analysis-table {
  display: grid;
  gap: 6px;
  text-align: left;
}

.coop-analysis-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(80px, .7fr) minmax(80px, .7fr);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.045);
  font-size: 12px;
}

.coop-analysis-row span {
  color: rgba(255,255,255,0.62);
}

@media (max-width: 620px) {
  .coop-analysis-card {
    padding: 18px;
  }

  .coop-analysis-duel,
  .coop-analysis-compact {
    grid-template-columns: 1fr;
  }

  .coop-analysis-duel-card {
    min-height: 116px;
  }
}

body[data-hud-motion-tier="balanced"] .ambient-chest-xp-orb,
body[data-hud-motion-tier="balanced"] .progression-chip,
body[data-hud-motion-tier="balanced"] .progress-checkbox-row,
body[data-hud-motion-tier="balanced"] .mission-card,
body[data-hud-motion-tier="balanced"] .achievement-card {
  transition-duration: 120ms;
}

body[data-hud-motion-tier="high_load"] .ambient-chest-xp-orb {
  width: 12px;
  height: 12px;
  box-shadow:
    0 0 10px rgba(112, 206, 255, 0.54),
    0 0 18px rgba(112, 206, 255, 0.26);
}

body[data-hud-motion-tier="high_load"] .progression-results-chest-sticker,
body[data-hud-motion-tier="high_load"] .chest-meter-sticker,
body[data-hud-motion-tier="high_load"] .progression-float-reward {
  animation-duration: 460ms;
}

body[data-hud-motion-tier="high_load"] .progression-chip,
body[data-hud-motion-tier="high_load"] .progress-checkbox-row,
body[data-hud-motion-tier="high_load"] .mission-card,
body[data-hud-motion-tier="high_load"] .achievement-card,
body[data-hud-motion-tier="high_load"] .progression-results-sequence-beat {
  transition: none;
}

body[data-hud-motion-tier="high_load"] .mission-card.is-claimable,
body[data-hud-motion-tier="high_load"] .mission-card.is-claimable .mission-orb-ring,
body[data-hud-motion-tier="high_load"] .mission-card.is-claiming .mission-orb-ring,
body[data-hud-motion-tier="high_load"] .mission-card.is-claim-collecting,
body[data-hud-motion-tier="high_load"] .mission-orb.is-claim-collecting::before,
body[data-hud-motion-tier="high_load"] .mission-card.is-claim-collecting .mission-orb-ring,
body[data-hud-motion-tier="high_load"] .mission-card.is-claim-collecting .mission-orb-core::before,
body[data-hud-motion-tier="high_load"] .mission-card.is-claim-collecting .mission-orb-core::after,
body[data-hud-motion-tier="high_load"] .mission-card.is-claimed .mission-orb-reward,
body[data-hud-motion-tier="high_load"] .mission-card.is-progress-updated .mission-orb-ring,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claimable .mission-seal-bar-fill,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claiming .mission-seal-bar-fill,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claim-collecting,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claim-collecting::after,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claim-collecting .mission-seal-bar-fill,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claim-collecting .mission-seal-bar-fill::after,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-claim-collecting .mission-seal-bar-reward,
body[data-hud-motion-tier="high_load"] .mission-seal-bar.is-progress-updated .mission-seal-bar-fill,
body[data-hud-motion-tier="high_load"] .achievement-card.is-claimable {
  animation: none;
}

@keyframes achievement-claim-flash {
  0% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes mission-claim-flash {
  0% { transform: scale(0.992); filter: brightness(1); }
  28% { transform: scale(1.012); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes mission-claim-ring-settle {
  0% { transform: scale(0.96); filter: brightness(1); }
  36% { transform: scale(1.055); filter: brightness(1.34) saturate(1.12); }
  66% { transform: scale(0.992); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes mission-reward-chip-settle {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  30% { transform: translateY(-5px) scale(1.075); filter: brightness(1.24); }
  64% { transform: translateY(1px) scale(0.992); filter: brightness(1.08); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes mission-orb-progress-update {
  0% {
    --mission-progress-deg: var(--mission-progress-prev-deg);
    filter: brightness(1);
  }
  54% {
    filter: brightness(1.18) saturate(1.08);
  }
  100% {
    --mission-progress-deg: var(--mission-progress-current-deg);
    filter: brightness(1);
  }
}

@keyframes mission-seal-progress-update {
  0% {
    transform: scaleX(var(--mission-progress-prev, 0));
    filter: brightness(1);
  }
  58% {
    filter: brightness(1.18) saturate(1.08);
  }
  100% {
    transform: scaleX(var(--mission-progress, 0));
    filter: brightness(1);
  }
}

@keyframes mission-seal-bar-ready {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

@keyframes mission-seal-bar-claim {
  0% { filter: brightness(1); }
  34% { filter: brightness(1.4) saturate(1.14); }
  72% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

@keyframes mission-seal-collect-card {
  0% { transform: scale(0.995); filter: brightness(1); }
  34% { transform: scale(1.01); filter: brightness(1.16); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes mission-claim-card-collect {
  0% { transform: scale(0.992); filter: brightness(0.98); }
  30% { transform: translateY(-2px) scale(1.012); filter: brightness(1.16); }
  68% { transform: translateY(0) scale(0.998); filter: brightness(1.06); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes mission-collect-sheen {
  0% { opacity: 0; transform: scale(0.22); }
  18% { opacity: 0.82; }
  68% { opacity: 0.2; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes mission-fill-spark-sweep {
  0% { opacity: 0; transform: translateX(-110%); }
  18% { opacity: 0.9; }
  64% { opacity: 0.3; transform: translateX(112%); }
  100% { opacity: 0; transform: translateX(112%); }
}

@keyframes mission-core-bloom {
  0% { opacity: 0; transform: scale(0.74); }
  30% { opacity: 0.78; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes mission-core-sheen {
  0% { opacity: 0; transform: translateX(-125%) rotate(18deg); }
  22% { opacity: 0.78; }
  72% { opacity: 0.16; transform: translateX(125%) rotate(18deg); }
  100% { opacity: 0; transform: translateX(125%) rotate(18deg); }
}

@keyframes mission-claim-wave {
  0% { opacity: 0; transform: scale(0.12); }
  16% { opacity: 0.72; }
  64% { opacity: 0.18; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes claimable-pulse-mission {
  0%, 100% {
    box-shadow:
      0 0 26px rgba(96, 223, 255, 0.3),
      0 0 0 1px rgba(184, 245, 255, 0.16) inset;
  }
  50% {
    box-shadow:
      0 0 36px rgba(96, 223, 255, 0.5),
      0 0 0 1px rgba(204, 252, 255, 0.28) inset;
  }
}

@keyframes claimable-pulse-achievement {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(255, 196, 110, 0.28),
      0 0 0 1px rgba(255, 234, 188, 0.18) inset;
  }
  50% {
    box-shadow:
      0 0 34px rgba(255, 196, 110, 0.44),
      0 0 0 1px rgba(255, 246, 217, 0.26) inset;
  }
}

@keyframes streak-feedback-fade {
  0% { opacity: 0; transform: translateY(4px); }
  12% { opacity: 0.92; transform: translateY(0); }
  84% { opacity: 0.92; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1px); }
}

@keyframes chest-meter-sticker-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.9);
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tx, 120px), -34px, 0) scale(0.98);
  }
}

@keyframes progression-float-reward {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0) scale(0.86);
  }
  7% {
    opacity: 1;
    transform: translate3d(-50%, -4px, 0) scale(1.08);
  }
  74% {
    opacity: 1;
    transform: translate3d(-50%, -16px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -54px, 0) scale(0.98);
  }
}

@keyframes progression-results-chest-sticker {
  0% {
    opacity: 0;
    transform: translate3d(0, 15px, 0) scale(0.9);
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tx, 118px), -28px, 0) scale(1);
  }
}

.reward-intel-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  margin: 12px 0 10px;
  padding: 12px;
  border: 1px solid rgba(137, 222, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(137, 222, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(5, 13, 20, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.reward-intel-card.is-compact {
  grid-template-columns: 36px 1fr;
  padding: 9px;
  margin: 9px 0;
}

.reward-intel-orb {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(137, 222, 255, 0.34) 36%, rgba(121, 255, 204, 0.18) 62%, rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 24px rgba(137, 222, 255, 0.2), inset 0 0 18px rgba(255, 255, 255, 0.2);
}

.reward-intel-card.is-compact .reward-intel-orb {
  width: 32px;
  height: 32px;
}

.reward-intel-kicker {
  color: rgba(191, 233, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reward-intel-title {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.reward-intel-body {
  margin-top: 5px;
}

.reward-intel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.reward-intel-action {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

@keyframes reward-intel-open-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.progression-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.progression-gallery-card {
  min-height: 108px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.progression-gallery-card.is-wide {
  grid-column: 1 / -1;
}

.progression-gallery-title {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 900;
}

.progression-gallery-meta {
  margin-top: 4px;
}

.progression-gallery-meter {
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.progression-gallery-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(118, 255, 204, 0.82), rgba(137, 222, 255, 0.9));
}

.progression-gallery-collection {
  position: relative;
  overflow: hidden;
}

.reward-intel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.74;
  background:
    radial-gradient(circle at 14% 50%, rgba(137, 222, 255, 0.18), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%);
}

.reward-intel-copy,
.reward-intel-orb {
  position: relative;
  z-index: 1;
}

.reward-intel-card.is-primary-beat {
  border-color: rgba(174, 226, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 48px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(116, 217, 255, 0.14);
}

.reward-intel-card.is-state-opening .reward-intel-orb {
  animation: reward-intel-open-pulse 920ms cubic-bezier(.18,.78,.2,1) infinite;
}

.reward-intel-card.is-state-revealed,
.reward-intel-card.is-state-placed {
  border-color: rgba(170, 243, 190, 0.42);
}

.reward-intel-card.is-state-saved_for_later {
  border-color: rgba(255, 218, 146, 0.44);
  background:
    linear-gradient(135deg, rgba(255, 213, 154, 0.14), rgba(137, 222, 255, 0.06)),
    rgba(9, 14, 24, 0.78);
}

.reward-intel-card.is-treatment-sealed_envelope .reward-intel-orb {
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 238, 188, 0.96), rgba(255, 197, 119, 0.36)),
    radial-gradient(circle at 40% 34%, rgba(255, 255, 255, 0.82), transparent 34%);
}

.reward-intel-card.is-treatment-lantern_bloom .reward-intel-orb,
.reward-intel-card.is-treatment-pass_checkpoint_flare .reward-intel-orb {
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.98), rgba(255, 224, 138, 0.58) 34%, rgba(111, 212, 255, 0.22) 66%, rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 30px rgba(255, 213, 138, 0.28), inset 0 0 18px rgba(255, 255, 255, 0.22);
}

.reward-intel-card.is-treatment-constellation_node .reward-intel-orb,
.reward-intel-card.is-treatment-mode_key_forge .reward-intel-orb {
  background:
    conic-gradient(from 45deg, rgba(121, 216, 255, 0.88), rgba(170, 243, 190, 0.7), rgba(255, 214, 138, 0.72), rgba(121, 216, 255, 0.88));
}

.reward-intel-card.is-treatment-postcard_flip .reward-intel-orb {
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(178, 228, 255, 0.24)),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 213, 138, 0.55) 48% 52%, transparent 53%);
}

.reward-intel-card.is-treatment-terrarium_placement .reward-intel-orb {
  background:
    radial-gradient(circle at 50% 62%, rgba(170, 243, 190, 0.78), rgba(73, 174, 130, 0.2) 44%, transparent 45%),
    radial-gradient(circle at 42% 26%, rgba(255, 255, 255, 0.92), rgba(137, 222, 255, 0.28) 36%, transparent 68%);
}

.reward-intel-card.is-tone-rare,
.reward-intel-card.is-treatment-rare_secret_signal {
  border-color: rgba(192, 174, 255, 0.52);
  background:
    radial-gradient(130% 140% at 8% 10%, rgba(192, 174, 255, 0.2), transparent 58%),
    linear-gradient(135deg, rgba(255, 213, 138, 0.12), rgba(137, 222, 255, 0.08)),
    rgba(9, 13, 26, 0.82);
}

.reward-intel-card.is-tone-legendary {
  border-color: rgba(255, 214, 138, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 20px 58px rgba(0, 0, 0, 0.32),
    0 0 44px rgba(255, 214, 138, 0.2);
}

.progression-gallery-collection.is-complete {
  border-color: rgba(255, 226, 161, 0.34);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 226, 161, 0.12), rgba(255, 226, 161, 0) 56%),
    rgba(255, 255, 255, 0.055);
}

.progression-gallery-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.progression-gallery-node {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(210, 238, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.progression-gallery-node.is-lit {
  border-color: rgba(160, 229, 255, 0.58);
  background: rgba(151, 224, 255, 0.8);
  box-shadow: 0 0 12px rgba(137, 222, 255, 0.28);
}

.progression-gallery-collection.is-complete .progression-gallery-node.is-lit {
  border-color: rgba(255, 226, 161, 0.72);
  background: rgba(255, 226, 161, 0.86);
  box-shadow: 0 0 14px rgba(255, 213, 139, 0.36);
}

.progression-gallery-completion {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(202, 235, 255, 0.12);
  background: rgba(0, 0, 0, 0.16);
}

.progression-gallery-completion.is-owned {
  border-color: rgba(255, 226, 161, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 226, 161, 0.09), rgba(137, 222, 255, 0.04)),
    rgba(0, 0, 0, 0.16);
}

.progression-gallery-completion-title {
  color: rgba(255, 226, 161, 0.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.progression-gallery-mode-library {
  border-color: rgba(160, 229, 255, 0.18);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(137, 222, 255, 0.09), rgba(137, 222, 255, 0) 58%),
    rgba(255, 255, 255, 0.045);
}

.progression-gallery-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.progression-gallery-mode-card {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(202, 235, 255, 0.11);
  background: rgba(0, 0, 0, 0.16);
}

.progression-gallery-mode-card.is-new {
  border-color: rgba(255, 226, 161, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 226, 161, 0.08), rgba(137, 222, 255, 0.04)),
    rgba(0, 0, 0, 0.16);
}

.progression-gallery-mode-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.progression-gallery-mode-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  color: rgba(218, 242, 255, 0.88);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  border: 1px solid rgba(202, 235, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

.progression-gallery-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.progression-gallery-item {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}
@media (max-width: 980px) {
  .mission-daily-grid {
    grid-template-columns: repeat(auto-fit, minmax(176px, 188px));
  }

  .mission-weekly-grid {
    width: min(100%, var(--mission-weekly-row-width));
  }
}

.progression-gallery-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.progression-gallery-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.progression-gallery-feedback {
  min-height: 18px;
}

.progression-gallery-feedback[data-tone="accent"] {
  color: rgba(118, 255, 204, 0.92);
}

.progression-gallery-feedback[data-tone="bad"] {
  color: rgba(255, 126, 150, 0.92);
}

.progression-gallery-reveal-section {
  border-color: rgba(137, 222, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(137, 222, 255, 0.09), rgba(118, 255, 204, 0.045)),
    rgba(255, 255, 255, 0.045);
}

.progression-gallery-reveal-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.progression-gallery-reveal-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.progression-gallery-reveal-card.is-revealed {
  border-color: rgba(118, 255, 204, 0.28);
  background:
    linear-gradient(135deg, rgba(118, 255, 204, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.16);
}

.progression-gallery-reveal-orb {
  width: 34px;
  height: 34px;
}

.progression-gallery-reveal-copy {
  min-width: 0;
}

.progression-gallery-reveal-action {
  white-space: nowrap;
}

.progression-hub-card.is-surface-gallery {
  box-sizing: border-box;
  width: min(1180px, calc(100vw - 40px));
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  background:
    radial-gradient(128% 118% at 8% -18%, rgba(88, 190, 255, 0.18), transparent 58%),
    radial-gradient(120% 130% at 98% 0%, rgba(255, 214, 130, 0.16), transparent 58%),
    radial-gradient(90% 96% at 58% 100%, rgba(126, 238, 198, 0.1), transparent 62%),
    rgba(8, 16, 28, 0.96);
}

.progression-hub-card.is-surface-gallery .progression-hub-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
}

.mode-gallery-surface {
  display: grid;
  gap: 16px;
  padding-bottom: 4px;
}

.mode-gallery-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.mode-gallery-hero-title {
  margin: 2px 0 0;
  color: rgba(248, 253, 255, 0.97);
  font: 900 30px/1.02 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-hero-copy {
  max-width: 680px;
  margin: 8px 0 0;
  color: rgba(223, 239, 247, 0.78);
  font: 650 13px/1.45 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mode-gallery-hero-stats span,
.mode-gallery-state,
.mode-gallery-progress-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(205, 237, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(230, 244, 252, 0.86);
  font: 800 11px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-hero-stats .mode-gallery-balance {
  border-color: rgba(255, 226, 161, 0.26);
  background: rgba(255, 226, 161, 0.08);
  color: rgba(255, 236, 186, 0.94);
}

.mode-gallery-aura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
  gap: 14px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 226, 161, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 226, 161, 0.09), rgba(126, 238, 198, 0.035)),
    rgba(255, 255, 255, 0.035);
}

.mode-gallery-mini-title {
  color: rgba(255, 226, 161, 0.92);
  font: 900 12px/1.2 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

.mode-gallery-mini-meta {
  margin-top: 4px;
  color: rgba(224, 238, 248, 0.76);
}

.mode-gallery-aura-meter {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 161, 0.24);
  background: rgba(6, 10, 17, 0.58);
}

.mode-gallery-aura-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 226, 161, 0.88), rgba(126, 238, 198, 0.82));
  box-shadow: 0 0 16px rgba(255, 226, 161, 0.22);
}

.mode-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.mode-gallery-card {
  position: relative;
  min-width: 0;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(207, 237, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(6, 12, 22, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 16px 36px rgba(0, 0, 0, 0.24);
  transition:
    transform 220ms var(--hud-ease, cubic-bezier(.22, 1, .36, 1)),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.mode-gallery-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(209, 239, 255, 0.09) 38%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(90% 70% at 50% 0%, rgba(126, 220, 255, 0.08), transparent 62%);
  transform: translateX(-18%);
  transition:
    opacity 240ms ease,
    transform 520ms var(--hud-ease, cubic-bezier(.22, 1, .36, 1));
}

.mode-gallery-card[data-mode-selectable="1"] {
  cursor: pointer;
}

.mode-gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(207, 237, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 20px 44px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(121, 216, 255, 0.08);
}

.mode-gallery-card:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.mode-gallery-card[data-mode-selectable="1"]:hover {
  border-color: rgba(126, 238, 198, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 22px 48px rgba(0, 0, 0, 0.32),
    0 0 28px rgba(126, 238, 198, 0.12);
}

.mode-gallery-card[data-mode-selectable="1"]:focus-visible {
  outline: 2px solid rgba(137, 222, 255, 0.78);
  outline-offset: 3px;
}

.mode-gallery-card.is-locked,
.mode-gallery-card.is-unlocked,
.mode-gallery-card.is-prestige,
.mode-gallery-card.is-hidden,
.mode-gallery-card.is-premium {
  border-color: rgba(207, 237, 255, 0.18);
}

.mode-gallery-card.is-unlocked {
  border-color: rgba(126, 238, 198, 0.34);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(126, 238, 198, 0.1), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(6, 12, 22, 0.72);
}

.mode-gallery-card.is-new-unlock {
  border-color: rgba(255, 226, 161, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 52px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(255, 226, 161, 0.14);
}

.mode-gallery-card.is-locked .mode-gallery-thumb,
.mode-gallery-card.is-prestige .mode-gallery-thumb,
.mode-gallery-card.is-premium .mode-gallery-thumb {
  filter: saturate(0.86) brightness(0.86);
}

.mode-gallery-thumb {
  position: relative;
  z-index: 1;
  min-height: 194px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(90% 86% at 50% 48%, rgba(255, 255, 255, 0.2), transparent 58%),
    linear-gradient(135deg, rgba(40, 84, 120, 0.88), rgba(9, 18, 30, 0.9));
}

.mode-gallery-thumb::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.16),
    inset 0 0 24px rgba(255, 255, 255, 0.1);
  transition:
    transform 320ms var(--hud-ease, cubic-bezier(.22, 1, .36, 1)),
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.mode-gallery-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.12) 42%, transparent 66%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.35));
  transform: translateX(-8%);
  transition: transform 420ms var(--hud-ease, cubic-bezier(.22, 1, .36, 1)), opacity 220ms ease;
}

.mode-gallery-card:hover .mode-gallery-thumb::before {
  transform: scale(1.045);
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 0 36px rgba(255, 255, 255, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.13);
}

.mode-gallery-card:hover .mode-gallery-thumb::after {
  transform: translateX(0);
}

.mode-gallery-thumb-ring {
  position: absolute;
  inset: 34%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.36);
  z-index: 1;
  transition: transform 300ms var(--hud-ease, cubic-bezier(.22, 1, .36, 1)), box-shadow 260ms ease;
}

.mode-gallery-card:hover .mode-gallery-thumb-ring {
  transform: scale(1.08);
  box-shadow: 0 0 44px rgba(255, 255, 255, 0.46);
}

.mode-gallery-thumb-code {
  position: absolute;
  left: 13px;
  bottom: 12px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.92);
  font: 900 11px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(32% 38% at 50% 50%, rgba(2, 8, 14, 0.32), rgba(2, 8, 14, 0) 72%);
  transition: transform 220ms var(--hud-ease, cubic-bezier(.22, 1, .36, 1)), opacity 220ms ease;
}

.mode-gallery-card:hover .mode-gallery-lock {
  transform: scale(1.018);
  opacity: 0.94;
}

.mode-gallery-lock::before {
  content: '';
  position: absolute;
  width: 86px;
  height: 74px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(240, 250, 255, 0.94), rgba(170, 207, 224, 0.94));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(188, 230, 255, 0.22);
  transform: translateY(24px);
}

.mode-gallery-lock::after {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 999px 999px 0 0;
  border: 11px solid rgba(232, 248, 255, 0.9);
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-26px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}

.mode-gallery-lock span {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 25px;
  border-radius: 999px;
  background: rgba(16, 39, 54, 0.72);
  transform: translateY(28px);
  box-shadow: 0 -13px 0 -3px rgba(16, 39, 54, 0.72);
}

.mode-gallery-lock.is-unlocking {
  animation: mode-gallery-lock-unlock 1500ms var(--hud-ease) forwards;
}

.mode-gallery-lock.is-unlocking::after {
  transform-origin: 12px 58px;
  animation: mode-gallery-shackle-open 980ms var(--hud-ease) forwards;
}

@keyframes mode-gallery-lock-unlock {
  0% { opacity: 1; transform: scale(1); }
  44% { opacity: 1; transform: scale(1.035); }
  70% { opacity: 0.48; transform: scale(0.96) translateY(-6px); }
  100% { opacity: 0; transform: scale(0.88) translateY(-16px); }
}

@keyframes mode-gallery-shackle-open {
  0% { transform: translateY(-26px) rotate(0deg); }
  48% { transform: translateY(-28px) rotate(-24deg); }
  100% { transform: translateY(-30px) rotate(-42deg); }
}

.mode-tone-classic .mode-gallery-thumb {
  background:
    radial-gradient(90% 80% at 44% 38%, rgba(126, 238, 198, 0.28), transparent 56%),
    linear-gradient(135deg, rgba(34, 98, 112, 0.9), rgba(8, 22, 29, 0.94));
}

.mode-tone-blackout .mode-gallery-thumb {
  background:
    radial-gradient(44% 48% at 50% 50%, rgba(255, 255, 255, 0.34), transparent 58%),
    linear-gradient(135deg, rgba(14, 16, 22, 0.98), rgba(0, 0, 0, 0.96));
}

.mode-tone-mirror .mode-gallery-thumb {
  background:
    linear-gradient(118deg, rgba(214, 232, 255, 0.34), transparent 38%, rgba(128, 204, 255, 0.2) 62%, transparent),
    linear-gradient(135deg, rgba(48, 73, 112, 0.94), rgba(16, 29, 48, 0.96));
}

.mode-tone-ring .mode-gallery-thumb {
  background:
    radial-gradient(60% 70% at 76% 32%, rgba(255, 226, 161, 0.3), transparent 56%),
    linear-gradient(135deg, rgba(104, 68, 46, 0.92), rgba(18, 27, 33, 0.96));
}

.mode-tone-breath .mode-gallery-thumb {
  background:
    radial-gradient(52% 64% at 50% 70%, rgba(255, 130, 150, 0.22), transparent 58%),
    linear-gradient(135deg, rgba(52, 40, 54, 0.94), rgba(12, 15, 22, 0.96));
}

.mode-tone-mote .mode-gallery-thumb {
  background:
    radial-gradient(16px 16px at 24% 34%, rgba(126, 238, 198, 0.6), transparent 70%),
    radial-gradient(14px 14px at 72% 58%, rgba(255, 226, 161, 0.58), transparent 70%),
    linear-gradient(135deg, rgba(44, 80, 58, 0.92), rgba(9, 22, 22, 0.96));
}

.mode-tone-pulse .mode-gallery-thumb {
  background:
    linear-gradient(90deg, rgba(255, 118, 150, 0.24), transparent 28%, rgba(126, 238, 198, 0.22) 64%, transparent),
    linear-gradient(135deg, rgba(38, 34, 58, 0.95), rgba(9, 14, 24, 0.96));
}

.mode-tone-orbit .mode-gallery-thumb {
  background:
    radial-gradient(70% 70% at 70% 44%, rgba(255, 226, 161, 0.24), transparent 58%),
    linear-gradient(135deg, rgba(48, 76, 118, 0.92), rgba(11, 20, 31, 0.96));
}

.mode-tone-reverse .mode-gallery-thumb {
  background:
    radial-gradient(42% 46% at 50% 50%, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.72) 36%, transparent 38%),
    radial-gradient(84% 76% at 34% 26%, rgba(167, 220, 255, 0.32), transparent 58%),
    linear-gradient(135deg, rgba(54, 82, 112, 0.92), rgba(12, 19, 29, 0.96));
}

.mode-tone-trial .mode-gallery-thumb {
  background:
    conic-gradient(from 0.15turn at 50% 50%, rgba(255, 226, 161, 0.3), transparent 0.2turn, rgba(126, 238, 198, 0.26), transparent 0.48turn, rgba(137, 211, 255, 0.26), transparent 0.74turn, rgba(255, 226, 161, 0.3)),
    linear-gradient(135deg, rgba(40, 73, 92, 0.94), rgba(9, 17, 27, 0.96));
}

.mode-tone-cursor .mode-gallery-thumb {
  background:
    radial-gradient(38% 42% at 50% 50%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(24% 24% at 72% 28%, rgba(255, 226, 161, 0.28), transparent 70%),
    linear-gradient(135deg, rgba(34, 93, 92, 0.94), rgba(7, 20, 28, 0.96));
}

.mode-tone-cursor .mode-gallery-thumb::before {
  inset: 23%;
  transform: translate(18%, -12%);
}

.mode-tone-gravity .mode-gallery-thumb {
  background:
    linear-gradient(130deg, transparent 35%, rgba(180, 245, 255, 0.25) 36%, transparent 50%),
    radial-gradient(70% 60% at 74% 28%, rgba(106, 190, 255, 0.26), transparent 60%),
    linear-gradient(135deg, rgba(38, 68, 110, 0.94), rgba(8, 18, 30, 0.96));
}

.mode-tone-curve .mode-gallery-thumb {
  background:
    repeating-conic-gradient(from 18deg, rgba(132, 226, 255, 0.34) 0 16deg, rgba(255, 226, 142, 0.26) 16deg 28deg, transparent 28deg 42deg),
    radial-gradient(circle at 52% 48%, rgba(206, 247, 255, 0.24), transparent 30%),
    linear-gradient(135deg, rgba(21, 57, 78, 0.94), rgba(8, 18, 30, 0.96));
}

.mode-tone-curve .mode-gallery-thumb-ring {
  box-shadow:
    0 0 0 8px rgba(130, 226, 255, 0.035),
    0 0 30px rgba(130, 226, 255, 0.28);
}

.mode-tone-vortex .mode-gallery-thumb {
  background:
    conic-gradient(from 30deg, rgba(255, 226, 142, 0.34), rgba(132, 226, 255, 0.42), rgba(24, 44, 68, 0.82), rgba(255, 226, 142, 0.34)),
    radial-gradient(circle at 52% 48%, rgba(10, 18, 31, 0.96) 0 18%, rgba(132, 226, 255, 0.13) 19% 38%, transparent 39%),
    linear-gradient(135deg, rgba(18, 40, 65, 0.96), rgba(7, 15, 28, 0.98));
}

.mode-tone-vortex .mode-gallery-thumb-ring {
  border-style: solid;
  transform: rotate(18deg);
  box-shadow:
    0 0 0 10px rgba(132, 226, 255, 0.032),
    0 0 34px rgba(132, 226, 255, 0.24);
}

.mode-tone-echo .mode-gallery-thumb {
  background:
    radial-gradient(circle at 34% 50%, rgba(248, 253, 255, 0.92) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(186, 228, 255, 0.18) 0 13%, transparent 14%),
    radial-gradient(circle at 66% 50%, rgba(186, 228, 255, 0.11) 0 17%, transparent 18%),
    linear-gradient(135deg, rgba(46, 66, 104, 0.94), rgba(8, 16, 30, 0.98));
}

.mode-tone-echo .mode-gallery-thumb-ring {
  border-style: dashed;
  box-shadow:
    -18px 0 0 -10px rgba(186, 228, 255, 0.18),
    18px 0 0 -10px rgba(186, 228, 255, 0.10),
    0 0 28px rgba(132, 194, 255, 0.24);
}

.mode-tone-storm .mode-gallery-thumb {
  background:
    radial-gradient(16px 16px at 28% 36%, rgba(255, 226, 161, 0.66), transparent 72%),
    radial-gradient(13px 13px at 74% 52%, rgba(255, 226, 161, 0.52), transparent 72%),
    radial-gradient(9px 9px at 58% 28%, rgba(255, 226, 161, 0.48), transparent 72%),
    linear-gradient(135deg, rgba(78, 44, 58, 0.95), rgba(17, 16, 25, 0.97));
}

.mode-tone-bounce .mode-gallery-thumb {
  background:
    radial-gradient(circle at 23% 24%, rgba(255, 226, 161, 0.72) 0 4%, transparent 5%),
    radial-gradient(circle at 78% 72%, rgba(121, 216, 255, 0.52) 0 5%, transparent 6%),
    linear-gradient(135deg, rgba(52, 48, 83, 0.95), rgba(15, 24, 36, 0.96));
}

.mode-tone-bounce .mode-gallery-thumb::before {
  background:
    linear-gradient(140deg, transparent 24%, rgba(255, 226, 161, 0.30) 25% 28%, transparent 29%),
    linear-gradient(40deg, transparent 50%, rgba(121, 216, 255, 0.18) 51% 54%, transparent 55%);
}

.mode-tone-false .mode-gallery-thumb {
  background:
    radial-gradient(circle at 32% 38%, transparent 0 19%, rgba(255, 255, 255, 0.26) 20% 22%, transparent 23%),
    radial-gradient(circle at 66% 56%, transparent 0 23%, rgba(255, 226, 161, 0.25) 24% 26%, transparent 27%),
    linear-gradient(135deg, rgba(33, 45, 75, 0.96), rgba(16, 20, 34, 0.96));
}

.mode-tone-false .mode-gallery-thumb-ring {
  box-shadow:
    18px 8px 0 -3px rgba(255, 255, 255, 0.18),
    -20px -6px 0 -5px rgba(255, 226, 161, 0.18),
    0 0 34px rgba(121, 216, 255, 0.14);
}

.mode-tone-gates .mode-gallery-thumb {
  background:
    conic-gradient(from 20deg, rgba(255, 228, 140, 0.42) 0 16%, transparent 16% 32%, rgba(120, 219, 255, 0.34) 32% 47%, transparent 47% 68%, rgba(255, 228, 140, 0.34) 68% 82%, transparent 82% 100%),
    radial-gradient(circle at 50% 50%, rgba(9, 19, 34, 0.92), rgba(5, 10, 18, 0.96));
}

.mode-tone-gates .mode-gallery-thumb-ring {
  border-style: dashed;
  box-shadow: 0 0 32px rgba(255, 228, 140, 0.18);
}

.mode-tone-memory .mode-gallery-thumb {
  background:
    linear-gradient(90deg, rgba(236, 250, 255, 0.22), transparent 24%, rgba(236, 250, 255, 0.16) 50%, transparent 74%),
    linear-gradient(135deg, rgba(28, 37, 54, 0.96), rgba(6, 10, 18, 0.96));
}

.mode-tone-memory .mode-gallery-thumb::after {
  background:
    radial-gradient(circle at 28% 45%, rgba(255, 255, 255, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 55%, rgba(205, 237, 255, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 42%, rgba(255, 226, 161, 0.24) 0 2px, transparent 3px);
}

.mode-tone-portal .mode-gallery-thumb {
  background:
    radial-gradient(circle at 8% 50%, rgba(122,219,255,0.42), transparent 23%),
    radial-gradient(circle at 92% 50%, rgba(255,216,146,0.34), transparent 24%),
    linear-gradient(135deg, rgba(12, 31, 48, 0.96), rgba(7, 15, 29, 0.98));
}

.mode-tone-portal .mode-gallery-thumb::after {
  background:
    linear-gradient(90deg, rgba(122,219,255,0.28) 0 3px, transparent 3px calc(100% - 3px), rgba(255,216,146,0.24) calc(100% - 3px)),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(203,236,255,0.10) 14px 15px);
}

.mode-tone-shutter .mode-gallery-thumb {
  background:
    conic-gradient(from 25deg, rgba(235,248,255,0.22), rgba(13,24,38,0.92), rgba(235,248,255,0.18), rgba(8,14,24,0.96)),
    radial-gradient(circle at 50% 50%, rgba(151,218,255,0.34), transparent 46%);
}

.mode-tone-shutter .mode-gallery-thumb::before {
  background:
    conic-gradient(from 0deg, transparent 0 8%, rgba(255,255,255,0.16) 8% 14%, transparent 14% 24%, rgba(255,255,255,0.12) 24% 30%, transparent 30% 100%);
}

.mode-tone-minefield .mode-gallery-thumb {
  background:
    radial-gradient(circle at 34% 40%, rgba(255, 226, 138, 0.40) 0 5%, transparent 6%),
    radial-gradient(circle at 67% 62%, rgba(128, 220, 255, 0.34) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 50%, rgba(114, 214, 255, 0.18), transparent 58%),
    linear-gradient(140deg, rgba(7, 16, 28, 0.96), rgba(15, 24, 37, 0.94));
}

.mode-tone-minefield .mode-gallery-thumb::before {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 999px;
  border: 1px dashed rgba(255, 226, 138, 0.62);
  box-shadow: 0 0 24px rgba(255, 226, 138, 0.14);
}

.mode-tone-hidden .mode-gallery-thumb {
  filter: saturate(0.7);
  background:
    radial-gradient(54% 56% at 48% 48%, rgba(255, 255, 255, 0.12), transparent 56%),
    linear-gradient(135deg, rgba(39, 42, 52, 0.96), rgba(4, 8, 12, 0.98));
}

.mode-tone-premium .mode-gallery-thumb {
  background:
    radial-gradient(70% 60% at 76% 22%, rgba(255, 226, 161, 0.32), transparent 58%),
    radial-gradient(70% 70% at 24% 72%, rgba(126, 238, 198, 0.24), transparent 56%),
    linear-gradient(135deg, rgba(82, 52, 92, 0.92), rgba(18, 18, 34, 0.96));
}

.mode-gallery-card-body {
  display: flex;
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
}

.mode-gallery-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mode-gallery-number {
  color: rgba(182, 220, 238, 0.72);
  font: 850 11px/1.2 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

.mode-gallery-title {
  margin: 3px 0 0;
  color: rgba(248, 253, 255, 0.98);
  font: 900 21px/1.08 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-new-label {
  width: fit-content;
  border: 1px solid rgba(255, 226, 161, 0.28);
  border-radius: 999px;
  padding: 4px 8px;
  color: rgba(255, 236, 196, 0.9);
  background: rgba(255, 226, 161, 0.08);
  font: 900 10px/1 var(--hud-font-body);
  letter-spacing: 0;
  text-transform: uppercase;
}

.mode-gallery-line {
  min-height: 38px;
  margin: 0;
  color: rgba(224, 238, 248, 0.78);
  font: 650 13px/1.45 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-progress {
  display: grid;
  gap: 7px;
}

.mode-gallery-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(227, 241, 250, 0.82);
  font: 800 11px/1.2 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-meter {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(203, 236, 255, 0.14);
  background: rgba(5, 10, 18, 0.62);
}

.mode-gallery-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 238, 198, 0.82), rgba(255, 226, 161, 0.82));
  box-shadow: 0 0 16px rgba(126, 238, 198, 0.18);
}

.mode-gallery-context {
  display: grid;
  gap: 6px;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(205, 237, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(5, 10, 18, 0.46);
}

.mode-gallery-context-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: rgba(218, 234, 245, 0.76);
  font: 750 11px/1.28 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-context-row span {
  color: rgba(182, 220, 238, 0.7);
}

.mode-gallery-context-row strong {
  min-width: 0;
  color: rgba(245, 252, 255, 0.9);
  font: inherit;
  font-weight: 900;
  text-align: right;
}

.mode-gallery-routes {
  display: grid;
  gap: 7px;
}

.mode-gallery-route {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(205, 237, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(228, 241, 249, 0.82);
  font: 700 12px/1.3 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.mode-gallery-route-kind {
  color: rgba(255, 226, 161, 0.86);
  font: 900 10px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

.mode-gallery-route.is-paid .mode-gallery-route-kind {
  color: rgba(126, 238, 198, 0.9);
}

.mode-gallery-route.is-complete .mode-gallery-route-kind,
.mode-gallery-route.is-runtime .mode-gallery-route-kind {
  color: rgba(126, 238, 198, 0.92);
}

.mode-gallery-route.is-prestige .mode-gallery-route-kind {
  color: rgba(255, 130, 150, 0.92);
}

.mode-gallery-route.is-legendary {
  border-color: rgba(255, 226, 161, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 226, 161, 0.085), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.035);
}

.mode-gallery-route.is-legendary .mode-gallery-route-kind {
  color: rgba(255, 226, 161, 0.96);
}

.mode-gallery-route em {
  color: rgba(255, 226, 161, 0.86);
  font-style: normal;
  font-weight: 900;
}

.mode-gallery-route.is-mystery .mode-gallery-route-kind {
  color: rgba(190, 210, 224, 0.9);
}

.mode-gallery-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mode-gallery-action {
  min-width: 136px;
}

.mode-gallery-buy,
.mode-gallery-dev-unlock {
  min-width: 118px;
  min-height: 36px;
  border-radius: 999px;
  font: 850 12px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.mode-gallery-buy {
  border-color: rgba(255, 226, 161, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 226, 161, 0.18), rgba(255, 226, 161, 0.07));
  color: rgba(255, 238, 204, 0.95);
}

.mode-gallery-buy.is-disabled,
.mode-gallery-buy:disabled {
  cursor: not-allowed;
  border-color: rgba(205, 220, 232, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(206, 219, 230, 0.42);
  box-shadow: none;
}

.mode-gallery-dev-unlock {
  border-color: rgba(169, 207, 255, 0.26);
  background: rgba(127, 171, 255, 0.08);
  color: rgba(208, 226, 255, 0.82);
}

.progression-gallery-feedback {
  color: rgba(224, 238, 248, 0.78);
}

.daily-ritual-card--simple {
  width: min(760px, calc(100vw - 28px));
}

.daily-ritual-card--lantern {
  width: min(820px, calc(100vw - 28px));
}

.daily-lantern-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
  padding: 16px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 152, 0.22);
  background:
    radial-gradient(80% 110% at 16% 10%, rgba(255, 218, 122, 0.22), transparent 60%),
    radial-gradient(80% 100% at 88% 6%, rgba(104, 217, 255, 0.14), transparent 62%),
    linear-gradient(135deg, rgba(30, 43, 69, 0.94), rgba(10, 17, 30, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 18px 44px rgba(0, 0, 0, 0.28);
}

.daily-lantern-art {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 242, 180, 0.46), transparent 22%),
    radial-gradient(circle at 50% 62%, rgba(89, 214, 255, 0.25), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.daily-lantern-art::before,
.daily-lantern-art::after {
  content: '';
  position: absolute;
  inset: 19% 31%;
  border-radius: 999px 999px 42% 42%;
  border: 2px solid rgba(255, 232, 163, 0.62);
  box-shadow: 0 0 36px rgba(255, 214, 111, 0.28), inset 0 0 30px rgba(255, 241, 184, 0.12);
}

.daily-lantern-art::after {
  inset: 71% 26% 13%;
  border-radius: 999px;
  background: rgba(255, 210, 98, 0.2);
}

.daily-lantern-glass {
  position: absolute;
  inset: 25% 38% 24%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(255, 224, 128, 0.34) 34%, rgba(81, 210, 255, 0.12) 72%, transparent);
  filter: blur(0.2px);
}

.daily-lantern-reward-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.96);
  font: 1000 52px/1 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  text-shadow: 0 0 22px rgba(255, 222, 126, 0.7), 0 0 46px rgba(87, 218, 255, 0.36);
}

.daily-lantern-copy {
  align-self: center;
  min-width: 0;
}

.daily-lantern-meter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
}

.daily-lantern-meter-row span {
  color: rgba(255, 232, 166, 0.9);
  font: 900 12px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.daily-today-thread-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.daily-thread-card {
  min-width: 0;
  min-height: 126px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid rgba(205, 237, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.daily-thread-card .daily-goal-progress-badge {
  justify-self: start;
}

.daily-constellation-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.daily-constellation-node {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(205, 237, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}

.daily-constellation-node.is-lit {
  border-color: rgba(255, 222, 126, 0.82);
  background: rgba(255, 219, 112, 0.78);
  box-shadow: 0 0 18px rgba(255, 217, 107, 0.36);
}

.daily-constellation-node.is-finale {
  width: 24px;
  height: 24px;
}

.daily-tomorrow-tease {
  margin-top: 11px;
  color: rgba(205, 229, 240, 0.68);
  font: 750 12px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  text-align: center;
}

.daily-help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid rgba(205, 237, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(230, 244, 252, 0.82);
  font: 900 12px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  vertical-align: middle;
}

.daily-goal-hero {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.daily-goal-thumb {
  position: relative;
  min-height: 174px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(205, 237, 255, 0.16);
  background:
    linear-gradient(118deg, rgba(214, 232, 255, 0.34), transparent 38%, rgba(128, 204, 255, 0.2) 62%, transparent),
    linear-gradient(135deg, rgba(48, 73, 112, 0.94), rgba(16, 29, 48, 0.96));
}

.daily-goal-thumb::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.46);
  box-shadow: 0 0 34px rgba(125, 218, 255, 0.18), inset 0 0 26px rgba(255, 255, 255, 0.08);
}

.daily-goal-thumb span {
  position: absolute;
  inset: 39%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.34);
}

.daily-goal-copy {
  min-width: 0;
  align-self: center;
}

.daily-goal-kicker {
  color: rgba(191, 233, 255, 0.82);
  font: 900 11px/1.2 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

.daily-goal-title {
  margin: 5px 0 0;
  color: rgba(248, 253, 255, 0.98);
  font: 900 30px/1.04 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.daily-goal-line {
  margin: 8px 0 0;
  color: rgba(224, 238, 248, 0.78);
  font: 650 13px/1.45 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.daily-goal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.daily-goal-stats span,
.daily-goal-progress-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(205, 237, 255, 0.15);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(230, 244, 252, 0.82);
  font: 800 11px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.daily-goal-progress-panel {
  margin-top: 16px;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(205, 237, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.daily-goal-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.daily-goal-progress-title {
  color: rgba(248, 253, 255, 0.94);
  font: 900 15px/1.2 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.daily-goal-progress-meta,
.daily-goal-next {
  color: rgba(224, 238, 248, 0.76);
  font: 650 12px/1.42 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.daily-goal-progress-meta {
  margin-top: 4px;
}

.daily-goal-next {
  margin: 11px 0 0;
}

.daily-goal-routes {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.daily-goal-route {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(205, 237, 255, 0.12);
  background: rgba(0, 0, 0, 0.14);
}

.daily-goal-route span {
  color: rgba(255, 226, 161, 0.84);
  font: 900 10px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

.daily-goal-route strong {
  color: rgba(230, 244, 252, 0.86);
  font: 750 12px/1.32 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
}

.daily-ritual-card {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(125, 218, 255, 0.12), rgba(125, 218, 255, 0) 48%),
    radial-gradient(90% 90% at 100% 8%, rgba(255, 213, 139, 0.11), rgba(255, 213, 139, 0) 52%),
    linear-gradient(180deg, rgba(13, 21, 34, 0.96), rgba(8, 14, 24, 0.96));
}

.daily-ritual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.daily-ritual-title {
  margin-top: 2px;
}

.daily-ritual-subtitle {
  margin-top: 4px;
}

.daily-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.daily-status-row > div {
  min-width: 0;
  border: 1px solid rgba(205, 237, 255, 0.14);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.045);
}

.daily-status-row span {
  display: block;
  color: rgba(205, 229, 240, 0.55);
  font: 850 10px/1 var(--hud-font-body);
  letter-spacing: 0;
  text-transform: uppercase;
}

.daily-status-row strong {
  display: block;
  margin-top: 5px;
  color: rgba(247, 252, 255, 0.94);
  font: 900 13px/1.15 var(--hud-font-body);
}

.daily-ritual-hero {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(202, 235, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
}

.daily-ritual-orb {
  width: 58px;
  height: 58px;
}

.daily-ritual-copy {
  min-width: 0;
}

.daily-ritual-mood {
  color: rgba(246, 252, 255, 0.96);
  font: 800 20px/1.1 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
}

.daily-ritual-cue {
  margin-top: 6px;
  color: rgba(225, 239, 249, 0.82);
  font: 650 13px/1.45 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.daily-ritual-accepted {
  margin-top: 9px;
  color: rgba(255, 226, 161, 0.86);
  font: 800 11px/1.2 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.daily-focus-shelf {
  margin-top: 14px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(202, 235, 255, 0.15);
  background:
    radial-gradient(100% 130% at 0% -20%, rgba(123, 218, 255, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.028);
}

.daily-focus-shelf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.daily-focus-shelf-title {
  color: rgba(247, 252, 255, 0.95);
  font: 850 13px/1.25 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.daily-focus-shelf-meta {
  margin-top: 3px;
  color: rgba(220, 235, 246, 0.74);
  font: 650 12px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.daily-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.daily-focus-card {
  min-width: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(205, 237, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
}

.daily-focus-card.is-accepted {
  border-color: rgba(134, 223, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(134, 223, 255, 0.08) inset;
}

.daily-focus-card.is-complete {
  border-color: rgba(255, 222, 150, 0.38);
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(255, 222, 150, 0.11), transparent 58%),
    rgba(255, 255, 255, 0.035);
}

.daily-focus-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.daily-focus-title {
  margin-top: 4px;
  color: rgba(247, 252, 255, 0.95);
  font: 850 13px/1.2 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
}

.daily-focus-body {
  margin-top: 8px;
  color: rgba(219, 235, 246, 0.78);
  font: 650 12px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.daily-focus-meta {
  margin-top: 8px;
  color: rgba(255, 226, 161, 0.82);
  font: 800 10px/1.2 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.daily-focus-choice-btn {
  flex: 0 0 auto;
}

.daily-ritual-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-ritual-panel {
  min-height: 116px;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid rgba(202, 235, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
}

.daily-ritual-panel-title {
  color: rgba(244, 251, 255, 0.94);
  font: 850 13px/1.25 var(--hud-font-display, "Space Grotesk", ui-sans-serif, system-ui);
}

.daily-ritual-panel-meta {
  margin-top: 5px;
  color: rgba(216, 232, 242, 0.74);
  font: 650 12px/1.35 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
}

.daily-ritual-panel-action {
  margin-top: 12px;
}

.daily-ritual-meter {
  height: 8px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(203, 236, 255, 0.14);
  background: rgba(6, 11, 19, 0.58);
}

.daily-ritual-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(125, 218, 255, 0.78), rgba(255, 223, 153, 0.84));
  box-shadow: 0 0 18px rgba(125, 218, 255, 0.24);
}

.daily-ritual-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.daily-ritual-node {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 239, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.daily-ritual-node.is-lit {
  border-color: rgba(255, 226, 161, 0.72);
  background: rgba(255, 226, 161, 0.82);
  box-shadow: 0 0 14px rgba(255, 213, 139, 0.36);
}

.daily-ritual-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .ambient-results-dock {
    width: calc(100vw - 12px);
    bottom: 8px;
    padding: 10px 10px 9px;
  }

  .progression-hub-card {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
    padding: 14px 12px 12px;
  }

  .progression-hub-card.is-surface-chests {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    padding: 10px;
    border-radius: 0;
  }

  .progression-hub-card.is-surface-missions {
    width: calc(100vw - 14px);
    height: calc(100vh - 14px);
    max-height: calc(100vh - 14px);
    padding: 14px 12px 12px;
  }

  .progression-hub-card.is-surface-gallery {
    width: calc(100vw - 14px);
    height: calc(100vh - 14px);
    max-height: calc(100vh - 14px);
    padding: 14px 12px 12px;
  }

  .progression-hub-stat-grid {
    grid-template-columns: 1fr;
  }

  .progression-hub-panel {
    max-height: calc(100vh - 250px);
  }

  .progression-hub-card.is-surface-chests .progression-hub-panel {
    max-height: none;
  }

  .progression-hub-card.is-surface-chests .progression-hub-head {
    align-items: center;
    gap: 8px;
  }

  .progression-hub-card.is-surface-chests .progression-hub-meta,
  .progression-hub-card.is-surface-chests .progression-hub-icon {
    display: none;
  }

  .season-pass-stage {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px;
  }

  .season-pass-stage-mascot {
    width: 56px;
    height: 56px;
  }

  .season-pass-stage-mascot img {
    width: 54px;
    height: 54px;
  }

  .season-pass-xp-card,
  .season-pass-actions {
    grid-column: 1 / -1;
  }

  .season-pass-actions {
    justify-content: flex-start;
  }

  .season-pass-runway {
    gap: 12px;
    scroll-padding-inline: 8px;
    padding-inline: 8px;
  }

  .season-pass-track-frame {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .season-pass-track-rail {
    gap: 12px;
    padding: 8px 0 18px;
  }

  .season-pass-track-rail-label {
    font-size: 10px;
  }

  .season-pass-checkpoint-card {
    flex-basis: min(84vw, 360px);
    padding: 10px;
  }

  .season-pass-reward-lane {
    border-radius: 14px;
  }

  .season-pass-check-overlay {
    top: 8px;
    right: 8px;
    max-width: calc(100% - 58px);
  }

  .season-pass-check-badge {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 14px;
  }

  .season-pass-check-xp {
    min-height: 26px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .season-pass-reward-copy {
    left: 52px;
    right: 84px;
    bottom: 10px;
  }

  .season-pass-reward-title {
    font-size: 14px;
  }

  .season-pass-reward-note {
    min-height: 20px;
    font-size: 9px;
  }

  .season-pass-reward-action {
    right: 8px;
    bottom: 8px;
    max-width: 78px;
  }

  .season-pass-state-pill {
    max-width: 78px;
    min-height: 26px;
    font-size: 9px;
  }

  .season-pass-claim-btn {
    min-height: 30px;
    padding-inline: 11px;
  }

  .season-pass-amount {
    top: 44px;
    right: 8px;
    min-width: 42px;
    font-size: 15px;
    padding: 5px 8px;
  }

  .analysis-metric-grid {
    grid-template-columns: 1fr;
  }

  .streak-overlay-card {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
    padding: 14px 12px 12px;
  }

  .streak-value-flame {
    width: 34px;
    height: 34px;
  }

  .streak-value-number {
    font-size: 32px;
  }

  .streak-freeze-sections {
    grid-template-columns: 1fr;
  }

  .streak-freeze-item {
    width: 56px;
    height: 56px;
  }

  .streak-freeze-icon {
    width: 50px;
    height: 50px;
  }

  .achievement-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .achievement-list {
    grid-template-columns: 1fr;
  }

  .mission-section {
    padding: 10px;
  }

  .mission-daily-grid,
  .mission-weekly-grid {
    justify-content: center;
    gap: 10px;
  }

  .mission-orb-daily,
  .mission-orb-weekly {
    width: min(100%, 220px);
    max-width: 220px;
  }

  .mission-orb-weekly {
    flex-basis: min(100%, 220px);
  }

  .mission-orb-daily {
    min-height: 236px;
  }

  .mission-orb-ring {
    width: min(var(--mission-ring-size), 34vw, 126px);
  }

  .mission-card-actions {
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
  }

  .mission-focus-paths {
    grid-template-columns: 1fr;
  }

  .mission-focus-path {
    min-height: 0;
  }

  .mission-focus-shelf-head,
  .mission-support-route {
    align-items: flex-start;
    flex-direction: column;
  }

  .drop-overlay-card {
    width: min(96vw, 520px);
    max-height: calc(100vh - 10px);
    padding: 11px;
    gap: 7px;
  }

  .drop-overlay-rarity {
    min-height: clamp(42px, 7.2vw, 72px);
  }

  .drop-overlay-gem {
    width: min(74vw, 44vh, 290px);
    min-height: min(74vw, 44vh, 290px);
  }

  .drop-overlay-gem-img {
    width: min(58vw, 35vh, 242px);
    height: min(58vw, 35vh, 242px);
  }

  .progression-gallery-grid {
    grid-template-columns: 1fr;
  }

  .progression-gallery-mode-grid {
    grid-template-columns: 1fr;
  }

  .mode-gallery-hero,
  .mode-gallery-aura {
    grid-template-columns: 1fr;
  }

  .mode-gallery-hero {
    flex-direction: column;
    gap: 10px;
  }

  .mode-gallery-hero-stats {
    justify-content: flex-start;
  }

  .mode-gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mode-gallery-card {
    min-height: 0;
  }

  .mode-gallery-thumb {
    min-height: clamp(174px, 48vw, 240px);
  }

  .mode-gallery-card-top,
  .mode-gallery-progress-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mode-gallery-route {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .mode-gallery-actions {
    justify-content: stretch;
  }

  .mode-gallery-action,
  .mode-gallery-buy,
  .mode-gallery-dev-unlock {
    width: 100%;
  }

  .wandering-difficulty-shell {
    padding: 16px;
  }

  .wandering-difficulty-options {
    grid-template-columns: 1fr;
  }

  .wandering-difficulty-option {
    min-height: 96px;
  }

  .progression-gallery-section-head {
    flex-direction: column;
  }

  .progression-gallery-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .progression-gallery-reveal-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .progression-gallery-reveal-action {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .daily-ritual-card {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
    padding: 14px 12px 12px;
  }

  .daily-ritual-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .daily-goal-hero {
    grid-template-columns: 1fr;
  }

  .daily-lantern-hero,
  .daily-today-thread-grid {
    grid-template-columns: 1fr;
  }

  .daily-lantern-art {
    min-height: 170px;
  }

  .daily-goal-title {
    font-size: 25px;
  }

  .daily-goal-progress-head {
    flex-direction: column;
  }

  .daily-goal-route {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .daily-ritual-orb {
    width: 48px;
    height: 48px;
  }

  .daily-focus-grid {
    grid-template-columns: 1fr;
  }

  .daily-focus-card {
    min-height: 0;
  }

  .daily-focus-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-ritual-grid {
    grid-template-columns: 1fr;
  }

  .daily-ritual-actions {
    justify-content: stretch;
  }

  .daily-ritual-actions .ui-btn {
    flex: 1 1 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wandering-difficulty-chooser,
  .wandering-difficulty-option,
  .mode-gallery-lock.is-unlocking,
  .mode-gallery-lock.is-unlocking::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progression-chip-row,
  .progression-hub-panel,
  .mission-card,
  .achievement-card,
  .chest-reveal-phase,
  .streak-feedback-toast,
  .progression-results-sequence-beat,
  .progression-results-chest-preview,
  .progress-checkbox-row,
  .progress-checkbox,
  .progress-checkbox-mark,
  .progress-checkbox-inline,
  .progress-checkbox-inline-mark,
  .progression-chip,
  .mission-orb-ring,
  .mission-seal-bar,
  .mission-seal-bar-fill,
  .mission-orb-check,
  .mission-orb-reward,
  .analysis-metric,
  .analysis-chart-wrap,
  .drop-overlay-rarity,
  .drop-overlay-gem,
  .drop-overlay-gem-img,
  .drop-overlay-reveal-stage,
  .drop-overlay-reward-type,
  .drop-overlay-reward-detail,
  .drop-overlay-reward-chip,
  .drop-overlay-collect-hint,
  .drop-overlay-vortex,
  .drop-overlay-flash {
    transition: none !important;
  }

  .reward-intel-card,
  .reward-intel-orb,
  .progression-gallery-fill {
    transition: none !important;
    animation: none !important;
  }

  .progression-levelup-notice.is-pulsing,
  .mission-card.is-claiming .mission-orb-ring,
  .mission-card.is-progress-updated .mission-orb-ring,
  .mission-card.is-claim-collecting,
  .mission-orb.is-claim-collecting::before,
  .mission-card.is-claim-collecting .mission-orb-ring,
  .mission-card.is-claim-collecting .mission-orb-core::before,
  .mission-card.is-claim-collecting .mission-orb-core::after,
  .mission-card.is-claimed .mission-orb-reward,
  .mission-seal-bar.is-claimable .mission-seal-bar-fill,
  .mission-seal-bar.is-claiming .mission-seal-bar-fill,
  .mission-seal-bar.is-progress-updated .mission-seal-bar-fill,
  .mission-seal-bar.is-claim-collecting,
  .mission-seal-bar.is-claim-collecting::after,
  .mission-seal-bar.is-claim-collecting .mission-seal-bar-fill,
  .mission-seal-bar.is-claim-collecting .mission-seal-bar-fill::after,
  .mission-seal-bar.is-claim-collecting .mission-seal-bar-reward,
  .achievement-card.is-claim-flash,
  .streak-feedback-toast.is-visible {
    animation: none !important;
  }

  .mission-card.is-claimable,
  .mission-card.is-claimable .mission-orb-ring,
  .achievement-card.is-claimable,
  .drop-overlay-gem.is-spin,
  .drop-overlay-gem.is-spin .drop-overlay-gem-img,
  .drop-overlay-gem.is-upgrade .drop-overlay-gem-img,
  .drop-overlay-gem.is-opened .drop-overlay-gem-img,
  .drop-overlay-card[data-drop-phase="upgrade"] .drop-overlay-rarity,
  .drop-collect-token,
  .drop-open-spark,
  .drop-tap-spark,
  .drop-overlay-card[data-drop-phase="open_burst"] {
    animation: none !important;
  }

  .drop-overlay-card::before {
    animation: none !important;
  }

  .mission-card.is-claiming,
  .mission-card.is-claim-collecting,
  .mission-card.is-claim-settling,
  .mission-seal-bar.is-claiming,
  .mission-seal-bar.is-claim-collecting,
  .mission-seal-bar.is-claim-settling,
  .achievement-card.is-claiming,
  .chest-reveal-phase {
    transform: none !important;
  }

  .chest-reveal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ambient-results-dock {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ambient-run-notification {
    transition: none !important;
  }

  .blackout-intro-title,
  .blackout-intro-veil,
  .blackout-intro-line {
    transition: none !important;
  }

  .ambient-chest-xp-orb,
  .progression-results-chest-sticker,
  .chest-meter-sticker,
  .progression-float-reward {
    animation: none !important;
  }
}

button:not(.shop-preview-overlay-backdrop) {
  max-width: min(100%, 320px) !important;
  overflow-wrap: anywhere;
}

.ui-btn:not(.shop-close-btn):not(.shop-preview-overlay-close),
button:not(.shop-preview-overlay-backdrop):not(.shop-close-btn):not(.shop-preview-overlay-close):not(.topbtn):not(.ambient-mode-option):not(.lb-tab):not(.shop-immersive-chip):not(.shop-palette-btn) {
  white-space: normal;
}

/* Final overrides for Season Pass premium polish and reward minigames. */
.season-pass-track-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.season-pass-track-rail {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0 24px;
}

.season-pass-track-rail-label {
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-radius: 999px;
  border: 1px solid rgba(137, 226, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(69, 188, 230, 0.28), rgba(6, 20, 34, 0.76)),
    rgba(9, 24, 38, 0.72);
  color: rgba(234, 250, 255, 0.96);
  font: 950 12px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.24);
}

.season-pass-track-rail-label.is-club {
  border-color: rgba(255, 221, 133, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 225, 130, 0.62), rgba(89, 50, 8, 0.84)),
    rgba(24, 15, 7, 0.86);
  color: #fff5ca;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 28px rgba(255, 194, 61, 0.22),
    0 14px 30px rgba(0, 0, 0, 0.3);
}

.season-pass-runway-shell .season-pass-runway {
  padding: 14px 20px 24px 2px;
}

.progression-hub-chests.season-pass-panel {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}

.progression-hub-chests .season-pass-runway-shell {
  min-height: clamp(320px, calc(100dvh - 224px), 660px);
  overflow: visible;
}

.progression-hub-chests .season-pass-track-frame {
  min-height: clamp(276px, calc(100dvh - 280px), 590px);
}

.progression-hub-chests .season-pass-feedback {
  order: 1;
  margin-top: 0;
}

.progression-hub-chests .season-pass-runway-shell {
  order: 2;
}

@media (max-height: 700px) {
  .progression-hub-card.is-surface-chests {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .progression-hub-card.is-surface-chests .progression-hub-head {
    gap: 6px;
  }

  .progression-hub-chests.season-pass-panel {
    gap: 8px;
  }

  .progression-hub-chests .season-pass-stage {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.82fr) auto;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .progression-hub-chests .season-pass-stage-mascot {
    display: none;
  }

  .progression-hub-chests .season-pass-title {
    font-size: clamp(18px, 2.4vw, 28px);
  }

  .progression-hub-chests .season-pass-meta {
    margin-top: 3px;
  }

  .progression-hub-chests .season-pass-xp-card {
    padding: 7px 9px;
    border-radius: 11px;
  }

  .progression-hub-chests .season-pass-xp-top {
    font-size: 11px;
  }

  .progression-hub-chests .season-pass-xp-top strong {
    font-size: 15px;
  }

  .progression-hub-chests .season-pass-xp-track {
    height: 8px;
    margin-top: 5px;
  }

  .progression-hub-chests .season-pass-xp-meta {
    display: none;
  }

  .progression-hub-chests .season-pass-actions {
    gap: 6px;
  }

  .progression-hub-chests .season-pass-actions .progression-chip {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .progression-hub-chests .season-pass-actions .ui-btn {
    min-height: 30px;
    padding-inline: 10px;
  }

  .progression-hub-chests .season-pass-dev-controls {
    gap: 6px;
    padding: 6px 8px;
  }

  .progression-hub-chests .season-pass-dev-controls span {
    display: none;
  }

  .progression-hub-chests .season-pass-dev-controls .ui-btn {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .progression-hub-chests .season-pass-runway-head {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
  }

  .progression-hub-chests .season-pass-arrow {
    width: 36px;
    height: 32px;
    min-height: 32px;
  }

  .progression-hub-chests .season-pass-runway-shell {
    gap: 6px;
    min-height: clamp(308px, calc(100dvh - 164px), 620px);
  }

  .progression-hub-chests .season-pass-track-frame {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    min-height: clamp(264px, calc(100dvh - 212px), 560px);
  }

  .progression-hub-chests .season-pass-track-rail {
    gap: 8px;
    padding: 8px 0 18px;
  }

  .progression-hub-chests .season-pass-runway-shell .season-pass-runway {
    box-sizing: border-box;
    padding: 8px 16px 18px 2px;
  }

  .progression-hub-chests .season-pass-checkpoint-card {
    flex-basis: min(480px, calc(100vw - 116px));
    align-self: stretch;
    height: auto;
    max-height: 100%;
    padding: 8px;
    contain-intrinsic-size: 360px 320px;
  }

  .progression-hub-chests .season-pass-lane-pair {
    gap: 8px;
  }

  .progression-hub-chests .season-pass-reward-copy {
    left: 46px;
    right: 82px;
    bottom: 8px;
  }

  .progression-hub-chests .season-pass-reward-title {
    max-width: calc(100% - 8px);
    font-size: 14px;
  }

  .progression-hub-chests .season-pass-amount {
    right: 8px;
    bottom: 42px;
    min-width: 42px;
    padding: 4px 7px;
    font-size: 14px;
  }

  .progression-hub-chests .season-pass-reward-action {
    right: 8px;
    bottom: 8px;
    max-width: 76px;
  }

  .progression-hub-chests .season-pass-state-pill {
    min-height: 24px;
    max-width: 76px;
    padding-inline: 8px;
    font-size: 9px;
  }

  .progression-hub-chests .season-pass-claim-btn {
    min-height: 28px;
    padding-inline: 10px;
  }

  .progression-hub-chests .season-pass-feedback {
    position: absolute;
    left: 8px;
    top: 4px;
    z-index: 5;
    align-self: flex-start;
    max-width: calc(100% - 12px);
    margin: 0;
    padding: 6px 10px;
    font-size: 11px;
    pointer-events: none;
  }
}

@media (max-height: 560px) {
  .progression-hub-chests .season-pass-stage {
    display: none;
  }

  .progression-hub-chests .season-pass-runway-shell {
    min-height: clamp(372px, calc(100dvh - 72px), 520px);
  }

  .progression-hub-chests .season-pass-track-frame {
    min-height: clamp(326px, calc(100dvh - 118px), 470px);
  }
}

.season-pass-reward-lane .season-pass-lane-chip {
  display: none;
}

.season-pass-reward-lane.is-highlighted,
.season-pass-reward-lane.is-value-great,
.season-pass-reward-lane.is-value-best {
  border-color: rgba(var(--season-rarity, 255, 218, 120), 0.62);
}

.season-pass-reward-lane.is-value-best {
  box-shadow:
    0 0 34px rgba(255, 216, 100, 0.24),
    0 16px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.season-pass-reward-lane.is-club.is-value-low,
.season-pass-reward-lane.is-club.is-value-mid {
  filter: saturate(1.08) brightness(1.05);
}

.season-pass-visual .reward-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}

.season-pass-visual .reward-visual-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 1;
}

.season-pass-visual .reward-visual-canvas.is-ready {
  opacity: 1;
}

.season-pass-visual.is-wheel-spin,
.season-pass-visual.is-luxury-wheel-spin,
.season-pass-visual.is-scratch-card,
.season-pass-visual.is-coins,
.season-pass-visual.is-lens,
.season-pass-visual.is-vfx,
.season-pass-visual.is-shop-item-unlock,
.season-pass-visual.is-background {
  background: transparent;
}

.season-pass-reward-lane.is-club .season-pass-visual::before {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 231, 155, 0.22), transparent 34%),
    linear-gradient(120deg, rgba(255, 246, 202, 0.16), rgba(255, 255, 255, 0) 36%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}

.season-pass-reward-lane.is-free .season-pass-visual::before {
  background:
    radial-gradient(circle at 72% 34%, rgba(123, 231, 255, 0.18), transparent 32%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 38%);
}

.progression-hub-chests .season-pass-reward-lane.is-club {
  border-color: rgba(255, 212, 105, 0.78);
  background:
    radial-gradient(circle at 62% 20%, rgba(255, 229, 140, 0.22), transparent 35%),
    linear-gradient(135deg, rgba(31, 20, 10, 0.94), rgba(18, 17, 27, 0.96) 52%, rgba(72, 43, 10, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 176, 0.2),
    inset 0 16px 36px rgba(255, 217, 118, 0.1),
    0 16px 42px rgba(255, 186, 54, 0.16);
}

.progression-hub-chests .season-pass-reward-lane.is-club .season-pass-claim-btn {
  color: #3d2605;
  background: linear-gradient(135deg, #fff2a8, #ffc64d 48%, #d88920);
  border-color: rgba(255, 246, 190, 0.86);
  box-shadow: 0 12px 30px rgba(255, 190, 50, 0.36);
}

.season-pass-dev-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px dashed rgba(255, 226, 150, 0.35);
  border-radius: 10px;
  background: rgba(35, 24, 8, 0.42);
}

.season-pass-dev-controls span {
  color: rgba(255, 229, 160, 0.92);
  font: 900 11px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.season-pass-dev-controls .ui-btn {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11px;
}

.season-pass-scratch-art,
.season-pass-wheel-art {
  position: relative;
  width: min(150px, 64%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.34));
}

.season-pass-scratch-art::before {
  content: '';
  width: 78%;
  aspect-ratio: 0.72;
  border-radius: 18px;
  border: 3px solid rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.26), transparent 38%),
    linear-gradient(145deg, #fff1a7, #e9a935 50%, #704515);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.2), 0 0 34px rgba(255, 205, 84, 0.3);
}

.season-pass-scratch-art::after {
  content: 'SCRATCH';
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%) rotate(-8deg);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(23, 14, 6, 0.68);
  color: rgba(255, 243, 190, 0.96);
  font: 1000 12px/1 var(--hud-font-body);
  letter-spacing: 0;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
}

.season-pass-scratch-art--drop::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 34%),
    radial-gradient(circle at 50% 44%, rgba(139, 236, 255, 0.72), transparent 25%),
    linear-gradient(145deg, #bff4ff, #8a7cff 48%, #5a2b9c);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.18), 0 0 34px rgba(126, 221, 255, 0.34);
}

.season-pass-scratch-art--drop::after {
  content: 'REVEAL';
  color: rgba(236, 250, 255, 0.98);
}

.season-pass-wheel-art::before {
  content: '';
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.62);
  background:
    conic-gradient(from -20deg, #ffd769 0 12.5%, #68e6ff 12.5% 25%, #b985ff 25% 37.5%, #ff7ea8 37.5% 50%, #78ffbf 50% 62.5%, #ff9864 62.5% 75%, #82a8ff 75% 87.5%, #fff1a6 87.5% 100%);
  box-shadow: inset 0 0 38px rgba(0,0,0,0.28), 0 0 38px rgba(116, 220, 255, 0.28);
}

.season-pass-wheel-art::after {
  content: '';
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff4b0;
  border: 3px solid rgba(72, 42, 10, 0.65);
}

.season-pass-visual.is-luxury-wheel-spin .season-pass-wheel-art::before {
  border-color: rgba(255, 236, 160, 0.9);
  box-shadow: inset 0 0 42px rgba(0,0,0,0.24), 0 0 52px rgba(255, 202, 66, 0.42);
}

/* Lightweight Season runway cards. These deliberately avoid per-card canvases. */
.progression-hub-chests .season-pass-checkpoint-card {
  background:
    linear-gradient(180deg, rgba(18, 31, 43, 0.88), rgba(8, 15, 25, 0.94));
  border-color: rgba(184, 218, 238, 0.16);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.progression-hub-chests .season-pass-checkpoint-card.is-current {
  border-color: rgba(118, 225, 255, 0.48);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(118, 225, 255, 0.12) inset;
}

.progression-hub-chests .season-pass-reward-lane {
  background:
    linear-gradient(135deg, rgba(13, 54, 72, 0.94), rgba(12, 25, 40, 0.96));
  border-color: rgba(122, 218, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

.progression-hub-chests .season-pass-reward-lane.is-club {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 207, 91, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(34, 22, 10, 0.98), rgba(12, 12, 18, 0.98) 54%, rgba(75, 48, 12, 0.94));
  border-color: rgba(255, 210, 88, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 181, 0.14),
    inset 0 14px 32px rgba(255, 209, 88, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.24);
}

.progression-hub-chests .season-pass-reward-lane::before {
  background:
    linear-gradient(90deg, rgba(2, 8, 15, 0.68) 0%, rgba(2, 8, 15, 0.22) 42%, rgba(2, 8, 15, 0.52) 100%),
    linear-gradient(0deg, rgba(2, 8, 15, 0.72) 0%, rgba(2, 8, 15, 0.08) 54%);
}

.progression-hub-chests .season-pass-reward-lane::after {
  opacity: 0.28;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14), transparent 30%, transparent 74%, rgba(126, 221, 255, 0.1));
}

.progression-hub-chests .season-pass-reward-lane.is-club::after {
  opacity: 0.46;
  background:
    linear-gradient(118deg, rgba(255, 245, 200, 0.18), transparent 30%, transparent 70%, rgba(255, 200, 75, 0.14)),
    radial-gradient(circle at 88% 16%, rgba(255, 224, 142, 0.25), transparent 32%);
}

.season-pass-visual--simple {
  background:
    radial-gradient(circle at 64% 36%, rgba(126, 221, 255, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(28, 98, 120, 0.62), rgba(22, 36, 62, 0.88));
}

.season-pass-reward-lane.is-club .season-pass-visual--simple {
  background:
    radial-gradient(circle at 64% 34%, rgba(255, 224, 132, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(84, 48, 11, 0.78), rgba(20, 17, 25, 0.92));
  filter: none;
}

.season-pass-visual--simple::before {
  background:
    radial-gradient(circle at 68% 34%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.13), transparent 36%);
}

.season-pass-css-icon,
.season-pass-scratch-art,
.season-pass-wheel-art,
.season-pass-bundle-art,
.season-pass-lantern-art,
.season-pass-ring-art,
.season-pass-sound-bars,
.season-pass-postcard-art,
.season-pass-stars-art,
.season-pass-badge-art,
.season-pass-portal-art {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(142px, 58%);
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.26));
}

.season-pass-css-icon--coins {
  width: min(190px, 72%);
  height: min(132px, 58%);
  aspect-ratio: auto;
}

.season-pass-css-icon--coins i {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid rgba(133, 79, 13, 0.72);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.68), transparent 22%),
    linear-gradient(145deg, #fff2a8, #ffc84d 52%, #d68117);
  box-shadow:
    inset 0 -6px 0 rgba(120, 65, 8, 0.18),
    0 12px 18px rgba(0, 0, 0, 0.22);
}

.season-pass-css-icon--coins i:nth-child(1) { left: 6%; bottom: 8%; }
.season-pass-css-icon--coins i:nth-child(2) { left: 26%; bottom: 22%; transform: scale(1.08); }
.season-pass-css-icon--coins i:nth-child(3) { left: 47%; bottom: 10%; transform: scale(0.96); }
.season-pass-css-icon--coins i:nth-child(4) { right: 6%; bottom: 25%; transform: scale(1.12); }
.season-pass-css-icon--coins i:nth-child(5) { left: 19%; top: 7%; transform: scale(0.9); }
.season-pass-css-icon--coins i:nth-child(6) { right: 28%; top: 3%; transform: scale(0.98); }
.season-pass-css-icon--coins i:nth-child(7) { right: 13%; bottom: 2%; transform: scale(0.86); }

.season-pass-css-icon--xp {
  width: min(132px, 52%);
  border-radius: 34px;
  color: #163248;
  font: 1000 34px/1 var(--hud-font-display);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.86), transparent 22%),
    linear-gradient(145deg, #a6f2ff, #fff6a6 52%, #75d7ff);
  box-shadow: 0 0 34px rgba(126, 221, 255, 0.34);
}

.season-pass-css-icon--potion {
  width: min(116px, 46%);
  border-radius: 999px 999px 40px 40px;
  background:
    linear-gradient(90deg, transparent 32%, rgba(255,255,255,0.48) 34% 43%, transparent 46%),
    linear-gradient(180deg, #ffef9a, #ff6bd3 48%, #6ee9ff);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.2), 0 0 34px rgba(255, 111, 202, 0.34);
}

.season-pass-css-icon--potion i {
  position: absolute;
  top: -20px;
  width: 56%;
  height: 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff5c1, #d99b38);
}

.season-pass-css-icon--drop,
.season-pass-css-icon--fragment {
  width: min(116px, 48%);
  clip-path: polygon(50% 0%, 88% 30%, 72% 100%, 28% 100%, 12% 30%);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.88), transparent 24%),
    linear-gradient(145deg, #aaf6ff, #7f7dff 48%, #d884ff);
  box-shadow: 0 0 34px rgba(126, 221, 255, 0.38);
}

.season-pass-css-icon--drop::before,
.season-pass-css-icon--fragment::before {
  content: '';
  position: absolute;
  inset: 12% 18% 48% 18%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(255, 255, 255, 0.42);
}

.season-pass-css-icon--key {
  width: min(150px, 62%);
  aspect-ratio: 1.8;
}

.season-pass-css-icon--key::before,
.season-pass-css-icon--key::after {
  content: '';
  position: absolute;
  background: linear-gradient(145deg, #fff5b1, #f0a832);
  box-shadow: 0 0 24px rgba(255, 218, 104, 0.32);
}

.season-pass-css-icon--key::before {
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 14px solid #f0b440;
  background: transparent;
}

.season-pass-css-icon--key::after {
  left: 54px;
  top: 30px;
  width: 92px;
  height: 18px;
  border-radius: 999px;
  box-shadow:
    28px 20px 0 -4px #f0b440,
    54px 20px 0 -4px #f0b440;
}

.season-pass-css-icon--ticket,
.season-pass-scratch-art::before {
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 36%),
    linear-gradient(145deg, #fff0a2, #ffb347 50%, #92561b);
}

.season-pass-css-icon--ticket {
  width: min(148px, 58%);
  aspect-ratio: 1.45;
  border: 3px solid rgba(255, 255, 255, 0.34);
}

.season-pass-css-icon--freeze {
  width: min(116px, 48%);
  border-radius: 50%;
  color: #eaffff;
  font: 1000 66px/1 var(--hud-font-display);
  background: radial-gradient(circle at 35% 30%, #ffffff, #9cf4ff 38%, #496cff 100%);
  box-shadow: 0 0 34px rgba(126, 221, 255, 0.42);
}

.season-pass-css-icon--shop,
.season-pass-css-icon--reward {
  width: min(124px, 52%);
  border-radius: 30px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.74), transparent 24%),
    linear-gradient(145deg, #7ee4ff, #b884ff 52%, #ffda7a);
}

.season-pass-atlas-preview {
  z-index: 2;
  inset: 10%;
  border-radius: 24px;
  background-color: rgba(8, 18, 30, 0.32);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.24), 0 0 28px rgba(126, 221, 255, 0.16);
}

.season-pass-reward-lane.is-club .season-pass-atlas-preview {
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28), 0 0 34px rgba(255, 211, 92, 0.24);
}

.progression-hub-chests .season-pass-lantern-art {
  width: min(126px, 50%);
  aspect-ratio: 0.72;
  border-radius: 28px 28px 34px 34px;
  border: 5px solid rgba(255, 225, 145, 0.72);
  background:
    radial-gradient(circle at 50% 56%, rgba(255, 236, 158, 0.94), rgba(255, 180, 60, 0.44) 34%, rgba(12, 24, 34, 0.76) 62%),
    linear-gradient(180deg, rgba(255, 246, 198, 0.2), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 0 28px rgba(255, 240, 168, 0.18),
    0 0 36px rgba(255, 200, 80, 0.34),
    0 20px 24px rgba(0, 0, 0, 0.28);
}

.progression-hub-chests .season-pass-lantern-art::before {
  content: '';
  position: absolute;
  left: 21%;
  right: 21%;
  top: -25%;
  height: 42%;
  border: 5px solid rgba(255, 225, 145, 0.76);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.progression-hub-chests .season-pass-lantern-art::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 12%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 235, 160, 0.72);
  box-shadow: 0 -30px 0 rgba(255, 235, 160, 0.28);
}

.season-pass-reward-title {
  max-width: min(72%, 250px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
}

.season-pass-reward-note {
  display: none;
}

.season-pass-amount {
  top: auto;
  right: 12px;
  bottom: 52px;
  min-width: 54px;
  font-size: 18px;
}

.season-pass-reward-action {
  z-index: 8;
}

.reward-card-art-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 180ms ease, transform 220ms ease;
}

.reward-card-art-canvas.is-ready {
  opacity: 1;
  transform: scale(1);
}

.season-pass-visual.is-thumb-ready > .season-pass-css-icon,
.season-pass-visual.is-thumb-ready > .season-pass-scratch-art,
.season-pass-visual.is-thumb-ready > .season-pass-wheel-art,
.season-pass-visual.is-thumb-ready > .season-pass-bundle-art,
.season-pass-visual.is-thumb-ready > .season-pass-lantern-art,
.season-pass-visual.is-thumb-ready > .season-pass-ring-art,
.season-pass-visual.is-thumb-ready > .season-pass-sound-bars,
.season-pass-visual.is-thumb-ready > .season-pass-postcard-art,
.season-pass-visual.is-thumb-ready > .season-pass-stars-art,
.season-pass-visual.is-thumb-ready > .season-pass-badge-art,
.season-pass-visual.is-thumb-ready > .season-pass-portal-art {
  opacity: 0;
}

.progression-hub-chests .season-pass-reward-lane {
  box-shadow:
    inset 0 0 0 1px rgba(126, 221, 255, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.24);
}

.progression-hub-chests .season-pass-reward-lane.is-club {
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 104, 0.46),
    0 18px 44px rgba(0, 0, 0, 0.32),
    0 0 26px rgba(255, 190, 72, 0.12);
}

.progression-hub-chests .season-pass-reward-lane.is-rare,
.progression-hub-chests .season-pass-reward-lane.is-epic,
.progression-hub-chests .season-pass-reward-lane.is-legendary,
.progression-hub-chests .season-pass-reward-lane.is-highlighted {
  transform: translateZ(0);
}

.progression-hub-chests .season-pass-reward-lane.is-epic::after,
.progression-hub-chests .season-pass-reward-lane.is-legendary::after,
.progression-hub-chests .season-pass-reward-lane.is-highlighted::after {
  opacity: 0.86;
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(255, 255, 255, 0.18) 44%, transparent 56%),
    radial-gradient(circle at 70% 20%, rgba(255, 224, 142, 0.2), transparent 30%);
}

.season-pass-reward-lane.is-value-best .season-pass-reward-title,
.season-pass-reward-lane.is-value-great .season-pass-reward-title,
.season-pass-reward-lane.is-highlighted .season-pass-reward-title {
  color: #fff7cb;
}

.season-claim-reveal-card.reward-moment-pulse {
  animation: rewardMomentCardPop 760ms cubic-bezier(.18,.88,.28,1);
}

.reward-moment-pulse {
  animation: rewardMomentPulse 820ms ease-out;
}

.reward-moment-flyout {
  position: fixed;
  z-index: 9999;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.reward-moment-flyout span {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #8be9ff;
  box-shadow: 0 0 16px rgba(126, 221, 255, 0.6);
  animation: rewardMomentFlyout 820ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 18ms);
}

.reward-moment-flyout.is-achievement span,
.reward-moment-flyout.is-club-reward span,
.reward-moment-flyout.is-luxury-wheel-spin span,
.reward-moment-flyout.is-season-bundle span {
  background: #ffdc73;
  box-shadow: 0 0 18px rgba(255, 218, 104, 0.68);
}

.reward-moment-flyout.is-mission span,
.reward-moment-flyout.is-boost span,
.reward-moment-flyout.is-xp-boost-activate span {
  background: #b985ff;
  box-shadow: 0 0 18px rgba(185, 133, 255, 0.58);
}

@keyframes rewardMomentPulse {
  0% { filter: brightness(1); }
  22% { filter: brightness(1.18) saturate(1.12); }
  100% { filter: brightness(1); }
}

@keyframes rewardMomentCardPop {
  0% { transform: translateY(8px) scale(0.98); }
  34% { transform: translateY(-3px) scale(1.025); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes rewardMomentFlyout {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -64px))) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-card-art-canvas,
  .reward-moment-pulse,
  .season-claim-reveal-card.reward-moment-pulse {
    transition: none;
    animation: none;
  }

  .reward-moment-flyout {
    display: none;
  }
}

/* Prototype-grade reward minigame polish. Keep this block late so it wins over legacy overlay rules. */
.reward-minigame-shell {
  align-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(132, 235, 255, 0.2), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 210, 95, 0.2), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(177, 109, 255, 0.2), transparent 38%),
    #0b0d18;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(16px, 3vw, 36px);
}

.reward-minigame-shell::before {
  animation: rewardAmbientDrift 13s ease-in-out infinite alternate;
  background:
    radial-gradient(circle, rgba(255,255,255,0.16) 0 1px, transparent 1.5px) 0 0 / 32px 32px,
    linear-gradient(120deg, transparent, rgba(255,255,255,0.08), transparent);
  content: '';
  inset: -20%;
  opacity: 0.36;
  pointer-events: none;
  position: absolute;
}

.reward-minigame-backdrop {
  background: rgba(4, 7, 18, 0.54);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.scratch-card-panel,
.wheel-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.scratch-card-panel {
  --theme-a: #ffe17a;
  --theme-b: #71e9ff;
  --theme-c: #ff83b3;
  --theme-glow: rgba(255, 215, 95, 0.46);
  color: #fff;
  display: grid;
  justify-items: center;
  padding: 0;
  width: min(96vw, 620px);
}

.scratch-card-panel[data-rarity="legendary"],
.scratch-card-panel[data-rarity="mythic"],
.scratch-card-panel[data-rarity="secret"] {
  --theme-a: #fff1a2;
  --theme-b: #ffb038;
  --theme-c: #ff73ba;
  --theme-glow: rgba(255, 194, 55, 0.62);
}

.scratch-card-app {
  align-items: center;
  display: grid;
  gap: 18px;
  justify-items: center;
  width: 100%;
}

.scratch-card-copy {
  margin: 0;
  max-width: 520px;
  text-align: center;
}

.scratch-card-copy span {
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 999px;
  color: rgba(255, 244, 196, 0.96);
  display: inline-flex;
  padding: 8px 13px;
}

.scratch-card-copy strong {
  color: #fff;
  display: block;
  font-size: clamp(28px, 6vw, 50px);
  letter-spacing: 0;
  line-height: 0.96;
  margin-top: 14px;
  text-shadow: 0 16px 42px rgba(0,0,0,0.44);
}

.scratch-card-copy small {
  color: rgba(226, 244, 255, 0.78);
  display: block;
  font-size: 14px;
  margin-top: 10px;
}

.scratch-card-stage {
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 32px 56px rgba(0, 0, 0, 0.46));
  height: auto !important;
  max-height: min(68vh, 650px);
  overflow: visible !important;
  perspective: 900px;
  position: relative;
  width: min(82vw, 430px);
}

.scratch-card-stage::before {
  background: radial-gradient(circle, var(--theme-glow), transparent 64%);
  content: '';
  filter: blur(14px);
  inset: -18%;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

.scratch-reveal-card {
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 28px 70px rgba(255,255,255,0.1),
    0 30px 80px rgba(0,0,0,0.44);
  overflow: hidden;
  position: relative;
  height: 100%;
  transform: rotateX(0deg) rotateY(0deg) translateY(0);
  transition: transform 180ms ease, box-shadow 220ms ease;
  width: 100%;
}

.scratch-reveal-card.is-pressing {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 28px 70px rgba(255,255,255,0.12),
    0 18px 50px rgba(0,0,0,0.38);
  transform: translateY(4px) scale(0.992);
}

.scratch-card-panel[data-opened="true"] .scratch-reveal-card {
  animation: scratchCardRevealPop 620ms cubic-bezier(.17, .84, .32, 1.22) both;
}

.scratch-prize,
.scratch-card-canvas,
.scratch-effects-canvas,
.scratch-shine {
  border-radius: inherit;
  inset: 0;
  position: absolute;
}

.scratch-prize {
  align-items: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,0.28), transparent 31%),
    radial-gradient(circle at 30% 78%, color-mix(in srgb, var(--theme-b) 42%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-a) 44%, #1a1430), #16192d 50%, color-mix(in srgb, var(--theme-c) 34%, #100b22));
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: 42px;
  text-align: center;
}

.scratch-prize::after {
  animation: rewardShimmerPass 4s ease-in-out infinite;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.24) 45%, transparent 68%);
  content: '';
  inset: -30%;
  position: absolute;
  transform: translateX(-55%) rotate(10deg);
}

.scratch-prize-aura {
  background: radial-gradient(circle, color-mix(in srgb, var(--theme-a) 72%, transparent), transparent 63%);
  border-radius: 50%;
  filter: blur(10px);
  height: 70%;
  opacity: 0.72;
  position: absolute;
  width: 86%;
}

.scratch-prize-art {
  max-height: 60%;
  max-width: 86%;
  position: relative;
  transform: translateY(-5%);
  z-index: 1;
}

.scratch-prize-art img {
  height: auto;
  max-height: 260px;
  max-width: 100%;
  object-fit: contain;
}

.scratch-prize-title {
  align-self: end;
  background: rgba(8, 11, 28, 0.54);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #fff;
  font: 900 16px/1.1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  margin-bottom: 6px;
  max-width: 100%;
  overflow: hidden;
  padding: 10px 14px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

.scratch-card-canvas {
  cursor: grab;
  height: 100%;
  touch-action: none;
  width: 100%;
  z-index: 3;
}

.scratch-card-canvas:active {
  cursor: grabbing;
}

.scratch-effects-canvas {
  height: 100%;
  pointer-events: none;
  width: 100%;
  z-index: 5;
}

.scratch-shine {
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.2) 48%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-82%) rotate(10deg);
  z-index: 4;
}

.scratch-card-panel[data-opened="false"] .scratch-shine {
  animation: rewardShimmerPass 3.2s ease-in-out infinite;
}

.scratch-card-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 0;
}

.scratch-card-actions .ui-btn {
  min-height: 44px;
}

.scratch-card-panel.is-collecting .scratch-reveal-card {
  animation: rewardCollectPulse 620ms ease both;
}

.wheel-panel {
  color: #fff;
  padding: 0;
  width: min(96vw, 1180px);
}

.wheel-shell.is-normal .wheel-panel,
.wheel-shell.is-luxury .wheel-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wheel-game-shell {
  align-items: center;
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.25fr);
  justify-items: center;
  min-height: min(760px, 86vh);
  width: 100%;
}

.wheel-copy {
  margin: 0;
  max-width: 360px;
  text-align: left;
}

.wheel-copy span {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(220, 244, 255, 0.92);
  display: inline-flex;
  font-size: 12px;
  padding: 8px 12px;
}

.wheel-shell.is-luxury .wheel-copy span {
  background: linear-gradient(135deg, rgba(255,242,166,0.24), rgba(255,173,45,0.12));
  border-color: rgba(255,220,110,0.42);
  color: #fff0a5;
}

.wheel-copy strong {
  color: #fff;
  display: block;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 0.92;
  margin-top: 16px;
  text-shadow: 0 20px 54px rgba(0,0,0,0.48);
}

.wheel-copy small {
  color: rgba(224, 240, 255, 0.74);
  display: block;
  font-size: 15px;
  line-height: 1.45;
  margin-top: 14px;
}

.wheel-stage {
  --wheel-size: min(70vh, 64vw, 680px);
  aspect-ratio: 1;
  contain: layout paint;
  display: grid;
  isolation: isolate;
  place-items: center;
  position: relative;
  width: var(--wheel-size);
}

.wheel-stage::before {
  background: radial-gradient(circle, rgba(114, 232, 255, 0.24), transparent 68%);
  border-radius: 50%;
  content: '';
  filter: blur(18px);
  inset: 3%;
  position: absolute;
  z-index: 0;
}

.wheel-shell.is-luxury .wheel-stage::before {
  background: radial-gradient(circle, rgba(255, 207, 76, 0.32), transparent 68%);
}

.wheel-shadow {
  background: radial-gradient(ellipse, rgba(0,0,0,0.48), transparent 70%);
  bottom: -3%;
  height: 17%;
  position: absolute;
  width: 76%;
  z-index: 0;
}

.wheel-canvas,
.wheel-effects-canvas {
  grid-area: 1 / 1;
  height: 100%;
  position: relative;
  width: 100%;
}

.wheel-canvas {
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.5));
  z-index: 1;
}

.wheel-effects-canvas {
  pointer-events: none;
  z-index: 4;
}

.wheel-pointer-shell {
  height: 30%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -1%;
  transform: translateX(-50%);
  transform-origin: 50% 20%;
  width: 20%;
  z-index: 5;
}

.wheel-stage.is-spinning .wheel-pointer-shell {
  animation: wheelPointerTick 180ms ease-in-out infinite;
}

.wheel-pointer-arm {
  background: linear-gradient(180deg, #fff7bf, #e2a533 56%, #684008);
  border: 2px solid rgba(255,255,255,0.42);
  border-radius: 999px;
  box-shadow: 0 14px 24px rgba(0,0,0,0.34);
  height: 56%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 19%;
}

.wheel-pointer,
.wheel-pointer-tip {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.wheel-pointer {
  background: linear-gradient(135deg, #fff8cd, #ffc449 55%, #9a5410);
  border: 3px solid rgba(255,255,255,0.62);
  border-radius: 18px 18px 28px 28px;
  box-shadow: 0 18px 30px rgba(0,0,0,0.36), inset 0 0 18px rgba(255,255,255,0.22);
  height: 48%;
  top: 31%;
  width: 50%;
}

.wheel-pointer-tip {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 42px solid #fff4ad;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.34));
  top: 70%;
}

.wheel-hub-button {
  align-items: center;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 24%, #fffbe1, #ffd35c 45%, #8b4b0f);
  border: 4px solid rgba(255,255,255,0.72);
  border-radius: 50%;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.35),
    0 16px 34px rgba(0,0,0,0.34),
    0 0 36px rgba(255,210,76,0.26);
  color: #402203;
  cursor: pointer;
  display: grid;
  font: 1000 18px/1 var(--hud-font-body, "Manrope", ui-sans-serif, system-ui);
  justify-items: center;
  letter-spacing: 0;
  position: absolute;
  text-transform: uppercase;
  width: 21%;
  z-index: 6;
}

.wheel-hub-button:disabled {
  cursor: default;
  filter: saturate(0.84);
  opacity: 0.86;
}

.wheel-result {
  align-items: center;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.2), transparent 28%),
    linear-gradient(135deg, rgba(18, 25, 52, 0.94), rgba(50, 30, 75, 0.94));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  bottom: clamp(12px, 3vh, 34px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
  display: grid;
  gap: 14px;
  grid-template-columns: 82px minmax(0, 1fr);
  left: 50%;
  max-width: min(520px, 86vw);
  min-height: 118px;
  opacity: 0;
  overflow: hidden;
  padding: 18px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 22px) scale(0.96);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.17,.84,.32,1.22);
  width: 100%;
  z-index: 20;
}

.wheel-result.is-visible {
  opacity: 1;
  padding-right: 170px;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.wheel-result-aura {
  background: radial-gradient(circle, rgba(255,219,91,0.34), transparent 62%);
  filter: blur(8px);
  inset: -30%;
  position: absolute;
}

.wheel-result-art {
  aspect-ratio: 1;
  border-radius: 22px;
  position: relative;
  width: 82px;
  z-index: 1;
}

.wheel-result > div:not(.wheel-result-art):not(.wheel-result-aura) {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.wheel-result span {
  color: rgba(255, 226, 140, 0.95);
  display: block;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wheel-result strong {
  color: #fff;
  display: block;
  font-size: 22px;
  line-height: 1.05;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wheel-result small {
  color: rgba(225, 240, 255, 0.76);
  display: block;
  font-size: 13px;
  margin-top: 6px;
}

.wheel-actions {
  bottom: clamp(18px, 4vh, 42px);
  display: flex;
  justify-content: center;
  left: 50%;
  margin: 0;
  padding: 0;
  position: fixed;
  transform: translateX(-50%);
  z-index: 21;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.wheel-result.is-visible + .wheel-actions {
  bottom: clamp(34px, 5vh, 58px);
  left: calc(50% + 115px);
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.wheel-actions .ui-btn {
  min-height: 46px;
  min-width: 140px;
}

.season-claim-reveal-card {
  overflow: hidden;
  transform-origin: 50% 55%;
}

.season-claim-reveal-burst,
.season-claim-reveal-flyouts {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.season-claim-reveal-burst span {
  background: #fff1a8;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(255, 219, 91, 0.6);
  height: 10px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 46%;
  width: 10px;
}

.season-claim-reveal-flyouts span {
  background: linear-gradient(135deg, #fff7bd, #69e8ff);
  border-radius: 50%;
  height: 14px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 62%;
  width: 14px;
}

.season-claim-reveal-card.is-collecting {
  animation: rewardCollectPulse 660ms ease both;
}

.season-claim-reveal-card.is-collecting .season-claim-reveal-visual {
  animation: rewardCollectLift 660ms ease both;
}

.season-claim-reveal-card.is-collecting .season-claim-reveal-burst span {
  animation: seasonClaimBurst 620ms ease-out both;
}

.season-claim-reveal-card.is-collecting .season-claim-reveal-flyouts span {
  animation: seasonClaimFlyout 680ms ease-in both;
}

.season-claim-reveal-burst span:nth-child(1) { --dx: -120px; --dy: -78px; animation-delay: 0ms; }
.season-claim-reveal-burst span:nth-child(2) { --dx: 116px; --dy: -88px; animation-delay: 38ms; }
.season-claim-reveal-burst span:nth-child(3) { --dx: -142px; --dy: 28px; animation-delay: 72ms; }
.season-claim-reveal-burst span:nth-child(4) { --dx: 148px; --dy: 36px; animation-delay: 94ms; }
.season-claim-reveal-burst span:nth-child(5) { --dx: -58px; --dy: -128px; animation-delay: 116ms; }
.season-claim-reveal-burst span:nth-child(6) { --dx: 62px; --dy: -132px; animation-delay: 134ms; }
.season-claim-reveal-flyouts span:nth-child(1) { --dx: -86px; --dy: -210px; animation-delay: 20ms; }
.season-claim-reveal-flyouts span:nth-child(2) { --dx: 84px; --dy: -222px; animation-delay: 80ms; }
.season-claim-reveal-flyouts span:nth-child(3) { --dx: -34px; --dy: -246px; animation-delay: 128ms; }
.season-claim-reveal-flyouts span:nth-child(4) { --dx: 28px; --dy: -238px; animation-delay: 168ms; }

@keyframes rewardAmbientDrift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  to { transform: translate3d(2%, 1%, 0) rotate(3deg); }
}

@keyframes rewardShimmerPass {
  0%, 42% { transform: translateX(-82%) rotate(10deg); }
  72%, 100% { transform: translateX(82%) rotate(10deg); }
}

@keyframes scratchCardRevealPop {
  0% { transform: scale(0.985) rotateX(2deg); }
  58% { transform: scale(1.035) rotateX(0deg); }
  100% { transform: scale(1) rotateX(0deg); }
}

@keyframes rewardCollectPulse {
  0% { transform: scale(1); filter: brightness(1); }
  42% { transform: scale(1.035); filter: brightness(1.18); }
  100% { transform: scale(0.985); filter: brightness(1.05); }
}

@keyframes rewardCollectLift {
  0% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-12px) scale(1.06); }
  100% { transform: translateY(-4px) scale(0.96); }
}

@keyframes wheelPointerTick {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}

@keyframes seasonClaimBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.3); }
}

@keyframes seasonClaimFlyout {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.18); }
}

@media (max-width: 860px) {
  .wheel-game-shell {
    grid-template-columns: 1fr;
    min-height: 86vh;
  }

  .wheel-copy {
    max-width: 560px;
    text-align: center;
  }

  .wheel-stage {
    --wheel-size: min(82vw, 58vh, 560px);
  }

  .scratch-card-stage {
    max-height: 58vh;
    width: min(76vw, 390px);
  }

  .wheel-result.is-visible {
    padding-bottom: 76px;
    padding-right: 18px;
  }

  .wheel-result.is-visible + .wheel-actions {
    bottom: clamp(20px, 4vh, 38px);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-minigame-shell::before,
  .scratch-prize::after,
  .scratch-card-panel[data-opened="true"] .scratch-reveal-card,
  .scratch-card-panel[data-opened="false"] .scratch-shine,
  .wheel-stage.is-spinning .wheel-pointer-shell,
  .season-claim-reveal-card.is-collecting,
  .season-claim-reveal-card.is-collecting .season-claim-reveal-visual,
  .season-claim-reveal-card.is-collecting .season-claim-reveal-burst span,
  .season-claim-reveal-card.is-collecting .season-claim-reveal-flyouts span {
    animation: none !important;
  }
}

/* Direct embedded prototype skins for reward minigames. */
.scratch-card-shell.reward-minigame-shell,
.wheel-shell.reward-minigame-shell {
  --focus: #c9cbff;
  position: fixed;
  inset: 0;
  z-index: 18000;
  display: block;
  min-width: 320px;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  color: #f7f7ff;
}

.scratch-card-shell.reward-minigame-shell {
  --bg: #080a14;
  --surface: rgba(18, 22, 42, 0.72);
  --text: #f7f7ff;
  --muted: #aeb5cc;
  --line: rgba(255, 255, 255, 0.11);
  --theme-a: #8b5cf6;
  --theme-b: #db5cff;
  --theme-c: #5b38d9;
  --theme-glow: rgba(184, 101, 255, 0.48);
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-lift: 0px;
  background:
    radial-gradient(circle at 50% 12%, rgba(101, 96, 255, 0.12), transparent 34rem),
    linear-gradient(180deg, #0d1020 0%, #080a14 62%, #060810 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.scratch-card-shell .ambient {
  position: fixed;
  width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.16;
  pointer-events: none;
}

.scratch-card-shell .ambient--one {
  top: -18rem;
  left: -11rem;
  background: #4b6fff;
}

.scratch-card-shell .ambient--two {
  right: -14rem;
  bottom: -21rem;
  background: #b957ff;
}

.scratch-card-shell .grain {
  position: fixed;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E");
}

.scratch-card-shell .app-shell.scratch-card-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(100%, 70rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) max(1rem, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.scratch-card-shell .app-header {
  width: min(100%, 46rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.scratch-card-shell .eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9ea7cb;
}

.scratch-card-shell h1 {
  margin: 0;
  color: #f7f7ff;
  font: 850 clamp(1.35rem, 2.8vw, 1.8rem)/1.1 Inter, ui-sans-serif, system-ui;
  letter-spacing: -0.035em;
}

.scratch-card-shell .icon-button,
.wheel-shell .icon-button {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 44, 0.66);
  color: #eef0ff;
  cursor: pointer;
  font: 800 0/1 Inter, ui-sans-serif, system-ui;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.18);
  max-width: none !important;
  min-width: 3rem;
  padding: 0;
  white-space: nowrap !important;
}

.scratch-card-shell .icon-button::before,
.wheel-shell .icon-button::before {
  content: "×";
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}

.scratch-card-shell .experience {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vh, 1.15rem);
  padding: clamp(1.15rem, 3vh, 2.4rem) 0 0.5rem;
}

.scratch-card-shell .card-stage {
  position: relative;
  width: auto;
  height: auto;
  max-height: none;
  perspective: 1100px;
  overflow: visible;
  filter: none;
  margin: 0;
}

.scratch-card-shell .card-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 13% 8% -3%;
  border-radius: 2.6rem;
  background: var(--theme-glow);
  filter: blur(38px);
  opacity: 0.36;
  transform: translateY(1rem) scale(0.88);
}

.scratch-card-shell .scratch-card {
  position: relative;
  width: min(91vw, 25rem, 69vh);
  aspect-ratio: 4 / 5;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(1.4rem, 5vw, 2rem);
  overflow: hidden;
  isolation: isolate;
  background: #171b35;
  box-shadow:
    0 2px 1px rgba(255, 255, 255, 0.08) inset,
    0 34px 80px rgba(0, 0, 0, 0.43),
    0 10px 24px rgba(0, 0, 0, 0.26);
  transform-style: preserve-3d;
  transform: translateY(var(--card-lift)) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y));
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), box-shadow 280ms ease, opacity 220ms ease;
  will-change: transform;
}

.scratch-card-shell .scratch-card.is-pressing {
  transition-duration: 90ms;
  transform: translateY(1px) scale(0.992) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y));
}

.scratch-card-shell .scratch-card.is-complete {
  animation: completion-pop 720ms cubic-bezier(.2, .86, .25, 1.25) both;
}

.scratch-card-shell .reward-panel,
.scratch-card-shell .scratch-canvas,
.scratch-card-shell .effects-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.scratch-card-shell .reward-panel {
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 2.15rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at 50% 60%, var(--theme-glow), transparent 58%),
    linear-gradient(150deg, var(--theme-a), var(--theme-b) 52%, var(--theme-c));
}

.scratch-card-shell .reward-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 24%, rgba(0,0,0,0.16));
  pointer-events: none;
}

.scratch-card-shell .reward-rays {
  position: absolute;
  width: 132%;
  aspect-ratio: 1;
  top: -15%;
  left: -16%;
  opacity: 0.25;
  background: repeating-conic-gradient(from 8deg, rgba(255,255,255,0.3) 0 5deg, transparent 5deg 19deg);
  mask-image: radial-gradient(circle, #000 0 20%, transparent 66%);
  animation: slow-rotate 28s linear infinite;
}

.scratch-card-shell .reward-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0.44;
}

.scratch-card-shell .reward-orbit::before,
.scratch-card-shell .reward-orbit::after {
  content: "";
  position: absolute;
  width: 0.42rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 0 18px rgba(255,255,255,0.72);
}

.scratch-card-shell .reward-orbit--one {
  width: 64%;
  aspect-ratio: 1;
  top: 15%;
  left: 18%;
  transform: rotate(-18deg);
}

.scratch-card-shell .reward-orbit--one::before { top: 12%; left: 12%; }
.scratch-card-shell .reward-orbit--one::after { right: 5%; bottom: 24%; width: 0.28rem; }

.scratch-card-shell .reward-orbit--two {
  width: 88%;
  aspect-ratio: 1;
  top: 3%;
  left: 6%;
  border-color: rgba(255, 255, 255, 0.1);
  transform: rotate(22deg);
}

.scratch-card-shell .reward-orbit--two::before { right: 14%; top: 12%; width: 0.26rem; }
.scratch-card-shell .reward-orbit--two::after { left: 8%; bottom: 28%; }

.scratch-card-shell .reward-shine {
  position: absolute;
  z-index: 2;
  inset: -30% auto -30% -45%;
  width: 24%;
  transform: skewX(-18deg);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.64), transparent);
  filter: blur(1px);
  pointer-events: none;
}

.scratch-card-shell .is-complete .reward-shine {
  animation: reward-sweep 950ms 180ms cubic-bezier(.2, .7, .3, 1) both;
}

.scratch-card-shell .reward-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateZ(20px);
}

.scratch-card-shell .rarity-pill {
  min-height: 1.8rem;
  padding: 0.4rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(10, 11, 25, 0.24);
  font-size: clamp(0.64rem, 2.6vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.scratch-card-shell .reward-icon-wrap {
  width: clamp(5.5rem, 25vw, 8rem);
  aspect-ratio: 1;
  margin: clamp(0.75rem, 3vh, 1.15rem) 0 clamp(0.45rem, 1.4vh, 0.75rem);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,0.4), transparent 26%),
    rgba(255,255,255,0.13);
}

.scratch-card-shell .reward-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(1.05rem, 5vw, 1.55rem);
  font-weight: 1000;
  color: rgba(255,255,255,0.94);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.24));
}

.scratch-card-shell .reward-icon img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.scratch-card-shell .reward-kicker {
  margin: 0 0 0.22rem;
  font-size: clamp(0.7rem, 2.8vw, 0.8rem);
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
}

.scratch-card-shell .reward-content h2 {
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.scratch-card-shell .reward-subtitle {
  max-width: 27ch;
  margin: 0.7rem 0 0;
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  line-height: 1.45;
  color: rgba(255,255,255,0.8);
  text-wrap: balance;
}

.scratch-card-shell .claim-button {
  position: absolute;
  z-index: 4;
  left: clamp(1rem, 5vw, 2rem);
  right: clamp(1rem, 5vw, 2rem);
  bottom: clamp(1rem, 5vw, 1.6rem);
  min-height: 3.35rem;
  border: 0;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255,255,255,0.94);
  color: #121426;
  font-weight: 820;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(16, 12, 35, 0.28), inset 0 -2px 0 rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
}

.scratch-card-shell .claim-button.is-visible {
  animation: button-enter 540ms 360ms cubic-bezier(.2, .85, .3, 1.15) forwards;
}

.scratch-card-shell .claim-button svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scratch-card-shell .scratch-canvas {
  z-index: 2;
  display: block;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 650ms cubic-bezier(.2, .7, .3, 1), filter 650ms ease, transform 650ms ease;
}

.scratch-card-shell .scratch-canvas.is-dissolving {
  opacity: 0;
  filter: blur(7px) saturate(0.6);
  transform: scale(1.015);
  pointer-events: none;
}

.scratch-card-shell .scratch-canvas.is-gone {
  visibility: hidden;
}

.scratch-card-shell .effects-canvas {
  z-index: 5;
  display: block;
  pointer-events: none;
}

.scratch-card-shell .secondary-actions {
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 22, 42, 0.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  width: min(340px, calc(100vw - 32px));
  max-width: none;
}

.scratch-card-shell .text-button {
  min-height: 2.05rem;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.78rem;
  background: transparent;
  color: #c8cde0;
  font-size: clamp(0.75rem, 3vw, 0.84rem);
  font-weight: 690;
  cursor: pointer;
  flex: 0 0 auto;
  max-width: none !important;
  min-width: 0;
  white-space: nowrap !important;
}

.scratch-card-shell .secondary-actions .scratch-close {
  position: static !important;
  top: auto;
  right: auto;
  z-index: auto;
}

.scratch-card-shell .secondary-actions .text-button:first-child {
  flex-basis: 184px;
}

.scratch-card-shell .secondary-actions .text-button:last-child {
  flex-basis: 112px;
}

.scratch-card-shell .action-divider {
  width: 1px;
  height: 1.15rem;
  background: var(--line);
}

.scratch-card-shell .status-message {
  min-height: 1.35rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.75rem, 3vw, 0.86rem);
  text-align: center;
}

.wheel-shell.reward-minigame-shell {
  --bg-0: #070a12;
  --bg-1: #0b1020;
  --bg-2: #111a31;
  --panel-border: rgba(255, 255, 255, 0.1);
  --text: #f7f8ff;
  --muted: #a6afc7;
  --wheel-config-size: 620px;
  --wheel-size: min(72vw, var(--wheel-config-size));
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-right: max(18px, env(safe-area-inset-right));
  --safe-bottom: max(20px, env(safe-area-inset-bottom));
  --safe-left: max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% -12%, rgba(124, 102, 255, 0.2), transparent 40%),
    linear-gradient(155deg, var(--bg-2), var(--bg-0) 68%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wheel-shell .app-shell.wheel-panel {
  position: relative;
  isolation: isolate;
  width: min(100%, 1240px);
  min-height: 100svh;
  margin: 0 auto;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wheel-shell .ambient {
  position: fixed;
  z-index: -1;
  width: 42vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
}

.wheel-shell .ambient-one {
  top: 12%;
  left: -15%;
  background: #6551ff;
}

.wheel-shell .ambient-two {
  right: -18%;
  bottom: -4%;
  background: #24caa4;
}

.wheel-shell .topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.wheel-shell .eyebrow {
  margin: 0 0 6px;
  color: #91e9d3;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.wheel-shell h1 {
  margin: 0;
  color: #f7f8ff;
  font: 850 clamp(1.65rem, 4vw, 2.35rem)/1 Inter, ui-sans-serif, system-ui;
  letter-spacing: -0.045em;
}

.wheel-shell .main-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 24px;
  width: 100%;
  min-height: calc(100svh - 92px);
  padding: clamp(16px, 3vh, 34px) 0 0;
}

.wheel-shell .game-card {
  display: grid;
  place-items: center;
  width: min(100%, 820px);
}

.wheel-shell .wheel-stage {
  position: relative;
  width: min(var(--wheel-size), calc(100vw - var(--safe-left) - var(--safe-right) - 12px));
  aspect-ratio: 1;
  height: auto;
  isolation: isolate;
  contain: layout style;
  margin: 0;
  filter: none;
  --tick-energy: 0;
  --pointer-load: 0;
}

.wheel-shell .wheel-stage::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -0.8%;
  left: 50%;
  width: 18%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 241, 171, 0.24), rgba(255, 187, 69, 0.1), transparent 72%);
  filter: blur(4px);
  opacity: 0.72;
  transform: translateX(-50%) scale(0.92);
  pointer-events: none;
}

.wheel-shell .wheel-stage.reward-impact {
  animation: wheelRewardImpact 720ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.wheel-shell #wheelCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.wheel-shell .wheel-shadow {
  position: absolute;
  z-index: 0;
  inset: 8%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(24px);
  transform: translateY(8%);
}

.wheel-shell .pointer-shell {
  position: absolute;
  z-index: 7;
  top: -4.8%;
  left: 50%;
  width: 18%;
  height: 15%;
  transform: translateX(-50%);
  pointer-events: none;
}

.wheel-shell .pointer-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -2%;
  left: 50%;
  width: 40%;
  height: 26%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 58% 58% 46% 46%;
  background: linear-gradient(180deg, rgba(49, 57, 82, 0.98), rgba(15, 20, 39, 0.98));
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateX(-50%);
}

.wheel-shell .pointer-shell::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  width: 27%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0 8%, transparent 9%),
    radial-gradient(circle at 42% 34%, #f5f7ff, #9ca5bd 48%, #353c56 78%, #151a2c 100%);
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.56),
    inset 0 2px 3px rgba(255, 255, 255, 0.88),
    inset 0 -3px 4px rgba(9, 13, 29, 0.56);
  transform: translateX(-50%);
}

.wheel-shell .pointer {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  transform-origin: 50% 9.5%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.5));
}

.wheel-shell .wheel-stage.is-spinning .pointer {
  animation: wheelPointerTick 170ms ease-in-out infinite;
}

.wheel-shell .pointer-arm {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 50%;
  width: 45%;
  height: 50%;
  clip-path: polygon(34% 0, 66% 0, 79% 58%, 66% 100%, 34% 100%, 21% 58%);
  border-radius: 999px 999px 13px 13px / 18px 18px 13px 13px;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.94), transparent 24%),
    linear-gradient(90deg, rgba(133, 58, 2, 0.12), transparent 25% 72%, rgba(107, 40, 0, 0.18)),
    linear-gradient(180deg, #fffbd1 0%, #ffe174 34%, #ffbd3f 68%, #e77d1d 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.88),
    inset 0 -4px 5px rgba(104, 38, 0, 0.3),
    0 1px 1px rgba(255, 246, 194, 0.55);
  transform: translateX(-50%);
}

.wheel-shell .pointer-tip {
  position: absolute;
  z-index: 4;
  top: 53.63%;
  left: 50%;
  width: 10.5%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 251, 215, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, #fffef0 0 13%, transparent 14%),
    radial-gradient(circle at 42% 35%, #fff6b8, #ffd35a 43%, #e58b22 74%, #9b4710 100%);
  box-shadow:
    0 2px 3px rgba(66, 22, 0, 0.52),
    inset 0 1px 2px rgba(255, 255, 255, 0.86),
    inset 0 -2px 3px rgba(104, 37, 0, 0.3);
  transform: translate(-50%, -50%);
}

.wheel-shell .pointer-glint {
  position: absolute;
  z-index: 5;
  top: 20%;
  left: 42%;
  width: 5.5%;
  height: 23%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  transform: rotate(11deg);
}

.wheel-shell .hub {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #ffffff 0 4%, transparent 5%),
    linear-gradient(145deg, #e7e9f7, #6f7695 50%, #343a55 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.34),
    inset 0 2px 4px rgba(255, 255, 255, 0.75),
    inset 0 -4px 8px rgba(3, 6, 20, 0.44);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  cursor: pointer;
}

.wheel-shell .hub-inner {
  display: grid;
  place-items: center;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff;
  background: radial-gradient(circle at 35% 28%, #5d668d, #262b45 72%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.25);
}

.wheel-shell .hub-inner span {
  font-size: clamp(0.62rem, 1.7vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.wheel-shell .controls {
  display: grid;
  place-items: center;
  width: min(100%, 420px);
  margin-top: clamp(18px, 3.2vh, 34px);
}

.wheel-shell .spin-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 330px);
  min-height: 58px;
  padding: 14px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  color: #0c1020;
  background: linear-gradient(135deg, #a99aff, #76ead2);
  box-shadow:
    0 15px 32px rgba(78, 212, 182, 0.16),
    0 8px 22px rgba(105, 86, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
}

.wheel-shell .button-shine {
  position: absolute;
  inset: -80% auto -80% -25%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(18deg) translateX(-180%);
  animation: buttonShine 4s ease-in-out infinite;
  pointer-events: none;
}

.wheel-shell .button-arrow {
  font-size: 1.35rem;
  line-height: 1;
}

.wheel-shell .hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.wheel-shell .effects-canvas {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wheel-shell .result-dialog {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  padding: 24px;
  color: var(--text);
  background: rgba(2, 5, 13, 0.64);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wheel-shell .result-dialog[open] {
  display: grid;
  animation: backdropIn 220ms ease-out both;
}

.wheel-shell .result-dialog[open] .result-card {
  animation: resultIn 520ms cubic-bezier(0.18, 0.9, 0.24, 1.18) both;
}

.wheel-shell .result-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(92vw, 430px);
  padding: 34px 28px 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(145deg, rgba(39, 49, 83, 0.96), rgba(12, 17, 34, 0.98));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 70px rgba(130, 108, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wheel-shell .result-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -60% -35%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.2) 49%, transparent 60%);
  transform: translateX(-75%) rotate(7deg);
  pointer-events: none;
}

.wheel-shell .result-dialog[open] .result-card::before {
  animation: resultSheen 1050ms 170ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.wheel-shell .result-card > * {
  position: relative;
  z-index: 2;
}

.wheel-shell .result-aura {
  position: absolute;
  z-index: -1;
  top: -110px;
  left: 50%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(145, 126, 255, 0.46), rgba(90, 221, 191, 0.14) 48%, transparent 72%);
  transform: translateX(-50%);
  filter: blur(10px);
  animation: auraPulse 2.4s ease-in-out infinite;
}

.wheel-shell .dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  color: #cbd1e2;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.wheel-shell .result-kicker {
  margin: 4px 0 16px;
  color: #8ee9d1;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.wheel-shell .result-symbol {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 14px 34px rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 1000;
  animation: symbolFloat 2s ease-in-out infinite;
}

.wheel-shell .result-dialog[open] .result-symbol {
  animation:
    symbolRewardPop 760ms cubic-bezier(0.16, 1.2, 0.26, 1) both,
    symbolFloat 2s 760ms ease-in-out infinite;
}

.wheel-shell .result-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 7vw, 2.2rem);
  letter-spacing: -0.04em;
}

.wheel-shell .result-label {
  min-height: 1.4em;
  margin: 10px 0 26px;
  color: #dfe3f3;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 700;
}

.wheel-shell .result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wheel-shell .spin-again-button,
.wheel-shell .continue-button {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 12px;
}

.wheel-shell .spin-again-button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #10152a;
  background: linear-gradient(135deg, #ac9eff, #7cead5);
}

.wheel-shell .continue-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.wheel-shell .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-height: 660px) {
  .scratch-card-shell .app-header {
    width: min(100%, 38rem);
  }

  .scratch-card-shell .experience {
    padding-top: 0.6rem;
    gap: 0.55rem;
  }

  .scratch-card-shell .scratch-card {
    width: min(78vw, 20.5rem, 61vh);
  }

  .scratch-card-shell .status-message {
    display: none;
  }
}

@media (max-width: 560px) {
  .wheel-shell {
    --wheel-size: min(91vw, var(--wheel-config-size, 540px));
  }

  .wheel-shell .topbar {
    align-items: center;
  }

  .wheel-shell .result-actions {
    grid-template-columns: 1fr;
  }
}

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

@keyframes reward-sweep {
  0% { left: -45%; opacity: 0; }
  16% { opacity: 0.7; }
  100% { left: 125%; opacity: 0; }
}

@keyframes completion-pop {
  0% { transform: scale(1); }
  42% { transform: scale(1.025); }
  68% { transform: scale(0.994); }
  100% { transform: scale(1); }
}

@keyframes button-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes buttonShine {
  0%, 65% { transform: rotate(18deg) translateX(-180%); }
  85%, 100% { transform: rotate(18deg) translateX(620%); }
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes resultIn {
  from { opacity: 0; transform: translateY(24px) scale(0.9); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.02); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auraPulse {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes symbolFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes resultSheen {
  from { transform: translateX(-75%) rotate(7deg); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translateX(75%) rotate(7deg); opacity: 0; }
}

@keyframes symbolRewardPop {
  0% { opacity: 0; transform: scale(0.42) rotate(-16deg); filter: blur(5px) brightness(1.7); }
  48% { opacity: 1; transform: scale(1.16) rotate(4deg); filter: blur(0) brightness(1.18); }
  72% { transform: scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: none; }
}

/* Exact prototype mounts: pixels come directly from the prototype folders. */
.reward-prototype-shell.reward-minigame-shell,
.reward-prototype-shell.scratch-card-shell,
.reward-prototype-shell.wheel-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 18000 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #080a14 !important;
  box-shadow: none !important;
  opacity: 1;
  animation: rewardPrototypeEnter 260ms ease-out both;
  transition: opacity 280ms ease, transform 280ms ease;
}

.reward-prototype-shell.is-closing {
  opacity: 0 !important;
  transform: scale(0.995);
  pointer-events: none !important;
}

@keyframes rewardPrototypeEnter {
  from { opacity: 0; transform: scale(1.006); }
  to { opacity: 1; transform: scale(1); }
}

.reward-prototype-shell::before,
.reward-prototype-shell::after {
  content: none !important;
}

.reward-prototype-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: #080a14;
}

/* Season Pass Fast Track: static 20-card runway with no canvas/image thumbnails. */
.season-pass-runway {
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  will-change: scroll-position;
}

.season-pass-checkpoint-card {
  flex-basis: clamp(310px, 29vw, 388px);
  min-height: 440px;
  contain: layout paint style;
  content-visibility: visible;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(25, 38, 51, 0.78), rgba(9, 16, 27, 0.92)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0.86;
}

.season-pass-checkpoint-card.is-current {
  border-color: rgba(126, 221, 255, 0.5);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(126, 221, 255, 0.18) inset;
}

.season-pass-checkpoint-card.is-finale {
  border-color: rgba(255, 224, 142, 0.6);
  background:
    linear-gradient(180deg, rgba(55, 41, 66, 0.8), rgba(21, 17, 24, 0.92)),
    rgba(255, 255, 255, 0.04);
}

.season-pass-reward-lane {
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(18, 41, 54, 0.74), rgba(21, 25, 42, 0.88)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.season-pass-reward-lane::before {
  background:
    linear-gradient(90deg, rgba(2, 8, 15, 0.66) 0%, rgba(2, 8, 15, 0.3) 34%, rgba(2, 8, 15, 0.12) 100%);
}

.season-pass-reward-lane::after {
  opacity: 0.38;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.1), transparent 34%, rgba(126, 221, 255, 0.08));
}

.season-pass-reward-lane.is-club {
  background:
    linear-gradient(135deg, rgba(71, 51, 18, 0.82), rgba(22, 23, 38, 0.9)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 244, 209, 0.18);
}

.season-pass-reward-lane.is-club::after {
  opacity: 0.5;
  background:
    linear-gradient(118deg, rgba(255, 249, 221, 0.14), transparent 34%, rgba(255, 206, 99, 0.12));
}

.season-pass-reward-lane.is-claimed {
  opacity: 0.74;
  filter: none;
}

.season-pass-reward-lane.is-rare,
.season-pass-reward-lane.is-epic,
.season-pass-reward-lane.is-legendary,
.season-pass-reward-lane.is-ready {
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.season-pass-visual.season-pass-visual--fast {
  background:
    radial-gradient(circle at 68% 26%, rgba(126, 221, 255, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(31, 83, 99, 0.7), rgba(72, 46, 95, 0.55) 52%, rgba(55, 44, 30, 0.55));
  filter: none;
}

.season-pass-visual.season-pass-visual--fast::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.14), transparent 56%);
}

.season-pass-visual--fast.is-lane-club {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 222, 142, 0.3), transparent 33%),
    linear-gradient(135deg, rgba(90, 64, 22, 0.78), rgba(64, 42, 88, 0.55) 54%, rgba(27, 31, 52, 0.66));
}

.season-pass-visual--fast.is-coins {
  background:
    radial-gradient(circle at 57% 42%, rgba(255, 229, 126, 0.38), transparent 32%),
    linear-gradient(135deg, rgba(90, 57, 16, 0.78), rgba(22, 74, 87, 0.55));
}

.season-pass-visual--fast.is-lens,
.season-pass-visual--fast.is-vfx,
.season-pass-visual--fast.is-background,
.season-pass-visual--fast.is-shop-item-unlock {
  background:
    linear-gradient(135deg, rgba(45, 105, 122, 0.78), rgba(88, 55, 126, 0.68) 48%, rgba(255, 216, 126, 0.2)),
    rgba(255, 255, 255, 0.035);
}

.season-pass-visual--fast.is-season-bundle,
.season-pass-reward-lane.is-legendary .season-pass-visual--fast {
  background:
    radial-gradient(circle at 62% 34%, rgba(255, 226, 135, 0.34), transparent 34%),
    linear-gradient(135deg, rgba(90, 56, 91, 0.78), rgba(83, 58, 19, 0.66));
}

.season-pass-fast-art {
  position: absolute;
  inset: 18px;
  z-index: 2;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(5, 13, 22, 0.24);
}

.season-pass-fast-art::before {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(126, 221, 255, 0.55), rgba(184, 128, 255, 0.34));
  color: rgba(250, 254, 255, 0.98);
  font: 950 22px/1 var(--hud-font-display);
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, -50%);
}

.season-pass-visual--fast.is-lane-club .season-pass-fast-art::before {
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(255, 221, 137, 0.7), rgba(178, 111, 255, 0.34));
}

.season-pass-fast-art::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 16% 12% 12% 14%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.18) 0 18px, transparent 19px),
    linear-gradient(164deg, transparent 0 32%, rgba(255, 255, 255, 0.15) 33% 39%, transparent 40% 100%),
    radial-gradient(ellipse at 38% 92%, rgba(255, 255, 255, 0.1) 0 46px, transparent 47px);
}

.season-pass-visual--fast.is-coins .season-pass-fast-art::after {
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 211, 90, 0.28) 0 18px, transparent 19px),
    radial-gradient(circle at 74% 37%, rgba(255, 211, 90, 0.24) 0 23px, transparent 24px),
    radial-gradient(circle at 48% 79%, rgba(255, 211, 90, 0.2) 0 31px, transparent 32px);
}

.season-pass-visual--fast.is-wheel-spin .season-pass-fast-art::before,
.season-pass-visual--fast.is-luxury-wheel-spin .season-pass-fast-art::before,
.season-pass-visual--fast.is-scratch-card .season-pass-fast-art::before,
.season-pass-visual--fast.is-loot-drop .season-pass-fast-art::before {
  border-radius: 999px;
}

.season-pass-visual--fast .season-pass-shop-canvas,
.season-pass-visual--fast .reward-visual,
.season-pass-visual--fast .reward-card-art-canvas,
.season-pass-visual--fast .reward-visual-canvas,
.season-pass-visual--fast .season-pass-atlas-preview,
.season-pass-visual--fast .season-pass-art-fallback {
  display: none !important;
}

@media (max-width: 720px) {
  .season-pass-checkpoint-card {
    flex-basis: min(312px, calc(100vw - 60px));
    min-height: 420px;
  }

  .season-pass-fast-art {
    inset: 14px;
  }

  .season-pass-fast-art::before {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    font-size: 19px;
  }
}

/* Final short-height guard: keep both Season lanes reachable on compact screens. */
@media (max-height: 700px) {
  .progression-hub-chests .season-pass-track-frame {
    --season-short-track-height: min(520px, calc(100dvh - 170px));
    height: var(--season-short-track-height);
    min-height: var(--season-short-track-height);
    max-height: var(--season-short-track-height);
  }

  .progression-hub-chests .season-pass-runway {
    align-items: stretch;
    height: 100%;
    min-height: 0;
  }

  .progression-hub-chests .season-pass-checkpoint-card {
    height: calc(var(--season-short-track-height) - 26px) !important;
    min-height: 0 !important;
    max-height: calc(var(--season-short-track-height) - 26px);
  }

  .progression-hub-chests .season-pass-lane-pair {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .progression-hub-chests .season-pass-reward-lane {
    min-height: 0 !important;
  }
}

@media (max-height: 560px) {
  .progression-hub-chests .season-pass-track-frame {
    --season-short-track-height: min(390px, calc(100dvh - 110px));
  }
}