/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 */
/* Presentation layer only. Existing markup, IDs, handlers, and API ownership stay intact. */

html,
body {
  overflow-x: clip;
}

body {
  color: var(--nv-ink);
  font-family: var(--nv-font-body);
  background: var(--nv-bg);
}

button,
input,
select,
textarea {
  font-family: var(--nv-font-body);
}

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--nv-cyan);
  outline-offset: 3px;
}

/* Storefront: a quieter workbench surface. */
body.bg-\[\#050b14\] {
  color: var(--nv-ink) !important;
  background: var(--nv-bg) !important;
}

body.bg-\[\#050b14\] > div.fixed.inset-0[class*="z-[-1]"] {
  opacity: 0.14 !important;
  background-image:
    radial-gradient(circle at 72% 4%, oklch(78% 0.12 195 / 0.1), transparent 24%),
    linear-gradient(90deg, oklch(100% 0 0 / 0.028) 1px, transparent 1px),
    linear-gradient(oklch(100% 0 0 / 0.028) 1px, transparent 1px) !important;
  background-size: auto, 4rem 4rem, 4rem 4rem !important;
}

body.bg-\[\#050b14\] header.sticky {
  background: oklch(8% 0.018 252 / 0.92) !important;
  border-bottom-color: var(--nv-line-soft) !important;
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.24) !important;
}

.nexus-brand-title,
.nexus-brand-subtitle,
.nexus-nav-link.is-active,
.nexus-nav-link:hover {
  color: var(--nv-gold-bright) !important;
}

.nexus-brand-title,
.nexus-eyebrow,
.nexus-spin-heading h2,
.nexus-trade-terminal h3 {
  font-family: var(--nv-font-display);
}

.nexus-nav-link {
  color: var(--nv-muted) !important;
  font-weight: 600;
  transition: color var(--nv-dur-fast) var(--nv-ease-out), transform var(--nv-dur-fast) var(--nv-ease-out);
}

.nexus-nav-link:hover {
  transform: translateY(-1px);
}

.nexus-nav-link.is-active::after {
  background: var(--nv-gold) !important;
  box-shadow: 0 0 12px oklch(78% 0.13 84 / 0.28);
}

.nexus-search-input,
.nexus-trade-terminal,
.nexus-filter-field select,
.nexus-spin-section,
#rewards-panel,
#mystery-pack-panel,
.nexus-trust-bar {
  border-color: var(--nv-line) !important;
  background: var(--nv-surface) !important;
  box-shadow: var(--nv-shadow-panel) !important;
}

.nexus-hero {
  border-color: var(--nv-line) !important;
  border-radius: var(--nv-radius-lg) !important;
  background:
    radial-gradient(circle at 78% 42%, oklch(78% 0.13 84 / 0.13), transparent 28%),
    linear-gradient(112deg, var(--nv-surface), var(--nv-bg-deep)) !important;
  box-shadow: var(--nv-shadow-panel) !important;
}

.nexus-hero h2 {
  color: var(--nv-ink) !important;
  font-family: var(--nv-font-display) !important;
  font-size: clamp(2.15rem, 4.5vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  font-style: normal !important;
}

.nexus-hero h2 em {
  color: var(--nv-gold-bright) !important;
}

.nexus-hero p,
.nexus-trust-bar small,
.nexus-trade-terminal p {
  color: var(--nv-muted) !important;
}

.nexus-button,
.nexus-spin-button,
.nexus-filter-field select,
.nexus-header-action,
.nexus-language select {
  border-radius: var(--nv-radius-sm) !important;
  transition: transform var(--nv-dur-fast) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out), box-shadow var(--nv-dur-fast) var(--nv-ease-out) !important;
}

.nexus-button--gold,
.nexus-spin-button {
  color: var(--nv-gold-ink) !important;
  background: var(--nv-gold) !important;
  border-color: var(--nv-gold-bright) !important;
}

.nexus-button--ghost {
  color: var(--nv-gold-bright) !important;
  border-color: var(--nv-line) !important;
  background: transparent !important;
}

.nexus-button:hover:not(:disabled),
.nexus-spin-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px oklch(0% 0 0 / 0.26) !important;
}

.nexus-button:active:not(:disabled),
.nexus-spin-button:active:not(:disabled) {
  transform: translateY(0);
}

#card-list {
  align-items: stretch;
  gap: var(--nv-space-lg) !important;
}

#card-list .card-hover {
  min-width: 0;
  overflow: hidden;
  border-color: var(--nv-line) !important;
  border-radius: var(--nv-radius-md) !important;
  background: var(--nv-surface) !important;
  box-shadow: 0 12px 26px oklch(0% 0 0 / 0.18) !important;
  transform: translateZ(0);
  transition: transform var(--nv-dur-base) var(--nv-ease-out), border-color var(--nv-dur-base) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out) !important;
}

#card-list .card-hover:hover,
#card-list .card-hover:focus-within {
  border-color: oklch(78% 0.13 84 / 0.58) !important;
  box-shadow: var(--nv-shadow-float) !important;
}

#card-list .card-hover > div:first-child > div.relative {
  border-color: var(--nv-line-soft) !important;
  border-radius: var(--nv-radius-sm) !important;
  background: var(--nv-bg-deep) !important;
}

#card-list .card-hover img {
  transition: transform var(--nv-dur-slow) var(--nv-ease-out), filter var(--nv-dur-base) var(--nv-ease-out);
}

#card-list .card-hover:hover img {
  transform: scale(1.025);
}

#card-list .card-hover[data-nexus-tilt] {
  transform: perspective(1100px) rotateX(var(--nexus-card-tilt-x, 0deg)) rotateY(var(--nexus-card-tilt-y, 0deg)) translateY(var(--nexus-card-lift, 0px));
  transform-style: preserve-3d;
}

#card-list .card-hover[data-nexus-tilt]:hover {
  --nexus-card-lift: -4px;
}

.card-pagination {
  scrollbar-color: var(--nv-gold) var(--nv-surface);
}

.card-pagination__button {
  color: var(--nv-muted) !important;
  border-color: var(--nv-line) !important;
  background: var(--nv-surface) !important;
}

.card-pagination__button:hover,
.card-pagination__button.is-active {
  color: var(--nv-gold-ink) !important;
  border-color: var(--nv-gold) !important;
  background: var(--nv-gold) !important;
}

/* One entrance sequence, then stillness. */
[data-nexus-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--nv-dur-slow) var(--nv-ease-out), transform var(--nv-dur-slow) var(--nv-ease-out);
  transition-delay: var(--nexus-reveal-delay, 0ms);
}

[data-nexus-reveal].is-nexus-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Admin Panel: retain the sidebar/table anatomy, remove the legacy light skin. */
#dashboardContainer {
  color: var(--nv-ink);
  background: var(--nv-bg);
}

#dashboardContainer .sidebar {
  width: 236px;
  padding: var(--nv-space-lg) var(--nv-space-md);
  background: var(--nv-bg-deep);
  border-right: 1px solid var(--nv-line);
  box-shadow: 12px 0 34px oklch(0% 0 0 / 0.22);
}

#dashboardContainer .sidebar-header {
  margin-bottom: var(--nv-space-lg);
  padding-bottom: var(--nv-space-md);
  color: var(--nv-gold-bright);
  font-family: var(--nv-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-bottom-color: var(--nv-line);
}

#dashboardContainer .sidebar-menu li {
  margin-bottom: var(--nv-space-2xs);
}

#dashboardContainer .sidebar-menu a {
  border-left-color: transparent;
  border-radius: var(--nv-radius-sm);
  color: var(--nv-muted);
  font-size: 0.78rem;
  transition: color var(--nv-dur-fast) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out), transform var(--nv-dur-fast) var(--nv-ease-out);
}

#dashboardContainer .sidebar-menu a:hover,
#dashboardContainer .sidebar-menu a.active {
  color: var(--nv-ink);
  background: var(--nv-surface);
  border-left-color: var(--nv-gold);
  transform: translateX(2px);
}

#dashboardContainer .header {
  left: 236px;
  height: 70px;
  padding: 0 var(--nv-space-xl);
  background: oklch(8% 0.018 252 / 0.94);
  border-bottom-color: var(--nv-line);
  box-shadow: 0 10px 28px oklch(0% 0 0 / 0.24);
}

#dashboardContainer .header-title {
  color: var(--nv-ink);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 800;
}

#dashboardContainer .main-content {
  margin-left: 236px;
  padding: var(--nv-space-xl);
  background: var(--nv-bg);
}

#dashboardContainer .stats-grid {
  gap: var(--nv-space-md);
  margin-bottom: var(--nv-space-xl);
}

#dashboardContainer .stat-card,
#dashboardContainer .table-container,
#dashboardContainer .dashboard-chart-card {
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius-md);
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow-panel);
}

#dashboardContainer .stat-card {
  border-left-width: 2px;
  padding: var(--nv-space-lg);
}

#dashboardContainer .stat-label,
#dashboardContainer .table-header,
#dashboardContainer th {
  color: var(--nv-muted);
}

#dashboardContainer .stat-value,
#dashboardContainer .table-header h3,
#dashboardContainer .dashboard-chart-header h3 {
  color: var(--nv-gold-bright);
}

#dashboardContainer .stat-value,
#dashboardContainer td,
#dashboardContainer th {
  font-variant-numeric: tabular-nums;
}

#dashboardContainer .table-header {
  padding: var(--nv-space-lg);
  border-bottom-color: var(--nv-line);
}

#dashboardContainer table {
  color: var(--nv-ink-soft);
}

#dashboardContainer thead,
#dashboardContainer #page-users #usersTable thead th {
  color: var(--nv-ink-soft);
  background: var(--nv-surface-2);
}

#dashboardContainer th,
#dashboardContainer td {
  border-bottom-color: var(--nv-line-soft);
}

#dashboardContainer tbody tr:hover {
  background: var(--nv-surface-2);
}

#dashboardContainer .search-box input,
#dashboardContainer input,
#dashboardContainer select,
#dashboardContainer textarea {
  color: var(--nv-ink);
  border-color: var(--nv-line);
  border-radius: var(--nv-radius-sm);
  background: var(--nv-bg-deep);
}

#dashboardContainer .btn,
#dashboardContainer .reward-points-btn {
  border: 1px solid var(--nv-gold);
  border-radius: var(--nv-radius-sm);
  color: var(--nv-gold-ink);
  background: var(--nv-gold);
  font-weight: 800;
  transition: transform var(--nv-dur-fast) var(--nv-ease-out), filter var(--nv-dur-fast) var(--nv-ease-out), box-shadow var(--nv-dur-fast) var(--nv-ease-out);
}

#dashboardContainer .btn:hover,
#dashboardContainer .reward-points-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px oklch(0% 0 0 / 0.24);
}

#dashboardContainer .btn-success {
  border-color: var(--nv-success);
  color: oklch(16% 0.03 160);
  background: var(--nv-success);
}

#dashboardContainer .btn-danger,
#dashboardContainer .logout-btn {
  border-color: var(--nv-danger);
  color: var(--nv-ink);
  background: var(--nv-danger);
}

#dashboardContainer .pagination {
  padding: var(--nv-space-md) var(--nv-space-lg);
  border-top-color: var(--nv-line);
}

#dashboardContainer .pagination button {
  color: var(--nv-muted);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius-sm);
  background: var(--nv-surface-2);
}

#dashboardContainer .pagination button:hover,
#dashboardContainer .pagination button.active {
  color: var(--nv-gold-ink);
  background: var(--nv-gold);
}

#dashboardContainer .dashboard-chart-card {
  margin: 0 0 var(--nv-space-xl);
  background: var(--nv-bg-deep);
}

#dashboardContainer .admin-notification-form {
  gap: var(--nv-space-sm) var(--nv-space-lg);
  padding: var(--nv-space-xl);
}

#dashboardContainer .admin-notification-form label {
  color: var(--nv-ink-soft);
}

#dashboardContainer .admin-notification-form textarea {
  min-height: 150px;
}

#dashboardContainer .modal {
  background: oklch(5% 0.018 252 / 0.76);
  backdrop-filter: blur(8px);
}

#dashboardContainer .modal-content {
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius-lg);
  color: var(--nv-ink);
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow-float);
}

#dashboardContainer .modal-header {
  color: var(--nv-gold-bright);
  border-bottom-color: var(--nv-line);
}

#dashboardContainer .modal-close {
  color: var(--nv-muted);
}

#dashboardContainer .modal-close:hover {
  color: var(--nv-ink);
}

/* Shared app surfaces. */
.cyber-panel,
.showcase-panel,
.featured-panel,
.showcase-message {
  border-color: var(--nv-line) !important;
  border-radius: var(--nv-radius-md) !important;
  background: var(--nv-surface) !important;
  box-shadow: var(--nv-shadow-panel) !important;
}

.cyber-button,
.showcase-button,
.orbit-button {
  border-color: var(--nv-line) !important;
  border-radius: var(--nv-radius-sm) !important;
  transition: transform var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out), background-color var(--nv-dur-fast) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out) !important;
}

.cyber-button:hover,
.showcase-button:hover,
.orbit-button:hover {
  transform: translateY(-2px);
  border-color: var(--nv-gold) !important;
}

.showcase-header {
  border-bottom-color: var(--nv-line) !important;
  background: oklch(8% 0.018 252 / 0.92) !important;
}

.showcase-brand,
.showcase-hero h1,
.showcase-panel h2,
.collection-heading h2 {
  color: var(--nv-gold-bright) !important;
}

@media (max-width: 900px) {
  #dashboardContainer .sidebar {
    width: 200px;
  }

  #dashboardContainer .header {
    left: 200px;
  }

  #dashboardContainer .main-content {
    margin-left: 200px;
    padding: var(--nv-space-lg);
  }
}

@media (max-width: 640px) {
  #dashboardContainer .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--nv-line);
  }

  #dashboardContainer .sidebar-menu {
    display: flex;
    gap: var(--nv-space-xs);
    overflow-x: auto;
    padding-bottom: var(--nv-space-xs);
  }

  #dashboardContainer .sidebar-menu li {
    flex: 0 0 auto;
  }

  #dashboardContainer .header {
    position: sticky;
    left: auto;
    height: auto;
    min-height: 64px;
    padding: var(--nv-space-sm) var(--nv-space-md);
  }

  #dashboardContainer .header-actions {
    gap: var(--nv-space-xs);
  }

  #dashboardContainer .header-actions .user-info > div:last-child,
  #dashboardContainer .logout-btn {
    display: none;
  }

  #dashboardContainer .main-content {
    margin-left: 0;
    padding: var(--nv-space-md);
  }

  #dashboardContainer .table-header {
    align-items: stretch;
    flex-direction: column;
  }

  #dashboardContainer .search-box {
    max-width: none;
  }

  .nexus-hero {
    padding: var(--nv-space-xl) var(--nv-space-lg) !important;
  }
}

/* Hallmark · Lucky Spin icon system: inline engraved glyphs · scope: icon layer only */
.nexus-spin-section .nexus-spin-glyph,
.nexus-spin-section .nexus-spin-core-glyph,
.nexus-spin-section .nexus-spin-pointer-glyph {
  display: block;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  overflow: visible;
  color: var(--nv-spin-metal-bright);
}

.nexus-spin-section .nexus-spin-glyph-shadow,
.nexus-spin-section .nexus-spin-glyph-main,
.nexus-spin-section .nexus-spin-glyph-accent,
.nexus-spin-section .nexus-spin-glyph-cut {
  vector-effect: non-scaling-stroke;
}

.nexus-spin-section .nexus-spin-glyph-shadow {
  fill: color-mix(in oklab, var(--nv-spin-void) 82%, transparent);
  stroke: color-mix(in oklab, var(--nv-spin-metal-deep) 74%, transparent);
  stroke-width: 1;
}

.nexus-spin-section .nexus-spin-glyph-main {
  fill: color-mix(in oklab, currentColor 22%, transparent);
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.nexus-spin-section .nexus-spin-glyph-accent {
  fill: currentColor;
  opacity: .92;
}

.nexus-spin-section .nexus-spin-glyph-cut {
  fill: none;
  stroke: color-mix(in oklab, var(--nv-ink) 72%, currentColor);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  opacity: .9;
}

.nexus-spin-segment .nexus-spin-glyph {
  width: 2.05rem;
  height: 2.05rem;
  filter: drop-shadow(0 2px 3px oklch(0% 0 0 / .55));
  transition: transform var(--nv-dur-fast) var(--nv-ease-out), opacity var(--nv-dur-fast) var(--nv-ease-out);
}

.nexus-spin-reward-icon .nexus-spin-glyph {
  width: 1.55rem;
  height: 1.55rem;
  filter: drop-shadow(0 2px 3px oklch(0% 0 0 / .42));
}

.nexus-spin-segment[data-reward-icon="points"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="points"] .nexus-spin-glyph {
  color: var(--nv-spin-metal-bright);
}

.nexus-spin-segment[data-reward-icon="ticket"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="ticket"] .nexus-spin-glyph {
  color: var(--nv-spin-signal);
}

.nexus-spin-segment[data-reward-icon="common"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="common"] .nexus-spin-glyph {
  color: var(--nv-muted);
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / .5));
}

.nexus-spin-segment[data-reward-icon="sr"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="sr"] .nexus-spin-glyph {
  color: var(--nv-sr-gold);
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--nv-sr-gold) 30%, transparent));
}

.nexus-spin-segment[data-reward-icon="sr"] .nexus-spin-glyph-accent,
.nexus-spin-reward-item[data-reward-icon="sr"] .nexus-spin-glyph-accent {
  fill: var(--nv-ur-violet);
}

.nexus-spin-segment[data-reward-icon="ur"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="ur"] .nexus-spin-glyph {
  color: var(--nv-ur-cyan);
  filter: drop-shadow(0 0 7px color-mix(in oklab, var(--nv-ur-cyan) 34%, transparent));
}

.nexus-spin-segment[data-reward-icon="ur"] .nexus-spin-glyph-accent,
.nexus-spin-reward-item[data-reward-icon="ur"] .nexus-spin-glyph-accent {
  fill: color-mix(in oklab, var(--nv-ur-violet) 64%, var(--nv-sr-gold));
}

.nexus-spin-segment[data-reward-icon="card"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="card"] .nexus-spin-glyph {
  color: var(--nv-spin-metal);
}

.nexus-spin-segment .nexus-spin-segment-thumb,
.nexus-spin-reward-icon .nexus-spin-reward-thumb {
  display: block;
  object-fit: cover;
  border: 1px solid color-mix(in oklab, var(--nv-spin-metal-bright) 64%, transparent);
  border-radius: var(--nv-radius-sm);
  background: linear-gradient(145deg, var(--nv-spin-metal-bright), var(--nv-spin-metal-deep));
  box-shadow: 0 2px 6px oklch(0% 0 0 / .55), inset 0 0 0 1px color-mix(in oklab, var(--nv-ink) 12%, transparent);
}

.nexus-spin-reward-icon .nexus-spin-reward-thumb {
  width: 1.55rem;
  height: 2rem;
}

.nexus-spin-wheel-core {
  gap: .16rem;
}

.nexus-spin-wheel-core .nexus-spin-core-glyph {
  position: relative;
  z-index: 1;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--nv-spin-metal-bright);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--nv-spin-signal) 34%, transparent));
}

.nexus-spin-wheel-core .nexus-spin-glyph-accent {
  fill: var(--nv-spin-signal);
}

.nexus-spin-pointer span::before {
  display: none !important;
  content: none !important;
}

.nexus-spin-pointer span .nexus-spin-pointer-glyph {
  width: .78rem;
  height: .78rem;
  color: var(--nv-spin-metal-bright);
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--nv-spin-signal) 40%, transparent));
}

.nexus-spin-pointer span .nexus-spin-glyph-accent {
  fill: var(--nv-spin-signal);
}

.nexus-spin-segment:hover .nexus-spin-glyph,
.nexus-spin-segment:focus-visible .nexus-spin-glyph,
.nexus-spin-reward-item:hover .nexus-spin-glyph {
  transform: translateY(-1px);
}

.nexus-spin-segment[data-reward-icon="ur"] .nexus-spin-glyph,
.nexus-spin-reward-item[data-reward-icon="ur"] .nexus-spin-glyph {
  animation: nexusSpinGlyphShimmer 2.8s var(--nv-ease-in-out) infinite;
}

@keyframes nexusSpinGlyphShimmer {
  0%, 100% { opacity: .84; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-spin-segment[data-reward-icon="ur"] .nexus-spin-glyph,
  .nexus-spin-reward-item[data-reward-icon="ur"] .nexus-spin-glyph {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-nexus-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Lucky Spin icon layer: engraved glyphs, not a new wheel or a new reward system. */
.nexus-spin-section {
  --ns-icon-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='11.2' stroke='%23f4dfab' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='16' r='8.1' stroke='%23d8b878' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cpath d='m16 9.7 1.8 4.5 4.8 1.8-4.8 1.8-1.8 4.5-1.8-4.5-4.8-1.8 4.8-1.8 1.8-4.5Z' fill='%23f4dfab'/%3E%3Cpath d='M10.5 7.3 21.6 24.6' stroke='%23fff6d8' stroke-width='1.1' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  --ns-icon-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M5.2 9.2a2 2 0 0 1 2-2h17.6a2 2 0 0 1 2 2v3.1a3.5 3.5 0 0 0 0 7.4v3.1a2 2 0 0 1-2 2H7.2a2 2 0 0 1-2-2v-3.1a3.5 3.5 0 0 0 0-7.4V9.2Z' stroke='%238adfe0' stroke-width='1.5'/%3E%3Cpath d='M12 11.2v9.6M16 11.2v9.6M20 11.2v9.6' stroke='%23c6f1f3' stroke-width='1' stroke-dasharray='1.4 2' opacity='.8'/%3E%3Cpath d='M8.3 11.2h3.3' stroke='%23fff6d8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ns-icon-common: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='m16 5 3.2 7.8L27 16l-7.8 3.2L16 27l-3.2-7.8L5 16l7.8-3.2L16 5Z' stroke='%23c4cbd4' stroke-width='1.5'/%3E%3Cpath d='m16 10.5 1.8 3.7 3.7 1.8-3.7 1.8-1.8 3.7-1.8-3.7-3.7-1.8 3.7-1.8 1.8-3.7Z' fill='%23eef2f4' opacity='.82'/%3E%3C/svg%3E");
  --ns-icon-sr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='m16 4.6 4.1 5.1 6.5 1.4-4.4 5 1 6.5-7.2-2.6-7.2 2.6 1-6.5-4.4-5 6.5-1.4L16 4.6Z' stroke='%23f2d184' stroke-width='1.35'/%3E%3Cpath d='m16 9.2 2.1 4.7 4.8 2.1-4.8 2.1-2.1 4.7-2.1-4.7-4.8-2.1 4.8-2.1L16 9.2Z' fill='%239270bc' stroke='%23f4dfab' stroke-width='1'/%3E%3Cpath d='M8 8 24 24' stroke='%23fff5cf' stroke-width='1' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  --ns-icon-ur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='m16 3.8 4.4 4.4 6.1 1.7-1.7 6.1 1.7 6.1-6.1 1.7-4.4 4.4-4.4-4.4-6.1-1.7 1.7-6.1-1.7-6.1 6.1-1.7L16 3.8Z' stroke='%2373c9d2' stroke-width='1.2'/%3E%3Cpath d='m16 7.2 3 5.8 5.8 3-5.8 3-3 5.8-3-5.8-5.8-3 5.8-3 3-5.8Z' fill='%239270bc' stroke='%23f4dfab' stroke-width='1.2'/%3E%3Cpath d='m16 11.2 1.9 3 3 .8-3 1.9-1.9 3-1.9-3-3-.8 3-1.9 1.9-3Z' fill='%23f8e7b0'/%3E%3C/svg%3E");
  --ns-icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='m18.6 3.8-10 14h7.1l-2.3 10.4 10-14h-7.1l2.3-10.4Z' fill='%23f4dfab' stroke='%2373c9d2' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='m19.4 7.1-5.7 8.2h4.1' stroke='%23fff6d8' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nexus-spin-segment i,
.nexus-spin-reward-icon i {
  --ns-icon-current: var(--ns-icon-common);
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  font-size: 0 !important;
  line-height: 1;
  color: var(--nv-spin-metal-bright) !important;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px oklch(0% 0 0 / .52));
}

.nexus-spin-segment i::before,
.nexus-spin-reward-icon i::before {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(145deg, #fff6d8 0%, currentColor 38%, color-mix(in oklab, currentColor 54%, var(--nv-spin-metal-deep)) 100%);
  -webkit-mask: var(--ns-icon-current) center / contain no-repeat;
  mask: var(--ns-icon-current) center / contain no-repeat;
}

.nexus-spin-segment[data-reward-type="points"] i,
.nexus-spin-reward-item[data-reward-type="points"] .nexus-spin-reward-icon i {
  --ns-icon-current: var(--ns-icon-coin);
  color: var(--nv-spin-metal-bright) !important;
}

.nexus-spin-segment[data-reward-type="voucher"] i,
.nexus-spin-reward-item[data-reward-type="voucher"] .nexus-spin-reward-icon i {
  --ns-icon-current: var(--ns-icon-ticket);
  color: var(--nv-spin-signal) !important;
}

.nexus-spin-segment[data-reward-rarity="common"] i,
.nexus-spin-reward-item[data-reward-rarity="common"] .nexus-spin-reward-icon i {
  --ns-icon-current: var(--ns-icon-common);
  color: #c4cbd4 !important;
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / .5));
}

.nexus-spin-segment[data-reward-rarity="sr"] i,
.nexus-spin-reward-item[data-reward-rarity="sr"] .nexus-spin-reward-icon i {
  --ns-icon-current: var(--ns-icon-sr);
  color: var(--nv-sr-gold) !important;
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--nv-sr-gold) 34%, transparent));
}

.nexus-spin-segment[data-reward-rarity="ur"] i,
.nexus-spin-reward-item[data-reward-rarity="ur"] .nexus-spin-reward-icon i {
  --ns-icon-current: var(--ns-icon-ur);
  color: var(--nv-ur-cyan) !important;
  filter: drop-shadow(0 0 7px color-mix(in oklab, var(--nv-ur-cyan) 38%, transparent));
}

.nexus-spin-segment[data-reward-type="card"] .nexus-spin-segment-thumb {
  position: relative;
  width: 32px;
  height: 43px;
  padding: 1px;
  object-fit: cover;
  border: 1px solid color-mix(in oklab, var(--nv-spin-metal-bright) 62%, transparent);
  border-radius: 3px;
  background: linear-gradient(145deg, var(--nv-spin-metal-bright), var(--nv-spin-metal-deep));
  box-shadow: 0 2px 6px oklch(0% 0 0 / .55), inset 0 0 0 1px oklch(100% 0 0 / .12);
}

.nexus-spin-segment[data-reward-rarity="common"] .nexus-spin-segment-thumb { border-color: #aeb8c2; }
.nexus-spin-segment[data-reward-rarity="sr"] .nexus-spin-segment-thumb { border-color: var(--nv-sr-gold); box-shadow: 0 2px 7px oklch(0% 0 0 / .55), 0 0 7px color-mix(in oklab, var(--nv-sr-gold) 24%, transparent); }
.nexus-spin-segment[data-reward-rarity="ur"] .nexus-spin-segment-thumb { border-color: var(--nv-ur-cyan); box-shadow: 0 2px 7px oklch(0% 0 0 / .55), 0 0 9px color-mix(in oklab, var(--nv-ur-cyan) 28%, transparent); }

.nexus-spin-wheel-core i {
  --ns-icon-current: var(--ns-icon-bolt);
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0 !important;
  color: var(--nv-spin-metal-bright) !important;
  text-shadow: none;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--nv-spin-signal) 34%, transparent));
}

.nexus-spin-wheel-core i::before {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(145deg, #fff6d8, var(--nv-spin-metal-bright) 44%, var(--nv-spin-signal));
  -webkit-mask: var(--ns-icon-current) center / contain no-repeat;
  mask: var(--ns-icon-current) center / contain no-repeat;
}

.nexus-spin-pointer span::before {
  top: 50%;
  left: 50%;
  width: .55rem;
  height: .55rem;
  content: "";
  transform: translate(-50%, -50%);
  background: var(--nv-spin-metal-bright);
  -webkit-mask: var(--ns-icon-common) center / contain no-repeat;
  mask: var(--ns-icon-common) center / contain no-repeat;
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--nv-spin-signal) 46%, transparent));
}

.nexus-spin-segment[data-reward-type="card"] span { position: relative; }
.nexus-spin-segment[data-reward-type="card"] span::after {
  position: absolute;
  top: .22rem;
  right: .25rem;
  padding: .08rem .16rem;
  border: 1px solid color-mix(in oklab, var(--nv-spin-metal-bright) 42%, transparent);
  border-radius: 2px;
  content: attr(data-reward-rarity);
  color: var(--nv-spin-metal-bright);
  background: oklch(7% .02 255 / .78);
  font-size: .38rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-shadow: none;
}

.nexus-spin-segment[data-reward-rarity="common"] span::after { color: #c4cbd4; }
.nexus-spin-segment[data-reward-rarity="sr"] span::after { color: var(--nv-sr-gold); }
.nexus-spin-segment[data-reward-rarity="ur"] span::after { color: var(--nv-ur-cyan); }

@keyframes nexusSpinIconSweep {
  0%, 100% { opacity: .84; transform: translateX(-2px); }
  50% { opacity: 1; transform: translateX(2px); }
}

.nexus-spin-segment[data-reward-rarity="ur"] .nexus-spin-segment-thumb,
.nexus-spin-segment[data-reward-rarity="ur"] span::after { animation: nexusSpinIconSweep 2.8s var(--nv-ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .nexus-spin-segment[data-reward-rarity="ur"] .nexus-spin-segment-thumb,
  .nexus-spin-segment[data-reward-rarity="ur"] span::after { animation: none; }
}

/* Hallmark third pass · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Scope: Mystery Pack / Pack Opening only.
 * Existing reward generation, IDs, handlers, and API ownership remain intact.
 */

/* The existing opening node becomes a temporary cinematic stage. The result
   modal still owns the final cards and remains the source of truth. */
#mystery-pack-panel .mystery-pack-opening {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, oklch(76% 0.2 302 / 0.12), transparent 28%),
    radial-gradient(circle at 50% 50%, oklch(78% 0.13 84 / 0.08), transparent 54%),
    var(--nv-pack-void);
  backdrop-filter: blur(16px) saturate(1.2);
  overscroll-behavior: none;
}

#mystery-pack-panel .mystery-pack-opening::before {
  z-index: 0;
  inset: -22%;
  opacity: 0.72;
  background:
    radial-gradient(circle at 50% 50%, oklch(88% 0.14 88 / 0.16), transparent 18%),
    radial-gradient(circle at 50% 50%, oklch(76% 0.18 330 / 0.11), transparent 40%),
    radial-gradient(ellipse at center, transparent 34%, oklch(0% 0 0 / 0.6) 78%);
  animation: nexusPackAmbient 2.2s var(--nv-ease-in-out) infinite;
}

#mystery-pack-panel .mystery-pack-opening::after {
  z-index: 0;
  inset: -12%;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, var(--nv-pack-amber) 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--nv-cyan) 0 1px, transparent 1.7px),
    radial-gradient(circle, var(--nv-pack-rose) 0 1px, transparent 1.8px);
  background-position: 15% 22%, 76% 30%, 62% 78%;
  background-size: 86px 96px, 118px 131px, 152px 168px;
  mask-image: radial-gradient(ellipse at center, black 8%, transparent 74%);
  animation: nexusPackParticles 1.7s linear infinite;
}

#mystery-pack-panel .mystery-pack-opening__stage {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  min-height: min(620px, calc(100vh - 32px));
  place-content: center;
  padding: var(--nv-space-xl);
  border: 1px solid oklch(88% 0.14 88 / 0.24);
  border-radius: var(--nv-radius-lg);
  background: linear-gradient(145deg, oklch(18% 0.055 275 / 0.38), oklch(6% 0.025 260 / 0.2));
  box-shadow: 0 30px 110px oklch(0% 0 0 / 0.66), inset 0 1px 0 oklch(100% 0 0 / 0.12);
}

#mystery-pack-panel .mystery-pack-opening__stage::before,
#mystery-pack-panel .mystery-pack-opening__stage::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

#mystery-pack-panel .mystery-pack-opening__stage::before {
  inset: 12px;
  border: 1px solid oklch(78% 0.12 195 / 0.18);
  border-radius: calc(var(--nv-radius-lg) - 0.2rem);
}

#mystery-pack-panel .mystery-pack-opening__stage::after {
  right: 14%;
  bottom: 14%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(88% 0.14 88 / 0.54), transparent);
  box-shadow: 0 0 20px oklch(88% 0.14 88 / 0.34);
}

#mystery-pack-panel .mystery-pack-opening__pack {
  z-index: 2;
  width: 164px;
  border-color: var(--nv-pack-amber);
  background:
    linear-gradient(112deg, transparent 14%, oklch(100% 0 0 / 0.24) 30%, transparent 39%),
    radial-gradient(circle at 42% 25%, oklch(76% 0.18 330 / 0.8), oklch(19% 0.055 275) 56%, var(--nv-pack-void));
  box-shadow:
    0 38px 28px oklch(0% 0 0 / 0.46),
    0 0 42px oklch(76% 0.18 330 / 0.44),
    0 0 90px oklch(88% 0.14 88 / 0.18),
    inset 0 0 0 1px oklch(100% 0 0 / 0.3);
  transform: perspective(850px) translateY(28px) translateZ(-120px) scale(0.82) rotateX(7deg);
  animation: nexusPackEntrance var(--nv-dur-pack) var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening__pack::before {
  position: absolute;
  z-index: 3;
  top: 23%;
  right: -14%;
  left: -14%;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--nv-pack-amber), oklch(100% 0 0 / 0.92), var(--nv-pack-amber), transparent);
  box-shadow: 0 0 10px var(--nv-pack-amber), 0 0 24px oklch(88% 0.14 88 / 0.6);
  transform: rotate(-18deg) scaleX(0.2);
}

#mystery-pack-panel .mystery-pack-opening__pack::after {
  z-index: 2;
  top: 24%;
  left: -20%;
  width: 140%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--nv-pack-amber), transparent);
  box-shadow: 0 0 16px var(--nv-pack-amber);
  transform: rotate(-18deg) translateX(-58%);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-entrance .mystery-pack-opening__pack {
  animation-name: nexusPackEntrance;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-anticipation .mystery-pack-opening__pack {
  animation: nexusPackAnticipate 920ms var(--nv-ease-in-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-tearing .mystery-pack-opening__pack {
  animation: nexusPackTear 300ms var(--nv-ease-in-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-tearing .mystery-pack-opening__pack::before {
  opacity: 1;
  animation: nexusPackTearLine 330ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-tearing .mystery-pack-opening__pack::after {
  opacity: 1;
  animation: nexusPackFoilTear 360ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__pack {
  animation: nexusPackBurstPack 420ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__stage {
  animation: nexusPackBurstStage 520ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-burst::before {
  animation: nexusPackLightBurst 540ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-burst::after {
  animation: nexusPackParticleBurst 620ms var(--nv-ease-out) both;
}

#pack-result-modal.is-nexus-visible .pack-result-heading,
#pack-result-modal.is-nexus-visible #pack-result-summary {
  animation: nexusPackContentIn 520ms var(--nv-ease-out) both;
}

#pack-result-items.is-nexus-primed {
  perspective: 1300px;
}

#pack-result-items.is-nexus-primed .pack-reveal-card {
  animation-name: nexusStackCardIn;
}

#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(2) { --nexus-stack-angle: -2deg; --nexus-stack-depth: -9px; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(3) { --nexus-stack-angle: 2deg; --nexus-stack-depth: -18px; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(4) { --nexus-stack-angle: -3deg; --nexus-stack-depth: -27px; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(5) { --nexus-stack-angle: 3deg; --nexus-stack-depth: -36px; }

#pack-result-items .pack-reveal-card.is-nexus-focus {
  z-index: 12;
  filter: brightness(1.1) saturate(1.12);
  transform: translateY(-18px) scale(1.045) rotateX(1deg);
}

#pack-result-items .pack-reveal-card.is-nexus-focus .pack-reveal-card__inner {
  box-shadow: 0 28px 62px oklch(0% 0 0 / 0.58), 0 0 32px oklch(78% 0.12 195 / 0.22);
}

#pack-result-items .pack-reveal-card.is-nexus-final {
  z-index: 13;
}

#pack-result-items .pack-reveal-card.is-nexus-focus.pack-reveal-card--secret .pack-reveal-card__inner {
  box-shadow: var(--nv-shadow-rare), 0 0 70px oklch(83% 0.16 84 / 0.22);
}

#pack-result-items .pack-reveal-card.is-nexus-focus.pack-reveal-card--ultra .pack-reveal-card__inner {
  box-shadow: var(--nv-shadow-ultra), 0 0 90px oklch(76% 0.2 302 / 0.32);
}

#pack-result-items .pack-reveal-card.is-nexus-sr .pack-reveal-card__inner {
  animation: nexusSecretFocus 1120ms var(--nv-ease-cinematic) both;
}

#pack-result-items .pack-reveal-card.is-nexus-ur .pack-reveal-card__inner {
  animation: nexusUltraFocus 1480ms var(--nv-ease-cinematic) both;
}

@keyframes nexusPackAmbient {
  0%, 100% { opacity: 0.58; transform: scale(0.98); }
  50% { opacity: 0.92; transform: scale(1.04); }
}

@keyframes nexusPackParticles {
  from { transform: translate3d(0, 12px, 0) rotate(0deg); }
  to { transform: translate3d(12px, -14px, 0) rotate(8deg); }
}

@keyframes nexusPackEntrance {
  0% { opacity: 0; transform: perspective(850px) translateY(42px) translateZ(-170px) scale(0.72) rotateX(12deg); }
  65% { opacity: 1; transform: perspective(850px) translateY(-6px) translateZ(20px) scale(1.05) rotateX(-2deg); }
  100% { opacity: 1; transform: perspective(850px) translateY(0) translateZ(0) scale(1) rotateX(0); }
}

@keyframes nexusPackAnticipate {
  0% { transform: perspective(850px) translateY(0) translateZ(0) scale(1); filter: brightness(1); }
  42% { transform: perspective(850px) translateY(-5px) translateZ(15px) scale(1.025) rotate(-0.8deg); filter: brightness(1.16); }
  76% { transform: perspective(850px) translateY(2px) translateZ(6px) scale(1.015) rotate(0.8deg); filter: brightness(1.34); }
  100% { transform: perspective(850px) translateY(0) translateZ(0) scale(1.02); filter: brightness(1.24); }
}

@keyframes nexusPackTear {
  0% { transform: perspective(850px) translateY(0) translateZ(0) scale(1.02) rotate(0); }
  38% { transform: perspective(850px) translateY(1px) translateZ(0) scale(1.03) rotate(-1.6deg); }
  74% { transform: perspective(850px) translateY(-1px) translateZ(8px) scale(1.04) rotate(1.3deg); }
  100% { transform: perspective(850px) translateY(0) translateZ(0) scale(1.02) rotate(0); }
}

@keyframes nexusPackTearLine {
  from { opacity: 0; transform: rotate(-18deg) scaleX(0.2); }
  45% { opacity: 1; transform: rotate(-18deg) scaleX(1.08); }
  to { opacity: 0.74; transform: rotate(-18deg) scaleX(1); }
}

@keyframes nexusPackFoilTear {
  from { opacity: 0; transform: rotate(-18deg) translateX(-58%); }
  45% { opacity: 1; transform: rotate(-18deg) translateX(6%); }
  to { opacity: 0; transform: rotate(-18deg) translateX(78%); }
}

@keyframes nexusPackBurstPack {
  from { opacity: 1; transform: perspective(850px) translateY(0) translateZ(0) scale(1.02); }
  32% { opacity: 1; transform: perspective(850px) translateY(-2px) translateZ(30px) scale(1.12); filter: brightness(1.8); }
  to { opacity: 0; transform: perspective(850px) translateY(8px) translateZ(70px) scale(1.24); filter: brightness(2.4); }
}

@keyframes nexusPackBurstStage {
  from { filter: brightness(1); }
  28% { filter: brightness(1.42); }
  to { filter: brightness(1); }
}

@keyframes nexusPackLightBurst {
  from { opacity: 0.4; transform: scale(0.46); }
  32% { opacity: 1; transform: scale(1.06); }
  to { opacity: 0; transform: scale(1.5); }
}

@keyframes nexusPackParticleBurst {
  from { opacity: 0.42; transform: scale(0.8); }
  38% { opacity: 0.9; transform: scale(1.06); }
  to { opacity: 0; transform: scale(1.46); }
}

@keyframes nexusPackContentIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nexusStackCardIn {
  from { opacity: 0; transform: translateY(18px) translateZ(var(--nexus-stack-depth, 0)) rotate(var(--nexus-stack-angle, 0deg)) scale(0.94); }
  to { opacity: 1; transform: translateY(0) translateZ(var(--nexus-stack-depth, 0)) rotate(var(--nexus-stack-angle, 0deg)) scale(1); }
}

@keyframes nexusSecretFocus {
  0% { transform: translateY(12px) scale(0.96) rotateY(-4deg); filter: brightness(1); }
  38% { transform: translateY(-16px) scale(1.045) rotateY(2deg); filter: brightness(1.28) saturate(1.24); }
  100% { transform: translateY(-8px) scale(1.02) rotateY(0); filter: brightness(1.08) saturate(1.12); }
}

@keyframes nexusUltraFocus {
  0% { transform: translateY(18px) scale(0.9) rotateY(-10deg); filter: brightness(1); }
  30% { transform: translateY(-22px) scale(1.08) rotateY(5deg); filter: brightness(1.72) saturate(1.5); }
  52% { transform: translateY(-12px) scale(1.045) rotateY(-2deg); filter: brightness(1.3) saturate(1.28); }
  100% { transform: translateY(-8px) scale(1.02) rotateY(0); filter: brightness(1.12) saturate(1.18); }
}

@media (max-width: 640px) {
  #mystery-pack-panel .mystery-pack-opening__stage {
    width: min(380px, calc(100vw - 20px));
    min-height: min(560px, calc(100vh - 20px));
    padding: var(--nv-space-lg);
  }
  #mystery-pack-panel .mystery-pack-opening__pack { width: 142px; }
  #pack-result-items .pack-reveal-card.is-nexus-focus { transform: translateY(-8px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  #mystery-pack-panel .mystery-pack-opening::before,
  #mystery-pack-panel .mystery-pack-opening::after,
  #mystery-pack-panel .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening__stage,
  #mystery-pack-panel .mystery-pack-opening__pack::before,
  #mystery-pack-panel .mystery-pack-opening__pack::after,
  #pack-result-modal.is-nexus-visible .pack-result-heading,
  #pack-result-modal.is-nexus-visible #pack-result-summary,
  #pack-result-items.is-nexus-primed .pack-reveal-card { animation: none !important; }
  #mystery-pack-panel .mystery-pack-opening__pack { transform: none; }
  #pack-result-items .pack-reveal-card.is-nexus-focus { transform: none; }
  #pack-result-items .pack-reveal-card.is-nexus-sr .pack-reveal-card__inner,
  #pack-result-items .pack-reveal-card.is-nexus-ur .pack-reveal-card__inner { animation: none !important; }
}

/* Hallmark second pass · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Presentation-only depth layer. Existing DOM hooks and business logic remain untouched.
 */

/* Atmospheric shell: stronger separation without changing the page rhythm. */
body {
  background:
    radial-gradient(circle at 12% -8%, oklch(78% 0.12 195 / 0.1), transparent 30rem),
    radial-gradient(circle at 92% 10%, oklch(69% 0.16 300 / 0.1), transparent 34rem),
    linear-gradient(180deg, var(--nv-bg-deep), var(--nv-bg) 42%, var(--nv-bg-deep));
  background-attachment: fixed;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.32;
  background-image:
    linear-gradient(90deg, oklch(100% 0 0 / 0.026) 1px, transparent 1px),
    linear-gradient(oklch(100% 0 0 / 0.026) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(180deg, black, transparent 82%);
}

.nexus-hero,
.nexus-trade-terminal,
.nexus-spin-section,
#rewards-panel,
#mystery-pack-panel,
.showcase-panel,
.featured-panel,
.cyber-panel {
  position: relative;
  isolation: isolate;
}

.nexus-hero::after,
.nexus-trade-terminal::after,
.nexus-spin-section::before,
#rewards-panel::after,
#mystery-pack-panel::after,
.showcase-panel::after,
.featured-panel::after {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid oklch(100% 0 0 / 0.06);
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.06), transparent 28%, transparent 68%, oklch(78% 0.12 195 / 0.04));
}

.nexus-eyebrow,
.panel-label,
.mystery-pack-section__eyebrow,
.showcase-kicker {
  color: var(--nv-cyan) !important;
  text-shadow: 0 0 14px oklch(78% 0.12 195 / 0.26);
}

/* Product cards: the pointer follows a light field while the image frame carries the foil sweep. */
#card-list .card-hover {
  --nexus-pointer-x: 50%;
  --nexus-pointer-y: 50%;
  position: relative;
  isolation: isolate;
  border-color: oklch(78% 0.12 195 / 0.24) !important;
  background:
    radial-gradient(circle at var(--nexus-pointer-x) var(--nexus-pointer-y), oklch(98% 0.02 90 / 0.1), transparent 30%),
    linear-gradient(145deg, var(--nv-surface-2), var(--nv-surface) 44%, var(--nv-bg-deep));
  box-shadow: 0 18px 34px oklch(0% 0 0 / 0.28), inset 0 1px 0 oklch(100% 0 0 / 0.08) !important;
  transition: transform var(--nv-dur-cinematic) var(--nv-ease-cinematic), border-color var(--nv-dur-base) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out), filter var(--nv-dur-base) var(--nv-ease-out) !important;
}

#card-list .card-hover::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(116deg, transparent 22%, oklch(100% 0 0 / 0.24) 38%, transparent 48%);
  transform: translateX(-130%) skewX(-18deg);
  transition: opacity var(--nv-dur-fast) var(--nv-ease-out), transform 720ms var(--nv-ease-cinematic);
}

#card-list .card-hover:hover::after,
#card-list .card-hover:focus-within::after {
  opacity: 1;
  transform: translateX(130%) skewX(-18deg);
}

#card-list .card-hover > div:first-child > div.relative {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08), inset 0 -24px 34px oklch(0% 0 0 / 0.26);
}

#card-list .card-hover > div:first-child > div.relative::before {
  position: absolute;
  z-index: 1;
  inset: -40% -70%;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(110deg, transparent 44%, oklch(100% 0 0 / 0.25) 49%, transparent 54%);
  transform: rotate(18deg) translateX(-35%);
  transition: opacity var(--nv-dur-fast) var(--nv-ease-out), transform 800ms var(--nv-ease-cinematic);
}

#card-list .card-hover:hover > div:first-child > div.relative::before,
#card-list .card-hover:focus-within > div:first-child > div.relative::before {
  opacity: 1;
  transform: rotate(18deg) translateX(35%);
}

#card-list .card-hover > div:first-child > div.relative img {
  position: relative;
  z-index: 0;
  transform: translateZ(22px) scale(1.01);
  filter: saturate(1.06) contrast(1.03) drop-shadow(0 18px 20px oklch(0% 0 0 / 0.34));
  transition: transform var(--nv-dur-cinematic) var(--nv-ease-cinematic), filter var(--nv-dur-base) var(--nv-ease-out);
}

#card-list .card-hover:hover > div:first-child > div.relative img,
#card-list .card-hover:focus-within > div:first-child > div.relative img {
  transform: translateZ(34px) scale(1.075) rotate(0.8deg);
  filter: saturate(1.15) contrast(1.05) drop-shadow(0 22px 25px oklch(0% 0 0 / 0.52));
}

#card-list .card-hover.rarity-card--secret {
  border-color: oklch(83% 0.16 84 / 0.55) !important;
  box-shadow: 0 18px 34px oklch(0% 0 0 / 0.3), 0 0 22px oklch(83% 0.16 84 / 0.12), inset 0 1px 0 oklch(100% 0 0 / 0.1) !important;
}

#card-list .card-hover.rarity-card--ultra {
  border-color: oklch(84% 0.16 205 / 0.62) !important;
  background:
    radial-gradient(circle at var(--nexus-pointer-x) var(--nexus-pointer-y), oklch(84% 0.16 205 / 0.17), transparent 34%),
    linear-gradient(145deg, oklch(18% 0.07 285), var(--nv-surface) 48%, oklch(12% 0.045 220));
  box-shadow: var(--nv-shadow-ultra), inset 0 1px 0 oklch(100% 0 0 / 0.14) !important;
}

#card-list .card-hover.rarity-card--secret:hover,
#card-list .card-hover.rarity-card--secret:focus-within {
  box-shadow: var(--nv-shadow-rare) !important;
}

#card-list .card-hover.rarity-card--ultra:hover,
#card-list .card-hover.rarity-card--ultra:focus-within {
  filter: saturate(1.2) brightness(1.06);
  box-shadow: var(--nv-shadow-ultra), 0 0 90px oklch(76% 0.2 302 / 0.18) !important;
}

/* Rare badges now read as part of the card frame, not just a text label. */
#card-list .rarity-badge.rarity-secret-rare,
#card-list .rarity-badge.rarity-ultra-rare {
  position: relative;
  z-index: 4;
  transform: translateZ(40px);
  box-shadow: 0 8px 18px oklch(0% 0 0 / 0.32), 0 0 18px oklch(83% 0.16 84 / 0.28) !important;
}

#card-list .rarity-badge.rarity-ultra-rare {
  box-shadow: 0 8px 18px oklch(0% 0 0 / 0.32), 0 0 22px oklch(84% 0.16 205 / 0.42), 0 0 36px oklch(76% 0.2 302 / 0.3) !important;
}

/* Pack opening: turn the existing overlay into a cinematic state without changing its timing or data flow. */
#mystery-pack-panel .mystery-pack-opening {
  background: var(--nv-overlay);
  backdrop-filter: blur(14px) saturate(1.18);
}

#mystery-pack-panel .mystery-pack-opening::before,
#mystery-pack-panel .mystery-pack-opening::after {
  position: absolute;
  inset: 10%;
  pointer-events: none;
  content: "";
  border-radius: 50%;
}

#mystery-pack-panel .mystery-pack-opening::before {
  background: radial-gradient(circle, oklch(88% 0.14 84 / 0.2), oklch(76% 0.2 302 / 0.08) 18%, transparent 58%);
  animation: nexusPackBurst 1.1s var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening::after {
  opacity: 0.54;
  background-image: radial-gradient(circle, var(--nv-gold-bright) 0 1px, transparent 1.6px), radial-gradient(circle, var(--nv-cyan) 0 1px, transparent 1.6px);
  background-size: 68px 74px, 91px 103px;
  animation: nexusParticleDrift 1.6s linear infinite;
}

#mystery-pack-panel .mystery-pack-opening__stage {
  position: relative;
  z-index: 1;
  animation: nexusPackStageIn 720ms var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening__pack {
  position: relative;
  border-color: var(--nv-gold-bright);
  background:
    linear-gradient(112deg, transparent 18%, oklch(100% 0 0 / 0.24) 32%, transparent 42%),
    radial-gradient(circle at 40% 28%, oklch(69% 0.16 300 / 0.82), oklch(18% 0.05 275) 55%, var(--nv-bg-deep));
  box-shadow: 0 0 36px oklch(76% 0.2 302 / 0.48), 0 0 88px oklch(78% 0.13 84 / 0.24), inset 0 0 0 1px oklch(100% 0 0 / 0.28);
  animation: nexusPackShake 1.05s var(--nv-ease-in-out) infinite;
}

#mystery-pack-panel .mystery-pack-opening__pack::after {
  position: absolute;
  top: 16%;
  left: -18%;
  width: 136%;
  height: 1px;
  content: "";
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, var(--nv-gold-bright), transparent);
  box-shadow: 0 0 15px var(--nv-gold);
  transform: rotate(-22deg);
}

#pack-result-modal:not(.hidden) {
  background: linear-gradient(180deg, oklch(6% 0.025 252 / 0.92), oklch(8% 0.035 280 / 0.96)) !important;
}

#pack-result-modal:not(.hidden) .pack-result-shell {
  animation: nexusModalIn var(--nv-dur-cinematic) var(--nv-ease-cinematic) both;
  border-color: oklch(78% 0.13 84 / 0.56);
  box-shadow: 0 30px 100px oklch(0% 0 0 / 0.66), 0 0 70px oklch(76% 0.2 302 / 0.18);
}

#pack-result-modal .pack-reveal-card {
  transform-style: preserve-3d;
  animation: nexusRevealCardIn 760ms var(--nv-ease-cinematic) both;
}

#pack-result-modal .pack-reveal-card--secret .pack-reveal-card__face--front {
  border-color: var(--nv-sr-gold);
  box-shadow: var(--nv-shadow-rare), inset 0 0 26px oklch(83% 0.16 84 / 0.12);
}

#pack-result-modal .pack-reveal-card--ultra .pack-reveal-card__face--front {
  border-color: var(--nv-ur-cyan);
  box-shadow: var(--nv-shadow-ultra), inset 0 0 34px oklch(76% 0.2 302 / 0.16);
}

#pack-result-modal .pack-reveal-card--secret.is-revealed::after,
#pack-result-modal .pack-reveal-card--ultra.is-revealed::after {
  position: absolute;
  z-index: 5;
  inset: -12px;
  pointer-events: none;
  opacity: 1;
  border-radius: inherit;
  background: radial-gradient(circle, oklch(100% 0 0 / 0.28), transparent 62%);
  animation: nexusRareImpact 760ms var(--nv-ease-out) both;
}

#pack-result-modal .pack-reveal-card--ultra.is-revealed::after {
  background: radial-gradient(circle, oklch(84% 0.16 205 / 0.34), oklch(76% 0.2 302 / 0.18) 32%, transparent 68%);
  animation: nexusUltraImpact 900ms var(--nv-ease-out) both;
}

/* Lucky Spin: use the existing aria-busy/class states as presentation triggers. */
.nexus-spin-section.is-spin-requesting .nexus-spin-stage {
  filter: saturate(1.18) brightness(1.06);
}

.nexus-spin-section.is-spin-requesting .nexus-spin-button {
  box-shadow: 0 0 0 4px oklch(78% 0.13 84 / 0.12), 0 0 42px oklch(78% 0.13 84 / 0.34), 0 5px 0 oklch(47% 0.13 70) !important;
}

.nexus-spin-section:has(#spin-wheel.is-spinning) .nexus-spin-wheel-shell,
.nexus-spin-section:has(#spin-wheel.is-spinning) .nexus-spin-wheel {
  filter: saturate(1.22) brightness(1.08) drop-shadow(0 0 26px oklch(78% 0.12 195 / 0.32));
}

.nexus-spin-section:has(#spin-wheel.is-spinning)::before {
  opacity: 1;
  animation: nexusSpinAtmosphere 1.4s var(--nv-ease-in-out) infinite;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
  animation: nexusModalIn var(--nv-dur-cinematic) var(--nv-ease-cinematic) both;
  border-color: oklch(84% 0.16 205 / 0.72);
  box-shadow: 0 30px 100px oklch(0% 0 0 / 0.7), 0 0 72px oklch(76% 0.2 302 / 0.32), 0 0 32px oklch(78% 0.13 84 / 0.22);
}

#spin-result-modal:not(.hidden) .nexus-spin-result-card-image {
  animation: nexusRewardReveal 900ms var(--nv-ease-cinematic) both;
  box-shadow: var(--nv-shadow-ultra) !important;
}

@keyframes nexusModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nexusRevealCardIn {
  from { opacity: 0; transform: translateY(22px) rotateX(12deg) scale(0.92); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes nexusRewardReveal {
  0% { opacity: 0; transform: translateY(26px) rotateY(-14deg) scale(0.82); filter: brightness(2) saturate(1.4); }
  62% { opacity: 1; transform: translateY(-4px) rotateY(2deg) scale(1.04); filter: brightness(1.18) saturate(1.18); }
  100% { transform: translateY(0) rotateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes nexusPackStageIn {
  from { opacity: 0; transform: translateY(24px) scale(0.84); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nexusPackShake {
  0%, 100% { transform: translateY(4px) rotate(-1deg); }
  22% { transform: translateY(-3px) rotate(1deg); }
  44% { transform: translateY(1px) rotate(-1.8deg) scale(1.025); }
  66% { transform: translateY(-5px) rotate(1.4deg) scale(1.035); }
}

@keyframes nexusPackBurst {
  from { opacity: 0; transform: scale(0.5); }
  48% { opacity: 1; transform: scale(1.12); }
  to { opacity: 0.46; transform: scale(1.3); }
}

@keyframes nexusParticleDrift {
  from { transform: translateY(8px) rotate(0deg); }
  to { transform: translateY(-12px) rotate(10deg); }
}

@keyframes nexusRareImpact {
  0% { opacity: 0; transform: scale(0.72); }
  22% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes nexusUltraImpact {
  0% { opacity: 0; transform: scale(0.62); filter: brightness(2); }
  26% { opacity: 1; transform: scale(1.12); filter: brightness(1.3); }
  100% { opacity: 0; transform: scale(1.36); filter: brightness(1); }
}

@keyframes nexusSpinAtmosphere {
  0%, 100% { opacity: 0.56; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.012); }
}

@media (max-width: 720px) {
  body::before { opacity: 0.18; }
  #card-list .card-hover:hover > div:first-child > div.relative img,
  #card-list .card-hover:focus-within > div:first-child > div.relative img { transform: translateZ(18px) scale(1.04); }
  #pack-result-modal .pack-reveal-card--ultra.is-revealed::after,
  #pack-result-modal .pack-reveal-card--secret.is-revealed::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  #mystery-pack-panel .mystery-pack-opening::before,
  #mystery-pack-panel .mystery-pack-opening::after,
  #mystery-pack-panel .mystery-pack-opening__stage,
  #mystery-pack-panel .mystery-pack-opening__pack,
  #pack-result-modal:not(.hidden) .pack-result-shell,
  #pack-result-modal .pack-reveal-card,
  #pack-result-modal .pack-reveal-card--secret.is-revealed::after,
  #pack-result-modal .pack-reveal-card--ultra.is-revealed::after,
  #spin-result-modal:not(.hidden) .nexus-spin-result-dialog,
  #spin-result-modal:not(.hidden) .nexus-spin-result-card-image { animation: none !important; }
  #card-list .card-hover::after,
  #card-list .card-hover > div:first-child > div.relative::before { display: none; }
}

/* Third-pass cascade lock: this scope intentionally comes last so the pack
   sequence cannot be softened by earlier shared reveal rules. */
#mystery-pack-panel .mystery-pack-opening {
  position: fixed;
  z-index: 120;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, oklch(76% 0.2 302 / 0.12), transparent 28%),
    radial-gradient(circle at 50% 50%, oklch(78% 0.13 84 / 0.08), transparent 54%),
    var(--nv-pack-void);
  backdrop-filter: blur(16px) saturate(1.2);
}

#mystery-pack-panel .mystery-pack-opening__stage {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  min-height: min(620px, calc(100vh - 32px));
  padding: var(--nv-space-xl);
  border: 1px solid oklch(88% 0.14 88 / 0.24);
  border-radius: var(--nv-radius-lg);
  background: linear-gradient(145deg, oklch(18% 0.055 275 / 0.38), oklch(6% 0.025 260 / 0.2));
  box-shadow: 0 30px 110px oklch(0% 0 0 / 0.66), inset 0 1px 0 oklch(100% 0 0 / 0.12);
}

#mystery-pack-panel .mystery-pack-opening__pack {
  width: 164px;
  transform: perspective(850px) translateY(28px) translateZ(-120px) scale(0.82) rotateX(7deg);
  animation: nexusPackEntrance var(--nv-dur-pack) var(--nv-ease-cinematic) both;
  border-color: var(--nv-pack-amber);
  background:
    linear-gradient(112deg, transparent 14%, oklch(100% 0 0 / 0.24) 30%, transparent 39%),
    radial-gradient(circle at 42% 25%, oklch(76% 0.18 330 / 0.8), oklch(19% 0.055 275) 56%, var(--nv-pack-void));
  box-shadow:
    0 38px 28px oklch(0% 0 0 / 0.46),
    0 0 42px oklch(76% 0.18 330 / 0.44),
    0 0 90px oklch(88% 0.14 88 / 0.18),
    inset 0 0 0 1px oklch(100% 0 0 / 0.3);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-entrance .mystery-pack-opening__pack { animation-name: nexusPackEntrance; }
#mystery-pack-panel .mystery-pack-opening.is-nexus-anticipation .mystery-pack-opening__pack { animation: nexusPackAnticipate 920ms var(--nv-ease-in-out) both; }
#mystery-pack-panel .mystery-pack-opening.is-nexus-tearing .mystery-pack-opening__pack { animation: nexusPackTear 300ms var(--nv-ease-in-out) both; }
#mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__pack { animation: nexusPackBurstPack 420ms var(--nv-ease-out) both; }

#pack-result-items.is-nexus-primed .pack-reveal-card { animation-name: nexusStackCardIn; }
#pack-result-items .pack-reveal-card.is-nexus-focus { z-index: 12; transform: translateY(-18px) scale(1.045) rotateX(1deg); }
#pack-result-items .pack-reveal-card.is-nexus-focus.pack-reveal-card--secret .pack-reveal-card__inner { box-shadow: var(--nv-shadow-rare), 0 0 70px oklch(83% 0.16 84 / 0.22); }
#pack-result-items .pack-reveal-card.is-nexus-focus.pack-reveal-card--ultra .pack-reveal-card__inner { box-shadow: var(--nv-shadow-ultra), 0 0 90px oklch(76% 0.2 302 / 0.32); }

@media (max-width: 640px) {
  #mystery-pack-panel .mystery-pack-opening__stage { width: min(380px, calc(100vw - 20px)); min-height: min(560px, calc(100vh - 20px)); padding: var(--nv-space-lg); }
  #mystery-pack-panel .mystery-pack-opening__pack { width: 142px; }
  #pack-result-items .pack-reveal-card.is-nexus-focus { transform: translateY(-8px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  #mystery-pack-panel .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening__stage,
  #pack-result-items.is-nexus-primed .pack-reveal-card { animation: none !important; }
  #mystery-pack-panel .mystery-pack-opening__pack,
  #pack-result-items .pack-reveal-card.is-nexus-focus { transform: none; }
}

/* Hallmark · Mystery Pack cinematic pass
 * Presentation only: the existing redemption result, five-card payload,
 * reveal handlers and modal controls remain the source of truth. This final
 * cascade gives the existing state classes a complete pack-to-reveal arc. */
#mystery-pack-panel .mystery-pack-opening:not(.hidden) {
  display: grid !important;
  place-items: center;
  align-content: center;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: clamp(12px, 3vw, 32px);
  overflow: hidden;
  isolation: isolate;
}

html.nexus-pack-opening,
body.nexus-pack-opening {
  overflow: hidden;
  overscroll-behavior: none;
}

#mystery-pack-panel .mystery-pack-opening__stage {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(10px, 1.6vh, 18px);
  box-sizing: border-box;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  transform-style: preserve-3d;
}

#mystery-pack-panel .mystery-pack-opening__stage.is-nexus-bundle {
  width: min(520px, calc(100vw - 28px));
}

#mystery-pack-panel .nexus-pack-queue {
  position: absolute;
  z-index: 0;
  inset: 10% 6% 12%;
  pointer-events: none;
  transform-style: preserve-3d;
}

#mystery-pack-panel .nexus-pack-queue__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(54px, 8vw, 82px);
  aspect-ratio: .7;
  border: 1px solid oklch(88% 0.14 88 / .42);
  border-radius: 8px;
  background:
    linear-gradient(120deg, transparent 22%, oklch(100% 0 0 / .18) 40%, transparent 52%),
    radial-gradient(circle at 42% 28%, oklch(76% 0.18 330 / .52), var(--nv-pack-void) 68%);
  box-shadow: 0 16px 24px oklch(0% 0 0 / .42), 0 0 24px oklch(76% 0.2 302 / .16);
  opacity: .72;
  transform: translate3d(-50%, -50%, calc(var(--nexus-queue-index, 1) * -18px)) rotate(calc((var(--nexus-queue-index, 1) - 5) * 4deg)) translateX(calc((var(--nexus-queue-index, 1) - 5) * 16px)) scale(calc(1 - (var(--nexus-queue-index, 1) * .025)));
  animation: nexusPackQueueIn 620ms var(--nv-ease-cinematic) both;
  animation-delay: calc(var(--nexus-queue-index, 1) * 45ms);
}

#mystery-pack-panel .nexus-pack-queue__item::after {
  position: absolute;
  inset: 9% 12%;
  content: "";
  border: 1px solid oklch(88% 0.14 88 / .2);
  border-radius: 5px;
}

#mystery-pack-panel .nexus-pack-queue__item.is-done {
  opacity: .22;
  filter: saturate(.65);
}

#mystery-pack-panel .nexus-pack-queue__item.is-current {
  opacity: .92;
  border-color: var(--nv-pack-amber);
  box-shadow: 0 20px 30px oklch(0% 0 0 / .5), 0 0 34px oklch(88% 0.14 88 / .3);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-batch-transition .nexus-pack-queue__item {
  animation: nexusPackQueueAdvance 760ms var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-batch-transition .mystery-pack-opening__pack {
  animation: nexusPackBatchPackIn 820ms var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening__stage::before {
  box-shadow: 0 0 32px oklch(78% 0.13 195 / 0.14), inset 0 0 45px oklch(76% 0.2 302 / 0.08);
}

#mystery-pack-panel .mystery-pack-opening__stage::after {
  opacity: 0.64;
  animation: nexusPackStageRail 2.2s var(--nv-ease-in-out) infinite;
}

#mystery-pack-panel .mystery-pack-opening__pack {
  cursor: default;
  touch-action: manipulation;
  will-change: transform, filter, box-shadow;
  transform-style: preserve-3d;
  transform: perspective(900px) translate3d(0, 28px, -120px) rotateX(7deg) scale(0.82);
  transition: filter 180ms var(--nv-ease-out), box-shadow 180ms var(--nv-ease-out);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-awaiting-click .mystery-pack-opening__pack {
  cursor: pointer;
  animation: nexusPackFloat 2.8s var(--nv-ease-in-out) infinite;
  box-shadow:
    0 42px 32px oklch(0% 0 0 / 0.5),
    0 0 48px oklch(76% 0.18 330 / 0.55),
    0 0 112px oklch(88% 0.14 88 / 0.24),
    inset 0 0 0 1px oklch(100% 0 0 / 0.34);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-awaiting-click .mystery-pack-opening__pack:hover,
#mystery-pack-panel .mystery-pack-opening.is-nexus-awaiting-click .mystery-pack-opening__pack:focus-visible {
  filter: brightness(1.12) saturate(1.14);
  outline: 2px solid var(--nv-pack-amber);
  outline-offset: 8px;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-awaiting-click .mystery-pack-opening__pack::after {
  opacity: 0.92;
  animation: nexusPackFoilShimmer 2.6s var(--nv-ease-in-out) infinite;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-clicked .mystery-pack-opening__stage {
  animation: nexusPackCameraPush 760ms var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-clicked .mystery-pack-opening__pack {
  animation: nexusPackClick 760ms var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-clicked::before {
  animation: nexusPackClickVignette 760ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-tearing .mystery-pack-opening__pack {
  filter: brightness(1.38) saturate(1.2);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-tearing .mystery-pack-opening__stage::before {
  border-color: oklch(88% 0.14 88 / 0.48);
  box-shadow: 0 0 70px oklch(88% 0.14 88 / 0.2), inset 0 0 72px oklch(76% 0.2 302 / 0.12);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__stage::before {
  animation: nexusPackEnergyRing 520ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__stage::after {
  animation: nexusPackStageRailBurst 520ms var(--nv-ease-out) both;
}

#pack-result-modal.is-nexus-active .pack-result-shell {
  width: min(1160px, calc(100vw - 24px));
  max-height: min(900px, calc(100dvh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
}

#pack-result-modal.is-nexus-active .pack-result-content {
  min-height: 0;
}

#pack-result-modal .nexus-pack-progress {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  min-width: 0;
  color: var(--nv-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#pack-result-modal .nexus-pack-progress__label,
#pack-result-modal .nexus-pack-progress__summary {
  min-width: 0;
  white-space: nowrap;
}

#pack-result-modal .nexus-pack-progress__label { color: var(--nv-gold-bright); }
#pack-result-modal .nexus-pack-progress__summary { color: var(--nv-muted); text-align: right; letter-spacing: .08em; }

#pack-result-modal .nexus-pack-progress__track {
  display: grid;
  grid-template-columns: repeat(var(--nexus-pack-total, 10), minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

#pack-result-modal .nexus-pack-progress__dot {
  height: 3px;
  border-radius: 999px;
  background: oklch(100% 0 0 / .12);
  transition: background 240ms var(--nv-ease-out), box-shadow 240ms var(--nv-ease-out), transform 240ms var(--nv-ease-out);
}

#pack-result-modal .nexus-pack-progress__dot.is-done { background: oklch(78% 0.13 195 / .62); }
#pack-result-modal .nexus-pack-progress__dot.is-current {
  background: var(--nv-gold-bright);
  box-shadow: 0 0 12px oklch(88% 0.14 88 / .7);
  transform: scaleY(1.7);
}

#pack-result-modal.is-nexus-batch .pack-result-title { color: var(--nv-gold-bright); }
#pack-result-modal.is-nexus-final-pack .pack-result-title {
  text-shadow: 0 0 26px oklch(88% 0.14 88 / .46), 0 0 60px oklch(76% 0.2 302 / .2);
}

#pack-result-modal.is-nexus-pack-transitioning .pack-result-shell,
#pack-result-modal.is-nexus-summary-transition .pack-result-shell {
  animation: nexusBatchShellTransition 720ms var(--nv-ease-cinematic) both;
}

#pack-result-items.is-nexus-transitioning {
  opacity: .08;
  transform: translateY(10px) scale(.96);
  transition: opacity 360ms var(--nv-ease-out), transform 360ms var(--nv-ease-out);
}

#pack-result-items.is-nexus-transitioning .pack-reveal-card {
  animation-play-state: paused;
}

#pack-result-modal.is-nexus-skip-transition .pack-result-shell {
  animation: nexusBatchSkipTransition 480ms var(--nv-ease-out) both;
}

#pack-result-modal.is-nexus-batch-summary .pack-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px;
}

#pack-result-modal.is-nexus-batch-summary .pack-reveal-card {
  height: clamp(210px, 25vh, 260px);
  animation: nexusBatchSummaryCardIn 420ms var(--nv-ease-out) both;
}

#pack-result-modal.is-nexus-batch-summary .pack-reveal-card:nth-child(5n + 1) { animation-delay: 40ms; }
#pack-result-modal.is-nexus-batch-summary .pack-reveal-card:nth-child(5n + 2) { animation-delay: 80ms; }
#pack-result-modal.is-nexus-batch-summary .pack-reveal-card:nth-child(5n + 3) { animation-delay: 120ms; }
#pack-result-modal.is-nexus-batch-summary .pack-reveal-card:nth-child(5n + 4) { animation-delay: 160ms; }
#pack-result-modal.is-nexus-batch-summary .pack-reveal-card:nth-child(5n + 5) { animation-delay: 200ms; }

@keyframes nexusPackQueueIn {
  from { opacity: 0; transform: translate3d(-50%, -50%, -110px) rotate(0) scale(.72); }
  to { opacity: .72; transform: translate3d(-50%, -50%, calc(var(--nexus-queue-index, 1) * -18px)) rotate(calc((var(--nexus-queue-index, 1) - 5) * 4deg)) translateX(calc((var(--nexus-queue-index, 1) - 5) * 16px)) scale(calc(1 - (var(--nexus-queue-index, 1) * .025))); }
}

@keyframes nexusPackQueueAdvance {
  0% { opacity: .5; transform: translate3d(-50%, -50%, -40px) scale(.88); }
  42% { opacity: .2; transform: translate3d(-50%, -50%, -96px) translateX(-10px) rotate(-5deg) scale(.8); }
  100% { opacity: .72; transform: translate3d(-50%, -50%, calc(var(--nexus-queue-index, 1) * -18px)) rotate(calc((var(--nexus-queue-index, 1) - 5) * 4deg)) translateX(calc((var(--nexus-queue-index, 1) - 5) * 16px)) scale(calc(1 - (var(--nexus-queue-index, 1) * .025))); }
}

@keyframes nexusPackBatchPackIn {
  0% { opacity: 0; transform: perspective(900px) translate3d(0, 24px, -130px) rotateX(10deg) scale(.72); }
  58% { opacity: 1; transform: perspective(900px) translate3d(0, -4px, 24px) rotateX(-2deg) scale(1.04); }
  100% { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0) rotateX(0) scale(1); }
}

@keyframes nexusBatchShellTransition {
  0% { opacity: .42; transform: scale(.96) translateY(12px); filter: brightness(.76); }
  42% { opacity: 1; transform: scale(1.01) translateY(-3px); filter: brightness(1.1); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes nexusBatchSkipTransition {
  from { opacity: .62; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes nexusBatchSummaryCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#pack-result-items.is-nexus-primed {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center;
  min-height: clamp(300px, 46vh, 430px);
  perspective: 1500px;
  isolation: isolate;
}

#pack-result-items.is-nexus-awaiting .pack-reveal-card {
  animation-play-state: paused;
  animation-delay: 0ms !important;
}

#pack-result-items.is-nexus-primed .pack-reveal-card {
  grid-area: 1 / 1;
  width: min(224px, 42vw);
  height: min(350px, 52vh);
  transform: translate3d(var(--nexus-stack-x, 0), var(--nexus-stack-y, 0), var(--nexus-stack-z, 0)) rotate(var(--nexus-stack-angle, 0deg)) scale(var(--nexus-stack-scale, 1));
  animation: nexusPackStackCardIn 680ms var(--nv-ease-cinematic) both;
}

#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(1) { --nexus-stack-x: 0; --nexus-stack-y: 12px; --nexus-stack-z: 12px; --nexus-stack-scale: 1; --nexus-stack-angle: 0deg; z-index: 5; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(2) { --nexus-stack-x: -17px; --nexus-stack-y: 7px; --nexus-stack-z: 4px; --nexus-stack-scale: .985; --nexus-stack-angle: -3deg; z-index: 4; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(3) { --nexus-stack-x: 17px; --nexus-stack-y: 4px; --nexus-stack-z: -4px; --nexus-stack-scale: .97; --nexus-stack-angle: 3deg; z-index: 3; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(4) { --nexus-stack-x: -31px; --nexus-stack-y: 0; --nexus-stack-z: -12px; --nexus-stack-scale: .955; --nexus-stack-angle: -5deg; z-index: 2; }
#pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(5) { --nexus-stack-x: 31px; --nexus-stack-y: -3px; --nexus-stack-z: -20px; --nexus-stack-scale: .94; --nexus-stack-angle: 5deg; z-index: 1; }

#pack-result-items.is-nexus-primed .pack-reveal-card__inner {
  box-shadow: 0 30px 55px oklch(0% 0 0 / 0.62), 0 0 24px oklch(78% 0.13 195 / 0.12);
}

#pack-result-items .pack-reveal-card.is-nexus-focus {
  z-index: 20;
  filter: brightness(1.12) saturate(1.14);
  transform: translate3d(0, -12px, 45px) scale(1.045) rotateX(2deg) !important;
  transition: transform 420ms var(--nv-ease-cinematic), filter 220ms var(--nv-ease-out);
}

#pack-result-items .pack-reveal-card.is-nexus-focus::after {
  position: absolute;
  z-index: 8;
  inset: -10px;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle, oklch(100% 0 0 / 0.3), transparent 62%);
}

#pack-result-items .pack-reveal-card.is-nexus-focus.is-revealing::after {
  animation: nexusPackCardImpact 760ms var(--nv-ease-out) both;
}

#pack-result-items .pack-reveal-card.is-nexus-final {
  z-index: 24;
}

#pack-result-items.is-nexus-finale .pack-reveal-card:not(.is-nexus-final) {
  filter: brightness(0.72) saturate(0.7);
  transform: translateY(8px) scale(0.96) !important;
  transition: filter 300ms var(--nv-ease-out), transform 300ms var(--nv-ease-out);
}

#pack-result-items .pack-reveal-card.is-nexus-sr .pack-reveal-card__inner {
  animation: nexusPackSrReveal 1120ms var(--nv-ease-cinematic) both;
  box-shadow: var(--nv-shadow-rare), inset 0 0 42px oklch(83% 0.16 84 / 0.18) !important;
}

#pack-result-items .pack-reveal-card.is-nexus-sr .pack-reveal-card__face--front {
  background:
    linear-gradient(116deg, transparent 15%, oklch(100% 0 0 / 0.28) 36%, transparent 50%),
    linear-gradient(145deg, oklch(32% 0.1 76 / 0.78), oklch(18% 0.055 300 / 0.98));
  background-size: 180% 100%, 100% 100%;
  animation: nexusPackHoloSweep 1.25s var(--nv-ease-in-out) both;
}

#pack-result-items .pack-reveal-card.is-nexus-sr::before,
#pack-result-items .pack-reveal-card.is-nexus-ur::before {
  position: absolute;
  z-index: 9;
  inset: -18px;
  pointer-events: none;
  content: "";
  border-radius: 18px;
  opacity: 0;
}

#pack-result-items .pack-reveal-card.is-nexus-sr::before {
  background: radial-gradient(circle, oklch(88% 0.14 88 / 0.22), transparent 65%);
  animation: nexusPackRareRing 1120ms var(--nv-ease-out) both;
}

#pack-result-items .pack-reveal-card.is-nexus-ur {
  z-index: 30;
}

#pack-result-items .pack-reveal-card.is-nexus-ur .pack-reveal-card__inner {
  animation: nexusPackUrReveal 1480ms var(--nv-ease-cinematic) both;
  box-shadow: var(--nv-shadow-ultra), 0 0 110px oklch(76% 0.2 302 / 0.34) !important;
}

#pack-result-items .pack-reveal-card.is-nexus-ur .pack-reveal-card__face--front {
  background:
    linear-gradient(116deg, transparent 8%, oklch(100% 0 0 / 0.38) 26%, transparent 39%, oklch(84% 0.16 205 / 0.18) 55%, transparent 70%),
    linear-gradient(145deg, oklch(31% 0.13 302 / 0.9), oklch(8% 0.06 235 / 0.98));
  background-size: 230% 100%, 100% 100%;
  animation: nexusPackUrHoloSweep 1.25s var(--nv-ease-in-out) both;
}

#pack-result-items .pack-reveal-card.is-nexus-ur::before {
  background:
    radial-gradient(circle, oklch(100% 0 0 / 0.32), transparent 28%),
    conic-gradient(from 90deg, oklch(84% 0.16 205 / 0.34), oklch(76% 0.2 302 / 0.22), oklch(88% 0.14 88 / 0.34), transparent 70%);
  animation: nexusPackUrShockwave 1480ms var(--nv-ease-out) both;
}

@keyframes nexusPackStageRail {
  0%, 100% { opacity: .2; transform: scaleX(.72); }
  50% { opacity: .84; transform: scaleX(1); }
}

@keyframes nexusPackStageRailBurst {
  from { opacity: .2; transform: scaleX(.5); }
  35% { opacity: 1; transform: scaleX(1.16); }
  to { opacity: 0; transform: scaleX(1.4); }
}

@keyframes nexusPackFloat {
  0%, 100% { transform: perspective(900px) translate3d(0, 2px, 0) rotateX(0) rotateY(var(--nexus-pack-tilt-y, 0deg)) rotateX(var(--nexus-pack-tilt-x, 0deg)) scale(1.02); }
  50% { transform: perspective(900px) translate3d(0, -9px, 14px) rotate(-1deg) rotateY(var(--nexus-pack-tilt-y, 0deg)) rotateX(var(--nexus-pack-tilt-x, 0deg)) scale(1.045); }
}

@keyframes nexusPackClick {
  0% { transform: perspective(900px) translate3d(0, 0, 0) scale(1.03); filter: brightness(1.08); }
  19% { transform: perspective(900px) translate3d(0, 8px, -18px) scale(.96) rotate(-1.8deg); filter: brightness(1.22); }
  44% { transform: perspective(900px) translate3d(0, -8px, 38px) scale(1.08) rotate(1.2deg); filter: brightness(1.72) saturate(1.34); }
  100% { transform: perspective(900px) translate3d(0, 0, 70px) scale(1.16); filter: brightness(2.08) saturate(1.45); }
}

@keyframes nexusPackCameraPush {
  0% { transform: scale(1); }
  45% { transform: scale(1.02); }
  100% { transform: scale(1.045); }
}

@keyframes nexusPackClickVignette {
  from { opacity: .2; }
  45% { opacity: .95; }
  to { opacity: .4; }
}

@keyframes nexusPackFoilShimmer {
  0%, 100% { transform: rotate(-18deg) translateX(-56%); opacity: .2; }
  45% { transform: rotate(-18deg) translateX(8%); opacity: .95; }
  70% { transform: rotate(-18deg) translateX(64%); opacity: .12; }
}

@keyframes nexusPackEnergyRing {
  from { opacity: .2; transform: scale(.74); }
  35% { opacity: 1; transform: scale(1.02); }
  to { opacity: 0; transform: scale(1.22); }
}

@keyframes nexusPackStackCardIn {
  from { opacity: 0; transform: translate3d(var(--nexus-stack-x, 0), 30px, -90px) rotate(var(--nexus-stack-angle, 0deg)) scale(.82); }
  to { opacity: 1; transform: translate3d(var(--nexus-stack-x, 0), var(--nexus-stack-y, 0), var(--nexus-stack-z, 0)) rotate(var(--nexus-stack-angle, 0deg)) scale(var(--nexus-stack-scale, 1)); }
}

@keyframes nexusPackCardImpact {
  0% { opacity: 0; transform: scale(.62); }
  26% { opacity: .92; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes nexusPackHoloSweep {
  from { background-position: -130% 0, 0 0; }
  to { background-position: 150% 0, 0 0; }
}

@keyframes nexusPackSrReveal {
  0% { transform: rotateY(0) translateY(10px) scale(.96); filter: brightness(1); }
  38% { transform: rotateY(82deg) translateY(-18px) scale(1.06); filter: brightness(1.34) saturate(1.28); }
  64% { transform: rotateY(180deg) translateY(-12px) scale(1.035); filter: brightness(1.18) saturate(1.22); }
  100% { transform: rotateY(180deg) translateY(-7px) scale(1.02); filter: brightness(1.08) saturate(1.12); }
}

@keyframes nexusPackRareRing {
  0% { opacity: 0; transform: scale(.62); }
  32% { opacity: .92; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes nexusPackUrHoloSweep {
  from { background-position: -170% 0, 0 0; }
  48% { background-position: 50% 0, 0 0; }
  to { background-position: 180% 0, 0 0; }
}

@keyframes nexusPackUrReveal {
  0% { transform: rotateY(0) translateY(16px) scale(.9); filter: brightness(1); }
  24% { transform: rotateY(52deg) translateY(-20px) scale(1.1); filter: brightness(1.9) saturate(1.5); }
  50% { transform: rotateY(180deg) translateY(-14px) scale(1.065); filter: brightness(1.38) saturate(1.38); }
  72% { transform: rotateY(188deg) translateY(-7px) scale(1.035); filter: brightness(1.2) saturate(1.3); }
  100% { transform: rotateY(180deg) translateY(-5px) scale(1.02); filter: brightness(1.12) saturate(1.2); }
}

@keyframes nexusPackUrShockwave {
  0% { opacity: 0; transform: scale(.48) rotate(0); }
  22% { opacity: 1; transform: scale(1.02) rotate(18deg); }
  48% { opacity: .6; transform: scale(1.16) rotate(52deg); }
  100% { opacity: 0; transform: scale(1.46) rotate(100deg); }
}

@media (max-width: 640px) {
  #mystery-pack-panel .mystery-pack-opening__stage { width: min(380px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); }
  #mystery-pack-panel .mystery-pack-opening__stage.is-nexus-bundle { width: min(400px, calc(100vw - 20px)); }
  #mystery-pack-panel .mystery-pack-opening__pack { width: 142px; }
  #mystery-pack-panel .nexus-pack-queue__item { width: 48px; }
  #pack-result-modal.is-nexus-active .pack-result-shell { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  #pack-result-modal .nexus-pack-progress { grid-template-columns: 1fr auto; gap: 6px 10px; }
  #pack-result-modal .nexus-pack-progress__track { grid-column: 1 / -1; grid-row: 2; }
  #pack-result-modal .nexus-pack-progress__summary { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; }
  #pack-result-items.is-nexus-primed { min-height: 310px; }
  #pack-result-items.is-nexus-primed .pack-reveal-card { width: min(194px, 58vw); height: min(310px, 47vh); }
  #pack-result-modal.is-nexus-batch-summary .pack-result-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; max-height: 56vh; }
  #pack-result-modal.is-nexus-batch-summary .pack-reveal-card { height: 218px; }
  #pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(2) { --nexus-stack-x: -11px; }
  #pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(3) { --nexus-stack-x: 11px; }
  #pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(4) { --nexus-stack-x: -19px; }
  #pack-result-items.is-nexus-primed .pack-reveal-card:nth-child(5) { --nexus-stack-x: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  #mystery-pack-panel .nexus-pack-queue__item,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-batch-transition .mystery-pack-opening__pack,
  #pack-result-modal.is-nexus-pack-transitioning .pack-result-shell,
  #pack-result-modal.is-nexus-summary-transition .pack-result-shell,
  #pack-result-modal.is-nexus-skip-transition .pack-result-shell,
  #pack-result-modal.is-nexus-batch-summary .pack-reveal-card { animation: none !important; }
  #pack-result-items.is-nexus-transitioning { opacity: 1; transform: none; transition: none; }
  #mystery-pack-panel .mystery-pack-opening__stage::after,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-awaiting-click .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-awaiting-click .mystery-pack-opening__pack::after,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-clicked .mystery-pack-opening__stage,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-clicked .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-clicked::before,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__stage::before,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-burst .mystery-pack-opening__stage::after,
  #pack-result-items.is-nexus-primed .pack-reveal-card,
  #pack-result-items .pack-reveal-card.is-nexus-focus.is-revealing::after,
  #pack-result-items .pack-reveal-card.is-nexus-sr .pack-reveal-card__inner,
  #pack-result-items .pack-reveal-card.is-nexus-sr .pack-reveal-card__face--front,
  #pack-result-items .pack-reveal-card.is-nexus-sr::before,
  #pack-result-items .pack-reveal-card.is-nexus-ur .pack-reveal-card__inner,
  #pack-result-items .pack-reveal-card.is-nexus-ur .pack-reveal-card__face--front,
  #pack-result-items .pack-reveal-card.is-nexus-ur::before { animation: none !important; }
  #mystery-pack-panel .mystery-pack-opening__pack,
  #pack-result-items .pack-reveal-card.is-nexus-focus,
  #pack-result-items.is-nexus-finale .pack-reveal-card:not(.is-nexus-final) { transform: none !important; }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · scope: Lucky Spin only
 * Arcade reliquary pass: the existing Nexus Spin module keeps its DOM, data,
 * server result, rotation math, and event handlers; this layer only changes
 * atmosphere, hierarchy, state feedback, and reward reveal presentation.
 */
/* Pack Opening climax: the centered final strike is the summon trigger. */
#mystery-pack-panel .mystery-pack-opening__stage > .nexus-pack-storm {
  position: absolute;
  z-index: 1;
  inset: -22% -28%;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  transform: translateZ(0);
}

#mystery-pack-panel .nexus-pack-storm__bolt,
#mystery-pack-panel .nexus-pack-storm__impact {
  position: absolute;
  pointer-events: none;
}

#mystery-pack-panel .nexus-pack-storm__bolt {
  top: -9%;
  width: 3px;
  height: 78%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, oklch(100% 0 0 / .98) 22%, var(--nv-cyan) 58%, var(--nv-violet) 88%, transparent);
  clip-path: polygon(42% 0, 63% 0, 53% 33%, 76% 33%, 32% 67%, 43% 46%, 21% 46%);
  filter: drop-shadow(0 0 7px oklch(100% 0 0 / .9)) drop-shadow(0 0 24px var(--nv-cyan));
  transform-origin: 50% 0;
}

#mystery-pack-panel .nexus-pack-storm__bolt::before {
  position: absolute;
  inset: -3px -9px;
  content: "";
  background: inherit;
  opacity: .48;
  filter: blur(7px);
}

#mystery-pack-panel .nexus-pack-storm__bolt--one { left: 20%; transform: rotate(-18deg); }
#mystery-pack-panel .nexus-pack-storm__bolt--two { right: 16%; transform: rotate(20deg) scale(.86); }
#mystery-pack-panel .nexus-pack-storm__bolt--three { left: 35%; transform: rotate(-7deg) scale(.72); }
#mystery-pack-panel .nexus-pack-storm__bolt--final {
  top: -18%;
  left: calc(50% - 5px);
  width: 10px;
  height: 112%;
  background: linear-gradient(180deg, transparent 2%, oklch(100% 0 0) 22%, var(--nv-cyan) 46%, var(--nv-violet) 72%, oklch(100% 0 0 / .82) 88%, transparent);
  filter: drop-shadow(0 0 10px oklch(100% 0 0 / .98)) drop-shadow(0 0 34px var(--nv-cyan)) drop-shadow(0 0 64px var(--nv-violet));
}

#mystery-pack-panel .nexus-pack-storm__impact {
  top: 41%;
  left: 50%;
  width: 28%;
  aspect-ratio: 1;
  opacity: 0;
  border: 2px solid oklch(100% 0 0 / .86);
  border-radius: 50%;
  background: radial-gradient(circle, oklch(100% 0 0 / .72), var(--nv-cyan) 11%, var(--nv-violet) 27%, transparent 68%);
  box-shadow: 0 0 28px var(--nv-cyan), 0 0 72px var(--nv-violet);
  transform: translate(-50%, -50%) scale(.2);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one .nexus-pack-storm__bolt--one,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two .nexus-pack-storm__bolt--two,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three .nexus-pack-storm__bolt--three {
  animation: nexusPackLightningStrike 250ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one .nexus-pack-storm,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two .nexus-pack-storm,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three .nexus-pack-storm {
  opacity: 1;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-summon .nexus-pack-storm {
  opacity: 1;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-summon .nexus-pack-storm__bolt--final {
  animation: nexusPackFinalLightning 680ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-summon .nexus-pack-storm__impact {
  animation: nexusPackSummonImpact 720ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-storm .mystery-pack-opening__pack,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one .mystery-pack-opening__pack,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two .mystery-pack-opening__pack,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three .mystery-pack-opening__pack {
  opacity: 0;
  animation: none;
  transform: perspective(900px) translate3d(0, 32px, -170px) rotateX(10deg) scale(.72);
  filter: brightness(.55) saturate(.7);
}

/* Materialization starts only when the strongest, centered strike lands. */
#mystery-pack-panel .mystery-pack-opening.is-nexus-summon .mystery-pack-opening__pack {
  opacity: 1;
  animation: nexusPackSummon 660ms var(--nv-ease-cinematic) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-summon .mystery-pack-opening__stage {
  animation: nexusPackSummonStage 720ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-summon::before {
  animation: nexusPackFinalVignette 720ms var(--nv-ease-out) both;
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-storm .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening.is-nexus-summon .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm strong,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one strong,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two strong,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three strong,
#mystery-pack-panel .mystery-pack-opening.is-nexus-summon strong,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm [data-i18n="mysteryOpeningSubtitle"],
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one [data-i18n="mysteryOpeningSubtitle"],
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two [data-i18n="mysteryOpeningSubtitle"],
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three [data-i18n="mysteryOpeningSubtitle"],
#mystery-pack-panel .mystery-pack-opening.is-nexus-summon [data-i18n="mysteryOpeningSubtitle"] {
  opacity: 0;
  transform: translateY(6px);
}

#mystery-pack-panel .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening__stage > strong,
#mystery-pack-panel .mystery-pack-opening__stage > [data-i18n="mysteryOpeningSubtitle"] {
  transition: opacity 260ms var(--nv-ease-out), transform 260ms var(--nv-ease-out);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-ready .mystery-pack-opening__eyebrow,
#mystery-pack-panel .mystery-pack-opening.is-nexus-ready .mystery-pack-opening__stage > strong,
#mystery-pack-panel .mystery-pack-opening.is-nexus-ready .mystery-pack-opening__stage > [data-i18n="mysteryOpeningSubtitle"] {
  opacity: 1;
  transform: translateY(0);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-ready.is-nexus-awaiting-click .mystery-pack-opening__pack {
  opacity: 1;
  animation: nexusPackFloat 2.8s var(--nv-ease-in-out) infinite;
}

@keyframes nexusPackLightningStrike {
  0% { opacity: 0; transform: translateY(-5%) scaleY(.24); }
  28% { opacity: 1; transform: translateY(0) scaleY(1.04); }
  54% { opacity: .28; transform: translateY(2%) scaleY(.82); }
  72% { opacity: .92; transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(4%) scaleY(.94); }
}

@keyframes nexusPackFinalLightning {
  0% { opacity: 0; transform: translateY(-8%) scaleY(.18) scaleX(.62); }
  20% { opacity: 1; transform: translateY(0) scaleY(1.02) scaleX(1); }
  37% { opacity: .36; transform: translateY(1%) scaleY(.9) scaleX(.78); }
  52% { opacity: 1; transform: translateY(0) scaleY(1.06) scaleX(1.18); }
  72% { opacity: .7; transform: translateY(2%) scaleY(.98) scaleX(.9); }
  100% { opacity: 0; transform: translateY(6%) scaleY(1.12) scaleX(1.28); }
}

@keyframes nexusPackSummonImpact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(.72); }
  42% { opacity: .78; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

@keyframes nexusPackSummon {
  0% { opacity: 0; transform: perspective(900px) translate3d(0, 42px, -180px) rotateX(12deg) scale(.68); filter: brightness(.72) saturate(.7); }
  24% { opacity: 1; transform: perspective(900px) translate3d(0, -5px, 32px) rotateX(-3deg) scale(1.08); filter: brightness(2.15) saturate(1.28); }
  44% { opacity: 1; transform: perspective(900px) translate3d(0, -10px, 20px) rotateX(1deg) scale(1.03); filter: brightness(1.46) saturate(1.14); }
  100% { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0) rotateX(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes nexusPackSummonStage {
  0% { filter: brightness(.72); }
  22% { filter: brightness(1.9); }
  48% { filter: brightness(1.22); }
  100% { filter: brightness(1); }
}

@keyframes nexusPackFinalVignette {
  0% { opacity: .3; filter: brightness(1); }
  22% { opacity: 1; filter: brightness(2.3); }
  48% { opacity: .68; filter: brightness(1.32); }
  100% { opacity: .4; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  #mystery-pack-panel .mystery-pack-opening__stage > .nexus-pack-storm { display: none; }
  #mystery-pack-panel .mystery-pack-opening.is-nexus-storm .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three .mystery-pack-opening__pack,
  #mystery-pack-panel .mystery-pack-opening.is-nexus-summon .mystery-pack-opening__pack {
    opacity: 1;
    animation: none !important;
    transform: none;
    filter: none;
  }
}

.nexus-spin-section {
  --nexus-spin-line: color-mix(in oklab, var(--nv-spin-signal) 22%, transparent);
  --nexus-spin-line-strong: color-mix(in oklab, var(--nv-spin-metal-bright) 42%, transparent);
  --nexus-spin-ink: var(--nv-ink);
  --nexus-spin-muted: var(--nv-muted);
  position: relative;
  overflow: clip;
  isolation: isolate;
  border-color: var(--nexus-spin-line) !important;
  background:
    radial-gradient(circle at 52% 23%, color-mix(in oklab, var(--nv-spin-signal) 12%, transparent), transparent 29%),
    radial-gradient(circle at 82% 76%, color-mix(in oklab, var(--nv-spin-violet) 13%, transparent), transparent 30%),
    linear-gradient(145deg, var(--nv-spin-void), var(--nv-bg-deep) 58%, var(--nv-spin-panel));
  box-shadow: var(--nv-shadow-panel), inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 7%, transparent);
}

.nexus-spin-section::before {
  z-index: -1;
  inset: 0;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  opacity: .42;
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in oklab, var(--nv-spin-signal) 7%, transparent) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, color-mix(in oklab, var(--nv-spin-metal) 5%, transparent) 50%, transparent 50.2%);
  background-size: 5.5rem 5.5rem;
  mask-image: radial-gradient(ellipse at 50% 43%, black, transparent 78%);
  transform: none;
}

.nexus-spin-section::after {
  z-index: -1;
  inset: auto 7% 6%;
  height: 30%;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  opacity: .55;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--nv-spin-violet) 12%, transparent), transparent 68%);
  filter: blur(18px);
}

.nexus-spin-heading {
  position: relative;
  z-index: 1;
  align-items: end;
  padding-bottom: var(--nv-space-lg);
  border-bottom-color: color-mix(in oklab, var(--nv-spin-metal) 22%, transparent) !important;
}

.nexus-spin-heading h2 {
  color: var(--nv-spin-metal-bright);
  letter-spacing: .075em;
  text-shadow: 0 0 22px color-mix(in oklab, var(--nv-spin-metal) 26%, transparent), 0 8px 25px oklch(0% 0 0 / .38);
}

.nexus-spin-heading h2::after {
  width: min(9rem, 62%);
  height: 2px;
  background: linear-gradient(90deg, var(--nv-spin-signal), var(--nv-spin-metal), transparent);
  box-shadow: 0 0 14px color-mix(in oklab, var(--nv-spin-signal) 34%, transparent);
}

.nexus-spin-cost {
  border-color: color-mix(in oklab, var(--nv-spin-metal) 38%, transparent) !important;
  color: var(--nv-spin-metal-bright) !important;
  background: color-mix(in oklab, var(--nv-spin-metal) 8%, var(--nv-spin-panel)) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 8%, transparent), 0 0 22px color-mix(in oklab, var(--nv-spin-metal) 9%, transparent);
}

.nexus-spin-layout {
  position: relative;
  z-index: 1;
  gap: clamp(var(--nv-space-md), 3vw, var(--nv-space-xl));
}

.nexus-spin-stage,
.nexus-spin-exclusive {
  border-radius: var(--nv-radius-lg);
}

.nexus-spin-stage {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  border-color: color-mix(in oklab, var(--nv-spin-signal) 28%, transparent) !important;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--nv-spin-signal) 12%, transparent), transparent 34%),
    linear-gradient(160deg, color-mix(in oklab, var(--nv-spin-panel-raised) 82%, transparent), var(--nv-spin-void) 68%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 8%, transparent), inset 0 -34px 60px oklch(0% 0 0 / .22), 0 22px 48px oklch(0% 0 0 / .3);
}

.nexus-spin-stage::before {
  z-index: 0;
  inset: var(--nv-space-sm);
  border-color: color-mix(in oklab, var(--nv-spin-metal) 15%, transparent);
  border-radius: var(--nv-radius-md);
  box-shadow: inset 0 0 34px color-mix(in oklab, var(--nv-spin-signal) 5%, transparent);
}

.nexus-spin-stage::after {
  position: absolute;
  z-index: 0;
  inset: auto 14% 11%;
  height: 14%;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--nv-spin-metal) 20%, transparent), transparent 68%);
  filter: blur(12px);
  opacity: .62;
}

.nexus-spin-wheel-shell {
  z-index: 1;
  width: min(540px, 100%);
  margin-top: var(--nv-space-xs);
  filter: drop-shadow(0 28px 30px oklch(0% 0 0 / .56));
}

.nexus-spin-wheel-shell::before {
  inset: .8%;
  z-index: 0;
  border: 1px solid color-mix(in oklab, var(--nv-spin-metal-bright) 48%, transparent);
  box-shadow:
    0 0 0 7px color-mix(in oklab, var(--nv-spin-void) 94%, transparent),
    0 0 0 11px color-mix(in oklab, var(--nv-spin-metal) 18%, transparent),
    0 0 0 14px color-mix(in oklab, var(--nv-spin-signal) 8%, transparent),
    inset 0 0 28px color-mix(in oklab, var(--nv-spin-metal) 13%, transparent);
}

.nexus-spin-wheel-shell::after {
  inset: -1.6%;
  border-color: color-mix(in oklab, var(--nv-spin-signal) 38%, transparent);
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--nv-spin-metal-bright) 60%, transparent) 0 .35deg, transparent .35deg 15deg);
  mask-image: radial-gradient(circle, transparent 0 49%, black 50% 51%, transparent 52%);
  opacity: .66;
}

#spin-wheel {
  position: relative;
  z-index: 1;
  border-width: 16px;
  border-color: transparent;
  background:
    conic-gradient(from -22.5deg,
      color-mix(in oklab, var(--nv-spin-signal) 28%, var(--nv-spin-void)) 0 12.5%,
      color-mix(in oklab, var(--nv-spin-metal-deep) 70%, var(--nv-spin-void)) 12.5% 25%,
      color-mix(in oklab, var(--nv-foil-blue) 42%, var(--nv-spin-void)) 25% 37.5%,
      color-mix(in oklab, var(--nv-spin-signal-soft) 28%, var(--nv-spin-void)) 37.5% 50%,
      color-mix(in oklab, var(--nv-spin-violet) 34%, var(--nv-spin-void)) 50% 62.5%,
      color-mix(in oklab, var(--nv-spin-ruby) 30%, var(--nv-spin-void)) 62.5% 75%,
      color-mix(in oklab, var(--nv-success) 26%, var(--nv-spin-void)) 75% 87.5%,
      color-mix(in oklab, var(--nv-violet) 32%, var(--nv-spin-void)) 87.5% 100%) padding-box,
    linear-gradient(135deg, var(--nv-spin-metal-bright), var(--nv-spin-metal-deep) 26%, var(--nv-spin-metal) 48%, var(--nv-spin-metal-deep) 74%, var(--nv-spin-metal-bright)) border-box;
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--nv-spin-void) 96%, transparent),
    0 0 0 8px color-mix(in oklab, var(--nv-spin-metal) 21%, transparent),
    0 0 0 12px color-mix(in oklab, var(--nv-spin-signal) 8%, transparent),
    inset 0 0 0 2px color-mix(in oklab, var(--nv-spin-metal-bright) 18%, transparent),
    inset 0 0 46px oklch(0% 0 0 / .78),
    0 0 44px color-mix(in oklab, var(--nv-spin-signal) 13%, transparent);
  transform-style: preserve-3d;
}

#spin-wheel::before {
  inset: 5.4%;
  border-color: color-mix(in oklab, var(--nv-spin-metal-bright) 38%, transparent);
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 23px, color-mix(in oklab, var(--nv-spin-metal-bright) 6%, transparent) 24px 25px, transparent 26px 50px);
  box-shadow: inset 0 0 0 7px oklch(0% 0 0 / .25), 0 0 22px color-mix(in oklab, var(--nv-spin-signal) 10%, transparent);
}

#spin-wheel::after {
  inset: 2%;
  z-index: 10;
  border-color: color-mix(in oklab, var(--nv-spin-metal-bright) 30%, transparent);
  box-shadow: inset 0 0 0 2px oklch(0% 0 0 / .42), 0 0 0 1px color-mix(in oklab, var(--nv-spin-signal) 13%, transparent);
  opacity: .78;
}

#spin-wheel-segments {
  z-index: 2;
  background:
    repeating-conic-gradient(from -22.5deg, color-mix(in oklab, var(--nv-spin-metal-bright) 42%, transparent) 0 .8deg, transparent .8deg calc(360deg / var(--segment-count))),
    linear-gradient(135deg, color-mix(in oklab, var(--nv-ink) 4%, transparent), transparent 38%, oklch(0% 0 0 / .2));
}

.nexus-spin-segment {
  z-index: 4;
  padding-top: 10%;
  color: var(--nv-ink-soft);
  text-shadow: 0 2px 6px oklch(0% 0 0 / .94);
}

.nexus-spin-segment span {
  width: 108px;
  min-height: 70px;
  padding: var(--nv-space-sm) var(--nv-space-xs) var(--nv-space-xs);
  border-color: color-mix(in oklab, var(--nv-spin-metal-bright) 21%, transparent);
  border-radius: var(--nv-radius-md);
  background: linear-gradient(180deg, color-mix(in oklab, var(--nv-spin-panel) 73%, transparent), oklch(0% 0 0 / .22));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 7%, transparent), 0 7px 14px oklch(0% 0 0 / .18);
  backdrop-filter: blur(3px);
}

.nexus-spin-segment i {
  color: var(--nv-spin-metal-bright);
  filter: drop-shadow(0 0 7px color-mix(in oklab, var(--nv-spin-metal) 44%, transparent));
}

.nexus-spin-segment b {
  max-width: 100px;
  color: var(--nv-ink-soft);
  font-size: .62rem;
  line-height: 1.18;
  letter-spacing: .045em;
}

.nexus-spin-segment--gold span { border-color: color-mix(in oklab, var(--nv-spin-metal) 46%, transparent); }
.nexus-spin-segment--gold i { color: var(--nv-spin-metal-bright); }
.nexus-spin-segment--sapphire span { border-color: color-mix(in oklab, var(--nv-foil-blue) 56%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--nv-foil-blue) 13%, var(--nv-spin-panel)), oklch(0% 0 0 / .22)); }
.nexus-spin-segment--sapphire i { color: var(--nv-foil-blue); }
.nexus-spin-segment--teal span { border-color: color-mix(in oklab, var(--nv-spin-signal) 58%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--nv-spin-signal) 12%, var(--nv-spin-panel)), oklch(0% 0 0 / .22)); }
.nexus-spin-segment--teal i { color: var(--nv-spin-signal); }
.nexus-spin-segment--violet span { border-color: color-mix(in oklab, var(--nv-spin-violet) 62%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--nv-spin-violet) 14%, var(--nv-spin-panel)), oklch(0% 0 0 / .22)); }
.nexus-spin-segment--violet i { color: var(--nv-violet-bright); }
.nexus-spin-segment--ruby span { border-color: color-mix(in oklab, var(--nv-spin-ruby) 58%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--nv-spin-ruby) 13%, var(--nv-spin-panel)), oklch(0% 0 0 / .22)); }
.nexus-spin-segment--ruby i { color: var(--nv-spin-ruby); }

.nexus-spin-wheel-core {
  z-index: 20 !important;
  border-color: var(--nv-spin-metal-bright) !important;
  background:
    radial-gradient(circle at 28% 16%, color-mix(in oklab, var(--nv-spin-signal) 45%, transparent), transparent 26%),
    radial-gradient(circle at 74% 82%, color-mix(in oklab, var(--nv-spin-violet) 42%, transparent), transparent 55%),
    linear-gradient(145deg, var(--nv-spin-panel-raised), var(--nv-spin-void) 74%);
  box-shadow:
    inset 0 0 0 5px color-mix(in oklab, var(--nv-spin-void) 92%, transparent),
    inset 0 0 28px color-mix(in oklab, var(--nv-spin-signal) 24%, transparent),
    0 0 0 4px color-mix(in oklab, var(--nv-spin-metal) 16%, transparent),
    0 0 28px color-mix(in oklab, var(--nv-spin-violet) 37%, transparent);
}

.nexus-spin-wheel-core i { color: var(--nv-spin-metal-bright); text-shadow: 0 0 15px color-mix(in oklab, var(--nv-spin-signal) 58%, transparent); }
.nexus-spin-wheel-core strong { color: var(--nv-spin-metal-bright); letter-spacing: .18em; }
.nexus-spin-wheel-core span { color: color-mix(in oklab, var(--nv-spin-signal) 82%, var(--nv-ink)); }

.nexus-spin-pointer {
  z-index: 30;
  filter: drop-shadow(0 9px 11px oklch(0% 0 0 / .8));
}

.nexus-spin-pointer::before {
  background: linear-gradient(110deg, var(--nv-spin-metal-bright), var(--nv-spin-metal-deep) 52%, var(--nv-spin-metal));
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--nv-spin-metal) 55%, transparent));
}

.nexus-spin-pointer span {
  border-color: var(--nv-spin-metal-bright);
  background: var(--nv-spin-panel);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--nv-spin-signal) 34%, transparent), 0 0 14px color-mix(in oklab, var(--nv-spin-signal) 60%, transparent);
}

.nexus-spin-button {
  z-index: 2;
  min-height: 56px;
  margin-top: var(--nv-space-xl);
  border-color: var(--nv-spin-metal-bright);
  border-radius: var(--nv-radius-md);
  color: var(--nv-gold-ink);
  background: linear-gradient(135deg, var(--nv-spin-metal-bright), var(--nv-gold) 52%, var(--nv-spin-metal-deep));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 82%, transparent), 0 5px 0 var(--nv-spin-metal-deep), 0 15px 30px oklch(0% 0 0 / .42), 0 0 28px color-mix(in oklab, var(--nv-spin-metal) 20%, transparent);
  transition: transform var(--nv-dur-base) var(--nv-ease-out), filter var(--nv-dur-base) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out);
}

.nexus-spin-button:hover:not(:disabled),
.nexus-spin-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.1) saturate(1.08);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 92%, transparent), 0 5px 0 var(--nv-spin-metal-deep), 0 20px 38px oklch(0% 0 0 / .5), 0 0 42px color-mix(in oklab, var(--nv-spin-metal) 32%, transparent);
  outline: 3px solid var(--nv-spin-signal);
  outline-offset: 3px;
}

.nexus-spin-button:active:not(:disabled) { transform: translateY(2px); }
.nexus-spin-button[aria-busy="true"] { animation: nexusSpinButtonCharge 900ms var(--nv-ease-in-out) infinite; cursor: wait; }
.nexus-spin-button:disabled { border-color: color-mix(in oklab, var(--nv-muted) 45%, transparent); }

.nexus-spin-section.is-nexus-spinning .nexus-spin-stage {
  border-color: color-mix(in oklab, var(--nv-spin-signal) 52%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--nv-spin-signal) 12%, transparent), 0 0 62px color-mix(in oklab, var(--nv-spin-signal) 15%, transparent), 0 24px 54px oklch(0% 0 0 / .38);
}

.nexus-spin-section.is-nexus-spinning .nexus-spin-wheel-shell { filter: drop-shadow(0 28px 32px oklch(0% 0 0 / .62)) drop-shadow(0 0 30px color-mix(in oklab, var(--nv-spin-signal) 26%, transparent)); }
.nexus-spin-section.is-nexus-spinning .nexus-spin-wheel::after { animation: nexusSpinWheelSweep 900ms var(--nv-ease-in-out) infinite; }
.nexus-spin-section.is-nexus-spinning .nexus-spin-wheel-core { animation-duration: 1.25s; }

.nexus-spin-section.is-nexus-winning .nexus-spin-segment:not(.is-result) { opacity: .52; filter: saturate(.72); }
.nexus-spin-section.is-nexus-winning .nexus-spin-segment.is-result span { border-color: var(--nv-spin-metal-bright); box-shadow: 0 0 0 2px color-mix(in oklab, var(--nv-spin-metal) 50%, transparent), 0 0 32px color-mix(in oklab, var(--nv-spin-metal) 58%, transparent); animation: nexusSpinWinner 760ms var(--nv-ease-out) 2; }
.nexus-spin-section.is-nexus-winning .nexus-spin-segment.is-result b { color: var(--nv-spin-metal-bright); }

.nexus-spin-exclusive {
  position: relative;
  border-color: color-mix(in oklab, var(--nv-spin-metal) 36%, transparent) !important;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in oklab, var(--nv-spin-violet) 20%, transparent), transparent 29%),
    linear-gradient(145deg, var(--nv-spin-panel-raised), var(--nv-spin-void) 68%, color-mix(in oklab, var(--nv-spin-ruby) 9%, var(--nv-spin-void))) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 8%, transparent), inset 0 0 46px color-mix(in oklab, var(--nv-spin-violet) 9%, transparent), 0 22px 48px oklch(0% 0 0 / .3) !important;
}

.nexus-spin-exclusive::before { border-color: color-mix(in oklab, var(--nv-spin-metal) 19%, transparent); }
.nexus-spin-featured-label { color: color-mix(in oklab, var(--nv-spin-violet) 78%, var(--nv-ink-soft)); letter-spacing: .2em; }
.nexus-spin-exclusive-ribbon { border-color: color-mix(in oklab, var(--nv-spin-metal) 42%, transparent); color: var(--nv-spin-metal-bright); background: color-mix(in oklab, var(--nv-spin-metal) 8%, transparent); box-shadow: 0 0 20px color-mix(in oklab, var(--nv-spin-metal) 14%, transparent); }
.nexus-spin-card-stage { background: radial-gradient(circle, color-mix(in oklab, var(--nv-spin-metal) 17%, transparent), transparent 25%), radial-gradient(circle, color-mix(in oklab, var(--nv-spin-violet) 25%, transparent), transparent 58%), transparent; }
.nexus-spin-card-art { border-color: var(--nv-spin-metal); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--nv-spin-violet) 28%, var(--nv-spin-void)), inset 0 0 30px color-mix(in oklab, var(--nv-spin-metal) 15%, transparent), 0 0 28px color-mix(in oklab, var(--nv-spin-violet) 24%, transparent), 0 18px 32px oklch(0% 0 0 / .6); transition: transform var(--nv-dur-slow) var(--nv-ease-out), box-shadow var(--nv-dur-slow) var(--nv-ease-out); }
.nexus-spin-card-art:hover, .nexus-spin-card-art:focus-visible { transform: translateY(-6px) rotateX(2deg) scale(1.035); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--nv-spin-violet) 36%, var(--nv-spin-void)), 0 0 38px color-mix(in oklab, var(--nv-spin-metal) 34%, transparent), 0 24px 36px oklch(0% 0 0 / .64); outline: 2px solid var(--nv-spin-signal); outline-offset: 4px; }
.nexus-spin-exclusive h3 { color: var(--nv-spin-metal-bright); }
.nexus-spin-exclusive-rarity { color: color-mix(in oklab, var(--nv-spin-metal-bright) 82%, var(--nv-spin-violet)); }
.nexus-spin-exclusive-meta { border-color: color-mix(in oklab, var(--nv-spin-metal) 23%, transparent); background: color-mix(in oklab, var(--nv-spin-metal) 5%, transparent); }

.nexus-spin-reward-legend { border-top-color: color-mix(in oklab, var(--nv-spin-metal) 18%, transparent); }
.nexus-spin-subheading h3 { color: var(--nv-ink-soft); }
.nexus-spin-reward-item { border-color: color-mix(in oklab, var(--nv-spin-signal) 17%, transparent); background: linear-gradient(145deg, color-mix(in oklab, var(--nv-spin-panel-raised) 74%, transparent), oklch(0% 0 0 / .24)); transition: transform var(--nv-dur-base) var(--nv-ease-out), border-color var(--nv-dur-base) var(--nv-ease-out), box-shadow var(--nv-dur-base) var(--nv-ease-out); }
.nexus-spin-reward-item:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--nv-spin-metal) 48%, transparent); box-shadow: 0 12px 24px oklch(0% 0 0 / .24), 0 0 18px color-mix(in oklab, var(--nv-spin-signal) 11%, transparent); }
.nexus-spin-reward-icon { border-color: color-mix(in oklab, var(--nv-spin-metal) 28%, transparent); color: var(--nv-spin-metal-bright); }
.nexus-spin-reward-item strong { color: var(--nv-ink-soft); }

.nexus-spin-list-panel { border-color: color-mix(in oklab, var(--nv-spin-signal) 18%, transparent) !important; background: color-mix(in oklab, var(--nv-spin-panel) 86%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 6%, transparent), 0 12px 24px oklch(0% 0 0 / .18); }
.nexus-spin-list-panel h3 { color: var(--nv-spin-metal); }
.nexus-spin-list-panel h3 i { color: var(--nv-spin-signal); }

#spin-result-modal:not(.hidden) {
  background: color-mix(in oklab, var(--nv-overlay) 94%, var(--nv-spin-void)) !important;
  backdrop-filter: blur(16px) saturate(1.18);
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
  width: min(470px, calc(100vw - 2rem));
  border-color: color-mix(in oklab, var(--nv-spin-metal-bright) 58%, transparent);
  border-radius: var(--nv-radius-lg);
  background:
    radial-gradient(circle at 50% 0, color-mix(in oklab, var(--nv-spin-metal) 18%, transparent), transparent 43%),
    linear-gradient(145deg, var(--nv-spin-panel-raised), var(--nv-spin-void));
  box-shadow: 0 32px 110px oklch(0% 0 0 / .72), 0 0 74px color-mix(in oklab, var(--nv-spin-violet) 25%, transparent), 0 0 34px color-mix(in oklab, var(--nv-spin-metal) 17%, transparent);
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog h3 { color: var(--nv-spin-metal-bright); }
#spin-result-modal:not(.hidden) .nexus-spin-result-dialog p { color: var(--nv-muted); }
#spin-result-card { position: relative; }
#spin-result-card::before { position: absolute; z-index: -1; inset: 12% 5% 2%; content: ""; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--nv-spin-signal) 19%, transparent), transparent 68%); filter: blur(14px); }
#spin-result-modal:not(.hidden) .nexus-spin-result-card-image { border-color: var(--nv-spin-metal-bright); box-shadow: var(--nv-shadow-rare) !important; animation: nexusSpinRewardIn var(--nv-spin-long-duration) var(--nv-ease-cinematic) both; }
#spin-result-modal:not(.hidden) .nexus-spin-result-card h4 { color: var(--nv-spin-metal-bright); }
#spin-result-modal:not(.hidden) .nexus-spin-result-card-rarity strong { color: var(--nv-spin-metal-bright); }
#spin-result-modal:not(.hidden) .nexus-spin-result-card-details { border-color: var(--nv-spin-metal-bright); color: var(--nv-gold-ink); background: linear-gradient(135deg, var(--nv-spin-metal-bright), var(--nv-gold)); }
#spin-result-modal[data-nexus-result-rarity="ultra"] .nexus-spin-result-dialog { border-color: var(--nv-ur-cyan); box-shadow: 0 32px 110px oklch(0% 0 0 / .72), 0 0 78px color-mix(in oklab, var(--nv-ur-violet) 48%, transparent), 0 0 30px color-mix(in oklab, var(--nv-ur-cyan) 34%, transparent); }
#spin-result-modal[data-nexus-result-rarity="ultra"] .nexus-spin-result-card-image { box-shadow: var(--nv-shadow-ultra) !important; animation-name: nexusSpinUltraRewardIn; }
#spin-result-modal[data-nexus-result-rarity="ultra"] .nexus-spin-result-card-rarity strong { color: var(--nv-ur-cyan); }
#spin-result-modal[data-nexus-result-rarity="secret"] .nexus-spin-result-dialog { border-color: var(--nv-sr-gold); box-shadow: 0 32px 110px oklch(0% 0 0 / .72), 0 0 68px color-mix(in oklab, var(--nv-sr-gold) 35%, transparent); }
#spin-result-modal[data-nexus-result-rarity="secret"] .nexus-spin-result-card-image { box-shadow: var(--nv-shadow-rare) !important; }
#spin-result-modal[data-nexus-result-rarity="secret"] .nexus-spin-result-card-rarity strong { color: var(--nv-sr-gold); }

@keyframes nexusSpinButtonCharge {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12) saturate(1.12); }
}

@keyframes nexusSpinWheelSweep {
  0% { opacity: .28; transform: rotate(-18deg) scale(.96); }
  52% { opacity: .9; transform: rotate(18deg) scale(1.02); }
  100% { opacity: .28; transform: rotate(58deg) scale(.96); }
}

@keyframes nexusSpinWinner {
  0%, 100% { opacity: 1; transform: scale(1); }
  48% { opacity: .58; transform: scale(1.045); }
}

@keyframes nexusSpinRewardIn {
  0% { opacity: 0; transform: translateY(22px) rotateY(-16deg) scale(.82); filter: brightness(1.8) saturate(1.35); }
  62% { opacity: 1; transform: translateY(-5px) rotateY(3deg) scale(1.035); filter: brightness(1.14) saturate(1.18); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes nexusSpinUltraRewardIn {
  0% { opacity: 0; transform: translateY(26px) rotateY(-22deg) scale(.74); filter: brightness(2.2) saturate(1.5); }
  34% { opacity: 1; transform: translateY(-8px) rotateY(7deg) scale(1.08); filter: brightness(1.35) saturate(1.3); }
  54% { transform: translateY(0) rotateY(-3deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@media (max-width: 980px) {
  .nexus-spin-stage { min-height: 0; }
  .nexus-spin-exclusive { min-height: 0; }
}

@media (max-width: 680px) {
  .nexus-spin-stage { padding: var(--nv-space-lg) var(--nv-space-xs); }
  .nexus-spin-wheel-shell { width: min(390px, 100%); }
  .nexus-spin-segment span { width: 74px; min-height: 58px; padding: var(--nv-space-xs) var(--nv-space-2xs); }
  .nexus-spin-segment b { max-width: 70px; font-size: .49rem; }
  .nexus-spin-segment i { font-size: .88rem; }
  .nexus-spin-wheel-core { inset: 32% !important; }
  .nexus-spin-button { min-width: min(290px, 92%); }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-spin-section::before,
  .nexus-spin-section.is-nexus-spinning .nexus-spin-wheel::after,
  .nexus-spin-button[aria-busy="true"],
  .nexus-spin-wheel-core,
  .nexus-spin-section.is-nexus-winning .nexus-spin-segment.is-result span,
  #spin-result-modal:not(.hidden) .nexus-spin-result-dialog,
  #spin-result-modal:not(.hidden) .nexus-spin-result-card-image { animation: none !important; }
  .nexus-spin-button,
  .nexus-spin-card-art,
  .nexus-spin-reward-item { transition: none !important; }
}

/* Hallmark · scoped layout repair · rarity badges + card/lightbox/result modals
 * Existing IDs, classes, content, actions and lifecycle hooks stay unchanged.
 * This is a cascade-final correction for viewport geometry only.
 */

/* Rarity badges must remain anchored to the image frame. The older rare/ultra
   polish rule changed these two variants to position:relative, making them
   flex items and pushing them down beside the card image. */
#card-list .card-hover > div:first-child > div.relative {
  position: relative;
}

#card-list .card-hover > div:first-child > div.relative > .rarity-badge {
  position: absolute !important;
  inset: var(--nv-space-sm) var(--nv-space-sm) auto auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - (var(--nv-space-sm) * 2));
  min-width: 0;
  margin: 0;
  transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* All full-screen affected surfaces use the same viewport contract. */
html.nexus-spin-modal-open,
body.nexus-spin-modal-open,
html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

#card-detail-modal:not(.hidden),
#card-image-lightbox:not(.hidden),
#spin-result-modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(var(--nv-space-sm), 2vw, var(--nv-space-lg));
  overflow: hidden;
}

#card-detail-modal:not(.hidden),
#card-image-lightbox:not(.hidden),
#spin-result-modal:not(.hidden) {
  display: grid !important;
  place-items: center;
  align-content: center;
}

/* Card Detail: the shell owns the only internal scroll region and cannot grow
   beyond the viewport. The close control stays sticky within that region. */
#card-detail-modal:not(.hidden) .card-detail-shell {
  width: min(100%, 64rem);
  max-width: calc(100vw - (var(--nv-space-lg) * 2));
  max-height: calc(100vh - (var(--nv-space-lg) * 2));
  max-height: calc(100dvh - (var(--nv-space-lg) * 2));
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#card-detail-modal:not(.hidden) .card-detail-shell > button[onclick="closeCardDetailModal()"] {
  position: sticky !important;
  top: var(--nv-space-2xs);
  right: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: calc(var(--nv-space-xs) * -1) calc(var(--nv-space-xs) * -1) calc(var(--nv-space-sm) * -1) auto;
  padding: 0;
  border: 1px solid var(--nv-line);
  background: color-mix(in oklab, var(--nv-bg-deep) 92%, transparent);
}

#card-detail-modal:not(.hidden) #detail-card-image {
  width: 100%;
  height: min(450px, 46dvh) !important;
  max-height: calc(100dvh - 13rem);
  min-height: 0;
  object-fit: contain;
}

/* Image preview: keep the close button inside the visible panel rather than
   offsetting it outside the content box. */
#card-image-lightbox:not(.hidden) {
  z-index: var(--nexus-layer-modal-secondary) !important;
  background: color-mix(in oklab, var(--nv-overlay) 96%, var(--nv-bg-deep));
  backdrop-filter: blur(12px) saturate(1.08);
}

#card-image-lightbox:not(.hidden) .card-image-lightbox-content {
  width: min(100%, 32rem);
  max-width: calc(100vw - (var(--nv-space-lg) * 2));
  max-height: calc(100dvh - (var(--nv-space-lg) * 2));
  box-sizing: border-box;
  padding: 3rem var(--nv-space-sm) var(--nv-space-sm);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--nv-cyan) 38%, transparent);
  border-radius: var(--nv-radius-lg);
  background: linear-gradient(145deg, var(--nv-surface-2), var(--nv-bg-deep));
  box-shadow: var(--nv-shadow-float), 0 0 42px color-mix(in oklab, var(--nv-cyan) 14%, transparent);
}

#card-image-lightbox:not(.hidden) .card-image-lightbox-image {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 6rem);
  height: auto;
  object-fit: contain;
}

#card-image-lightbox:not(.hidden) .card-image-lightbox-close {
  top: var(--nv-space-xs);
  right: var(--nv-space-xs);
  background: var(--nv-bg-deep);
}

/* Lucky Spin result: the overlay and dialog both use viewport-relative bounds,
   so the reward never inherits downward drift from the section layout. */
#spin-result-modal:not(.hidden) {
  z-index: var(--nexus-layer-modal) !important;
  display: grid !important;
  place-items: center;
  align-content: center;
  padding: clamp(var(--nv-space-sm), 2vw, var(--nv-space-lg));
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
  width: min(470px, calc(100vw - (var(--nv-space-lg) * 2)));
  max-width: 100%;
  max-height: calc(100vh - (var(--nv-space-lg) * 2));
  max-height: calc(100dvh - (var(--nv-space-lg) * 2));
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog > .nexus-spin-how-close {
  position: sticky;
  top: var(--nv-space-2xs);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: calc(var(--nv-space-xs) * -1) calc(var(--nv-space-xs) * -1) calc(var(--nv-space-sm) * -1) auto;
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius-pill);
  background: color-mix(in oklab, var(--nv-bg-deep) 92%, transparent);
}

#spin-result-modal:not(.hidden) .nexus-spin-result-card-image {
  width: min(260px, 68vw);
  max-width: 100%;
  max-height: min(360px, calc(100dvh - 13rem));
  height: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  #card-detail-modal:not(.hidden),
  #card-image-lightbox:not(.hidden),
  #spin-result-modal:not(.hidden) {
    padding: var(--nv-space-xs);
  }

  #card-detail-modal:not(.hidden) .card-detail-shell,
  #card-image-lightbox:not(.hidden) .card-image-lightbox-content,
  #spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
    max-width: calc(100vw - (var(--nv-space-sm) * 2));
    max-height: calc(100dvh - (var(--nv-space-sm) * 2));
  }

  #card-detail-modal:not(.hidden) #detail-card-image {
    height: min(360px, 32dvh) !important;
    max-height: calc(100dvh - 12rem);
  }

  #card-image-lightbox:not(.hidden) .card-image-lightbox-content {
    padding: 2.75rem var(--nv-space-xs) var(--nv-space-xs);
  }

  #card-image-lightbox:not(.hidden) .card-image-lightbox-image {
    max-height: calc(100dvh - 5rem);
  }

  #spin-result-modal:not(.hidden) .nexus-spin-result-card-image {
    max-height: min(300px, calc(100dvh - 12rem));
  }
}

/* Lucky Spin result viewport contract (final cascade).
   The result surface is a body-level modal, but its previous sticky close
   control and generous fixed padding consumed part of the same height budget
   as the reward card. Keep the existing reveal intact while making the dialog
   fit the viewport before its own fallback scroll can be used. */
#spin-result-modal:not(.hidden) {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: none;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: min(470px, calc(100vw - 1.5rem));
  max-width: 100%;
  max-height: calc(100dvh - 1.5rem);
  margin: 0;
  padding: clamp(1rem, 3.2dvh, 1.75rem) clamp(1rem, 3.4vw, 1.5rem) clamp(0.9rem, 2.5dvh, 1.25rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog > .nexus-spin-how-close {
  position: absolute !important;
  top: max(0.65rem, env(safe-area-inset-top));
  right: max(0.7rem, env(safe-area-inset-right));
  z-index: 4;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 !important;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog h3 {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0.45rem 0 0.35rem;
  overflow-wrap: anywhere;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog > p {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
}

#spin-result-modal:not(.hidden) #spin-result-card {
  width: 100%;
  min-height: 0;
  margin: clamp(0.5rem, 1.5dvh, 0.85rem) 0 clamp(0.6rem, 1.8dvh, 1rem);
  gap: clamp(0.35rem, 1dvh, 0.55rem);
}

#spin-result-modal:not(.hidden) .nexus-spin-result-card-image {
  flex: 0 1 auto;
  width: min(260px, 68vw, calc(100% - 1rem));
  max-width: 100%;
  max-height: clamp(170px, calc(100dvh - 15.6rem), 360px);
  height: auto;
  object-fit: contain;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-card h4,
#spin-result-modal:not(.hidden) .nexus-spin-result-card-rarity,
#spin-result-modal:not(.hidden) .nexus-spin-result-card-details {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  #spin-result-modal:not(.hidden) {
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  }

  #spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
    width: min(470px, calc(100vw - 1rem));
    max-height: calc(100dvh - 1rem);
    padding: 1.5rem 1rem 0.9rem;
  }

  #spin-result-modal:not(.hidden) .nexus-spin-result-card-image {
    width: min(260px, 74vw, calc(100% - 0.5rem));
    max-height: clamp(150px, calc(100dvh - 14.25rem), 300px);
  }
}

/* Viewport overflow contract for the two reward/reveal surfaces. Keep the
   content scrollable inside the surface while the fixed overlay remains
   bounded to the visual viewport. This is layout-only; modal lifecycle and
   the Mystery Pack observer stay unchanged. */
#spin-result-modal:not(.hidden),
#pack-result-modal:not(.hidden) {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The result surface is rendered inside the animated Lucky Spin section.
   Any transform on that ancestor changes the containing block for a fixed
   child, so neutralize only that presentation transform while the reward is
   open; the spin/reward state itself remains untouched. */
#spin-wheel-section.is-spin-result {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html.modal-open,
body.modal-open {
  overflow-x: hidden;
}

#spin-result-modal:not(.hidden) {
  display: grid !important;
  place-items: center;
  align-content: center;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog {
  box-sizing: border-box;
  width: min(470px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  min-height: 0;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-dialog > .nexus-spin-how-close {
  position: sticky !important;
  top: 0;
  align-self: flex-end;
  margin: -0.75rem -0.75rem -2.25rem auto !important;
}

#spin-result-modal:not(.hidden) .nexus-spin-result-card-image {
  width: min(260px, 100%);
  max-width: 100%;
  max-height: min(72dvh, 360px);
  height: auto;
  object-fit: contain;
}

#pack-result-modal:not(.hidden) {
  display: grid !important;
  place-items: center;
  align-content: center;
}

#pack-result-modal:not(.hidden) .pack-result-shell {
  box-sizing: border-box;
  width: min(92vw, 1450px);
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#pack-result-modal:not(.hidden) .pack-result-content,
#pack-result-modal:not(.hidden) .pack-result-grid,
#pack-result-modal:not(.hidden) .pack-reveal-card {
  min-width: 0;
}

#pack-result-modal:not(.hidden) .pack-reveal-card {
  max-width: 100%;
  max-height: 72dvh;
}

#pack-result-modal:not(.hidden) .pack-reveal-card__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 72dvh;
  min-height: 0;
  object-fit: contain;
}

#pack-result-modal:not(.hidden) .pack-result-close {
  position: sticky;
  top: 0;
  display: flex;
  margin: 14px 14px -56px auto;
  z-index: 3;
}

@media (max-width: 640px) {
  #spin-result-modal:not(.hidden),
  #pack-result-modal:not(.hidden) {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  #spin-result-modal:not(.hidden) .nexus-spin-result-dialog,
  #pack-result-modal:not(.hidden) .pack-result-shell {
    max-height: calc(100dvh - 16px);
  }

  #pack-result-modal:not(.hidden) .pack-result-shell {
    width: min(92vw, 720px);
  }

  #pack-result-modal:not(.hidden) .pack-reveal-card__image {
    max-height: 70dvh;
  }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · hero sparkles only.
 * Reuse the existing decorative layer and parallax; preserve the page system. */
.nexus-hero .hero-particles {
  --hero-spark-gold: var(--nv-gold-bright);
  --hero-spark-violet: var(--nv-violet-bright);
  opacity: 1;
}

.nexus-hero .hero-particles::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 29% 37%, var(--hero-spark-violet) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 16%, var(--hero-spark-gold) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 73%, var(--hero-spark-violet) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 68%, var(--hero-spark-gold) 0 1px, transparent 1.5px);
  opacity: .4;
}

.nexus-hero .hero-particles i {
  width: 3px;
  height: 3px;
  background: var(--hero-spark-gold);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--hero-spark-gold) 52%, transparent),
    0 0 9px 2px color-mix(in oklch, var(--hero-spark-violet) 54%, transparent);
  opacity: .46;
  animation: nexusHeroSparkle 6.2s var(--nv-ease-in-out) infinite;
}

.nexus-hero .hero-particles i::before,
.nexus-hero .hero-particles i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: color-mix(in oklch, var(--hero-spark-gold) 82%, white);
  border-radius: 999px;
  box-shadow: 0 0 5px color-mix(in oklch, var(--hero-spark-gold) 55%, transparent);
  transform: translate(-50%, -50%);
}

.nexus-hero .hero-particles i::before { width: 1.5px; height: 12px; }
.nexus-hero .hero-particles i::after { width: 12px; height: 1.5px; }

.nexus-hero .hero-particles i:nth-child(1),
.nexus-hero .hero-particles i:nth-child(2),
.nexus-hero .hero-particles i:nth-child(6) {
  animation-name: nexusHeroBrightSparkle;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--hero-spark-gold) 66%, transparent),
    0 0 13px 3px color-mix(in oklch, var(--hero-spark-gold) 45%, transparent);
}

.nexus-hero .hero-particles i:nth-child(1)::before { height: 18px; }
.nexus-hero .hero-particles i:nth-child(1)::after { width: 18px; }
.nexus-hero .hero-particles i:nth-child(2)::before,
.nexus-hero .hero-particles i:nth-child(6)::before { height: 20px; }
.nexus-hero .hero-particles i:nth-child(2)::after,
.nexus-hero .hero-particles i:nth-child(6)::after { width: 20px; }

.nexus-hero .hero-particles i:nth-child(1) {
  top: 11%;
  left: 24%;
  width: 4px;
  height: 4px;
  animation-duration: 5.8s;
  animation-delay: -1.1s;
}

.nexus-hero .hero-particles i:nth-child(2) {
  top: 24%;
  right: 4%;
  width: 4px;
  height: 4px;
  animation-duration: 7.1s;
  animation-delay: -4.4s;
}

.nexus-hero .hero-particles i:nth-child(3) {
  bottom: 18%;
  left: 18%;
  width: 3px;
  height: 3px;
  animation-duration: 6.7s;
  animation-delay: -2.7s;
}

.nexus-hero .hero-particles i:nth-child(3)::before,
.nexus-hero .hero-particles i:nth-child(3)::after,
.nexus-hero .hero-particles i:nth-child(4)::before,
.nexus-hero .hero-particles i:nth-child(4)::after,
.nexus-hero .hero-particles i:nth-child(n+7)::before,
.nexus-hero .hero-particles i:nth-child(n+7)::after { display: none; }

.nexus-hero .hero-particles i:nth-child(4) {
  top: 61%;
  left: 12%;
  width: 3px;
  height: 3px;
  background: var(--hero-spark-violet);
  animation-duration: 7.8s;
  animation-delay: -5.6s;
}

.nexus-hero .hero-particles i:nth-child(5) {
  top: 52%;
  right: 21%;
  animation-duration: 6.4s;
  animation-delay: -3.2s;
}

.nexus-hero .hero-particles i:nth-child(5)::before { height: 9px; }
.nexus-hero .hero-particles i:nth-child(5)::after { width: 9px; }

.nexus-hero .hero-particles i:nth-child(6) {
  bottom: 8%;
  right: 29%;
  width: 4px;
  height: 4px;
  animation-duration: 5.3s;
  animation-delay: -2.1s;
}

.nexus-hero .hero-particles i:nth-child(7) {
  top: 9%;
  left: 60%;
  width: 2px;
  height: 2px;
  animation-duration: 8.3s;
  animation-delay: -6.2s;
}

.nexus-hero .hero-particles i:nth-child(8) {
  top: 42%;
  left: 5%;
  width: 3px;
  height: 3px;
  animation-duration: 6.9s;
  animation-delay: -3.8s;
}

.nexus-hero .hero-particles i:nth-child(9) {
  top: 79%;
  left: 14%;
  width: 3px;
  height: 3px;
  background: var(--hero-spark-violet);
  animation-duration: 7.4s;
  animation-delay: -5.1s;
}

.nexus-hero .hero-particles i:nth-child(10) {
  top: 76%;
  right: 7%;
  width: 2px;
  height: 2px;
  animation-duration: 9.1s;
  animation-delay: -7.4s;
}

@keyframes nexusHeroSparkle {
  0%, 18%, 48%, 100% { opacity: .46; transform: scale(.94); }
  27% { opacity: .92; transform: scale(1.08); }
  35% { opacity: .58; transform: scale(1); }
}

@keyframes nexusHeroBrightSparkle {
  0%, 16%, 48%, 100% { opacity: .68; transform: scale(.96); }
  26% { opacity: 1; transform: scale(1.12); }
  35% { opacity: .74; transform: scale(1); }
  40% { opacity: .88; transform: scale(1.05); }
}

@media (max-width: 900px) {
  .nexus-hero .hero-particles i:nth-child(5),
  .nexus-hero .hero-particles i:nth-child(n+7) { display: none; }
}

@media (max-width: 640px) {
  .nexus-hero .hero-particles { opacity: .58; }
  .nexus-hero .hero-particles::before { opacity: .16; }
  .nexus-hero .hero-particles i:nth-child(n+3) { display: none; }
  .nexus-hero .hero-particles i:nth-child(-n+2)::before { height: 9px; }
  .nexus-hero .hero-particles i:nth-child(-n+2)::after { width: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-hero .hero-particles i {
    animation: none !important;
    opacity: .54;
    transform: none;
  }
  .nexus-hero .hero-particles i:nth-child(1),
  .nexus-hero .hero-particles i:nth-child(2),
  .nexus-hero .hero-particles i:nth-child(6) { opacity: .76; }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · hero-only full-atmosphere pass.
 * Keep the existing Workbench layout, copy, artwork, CTA, tilt, and freeze safeguards.
 * The atmosphere now travels through the full hero: quiet left, connected center, strongest right.
 */
.nexus-hero {
  background:
    radial-gradient(ellipse at 10% 18%, color-mix(in oklch, var(--nv-violet) 8%, transparent), transparent 34%),
    radial-gradient(ellipse at 34% 84%, color-mix(in oklch, var(--nv-cyan) 8%, transparent), transparent 38%),
    radial-gradient(ellipse at 60% 48%, color-mix(in oklch, var(--nv-violet-bright) 15%, transparent), transparent 39%),
    radial-gradient(ellipse at 92% 76%, color-mix(in oklch, var(--nv-foil-pink) 14%, transparent), transparent 32%),
    linear-gradient(110deg, var(--nv-bg-deep) 0%, var(--nv-bg) 48%, var(--nv-pack-void) 100%);
}

.nexus-hero::before {
  opacity: .24;
  background:
    linear-gradient(112deg, transparent 0 17%, color-mix(in oklch, var(--nv-violet-bright) 8%, transparent) 29%, transparent 42% 56%, color-mix(in oklch, var(--nv-cyan) 6%, transparent) 68%, transparent 83%),
    repeating-linear-gradient(164deg, transparent 0 58px, color-mix(in oklch, var(--nv-violet) 4%, transparent) 59px 60px, transparent 61px 126px);
}

.nexus-hero::after {
  z-index: 0;
  background:
    radial-gradient(circle at 8% 22%, color-mix(in oklch, var(--nv-violet-bright) 47%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 66%, color-mix(in oklch, var(--nv-cyan) 42%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 38%, color-mix(in oklch, var(--nv-gold-bright) 42%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 50%, color-mix(in oklch, var(--nv-violet-bright) 44%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 61%, color-mix(in oklch, var(--nv-gold-bright) 58%, transparent) 0 1.3px, transparent 2.7px),
    radial-gradient(circle at 62% 82%, color-mix(in oklch, var(--nv-cyan) 44%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 18%, color-mix(in oklch, var(--nv-gold-bright) 66%, transparent) 0 1.5px, transparent 3px),
    radial-gradient(circle at 91% 78%, color-mix(in oklch, var(--nv-gold-bright) 42%, transparent) 0 1px, transparent 2px),
    radial-gradient(ellipse 48% 82% at 46% 88%, transparent 0 67%, color-mix(in oklch, var(--nv-violet-bright) 13%, transparent) 67.3% 67.8%, transparent 68.4%),
    radial-gradient(ellipse 58% 112% at 30% 13%, transparent 0 70%, color-mix(in oklch, var(--nv-cyan) 10%, transparent) 70.2% 70.7%, transparent 71.3%),
    linear-gradient(108deg, transparent 0 24%, color-mix(in oklch, var(--nv-violet-bright) 10%, transparent) 32%, transparent 40% 54%, color-mix(in oklch, var(--nv-cyan) 7%, transparent) 62%, transparent 70%);
  opacity: .78;
  pointer-events: none;
  animation: heroFullAtmosphereDrift 18s var(--nv-ease-in-out) infinite alternate;
}

.nexus-hero-copy {
  isolation: isolate;
}

.nexus-hero-copy::before {
  position: absolute;
  z-index: -1;
  inset: -25% -20% -25% -18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 44%, color-mix(in oklch, var(--nv-violet) 12%, transparent), transparent 58%),
    radial-gradient(ellipse at 78% 64%, color-mix(in oklch, var(--nv-cyan) 7%, transparent), transparent 52%);
  content: "";
  filter: blur(25px);
  opacity: .56;
  pointer-events: none;
}

.nexus-hero-copy::after {
  position: absolute;
  z-index: -1;
  top: 39%;
  left: 48%;
  width: 118%;
  height: 36%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 0 52%, color-mix(in oklch, var(--nv-violet-bright) 17%, transparent), transparent 58%),
    linear-gradient(164deg, transparent 45%, color-mix(in oklch, var(--nv-violet-bright) 10%, transparent) 49%, transparent 53%);
  content: "";
  filter: blur(14px);
  opacity: .54;
  pointer-events: none;
  transform: rotate(-7deg);
}

@keyframes heroFullAtmosphereDrift {
  0% { transform: translate3d(-.6%, .4%, 0) scale(1); }
  100% { transform: translate3d(.8%, -.5%, 0) scale(1.025); }
}

@media (max-width: 900px) {
  .nexus-hero::after { opacity: .66; }
  .nexus-hero-copy::after { opacity: .34; }
}

@media (max-width: 640px) {
  .nexus-hero::before { opacity: .14; }
  .nexus-hero::after { opacity: .48; }
  .nexus-hero-copy::before { opacity: .38; }
  .nexus-hero-copy::after { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-hero::after { animation: none; }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · navbar-only balance pass.
 * Presentation and containment only: existing IDs, handlers, routes, and auth ownership stay intact.
 */
header.sticky .nexus-header-inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: 1540px !important;
  min-height: 72px;
  gap: clamp(12px, 1.8vw, 28px);
  padding-inline: clamp(16px, 2.4vw, 34px) !important;
}

header.sticky .nexus-brand {
  min-width: clamp(184px, 16vw, 224px);
  gap: 12px;
}

header.sticky .nexus-brand-logo {
  width: 46px !important;
  height: 46px !important;
  border-radius: 11px;
  filter: grayscale(.12) sepia(.22) drop-shadow(0 0 10px color-mix(in oklch, var(--nv-cyan) 28%, transparent)) !important;
}

header.sticky .nexus-brand-title {
  font-size: 14px !important;
  letter-spacing: .11em !important;
}

header.sticky .nexus-brand-subtitle {
  margin-top: 5px;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}

header.sticky .nexus-header-center {
  display: flex;
  min-width: 0;
  gap: clamp(12px, 1.45vw, 22px);
  justify-content: flex-start;
}

header.sticky .nexus-primary-nav {
  display: flex;
  min-width: 0;
  gap: clamp(11px, 1.2vw, 19px);
  align-items: center;
  flex: 0 1 auto;
}

header.sticky .nexus-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1px;
  color: var(--nv-muted) !important;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

header.sticky .nexus-nav-link:hover {
  color: var(--nv-gold-bright) !important;
  transform: translateY(-1px);
}

header.sticky .nexus-nav-link.is-active::after {
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 2px;
  background: var(--nv-gold) !important;
  box-shadow: 0 0 12px color-mix(in oklch, var(--nv-gold) 30%, transparent);
}

header.sticky .nexus-search {
  width: clamp(168px, 18vw, 280px);
  min-width: 148px;
  max-width: 280px;
  flex: 1 1 220px;
}

header.sticky .nexus-search-input {
  height: 40px;
  min-height: 40px;
  padding-right: 12px;
  color: var(--nv-ink) !important;
  background: color-mix(in oklch, var(--nv-surface) 86%, var(--nv-bg-deep)) !important;
  border-color: var(--nv-line) !important;
}

header.sticky .nexus-search-input:focus {
  border-color: color-mix(in oklch, var(--nv-gold) 72%, var(--nv-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--nv-gold) 12%, transparent) !important;
}

header.sticky .nexus-header-actions {
  min-width: 0;
  gap: 6px !important;
  flex-wrap: nowrap;
}

header.sticky .nexus-header-actions > * {
  flex: 0 0 auto;
}

header.sticky .nexus-header-action,
header.sticky .nexus-language select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  color: var(--nv-ink-soft) !important;
  font-size: 11px;
  line-height: 1;
}

header.sticky .nexus-language {
  gap: 5px;
}

header.sticky .nexus-language > i {
  color: var(--nv-cyan) !important;
  font-size: 12px;
}

header.sticky .nexus-language select {
  width: 96px;
  padding: 0 7px !important;
  color: var(--nv-ink-soft) !important;
  background: var(--nv-surface) !important;
  border: 1px solid var(--nv-line) !important;
}

header.sticky #auth-buttons > button {
  height: 40px;
  min-width: 40px;
  padding: 0 13px;
  border: 1px solid color-mix(in oklch, var(--nv-cyan) 42%, var(--nv-line)) !important;
  border-radius: var(--nv-radius-sm);
  font-size: 11px;
  white-space: nowrap;
}

header.sticky #auth-buttons > button:hover,
header.sticky .nexus-language select:hover,
header.sticky .nexus-header-action:hover {
  border-color: color-mix(in oklch, var(--nv-gold) 48%, var(--nv-line)) !important;
  color: var(--nv-gold-bright) !important;
  background: color-mix(in oklch, var(--nv-gold) 7%, var(--nv-surface)) !important;
  box-shadow: 0 0 14px color-mix(in oklch, var(--nv-gold) 10%, transparent) !important;
}

header.sticky #user-info {
  max-width: 178px;
  padding: 0 5px;
  border: 1px solid var(--nv-line-soft) !important;
  background: color-mix(in oklch, var(--nv-surface) 72%, transparent) !important;
}

header.sticky #user-info .nexus-account-copy {
  max-width: 104px;
}

header.sticky .nexus-account-logout {
  width: 28px;
  height: 28px;
  padding: 0 !important;
}

header.sticky .nexus-cart-button,
header.sticky .nexus-notification-toggle,
header.sticky .nexus-header-actions > #wishlist-nav-button {
  min-width: 40px;
  padding-inline: 9px !important;
  border: 1px solid var(--nv-line) !important;
  background: var(--nv-surface) !important;
}

header.sticky .nexus-cart-button,
header.sticky .nexus-cart-button i {
  color: var(--nv-cyan) !important;
}

header.sticky .nexus-header-actions > #wishlist-nav-button {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  width: auto;
  min-height: 40px;
  color: var(--nv-ink-soft) !important;
  border-color: color-mix(in oklch, var(--nv-pack-rose) 42%, var(--nv-line)) !important;
}

header.sticky .nexus-header-actions > #wishlist-nav-button > span:first-child {
  color: var(--nv-pack-rose) !important;
  font-size: 1rem;
}

header.sticky .nexus-header-actions > #wishlist-nav-button:hover,
header.sticky .nexus-header-actions > #wishlist-nav-button:focus-visible {
  color: var(--nv-ink) !important;
  border-color: var(--nv-pack-rose) !important;
  box-shadow: 0 0 14px color-mix(in oklch, var(--nv-pack-rose) 18%, transparent) !important;
}

@media (max-width: 1280px) {
  header.sticky .nexus-header-inner {
    gap: 10px;
    padding-inline: 18px !important;
  }

  header.sticky .nexus-brand { min-width: 174px; }
  header.sticky .nexus-brand-logo { width: 42px !important; height: 42px !important; }
  header.sticky .nexus-brand-title { font-size: 12px !important; }
  header.sticky .nexus-brand-subtitle { font-size: 8px !important; }
  header.sticky .nexus-primary-nav { gap: 10px; }
  header.sticky .nexus-nav-link { font-size: 11px; }
  header.sticky .nexus-search { min-width: 136px; width: 190px; }
  header.sticky .nexus-language select { width: 84px; }
  header.sticky #user-info { max-width: 144px; }
  header.sticky #user-info .nexus-account-copy { max-width: 76px; }
}

@media (max-width: 1100px) {
  header.sticky .nexus-brand { min-width: 154px; gap: 8px; }
  header.sticky .nexus-brand-logo { width: 38px !important; height: 38px !important; }
  header.sticky .nexus-brand-subtitle,
  header.sticky .nexus-cart-label,
  header.sticky .nexus-header-actions > #wishlist-nav-button > span:nth-child(2) {
    display: none !important;
  }
  header.sticky .nexus-brand-title { font-size: 11px !important; letter-spacing: .08em !important; }
  header.sticky .nexus-primary-nav { gap: 8px; }
  header.sticky .nexus-nav-link { font-size: 10px; }
  header.sticky .nexus-search { min-width: 120px; width: 156px; }
  header.sticky .nexus-language select { width: 74px; }
  header.sticky #auth-buttons > button { padding-inline: 9px; }
  header.sticky #user-info .nexus-account-copy { max-width: 62px; }
}

@media (max-width: 960px) {
  header.sticky .nexus-primary-nav { display: none; }
  header.sticky .nexus-header-center { justify-content: flex-end; }
  header.sticky .nexus-search { width: min(320px, 38vw); min-width: 132px; }
}

@media (max-width: 760px) {
  header.sticky .nexus-header-inner {
    min-height: 62px;
    gap: 7px;
    padding-inline: 10px !important;
  }

  header.sticky .nexus-brand { min-width: 0; }
  header.sticky .nexus-brand-logo { width: 36px !important; height: 36px !important; }
  header.sticky .nexus-brand-title { font-size: 10px !important; }
  header.sticky .nexus-language { display: none; }
  header.sticky .nexus-account-copy { display: none !important; }
  header.sticky #user-info { max-width: 42px; padding: 0 2px; }
  header.sticky .nexus-search { width: 36vw; min-width: 112px; }
  header.sticky #auth-buttons > button > span,
  header.sticky #auth-buttons > button > i + span { display: none; }
  header.sticky #auth-buttons > button { width: 38px; padding: 0; }
  header.sticky .nexus-cart-button,
  header.sticky .nexus-notification-toggle,
  header.sticky .nexus-header-actions > #wishlist-nav-button { width: 36px; min-width: 36px; padding: 0 !important; }
}

@media (max-width: 420px) {
  header.sticky .nexus-header-inner { gap: 5px; padding-inline: 7px !important; }
  header.sticky .nexus-brand-title { font-size: 9px !important; letter-spacing: .05em !important; }
  header.sticky .nexus-brand-logo { width: 32px !important; height: 32px !important; }
  header.sticky .nexus-search { width: 34vw; min-width: 96px; }
  header.sticky .nexus-search-input { padding-left: 2.2rem; padding-right: 6px; font-size: 10px; }
  header.sticky .nexus-header-actions { gap: 3px !important; }
  header.sticky .nexus-cart-button,
  header.sticky .nexus-notification-toggle,
  header.sticky .nexus-header-actions > #wishlist-nav-button,
  header.sticky #auth-buttons > button { width: 32px; min-width: 32px; }
}

/* Pack reveal regression guard: cinematic priming may still add its visual
 * class, but the settled reveal surface must return to the real card grid.
 * Summary/history views keep their existing specialized layouts. */
#pack-result-modal:not(.is-summary):not(.is-history) #pack-result-items.is-nexus-primed {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.35vw, 20px) !important;
  place-items: stretch;
  min-height: 0;
  perspective: none;
}

#pack-result-modal:not(.is-summary):not(.is-history) #pack-result-items.is-nexus-primed .pack-reveal-card {
  grid-area: auto !important;
  width: auto !important;
  height: clamp(300px, 36vh, 455px) !important;
  transform: none !important;
  animation: packCardEnter 600ms var(--nv-ease-cinematic) both;
}

#pack-result-modal #pack-next-button:disabled {
  cursor: not-allowed;
  opacity: .46;
  filter: saturate(.58);
  pointer-events: none;
}

#pack-result-modal #pack-next-button:not(:disabled) {
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  #pack-result-modal:not(.is-summary):not(.is-history) #pack-result-items.is-nexus-primed {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  #pack-result-modal:not(.is-summary):not(.is-history) #pack-result-items.is-nexus-primed {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pack-result-modal:not(.is-summary):not(.is-history) #pack-result-items.is-nexus-primed .pack-reveal-card {
    height: min(420px, 62vh) !important;
  }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · navbar compaction pass
 * Presentation-only: existing navigation, auth, search, language, storage,
 * notification, and favorites hooks remain unchanged. */
header.sticky .nexus-header-inner {
  grid-template-columns: minmax(176px, auto) minmax(0, 1fr) auto;
  max-width: 1600px !important;
  gap: clamp(10px, 1.25vw, 20px);
  padding-inline: clamp(14px, 2vw, 30px) !important;
}

header.sticky .nexus-brand {
  min-width: 0;
  gap: 10px;
}

header.sticky .nexus-brand-logo {
  width: 44px !important;
  height: 44px !important;
}

header.sticky .nexus-brand-title {
  font-size: 13px !important;
  letter-spacing: .09em !important;
}

header.sticky .nexus-header-center {
  gap: clamp(8px, 1vw, 16px);
}

header.sticky .nexus-deck-link {
  display: none !important;
}

header.sticky .nexus-primary-nav {
  gap: clamp(8px, .82vw, 14px);
}

header.sticky .nexus-nav-link {
  min-height: 38px;
  padding-inline: 0;
  font-size: 11px;
  letter-spacing: .01em;
}

header.sticky #guide-open-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0 !important;
  border: 1px solid var(--nv-line) !important;
  border-radius: 50%;
  background: color-mix(in oklch, var(--nv-surface) 82%, transparent) !important;
  color: var(--nv-ink-soft) !important;
  font-size: 0;
  line-height: 1;
}

header.sticky #guide-open-button::before {
  content: "?";
  color: var(--nv-gold-bright);
  font-size: 16px;
  font-weight: 800;
}

header.sticky #guide-open-button:hover,
header.sticky #guide-open-button:focus-visible {
  border-color: var(--nv-gold) !important;
  color: var(--nv-gold-bright) !important;
  background: color-mix(in oklch, var(--nv-gold) 8%, var(--nv-surface)) !important;
  box-shadow: 0 0 14px color-mix(in oklch, var(--nv-gold) 16%, transparent) !important;
  transform: translateY(-1px);
}

header.sticky .nexus-search {
  width: clamp(170px, 14vw, 230px);
  min-width: 150px;
  max-width: 230px;
  flex-basis: 200px;
}

header.sticky .nexus-header-actions {
  gap: 4px !important;
}

header.sticky .nexus-language {
  gap: 4px;
}

header.sticky .nexus-language select {
  width: 82px;
  padding-inline: 5px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.sticky #auth-buttons > button {
  padding-inline: 10px;
  font-size: 10px;
}

header.sticky #user-info {
  max-width: 150px;
  gap: 5px;
  padding-inline: 4px;
}

header.sticky #user-info .nexus-account-copy {
  max-width: 76px;
}

header.sticky .nexus-account-name {
  max-width: 74px;
}

header.sticky .nexus-account-username {
  font-size: 9px;
}

header.sticky .nexus-cart-button,
header.sticky .nexus-notification-toggle,
header.sticky .nexus-header-actions > #wishlist-nav-button {
  min-width: 38px;
  min-height: 38px;
  height: 38px;
  padding-inline: 8px !important;
  gap: 5px;
}

header.sticky .nexus-cart-label,
header.sticky .nexus-header-actions > #wishlist-nav-button > span:nth-child(2) {
  font-size: 9px;
  letter-spacing: .05em;
}

@media (max-width: 1280px) {
  header.sticky .nexus-header-inner {
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 16px !important;
  }

  header.sticky .nexus-brand-logo {
    width: 40px !important;
    height: 40px !important;
  }

  header.sticky .nexus-brand-title {
    font-size: 12px !important;
  }

  header.sticky .nexus-primary-nav {
    gap: 7px;
  }

  header.sticky .nexus-nav-link {
    font-size: 10px;
  }

  header.sticky .nexus-search {
    width: clamp(160px, 15vw, 205px);
    min-width: 138px;
  }

  header.sticky .nexus-language select {
    width: 72px;
  }

  header.sticky #user-info {
    max-width: 128px;
  }
}

@media (max-width: 1100px) {
  header.sticky .nexus-brand {
    min-width: 148px;
  }

  header.sticky .nexus-brand-subtitle,
  header.sticky .nexus-cart-label,
  header.sticky .nexus-header-actions > #wishlist-nav-button > span:nth-child(2) {
    display: none !important;
  }

  header.sticky .nexus-search {
    min-width: 118px;
    width: clamp(150px, 16vw, 185px);
  }

  header.sticky .nexus-language select {
    width: 58px;
  }

  header.sticky #auth-buttons > button {
    padding-inline: 8px;
  }

  header.sticky #user-info .nexus-account-copy {
    max-width: 56px;
  }
}

@media (max-width: 960px) {
  header.sticky .nexus-primary-nav {
    display: none;
  }

  header.sticky .nexus-header-center {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  header.sticky .nexus-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 60px;
    gap: 6px;
    padding-inline: 9px !important;
  }

  header.sticky .nexus-brand-logo {
    width: 34px !important;
    height: 34px !important;
  }

  header.sticky .nexus-brand-title {
    font-size: 10px !important;
  }

  header.sticky .nexus-search {
    width: 100%;
    min-width: 108px;
    max-width: none;
  }

  header.sticky .nexus-language {
    display: none;
  }

  header.sticky #user-info .nexus-account-copy,
  header.sticky #auth-buttons > button > span,
  header.sticky #auth-buttons > button > i + span {
    display: none !important;
  }

  header.sticky #user-info {
    max-width: 38px;
    padding-inline: 1px;
  }

  header.sticky #auth-buttons > button {
    width: 36px;
    padding: 0;
  }

  header.sticky .nexus-cart-button,
  header.sticky .nexus-notification-toggle,
  header.sticky .nexus-header-actions > #wishlist-nav-button {
    width: 34px;
    min-width: 34px;
    padding-inline: 0 !important;
  }

  header.sticky #guide-open-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
}

@media (max-width: 420px) {
  header.sticky .nexus-header-inner {
    gap: 4px;
    padding-inline: 6px !important;
  }

  header.sticky .nexus-brand-title {
    font-size: 9px !important;
    letter-spacing: .04em !important;
  }

  header.sticky .nexus-brand-logo {
    width: 30px !important;
    height: 30px !important;
  }

  header.sticky .nexus-search {
    min-width: 88px;
  }

  header.sticky .nexus-search-input {
    padding-left: 2.15rem;
    padding-right: 5px;
    font-size: 10px;
  }

  header.sticky .nexus-header-actions {
    gap: 2px !important;
  }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · scope: pack-opening visual-only
 * This cascade consumes existing presentation state classes only. It does not
 * own reveal state, click handling, timers, listeners, or pack data.
 */
#mystery-pack-panel .mystery-pack-opening:not(.hidden) {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--nv-violet) 18%, transparent), transparent 30%),
    radial-gradient(circle at 50% 58%, color-mix(in oklab, var(--nv-gold) 10%, transparent), transparent 54%),
    var(--nv-pack-void);
}

#mystery-pack-panel .mystery-pack-opening:not(.hidden)::before {
  background:
    radial-gradient(circle at 50% 44%, color-mix(in oklab, var(--nv-spotlight) 68%, transparent), transparent 18%),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--nv-violet) 24%, transparent), transparent 52%),
    linear-gradient(180deg, color-mix(in oklab, var(--nv-pack-void) 74%, transparent), color-mix(in oklab, var(--nv-bg-deep) 86%, transparent));
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-storm,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-one,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-two,
#mystery-pack-panel .mystery-pack-opening.is-nexus-storm-three {
  background:
    radial-gradient(circle at 50% 46%, color-mix(in oklab, var(--nv-cyan) 9%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in oklab, var(--nv-pack-void) 94%, transparent), var(--nv-pack-void));
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-summon {
  background:
    radial-gradient(circle at 50% 48%, color-mix(in oklab, var(--nv-spotlight) 88%, transparent), transparent 14%),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--nv-cyan) 16%, transparent), transparent 42%),
    var(--nv-pack-void);
}

#mystery-pack-panel .mystery-pack-opening.is-nexus-ready .mystery-pack-opening__stage {
  box-shadow:
    0 30px 110px color-mix(in oklab, var(--nv-pack-void) 82%, transparent),
    0 0 54px color-mix(in oklab, var(--nv-violet) 22%, transparent),
    inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 12%, transparent);
}

#pack-result-modal.is-nexus-visible .pack-result-shell {
  border-color: color-mix(in oklab, var(--nv-gold-bright) 66%, var(--nv-violet));
  box-shadow:
    0 30px 100px color-mix(in oklab, var(--nv-pack-void) 86%, transparent),
    0 0 72px color-mix(in oklab, var(--nv-violet) 22%, transparent),
    inset 0 1px 0 color-mix(in oklab, var(--nv-ink) 10%, transparent);
}

#pack-result-items.is-nexus-primed .pack-reveal-card {
  filter: drop-shadow(0 22px 28px color-mix(in oklab, var(--nv-pack-void) 76%, transparent));
}

#pack-result-items .pack-reveal-card.is-revealing {
  filter: brightness(1.18) saturate(1.18) drop-shadow(0 0 22px color-mix(in oklab, var(--nv-gold-bright) 34%, transparent));
  transition: filter var(--nv-dur-slow) var(--nv-ease-out);
}

#pack-result-items .pack-reveal-card--rare.is-revealed .pack-reveal-card__face--front {
  box-shadow:
    0 0 24px color-mix(in oklab, var(--nv-cyan) 30%, transparent),
    inset 0 0 26px color-mix(in oklab, var(--nv-cyan) 12%, transparent);
}

#pack-result-items .pack-reveal-card--secret.is-revealed .pack-reveal-card__face--front {
  box-shadow:
    var(--nv-shadow-rare),
    inset 0 0 34px color-mix(in oklab, var(--nv-sr-gold) 18%, transparent);
}

#pack-result-items .pack-reveal-card--ultra.is-revealed .pack-reveal-card__face--front {
  box-shadow:
    var(--nv-shadow-ultra),
    inset 0 0 44px color-mix(in oklab, var(--nv-ur-cyan) 18%, transparent);
}

#pack-result-items .pack-reveal-card--secret.is-revealed .pack-reveal-card__rarity,
#pack-result-items .pack-reveal-card--ultra.is-revealed .pack-reveal-card__rarity {
  text-shadow: 0 0 12px currentColor;
}

@media (prefers-reduced-motion: reduce) {
  #mystery-pack-panel .mystery-pack-opening:not(.hidden)::before,
  #pack-result-items .pack-reveal-card.is-revealing {
    transition: none;
    animation: none !important;
  }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4 · scope: navbar right-actions spacing.
 * Presentation-only: existing labels, IDs, handlers, auth hooks, and dropdown
 * ownership remain unchanged. Desktop keeps readable labels; narrow layouts
 * continue using the existing compact breakpoints above.
 */
@media (min-width: 1281px) {
  header.sticky .nexus-header-actions {
    min-width: max-content;
    flex-shrink: 0;
    gap: clamp(8px, .65vw, 12px) !important;
  }

  header.sticky .nexus-language select {
    width: clamp(108px, 6.5vw, 124px);
    min-width: 108px;
    max-width: none;
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
  }

  header.sticky #user-info {
    width: max-content;
    min-width: 188px;
    max-width: 300px;
    flex-shrink: 0;
    padding-inline: 8px;
  }

  header.sticky #user-info .nexus-account-copy {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  header.sticky #user-info .nexus-account-name,
  header.sticky #user-info .nexus-account-username {
    max-width: 100%;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) {
  header.sticky .nexus-header-actions {
    min-width: max-content;
    flex-shrink: 0;
    gap: 8px !important;
  }

  header.sticky .nexus-language select {
    width: 104px;
    min-width: 104px;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  header.sticky #user-info {
    width: max-content;
    min-width: 168px;
    max-width: 270px;
    flex-shrink: 0;
    padding-inline: 7px;
  }

  header.sticky #user-info .nexus-account-copy {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  header.sticky #user-info .nexus-account-name,
  header.sticky #user-info .nexus-account-username {
    max-width: 100%;
  }
}