/* Hallmark · macrostructure: Workbench · tone: atmospheric · anchor hue: violet · scope: hero-only · pre-emit critique: P5 H5 E5 S5 R4 V4 */
/* Compact Nexus Vault header and search dropdown */
.nexus-header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nexus-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.nexus-brand-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
}

.nexus-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.nexus-spin-section { margin-top: 3rem; padding: 2rem; border: 1px solid rgba(245,158,11,.35); border-radius: 20px; background: radial-gradient(circle at 18% 15%, rgba(245,158,11,.12), transparent 32%), #080d16; box-shadow: 0 0 38px rgba(245,158,11,.08); color: #e5e7eb; }
.nexus-spin-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.nexus-eyebrow { color:#fbbf24; font-size:.68rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.nexus-spin-heading h2 { margin:.45rem 0; color:#fff; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:950; text-transform:uppercase; }
.nexus-spin-heading p { margin:0; color:#94a3b8; font-size:.85rem; }
.nexus-spin-cost { border:1px solid rgba(245,158,11,.35); border-radius:10px; padding:.7rem .9rem; color:#fcd34d; font-size:.75rem; font-weight:800; white-space:nowrap; }
.nexus-spin-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr); gap:2rem; align-items:start; }
.nexus-spin-stage { position:relative; display:flex; flex-direction:column; align-items:center; min-height:0; justify-content:flex-start; }
.nexus-spin-wheel { position:relative; width:min(390px,78vw); aspect-ratio:1; border-radius:50%; border:10px solid #f59e0b; background:#16110a; box-shadow:0 0 0 5px #31200a, 0 0 38px rgba(245,158,11,.35); transition:transform 5.5s cubic-bezier(.12,.72,.15,1); overflow:hidden; }
.nexus-spin-segments { position:absolute; inset:0; background:conic-gradient(from -22.5deg, #f59e0b 0 12.5%, #172554 12.5% 25%, #7c2d12 25% 37.5%, #164e63 37.5% 50%, #713f12 50% 62.5%, #312e81 62.5% 75%, #14532d 75% 87.5%, #581c87 87.5% 100%); }
.nexus-spin-segment { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:1.15rem; transform:rotate(calc(var(--segment-index) * (360deg / var(--segment-count)))); color:#fff; font-size:.65rem; font-weight:950; text-align:center; text-transform:uppercase; pointer-events:none; }
.nexus-spin-segment span { width:70px; transform:rotate(calc(-1 * var(--segment-index) * (360deg / var(--segment-count)))); text-shadow:0 1px 4px #000; }
.nexus-spin-wheel-core { position:absolute; z-index:2; inset:37%; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.2rem; background:#0b1020; border:4px solid #fcd34d; color:#fcd34d; font-size:.55rem; font-weight:950; box-shadow:0 0 20px rgba(0,0,0,.7); }
.nexus-spin-wheel-core i { font-size:1.1rem; }
.nexus-spin-pointer { position:absolute; z-index:3; top:calc(50% - 214px); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:32px solid #fef3c7; filter:drop-shadow(0 0 6px #f59e0b); }
.nexus-spin-button { margin-top:1.4rem; border:1px solid #fbbf24; border-radius:10px; padding:.85rem 1.5rem; background:linear-gradient(135deg,#f59e0b,#b45309); color:#1c1204; font-size:.78rem; font-weight:950; letter-spacing:.12em; box-shadow:0 0 18px rgba(245,158,11,.25); transition:transform .2s, filter .2s; }
.nexus-spin-button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.15); }.nexus-spin-button:disabled { opacity:.55; cursor:not-allowed; }
.nexus-spin-status { min-height:1.3rem; margin-top:.7rem; color:#fde68a; font-size:.8rem; font-weight:800; text-align:center; }.nexus-spin-remaining { color:#94a3b8; font-size:.7rem; }
.nexus-spin-exclusive { padding:1.4rem; border:1px solid rgba(217,70,239,.45); border-radius:16px; background:linear-gradient(145deg,rgba(76,29,149,.28),rgba(8,13,24,.9)); text-align:center; }
.nexus-spin-card-art { display:grid; place-items:center; width:clamp(170px,14vw,220px); height:auto; aspect-ratio:5 / 7; max-height:min(38vh,310px); margin:clamp(6px,1vw,12px) auto; border:2px solid #fcd34d; border-radius:8px; color:#fcd34d; font-size:3rem; background:radial-gradient(circle,#713f12,#111827 65%); box-shadow:0 0 25px rgba(217,70,239,.3); }
.nexus-spin-exclusive h3 { color:#fef3c7; font-size:1rem; font-weight:900; }.nexus-spin-exclusive p { color:#a5b4fc; font-size:.8rem; line-height:1.5; }.nexus-spin-chance { display:inline-block; margin-top:.6rem; padding:.45rem .7rem; border-radius:999px; color:#f0abfc; background:rgba(217,70,239,.12); font-size:.68rem; font-weight:900; }
.nexus-spin-chance, .nexus-spin-disclaimer { display:none !important; }
.nexus-spin-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.5rem; }.nexus-spin-list-panel { min-height:130px; padding:1rem; border:1px solid #1e293b; border-radius:12px; background:rgba(2,6,23,.7); }.nexus-spin-list-panel h3 { margin:0 0 .75rem; color:#fcd34d; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.nexus-spin-list-panel>div { display:grid; gap:.45rem; color:#94a3b8; font-size:.72rem; }.nexus-spin-list-item { display:flex; justify-content:space-between; gap:.5rem; padding:.45rem; border-bottom:1px solid #1e293b; }.nexus-spin-list-item strong { color:#e2e8f0; }
@media (max-width: 760px) { .nexus-spin-section { padding:1rem; }.nexus-spin-heading { flex-direction:column; }.nexus-spin-layout,.nexus-spin-bottom-grid { grid-template-columns:1fr; }.nexus-spin-stage { min-height:0; }.nexus-spin-pointer { top:calc(50% - 198px); }.nexus-spin-cost { align-self:flex-start; } }

.nexus-search {
  position: relative;
  flex: 1 1 420px;
  width: min(100%, 430px);
  min-width: 180px;
  max-width: 560px;
}

.nexus-search-input {
  height: 40px;
  width: 100%;
}

.nexus-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(360px, calc(100vh - 92px));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 80;
}

.nexus-search-result {
  min-height: 58px;
}

.nexus-search-thumb,
.nexus-search-placeholder {
  width: 34px;
  height: 44px;
  flex: 0 0 34px;
}

.nexus-search-thumb {
  object-fit: cover;
}

.nexus-search-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 116, 139, 0.8);
  border-radius: 6px;
  background: #0f172a;
  color: #64748b;
}

.nexus-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.nexus-header-action {
  height: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nexus-language {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.nexus-language select {
  max-width: 140px;
  min-width: 0;
}

.nexus-account {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  min-width: 0;
  flex-shrink: 0;
  padding: 6px 10px;
  position: relative;
}

.nexus-account-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  gap: 2px;
}

.nexus-account-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.nexus-account-name {
  display: block;
  min-width: 0;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.nexus-account-username {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.nexus-admin-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.nexus-account-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.register-input.field-invalid,
.register-input:invalid {
  border-color: rgba(248, 113, 113, 0.8) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3);
}

.field-error {
  margin-top: 6px;
  color: #fca5a5;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  animation: nexus-field-fade 180ms ease;
}

@keyframes nexus-field-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nexus-notification-root {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: var(--nexus-layer-toast, 1100);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.nexus-notification {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
  opacity: 0;
  transform: translateX(18px) scale(0.96);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  backdrop-filter: blur(10px);
}

.nexus-notification.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.nexus-notification--success {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 18px 40px rgba(16, 185, 129, 0.18);
}

.nexus-notification--error {
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 18px 40px rgba(239, 68, 68, 0.18);
}

.nexus-notification--warning {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 18px 40px rgba(251, 191, 36, 0.14);
}

.nexus-notification--info {
  border-color: rgba(103, 232, 249, 0.38);
  box-shadow: 0 18px 40px rgba(34, 211, 238, 0.14);
}

.nexus-notification__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 900;
  margin-top: 2px;
}

.nexus-notification--success .nexus-notification__icon {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

.nexus-notification--error .nexus-notification__icon {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.nexus-notification--warning .nexus-notification__icon {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

.nexus-notification--info .nexus-notification__icon {
  background: rgba(34, 211, 238, 0.18);
  color: #67e8f9;
}

.nexus-notification__content {
  min-width: 0;
}

.nexus-notification__title {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f8fafc;
  margin-bottom: 2px;
}

.nexus-notification__message {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

.nexus-notification__close {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(203, 213, 225, 0.9);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.nexus-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--nexus-layer-modal-secondary, 1050);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
}

.nexus-confirm {
  width: min(420px, calc(100vw - 28px));
  padding: 22px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
}

.nexus-confirm__title {
  margin: 0 0 10px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nexus-confirm__message {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.nexus-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.nexus-confirm__cancel,
.nexus-confirm__ok {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 120ms ease,
    opacity 120ms ease;
}

.nexus-confirm__cancel {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
}

.nexus-confirm__ok {
  background: linear-gradient(135deg, #10b981, #22c55e);
  border-color: rgba(52, 211, 153, 0.48);
  color: #06220f;
}

.nexus-confirm__cancel:hover,
.nexus-confirm__ok:hover {
  transform: translateY(-1px);
}

.pack-card-shell {
  position: relative;
  overflow: hidden;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: 18px;
  border: 1px solid rgba(217, 70, 239, 0.3);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.82);
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.08);
}

.mystery-pack-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.mystery-pack-left {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.mystery-pack-latest {
  min-width: 0;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.62);
}

.mystery-pack-latest__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mystery-pack-latest__eyebrow,
.mystery-pack-empty__eyebrow {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mystery-pack-latest__header h4 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.mystery-pack-latest__header > span {
  flex: 0 0 auto;
  color: #f0abfc;
  font-size: 11px;
  font-weight: 800;
}

.mystery-pack-received-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mystery-pack-received-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.84);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.mystery-pack-received-card.is-clickable { cursor: pointer; }
.mystery-pack-received-card.is-clickable:hover,
.mystery-pack-received-card.is-clickable:focus-visible {
  border-color: rgba(103, 232, 249, 0.7);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.12);
  outline: none;
  transform: translateY(-4px);
}

.mystery-pack-received-card__image {
  display: grid;
  place-items: center;
  aspect-ratio: 0.7;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.8);
}

.mystery-pack-received-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mystery-pack-received-card__image span {
  color: #67e8f9;
  font-size: 22px;
  font-weight: 900;
}

.mystery-pack-received-card strong {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: #e2e8f0;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mystery-pack-received-card > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mystery-pack-received-card--rare > span { color: #60a5fa; }
.mystery-pack-received-card--ultra > span { color: #fcd34d; }
.mystery-pack-received-card--secret > span { color: #ffd166; }
.mystery-pack-received-card--legendary > span { color: #f0abfc; }

.mystery-pack-latest__caption {
  margin-top: 12px;
  color: #64748b;
  font-size: 10px;
}

.mystery-pack-empty {
  display: grid;
  min-height: 230px;
  place-content: center;
  gap: 8px;
  text-align: center;
}

.mystery-pack-empty strong { color: #e2e8f0; font-size: 13px; }
.mystery-pack-empty span { color: #94a3b8; font-size: 11px; }

.pack-pool-list::-webkit-scrollbar { width: 4px; }
.pack-pool-list::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
.pack-pool-list::-webkit-scrollbar-thumb { background: rgba(217, 70, 239, 0.45); border-radius: 999px; }

@media (max-width: 900px) {
  .mystery-pack-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .mystery-pack-received-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .mystery-pack-layout { grid-template-columns: 1fr; }
  .mystery-pack-received-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Commerce surfaces: keep the existing modal markup and actions, soften the cyber treatment. */
#cart-modal, #card-detail-modal { background: rgba(8,11,16,.82) !important; backdrop-filter: blur(10px); }
#cart-modal > div, .card-detail-shell { border: 1px solid rgba(230,184,74,.28) !important; border-radius: 14px !important; background: #101620 !important; box-shadow: 0 26px 80px rgba(0,0,0,.55) !important; }
#cart-modal h3, #cart-modal .text-cyan-400, #cart-total { color: var(--nv-gold-light) !important; }
#cart-modal .border-slate-800, #cart-modal .border-slate-700, #cart-modal .border-slate-700\/80 { border-color: var(--nv-line) !important; }
#cart-modal input, #cart-modal select { color: #e5e7eb !important; background: #0d121a !important; border-color: var(--nv-line) !important; }
#cart-modal button[onclick="checkout()"] { color: #1e1808 !important; background: var(--nv-gold-light) !important; border: 0 !important; box-shadow: none !important; }
#card-detail-modal .card-detail-navigation__button { width: 42px; height: 52px; color: var(--nv-gold-light); border-color: rgba(230,184,74,.35); background: #151c28; box-shadow: none; }
.card-detail-shell { border-width: 1px !important; }
#detail-card-image { background: #0a0e14 !important; border-radius: 10px !important; }
#detail-card-price { color: var(--nv-gold-light) !important; filter: none !important; text-shadow: none !important; }
#detail-card-rarity { color: var(--nv-gold-light) !important; border-color: rgba(230,184,74,.45) !important; background: rgba(230,184,74,.1) !important; box-shadow: none !important; }
.card-detail-grid > div { border: 1px solid var(--nv-line) !important; border-left: 2px solid rgba(230,184,74,.35) !important; border-radius: 7px; background: #0d121a !important; }
#detail-add-to-cart { color: #1e1808 !important; background: var(--nv-gold-light) !important; border-color: transparent !important; box-shadow: none !important; }
#detail-buy-now { color: #d5bdf0 !important; background: rgba(168,136,216,.1) !important; border-color: rgba(168,136,216,.5) !important; box-shadow: none !important; }
.card-image-lightbox-image { border-color: rgba(230,184,74,.5) !important; box-shadow: 0 24px 80px rgba(0,0,0,.65) !important; }
.pixel-footer { border-top: 1px solid rgba(230,184,74,.35) !important; background: #0d121a !important; box-shadow: none !important; }
.pixel-footer-card { border: 1px solid var(--nv-line) !important; border-radius: 10px; box-shadow: none !important; background: #101620 !important; }
.pixel-footer-link:hover { color: var(--nv-gold-light) !important; text-shadow: none !important; }
.ai-chat-toggle { color: #1e1808 !important; background: var(--nv-gold-light) !important; border-color: transparent !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; }
.ai-chat-panel { border-color: rgba(230,184,74,.35) !important; background: #101620 !important; box-shadow: 0 24px 60px rgba(0,0,0,.5) !important; }
.ai-chat-header { background: #151c28 !important; border-bottom-color: var(--nv-line) !important; }
.ai-chat-title, .ai-chat-send { color: var(--nv-gold-light) !important; }
.ai-chat-send { background: rgba(230,184,74,.12) !important; border-color: rgba(230,184,74,.35) !important; }

.pack-reveal-aurora {
  position: absolute;
  inset: -10% -15% auto -15%;
  height: 220px;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(192, 132, 252, 0.28),
    rgba(168, 85, 247, 0.08),
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
}

#pack-result-items {
  position: relative;
  z-index: 1;
}

.pack-reveal-card {
  perspective: 1400px;
  min-height: 240px;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  animation: packCardEnter 500ms ease both;
}

.pack-card-heading,
.pack-balance-row,
.pack-progress-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pack-card-title {
  margin: 0;
  color: #f0abfc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pack-card-description {
  margin: 6px 0 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}

.pack-card-cost {
  flex: 0 0 auto;
  color: #fcd34d;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.pack-card-cost span {
  color: #fef3c7;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.pack-stat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 13px;
}

.pack-stat {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.82);
}

.pack-stat span,
.pack-balance-row span {
  display: block;
  color: #94a3b8;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pack-stat strong {
  display: block;
  margin-top: 3px;
  color: #67e8f9;
  font-size: 15px;
}

.pack-pool-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 88px;
  margin-bottom: 14px;
  overflow-y: auto;
  padding-right: 2px;
}

.pack-pool-tag,
.pack-pool-empty {
  padding: 4px 8px;
  border: 1px solid rgba(217, 70, 239, 0.28);
  border-radius: 999px;
  color: #e879f9;
  background: rgba(217, 70, 239, 0.08);
  font-size: 10px;
  line-height: 1.25;
}

.pack-pool-tag:hover {
  border-color: rgba(103, 232, 249, 0.5);
  color: #a5f3fc;
}

.pack-pool-empty {
  border: 0;
  padding-left: 0;
  color: #94a3b8;
  background: transparent;
}

.pack-balance-row {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}

.pack-balance-row strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 14px;
}

.pack-balance-row.is-ready strong:last-child { color: #6ee7b7; }
.pack-balance-row.is-short strong:last-child { color: #fcd34d; }

.pack-progress {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.pack-progress-label {
  color: #94a3b8;
  font-size: 10px;
}

.pack-progress-track {
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.72);
}

.pack-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #c026d3);
  transition: width 220ms ease;
}

.pack-redeem-button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 40px;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.pack-redeem-button.is-enabled {
  border: 1px solid rgba(217, 70, 239, 0.5);
  color: #f5d0fe;
  background: rgba(192, 38, 211, 0.2);
}

.pack-redeem-button.is-enabled:hover {
  border-color: rgba(103, 232, 249, 0.7);
  color: white;
  background: rgba(192, 38, 211, 0.5);
  transform: translateY(-1px);
}

.pack-redeem-button.is-disabled {
  border: 1px solid rgba(51, 65, 85, 0.9);
  color: #64748b;
  background: rgba(30, 41, 59, 0.8);
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .pack-card-shell { padding: 15px; }
  .pack-stat-grid { gap: 6px; }
  .pack-stat { padding: 8px; }
  .pack-card-heading { gap: 8px; }
  .pack-card-title { font-size: 11px; }
}

.nexus-account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nexus-account-avatar {
  flex: 0 0 auto;
  color: #67e8f9;
  font-size: 15px;
}

.nexus-account-trigger:focus-visible,
.nexus-notification-toggle:focus-visible,
.nexus-cart-button:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.9);
  outline-offset: 2px;
}

.nexus-account-chevron {
  flex: 0 0 auto;
  color: rgba(103, 232, 249, 0.65);
  font-size: 9px;
  transition: transform 160ms ease;
}

.nexus-account:has(.nexus-user-menu:not(.hidden)) .nexus-account-chevron {
  transform: rotate(180deg);
}

.nexus-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  width: min(220px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 10px;
  background: rgba(7, 13, 24, 0.98);
  box-shadow: 0 16px 35px rgba(2, 6, 23, 0.5), 0 0 18px rgba(6, 182, 212, 0.12);
  backdrop-filter: blur(16px);
}

.nexus-user-menu__identity {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.7);
}

.nexus-user-menu__identity strong {
  overflow: hidden;
  color: #a5f3fc;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexus-user-menu__identity span {
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexus-user-menu__identity .nexus-user-menu__role {
  color: #34d399;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nexus-user-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  color: #cbd5e1;
  font-size: 11px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nexus-user-menu__item:hover {
  color: #cffafe;
  background: rgba(8, 145, 178, 0.16);
}

.nexus-user-menu__logout:hover {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.2);
}

.nexus-notification-toggle {
  position: relative;
  width: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 9px;
}

.nexus-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid #0a0e17;
  font-size: 9px;
  line-height: 12px;
}

.nexus-notification-menu {
  position: relative;
  flex-shrink: 0;
}

.nexus-notification-toggle {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 40px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.7);
  color: #67e8f9;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nexus-notification-toggle:hover {
  border-color: rgba(34, 211, 238, 0.8);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.25);
}

.nexus-notification-badge {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font-size: 0.65rem;
}

.nexus-notification-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: 60;
  width: min(27rem, calc(100vw - 1.5rem));
  max-height: min(80vh, 42rem);
  overflow-y: auto;
  overflow: hidden;
  border: 1px solid rgba(6, 182, 212, 0.45);
  border-radius: 0.75rem;
  background: rgba(10, 14, 23, 0.98);
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.18);
  backdrop-filter: blur(16px);
}

.nexus-notification-admin-heading,
.nexus-notification-admin-history-title {
  padding: 0.7rem 1rem 0.45rem;
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.nexus-notification-admin-form {
  display: grid;
  gap: 0.55rem;
  padding: 0.25rem 1rem 0.8rem;
}

.nexus-notification-admin-form label {
  display: grid;
  gap: 0.25rem;
  color: #94a3b8;
  font-size: 0.62rem;
}

.nexus-notification-admin-form input,
.nexus-notification-admin-form textarea,
.nexus-notification-admin-form select {
  width: 100%;
  border: 1px solid rgba(71, 85, 105, 0.9);
  border-radius: 0.45rem;
  background: rgba(15, 23, 42, 0.95);
  padding: 0.48rem 0.55rem;
  color: #f8fafc;
  font-size: 0.68rem;
}

.nexus-notification-admin-form textarea {
  resize: vertical;
}

.nexus-notification-admin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nexus-notification-admin-footer small {
  color: #86efac;
  font-size: 0.6rem;
}

.nexus-notification-admin-footer button {
  border-radius: 0.45rem;
  background: #0891b2;
  padding: 0.5rem 0.7rem;
  color: white;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nexus-notification-admin-history-item {
  border-top: 1px solid rgba(51, 65, 85, 0.55);
  padding: 0.6rem 1rem;
  color: #cbd5e1;
  font-size: 0.62rem;
}

.nexus-notification-admin-history-item strong {
  color: #f8fafc;
}

.nexus-notification-admin-history-item small {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
}

.nexus-notification-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
  color: #a5f3fc;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nexus-notification-panel__header button {
  color: #67e8f9;
  font-size: 0.6rem;
  text-transform: none;
  letter-spacing: normal;
}

.nexus-notification-list {
  max-height: 23rem;
  overflow-y: auto;
}

.nexus-notification-item {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.55);
  color: #cbd5e1;
  text-align: left;
  transition: background 0.15s ease;
}

.nexus-notification-item:hover,
.nexus-notification-item.is-unread {
  background: rgba(8, 145, 178, 0.12);
}

.nexus-notification-item__title {
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 800;
}

.nexus-notification-item__message {
  margin-top: 0.25rem;
  color: #94a3b8;
  font-size: 0.68rem;
  line-height: 1.45;
}

.nexus-notification-item__date,
.nexus-notification-empty {
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 0.6rem;
}

.pack-reveal-card:focus-visible {
  outline: 2px solid rgba(216, 180, 254, 0.9);
  outline-offset: 2px;
}

.pack-reveal-card__inner {
  position: relative;
  width: 100%;
  height: 240px;
  transform-style: preserve-3d;
  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 400ms ease;
}

.pack-reveal-card.is-revealing {
  cursor: wait;
  filter: saturate(1.15) brightness(1.12);
}

.pack-reveal-card.is-revealing::after,
.pack-reveal-card.is-rare-reveal::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
}

.pack-reveal-card.is-revealing::after {
  opacity: 1;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22), transparent 68%);
  animation: packRareCharge 700ms ease both;
}

.pack-reveal-card.is-rare-reveal::after {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 68%);
  animation: packRareFlash 900ms ease both;
}

.pack-reveal-card.is-skipped .pack-reveal-card__inner,
.pack-reveal-card__inner.is-flipped {
  transform: rotateY(180deg);
  box-shadow: 0 18px 40px rgba(196, 181, 253, 0.22);
}

.pack-reveal-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.9);
}

.pack-reveal-card__face--back {
  background: radial-gradient(
    circle at center,
    rgba(41, 20, 9, 0.96),
    rgba(18, 10, 7, 0.98) 42%,
    rgba(10, 8, 7, 0.98) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 2px rgba(231, 159, 70, 0.8),
    inset 0 0 18px rgba(112, 48, 18, 0.38),
    0 10px 26px rgba(17, 9, 5, 0.45);
}

.mystery-pack-card-back {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(
    circle at center,
    rgba(35, 18, 9, 0.95),
    rgba(12, 7, 5, 0.96) 36%,
    rgba(8, 6, 5, 1) 100%
  );
  box-shadow: inset 0 0 0 3px rgba(245, 177, 83, 0.8);
}

.mystery-pack-card-back::before,
.mystery-pack-card-back::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  pointer-events: none;
}

.mystery-pack-card-back::before {
  border: 3px solid rgba(210, 132, 52, 0.9);
  box-shadow:
    inset 0 0 22px rgba(69, 34, 11, 0.6),
    0 0 18px rgba(181, 95, 33, 0.18);
  background: radial-gradient(
    circle at center,
    rgba(24, 10, 5, 0.7),
    rgba(241, 163, 82, 0.08) 56%,
    transparent 68%
  );
  transform: rotate(12deg);
}

.mystery-pack-card-back::after {
  inset: 18%;
  border: 2px solid rgba(239, 175, 93, 0.75);
  box-shadow: inset 0 0 20px rgba(174, 86, 24, 0.38);
  background: conic-gradient(
    from 0deg,
    rgba(33, 15, 8, 0.2),
    rgba(234, 151, 72, 0.3),
    rgba(35, 18, 10, 0.2),
    rgba(236, 188, 109, 0.24),
    rgba(39, 18, 9, 0.15),
    rgba(33, 15, 8, 0.2)
  );
  transform: rotate(-8deg);
}

.mystery-pack-card-back__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.mystery-pack-card-back__ring--outer {
  width: 82%;
  height: 82%;
  border: 4px solid rgba(214, 116, 43, 0.9);
  box-shadow:
    inset 0 0 18px rgba(167, 82, 23, 0.55),
    0 0 12px rgba(201, 119, 44, 0.2);
  background: radial-gradient(circle, rgba(49, 27, 14, 0.2), transparent 62%);
}

.mystery-pack-card-back__ring--middle {
  width: 62%;
  height: 62%;
  border: 3px solid rgba(206, 117, 49, 0.8);
  box-shadow: inset 0 0 12px rgba(94, 42, 12, 0.55);
  background: repeating-radial-gradient(
    circle at center,
    rgba(118, 54, 18, 0.45) 0 8px,
    rgba(36, 18, 11, 0.2) 8px 18px,
    rgba(236, 163, 73, 0.2) 18px 24px
  );
  transform: translate(-50%, -50%) rotate(18deg);
}

.mystery-pack-card-back__ring--inner {
  width: 38%;
  height: 38%;
  border: 4px solid rgba(245, 179, 82, 0.82);
  background: radial-gradient(
    circle,
    rgba(52, 26, 10, 0.9) 0%,
    rgba(15, 8, 6, 0.98) 52%,
    rgba(8, 7, 6, 1) 100%
  );
  box-shadow:
    inset 0 0 16px rgba(73, 39, 14, 0.8),
    0 0 12px rgba(233, 167, 66, 0.2);
}

.mystery-pack-card-back__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(238, 178, 98, 0.92),
    rgba(131, 76, 30, 0.9) 50%,
    rgba(24, 12, 9, 0.96) 100%
  );
  box-shadow:
    inset 0 0 0 3px rgba(255, 211, 118, 0.7),
    0 0 12px rgba(216, 124, 46, 0.3);
}

.mystery-pack-card-back__center::before,
.mystery-pack-card-back__center::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 129, 0.7);
}

.mystery-pack-card-back__center::after {
  inset: 36%;
  background: rgba(255, 214, 129, 0.8);
  border: none;
}

.pack-reveal-card__face--front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.8);
}

.pack-reveal-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: rgba(2, 6, 23, 0.8);
}

.pack-reveal-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(248, 250, 252, 0.75);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.95),
    rgba(76, 29, 149, 0.78)
  );
}

.pack-reveal-card__meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px 12px;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.04),
    rgba(15, 23, 42, 0.9)
  );
}

.pack-reveal-card__rarity {
  display: inline-block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.18);
  color: #f8fafc;
}

.pack-reveal-card__meta strong {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.pack-reveal-card__price {
  font-size: 11px;
  color: #cbd5e1;
}

.pack-reveal-card--common .pack-reveal-card__meta {
  box-shadow: inset 0 0 16px rgba(148, 163, 184, 0.14);
}

.pack-reveal-card--common .pack-reveal-card__rarity {
  background: rgba(148, 163, 184, 0.2);
}

.pack-reveal-card--rare .pack-reveal-card__rarity,
.pack-reveal-card--ultra .pack-reveal-card__rarity,
.pack-reveal-card--secret .pack-reveal-card__rarity,
.pack-reveal-card--legendary .pack-reveal-card__rarity {
  background: rgba(251, 191, 36, 0.18);
  color: #fde68a;
}

.pack-reveal-card--rare .pack-reveal-card__face--front,
.pack-reveal-card--secret .pack-reveal-card__face--front,
.pack-reveal-card--ultra .pack-reveal-card__face--front,
.pack-reveal-card--legendary .pack-reveal-card__face--front {
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.18);
}

.pack-reveal-card--legendary .pack-reveal-card__face--front {
  background: linear-gradient(
    135deg,
    rgba(234, 179, 8, 0.18),
    rgba(168, 85, 247, 0.18),
    rgba(251, 146, 60, 0.1)
  );
}

.pack-reveal-card--ultra .pack-reveal-card__face--front {
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.18),
    rgba(59, 130, 246, 0.12)
  );
}

.pack-reveal-card--secret .pack-reveal-card__face--front {
  background: linear-gradient(
    135deg,
    rgba(165, 180, 252, 0.18),
    rgba(45, 212, 191, 0.1)
  );
}

@keyframes packRevealFlip {
  0% {
    opacity: 0;
    transform: rotateY(-18deg) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: rotateY(18deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}

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

/* Lucky Spin: server-authoritative reward state is represented
   by these visuals; the real result will be supplied by the backend later. */
.nexus-spin-section {
  position: relative;
  overflow: hidden;
  margin-top: 2.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(242, 198, 90, 0.34);
  border-radius: 18px;
  background: radial-gradient(circle at 23% 30%, rgba(217, 167, 46, 0.12), transparent 29%), radial-gradient(circle at 86% 46%, rgba(111, 53, 181, 0.1), transparent 28%), #080b10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 60px rgba(0, 0, 0, 0.25);
}

.nexus-spin-heading-actions { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; justify-content: flex-end; }
.nexus-spin-preview-badge { padding: 0.35rem 0.55rem; border: 1px solid rgba(41, 182, 246, 0.38); border-radius: 999px; color: #7dd3fc; background: rgba(14, 116, 144, 0.14); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; }
.nexus-spin-cost { border-color: rgba(242, 198, 90, 0.35); background: rgba(217, 167, 46, 0.07); }
.nexus-spin-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.nexus-spin-stage { min-height: 0; }
.nexus-spin-wheel-shell { position: relative; display: grid; place-items: center; width: min(430px, 82vw); aspect-ratio: 1; }
.nexus-spin-wheel {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  background: conic-gradient(from -22.5deg, #16734b 0 12.5%, #8a5b0a 12.5% 25%, #123f76 25% 37.5%, #2259a0 37.5% 50%, #075b72 50% 62.5%, #8f243d 62.5% 75%, #0e6867 75% 87.5%, #5b2a91 87.5% 100%);
  box-shadow: inset 0 0 0 10px #21180b, inset 0 0 0 14px #e1ad3c, inset 0 0 0 18px #5f3d0e, inset 0 0 32px rgba(0, 0, 0, 0.75), 0 0 0 5px #0b0f16, 0 0 0 8px rgba(242, 198, 90, 0.72), 0 18px 42px rgba(0, 0, 0, 0.66), 0 0 38px rgba(242, 198, 90, 0.22);
}
.nexus-spin-wheel::before { position: absolute; inset: 7%; border: 1px solid rgba(255, 241, 187, 0.58); border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.24), 0 0 16px rgba(41, 182, 246, 0.2); content: ""; pointer-events: none; z-index: 1; }
.nexus-spin-wheel-bezel { position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.18) 0 1deg, transparent 1deg 15deg); mix-blend-mode: screen; opacity: 0.35; pointer-events: none; }
.nexus-spin-segments { z-index: 1; background: transparent; }
.nexus-spin-segment { z-index: 2; padding-top: 11%; color: #fff; font-size: 0.62rem; text-shadow: 0 2px 5px rgba(0,0,0,.9); }
.nexus-spin-segment span { display: flex; width: 76px; align-items: center; gap: 0.3rem; transform: rotate(calc(-1 * var(--segment-index) * (360deg / var(--segment-count)))); flex-direction: column; }
.nexus-spin-segment i { color: #ffe39a; font-size: 1rem; filter: drop-shadow(0 0 4px rgba(255, 214, 107, 0.5)); }
.nexus-spin-segment b { font-size: 0.56rem; line-height: 1.15; }
.nexus-spin-wheel-core { inset: 36%; z-index: 4; width: auto; height: auto; border: 3px solid #f2c65a; background: radial-gradient(circle at 35% 28%, #293348, #0b1019 64%); box-shadow: inset 0 0 0 4px #3a270d, 0 0 0 4px rgba(242, 198, 90, 0.2), 0 0 24px rgba(242, 198, 90, 0.35); color: #fbd675; }
.nexus-spin-wheel-core i { color: #fff1b1; font-size: 1rem; }
.nexus-spin-wheel-core strong { font-size: 0.64rem; letter-spacing: 0.16em; }
.nexus-spin-wheel-core span { color: #94a3b8; font-size: 0.4rem; letter-spacing: 0.12em; }
.nexus-spin-pointer { top: -1.1rem; z-index: 8; width: 34px; height: 48px; border: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.nexus-spin-pointer::before { position: absolute; inset: 0 4px 10px; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(110deg, #fff5bd, #d99a20 54%, #fff2a6); content: ""; }
.nexus-spin-pointer span { position: absolute; top: -0.3rem; left: 50%; width: 16px; height: 16px; border: 2px solid #ffe49a; border-radius: 50%; background: #281b08; box-shadow: 0 0 12px rgba(255, 214, 107, 0.75); transform: translateX(-50%); }
.nexus-spin-pedestal { position: absolute; bottom: 6.9rem; width: min(270px, 56vw); height: 28px; border: 1px solid rgba(242,198,90,.5); border-radius: 50%; background: linear-gradient(#6b4814, #18130b 48%, #05070a); box-shadow: 0 12px 22px rgba(0,0,0,.65), 0 0 20px rgba(242,198,90,.12); }
.nexus-spin-pedestal span { position: absolute; right: 13%; bottom: 5px; left: 13%; height: 5px; border-radius: 50%; background: #e5b84f; box-shadow: 0 0 12px #e5b84f; opacity: .5; }
.nexus-spin-button { min-width: 210px; margin-top: 1.8rem; border-radius: 9px; background: linear-gradient(135deg, #ffe28a, #d99a20 52%, #8c570c); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 7px 0 #5b3709, 0 12px 25px rgba(217, 167, 46, .25); }
.nexus-spin-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 #5b3709, 0 8px 18px rgba(217, 167, 46, .2); }
.nexus-spin-status { max-width: 330px; color: #fcd875; }
.nexus-spin-how-button { margin-top: 0.7rem; border: 0; color: #8d98a8; background: transparent; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; }
.nexus-spin-how-button:hover { color: #f2c65a; }
.nexus-spin-exclusive { position: relative; min-height: 0; height: fit-content; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); padding: clamp(1rem, 1.8vw, 1.5rem); overflow: hidden; border: 1px solid rgba(242, 198, 90, 0.44); border-radius: 15px; background: radial-gradient(circle at 50% 28%, rgba(168,85,247,.24), transparent 30%), linear-gradient(145deg, #19131b, #0d1119 60%, #24150f); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 38px rgba(0,0,0,.35); text-align: center; }
.nexus-spin-exclusive::before { position: absolute; inset: 8px; border: 1px solid rgba(255, 214, 107, 0.16); border-radius: 11px; content: ""; pointer-events: none; }
.nexus-spin-exclusive-ribbon { position: absolute; top: 1rem; right: 1rem; padding: 0.35rem 0.55rem; border: 1px solid #f7d777; border-radius: 999px; color: #fff0b0; background: rgba(120, 61, 130, .45); font-size: .58rem; font-weight: 900; letter-spacing: .1em; box-shadow: 0 0 14px rgba(217, 70, 239, .28); }
.nexus-spin-card-stage { display: grid; place-items: center; min-height: min(38vh, 310px); }
.nexus-spin-card-art { position: relative; display: grid; place-content: center; width: clamp(170px, 14vw, 220px); height: auto; aspect-ratio: 5 / 7; max-height: min(38vh, 310px); margin: clamp(6px, 1vw, 12px) auto; overflow: hidden; border: 3px solid #f2c65a; border-radius: 12px; background: radial-gradient(circle at 34% 28%, #ecb94e 0, #7f1d3d 19%, #24132a 57%, #080b10 100%); box-shadow: inset 0 0 0 5px rgba(70, 23, 14, .8), inset 0 0 25px rgba(255, 214, 107, .28), 0 0 25px rgba(217, 70, 239, .35), 0 15px 26px rgba(0,0,0,.55); color: #ffe49a; }
.nexus-spin-card-art::after { position: absolute; top: -20%; left: -50%; width: 34%; height: 150%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); content: ""; transform: rotate(24deg); }
.nexus-spin-card-sigil { font-family: Georgia, serif; font-size: 4.5rem; font-weight: 900; text-shadow: 0 0 16px rgba(255,214,107,.7); }
.nexus-spin-card-art small { letter-spacing: .12em; line-height: 1.35; }
.nexus-spin-exclusive h3 { margin: .2rem 0; color: #fff0b0; font-size: 1.1rem; font-weight: 900; }
.nexus-spin-exclusive-rarity { margin: .7rem 0 .35rem; color: #ffe49a; font-size: .86rem; font-weight: 950; letter-spacing: .08em; text-shadow: 0 0 12px rgba(242,198,90,.45); }
.nexus-spin-exclusive p { color: #c4b5fd; }
.nexus-spin-exclusive-meta { display: flex; justify-content: center; align-items: center; margin-top: 1rem; padding: .7rem .8rem; border: 1px solid rgba(242,198,90,.2); border-radius: 8px; background: rgba(0,0,0,.2); color: #a8a29e; font-size: .6rem; font-weight: 800; text-align: center; }
.nexus-spin-exclusive-meta strong { color: #f5d98a; font-size: .68rem; font-weight: 800; }
.nexus-spin-disclaimer { display: block; margin-top: .7rem; color: #64748b; font-size: .58rem; line-height: 1.4; }
.nexus-spin-reward-legend { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(242,198,90,.14); }
.nexus-spin-subheading h3 { margin: .35rem 0 1rem; color: #f5f5f4; font-size: 1.05rem; font-weight: 900; }
.nexus-spin-reward-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.nexus-spin-reward-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; column-gap: .6rem; align-items: center; min-height: 58px; padding: .7rem; border: 1px solid rgba(148,163,184,.18); border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(0,0,0,.2)); }
.nexus-spin-reward-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fbd675; background: rgba(217,167,46,.15); }
.nexus-spin-reward-item strong { color: #e5e7eb; font-size: .68rem; }
.nexus-spin-reward-item small { color: #64748b; font-size: .55rem; letter-spacing: .05em; }
.nexus-spin-reward-item--sapphire .nexus-spin-reward-icon { color: #93c5fd; background: rgba(37,99,235,.18); }
.nexus-spin-reward-item--violet .nexus-spin-reward-icon { color: #d8b4fe; background: rgba(126,34,206,.2); }
.nexus-spin-reward-item--ruby .nexus-spin-reward-icon { color: #fda4af; background: rgba(190,24,93,.18); }
.nexus-spin-bottom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.nexus-spin-list-panel { min-height: 128px; border-color: rgba(148,163,184,.16); background: rgba(13, 17, 23, .74); }
.nexus-spin-list-panel h3 { display: flex; gap: .45rem; align-items: center; color: #f2c65a; }
.nexus-spin-empty { display: flex; gap: .55rem; align-items: flex-start; color: #718096; font-size: .68rem; line-height: 1.45; }
.nexus-spin-empty i { margin-top: .1rem; color: #64748b; }
.nexus-spin-how-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(2, 6, 23, .72); backdrop-filter: blur(5px); }
.nexus-spin-how-modal.hidden { display: none; }
.nexus-spin-how-dialog { position: relative; width: min(460px, 100%); padding: 1.5rem; border: 1px solid rgba(242,198,90,.4); border-radius: 14px; background: #101620; box-shadow: 0 25px 70px rgba(0,0,0,.6); }
.nexus-spin-how-dialog h3 { margin: .5rem 0 1rem; color: #fff1b1; font-size: 1.1rem; }
.nexus-spin-how-dialog ol { display: grid; gap: .55rem; padding-left: 1.3rem; color: #cbd5e1; font-size: .78rem; line-height: 1.45; }
.nexus-spin-how-dialog p { margin-top: 1rem; color: #94a3b8; font-size: .7rem; line-height: 1.5; }
.nexus-spin-how-close { position: absolute; top: .65rem; right: .8rem; border: 0; color: #94a3b8; background: transparent; font-size: 1.4rem; }

@media (max-width: 900px) {
  .nexus-spin-layout { grid-template-columns: 1fr; }
  .nexus-spin-exclusive { width: min(520px, 100%); max-height: none; margin: 0 auto; }
  .nexus-spin-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nexus-spin-heading-actions { justify-content: flex-start; }
  .nexus-spin-wheel-shell { width: min(340px, 82vw); }
  .nexus-spin-segment span { width: 58px; }
  .nexus-spin-segment b { font-size: .48rem; }
  .nexus-spin-segment i { font-size: .8rem; }
  .nexus-spin-wheel-core { inset: 34%; }
  .nexus-spin-pedestal { bottom: 6.2rem; }
  .nexus-spin-reward-grid, .nexus-spin-bottom-grid { grid-template-columns: 1fr; }
}

@keyframes packRareCharge {
  0%, 100% { opacity: 0; }
  55% { opacity: 1; }
}

@keyframes packRareFlash {
  0% { opacity: 0.9; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (max-width: 1100px) {
  .nexus-header-center {
    flex-basis: 430px;
  }
  .nexus-search {
    max-width: 360px;
  }
  .nexus-account {
    max-width: 200px;
  }
  .nexus-account-name {
    max-width: 100px;
  }
}

.ai-chat-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px;
  border: 1px solid rgba(34, 211, 238, 0.55);
  border-radius: 999px;
  color: #cffafe;
  background: linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(88, 28, 135, 0.94));
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.22);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.ai-chat-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(217, 70, 239, 0.32);
}

.ai-chat-panel {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 28px));
  max-height: min(650px, calc(100vh - 110px));
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 18px;
  background: rgba(5, 11, 20, 0.98);
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.65), 0 0 34px rgba(168, 85, 247, 0.16);
}

.ai-chat-panel.hidden { display: none; }
.ai-chat-header { display: flex; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid rgba(51, 65, 85, 0.8); background: linear-gradient(90deg, rgba(8, 47, 73, 0.75), rgba(76, 29, 149, 0.55)); }
.ai-chat-title { color: #67e8f9; font-size: 13px; font-weight: 900; letter-spacing: 0.16em; }
.ai-chat-subtitle { margin-top: 4px; color: #94a3b8; font-size: 10px; }
.ai-online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #34d399; box-shadow: 0 0 9px #34d399; }
.ai-chat-actions { display: flex; gap: 5px; }
.ai-chat-actions button { width: 28px; height: 28px; color: #94a3b8; border-radius: 7px; font-size: 20px; line-height: 1; }
.ai-chat-actions button:hover { color: #67e8f9; background: rgba(15, 23, 42, 0.8); }
.ai-chat-messages { display: flex; flex: 1; min-height: 210px; flex-direction: column; gap: 10px; overflow-y: auto; padding: 15px; }
.ai-chat-message { max-width: 88%; padding: 10px 12px; border-radius: 12px; color: #e2e8f0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.ai-chat-message--assistant { align-self: flex-start; border: 1px solid rgba(34, 211, 238, 0.2); background: rgba(8, 47, 73, 0.45); }
.ai-chat-message--user { align-self: flex-end; border: 1px solid rgba(217, 70, 239, 0.25); background: rgba(88, 28, 135, 0.38); }
.ai-chat-message--typing { color: #67e8f9; letter-spacing: 0.2em; }
.ai-chat-quick-questions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 12px; }
.ai-chat-quick-questions button { padding: 6px 8px; border: 1px solid rgba(100, 116, 139, 0.45); border-radius: 999px; color: #cbd5e1; background: rgba(15, 23, 42, 0.75); font-size: 10px; }
.ai-chat-quick-questions button:hover { border-color: rgba(34, 211, 238, 0.6); color: #a5f3fc; }
.ai-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(51, 65, 85, 0.8); }
.ai-chat-form textarea { flex: 1; max-height: 90px; resize: none; border: 1px solid rgba(71, 85, 105, 0.8); border-radius: 10px; padding: 10px; color: #f8fafc; background: rgba(15, 23, 42, 0.9); font-size: 12px; outline: none; }
.ai-chat-form textarea:focus { border-color: rgba(34, 211, 238, 0.8); }
.ai-chat-form button { width: 38px; border-radius: 10px; color: #cffafe; background: rgba(8, 145, 178, 0.35); }
.ai-chat-form button:disabled { cursor: wait; opacity: 0.5; }

@media (max-width: 520px) {
  .ai-chat-toggle { right: 14px; bottom: 14px; }
  .ai-chat-panel { right: 14px; bottom: 70px; }
}

/* Premium AI launcher. Existing #ai-chat-toggle hook and click behavior stay
   intact; this layer only changes presentation and keeps modal stacking below. */
.ai-chat-toggle {
  right: 22px;
  bottom: 22px;
  z-index: var(--nexus-layer-floating, 300);
  min-height: 48px;
  padding: 7px 10px 7px 8px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff2b8 !important;
  background: linear-gradient(#0d1421, #0a0f18) padding-box, linear-gradient(115deg, rgba(255, 214, 107, .9), rgba(168, 85, 247, .75), rgba(41, 182, 246, .5)) border-box !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), 0 0 18px rgba(168, 85, 247, .16), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  backdrop-filter: blur(12px);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.ai-chat-toggle::before {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,.08), transparent 38%, rgba(168,85,247,.08));
  content: "";
  pointer-events: none;
}

.ai-chat-toggle__icon,
.ai-chat-toggle__label,
.ai-chat-toggle__arrow { position: relative; z-index: 1; }
.ai-chat-toggle__icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255, 214, 107, .5); border-radius: 50%; color: #ffe28a; background: radial-gradient(circle at 35% 25%, rgba(168, 85, 247, .46), rgba(15, 23, 42, .9) 68%); box-shadow: 0 0 12px rgba(168, 85, 247, .3), inset 0 0 8px rgba(255, 214, 107, .12); animation: aiLauncherBreath 4s ease-in-out infinite; }
.ai-chat-toggle__icon i { font-size: 13px; }
.ai-chat-toggle__label { padding: 0 5px; color: #f8f4df; white-space: nowrap; }
.ai-chat-toggle__arrow { margin: 0 3px 0 1px; color: #f2c65a; font-size: 11px; transition: transform 220ms ease; }
.ai-chat-toggle:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); box-shadow: 0 15px 34px rgba(0, 0, 0, .48), 0 0 24px rgba(168, 85, 247, .28), 0 0 10px rgba(255, 214, 107, .16), inset 0 1px 0 rgba(255, 255, 255, .14) !important; }
.ai-chat-toggle:hover .ai-chat-toggle__arrow { transform: translateX(3px); }
.ai-chat-toggle:hover .ai-chat-toggle__icon { box-shadow: 0 0 16px rgba(168, 85, 247, .48), inset 0 0 8px rgba(255, 214, 107, .18); }
.ai-chat-toggle:focus-visible { outline: 2px solid #f2c65a; outline-offset: 4px; }
.ai-chat-toggle[aria-expanded="true"] { border-color: rgba(255, 214, 107, .82); box-shadow: 0 0 22px rgba(168, 85, 247, .3), 0 0 10px rgba(255, 214, 107, .16), inset 0 1px 0 rgba(255,255,255,.16) !important; }

@keyframes aiLauncherBreath {
  0%, 100% { transform: scale(1); filter: brightness(.96); }
  50% { transform: scale(1.045); filter: brightness(1.08); }
}

@media (max-width: 520px) {
  .ai-chat-toggle { right: 14px; bottom: 14px; min-width: 46px; width: 46px; height: 46px; padding: 6px; justify-content: center; }
  .ai-chat-toggle__icon { width: 32px; height: 32px; }
  .ai-chat-toggle__label, .ai-chat-toggle__arrow { display: none; }
  .ai-chat-panel { right: 14px; bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-toggle, .ai-chat-toggle__icon, .ai-chat-toggle__arrow { transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   NEXUS MYSTERY PACK — premium vault treatment
   -------------------------------------------------------------------------- */
#mystery-pack-panel.mystery-pack-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(32px, 5vw, 64px);
  padding: clamp(22px, 3vw, 42px);
  border: 1px solid rgba(230, 184, 74, 0.3) !important;
  border-radius: 18px !important;
  background: #080d16;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

#mystery-pack-panel.mystery-pack-section::before,
#mystery-pack-panel.mystery-pack-section::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
  border-radius: 999px;
  filter: blur(42px);
}

#mystery-pack-panel.mystery-pack-section::before {
  top: -120px;
  left: 25%;
  width: 340px;
  height: 200px;
  background: rgba(103, 232, 249, 0.045);
}

#mystery-pack-panel.mystery-pack-section::after {
  right: -80px;
  bottom: -100px;
  width: 280px;
  height: 240px;
  background: rgba(91, 75, 145, 0.12);
}

#mystery-pack-panel .mystery-pack-section__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(18px, 2.5vw, 30px);
}

#mystery-pack-panel .mystery-pack-section__eyebrow,
#mystery-pack-panel .mystery-pack-latest__eyebrow,
#mystery-pack-panel .pack-offer-eyebrow {
  color: var(--nv-gold-light, #f3c969);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#mystery-pack-panel #mystery-pack-title {
  max-width: 780px;
  margin-top: 8px;
  color: #fff8df;
  font-size: clamp(1.25rem, 2.25vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

#mystery-pack-panel .mystery-pack-meta {
  flex: 0 0 auto;
  max-width: 280px;
  padding: 8px 12px;
  border: 1px solid rgba(230, 184, 74, 0.28);
  border-radius: 999px;
  color: #c9d2df;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

#mystery-pack-panel .mystery-pack-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 34px);
}

#mystery-pack-panel .mystery-pack-right {
  display: grid;
  min-width: 0;
  gap: 16px;
  align-content: start;
}

#mystery-pack-panel .mystery-pack-history {
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(230, 184, 74, 0.22);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(16, 22, 32, 0.96), rgba(9, 13, 20, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#mystery-pack-panel .mystery-pack-history__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#mystery-pack-panel .mystery-pack-history__eyebrow {
  color: #67e8f9;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#mystery-pack-panel .mystery-pack-history__header h4 {
  margin: 4px 0 0;
  color: #fff8df;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

#mystery-pack-panel .mystery-pack-history__hint {
  max-width: 120px;
  color: #78879a;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: right;
}

#mystery-pack-panel .mystery-pack-history__list {
  display: grid;
  max-height: 214px;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 6px;
  padding-right: 4px;
  scrollbar-color: rgba(230, 184, 74, 0.55) rgba(5, 8, 14, 0.65);
  scrollbar-width: thin;
}

#mystery-pack-panel .mystery-pack-history__list::-webkit-scrollbar { width: 5px; }
#mystery-pack-panel .mystery-pack-history__list::-webkit-scrollbar-track { background: rgba(5, 8, 14, 0.65); border-radius: 999px; }
#mystery-pack-panel .mystery-pack-history__list::-webkit-scrollbar-thumb { background: rgba(230, 184, 74, 0.55); border-radius: 999px; }

#mystery-pack-panel .mystery-pack-history__item {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(142, 152, 168, 0.16);
  border-radius: 9px;
  color: #e8edf6;
  background: rgba(5, 8, 14, 0.45);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

#mystery-pack-panel .mystery-pack-history__item:hover,
#mystery-pack-panel .mystery-pack-history__item:focus-visible {
  border-color: rgba(230, 184, 74, 0.55);
  background: rgba(31, 27, 17, 0.75);
  outline: none;
  transform: translateX(2px);
}

#mystery-pack-panel .mystery-pack-history__item-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(230, 184, 74, 0.32);
  border-radius: 7px;
  color: #f3c969;
  background: rgba(230, 184, 74, 0.08);
  font-size: 0.72rem;
}

#mystery-pack-panel .mystery-pack-history__item-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#mystery-pack-panel .mystery-pack-history__item-copy strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mystery-pack-panel .mystery-pack-history__item-copy span {
  color: #8b99aa;
  font-size: 0.62rem;
  line-height: 1.25;
}

#mystery-pack-panel .mystery-pack-history__item-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  color: #a88fd3;
  font-size: 0.62rem;
}

#mystery-pack-panel .mystery-pack-history__empty {
  padding: 16px 8px;
  color: #78879a;
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
}

#mystery-pack-panel .mystery-pack-left {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#mystery-pack-panel .mystery-pack-state {
  display: grid;
  min-height: 240px;
  place-items: center;
  padding: 24px;
  border: 1px solid var(--nv-line, rgba(142, 152, 168, 0.18));
  border-radius: 14px;
  color: var(--nv-muted, #8e98a8);
  text-align: center;
}

#mystery-pack-panel .pack-card-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 184, 74, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, #121a25, #0d121a);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

#mystery-pack-panel .pack-card-visual {
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(22px, 3vw, 36px);
  border-right: 1px solid rgba(230, 184, 74, 0.2);
  background:
    radial-gradient(circle at 50% 46%, rgba(168, 136, 216, 0.1), transparent 24%),
    radial-gradient(circle at 50% 60%, rgba(230, 184, 74, 0.055), transparent 36%),
    linear-gradient(155deg, #131d2b, #080c14 74%);
}

#mystery-pack-panel .pack-card-visual::before,
#mystery-pack-panel .pack-card-visual::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(230, 184, 74, 0.24);
  border-radius: 50%;
  transform: rotate(24deg);
  pointer-events: none;
}

#mystery-pack-panel .pack-card-visual::before {
  width: 220px;
  height: 220px;
  box-shadow: 0 0 18px rgba(168, 136, 216, 0.1), inset 0 0 14px rgba(230, 184, 74, 0.04);
}

#mystery-pack-panel .pack-card-visual::after {
  width: 150px;
  height: 150px;
  border-color: rgba(168, 136, 216, 0.16);
  transform: rotate(-18deg);
}

#mystery-pack-panel .pack-card-visual__topline,
#mystery-pack-panel .pack-card-visual__wordmark,
#mystery-pack-panel .pack-card-visual__name,
#mystery-pack-panel .pack-card-visual__descriptor,
#mystery-pack-panel .pack-card-visual__seal,
#mystery-pack-panel .pack-card-visual__monogram {
  position: relative;
  z-index: 1;
}

#mystery-pack-panel .pack-card-visual__topline {
  position: absolute;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nv-gold-light, #f3c969);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}

#mystery-pack-panel .pack-card-visual__topline i { color: #c7a9ff; }

#mystery-pack-panel .pack-card-visual__monogram {
  display: grid;
  width: clamp(104px, 10vw, 138px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(243, 201, 105, 0.72);
  border-radius: 50%;
  color: #fff1b1;
  font-family: Georgia, serif;
  font-size: clamp(4rem, 7vw, 6.6rem);
  line-height: 1;
  text-shadow: 0 0 12px rgba(230, 184, 74, 0.42);
  background: radial-gradient(circle at 35% 28%, #38294f, #15182c 55%, #090d16);
  box-shadow: 0 0 16px rgba(168, 136, 216, 0.18), inset 0 0 14px rgba(230, 184, 74, 0.1);
}

#mystery-pack-panel .pack-card-visual__wordmark {
  margin-top: 12px;
  color: #fff1c2;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-shadow: 0 0 10px rgba(230, 184, 74, 0.18);
}

#mystery-pack-panel .pack-card-visual__name {
  max-width: 190px;
  margin-top: 18px;
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}

#mystery-pack-panel .pack-card-visual__descriptor {
  margin-top: 6px;
  color: #aab6c8;
  font-size: 0.7rem;
  text-align: center;
}

#mystery-pack-panel .pack-card-visual__seal {
  margin-top: 22px;
  padding: 6px 10px;
  border: 1px solid rgba(230, 184, 74, 0.35);
  border-radius: 999px;
  color: #f3c969;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#mystery-pack-panel .pack-offer-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 3vw, 34px);
}

#mystery-pack-panel .pack-offer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#mystery-pack-panel .pack-offer-heading h4 {
  margin-top: 6px;
  color: #fff8df;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.15;
}

#mystery-pack-panel .pack-offer-cost {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--nv-gold-light, #f3c969);
}

#mystery-pack-panel .pack-offer-cost strong { font-size: clamp(1.4rem, 2.3vw, 2rem); }
#mystery-pack-panel .pack-offer-cost span { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; }

#mystery-pack-panel .pack-card-description {
  margin: 0;
  color: #aab6c8;
  font-size: 0.84rem;
  line-height: 1.6;
}

#mystery-pack-panel .pack-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#mystery-pack-panel .pack-stat {
  min-width: 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(230, 184, 74, 0.7);
  background: rgba(255, 255, 255, 0.025);
}

#mystery-pack-panel .pack-stat span,
#mystery-pack-panel .pack-balance-row span {
  display: block;
  color: #78879a;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#mystery-pack-panel .pack-stat strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #e8edf6;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mystery-pack-panel .pack-pool-details {
  border-top: 1px solid rgba(142, 152, 168, 0.18);
  border-bottom: 1px solid rgba(142, 152, 168, 0.18);
}

#mystery-pack-panel .pack-pool-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  cursor: pointer;
  color: #d6def0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

#mystery-pack-panel .pack-pool-details summary::-webkit-details-marker { display: none; }
#mystery-pack-panel .pack-pool-details[open] summary i { transform: rotate(180deg); }
#mystery-pack-panel .pack-pool-details summary i { color: var(--nv-gold-light, #f3c969); transition: transform 180ms ease; }

#mystery-pack-panel .pack-pool-detail__grid {
  display: grid;
  max-height: 148px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow-y: auto;
  padding: 0 0 12px;
  scrollbar-color: rgba(230, 184, 74, 0.55) rgba(5, 8, 14, 0.5);
  scrollbar-width: thin;
}

#mystery-pack-panel .pack-pool-tag,
#mystery-pack-panel .pack-pool-empty {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(142, 152, 168, 0.14);
  border-radius: 8px;
  background: rgba(5, 8, 14, 0.35);
}

#mystery-pack-panel .pack-pool-tag b,
#mystery-pack-panel .pack-pool-tag small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mystery-pack-panel .pack-pool-tag b { color: #e8edf6; font-size: 0.7rem; }
#mystery-pack-panel .pack-pool-tag small { margin-top: 3px; color: var(--nv-gold-light, #f3c969); font-size: 0.6rem; }
#mystery-pack-panel .pack-pool-empty { grid-column: 1 / -1; color: #78879a; font-size: 0.72rem; }

#mystery-pack-panel .pack-balance-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
}

#mystery-pack-panel .pack-balance-row > div { min-width: 0; }
#mystery-pack-panel .pack-balance-row strong { display: block; margin-top: 4px; color: #e8edf6; font-size: 0.82rem; }
#mystery-pack-panel .pack-balance-row.is-ready strong { color: #d8f8e6; }
#mystery-pack-panel .pack-balance-row.is-short strong { color: #f4b2b2; }

#mystery-pack-panel .pack-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(142, 152, 168, 0.18);
}

#mystery-pack-panel .pack-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d65cb, var(--nv-gold-light, #f3c969)); box-shadow: 0 0 12px rgba(230, 184, 74, 0.45); }

#mystery-pack-panel .mystery-pack-offer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

#mystery-pack-panel .pack-redeem-button {
  min-height: 46px;
  border: 1px solid rgba(243, 201, 105, 0.68);
  border-radius: 9px;
  color: #15120a;
  background: linear-gradient(135deg, #f3c969, #bd882d);
  box-shadow: 0 8px 24px rgba(230, 184, 74, 0.16);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

#mystery-pack-panel .pack-redeem-button.is-enabled:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 12px 28px rgba(230, 184, 74, 0.28); }
#mystery-pack-panel .pack-redeem-button.is-enabled:active { transform: translateY(0); }
#mystery-pack-panel .pack-redeem-button.is-disabled { cursor: not-allowed; color: #8691a2; border-color: rgba(142, 152, 168, 0.2); background: #202936; box-shadow: none; }
#mystery-pack-panel .pack-redeem-button:focus-visible,
#mystery-pack-panel .pack-pool-details summary:focus-visible { outline: 2px solid #c6a0ff; outline-offset: 3px; }

#mystery-pack-panel .mystery-pack-latest {
  min-width: 0;
  min-height: 100%;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(230, 184, 74, 0.26) !important;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 136, 216, 0.12), transparent 38%),
    linear-gradient(160deg, rgba(16, 22, 32, 0.98), rgba(9, 13, 20, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#mystery-pack-panel .mystery-pack-latest__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

#mystery-pack-panel .mystery-pack-latest__header h4 { margin-top: 5px; color: #fff8df; font-size: 1.05rem; }
#mystery-pack-panel .mystery-pack-latest__header > span { color: var(--nv-gold-light, #f3c969); font-size: 0.72rem; font-weight: 800; }

#mystery-pack-panel .mystery-pack-received-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#mystery-pack-panel .mystery-pack-received-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(142, 152, 168, 0.16);
  border-radius: 10px;
  background: rgba(5, 8, 14, 0.45);
  text-align: left;
}

#mystery-pack-panel .mystery-pack-received-card.is-clickable { cursor: pointer; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
#mystery-pack-panel .mystery-pack-received-card.is-clickable:hover { transform: translateY(-2px); border-color: rgba(230, 184, 74, 0.55); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
#mystery-pack-panel .mystery-pack-received-card__image { display: grid; aspect-ratio: 5 / 7; place-items: center; overflow: hidden; border-radius: 6px; background: #151c28; }
#mystery-pack-panel .mystery-pack-received-card__image img { width: 100%; height: 100%; object-fit: contain; }
#mystery-pack-panel .mystery-pack-received-card__image span { color: var(--nv-gold-light, #f3c969); font-family: Georgia, serif; font-size: 2rem; }
#mystery-pack-panel .mystery-pack-received-card strong { display: block; overflow: hidden; margin-top: 8px; color: #e8edf6; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
#mystery-pack-panel .mystery-pack-received-card > span:not(.mystery-pack-received-card__detail-link) { display: block; margin-top: 4px; font-size: 0.6rem; }
#mystery-pack-panel .mystery-pack-received-card__detail-link { display: block; margin-top: 8px; color: var(--nv-gold-light, #f3c969); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; }
#mystery-pack-panel .mystery-pack-latest__caption { margin-top: 18px; color: #78879a; font-size: 0.7rem; }
#mystery-pack-panel .mystery-pack-empty { display: grid; min-height: 260px; align-content: center; gap: 8px; text-align: center; }
#mystery-pack-panel .mystery-pack-empty strong { color: #e8edf6; font-size: 1rem; }
#mystery-pack-panel .mystery-pack-empty span { color: #78879a; font-size: 0.75rem; line-height: 1.5; }

#mystery-pack-panel .mystery-pack-opening {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  background: rgba(5, 8, 14, 0.88);
  backdrop-filter: blur(6px);
}

#mystery-pack-panel .mystery-pack-opening.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  filter: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}
#mystery-pack-panel .mystery-pack-opening__stage { display: grid; justify-items: center; gap: 12px; color: #fff8df; text-align: center; }
#mystery-pack-panel .mystery-pack-opening__stage strong { font-size: clamp(1.2rem, 2.3vw, 2rem); letter-spacing: 0.08em; }
#mystery-pack-panel .mystery-pack-opening__stage > span:last-child { color: #aab6c8; font-size: 0.82rem; }
#mystery-pack-panel .mystery-pack-opening__eyebrow { color: var(--nv-gold-light, #f3c969); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.22em; }
#mystery-pack-panel .mystery-pack-opening__pack { display: grid; width: 142px; aspect-ratio: 0.7; place-items: center; border: 1px solid #f3c969; border-radius: 12px; color: #fff1b1; background: radial-gradient(circle at 40% 28%, #5a3c76, #171528 55%, #090d16); box-shadow: 0 0 30px rgba(168, 136, 216, 0.48), 0 0 70px rgba(230, 184, 74, 0.2); animation: mysteryPackOpeningPulse 1.1s ease-in-out infinite alternate; }
#mystery-pack-panel .mystery-pack-opening__sigil { font-family: Georgia, serif; font-size: 5rem; line-height: 1; text-shadow: 0 0 20px rgba(243, 201, 105, 0.65); }
#mystery-pack-panel .mystery-pack-opening__wordmark { align-self: end; margin-bottom: 16px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; }

/* Result cards remain view-only on hover; details open only on click/keyboard. */
#pack-result-modal .pack-reveal-card { cursor: default; }
#pack-result-modal .pack-reveal-card.is-revealed { cursor: pointer; }
#pack-result-modal .pack-reveal-card:not(.is-revealed):hover { transform: translateY(-4px) scale(1.015); }
#pack-result-modal .pack-reveal-card:hover { transform: translateY(-4px) scale(1.015); }

@keyframes mysteryPackOpeningPulse {
  from { transform: translateY(4px) rotate(-1deg); }
  to { transform: translateY(-6px) rotate(1deg) scale(1.02); }
}

@media (max-width: 1199px) {
  #mystery-pack-panel .mystery-pack-layout { grid-template-columns: 1fr; }
  #mystery-pack-panel .mystery-pack-latest { min-height: 0; }
  #mystery-pack-panel .mystery-pack-received-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #mystery-pack-panel.mystery-pack-section { padding: 18px; }
  #mystery-pack-panel .mystery-pack-section__header { align-items: flex-start; flex-direction: column; }
  #mystery-pack-panel .mystery-pack-meta { max-width: none; }
  #mystery-pack-panel .pack-card-shell { grid-template-columns: 1fr; }
  #mystery-pack-panel .pack-card-visual { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(230, 184, 74, 0.2); }
  #mystery-pack-panel .mystery-pack-received-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  #mystery-pack-panel .pack-stat-grid,
  #mystery-pack-panel .pack-balance-row,
  #mystery-pack-panel .mystery-pack-offer-actions { grid-template-columns: 1fr; }
  #mystery-pack-panel .pack-offer-heading { flex-direction: column; }
  #mystery-pack-panel .pack-offer-cost { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #mystery-pack-panel .pack-redeem-button,
  #mystery-pack-panel .mystery-pack-received-card.is-clickable,
  #mystery-pack-panel .mystery-pack-opening__pack,
  #pack-result-modal .pack-reveal-card,
  #pack-result-modal .pack-reveal-card__inner { animation: none !important; transition: none !important; }
}

@media (max-width: 980px) and (min-width: 768px) {
  .nexus-deck-link {
    display: none;
  }
  .nexus-header-center {
    flex: 1 1 300px;
  }
  .nexus-search {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 767px) {
  .nexus-header-inner {
    min-height: 60px;
    gap: 8px;
  }

  .nexus-brand-logo {
    width: 36px;
    height: 36px;
  }
  .nexus-brand-title {
    font-size: 9px;
  }
  .nexus-brand-subtitle {
    display: none;
  }
  .nexus-header-center {
    flex: 0 0 40px;
    width: 40px;
  }
  .nexus-search {
    width: 40px;
    min-width: 40px;
  }
  .nexus-search-input {
    width: 40px;
    padding-left: 36px;
    padding-right: 8px;
    cursor: pointer;
    transition: width 180ms ease;
  }
  .nexus-search.is-open {
    position: fixed;
    top: 10px;
    left: 8px;
    right: 8px;
    width: auto;
    z-index: 100;
  }
  .nexus-search.is-open .nexus-search-input {
    width: 100%;
  }
  .nexus-deck-link {
    display: none;
  }
  .nexus-language {
    display: none;
  }
  #auth-buttons button {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }
  #auth-buttons button span {
    display: none;
  }
  .nexus-account {
    max-width: 40px;
    padding: 0;
  }
  .nexus-account-copy,
  .nexus-admin-badge {
    display: none;
  }
  .nexus-account {
    max-width: 40px;
    padding: 0;
  }
  .nexus-account-trigger {
    width: 38px;
    justify-content: center;
  }
  .nexus-account-chevron {
    display: none;
  }
  .nexus-cart-label {
    display: none;
  }
  .nexus-cart-button {
    padding-left: 9px;
    padding-right: 9px;
  }
  .nexus-search-dropdown {
    position: fixed;
    top: 68px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: min(360px, calc(100vh - 84px));
  }
}
:root {
  --font-display: "Press Start 2P", "SFMono-Regular", monospace;
  --font-body:
    "Be Vietnam Pro", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC",
    "Segoe UI", Arial, sans-serif;
  --font-ui:
    "Be Vietnam Pro", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC",
    "Segoe UI", Arial, sans-serif;
  --pixel-bg: #070b14;
  --pixel-panel: rgba(15, 23, 42, 0.96);
  --pixel-panel-2: rgba(15, 23, 42, 0.88);
  --pixel-border: #fbbf24;
  --pixel-shadow: #0f172a;
  --pixel-accent: #fbbf24;
  --pixel-red: #ef4444;
  --pixel-green: #34d399;
  --pixel-blue: #60a5fa;
  --pixel-text: #f8fafc;
  --pixel-muted: #94a3b8;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    linear-gradient(rgba(7, 11, 20, 0.92), rgba(7, 11, 20, 0.92)),
    url("https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1200&q=80")
      center/cover fixed;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
.pixel-font,
.site-title,
.terminal-title,
.dashboard-title {
  font-family: var(--font-body);
  font-weight: 700;
}

header h1,
.site-title,
.terminal-title,
.dashboard-title,
.pixel-display {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.gold-glow {
  box-shadow:
    0 0 0 4px rgba(251, 191, 36, 0.4),
    0 0 25px rgba(251, 191, 36, 0.25);
}

.card-hover {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
  border: 4px solid rgba(251, 191, 36, 0.45);
  box-shadow: 6px 6px 0 rgba(2, 6, 23, 1);
  border-radius: 0;
}

.card-hover:hover {
  transform: translate(-2px, -4px);
  box-shadow: 10px 10px 0 rgba(2, 6, 23, 1);
}

.holo-badge {
  border: 3px solid rgba(15, 23, 42, 0.8);
  box-shadow: 3px 3px 0 rgba(15, 23, 42, 0.9);
}

input,
select,
button {
  border-radius: 0 !important;
}

input,
select,
button,
textarea {
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.01em;
}

button {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

button:hover {
  filter: brightness(1.06);
}

.pixel-panel {
  border: 4px solid rgba(251, 191, 36, 0.4);
  box-shadow: 6px 6px 0 rgba(2, 6, 23, 1);
}

.pixel-input,
.pixel-select {
  border: 3px solid rgba(148, 163, 184, 0.5);
  box-shadow: 4px 4px 0 rgba(2, 6, 23, 1);
}

.pixel-button {
  border: 4px solid rgba(15, 23, 42, 0.9);
  box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.95);
}

.pixel-button:active,
.pixel-panel:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(15, 23, 42, 0.95);
}

/* Inventory alerts adapt to the panel width, including narrow dashboard columns. */
.admin-record-panel {
  min-width: 0;
  overflow: hidden;
}

.admin-record-panel__header {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-record-list {
  max-height: 248px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-color: rgba(34, 211, 238, 0.7) rgba(15, 23, 42, 0.82);
  scrollbar-width: thin;
}

.admin-record-list::-webkit-scrollbar,
.inventory-alerts .inventory-alerts-list::-webkit-scrollbar {
  width: 6px;
}

.admin-record-list::-webkit-scrollbar-track,
.inventory-alerts .inventory-alerts-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.82);
  border-radius: 999px;
}

.admin-record-list::-webkit-scrollbar-thumb,
.inventory-alerts .inventory-alerts-list::-webkit-scrollbar-thumb {
  border: 1px solid rgba(8, 15, 29, 0.85);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.8), rgba(99, 102, 241, 0.72));
}

.admin-record-list > div {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.65rem !important;
}

.admin-record-list button {
  min-height: 30px;
}

.inventory-alerts {
  container-type: inline-size;
  container-name: inventory-alerts;
  align-self: start;
  min-width: 0;
}

.inventory-alerts .inventory-alerts-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.inventory-alerts .inventory-alerts-header h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inventory-alerts .inventory-alerts-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  margin-left: auto;
}

.inventory-alerts .inventory-alerts-tools button {
  min-width: 36px;
  min-height: 36px;
}

.inventory-alerts .inventory-alerts-summary {
  margin: 0 0 0.75rem;
  color: #94a3b8;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.inventory-alerts .inventory-alerts-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.inventory-alerts [hidden] {
  display: none;
}

.inventory-alerts .inventory-alerts-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.7) rgba(15, 23, 42, 0.82);
}

.inventory-alerts .inventory-alert-group + .inventory-alert-group {
  margin-top: 1rem;
}

.inventory-alerts .inventory-alert-group-title {
  margin: 0 0 0.5rem;
  color: #cbd5e1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inventory-alerts .inventory-alert-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  background: rgba(2, 6, 23, 0.65);
}

.inventory-alerts .inventory-alert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.625rem;
  padding: 0.5rem;
  min-width: 0;
}

.inventory-alerts .inventory-alert-row + .inventory-alert-row {
  border-top: 1px solid #1e293b;
}

.inventory-alerts .inventory-alert-name {
  grid-column: 1 / -1;
  min-width: 0;
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.inventory-alerts .inventory-alert-stock {
  min-width: 0;
  color: #cbd5e1;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.inventory-alerts .inventory-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.1875rem 0.5rem;
  border: 1px solid;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
}

.inventory-alerts .inventory-alert-badge-empty {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
}

.inventory-alerts .inventory-alert-badge-low {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
}

.inventory-alerts .inventory-alert-actions {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.inventory-alerts .inventory-alert-quantity {
  width: 60px;
  min-width: 0;
  min-height: 32px;
  padding: 0.375rem;
  border: 1px solid #334155;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.75rem;
}

.inventory-alerts .inventory-alert-restock,
.inventory-alerts .inventory-alert-retry {
  min-height: 32px;
  padding: 0.375rem 0.625rem;
  border: 1px solid #059669;
  background: #059669;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}

.inventory-alerts .inventory-alert-restock:hover,
.inventory-alerts .inventory-alert-retry:hover {
  background: #10b981;
}

.inventory-alerts button:focus-visible,
.inventory-alerts .inventory-alert-quantity:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}

.inventory-alerts button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.inventory-alerts .inventory-alert-state {
  padding: 0.75rem;
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.5);
  color: #cbd5e1;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.inventory-alerts .inventory-alert-state strong {
  display: block;
  font-weight: 600;
}

.inventory-alerts .inventory-alert-state p {
  margin: 0.25rem 0 0;
  color: #94a3b8;
  font-size: 0.6875rem;
}

.inventory-alerts .inventory-alert-state-ok strong {
  color: #34d399;
}

.inventory-alerts .inventory-alert-state-error strong {
  color: #fca5a5;
}

.inventory-alerts .inventory-alert-retry {
  margin-top: 0.625rem;
}

@container inventory-alerts (min-width: 320px) {
  .inventory-alerts .inventory-alert-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .inventory-alerts .inventory-alert-actions {
    grid-column: auto;
  }
}

@container inventory-alerts (min-width: 560px) {
  .inventory-alerts .inventory-alert-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .inventory-alerts .inventory-alert-name {
    grid-column: auto;
  }
}

#card-list .card-hover {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.92),
    rgba(15, 23, 42, 0.84)
  );
}

#cart-modal > div {
  max-height: 90vh;
  overflow: hidden;
}

#cart-items-container {
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

#cart-items-container::-webkit-scrollbar,
#cart-items::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar {
  width: 12px;
}

#cart-items-container::-webkit-scrollbar-track,
#cart-items::-webkit-scrollbar-track,
.modal-scroll::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.9);
  border: 3px solid rgba(251, 191, 36, 0.35);
}

#cart-items-container::-webkit-scrollbar-thumb,
#cart-items::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  border: 3px solid rgba(15, 23, 42, 0.9);
  box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.9);
}

#cart-items-container::-webkit-scrollbar-thumb:hover,
#cart-items::-webkit-scrollbar-thumb:hover,
.modal-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fcd34d, #fbbf24);
}

.checkout-shipping-fields {
  overscroll-behavior: contain;
}

.checkout-field {
  display: block;
  min-width: 0;
}

.checkout-field > span {
  display: block;
  margin-bottom: 0.35rem;
  color: #94a3b8;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  width: 100%;
  border: 1px solid rgba(71, 85, 105, 0.9);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.checkout-field textarea {
  resize: vertical;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
  border-color: rgba(34, 211, 238, 0.9);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

.checkout-field input.checkout-field-invalid,
.checkout-field select.checkout-field-invalid,
.checkout-field textarea.checkout-field-invalid {
  border-color: rgba(248, 113, 113, 0.95);
}

.checkout-field small {
  display: block;
  min-height: 0.8rem;
  margin-top: 0.2rem;
  color: #f87171;
  font-size: 0.625rem;
}

.shipping-provider-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(71, 85, 105, 0.8);
  border-radius: 0.65rem;
  background: rgba(15, 23, 42, 0.65);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.shipping-provider-card:hover,
.shipping-provider-card.is-selected {
  border-color: rgba(34, 211, 238, 0.8);
  background: rgba(8, 47, 73, 0.62);
  transform: translateY(-1px);
}

.shipping-provider-card input {
  accent-color: #22d3ee;
}

@media (max-width: 640px) {
  #cart-modal > div {
    padding: 1rem;
  }

  .checkout-shipping-fields {
    max-height: 42vh;
  }
}

#card-detail-modal {
  overflow: hidden;
  overscroll-behavior: contain;
}

.card-detail-shell {
  display: flex;
  flex-direction: column;
  width: min(100%, 64rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  min-height: 0;
  overflow: visible;
}

/* ============================================================================
   NEXUS VAULT MARKETPLACE REDESIGN
   Presentation layer only: dynamic ids/classes and handlers remain intact.
   ============================================================================ */
:root {
  --nv-bg: #080b10;
  --nv-surface: #101620;
  --nv-surface-2: #151c28;
  --nv-line: rgba(142, 152, 168, .18);
  --nv-gold: #e6b84a;
  --nv-gold-light: #f3c969;
  --nv-text: #fff;
  --nv-muted: #8e98a8;
  --nv-purple: #a888d8;
}

body.bg-\[\#050b14\] {
  color: var(--nv-text);
  background: var(--nv-bg) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Keep the texture on the actual page grid only. A broad `> div.fixed`
   selector also matched full-screen modals before they moved to #modal-root. */
body.bg-\[\#050b14\] > div.fixed.inset-0[class*="z-[-1]"] {
  opacity: .12 !important;
  background-image: radial-gradient(circle at 20% 0%, rgba(230,184,74,.1), transparent 28%), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: auto, 4rem 4rem, 4rem 4rem !important;
}

header.sticky {
  background: rgba(8, 11, 16, .92) !important;
  border-bottom: 1px solid var(--nv-line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
}

.nexus-header-inner { max-width: 1440px !important; min-height: 68px; }
.nexus-brand-logo { width: 38px !important; height: 38px !important; border-radius: 10px; filter: grayscale(.2) sepia(.3) !important; }
.nexus-brand { flex: 0 0 auto; }
.nexus-brand-title { color: var(--nv-gold-light) !important; letter-spacing: .12em !important; font-size: 14px !important; }
.nexus-brand-subtitle { color: var(--nv-muted) !important; letter-spacing: .12em !important; }
.nexus-header-center { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: center; }
.nexus-primary-nav { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.nexus-nav-link { position: relative; border: 0; color: #c7ccd5; background: transparent; font-size: 12px; text-decoration: none; cursor: pointer; padding: 24px 0 21px; transition: color .18s ease; }
.nexus-nav-link:hover, .nexus-nav-link.is-active { color: var(--nv-gold-light); }
.nexus-nav-link.is-active::after { content: ""; position: absolute; bottom: 13px; left: 0; right: 0; height: 2px; background: var(--nv-gold); }
.nexus-deck-link { display: none !important; }
.nexus-search { width: min(280px, 24vw); }
.nexus-search-input { min-height: 39px; color: #f6f7f8 !important; background: #111722 !important; border-color: var(--nv-line) !important; border-radius: 8px !important; }
.nexus-search-input:focus { border-color: rgba(230,184,74,.7) !important; box-shadow: 0 0 0 3px rgba(230,184,74,.1) !important; }
.nexus-search i { color: var(--nv-gold) !important; }
.nexus-header-action, .nexus-language select { color: #c9ced7 !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.nexus-header-actions { gap: 10px !important; }
.nexus-cart-button:hover, .nexus-notification-toggle:hover { color: var(--nv-gold-light) !important; background: rgba(230,184,74,.08) !important; }
.nexus-cart-button #cart-count, .nexus-notification-badge { background: var(--nv-gold) !important; color: #17130a !important; box-shadow: none !important; }
.nexus-account { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.nexus-account-avatar { color: var(--nv-gold-light) !important; }
.nexus-account-name { color: #f2f3f5 !important; }
.nexus-account-username { color: var(--nv-muted) !important; }

#main-app-content > main { max-width: 1440px !important; padding-top: 28px !important; }
.nexus-hero { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); min-height: 390px; overflow: hidden; align-items: center; padding: 58px clamp(24px, 6vw, 86px); border: 1px solid rgba(230,184,74,.18); border-radius: 18px; background: radial-gradient(circle at 75% 50%, rgba(230,184,74,.12), transparent 32%), linear-gradient(110deg, #0d1117 0%, #111722 50%, #0b1018 100%); box-shadow: 0 22px 50px rgba(0,0,0,.2); }
.nexus-hero::before { content: ""; position: absolute; inset: 0; opacity: .25; background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); pointer-events: none; }
.nexus-hero-copy { position: relative; z-index: 2; max-width: 570px; }
.nexus-eyebrow { display: block; color: var(--nv-gold); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.nexus-hero h2 { margin: 14px 0 16px; color: #f6f5f1; font-size: clamp(34px, 4vw, 58px); line-height: 1.03; letter-spacing: -.045em; font-weight: 800; }
.nexus-hero h2 em { color: var(--nv-gold-light); font-style: normal; }
.nexus-hero p { max-width: 470px; margin: 0; color: #a9b1be; font-size: 15px; line-height: 1.7; }
.nexus-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nexus-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 19px; border-radius: 8px; font-size: 12px; font-weight: 800; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.nexus-button:hover { transform: translateY(-2px); }
.nexus-button--gold { color: #17130a; background: var(--nv-gold-light); }
.nexus-button--gold:hover { background: #f8d77f; }
.nexus-button--ghost { color: #e2e5ea; border: 1px solid rgba(214,217,224,.22); background: rgba(255,255,255,.04); }
.nexus-button--ghost:hover { border-color: rgba(230,184,74,.6); }
.nexus-hero-art { position: relative; min-height: 300px; }

.nexus-trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0 40px; overflow: hidden; border: 1px solid var(--nv-line); border-radius: 12px; background: var(--nv-line); }
.nexus-trust-bar > div { display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 16px 20px; background: #0d121a; }
.nexus-trust-bar > div > i { color: var(--nv-gold); font-size: 18px; }
.nexus-trust-bar strong, .nexus-trust-bar small { display: block; }
.nexus-trust-bar strong { color: #e7e8eb; font-size: 12px; }
.nexus-trust-bar small { margin-top: 4px; color: var(--nv-muted); font-size: 10px; }
#marketplace-section > div.flex.flex-col.md\\:flex-row { margin-top: 8px; padding: 0 0 17px; border: 0; border-bottom: 1px solid var(--nv-line); background: transparent; box-shadow: none; }
#marketplace-section > div.flex.flex-col.md\\:flex-row h3 { color: #f4f4f1; font-size: 24px; font-weight: 800; text-transform: none; letter-spacing: -.025em; }
#marketplace-section > div.flex.flex-col.md\\:flex-row h3 i { color: var(--nv-gold); }
#marketplace-section > div.flex.flex-col.md\\:flex-row p { color: var(--nv-muted); text-transform: none; letter-spacing: 0; }
#filter-type, #filter-rarity, #sort-price { min-height: 38px; color: #d6d9e0 !important; background: #111722 !important; border: 1px solid var(--nv-line) !important; border-radius: 7px !important; box-shadow: none !important; }
#filter-type:focus, #filter-rarity:focus, #sort-price:focus { border-color: rgba(230,184,74,.65) !important; }
#card-list { gap: 14px !important; }
#card-list, #mystery-pack-panel, #rewards-panel { scroll-margin-top: 96px; }
#card-list .card-hover { min-width: 0; padding: 12px !important; border: 1px solid var(--nv-line) !important; border-radius: 12px !important; background: #101620 !important; box-shadow: 0 10px 25px rgba(0,0,0,.16) !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
#card-list .card-hover:hover { transform: translateY(-4px); border-color: rgba(230,184,74,.5) !important; box-shadow: 0 18px 32px rgba(0,0,0,.28) !important; }
#card-list .card-hover > div:first-child > div.relative { min-height: 285px; margin-bottom: 14px; padding: 12px !important; border: 1px solid rgba(142,152,168,.16) !important; border-radius: 8px; background: #0a0e14 !important; }
#card-list .card-hover img { height: 260px; max-width: 100%; }
#card-list .holo-badge { border-radius: 4px; }
#card-list h4 { color: #f4f4f1; font-size: 13px; }
#card-list .text-amber-400 { color: var(--nv-gold-light) !important; }
#card-list .text-slate-400 { color: var(--nv-muted) !important; }
#card-list .pixel-button { border-radius: 6px; box-shadow: none !important; }
#card-list .pixel-button.bg-slate-800 { color: #1d180c !important; background: var(--nv-gold-light) !important; border-color: transparent !important; font-weight: 800; }
#card-list .pixel-button.bg-fuchsia-600\\/30 { color: #d5bdf0 !important; background: transparent !important; border-color: rgba(168,136,216,.45) !important; }
.card-pagination { margin-top: 28px; }
.card-pagination__button { border-color: var(--nv-line) !important; border-radius: 7px !important; color: #c9ced7 !important; background: #101620 !important; box-shadow: none !important; }
.card-pagination__button:hover:not(:disabled), .card-pagination__button.is-active { color: #211a0a !important; border-color: var(--nv-gold) !important; background: var(--nv-gold-light) !important; box-shadow: none !important; }

#rewards-panel { border-color: var(--nv-line) !important; border-radius: 14px !important; background: #101620 !important; box-shadow: none !important; }
#mystery-pack-panel { border-color: var(--nv-line) !important; border-radius: 14px !important; background: #080d16 !important; box-shadow: none !important; }
#rewards-panel .text-cyan-400, #rewards-panel .text-cyan-300, #mystery-pack-panel .text-fuchsia-400 { color: var(--nv-gold-light) !important; }
#rewards-panel .text-2xl { color: var(--nv-gold-light) !important; }
.mystery-pack-latest { border-color: rgba(168,136,216,.25) !important; background: rgba(25,20,37,.6) !important; }

@media (max-width: 1180px) {
  .nexus-primary-nav { gap: 11px; }
  .nexus-nav-link { font-size: 11px; }
  .nexus-search { width: 210px; }
  .nexus-hero { grid-template-columns: 1fr .8fr; }
}
@media (max-width: 900px) {
  .nexus-header-center { gap: 10px; }
  .nexus-primary-nav { display: none; }
  .nexus-search { width: min(360px, 45vw); }
  .nexus-trust-bar { grid-template-columns: repeat(2, 1fr); }
  .nexus-hero { grid-template-columns: 1fr; min-height: 430px; }
  .nexus-hero-art { position: absolute; right: -12%; bottom: -30px; width: 55%; opacity: .7; }
}
@media (max-width: 640px) {
  .nexus-header-inner { min-height: 60px; padding-left: 12px !important; padding-right: 12px !important; }
  .nexus-brand-subtitle, .nexus-language, .nexus-account-copy { display: none !important; }
  .nexus-brand-title { font-size: 11px !important; }
  .nexus-search { width: 42vw; }
  .nexus-cart-label { display: none !important; }
  #main-app-content > main { padding: 16px 12px 36px !important; }
  .nexus-hero { min-height: 445px; padding: 34px 22px; border-radius: 14px; }
  .nexus-hero h2 { font-size: 37px; }
  .nexus-hero p { font-size: 13px; }
  .nexus-hero-art { right: -24%; bottom: -45px; width: 80%; opacity: .55; }
  .nexus-trust-bar { grid-template-columns: 1fr; }
  .nexus-trust-bar { margin-bottom: 30px; }
  .nexus-trust-bar > div { min-height: 64px; }
  #marketplace-section > div.flex.flex-col.md\\:flex-row h3 { font-size: 21px; }
  #marketplace-section > div.flex.flex-col.md\\:flex-row > div:last-child { width: 100%; }
  #filter-type, #filter-rarity, #sort-price { flex: 1; min-width: 0; padding-left: 9px; padding-right: 9px; }
  #card-list .card-hover > div:first-child > div.relative { min-height: 310px; }
  #card-list .card-hover img { height: 285px; }
}

/* Hero visual: premium character composition. The character itself is a replaceable PNG/WebP asset. */
.nexus-hero-art[data-hero-tilt] {
  min-height: 360px;
  isolation: isolate;
  overflow: visible;
  perspective: 900px;
  transform: rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
}
.nexus-hero-art[data-hero-tilt]::after {
  position: absolute;
  z-index: 0;
  inset: 14% 7% 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, .2), rgba(15, 23, 42, .06) 54%, transparent 72%);
  content: "";
  filter: blur(18px);
  pointer-events: none;
}
.nexus-hero-layer--glow {
  z-index: 1;
  inset: 10% 4% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 52% 48%, rgba(168, 85, 247, .35), rgba(76, 29, 149, .14) 32%, transparent 70%);
  filter: blur(24px);
  animation: heroPremiumGlow 6s ease-in-out infinite;
}
.nexus-hero-layer--magic-circle {
  z-index: 2;
  inset: 8% 5% 7%;
  border: 1px solid rgba(168, 85, 247, .42);
  border-radius: 50%;
  background: repeating-conic-gradient(from 12deg, rgba(217, 70, 239, .2) 0 1deg, transparent 1deg 22deg);
  box-shadow: 0 0 38px rgba(124, 58, 237, .2), inset 0 0 36px rgba(139, 92, 246, .14);
  opacity: .68;
  animation: heroPremiumCircle 34s linear infinite;
}
.nexus-hero-layer--magic-circle::before,
.nexus-hero-layer--magic-circle::after {
  position: absolute;
  border: 1px solid rgba(216, 180, 254, .22);
  border-radius: 50%;
  content: "";
}
.nexus-hero-layer--magic-circle::before { inset: 9%; transform: rotate(27deg); }
.nexus-hero-layer--magic-circle::after { inset: 20%; border-color: rgba(214, 169, 61, .18); transform: rotate(-42deg); }
.nexus-hero-layer--cards { z-index: 3; }
.nexus-hero-layer--cards i {
  position: absolute;
  width: 58px;
  height: 84px;
  border: 1px solid rgba(216, 180, 254, .42);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .94), rgba(76, 29, 149, .5) 55%, rgba(15, 23, 42, .92));
  box-shadow: 0 18px 30px rgba(0, 0, 0, .42), 0 0 18px rgba(124, 58, 237, .26);
  opacity: .72;
}
.nexus-hero-layer--cards i::after {
  position: absolute;
  inset: 8px 7px;
  border: 1px solid rgba(244, 204, 103, .35);
  content: "✦";
  color: rgba(244, 204, 103, .54);
  font-size: 17px;
  text-align: center;
}
.nexus-hero-layer--cards i:nth-child(1) { top: 10%; right: 7%; transform: rotate(18deg) scale(.85); opacity: .52; }
.nexus-hero-layer--cards i:nth-child(2) { bottom: 10%; left: 6%; transform: rotate(-22deg) scale(.72); opacity: .46; }
.nexus-hero-layer--cards i:nth-child(3) { top: 3%; left: 14%; transform: rotate(-12deg) scale(.58); opacity: .3; }
.hero-character {
  position: absolute;
  z-index: 5;
  top: -3%;
  right: 7%;
  bottom: -6%;
  width: min(385px, 72%);
  transform-style: preserve-3d;
  transition: filter 350ms ease;
  pointer-events: none;
}
.hero-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(18px 26px 18px rgba(0, 0, 0, .64)) drop-shadow(0 0 12px rgba(168, 85, 247, .2));
  animation: heroCharacterFloat 5s ease-in-out infinite;
  transition: transform 350ms ease, filter 350ms ease;
  user-select: none;
}
.nexus-hero-art[data-hero-tilt]:hover .hero-character img {
  animation-play-state: paused;
  transform: scale(1.02);
  filter: drop-shadow(18px 26px 18px rgba(0, 0, 0, .64)) drop-shadow(0 0 24px rgba(168, 85, 247, .42));
}
.nexus-hero-layer--sparkles { z-index: 6; }
.nexus-hero-layer--sparkles i { background: #f4cc67; box-shadow: 0 0 9px 2px #a855f7; }
.nexus-hero-layer--mist { z-index: 7; background: radial-gradient(ellipse at 62% 30%, rgba(96, 165, 250, .13), transparent 66%); filter: blur(15px); }
@keyframes heroPremiumGlow { 0%, 100% { opacity: .58; transform: scale(.98); } 50% { opacity: .9; transform: scale(1.03); } }
@keyframes heroPremiumCircle { to { transform: rotate(360deg); } }
@keyframes heroCharacterFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 900px) {
  .nexus-hero-art[data-hero-tilt] { right: -3%; bottom: -28px; width: 58%; min-height: 320px; opacity: .86; }
  .hero-character { width: min(300px, 74%); right: 2%; }
}
@media (max-width: 640px) {
  .nexus-hero-art[data-hero-tilt] { position: relative; right: auto; bottom: auto; width: 100%; min-height: 255px; margin: -4px auto -22px; opacity: .72; }
  .hero-character { top: -2%; right: 11%; bottom: -8%; width: min(245px, 72%); }
  .nexus-hero-layer--magic-circle { inset: 9% 13% 4%; }
  .nexus-hero-layer--cards i:nth-child(3), .nexus-hero-layer--sparkles i:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nexus-hero-art[data-hero-tilt], .nexus-hero-layer, .hero-character { transition: none; }
  .nexus-hero-layer--glow, .nexus-hero-layer--magic-circle, .nexus-hero-layer--sparkles i, .hero-character img { animation: none; }
}

/* Current hero visual layers. Legacy orbit/mascot selectors above are intentionally unused. */
.hero-visual[data-hero-tilt] {
  --hero-spotlight-x: 50%;
  --hero-spotlight-y: 50%;
  position: relative;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(ellipse 72% 84% at 54% 50%, #000 36%, rgba(0, 0, 0, .92) 58%, transparent 88%);
  mask-image: radial-gradient(ellipse 72% 84% at 54% 50%, #000 36%, rgba(0, 0, 0, .92) 58%, transparent 88%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-visual[data-hero-tilt]::after {
  position: absolute;
  z-index: 0;
  inset: 5% 0 0;
  background: radial-gradient(ellipse at 65% 52%, rgba(124, 58, 237, .14), transparent 68%);
  content: "";
  pointer-events: none;
}
.hero-spotlight,
.hero-magic-circle,
.hero-floating-cards,
.hero-character,
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
}
.hero-spotlight {
  z-index: 1;
  background: radial-gradient(circle at var(--hero-spotlight-x) var(--hero-spotlight-y), rgba(168, 85, 247, .2), rgba(214, 169, 61, .045) 18%, transparent 55%);
  filter: blur(16px);
  opacity: .9;
}
.hero-magic-circle {
  z-index: 2;
  inset: 8% 8% 8% 4%;
  border: 1px solid rgba(168, 85, 247, .35);
  border-radius: 50%;
  background: repeating-conic-gradient(from 14deg, rgba(217, 70, 239, .17) 0 1deg, transparent 1deg 25deg);
  box-shadow: 0 0 36px rgba(124, 58, 237, .18), inset 0 0 30px rgba(139, 92, 246, .1);
  opacity: .62;
  animation: heroCurrentCircle 36s linear infinite;
}
.hero-magic-circle::before {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(216, 180, 254, .18);
  border-radius: 50%;
  content: "";
  transform: rotate(26deg);
}
.hero-floating-cards { z-index: 3; }
.hero-floating-cards i {
  position: absolute;
  width: 54px;
  height: 78px;
  border: 1px solid rgba(216, 180, 254, .38);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(20, 27, 42, .9), rgba(76, 29, 149, .42));
  box-shadow: 0 16px 28px rgba(0, 0, 0, .4), 0 0 15px rgba(124, 58, 237, .22);
  opacity: .5;
}
.hero-floating-cards i::after {
  position: absolute;
  inset: 8px 7px;
  border: 1px solid rgba(244, 204, 103, .3);
  color: rgba(244, 204, 103, .48);
  content: "✦";
  text-align: center;
}
.hero-floating-cards i:nth-child(1) { top: 11%; right: 6%; transform: rotate(17deg) scale(.78); }
.hero-floating-cards i:nth-child(2) { bottom: 10%; left: 4%; transform: rotate(-21deg) scale(.66); opacity: .36; }
.hero-floating-cards i:nth-child(3) { top: 5%; left: 15%; transform: rotate(-11deg) scale(.5); opacity: .25; }
.hero-character {
  z-index: 4;
  top: -3%;
  right: 8%;
  bottom: -6%;
  left: auto;
  width: min(360px, 48%);
  animation: none;
}
.hero-character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.hero-particles { z-index: 5; }
.hero-particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f4cc67;
  box-shadow: 0 0 8px 2px #a855f7;
  animation: heroCurrentParticle 4.5s ease-in-out infinite;
}
.hero-particles i:nth-child(1) { top: 14%; left: 44%; }
.hero-particles i:nth-child(2) { top: 32%; right: 6%; animation-delay: -1.6s; }
.hero-particles i:nth-child(3) { bottom: 18%; left: 20%; animation-delay: -2.5s; }
.hero-particles i:nth-child(4) { top: 63%; left: 9%; animation-delay: -.8s; }
.hero-particles i:nth-child(5) { top: 22%; right: 32%; animation-delay: -3.3s; }
@keyframes heroCurrentCircle { to { transform: rotate(360deg); } }
@keyframes heroCurrentParticle { 0%, 100% { opacity: .18; transform: translateY(4px) scale(.7); } 50% { opacity: .9; transform: translateY(-7px) scale(1.25); } }
@media (max-width: 900px) {
  .hero-visual[data-hero-tilt] { min-height: 320px; }
  .hero-character { width: min(300px, 50%); right: 3%; }
}
@media (max-width: 640px) {
  .hero-visual[data-hero-tilt] { min-height: 250px; margin: -4px auto -22px; opacity: .72; }
  .hero-character { top: -2%; right: 10%; bottom: -8%; width: min(240px, 60%); }
  .hero-magic-circle { inset: 10% 14% 5% 8%; }
  .hero-floating-cards i:nth-child(3), .hero-particles i:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual[data-hero-tilt], .hero-spotlight, .hero-magic-circle, .hero-floating-cards, .hero-character, .hero-particles { transition: none; }
  .hero-magic-circle, .hero-particles i { animation: none; }
}

/* Character sizing/position override: parallax lives on the wrapper, centering stays stable. */
.hero-character-wrap {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
}
.hero-character-wrap .hero-character {
  position: relative;
  inset: auto;
  width: min(720px, 96%);
  height: 92%;
  max-width: 720px;
  max-height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-14px);
  pointer-events: none;
}
.hero-character-wrap .hero-dark-magician {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero-character-wrap:hover .hero-dark-magician,
.hero-visual[data-hero-tilt]:hover .hero-dark-magician {
  transform: scale(1.02);
}
@media (min-width: 1200px) {
  .hero-character-wrap .hero-character { width: min(720px, 96%); height: 92%; }
}
@media (max-width: 900px) {
  .hero-character-wrap .hero-character { width: 90%; height: 88%; transform: translateY(-8px); }
}
@media (max-width: 640px) {
  .hero-character-wrap .hero-character { width: min(520px, 92%); height: 88%; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-character-wrap { transition: none; }
}

/* Lightweight CTA feedback: compositor-friendly shimmer and lift, no layout shift. */
.nexus-button--gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 20px rgba(214, 169, 61, .12);
}
.nexus-button--gold::after {
  position: absolute;
  z-index: -1;
  top: -35%;
  bottom: -35%;
  left: -55%;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .48), transparent);
  content: "";
  transform: skewX(-18deg);
  transition: left 550ms cubic-bezier(.2, .7, .2, 1);
}
.nexus-button--gold:hover::after { left: 125%; }
.nexus-button--ghost:hover {
  transform: translateY(-3px);
  border-color: rgba(230, 184, 74, .62);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.hero-visual[data-hero-tilt]:hover .hero-floating-cards i:nth-child(1) { animation: heroCardDriftOne 3.8s ease-in-out infinite; }
.hero-visual[data-hero-tilt]:hover .hero-floating-cards i:nth-child(2) { animation: heroCardDriftTwo 4.4s ease-in-out infinite; }
.hero-visual[data-hero-tilt]:hover .hero-floating-cards i:nth-child(3) { animation: heroCardDriftThree 4.9s ease-in-out infinite; }
@keyframes heroCardDriftOne { 0%, 100% { transform: translateY(0) rotate(17deg) scale(.78); } 50% { transform: translateY(-4px) rotate(18deg) scale(.79); } }
@keyframes heroCardDriftTwo { 0%, 100% { transform: translateY(0) rotate(-21deg) scale(.66); } 50% { transform: translateY(4px) rotate(-20deg) scale(.67); } }
@keyframes heroCardDriftThree { 0%, 100% { transform: translateY(0) rotate(-11deg) scale(.5); } 50% { transform: translateY(-3px) rotate(-10deg) scale(.51); } }
@media (prefers-reduced-motion: reduce) {
  .nexus-button--gold::after { transition: none; }
  .hero-visual[data-hero-tilt]:hover .hero-floating-cards i { animation: none; }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4 · hero-only atmospheric pass
 * Hallmark · scope: HERO SECTION · theme: Midnight Vault · enrichment: CSS arcane atmosphere
 * Preserve: layout · copy · artwork · CTA · existing pointer tilt and freeze safeguards.
 */
.nexus-hero {
  background:
    radial-gradient(ellipse at 70% 46%, color-mix(in oklch, var(--nv-violet) 24%, transparent), transparent 38%),
    radial-gradient(ellipse at 52% 100%, color-mix(in oklch, var(--nv-cyan) 9%, transparent), transparent 42%),
    radial-gradient(ellipse at 98% 12%, color-mix(in oklch, var(--nv-gold) 11%, transparent), transparent 26%),
    linear-gradient(110deg, var(--nv-bg-deep) 0%, var(--nv-bg) 48%, var(--nv-pack-void) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--nv-violet) 8%, transparent),
    inset 0 -42px 70px color-mix(in oklch, var(--nv-pack-void) 42%, transparent),
    0 22px 50px color-mix(in oklch, oklch(0% 0 0) 52%, transparent);
}
.nexus-hero::before {
  opacity: .18;
  background:
    linear-gradient(135deg, transparent 22%, color-mix(in oklch, var(--nv-ink) 6%, transparent) 44%, transparent 57%),
    radial-gradient(circle at 74% 48%, color-mix(in oklch, var(--nv-violet-bright) 12%, transparent), transparent 34%);
}
.nexus-hero::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 54% 53%, color-mix(in oklch, var(--nv-violet) 17%, transparent), transparent 16%),
    radial-gradient(ellipse at 82% 16%, color-mix(in oklch, var(--nv-foil-blue) 12%, transparent), transparent 28%),
    radial-gradient(ellipse at 88% 82%, color-mix(in oklch, var(--nv-foil-pink) 10%, transparent), transparent 30%);
  content: "";
  pointer-events: none;
}
.nexus-hero-art { z-index: 1; }

/* A faint rotating veil gives the art a magical field without washing over the copy. */
.hero-visual[data-hero-tilt]::before {
  position: absolute;
  z-index: 0;
  inset: -18%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 20deg, color-mix(in oklch, var(--nv-violet-bright) 11%, transparent) 0 1deg, transparent 1deg 19deg),
    radial-gradient(ellipse at 50% 46%, color-mix(in oklch, var(--nv-violet) 16%, transparent), transparent 66%);
  content: "";
  filter: blur(1px);
  mask-image: radial-gradient(ellipse, black 0 48%, transparent 76%);
  opacity: .52;
  pointer-events: none;
  animation: heroArcaneVeil 22s var(--nv-ease-in-out) infinite;
}
.hero-visual[data-hero-tilt]::after {
  inset: -8% -12% 0;
  background:
    radial-gradient(ellipse at 55% 46%, color-mix(in oklch, var(--nv-violet-bright) 23%, transparent), transparent 42%),
    radial-gradient(ellipse at 18% 66%, color-mix(in oklch, var(--nv-cyan) 8%, transparent), transparent 34%),
    linear-gradient(90deg, transparent 0 17%, color-mix(in oklch, var(--nv-violet) 7%, transparent) 50%, transparent 83%);
  filter: blur(18px);
  opacity: .9;
}
.hero-spotlight {
  background:
    radial-gradient(circle at var(--hero-spotlight-x) var(--hero-spotlight-y), color-mix(in oklch, var(--nv-violet-bright) 31%, transparent), transparent 30%),
    radial-gradient(ellipse at 58% 52%, color-mix(in oklch, var(--nv-gold) 8%, transparent), transparent 38%);
  filter: blur(16px);
}
.hero-spotlight::before,
.hero-spotlight::after {
  position: absolute;
  border: 1px solid color-mix(in oklch, var(--nv-violet-bright) 32%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.hero-spotlight::before {
  inset: 16% -2% 10% 3%;
  transform: rotate(-18deg) scaleX(1.1);
  opacity: .5;
  animation: heroEnergyRibbonOne 12s var(--nv-ease-in-out) infinite;
}
.hero-spotlight::after {
  inset: 26% 4% 1% 10%;
  border-color: color-mix(in oklch, var(--nv-cyan) 28%, transparent);
  transform: rotate(28deg) scaleX(1.05);
  opacity: .38;
  animation: heroEnergyRibbonTwo 15s var(--nv-ease-in-out) infinite reverse;
}
.hero-magic-circle {
  inset: 3% 1% 2% -2%;
  border-color: color-mix(in oklch, var(--nv-violet-bright) 44%, transparent);
  background:
    repeating-conic-gradient(from 14deg, color-mix(in oklch, var(--nv-violet-bright) 21%, transparent) 0 1deg, transparent 1deg 25deg),
    repeating-radial-gradient(circle, transparent 0 13%, color-mix(in oklch, var(--nv-violet) 10%, transparent) 13.2% 13.45%, transparent 13.7% 22%);
  box-shadow:
    0 0 42px color-mix(in oklch, var(--nv-violet) 28%, transparent),
    0 0 120px color-mix(in oklch, var(--nv-violet) 10%, transparent),
    inset 0 0 38px color-mix(in oklch, var(--nv-violet-bright) 18%, transparent);
  opacity: .72;
}
.hero-magic-circle::before {
  inset: 10%;
  border-color: color-mix(in oklch, var(--nv-violet-bright) 28%, transparent);
  box-shadow: 0 0 18px color-mix(in oklch, var(--nv-cyan) 18%, transparent);
  transform: rotate(26deg) scaleX(1.04);
}
.hero-magic-circle::after {
  position: absolute;
  inset: 24% 4% 24% 4%;
  border: 1px dashed color-mix(in oklch, var(--nv-gold) 26%, transparent);
  border-radius: 50%;
  content: "";
  transform: rotate(-42deg) scaleY(.74);
  opacity: .62;
}
.hero-floating-cards i {
  width: 62px;
  height: 90px;
  border-color: color-mix(in oklch, var(--nv-violet-bright) 48%, transparent);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--nv-surface-2) 88%, transparent), color-mix(in oklch, var(--nv-violet) 48%, transparent) 55%, color-mix(in oklch, var(--nv-bg-deep) 92%, transparent)),
    repeating-linear-gradient(125deg, transparent 0 16px, color-mix(in oklch, var(--nv-gold) 7%, transparent) 17px 18px, transparent 19px 28px);
  box-shadow:
    0 18px 30px color-mix(in oklch, oklch(0% 0 0) 46%, transparent),
    0 0 22px color-mix(in oklch, var(--nv-violet) 38%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--nv-gold) 13%, transparent);
  opacity: .68;
}
.hero-floating-cards i::before {
  position: absolute;
  inset: -20% 24%;
  background: linear-gradient(105deg, transparent 25%, color-mix(in oklch, var(--nv-ink) 72%, transparent) 50%, transparent 75%);
  content: "";
  transform: translateX(-180%) rotate(18deg);
  animation: heroCardGleam 6.5s var(--nv-ease-in-out) infinite;
}
.hero-floating-cards i:nth-child(2)::before { animation-delay: -2.2s; }
.hero-floating-cards i:nth-child(3)::before { animation-delay: -4.4s; }
.hero-character-wrap .hero-character {
  filter: drop-shadow(18px 26px 18px color-mix(in oklch, oklch(0% 0 0) 66%, transparent)) drop-shadow(0 0 22px color-mix(in oklch, var(--nv-violet-bright) 30%, transparent));
}
.hero-character-wrap .hero-dark-magician {
  filter: drop-shadow(0 0 22px color-mix(in oklch, var(--nv-violet-bright) 24%, transparent));
}
.hero-particles {
  z-index: 6;
}
.hero-particles::before,
.hero-particles::after {
  position: absolute;
  inset: 10% 0 10% -16%;
  background:
    radial-gradient(circle at 18% 38%, color-mix(in oklch, var(--nv-gold-bright) 72%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 64%, color-mix(in oklch, var(--nv-violet-bright) 64%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 28%, color-mix(in oklch, var(--nv-cyan) 60%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 72%, color-mix(in oklch, var(--nv-gold) 62%, transparent) 0 1px, transparent 2px);
  content: "";
  filter: blur(.2px);
  opacity: .72;
  pointer-events: none;
  animation: heroDustDrift 10s var(--nv-ease-in-out) infinite;
}
.hero-particles::after {
  inset: 2% -4% 6% 14%;
  transform: rotate(14deg) scale(1.05);
  opacity: .48;
  animation-delay: -4.5s;
}
.hero-particles i {
  width: 4px;
  height: 4px;
  background: var(--nv-gold-bright);
  box-shadow: 0 0 11px 2px color-mix(in oklch, var(--nv-violet-bright) 72%, transparent);
}
.hero-particles i:nth-child(1),
.hero-particles i:nth-child(3),
.hero-particles i:nth-child(5),
.hero-particles i:nth-child(7),
.hero-particles i:nth-child(9) {
  width: 7px;
  height: 7px;
  background: transparent;
  box-shadow: none;
  animation-name: heroStarTwinkle;
}
.hero-particles i:nth-child(1) { top: 17%; left: 35%; animation-delay: -.8s; }
.hero-particles i:nth-child(3) { bottom: 24%; left: 29%; animation-delay: -2.7s; }
.hero-particles i:nth-child(5) { top: 25%; right: 18%; animation-delay: -4.1s; }
.hero-particles i:nth-child(7) { top: 51%; right: 4%; animation-delay: -1.9s; }
.hero-particles i:nth-child(9) { bottom: 14%; right: 26%; animation-delay: -5.5s; }
.hero-particles i:nth-child(1)::before,
.hero-particles i:nth-child(1)::after,
.hero-particles i:nth-child(3)::before,
.hero-particles i:nth-child(3)::after,
.hero-particles i:nth-child(5)::before,
.hero-particles i:nth-child(5)::after,
.hero-particles i:nth-child(7)::before,
.hero-particles i:nth-child(7)::after,
.hero-particles i:nth-child(9)::before,
.hero-particles i:nth-child(9)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--nv-gold-bright), transparent);
  content: "";
  transform: translate(-50%, -50%);
}
.hero-particles i:nth-child(1)::before,
.hero-particles i:nth-child(3)::before,
.hero-particles i:nth-child(5)::before,
.hero-particles i:nth-child(7)::before,
.hero-particles i:nth-child(9)::before { width: 25px; height: 1px; }
.hero-particles i:nth-child(1)::after,
.hero-particles i:nth-child(3)::after,
.hero-particles i:nth-child(5)::after,
.hero-particles i:nth-child(7)::after,
.hero-particles i:nth-child(9)::after { width: 1px; height: 25px; }
.hero-particles i:nth-child(5)::before,
.hero-particles i:nth-child(5)::after { background: linear-gradient(90deg, transparent, var(--nv-cyan), transparent); }
@keyframes heroArcaneVeil { 0%, 100% { transform: rotate(-8deg) scale(.98); opacity: .42; } 50% { transform: rotate(8deg) scale(1.03); opacity: .66; } }
@keyframes heroEnergyRibbonOne { 0%, 100% { transform: rotate(-18deg) scaleX(1.1); opacity: .34; } 50% { transform: rotate(-10deg) scaleX(1.16); opacity: .72; } }
@keyframes heroEnergyRibbonTwo { 0%, 100% { transform: rotate(28deg) scaleX(1.05); opacity: .22; } 50% { transform: rotate(38deg) scaleX(1.12); opacity: .58; } }
@keyframes heroCardGleam { 0%, 62% { transform: translateX(-180%) rotate(18deg); opacity: 0; } 72%, 90% { transform: translateX(220%) rotate(18deg); opacity: .8; } 100% { transform: translateX(220%) rotate(18deg); opacity: 0; } }
@keyframes heroDustDrift { 0%, 100% { transform: translate3d(0, 3px, 0) scale(.98); opacity: .42; } 50% { transform: translate3d(12px, -7px, 0) scale(1.02); opacity: .78; } }
@keyframes heroStarTwinkle { 0%, 100% { opacity: .58; transform: scale(.76); } 45% { opacity: 1; transform: scale(1.2); } 62% { opacity: .72; transform: scale(.9); } }
@media (max-width: 900px) {
  .hero-magic-circle { inset: 8% -4% 4% -4%; }
  .hero-particles::before { left: 0; opacity: .52; }
  .hero-spotlight::after { opacity: .24; }
}
@media (max-width: 640px) {
  .hero-visual[data-hero-tilt]::before { opacity: .32; }
  .hero-magic-circle { inset: 10% 8% 4%; opacity: .54; }
  .hero-floating-cards i { width: 48px; height: 70px; opacity: .48; }
  .hero-floating-cards i:nth-child(3),
  .hero-particles i:nth-child(n+6),
  .hero-particles::after { display: none; }
  .hero-particles::before { inset: 12% 0 6% 0; opacity: .42; }
  .hero-spotlight::before { opacity: .28; }
  .hero-spotlight::after { opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual[data-hero-tilt]::before,
  .hero-spotlight::before,
  .hero-spotlight::after,
  .hero-floating-cards i::before,
  .hero-particles::before,
  .hero-particles::after,
  .hero-particles i,
  .hero-magic-circle { animation: none; }
}

/* Compact filter group: preserve the original select ids and onchange handlers. */
.nexus-trade-terminal {
  position: relative;
  gap: 20px !important;
  margin-top: 24px !important;
  margin-bottom: 30px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(34, 211, 238, .42) !important;
  border-radius: 18px !important;
  background: linear-gradient(120deg, rgba(7, 18, 31, .94), rgba(15, 22, 40, .9)) !important;
  box-shadow: inset 0 0 28px rgba(6, 182, 212, .05), 0 14px 32px rgba(0, 0, 0, .16) !important;
}
.nexus-filter-controls {
  flex: 1 1 680px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
}
.nexus-filter-field {
  position: relative;
  min-width: 0;
  min-height: 52px;
}
.nexus-filter-field > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 18px;
  color: #67e8f9;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}
.nexus-filter-field--rarity > i { color: #c084fc; }
.nexus-filter-field--sort > i { color: #93c5fd; }
.nexus-filter-field::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 18px;
  color: #e5e7eb;
  content: "⌄";
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-58%);
}
.nexus-filter-field select {
  width: 100%;
  height: 52px;
  padding: 22px 40px 6px 46px !important;
  border: 1px solid rgba(96, 165, 250, .34) !important;
  border-radius: 13px !important;
  color: #f1f5f9 !important;
  background: linear-gradient(135deg, rgba(18, 31, 51, .96), rgba(15, 23, 42, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 5px 14px rgba(0, 0, 0, .12) !important;
  cursor: pointer;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nexus-filter-field::before {
  position: absolute;
  top: 10px;
  left: 50px;
  color: #7d8da5;
  content: "FILTER CONTROL";
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  pointer-events: none;
}
.nexus-filter-field--type::before { color: #67e8f9; content: "LOẠI THẺ"; }
.nexus-filter-field--rarity::before { color: #c084fc; content: "MỨC ĐỘ HIẾM"; }
.nexus-filter-field--sort::before { color: #93c5fd; content: "SẮP XẾP THỊ GIÁ"; }
.nexus-filter-field select:hover { border-color: rgba(103, 232, 249, .72) !important; background: linear-gradient(135deg, rgba(23, 42, 67, .98), rgba(22, 30, 54, .98)) !important; }
.nexus-filter-field--rarity select:hover { border-color: rgba(192, 132, 252, .72) !important; }
.nexus-filter-field--sort select:hover { border-color: rgba(147, 197, 253, .72) !important; }
.nexus-filter-field:focus-within select {
  border-color: rgba(103, 232, 249, .9) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .09), 0 0 20px rgba(34, 211, 238, .14), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.nexus-filter-field--rarity:focus-within select { border-color: rgba(192, 132, 252, .9) !important; box-shadow: 0 0 0 3px rgba(168, 85, 247, .1), 0 0 20px rgba(168, 85, 247, .16), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
.nexus-filter-field--sort:focus-within select { border-color: rgba(147, 197, 253, .9) !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, .1), 0 0 20px rgba(96, 165, 250, .16), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
.nexus-filter-field option { color: #e5e7eb; background: #111b2c; }
@media (max-width: 900px) {
  .nexus-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 640px) {
  .nexus-trade-terminal { margin-top: 20px !important; padding: 14px !important; }
  .nexus-filter-controls { grid-template-columns: 1fr; }
  .nexus-filter-field select { height: 52px; }
}

/* Nexus Vault frame system: one restrained border language for major user panels. */
:root {
  --nv-frame-border: rgba(96, 165, 250, .28);
  --nv-frame-border-strong: rgba(34, 211, 238, .46);
  --nv-frame-surface: linear-gradient(135deg, rgba(10, 18, 31, .96), rgba(15, 22, 39, .92));
  --nv-frame-inner: rgba(3, 9, 18, .72);
  --nv-frame-shadow: 0 16px 38px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .035), 0 0 18px rgba(34, 211, 238, .055);
}

.nexus-spin-section,
#rewards-panel {
  border: 1px solid var(--nv-frame-border) !important;
  border-radius: 16px !important;
  background: var(--nv-frame-surface) !important;
  box-shadow: var(--nv-frame-shadow) !important;
}
#admin-dashboard {
  padding: 20px;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 18px;
  background: rgba(7, 13, 22, .42);
  box-shadow: inset 0 0 32px rgba(34, 211, 238, .025);
}
.nexus-spin-section { border-color: rgba(242, 198, 90, .3) !important; }
#rewards-panel { border-color: rgba(34, 211, 238, .32) !important; }
#mystery-pack-panel { border-color: rgba(217, 70, 239, .32) !important; }
.nexus-spin-stage {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(242, 198, 90, .2);
  border-radius: 14px;
  background: rgba(3, 9, 18, .38);
  box-shadow: inset 0 0 24px rgba(242, 198, 90, .035);
}
.nexus-spin-exclusive { box-shadow: var(--nv-frame-shadow), inset 0 0 24px rgba(217, 70, 239, .06); }
.nexus-spin-bottom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; align-items: stretch; }
.nexus-spin-list-panel {
  min-width: 0;
  height: 220px;
  min-height: 0;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(96, 165, 250, .24) !important;
  border-radius: 13px;
  background: var(--nv-frame-inner) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 20px rgba(0, 0, 0, .12);
}
.nexus-spin-list-panel h3 {
  flex: 0 0 auto;
  min-height: 2.1rem;
  margin-bottom: .75rem;
}
.nexus-spin-list-panel > div {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 198, 90, .55) rgba(15, 23, 42, .65);
}
.nexus-spin-list-panel > div::-webkit-scrollbar { width: 6px; }
.nexus-spin-list-panel > div::-webkit-scrollbar-track { background: rgba(15, 23, 42, .65); border-radius: 999px; }
.nexus-spin-list-panel > div::-webkit-scrollbar-thumb { background: rgba(242, 198, 90, .55); border-radius: 999px; }
.nexus-spin-list-panel > div::-webkit-scrollbar-thumb:hover { background: rgba(242, 198, 90, .78); }
.nexus-spin-list-item {
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  padding: .32rem .45rem;
  font-size: .68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.nexus-spin-empty {
  min-height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.nexus-spin-list-item { border-bottom-color: rgba(148, 163, 184, .16); }

#rewards-panel > .grid > div {
  border: 1px solid rgba(96, 165, 250, .2) !important;
  border-radius: 13px !important;
  background: var(--nv-frame-inner) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
#rewards-panel > .grid:first-of-type > div { border-color: rgba(148, 163, 184, .22) !important; }
#rewards-panel > .grid:first-of-type > div:first-child { border-color: rgba(34, 211, 238, .28) !important; }
#rewards-panel > .grid:first-of-type > div:nth-child(2) { border-color: rgba(52, 211, 153, .26) !important; }
#rewards-panel > .grid:first-of-type > div:nth-child(3) { border-color: rgba(242, 198, 90, .26) !important; }

/* Keep each wallet history independently compact: the section title stays
   visible while older records remain available inside that list's scrollbar. */
#rewards-panel > .grid:last-child > div {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#rewards-panel > .grid:last-child > div > div:first-child {
  flex: 0 0 auto;
}
#rewards-panel #reward-history-list,
#rewards-panel #purchase-history-list {
  height: 216px;
  max-height: 216px !important;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 198, 90, .55) rgba(15, 23, 42, .65);
}
#rewards-panel #reward-history-list::-webkit-scrollbar,
#rewards-panel #purchase-history-list::-webkit-scrollbar { width: 6px; }
#rewards-panel #reward-history-list::-webkit-scrollbar-track,
#rewards-panel #purchase-history-list::-webkit-scrollbar-track { background: rgba(15, 23, 42, .65); border-radius: 999px; }
#rewards-panel #reward-history-list::-webkit-scrollbar-thumb,
#rewards-panel #purchase-history-list::-webkit-scrollbar-thumb { background: rgba(242, 198, 90, .55); border-radius: 999px; }
#rewards-panel #reward-history-list > div,
#rewards-panel #purchase-history-list > div {
  min-width: 0;
  padding: .55rem .65rem !important;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mystery-pack-layout { gap: 16px; }
.mystery-pack-left,
.mystery-pack-latest {
  border: 1px solid rgba(217, 70, 239, .22);
  border-radius: 14px;
  background: rgba(3, 9, 18, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.mystery-pack-left { padding: 14px; }
.mystery-pack-latest { border-color: rgba(34, 211, 238, .24); }

@media (max-width: 900px) {
  .nexus-spin-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nexus-spin-list-panel { height: 214px; max-height: 214px; }
}
@media (max-width: 640px) {
  .nexus-spin-section { padding: 16px !important; }
  .nexus-spin-bottom-grid { grid-template-columns: 1fr; }
  .nexus-spin-list-panel { height: 208px; max-height: 208px; }
  #rewards-panel, #mystery-pack-panel { padding: 16px !important; }
}

.card-detail-navigation {
  position: absolute;
  z-index: 30;
  top: 50%;
  right: -24px;
  left: -24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.card-detail-navigation__button {
  display: grid;
  width: 46px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, 0.42);
  border-radius: 9px;
  color: #67e8f9;
  background: rgba(8, 18, 35, 0.96);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.card-detail-navigation__button:hover,
.card-detail-navigation__button:focus-visible {
  border-color: rgba(168, 85, 247, 0.8);
  color: white;
  background: rgba(30, 41, 59, 0.98);
  outline: none;
}

.card-detail-navigation__button:first-child:hover { transform: translateX(-3px); }
.card-detail-navigation__button:last-child:hover { transform: translateX(3px); }

#card-detail-modal.card-detail-slide-left .card-detail-shell {
  animation: cardDetailSlideLeft 220ms ease both;
}

#card-detail-modal.card-detail-slide-right .card-detail-shell {
  animation: cardDetailSlideRight 220ms ease both;
}

@keyframes cardDetailSlideLeft {
  from { opacity: 0.6; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cardDetailSlideRight {
  from { opacity: 0.6; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.card-detail-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

.card-detail-body > .flex {
  min-width: 0;
}

.card-detail-body [id="detail-card-name"] {
  overflow-wrap: anywhere;
}

#detail-card-description {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.6;
}

.card-detail-footer {
  flex: 0 0 auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.card-detail-footer button {
  min-height: 3rem;
}

.card-detail-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
  box-shadow: none;
}

#detail-card-image {
  height: min(450px, 38vh) !important;
  max-width: 100%;
}

.card-detail-image-zoom {
  cursor: zoom-in;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

@media (max-width: 700px) {
  .card-detail-navigation {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: min(100%, 140px);
    margin: 34px auto 4px;
    transform: none;
  }

  .card-detail-navigation__button {
    width: 42px;
    height: 42px;
  }
}

/* Rarity is intentionally encoded in the badge itself so filters and visuals
   stay consistent even when the API returns mixed casing or separators. */
.rarity-badge {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  right: 0.75rem;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  padding: 0.28rem 0.55rem;
  border: 1px solid;
  border-radius: 6px;
  clip-path: polygon(5% 0, 95% 0, 100% 22%, 100% 78%, 95% 100%, 5% 100%, 0 78%, 0 22%);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.rarity-badge--common {
  color: #e2e8f0 !important;
  background: rgba(51, 65, 85, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.65) !important;
}

.rarity-badge--rare {
  color: #e0f2fe !important;
  background: linear-gradient(135deg, #075985, #2563eb) !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
}

.rarity-badge--secret {
  color: #fff7d6 !important;
  background: linear-gradient(135deg, #7a3d06, #f59e0b 48%, #fff0a8 72%, #c96a00) !important;
  border-color: #fff0a8 !important;
  box-shadow: 0 0 16px rgba(255, 157, 0, 0.48) !important;
}

.rarity-badge--ultra {
  color: #241600 !important;
  background: linear-gradient(135deg, #facc15, #f59e0b) !important;
  border-color: #fef08a !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.6) !important;
}

#card-list .card-hover > div:first-child > div.relative {
  isolation: isolate;
}

#card-list .card-hover > div:first-child > div.relative > img {
  position: relative;
  z-index: 1;
}

#detail-card-rarity.rarity-badge--common,
#detail-card-rarity.rarity-badge--rare,
#detail-card-rarity.rarity-badge--secret,
#detail-card-rarity.rarity-badge--ultra {
  border-radius: 6px !important;
}

#detail-card-rarity.rarity-secret-rare {
  color: #fff0a8 !important;
  border-color: #ffb000 !important;
  background: rgba(201, 106, 0, 0.18) !important;
  box-shadow: 0 0 12px rgba(255, 157, 0, 0.32) !important;
}

#detail-card-rarity.rarity-ultra-rare {
  color: #dbeafe !important;
  border-color: #7dd3fc !important;
  background: rgba(76, 92, 255, 0.18) !important;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.3) !important;
}

/* Premium rarity system: the semantic rarity-* classes are the extension
   point, while rarity-badge keeps placement and accessibility consistent. */
.rarity-common,
.rarity-rare,
.rarity-secret-rare,
.rarity-ultra-rare {
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
  transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

.rarity-common::before,
.rarity-rare::before,
.rarity-secret-rare::before,
.rarity-ultra-rare::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.rarity-common {
  color: #f1f5f9 !important;
  background: linear-gradient(145deg, #334155 0%, #111827 52%, #475569 100%) !important;
  border-color: #94a3b8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px rgba(2, 6, 23, 0.42) !important;
}

.rarity-common::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.25), transparent 38%);
}

.rarity-rare {
  color: #eff6ff !important;
  background: linear-gradient(145deg, #0c4a6e 0%, #1d4ed8 48%, #172554 100%) !important;
  border-color: #93c5fd !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(59, 130, 246, 0.38), 0 7px 18px rgba(2, 6, 23, 0.45) !important;
  text-shadow: 0 1px 6px rgba(125, 211, 252, 0.55);
}

.rarity-rare::before {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.44), transparent 30%, rgba(125, 211, 252, 0.18));
}

.rarity-secret-rare {
  color: #fff7d6 !important;
  background: linear-gradient(135deg, #6b3004 0%, #c96a00 28%, #ff9d00 53%, #fff0a8 72%, #b45309 100%) !important;
  border-color: #fff0a8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -2px 8px rgba(91, 42, 3, 0.56), 0 0 15px rgba(255, 157, 0, 0.6), 0 8px 22px rgba(2, 6, 23, 0.5) !important;
  text-shadow: 0 1px 8px rgba(255, 240, 168, 0.8);
}

.rarity-secret-rare::before {
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.72), transparent 24%, rgba(255, 240, 168, 0.3) 62%, rgba(255, 157, 0, 0.32));
  animation: raritySecretShimmer 4s ease-in-out infinite;
}

.rarity-ultra-rare {
  color: #f5f3ff !important;
  background: linear-gradient(132deg, #18246e 0%, #4b5cff 27%, #7c3aed 52%, #a855f7 74%, #00c8ff 100%) !important;
  border-color: #a5f3fc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), inset 0 -2px 8px rgba(27, 22, 94, 0.72), 0 0 12px rgba(0, 200, 255, 0.72), 0 0 24px rgba(124, 58, 237, 0.62), 0 9px 24px rgba(2, 6, 23, 0.58) !important;
  text-shadow: 0 1px 9px rgba(224, 231, 255, 0.88);
}

.rarity-ultra-rare::before {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.74) 0%, rgba(125, 211, 252, 0.2) 17%, transparent 35%, rgba(217, 70, 239, 0.32) 67%, rgba(0, 200, 255, 0.35) 100%);
  animation: rarityUltraShimmer 3.2s ease-in-out infinite;
}

.rarity-common::after,
.rarity-rare::after,
.rarity-secret-rare::after,
.rarity-ultra-rare::after {
  position: absolute;
  z-index: 2;
  top: -80%;
  left: -55%;
  width: 34%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(22deg) translateX(-160%);
  transition: transform 450ms ease, opacity 180ms ease;
}

.card-hover:hover .rarity-common,
.card-hover:hover .rarity-rare,
.card-hover:hover .rarity-secret-rare,
.card-hover:hover .rarity-ultra-rare {
  filter: saturate(1.08) brightness(1.06);
  transform: translateY(-1px) translateZ(0);
}

.card-hover:hover .rarity-secret-rare,
.card-hover:hover .rarity-ultra-rare {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 0 22px rgba(0, 200, 255, 0.7), 0 0 30px rgba(124, 58, 237, 0.62), 0 10px 25px rgba(2, 6, 23, 0.58) !important;
}

.card-hover:hover .rarity-secret-rare {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 23px rgba(255, 157, 0, 0.72), 0 10px 25px rgba(2, 6, 23, 0.58) !important;
}

.card-hover:hover .rarity-ultra-rare::after,
.card-hover:hover .rarity-secret-rare::after,
.card-hover:hover .rarity-rare::after {
  opacity: 1;
  transform: rotate(22deg) translateX(510%);
}

@media (prefers-reduced-motion: reduce) {
  .rarity-common,
  .rarity-rare,
  .rarity-secret-rare,
  .rarity-ultra-rare,
  .rarity-common::after,
  .rarity-rare::after,
  .rarity-secret-rare::after,
  .rarity-ultra-rare::after {
    transition: none;
  }

  .rarity-secret-rare::before,
  .rarity-ultra-rare::before {
    animation: none;
  }
}

@keyframes raritySecretShimmer {
  0%, 65%, 100% { opacity: 0.62; transform: translateX(-3%); }
  78% { opacity: 0.9; transform: translateX(4%); }
}

@keyframes rarityUltraShimmer {
  0%, 58%, 100% { opacity: 0.64; transform: translateX(-3%) scale(1); }
  76% { opacity: 0.96; transform: translateX(4%) scale(1.02); }
}

/* A restrained rarity tint on the card frame keeps the badge as the focal
   point while making rarity visible in dense grids and deck lists. */
.rarity-card--common {
  border-color: rgba(148, 163, 184, 0.26) !important;
}

.rarity-card--rare {
  border-color: rgba(96, 165, 250, 0.42) !important;
}

.rarity-card--secret {
  border-color: rgba(255, 157, 0, 0.5) !important;
}

.rarity-card--ultra {
  border-color: rgba(124, 58, 237, 0.54) !important;
}

.rarity-card--common:hover {
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.32) !important;
}

.rarity-card--rare:hover {
  box-shadow: 0 14px 32px rgba(30, 64, 175, 0.22), 0 0 18px rgba(59, 130, 246, 0.16) !important;
}

.rarity-card--secret:hover {
  box-shadow: 0 14px 34px rgba(146, 64, 14, 0.28), 0 0 20px rgba(255, 157, 0, 0.2) !important;
}

.rarity-card--ultra:hover {
  box-shadow: 0 14px 36px rgba(49, 46, 129, 0.34), 0 0 22px rgba(0, 200, 255, 0.2) !important;
}

@media (max-width: 640px) {
  .rarity-badge {
    top: 0.55rem;
    right: 0.55rem;
    max-width: calc(100% - 1.1rem);
    padding: 0.23rem 0.42rem;
    font-size: 8px;
    letter-spacing: 0.055em;
  }
}

.search-result-rarity {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.search-result-rarity.rarity-common,
.search-result-rarity.rarity-rare,
.search-result-rarity.rarity-secret-rare,
.search-result-rarity.rarity-ultra-rare {
  display: inline;
  overflow: visible;
  padding: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none;
}
.search-result-rarity.rarity-rare { color: #93c5fd !important; }
.search-result-rarity.rarity-secret-rare { color: #ffd166 !important; }
.search-result-rarity.rarity-ultra-rare { color: #c4b5fd !important; }

.pack-reveal-card__rarity.rarity-common,
.pack-reveal-card__rarity.rarity-rare,
.pack-reveal-card__rarity.rarity-secret-rare,
.pack-reveal-card__rarity.rarity-ultra-rare,
.mystery-pack-received-card > span.rarity-common,
.mystery-pack-received-card > span.rarity-rare,
.mystery-pack-received-card > span.rarity-secret-rare,
.mystery-pack-received-card > span.rarity-ultra-rare {
  display: inline-block;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none;
  transform: none;
}

.pack-reveal-card__rarity.rarity-common,
.mystery-pack-received-card > span.rarity-common { color: #cbd5e1 !important; }
.pack-reveal-card__rarity.rarity-rare,
.mystery-pack-received-card > span.rarity-rare { color: #7dd3fc !important; }
.pack-reveal-card__rarity.rarity-secret-rare,
.mystery-pack-received-card > span.rarity-secret-rare { color: #ffd166 !important; }
.pack-reveal-card__rarity.rarity-ultra-rare,
.mystery-pack-received-card > span.rarity-ultra-rare {
  color: #fde68a !important;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.45);
}

.card-detail-image-zoom:hover,
.card-detail-image-zoom:focus-visible {
  transform: scale(1.02);
  filter: brightness(1.06);
  outline: none;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.55), 0 0 22px rgba(6, 182, 212, 0.2);
}

.card-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(7px);
  transition: opacity 220ms ease;
}

.card-image-lightbox.is-visible {
  opacity: 1;
}

.card-image-lightbox.is-closing {
  opacity: 0;
}

.card-image-lightbox-backdrop {
  position: absolute;
  inset: 0;
}

.card-image-lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80vw;
  max-height: 85vh;
  animation: cardLightboxImageIn 220ms ease both;
}

.card-image-lightbox-image {
  display: block;
  max-width: 80vw;
  max-height: 85vh;
  object-fit: contain;
  border: 1px solid rgba(103, 232, 249, 0.55);
  border-radius: 0.75rem;
  background: #050b14;
  box-shadow: 0 0 0 1px rgba(8, 47, 73, 0.7), 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 30px rgba(34, 211, 238, 0.18);
}

.card-image-lightbox-close {
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(103, 232, 249, 0.5);
  border-radius: 999px;
  color: #cffafe;
  background: rgba(7, 13, 24, 0.95);
  font-size: 1.1rem;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.card-image-lightbox-close:hover,
.card-image-lightbox-close:focus-visible {
  color: #fff;
  border-color: #67e8f9;
  transform: scale(1.06);
  outline: none;
}

@keyframes cardLightboxImageIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

:root {
  --nexus-layer-header: 100;
  --nexus-layer-dropdown: 200;
  --nexus-layer-floating: 300;
  --nexus-layer-backdrop: 900;
  --nexus-layer-modal: 1000;
  --nexus-layer-modal-secondary: 1050;
  --nexus-layer-toast: 1100;
}

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

/* The root is a body-level layer. Its backdrop is shared by all primary
   surfaces; individual surfaces provide content only. */
#modal-root {
  position: relative;
  z-index: var(--nexus-layer-backdrop);
  isolation: isolate;
}

/* Modal visibility cannot depend on the remote Tailwind stylesheet. Without
   this scoped fallback, a class="hidden" surface such as #discord-modal still
   computes to display:grid and paints above Mystery Pack. */
#modal-root > .hidden,
#mystery-pack-panel.hidden,
#notification-panel.hidden,
#user-menu.hidden,
#search-suggestions.hidden,
#ai-chat-panel.hidden,
#notification-panel .hidden,
#user-menu .hidden {
  display: none !important;
}

.nexus-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--nexus-layer-backdrop);
  pointer-events: auto;
  opacity: 1;
  filter: none;
  background: rgba(2, 6, 12, 0.78);
  backdrop-filter: blur(5px);
}

.nexus-modal-backdrop:not(.hidden) {
  opacity: 1 !important;
  filter: none !important;
  background: rgba(2, 6, 12, 0.78) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.nexus-modal-backdrop.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* One predictable layer for every primary modal surface. The lightbox is the
   only intentional child layer and stays above Card Detail while preserving it. */
#access-required-modal,
#auth-modal,
#edit-card-modal,
#cart-modal,
#wishlist-modal,
#card-detail-modal,
#pack-result-modal,
#complaint-modal,
#guide-modal,
#security-modal,
#discord-modal {
  z-index: var(--nexus-layer-modal) !important;
}

/* Do not let a surface create a second translucent page overlay. */
#access-required-modal,
#auth-modal,
#edit-card-modal,
#cart-modal,
#wishlist-modal,
#card-detail-modal,
#pack-result-modal,
#complaint-modal,
#guide-modal,
#security-modal,
#discord-modal {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: auto;
}

#modal-root > #card-image-lightbox {
  pointer-events: auto;
}

#auth-modal > div {
  position: relative;
  z-index: 1;
  opacity: 1;
  background: #0a0e17 !important;
  isolation: isolate;
}

#wishlist-modal > div {
  position: relative;
  z-index: 1;
  opacity: 1;
  background: #0a0e17 !important;
  isolation: isolate;
}

#card-image-lightbox {
  z-index: var(--nexus-layer-modal-secondary) !important;
}

.nexus-search-dropdown,
.nexus-notification-menu,
.nexus-user-menu {
  z-index: var(--nexus-layer-dropdown);
}

.card-detail-body::-webkit-scrollbar {
  width: 12px;
}

/* Error Report module: scoped to complaint surfaces only. */
.complaint-upload-block,
.complaint-history-panel,
.complaint-detail-meta,
.complaint-detail-images {
  font-family: inherit;
}

.complaint-upload-trigger,
.complaint-history-refresh {
  border: 1px solid rgba(244, 63, 94, 0.45);
  background: rgba(244, 63, 94, 0.08);
  color: #fda4af;
  border-radius: 0.5rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.complaint-upload-trigger:hover,
.complaint-history-refresh:hover {
  background: rgba(244, 63, 94, 0.2);
  color: #fff1f2;
}

.complaint-upload-hint,
.complaint-image-error {
  margin: 0.45rem 0 0;
  color: #94a3b8;
  font-size: 0.68rem;
}

.complaint-image-error { color: #fda4af; min-height: 1rem; }
.complaint-image-error:not(.is-visible) { visibility: hidden; }
.complaint-image-preview { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.complaint-image-preview__item { position: relative; width: 4.6rem; height: 4.6rem; overflow: hidden; border: 1px solid rgba(244, 63, 94, 0.35); border-radius: 0.55rem; background: #0f172a; }
.complaint-image-preview__item img { width: 100%; height: 100%; object-fit: cover; }
.complaint-image-preview__item button { position: absolute; top: 0.2rem; right: 0.2rem; width: 1.3rem; height: 1.3rem; border: 0; border-radius: 999px; background: rgba(2, 6, 23, 0.85); color: #fff; cursor: pointer; line-height: 1; }

.complaint-history-panel { margin-top: 1rem; padding: 1.1rem; border: 1px solid rgba(34, 211, 238, 0.22); border-radius: 0.9rem; background: rgba(2, 6, 23, 0.6); }
.complaint-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.complaint-history-heading h3 { margin: 0.35rem 0 0; color: #f8fafc; font-size: 0.85rem; letter-spacing: 0.14em; }
.complaint-history-list { display: grid; gap: 0.6rem; max-height: 24rem; overflow: auto; }
.complaint-history-card { display: grid; gap: 0.7rem; padding: 0.85rem; border: 1px solid rgba(51, 65, 85, 0.8); border-radius: 0.65rem; background: rgba(15, 23, 42, 0.7); color: #cbd5e1; font-size: 0.72rem; }
.complaint-history-card__header { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.55rem 0.8rem; align-items: center; min-width: 0; }
.complaint-history-card__header strong { color: #67e8f9; font-size: 0.65rem; letter-spacing: 0.08em; }
.complaint-history-card__header time { justify-self: end; color: #64748b; font-size: 0.65rem; white-space: nowrap; }
.complaint-history-card__details { display: grid; gap: 0.45rem; margin: 0; }
.complaint-history-card__details div { display: grid; grid-template-columns: minmax(5.5rem, 0.24fr) minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
.complaint-history-card__details dt { color: #94a3b8; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.complaint-history-card__details dd { min-width: 0; margin: 0; color: #e2e8f0; overflow-wrap: anywhere; white-space: pre-wrap; }
.complaint-history-card__reply { padding-top: 0.6rem; border-top: 1px solid rgba(51, 65, 85, 0.7); }
.complaint-history-card__reply strong { color: #a7f3d0; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.complaint-history-card__reply p { margin: 0.3rem 0 0; color: #a7f3d0; font-size: 0.7rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.complaint-status-badge { padding: 0.25rem 0.45rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.58rem; font-weight: 800; white-space: nowrap; }
.complaint-status-badge.is-submitted { color: #fbbf24; }
.complaint-status-badge.is-viewed { color: #67e8f9; }
.complaint-status-badge.is-fixed { color: #86efac; }
.complaint-history-empty { color: #94a3b8; font-size: 0.72rem; }

.complaint-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; color: #94a3b8; font-size: 0.68rem; }
.complaint-detail-images { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 0.9rem; color: #94a3b8; font-size: 0.7rem; }
.complaint-detail-images a { display: block; width: 6rem; height: 4.5rem; overflow: hidden; border: 1px solid rgba(34, 211, 238, 0.35); border-radius: 0.5rem; background: #0f172a; }
.complaint-detail-images img { width: 100%; height: 100%; object-fit: cover; }
.status-viewed { color: #67e8f9 !important; border-color: rgba(34, 211, 238, 0.6) !important; background: rgba(34, 211, 238, 0.12) !important; }

@media (max-width: 640px) {
  .complaint-history-card__header { grid-template-columns: auto minmax(0, 1fr); }
  .complaint-history-card__header time { grid-column: 1 / -1; justify-self: start; }
  .complaint-history-card__details div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.card-detail-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.9);
}

.card-detail-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22d3ee, #2563eb);
  border: 3px solid rgba(15, 23, 42, 0.9);
}

@media (max-width: 640px) {
  .card-detail-shell {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 1rem;
  }

  .card-detail-footer {
    gap: 0.5rem;
  }

  .card-detail-footer button {
    width: 100%;
  }

  #detail-card-image {
    height: min(360px, 32vh) !important;
  }

  .card-image-lightbox {
    padding: 1rem;
  }

  .card-image-lightbox-content,
  .card-image-lightbox-image {
    max-width: 92vw;
    max-height: 80vh;
  }

  .card-image-lightbox-close {
    top: -0.65rem;
    right: -0.35rem;
  }
}

.card-detail-shell {
  border: 4px solid rgba(251, 191, 36, 0.55);
  box-shadow: 8px 8px 0 rgba(2, 6, 23, 1);
}

.card-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.card-detail-grid > div {
  background: rgba(15, 23, 42, 0.85);
  border: 3px solid rgba(148, 163, 184, 0.35);
  padding: 0.75rem;
}

.card-detail-grid span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
}

.card-detail-grid strong {
  font-size: 12px;
  color: #f8fafc;
}

.nexus-footer-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(8px);
}

.nexus-footer-modal__panel {
  position: relative;
  width: min(100%, 680px);
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
  padding: 26px;
  border: 1px solid rgba(34, 211, 238, 0.42);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8, 18, 35, 0.98), rgba(15, 23, 42, 0.98));
  box-shadow: 0 0 36px rgba(34, 211, 238, 0.13);
}

.nexus-footer-modal__panel--discord {
  width: min(100%, 500px);
  border-color: rgba(168, 85, 247, 0.45);
}

.nexus-footer-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.8);
  cursor: pointer;
}

.nexus-footer-modal__close:hover,
.nexus-footer-modal__close:focus-visible {
  border-color: rgba(34, 211, 238, 0.65);
  color: #67e8f9;
  outline: none;
}

.nexus-footer-modal__eyebrow {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nexus-footer-modal__panel h2 {
  margin: 8px 42px 22px 0;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.nexus-footer-modal__content {
  display: grid;
  gap: 13px;
}

.nexus-footer-modal__content section {
  padding: 12px 14px;
  border-left: 2px solid rgba(34, 211, 238, 0.55);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.62);
}

.nexus-footer-modal__content h3 {
  margin: 0 0 4px;
  color: #a5f3fc;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.nexus-footer-modal__content p,
.nexus-footer-modal__lead {
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.65;
}

.nexus-guide-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: 9px;
  color: #a5f3fc;
  background: rgba(15, 23, 42, 0.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: 160ms ease;
}

.nexus-guide-trigger:hover,
.nexus-guide-trigger:focus-visible {
  border-color: rgba(34, 211, 238, 0.8);
  color: #ecfeff;
  background: rgba(8, 145, 178, 0.2);
  outline: none;
}

.nexus-context-help {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 8px;
  border: 1px solid rgba(242, 198, 90, 0.45);
  border-radius: 999px;
  color: #f2c65a;
  background: rgba(217, 167, 46, 0.08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.nexus-context-help:hover,
.nexus-context-help:focus-visible {
  border-color: #f2c65a;
  color: #fff1b1;
  background: rgba(217, 167, 46, 0.2);
  outline: none;
}

.nexus-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(2, 6, 23, 0.84);
  backdrop-filter: blur(9px);
}

.nexus-guide-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 1040px);
  max-height: min(90vh, calc(100vh - 32px));
  min-height: 0;
  box-sizing: border-box;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.42);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8, 18, 35, 0.99), rgba(15, 23, 42, 0.99));
  box-shadow: 0 0 42px rgba(34, 211, 238, 0.13);
}

.nexus-guide-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.82);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.nexus-guide-close:hover,
.nexus-guide-close:focus-visible {
  border-color: rgba(34, 211, 238, 0.75);
  color: #67e8f9;
  outline: none;
}

.nexus-guide-eyebrow {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nexus-guide-panel h2 {
  margin: 8px 42px 20px 0;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.nexus-guide-search {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
}

.nexus-guide-search > label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nexus-guide-search__field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(242, 198, 90, 0.28);
  border-radius: 10px;
  color: #f2c65a;
  background: rgba(2, 6, 23, 0.56);
}

.nexus-guide-search__field:focus-within {
  border-color: rgba(242, 198, 90, 0.8);
  box-shadow: 0 0 0 3px rgba(242, 198, 90, 0.1);
}

.nexus-guide-search__field input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #f8fafc;
  background: transparent;
  font-size: 12px;
}

.nexus-guide-search__field input::placeholder {
  color: #64748b;
}

.nexus-guide-search__status {
  min-height: 15px;
  color: #f2c65a;
  font-size: 10px;
}

.nexus-guide-search__status.is-empty {
  color: #fda4af;
}

.nexus-guide-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  gap: 18px;
}

.nexus-guide-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.nexus-guide-nav button {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #94a3b8;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.nexus-guide-nav button:hover,
.nexus-guide-nav button:focus-visible,
.nexus-guide-nav button.is-active {
  border-color: rgba(34, 211, 238, 0.36);
  color: #cffafe;
  background: rgba(8, 145, 178, 0.16);
  outline: none;
}

.nexus-guide-content {
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.nexus-guide-content section {
  display: block;
  padding: 18px;
  border: 1px solid rgba(51, 65, 85, 0.72);
  border-left: 2px solid rgba(34, 211, 238, 0.6);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.64);
}
.nexus-guide-content section:not(.nexus-guide-section-card):not(.is-active) {
  display: none;
}

.nexus-guide-section-card {
  padding: 16px;
  border: 1px solid rgba(242, 198, 90, 0.24);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(24, 20, 13, 0.7), rgba(15, 23, 42, 0.72));
}

.nexus-guide-section-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: #f2c65a;
}

.nexus-guide-section-heading > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 198, 90, 0.34);
  border-radius: 9px;
  background: rgba(217, 167, 46, 0.1);
}

.nexus-guide-section-heading h3 {
  margin: 0 0 5px;
}

.nexus-guide-section-heading p {
  margin: 0;
}

.nexus-guide-accordion {
  margin-top: 9px;
  border: 1px solid rgba(71, 85, 105, 0.62);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.36);
}

.nexus-guide-accordion summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.nexus-guide-accordion summary::-webkit-details-marker {
  display: none;
}

.nexus-guide-accordion summary > i:first-child {
  color: #f2c65a;
}

.nexus-guide-accordion summary:hover,
.nexus-guide-accordion summary:focus-visible {
  color: #fff1b1;
  background: rgba(217, 167, 46, 0.1);
  outline: none;
}

.nexus-guide-accordion__chevron {
  margin-left: auto;
  color: #64748b;
  font-size: 10px;
  transition: transform 160ms ease;
}

.nexus-guide-accordion[open] .nexus-guide-accordion__chevron {
  transform: rotate(180deg);
}

.nexus-guide-accordion__body {
  padding: 0 13px 13px;
  border-top: 1px solid rgba(71, 85, 105, 0.4);
}

.nexus-guide-accordion__body h4 {
  margin: 13px 0 7px;
  color: #f2c65a;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nexus-guide-accordion__body ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.6;
}

.nexus-guide-content h3 {
  margin: 0 0 10px;
  color: #a5f3fc;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nexus-guide-content p {
  margin: 0 0 12px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.75;
}

.nexus-guide-content p:last-child {
  margin-bottom: 0;
}

.card-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 26px auto 0;
}

.card-pagination__button {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 7px;
  color: #a5f3fc;
  background: rgba(15, 23, 42, 0.82);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: 160ms ease;
}

.card-pagination__button:hover:not(:disabled),
.card-pagination__button:focus-visible,
.card-pagination__button.is-active {
  border-color: rgba(34, 211, 238, 0.85);
  color: #082f49;
  background: #67e8f9;
  outline: none;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.2);
}

.card-pagination__button:disabled {
  border-color: rgba(71, 85, 105, 0.35);
  color: #64748b;
  background: rgba(15, 23, 42, 0.4);
  cursor: not-allowed;
}

.nexus-guide-tip {
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 8px;
  color: #ddd6fe;
  background: rgba(126, 34, 206, 0.1);
  font-size: 11px;
}

.nexus-guide-trouble {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(251, 113, 133, 0.3);
  border-radius: 8px;
  color: #fecdd3;
  background: rgba(190, 24, 93, 0.1);
  font-size: 11px;
  line-height: 1.55;
}

.nexus-guide-tip strong,
.nexus-guide-trouble strong {
  color: #fff1b1;
}

.nexus-guide-ok {
  align-self: flex-end;
  margin-top: 18px;
  padding: 10px 18px;
  border: 1px solid rgba(34, 211, 238, 0.55);
  border-radius: 8px;
  color: #cffafe;
  background: rgba(8, 145, 178, 0.18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.nexus-guide-ok:hover,
.nexus-guide-ok:focus-visible {
  color: #082f49;
  background: #67e8f9;
  outline: none;
}

.nexus-guide-mobile-select-wrap {
  display: none;
}

@media (max-width: 700px) {
  .nexus-guide-modal {
    padding: 8px;
  }

  .nexus-guide-panel {
    width: 100%;
    max-height: calc(100vh - 16px);
    padding: 20px 14px 16px;
  }

  .nexus-guide-trigger span {
    display: none;
  }

  .nexus-guide-layout {
    display: block;
  }

  .nexus-guide-nav {
    display: none;
  }

  .nexus-guide-mobile-select-wrap {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
  }

  .nexus-guide-mobile-select-wrap label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .nexus-guide-mobile-select-wrap select {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 8px;
    color: #cffafe;
    background: #0f172a;
    font-size: 11px;
  }

  .nexus-guide-content {
    min-height: 0;
    max-height: calc(100vh - 230px);
  }
}

.nexus-footer-modal__ok,
.nexus-footer-modal__primary,
.nexus-footer-modal__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.nexus-footer-modal__ok {
  width: 100%;
  margin-top: 20px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  color: #a5f3fc;
  background: rgba(8, 145, 178, 0.2);
}

.nexus-footer-modal__ok:hover,
.nexus-footer-modal__primary:hover {
  color: white;
  background: rgba(8, 145, 178, 0.5);
}

.nexus-footer-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 20px;
}

.nexus-footer-modal__primary {
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #f5d0fe;
  background: rgba(126, 34, 206, 0.25);
}

.nexus-footer-modal__secondary {
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: #a5f3fc;
  background: rgba(8, 145, 178, 0.15);
}

.nexus-footer-modal__secondary:hover {
  color: white;
  background: rgba(8, 145, 178, 0.4);
}

.nexus-footer-modal__primary.is-disabled,
.nexus-footer-modal__secondary:disabled {
  border-color: rgba(71, 85, 105, 0.5);
  color: #64748b;
  background: rgba(30, 41, 59, 0.6);
  cursor: not-allowed;
  pointer-events: none;
}

.nexus-discord-status {
  min-height: 20px;
  margin-top: 14px;
  color: #fcd34d;
  font-size: 11px;
}

.footer-column a[data-footer-action] {
  cursor: pointer;
}

.footer-column a:hover {
  transform: translateX(2px);
}

@media (max-width: 560px) {
  .nexus-footer-modal__panel { padding: 22px 16px; }
  .nexus-footer-modal__actions { grid-template-columns: 1fr; }
}

.pixel-footer {
  border-top: 4px solid rgba(251, 191, 36, 0.8);
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.96),
    rgba(2, 6, 23, 1)
  );
  box-shadow: 0 -8px 0 rgba(2, 6, 23, 0.9);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.footer-column {
  min-width: 0;
}

.footer-column h3 {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.footer-column p,
.footer-column li,
.footer-column a,
.footer-column button,
.footer-column span {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: left;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li,
.footer-column a,
.footer-column button {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-column a,
.footer-column button {
  width: fit-content;
  max-width: 100%;
}

.footer-column li > i,
.footer-column a > i,
.footer-column button > i {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  margin-top: .18rem;
  text-align: center;
}

.pixel-footer-card {
  border: 4px solid rgba(251, 191, 36, 0.55);
  box-shadow: 6px 6px 0 rgba(2, 6, 23, 1);
  background: rgba(15, 23, 42, 0.88);
}

.pixel-footer-link {
  transition: all 0.2s ease;
}

.pixel-footer-link:hover {
  color: #fbbf24;
  text-shadow: 2px 2px 0 rgba(15, 23, 42, 0.9);
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-column {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Dynamic Lucky Spin featured-card preview */
.nexus-spin-card-image { display: block; width: 100%; height: 100%; padding: 0.2rem; object-fit: contain; filter: drop-shadow(0 0 12px rgba(242, 198, 90, .28)); }
.nexus-spin-card-image { padding: 0; background: transparent; object-fit: contain; object-position: center; }
.nexus-spin-featured-label { position: relative; z-index: 1; color: #f7d777; font-size: .62rem; font-weight: 950; letter-spacing: .16em; }
.nexus-spin-featured-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .6rem; margin: .55rem 0; color: #fcd875; font-size: .62rem; font-weight: 800; }
.nexus-spin-featured-stats span { padding: .22rem .35rem; border: 1px solid rgba(242,198,90,.25); border-radius: 5px; background: rgba(0,0,0,.22); }
.nexus-spin-featured-stats b { color: #fff1b1; }
.nexus-spin-segment-thumb { width: 32px; height: 43px; object-fit: cover; border: 1px solid rgba(255,228,154,.8); border-radius: 3px; box-shadow: 0 0 8px rgba(0,0,0,.65); }
.nexus-spin-result-modal { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(2, 6, 23, .78); backdrop-filter: blur(6px); }
.nexus-spin-result-modal.hidden { display: none; }
.nexus-spin-result-dialog { position: relative; box-sizing: border-box; width: min(440px, calc(100vw - 2rem)); padding: 2rem 1.5rem 1.5rem; border: 1px solid rgba(242,198,90,.55); border-radius: 16px; background: radial-gradient(circle at 50% 0, rgba(217,167,46,.2), transparent 48%), #101620; box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 35px rgba(242,198,90,.15); text-align: center; }
.nexus-spin-result-dialog h3 { margin: .65rem 0; color: #fff1b1; font-size: 1.25rem; }
.nexus-spin-result-dialog p { color: #a5b4fc; font-size: .75rem; }
.nexus-spin-result-dialog { max-height: min(90vh, 680px); max-height: min(90dvh, 680px); overflow-y: auto; overscroll-behavior: contain; }
.nexus-spin-result-card { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 1rem 0 1.1rem; }
.nexus-spin-result-card.hidden { display: none; }
.nexus-spin-result-card-image { display: block; width: min(260px, 68vw); max-width: 100%; max-height: min(45vh, 360px); height: auto; object-fit: contain; border: 2px solid #f2c65a; border-radius: 10px; background: #080d15; box-shadow: 0 14px 30px rgba(0,0,0,.58), 0 0 24px rgba(242,198,90,.28); }
.nexus-spin-result-card h4 { margin: .15rem 0 0; color: #fff1b1; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.nexus-spin-result-card-rarity { margin: 0 !important; color: #c4b5fd !important; }
.nexus-spin-result-card-rarity span { color: #94a3b8; }
.nexus-spin-result-card-rarity strong { color: #fcd875; }
.nexus-spin-result-card-details { min-height: 2.35rem; margin-top: .25rem; padding: .55rem 1rem; border: 1px solid rgba(242,198,90,.62); border-radius: 7px; color: #17130a; background: #f2c65a; font-size: .7rem; font-weight: 900; letter-spacing: .04em; cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.nexus-spin-result-card-details:hover:not(:disabled), .nexus-spin-result-card-details:focus-visible:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); outline: none; }
.nexus-spin-result-card-details:disabled { cursor: not-allowed; opacity: .45; }
.nexus-spin-card-art { cursor: pointer; transition: transform .28s ease, box-shadow .28s ease, filter .28s ease; }
.nexus-spin-card-art:hover,
.nexus-spin-card-art:focus-visible { transform: scale(1.05) translateY(-3px); box-shadow: inset 0 0 0 5px rgba(70, 23, 14, .8), inset 0 0 25px rgba(255, 214, 107, .35), 0 0 32px rgba(217, 70, 239, .55), 0 16px 30px rgba(0,0,0,.65); outline: none; }
.nexus-spin-card-art:focus-visible { outline: 2px solid #ffe49a; outline-offset: 5px; }
.nexus-spin-card-zoom-hint { position: absolute; right: .35rem; bottom: .35rem; left: .35rem; padding: .28rem .35rem; border: 1px solid rgba(255,228,154,.35); border-radius: 5px; color: #fff1b1; background: rgba(7, 10, 18, .78); font-size: .52rem; font-weight: 800; letter-spacing: .04em; opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease; }
.nexus-spin-card-art:hover .nexus-spin-card-zoom-hint,
.nexus-spin-card-art:focus-visible .nexus-spin-card-zoom-hint { opacity: 1; transform: translateY(0); }
.nexus-spin-card-lightbox { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; min-width: 0; padding: 1rem; overflow: hidden; background: rgba(2, 6, 23, .84); backdrop-filter: blur(8px); }
.nexus-spin-card-lightbox.hidden { display: none; }
.nexus-spin-card-lightbox-dialog { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; width: min(520px, 100%); max-width: 100%; max-height: 90vh; box-sizing: border-box; padding: 2rem 1.25rem 1.25rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid rgba(242,198,90,.62); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(168,85,247,.2), transparent 42%), #0d1119; box-shadow: 0 28px 90px rgba(0,0,0,.75), 0 0 38px rgba(217,70,239,.2); }
.nexus-spin-card-lightbox-dialog > .nexus-spin-how-close { position: sticky; top: .25rem; z-index: 2; align-self: flex-end; flex: 0 0 auto; width: 2rem; height: 2rem; margin: -1.6rem -.65rem -.55rem auto; border-radius: 999px; background: rgba(13, 17, 25, .9); }
.nexus-spin-card-lightbox-image { display: block; width: min(390px, 100%); max-width: 100%; max-height: min(72vh, calc(90vh - 7rem)); height: auto; box-sizing: border-box; object-fit: contain; border: 3px solid #f2c65a; border-radius: 12px; box-shadow: 0 0 28px rgba(242,198,90,.38), 0 18px 35px rgba(0,0,0,.6); }
.nexus-spin-card-lightbox-dialog h3 { margin: .8rem 0 .25rem; color: #fff1b1; font-size: 1.1rem; text-align: center; }
.nexus-spin-card-lightbox-dialog p { margin: 0; color: #c4b5fd; font-size: .72rem; text-align: center; }

/* Help Center render fallback: never leave the article pane visually blank. */
.nexus-guide-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed rgba(242, 198, 90, .36);
  border-radius: 12px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, .5);
  text-align: center;
}
.nexus-guide-empty i { color: #f2c65a; font-size: 24px; }
.nexus-guide-empty strong { color: #fff1b1; font-size: 13px; }

/* Premium Nexus Lucky Spin presentation layer. The wheel geometry and server
   result mapping remain unchanged; these rules only add depth and hierarchy. */
.nexus-spin-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.1rem, 3vw, 2.5rem);
  border: 1px solid rgba(242, 198, 90, .55);
  background:
    radial-gradient(circle at 12% 12%, rgba(34, 211, 238, .12), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(124, 58, 237, .17), transparent 30%),
    linear-gradient(145deg, #07111f 0%, #0a1020 54%, #140e1b 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.44), 0 0 48px rgba(242,198,90,.11);
  scroll-margin-top: 100px;
}
.nexus-spin-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .18;
  background: repeating-radial-gradient(ellipse at 50% 0, transparent 0 34px, rgba(148,163,184,.12) 35px 36px, transparent 37px 78px);
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  pointer-events: none;
}
.nexus-spin-heading,
.nexus-spin-layout { position: relative; z-index: 1; }
.nexus-spin-heading { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.nexus-spin-heading h2 {
  color: #fff1b1;
  letter-spacing: .065em;
  text-shadow: 0 0 18px rgba(242,198,90,.32), 0 3px 0 rgba(74,42,8,.7);
}
.nexus-spin-heading h2::after {
  display: block;
  width: min(420px, 72%);
  height: 2px;
  margin: .7rem auto 0;
  content: "";
  background: linear-gradient(90deg, transparent, #f2c65a, #fff1b1, #f2c65a, transparent);
  box-shadow: 0 0 12px rgba(242,198,90,.48);
}
.nexus-spin-heading p { color: #cbd5e1; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.nexus-spin-layout { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.nexus-spin-stage {
  position: relative;
  min-height: 0;
  padding: clamp(1rem, 2vw, 2rem);
  border: 1px solid rgba(242,198,90,.38);
  background: radial-gradient(circle at 50% 40%, rgba(30,64,175,.18), transparent 48%), linear-gradient(145deg, rgba(4,12,27,.92), rgba(10,18,31,.74));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), inset 0 0 48px rgba(30,64,175,.14), 0 20px 45px rgba(0,0,0,.3);
}
.nexus-spin-stage::before {
  position: absolute;
  inset: 10px;
  content: "";
  border: 1px solid rgba(255,228,154,.17);
  pointer-events: none;
  box-shadow: inset 0 0 22px rgba(34,211,238,.06);
}
.nexus-spin-wheel-shell { width: min(520px, 90vw); filter: drop-shadow(0 28px 32px rgba(0,0,0,.5)); }
.nexus-spin-wheel-shell::after {
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(125,211,252,.28);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  box-shadow: 0 0 30px rgba(37,99,235,.18);
}
.nexus-spin-wheel {
  border: 12px solid transparent;
  background:
    conic-gradient(from -22.5deg, #16734b 0 12.5%, #8a5b0a 12.5% 25%, #123f76 25% 37.5%, #2259a0 37.5% 50%, #075b72 50% 62.5%, #8f243d 62.5% 75%, #0e6867 75% 87.5%, #5b2a91 87.5% 100%) padding-box,
    linear-gradient(145deg, #fff1b1, #9b691c 22%, #f8d36b 48%, #5a350d 72%, #ffeaa0) border-box;
  box-shadow: 0 0 0 5px rgba(30,20,7,.9), 0 0 0 8px rgba(242,198,90,.18), 0 0 44px rgba(37,99,235,.25), 0 0 70px rgba(242,198,90,.18);
}
.nexus-spin-wheel::before { inset: 6%; border-width: 2px; box-shadow: inset 0 0 0 8px rgba(0,0,0,.26), 0 0 22px rgba(41,182,246,.3); }
.nexus-spin-wheel::after {
  position: absolute;
  inset: 2.2%;
  z-index: 3;
  border: 1px solid rgba(255,241,187,.32);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.32);
}
.nexus-spin-wheel-bezel { opacity: .62; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.24) 0 1deg, transparent 1deg 11.25deg); }
.nexus-spin-segment span { width: 100px; padding: .5rem .35rem; color: #fff9df; text-shadow: 0 2px 5px rgba(0,0,0,.92), 0 0 12px rgba(255,228,154,.32); }
.nexus-spin-segment i { color: #ffe49a; font-size: 1.05rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.nexus-spin-segment b { font-size: .66rem; letter-spacing: .04em; }
.nexus-spin-wheel-core {
  inset: 34%;
  border: 4px solid #f2c65a;
  background: radial-gradient(circle at 35% 25%, #7dd3fc 0, #2563eb 19%, #0b1b49 54%, #050b1b 100%);
  box-shadow: inset 0 0 0 5px #132b67, inset 0 0 16px rgba(125,211,252,.75), 0 0 0 5px rgba(242,198,90,.2), 0 0 34px rgba(37,99,235,.7), 0 0 26px rgba(242,198,90,.42);
}
.nexus-spin-wheel-core::before {
  position: absolute;
  inset: -15%;
  border: 1px solid rgba(125,211,252,.52);
  border-radius: 50%;
  content: "";
  background: repeating-conic-gradient(from 12deg, rgba(125,211,252,.45) 0 2deg, transparent 2deg 30deg);
  animation: nexusRuneSpin 18s linear infinite;
  pointer-events: none;
}
.nexus-spin-wheel-core i, .nexus-spin-wheel-core strong, .nexus-spin-wheel-core span { position: relative; z-index: 1; }
.nexus-spin-pointer { top: -1.7rem; width: 48px; height: 62px; filter: drop-shadow(0 7px 10px rgba(0,0,0,.7)); }
.nexus-spin-pointer::before { border-width: 0 24px 40px; border-bottom-color: #fff1b1; filter: drop-shadow(0 0 10px rgba(242,198,90,.72)); }
.nexus-spin-pointer span { top: 7px; width: 13px; height: 22px; background: #2563eb; box-shadow: inset 0 0 0 2px #93c5fd, 0 0 12px #38bdf8; }
.nexus-spin-button {
  min-width: 250px;
  padding: 1rem 2rem;
  border: 1px solid #fff1b1;
  border-radius: 999px;
  color: #261607;
  background: linear-gradient(180deg, #fff1b1 0, #f2c65a 42%, #a56b19 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 4px rgba(99,61,9,.5), 0 0 24px rgba(242,198,90,.34), 0 10px 24px rgba(0,0,0,.42);
  letter-spacing: .16em;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.nexus-spin-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 4px rgba(99,61,9,.5), 0 0 34px rgba(242,198,90,.62), 0 14px 30px rgba(0,0,0,.48); }
.nexus-spin-exchange {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(420px, 100%);
  margin-top: 1rem;
  padding: 10px 12px;
  border: 1px solid rgba(103, 232, 249, .28);
  border-radius: 10px;
  background: rgba(8, 18, 32, .72);
  box-shadow: inset 0 0 18px rgba(34, 211, 238, .05);
}
.nexus-reward-formula {
  margin: -8px 0 18px;
  color: #67e8f9;
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: .02em;
}
.nexus-spin-exchange > div { display: grid; min-width: 0; gap: 3px; }
.nexus-spin-exchange strong { color: #f3c969; font-size: .72rem; letter-spacing: .04em; }
.nexus-spin-exchange span { color: #94a3b8; font-size: .62rem; line-height: 1.35; }
.nexus-spin-exchange button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(103, 232, 249, .52);
  border-radius: 8px;
  color: #dffaff;
  background: rgba(8, 145, 178, .2);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .06em;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nexus-spin-exchange button:hover:not(:disabled),
.nexus-spin-exchange button:focus-visible { transform: translateY(-1px); border-color: #67e8f9; background: rgba(8, 145, 178, .38); outline: none; }
.nexus-spin-exchange button:disabled { cursor: not-allowed; opacity: .55; }
.nexus-spin-exclusive {
  border: 1px solid #d7a932;
  background: radial-gradient(circle at 50% 31%, rgba(168,85,247,.24), transparent 28%), radial-gradient(circle at 50% 60%, rgba(34,211,238,.12), transparent 38%), linear-gradient(145deg, #171421, #090f1c 60%, #21130f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 38px rgba(168,85,247,.1), 0 24px 48px rgba(0,0,0,.45), 0 0 30px rgba(242,198,90,.12);
}
.nexus-spin-exclusive::after {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,241,187,.15);
  border-radius: 11px;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.08) 50%, transparent 58%) 140% 0 / 220% 100% no-repeat;
  animation: nexusFeaturedShimmer 9s ease-in-out infinite;
}
.nexus-spin-card-stage { background: radial-gradient(circle, rgba(242,198,90,.3), transparent 20%), radial-gradient(circle, rgba(124,58,237,.35), transparent 54%), transparent; }
.nexus-spin-card-art { box-shadow: inset 0 0 0 3px rgba(84,45,12,.82), inset 0 0 28px rgba(255,214,107,.35), 0 0 25px rgba(168,85,247,.55), 0 18px 30px rgba(0,0,0,.65); animation: nexusCardPulse 4.5s ease-in-out infinite; }
.nexus-spin-card-art:hover, .nexus-spin-card-art:focus-visible { animation-play-state: paused; }
.nexus-spin-exclusive h3 { font-size: clamp(1.05rem, 2vw, 1.4rem); text-shadow: 0 0 14px rgba(242,198,90,.24); }
.nexus-spin-exclusive-rarity { color: #ffe49a; }
.nexus-spin-exclusive-meta { border-color: rgba(242,198,90,.38); background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(88,28,135,.14), rgba(0,0,0,.32)); box-shadow: inset 0 0 16px rgba(242,198,90,.06); }
.nexus-spin-disclaimer { color: #94a3b8; }
@keyframes nexusRuneSpin { to { transform: rotate(360deg); } }
@keyframes nexusFeaturedShimmer { 0%, 65% { background-position: 140% 0; } 82%, 100% { background-position: -40% 0; } }
@keyframes nexusCardPulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(168,85,247,.42)); } 50% { filter: drop-shadow(0 0 18px rgba(242,198,90,.5)); } }
@media (max-width: 900px) {
  .nexus-spin-stage { min-height: 0; }
  .nexus-spin-exclusive { width: min(560px, 100%); max-height: none; margin: 0 auto; }
  .nexus-spin-card-stage { min-height: min(38vw, 310px); }
  .nexus-spin-card-art { width: min(220px, 38vw); max-height: none; }
}
@media (max-width: 640px) {
  .nexus-spin-section { padding: 1rem .75rem; }
  .nexus-spin-stage { padding: 1rem .5rem; }
  .nexus-spin-wheel-shell { width: min(350px, 88vw); }
  .nexus-spin-card-art { width: min(70vw, 260px); height: auto; }
  .nexus-spin-segment span { width: 64px; }
  .nexus-spin-segment b { font-size: .5rem; }
  .nexus-spin-button { min-width: min(250px, 82vw); }
  .nexus-spin-exchange { align-items: stretch; flex-direction: column; width: min(320px, 92vw); }
  .nexus-spin-exchange button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nexus-spin-wheel-core::before, .nexus-spin-exclusive::after, .nexus-spin-card-art { animation: none; }
  .nexus-spin-button, .nexus-spin-card-art { transition: none; }
}
.favorite-heart-button{position:absolute;left:10px;top:10px;z-index:4;width:34px;height:34px;border:1px solid rgba(148,163,184,.45);border-radius:999px;background:rgba(2,6,23,.8);color:#cbd5e1;font-size:22px;line-height:1;cursor:pointer;transition:transform .2s ease,color .2s ease,border-color .2s ease}.favorite-heart-button:hover,.favorite-heart-button:focus-visible{transform:scale(1.08);border-color:#fb7185;color:#fb7185;outline:none}.favorite-heart-button.is-favorite{color:#fb334f;border-color:#fb334f;animation:favorite-heart-pulse .2s ease}.favorite-heart-button--compact{position:static;width:30px;height:30px;font-size:20px}@keyframes favorite-heart-pulse{50%{transform:scale(1.18)}}
.wishlist-card{display:flex;gap:16px;padding:14px;border:1px solid rgba(34,211,238,.25);border-radius:12px;background:rgba(15,23,42,.72)}.wishlist-card>img{width:84px;height:118px;object-fit:cover;border-radius:7px}.wishlist-card__body{min-width:0;flex:1}.wishlist-card__body h3{margin:0;color:#fff;font-weight:800}.wishlist-card__body p{margin:5px 0;color:#94a3b8;font-size:12px}.wishlist-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.favorite-reminder-toast{position:fixed;left:12px;top:12px;z-index:var(--nexus-layer-floating,300);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;width:min(380px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:min(180px,calc(100vh - 24px));padding:10px 12px;border:1px solid rgba(251,113,133,.58);border-radius:12px;background:rgba(15,23,42,.97);color:#ffe4e6;box-shadow:0 12px 35px rgba(0,0,0,.45),0 0 18px rgba(251,113,133,.13);font-size:12px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 140ms ease,transform 140ms ease,visibility 140ms ease;overflow:auto}.favorite-reminder-toast.is-positioned{opacity:1;visibility:visible;transform:translateY(0)}.favorite-reminder-toast.is-above{transform:translateY(4px)}.favorite-reminder-toast__copy{display:grid;min-width:0;gap:2px;line-height:1.3}.favorite-reminder-toast__copy strong,.favorite-reminder-toast__copy small{overflow-wrap:anywhere}.favorite-reminder-toast__copy strong{color:#fff;font-size:12px}.favorite-reminder-toast__copy small{color:#fda4af;font-size:10px}.favorite-reminder-toast button{min-width:0;border:0;background:transparent;color:#fb7185;cursor:pointer;font-size:10px;font-weight:800;white-space:nowrap}.favorite-reminder-toast button[aria-label=Close]{padding:2px;font-size:18px;color:#94a3b8}

@media (max-width:640px){.favorite-reminder-toast{grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.favorite-reminder-toast__copy{grid-column:1 / -1}.favorite-reminder-toast button[data-reminder-action]{justify-self:start}.favorite-reminder-toast button[aria-label=Close]{justify-self:end}}

/* The existing Wishlist trigger is body-level and fixed to the viewport, so
   it stays available throughout Marketplace without depending on header or
   section layout. Its layer is below modal backdrop/content and alongside the
   AI launcher; the two controls occupy opposite viewport edges. */
#wishlist-nav-button {
  position: fixed !important;
  top: max(88px, env(safe-area-inset-top) + 72px);
  right: clamp(20px, 2vw, 24px);
  z-index: var(--nexus-layer-floating, 300);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 42px;
  padding: 0 12px !important;
  border: 1px solid rgba(230, 184, 74, .68) !important;
  border-radius: 3px !important;
  color: #ffe4a3 !important;
  background: linear-gradient(135deg, rgba(15, 20, 32, .98), rgba(41, 25, 49, .96)) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 15px rgba(146, 112, 188, .13) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, visibility .2s ease;
}
#wishlist-nav-button:hover,
#wishlist-nav-button:focus-visible {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(255, 226, 157, .98) !important;
  color: #fff1bf !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .42), 0 0 20px rgba(146, 112, 188, .22), 0 0 10px rgba(230, 184, 74, .2) !important;
  outline: none;
}
#wishlist-nav-button > span:first-child { display: inline-grid; width: 1.05rem; place-items: center; color: #f0ce82; font-size: 1.05rem; line-height: 1; }
#wishlist-nav-button > span:nth-child(2) { letter-spacing: .035em; }
#wishlist-nav-button #wishlist-count {
  top: -7px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border: 2px solid #111722;
  background: #d94868 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(217, 72, 104, .48);
}
@media (max-width: 900px) {
  #wishlist-nav-button { top: max(78px, env(safe-area-inset-top) + 64px); right: 16px; }
}
@media (max-width: 640px) {
  #wishlist-nav-button {
    top: max(70px, env(safe-area-inset-top) + 58px);
    right: 12px;
    min-width: 42px;
    min-height: 40px;
    width: 42px;
    padding: 0 !important;
    border-radius: 3px !important;
  }
  #wishlist-nav-button > span:nth-child(2) { display: none !important; }
}

/* Mystery Pack reward reveal: cinematic vault treatment. */
#pack-result-modal {
  padding: clamp(12px, 2.5vw, 34px) !important;
  overflow: auto;
  background: rgba(3, 5, 18, .88) !important;
}
#modal-root > #pack-result-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pack-result-modal.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

#pack-result-modal.hidden .pack-result-shell::before,
#pack-result-modal.hidden .pack-result-shell::after,
#pack-result-modal.hidden .pack-reveal-aurora {
  display: none !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
#pack-result-modal .pack-result-shell {
  position: relative;
  width: min(1450px, 94vw);
  max-height: 90vh;
  overflow: auto;
  isolation: isolate;
  border: 1px solid rgba(238, 190, 92, .72);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -10%, rgba(177, 91, 255, .26), transparent 36%),
    radial-gradient(circle at 50% 62%, rgba(32, 108, 190, .13), transparent 43%),
    linear-gradient(145deg, #090a1a 0%, #111329 46%, #080b18 100%);
  box-shadow:
    0 0 0 1px rgba(196, 117, 255, .22),
    0 24px 90px rgba(0, 0, 0, .7),
    0 0 70px rgba(136, 62, 226, .18);
  animation: packResultModalIn 360ms cubic-bezier(.18, .8, .22, 1) both;
}
#pack-result-modal .pack-result-shell::before,
#pack-result-modal .pack-result-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
#pack-result-modal .pack-result-shell::before {
  inset: 10px;
  border: 1px solid rgba(230, 184, 74, .2);
  border-radius: 16px;
}
#pack-result-modal .pack-result-shell::after {
  width: 46vw;
  height: 28vw;
  max-width: 650px;
  max-height: 380px;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(185, 95, 255, .2), transparent 68%);
  filter: blur(24px);
}
#pack-result-modal .pack-reveal-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  pointer-events: none;
  opacity: .08;
  background:
    repeating-radial-gradient(circle at 50% 44%, transparent 0 64px, rgba(160, 93, 238, .055) 65px 66px, transparent 67px 120px);
  filter: none;
  mix-blend-mode: normal;
}
#pack-result-modal .pack-result-content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 3vw, 48px);
}
#pack-result-modal .pack-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-right: 46px;
}
#pack-result-modal .pack-result-eyebrow {
  display: block;
  color: #c8a7ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}
#pack-result-modal .pack-result-title {
  margin: 6px 0 0;
  color: #fff0c4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: .035em;
  text-shadow: 0 0 22px rgba(255, 211, 118, .22);
}
#pack-result-modal .pack-result-subtitle {
  margin: 10px 0 0;
  color: #a9e8ff;
  font-size: clamp(.8rem, 1.3vw, 1rem);
}
#pack-result-modal .pack-result-subtitle strong {
  color: #ed8eff;
  font-weight: 900;
}
#pack-result-modal .pack-result-close,
#pack-result-modal .pack-skip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#pack-result-modal .pack-result-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(203, 142, 255, .72);
  border-radius: 50%;
  color: #e2b2ff;
  background: rgba(20, 11, 45, .82);
  font-size: 20px;
}
#pack-result-modal .pack-result-close:hover,
#pack-result-modal .pack-result-close:focus-visible {
  transform: rotate(8deg) scale(1.06);
  border-color: #ffe28a;
  color: #ffe28a;
  box-shadow: 0 0 18px rgba(190, 93, 255, .35);
  outline: none;
}
#pack-result-modal .pack-skip-button {
  flex: 0 0 auto;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(159, 122, 255, .72);
  border-radius: 10px;
  color: #eee5ff;
  background: linear-gradient(135deg, rgba(55, 31, 113, .7), rgba(21, 29, 69, .82));
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#pack-result-modal .pack-skip-button::before {
  content: "▶";
  font-size: 9px;
}
#pack-result-modal .pack-skip-button:hover,
#pack-result-modal .pack-skip-button:focus-visible {
  transform: translateY(-2px);
  border-color: #ffe28a;
  background: linear-gradient(135deg, rgba(113, 59, 182, .86), rgba(42, 39, 92, .92));
  box-shadow: 0 0 20px rgba(159, 122, 255, .24);
  outline: none;
}
#pack-result-modal .pack-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 26px;
  padding: 13px 16px;
  border-top: 1px solid rgba(168, 119, 239, .26);
  border-bottom: 1px solid rgba(168, 119, 239, .26);
  color: #d7d9f0;
  font-size: 12px;
}
#pack-result-modal .pack-result-summary__status,
#pack-result-modal .pack-result-summary__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
#pack-result-modal .pack-result-summary__status strong { color: #f0abfc; }
#pack-result-modal .pack-result-summary__meta {
  color: #c9baff;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#pack-result-modal .pack-result-points {
  color: #ffe29a;
  font-weight: 900;
}
#pack-result-modal .pack-result-points i { color: #d9a8ff; }
#pack-result-modal .pack-result-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  align-items: stretch;
}
#pack-result-modal .pack-reveal-card {
  min-width: 0;
  min-height: 0;
  height: clamp(330px, 36vh, 455px);
  perspective: 1400px;
  animation: packCardEnter 600ms cubic-bezier(.18, .8, .22, 1) both;
}
#pack-result-modal .pack-reveal-card__inner {
  height: 100%;
  min-height: 0;
}
#pack-result-modal .pack-reveal-card__face {
  border: 1px solid rgba(208, 174, 255, .56);
  border-radius: 14px;
}
#pack-result-modal .pack-reveal-card__face--front {
  background: linear-gradient(180deg, rgba(9, 13, 33, .96), rgba(14, 10, 30, .98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 14px 30px rgba(0, 0, 0, .42);
}
#pack-result-modal .pack-reveal-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.69;
  flex: 1 1 auto;
  min-height: 0;
  padding: 9px;
  object-fit: contain;
  background: radial-gradient(circle at 50% 40%, rgba(70, 96, 178, .22), rgba(4, 8, 22, .94) 72%);
}
#pack-result-modal .pack-reveal-card__image--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: .69;
  padding: 0;
  color: #e4caff;
  font-size: 42px;
  background: radial-gradient(circle, rgba(100, 48, 151, .5), rgba(8, 10, 26, .96) 70%);
}
#pack-result-modal .pack-reveal-card__meta {
  flex: 0 0 auto;
  min-height: 86px;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(22, 12, 48, .35), rgba(7, 8, 20, .98));
}
#pack-result-modal .pack-reveal-card__rarity {
  margin: 0;
  padding: 4px 9px;
  border: 1px solid currentColor !important;
  border-radius: 999px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .13em;
  box-shadow: 0 0 12px currentColor;
}
#pack-result-modal .pack-reveal-card__meta strong {
  display: -webkit-box;
  min-height: 31px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(10px, .85vw, 13px);
  line-height: 1.2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#pack-result-modal .pack-reveal-card__price {
  color: #f6d98a;
  font-size: 10px;
  font-weight: 800;
}
#pack-result-modal .pack-reveal-card__price-label {
  color: #7f8bad;
  font-weight: 500;
}
#pack-result-modal .pack-reveal-card--common .pack-reveal-card__face--front {
  border-color: rgba(148, 163, 184, .55);
  box-shadow: inset 0 0 24px rgba(148, 163, 184, .08), 0 14px 30px rgba(0, 0, 0, .38);
}
#pack-result-modal .pack-reveal-card--common .pack-reveal-card__rarity {
  color: #cbd5e1 !important;
  box-shadow: 0 0 8px rgba(203, 213, 225, .14);
}
#pack-result-modal .pack-reveal-card--rare .pack-reveal-card__face--front {
  border-color: rgba(69, 205, 255, .8);
  background: linear-gradient(145deg, rgba(18, 53, 92, .64), rgba(5, 15, 35, .98));
}
#pack-result-modal .pack-reveal-card--rare .pack-reveal-card__rarity {
  color: #7dd3fc !important;
  box-shadow: 0 0 13px rgba(34, 211, 238, .3);
}
#pack-result-modal .pack-reveal-card--secret .pack-reveal-card__face--front {
  border-color: rgba(255, 205, 105, .86);
  background: linear-gradient(145deg, rgba(86, 50, 17, .72), rgba(24, 13, 30, .98));
}
#pack-result-modal .pack-reveal-card--secret .pack-reveal-card__rarity {
  color: #ffd166 !important;
  box-shadow: 0 0 15px rgba(255, 209, 102, .42);
}
#pack-result-modal .pack-reveal-card--ultra .pack-reveal-card__face--front {
  border-color: rgba(203, 139, 255, .96);
  background: linear-gradient(145deg, rgba(58, 26, 107, .78), rgba(12, 22, 62, .98));
  box-shadow: inset 0 0 26px rgba(168, 85, 247, .18), 0 0 22px rgba(139, 92, 246, .3), 0 16px 34px rgba(0, 0, 0, .48);
}
#pack-result-modal .pack-reveal-card--ultra .pack-reveal-card__rarity {
  color: #e0b4ff !important;
  box-shadow: 0 0 18px rgba(192, 132, 252, .52);
}
#pack-result-modal .pack-reveal-card:not(.is-revealed):hover,
#pack-result-modal .pack-reveal-card:not(.is-revealed):focus-visible,
#pack-result-modal .pack-reveal-card.is-revealed:hover,
#pack-result-modal .pack-reveal-card.is-revealed:focus-visible {
  transform: translateY(-6px) scale(1.015);
}
#pack-result-modal .pack-reveal-card.is-revealing {
  filter: saturate(1.2) brightness(1.12);
}
#pack-result-modal .pack-reveal-card.is-rare-reveal .pack-reveal-card__face--front {
  animation: packRareFrameFlash 900ms ease both;
}
#pack-result-modal .pack-reveal-card.is-revealed { cursor: pointer; }

@keyframes packRareFrameFlash {
  0%, 100% { filter: brightness(1); }
  32% { filter: brightness(1.55) saturate(1.28); }
}
@keyframes packResultModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1240px) {
  #pack-result-modal .pack-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  #pack-result-modal .pack-result-shell { width: min(94vw, 720px); }
  #pack-result-modal .pack-result-content { padding: 24px 20px 26px; }
  #pack-result-modal .pack-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pack-result-modal .pack-reveal-card { height: 360px; }
  #pack-result-modal .pack-result-summary { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  #pack-result-modal { padding: 8px !important; }
  #pack-result-modal .pack-result-shell { width: 100%; max-height: 94vh; border-radius: 16px; }
  #pack-result-modal .pack-result-content { padding: 22px 14px 18px; }
  #pack-result-modal .pack-result-heading { gap: 12px; padding-right: 36px; }
  #pack-result-modal .pack-result-title { font-size: 1.65rem; }
  #pack-result-modal .pack-result-subtitle { font-size: .75rem; }
  #pack-result-modal .pack-result-close { top: 14px; right: 14px; width: 34px; height: 34px; font-size: 16px; }
  #pack-result-modal .pack-skip-button { min-height: 36px; padding: 0 10px; font-size: 8px; }
  #pack-result-modal .pack-result-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #pack-result-modal .pack-reveal-card { height: 300px; }
  #pack-result-modal .pack-reveal-card__meta { min-height: 76px; padding: 8px; }
  #pack-result-modal .pack-reveal-card__image { padding: 5px; }
}
@media (max-width: 360px) {
  #pack-result-modal .pack-result-grid { grid-template-columns: 1fr; }
  #pack-result-modal .pack-reveal-card { height: 390px; }
}
@media (prefers-reduced-motion: reduce) {
  #pack-result-modal .pack-result-shell,
  #pack-result-modal .pack-reveal-card,
  #pack-result-modal .pack-reveal-card__inner,
  #pack-result-modal .pack-reveal-card__face--front,
  #pack-result-modal .pack-result-close,
  #pack-result-modal .pack-skip-button { animation: none !important; transition: none !important; }
}

/* Final interaction overrides: hover never reveals a Mystery Pack card. */
#pack-result-modal .pack-reveal-card { cursor: default; }
#pack-result-modal .pack-reveal-card.is-revealed { cursor: pointer; }
#pack-result-modal .pack-reveal-card:hover { transform: translateY(-4px) scale(1.015); }

@media (max-width: 1199px) {
  #mystery-pack-panel .mystery-pack-layout { grid-template-columns: 1fr; }
  #mystery-pack-panel .mystery-pack-received-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #mystery-pack-panel .pack-card-shell { grid-template-columns: 1fr; }
  #mystery-pack-panel .pack-card-visual { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(230, 184, 74, 0.2); }
  #mystery-pack-panel .mystery-pack-received-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  #mystery-pack-panel .pack-stat-grid,
  #mystery-pack-panel .pack-balance-row { grid-template-columns: 1fr; }
  #mystery-pack-panel .pack-offer-heading { flex-direction: column; }
}

/* Storage/cart cards: compact, even grid for cards received from rewards. */
#cart-modal #cart-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
  gap: 12px;
}

#cart-modal .storage-card-item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(142, 152, 168, 0.2);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(16, 22, 32, 0.98), rgba(9, 13, 20, 0.98));
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#cart-modal .storage-card-item:hover,
#cart-modal .storage-card-item:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(230, 184, 74, 0.56);
  outline: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 16px rgba(230, 184, 74, 0.08);
}

#cart-modal .storage-card-media {
  display: grid;
  aspect-ratio: 5 / 7;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  border-bottom: 1px solid rgba(142, 152, 168, 0.16);
  background: radial-gradient(circle at 50% 20%, rgba(168, 136, 216, 0.12), transparent 56%), #090d14;
}

#cart-modal .storage-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 6px;
}

#cart-modal .storage-card-content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
}

#cart-modal .storage-card-heading {
  display: grid;
  min-width: 0;
  gap: 5px;
}

#cart-modal .storage-card-heading h5 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #f4f4f1;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cart-modal .storage-card-rarity {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  border: 1px solid rgba(230, 184, 74, 0.3);
  border-radius: 999px;
  color: var(--nv-gold-light, #f3c969);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cart-modal .storage-card-price {
  margin: 0;
  color: var(--nv-gold-light, #f3c969);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
}

#cart-modal .storage-card-source {
  min-height: 17px;
}

#cart-modal .storage-card-source > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cart-modal .storage-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 3px;
}

#cart-modal .storage-card-controls button {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(142, 152, 168, 0.24);
  border-radius: 6px;
  background: #151c28;
}

#cart-modal .storage-card-controls span {
  min-width: 20px;
  text-align: center;
}

#cart-modal .storage-card-item > button:last-child {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border-radius: 6px;
  background: rgba(5, 8, 14, 0.68);
}

@media (max-width: 520px) {
  #cart-modal #cart-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #cart-modal .storage-card-content { padding: 9px; }
  #cart-modal .storage-card-media { padding: 6px; }
}

@media (max-width: 370px) {
  #cart-modal #cart-items { grid-template-columns: 1fr; }
}

/* Checkout modal: centered, spacious on desktop, internally scrollable. */
#cart-modal.checkout-modal-overlay {
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 28px);
}

#cart-modal .checkout-modal-shell {
  display: grid !important;
  width: min(90vw, 1180px) !important;
  height: min(90vh, 820px);
  max-height: 90vh;
  grid-template-areas: "form summary";
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 0;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(230, 184, 74, 0.34) !important;
  border-radius: 18px !important;
  background: #0d121a !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#cart-modal .checkout-modal-form,
#cart-modal .checkout-modal-summary {
  min-width: 0;
  min-height: 0;
}

#cart-modal .checkout-modal-form {
  grid-area: form;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 34px);
  border: 0;
  scrollbar-color: rgba(230, 184, 74, 0.55) rgba(5, 8, 14, 0.65);
  scrollbar-width: thin;
}

#cart-modal .checkout-modal-summary {
  display: flex;
  grid-area: summary;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(20px, 2.5vw, 30px);
  border-left: 1px solid rgba(230, 184, 74, 0.2);
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 136, 216, 0.12), transparent 38%),
    linear-gradient(160deg, #111722, #090d14);
}

#cart-modal .checkout-modal-summary > div:first-child {
  flex: 0 0 auto;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom-color: rgba(230, 184, 74, 0.2) !important;
}

#cart-modal .checkout-modal-summary > div:first-child h3 {
  color: #fff8df !important;
  font-size: 0.9rem;
}

#cart-modal #cart-items-container {
  display: flex;
  min-height: 0;
  max-height: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: rgba(230, 184, 74, 0.55) rgba(5, 8, 14, 0.65);
  scrollbar-width: thin;
}

#cart-modal #cart-items {
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

#cart-modal .checkout-modal-form .checkout-shipping-fields {
  max-height: none;
  overflow: visible;
}

#cart-modal .checkout-modal-form .checkout-field input,
#cart-modal .checkout-modal-form .checkout-field select,
#cart-modal .checkout-modal-form .checkout-field textarea,
#cart-modal .checkout-modal-form #payment-method,
#cart-modal .checkout-modal-form #checkout-coupon {
  min-height: 40px;
}

#cart-modal .checkout-modal-form #checkout-note { min-height: 72px; }

@media (max-width: 960px) {
  #cart-modal .checkout-modal-shell {
    width: min(94vw, 900px) !important;
    height: 92vh;
    max-height: 92vh;
    grid-template-areas:
      "form"
      "summary";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(230px, 38vh);
  }

  #cart-modal .checkout-modal-summary {
    min-height: 0;
    border-top: 1px solid rgba(230, 184, 74, 0.2);
    border-left: 0;
  }

  #cart-modal .checkout-modal-form { padding: 20px; }
  #cart-modal .checkout-modal-summary { padding: 16px 20px 20px; }
}

@media (max-width: 520px) {
  #cart-modal.checkout-modal-overlay { padding: 8px; }

  #cart-modal .checkout-modal-shell {
    width: 100% !important;
    height: 94vh;
    max-height: 94vh;
    border-radius: 14px !important;
    grid-template-rows: minmax(0, 1fr) minmax(210px, 36vh);
  }

  #cart-modal .checkout-modal-form { padding: 16px; }
  #cart-modal .checkout-modal-summary { padding: 14px 16px 16px; }
  #cart-modal #cart-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#cart-modal .checkout-modal-form > div:has(#cart-total),
#cart-modal .checkout-modal-form > button[onclick="checkout()"] {
  display: none !important;
}

#cart-modal .checkout-summary-footer {
  flex: 0 0 auto;
  margin-top: 14px;
  border-top-color: rgba(230, 184, 74, 0.2) !important;
}

#cart-modal .checkout-summary-footer #cart-total-summary {
  color: var(--nv-gold-light, #f3c969) !important;
}

#cart-modal .checkout-summary-breakdown {
  display: grid;
  gap: 7px;
  padding-bottom: 2px;
  color: #aab6c8;
  font-size: 0.7rem;
}

#cart-modal .checkout-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#cart-modal .checkout-summary-line strong { color: #e8edf6; font-weight: 800; }
#cart-modal .checkout-summary-line--discount strong { color: #9be7b8; }
#cart-modal .storage-card-line-total { margin: -2px 0 0; color: #aab6c8; font-size: 0.62rem; line-height: 1.2; }

/* Checkout layout correction: keep the form readable and the order compact. */
#cart-modal .checkout-modal-shell {
  width: min(92vw, 1480px) !important;
  max-width: 1480px !important;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

#cart-modal .checkout-modal-form {
  min-width: 0;
  overflow-x: hidden;
  padding: clamp(22px, 3vw, 38px);
}

#cart-modal .checkout-modal-form .checkout-shipping-fields,
#cart-modal .checkout-modal-form .checkout-shipping-fields > *,
#cart-modal .checkout-modal-form .checkout-field {
  min-width: 0;
}

#cart-modal .checkout-modal-form .checkout-field > span {
  min-height: 1.1em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#cart-modal .checkout-modal-form .checkout-field input,
#cart-modal .checkout-modal-form .checkout-field select,
#cart-modal .checkout-modal-form .checkout-field textarea {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
}

#cart-modal .checkout-modal-form .checkout-shipping-fields > .grid {
  min-width: 0;
  align-items: start;
}

#cart-modal .checkout-modal-summary #cart-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#cart-modal .checkout-modal-summary .storage-card-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 74px;
  padding: 8px;
  border-radius: 10px;
}

#cart-modal .checkout-modal-summary .storage-card-media {
  width: 54px;
  height: 72px;
  aspect-ratio: auto;
  padding: 4px;
  border-right: 1px solid rgba(142, 152, 168, 0.16);
  border-bottom: 0;
}

#cart-modal .checkout-modal-summary .storage-card-content {
  grid-column: 2;
  min-width: 0;
  gap: 4px;
  padding: 0 8px;
}

#cart-modal .checkout-modal-summary .storage-card-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

#cart-modal .checkout-modal-summary .storage-card-heading h5 {
  flex: 1;
  min-width: 0;
}

#cart-modal .checkout-modal-summary .storage-card-rarity {
  flex: 0 0 auto;
  max-width: 92px;
  padding: 2px 5px;
  font-size: 0.5rem;
}

#cart-modal .checkout-modal-summary .storage-card-price,
#cart-modal .checkout-modal-summary .storage-card-line-total {
  font-size: 0.64rem;
}

#cart-modal .checkout-modal-summary .storage-card-source { min-height: 0; }
#cart-modal .checkout-modal-summary .storage-card-source > span { font-size: 0.5rem; }

#cart-modal .checkout-modal-summary .storage-card-controls {
  gap: 5px;
  padding-top: 0;
}

#cart-modal .checkout-modal-summary .storage-card-controls button {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  font-size: 0.65rem;
}

#cart-modal .checkout-modal-summary .storage-card-controls span { font-size: 0.68rem; }

#cart-modal .checkout-modal-summary .storage-card-item > button:last-child {
  position: static;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  margin-left: 2px;
  padding: 3px;
}

#cart-modal .checkout-summary-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(13, 18, 26, 0.72), #0d121a 28%);
}

@media (max-width: 960px) {
  #cart-modal .checkout-modal-shell { width: min(94vw, 900px) !important; }
  #cart-modal .checkout-modal-form { padding: 20px; }
}

@media (max-width: 520px) {
  #cart-modal .checkout-modal-shell { width: 100% !important; }
  #cart-modal .checkout-modal-form { padding: 16px; }
  #cart-modal .checkout-modal-summary { padding: 14px 16px 16px; }
  #cart-modal .checkout-modal-summary .storage-card-item { grid-template-columns: 50px minmax(0, 1fr) auto; min-height: 70px; }
  #cart-modal .checkout-modal-summary .storage-card-media { width: 50px; height: 68px; }
  #cart-modal .checkout-modal-summary .storage-card-rarity { max-width: 78px; }
}

/* Main-page Mystery Pack history is a compact preview, separate from the
   full-size reveal cards rendered inside #pack-result-modal. */
#mystery-pack-panel .mystery-pack-latest {
  min-height: 0;
  max-height: min(640px, calc(100vh - 180px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(230, 184, 74, 0.55) rgba(5, 8, 14, 0.65);
  scrollbar-width: thin;
}

#mystery-pack-panel .mystery-pack-received-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, auto);
  gap: 8px;
  align-items: start;
}

#mystery-pack-panel .mystery-pack-received-card {
  min-height: 0;
  padding: 6px;
  overflow: hidden;
}

#mystery-pack-panel .mystery-pack-received-card__image {
  width: min(100%, 88px);
  height: clamp(92px, 8vw, 120px);
  aspect-ratio: 5 / 7;
  justify-self: center;
}

#mystery-pack-panel .mystery-pack-received-card strong {
  margin-top: 5px;
  font-size: 0.62rem;
  line-height: 1.2;
}

#mystery-pack-panel .mystery-pack-received-card > span:not(.mystery-pack-received-card__detail-link) {
  margin-top: 2px;
  font-size: 0.52rem;
}

#mystery-pack-panel .mystery-pack-received-card__detail-link {
  margin-top: 4px;
  font-size: 0.5rem;
}

#mystery-pack-panel .mystery-pack-latest__caption {
  margin-top: 10px;
  font-size: 0.62rem;
}

/* Mystery Pack reveal is click-driven. Hover/focus may style a card, but it
   must never rotate an unrevealed card or change its reveal state. */
#pack-result-modal .pack-reveal-card {
  cursor: pointer;
}

#pack-result-modal .pack-reveal-card:not(.is-revealed):hover,
#pack-result-modal .pack-reveal-card:not(.is-revealed):focus-visible {
  transform: translateY(-4px) scale(1.015);
}

#pack-result-modal .pack-reveal-card:hover,
#pack-result-modal .pack-reveal-card:focus-visible {
  transform: translateY(-4px) scale(1.015);
}

#pack-result-modal .pack-reveal-card__inner {
  transition-duration: 760ms;
}

#pack-result-modal .pack-reveal-card.is-revealing {
  pointer-events: none;
}

/* Mystery Pack cards show the supplied card back until that individual card
   is clicked. The old decorative layers stay in the markup for compatibility
   but are hidden so they cannot cover the asset. */
#pack-result-modal .pack-reveal-card__face--back {
  padding: 0;
  background: #090b16;
}

#pack-result-modal .mystery-pack-card-back {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #090b16;
  box-shadow: inset 0 0 0 1px rgba(230, 184, 74, .55);
}

#pack-result-modal .mystery-pack-card-back__image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
}

#pack-result-modal .mystery-pack-card-back::before,
#pack-result-modal .mystery-pack-card-back::after,
#pack-result-modal .mystery-pack-card-back__ring,
#pack-result-modal .mystery-pack-card-back__center {
  display: none;
}

@media (max-width: 520px) {
  #pack-result-modal .mystery-pack-card-back__image {
    padding: 2px;
  }
}

/* Mystery Pack modal stack: Card Detail is a child surface of an active
   Pack Result modal and must always paint above it. Both selectors need
   !important because the shared modal layer intentionally normalizes z-index. */
#modal-root > #pack-result-modal {
  z-index: var(--nexus-layer-modal) !important;
}
#modal-root > #card-detail-modal.is-over-pack {
  z-index: var(--nexus-layer-modal-secondary) !important;
}

/* History and final summary are read-only. Their cards are already face-up;
   hover/focus must never rotate them back to the card back or replay reveal. */
#pack-result-modal.is-summary .pack-reveal-card,
#pack-result-modal.is-history .pack-reveal-card {
  cursor: pointer;
  animation: none !important;
}
#pack-result-modal.is-summary .pack-reveal-card__inner,
#pack-result-modal.is-history .pack-reveal-card__inner {
  transform: rotateY(180deg) !important;
  transition: none !important;
}
#pack-result-modal.is-summary .pack-reveal-card__face--front,
#pack-result-modal.is-history .pack-reveal-card__face--front {
  animation: none !important;
}

/* Final Nexus Vault Lucky Spin polish. The wheel is the only transformed
   layer; the hub is a sibling layer and therefore remains physically still. */
.nexus-spin-stage {
  height: fit-content;
  overflow: visible;
}
.nexus-spin-wheel-shell {
  position: relative;
  isolation: isolate;
  width: min(520px, 88vw);
  max-width: 100%;
  aspect-ratio: 1;
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.52));
}
.nexus-spin-wheel-shell::before {
  position: absolute;
  inset: 1.5%;
  z-index: 0;
  border: 1px solid rgba(255,241,177,.2);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  box-shadow: 0 0 0 9px rgba(4,9,18,.72), 0 0 30px rgba(34,211,238,.14), inset 0 0 24px rgba(242,198,90,.1);
}
.nexus-spin-wheel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 13px solid transparent;
  border-radius: 50%;
  transform-origin: 50% 50%;
  background:
    conic-gradient(from -22.5deg, #174f43 0 12.5%, #765115 12.5% 25%, #173d70 25% 37.5%, #24589a 37.5% 50%, #126477 50% 62.5%, #762b42 62.5% 75%, #176966 75% 87.5%, #552d84 87.5% 100%) padding-box,
    linear-gradient(145deg, #fff4bd 0, #96661c 21%, #f7d36b 45%, #5b390e 70%, #ffeaa0 100%) border-box;
  box-shadow: 0 0 0 5px rgba(18,13,6,.9), 0 0 0 8px rgba(242,198,90,.18), inset 0 0 0 2px rgba(255,255,255,.14), inset 0 0 34px rgba(0,0,0,.72), 0 0 44px rgba(37,99,235,.24), 0 0 72px rgba(242,198,90,.15);
  transition: transform 5.5s cubic-bezier(.12,.72,.15,1);
}
.nexus-spin-wheel::before { inset: 6%; z-index: 3; border: 2px solid rgba(255,241,187,.52); box-shadow: inset 0 0 0 8px rgba(0,0,0,.24), 0 0 22px rgba(41,182,246,.25); }
.nexus-spin-wheel::after { inset: 2.1%; z-index: 5; border-color: rgba(255,241,187,.3); box-shadow: inset 0 0 0 2px rgba(0,0,0,.32); }
.nexus-spin-wheel-bezel { z-index: 6; opacity: .48; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 1deg, transparent 1deg 11.25deg); }
.nexus-spin-segments { z-index: 2; background: repeating-conic-gradient(from -22.5deg, rgba(255,241,177,.48) 0 1.2deg, transparent 1.2deg calc(360deg / var(--segment-count))); }
.nexus-spin-segment { z-index: 4; padding-top: 10.5%; color: #fff9df; text-shadow: 0 2px 5px rgba(0,0,0,.94), 0 0 12px rgba(255,228,154,.25); }
.nexus-spin-segment span { width: 104px; min-height: 66px; box-sizing: border-box; padding: .5rem .35rem .4rem; border: 1px solid rgba(255,241,187,.18); border-radius: 10px; background: linear-gradient(180deg, rgba(5,12,25,.24), rgba(0,0,0,.18)); backdrop-filter: blur(2px); }
.nexus-spin-segment i { color: #ffe49a; font-size: 1.12rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.82)); }
.nexus-spin-segment b { max-width: 96px; color: #fff9df; font-size: .63rem; line-height: 1.18; letter-spacing: .035em; }
.nexus-spin-wheel-core {
  position: absolute !important;
  inset: 34% !important;
  z-index: 20 !important;
  display: flex;
  box-sizing: border-box;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
  transform: none !important;
  animation: none !important;
  border: 4px solid #f2c65a;
  background: radial-gradient(circle at 34% 23%, #79d9ef 0, #2367bc 18%, #0b1d4b 52%, #050a18 100%);
  box-shadow: inset 0 0 0 5px #122965, inset 0 0 18px rgba(125,211,252,.72), 0 0 0 5px rgba(242,198,90,.2), 0 0 34px rgba(37,99,235,.55), 0 0 26px rgba(242,198,90,.34);
}
.nexus-spin-wheel-core::before { animation: none !important; transform: none !important; opacity: .55; }
.nexus-spin-wheel-core i, .nexus-spin-wheel-core strong, .nexus-spin-wheel-core span { position: relative; z-index: 1; }
.nexus-spin-wheel-core i { color: #fff4bd; text-shadow: 0 0 12px rgba(255,241,177,.7); }
.nexus-spin-wheel-core strong { color: #fff4bd; font-size: clamp(.62rem, 1.2vw, .82rem); letter-spacing: .18em; text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.nexus-spin-wheel-core span { color: #b9e8f1; font-size: clamp(.4rem, .8vw, .52rem); letter-spacing: .12em; }

.nexus-spin-exclusive {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: none !important;
  padding: clamp(1.35rem, 2.8vw, 2.15rem);
  overflow: hidden;
  border-width: 1px;
  border-radius: 18px;
}
.nexus-spin-exclusive-ribbon { position: relative; top: auto; right: auto; display: inline-flex; align-items: center; gap: .35rem; margin: .15rem auto .8rem; }
.nexus-spin-card-stage { min-height: clamp(255px, 30vw, 360px); padding: .5rem 0; }
.nexus-spin-card-art { width: clamp(190px, 16vw, 250px); max-height: min(360px, 38vh); margin: .5rem auto 1rem; }
.nexus-spin-exclusive h3 { max-width: 100%; margin: .55rem auto .25rem; overflow-wrap: anywhere; }
.nexus-spin-exclusive p { max-width: 100%; overflow-wrap: anywhere; }
.nexus-spin-featured-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 390px); margin: .9rem auto .7rem; gap: .45rem; text-align: left; }
.nexus-spin-featured-stats span { display: grid; min-width: 0; gap: .15rem; padding: .42rem .5rem; border: 1px solid rgba(242,198,90,.22); border-radius: 7px; background: rgba(2,8,20,.42); }
.nexus-spin-featured-stats small { color: #8fa2b8; font-size: .52rem; font-weight: 900; letter-spacing: .1em; }
.nexus-spin-featured-stats b { overflow-wrap: anywhere; color: #fff1b1; font-size: .66rem; line-height: 1.2; }
.nexus-spin-exclusive #spin-exclusive-description { margin: .75rem auto 0; max-width: 390px; line-height: 1.45; }
.nexus-spin-exclusive-meta { width: min(100%, 390px); box-sizing: border-box; margin: .85rem auto 0; }

@media (max-width: 900px) {
  .nexus-spin-wheel-shell { width: min(520px, 86vw); }
  .nexus-spin-exclusive { width: min(560px, 100%); }
  .nexus-spin-card-stage { min-height: min(42vw, 350px); }
}
@media (max-width: 640px) {
  .nexus-spin-wheel-shell { width: min(360px, 86vw); }
  .nexus-spin-segment span { width: 72px; min-height: 56px; padding: .35rem .2rem; }
  .nexus-spin-segment b { max-width: 68px; font-size: .49rem; }
  .nexus-spin-segment i { font-size: .85rem; }
  .nexus-spin-wheel-core { inset: 32% !important; }
  .nexus-spin-exclusive { padding: 1.15rem .85rem; }
  .nexus-spin-card-stage { min-height: 270px; }
  .nexus-spin-card-art { width: min(230px, 66vw); max-height: none; }
  .nexus-spin-featured-stats { gap: .35rem; }
  .nexus-spin-featured-stats span { padding: .35rem .4rem; }
}

/* Dark Luxury Cyber Arcane direction. Visual-only: #spin-wheel remains the
   rotating layer and the core remains its sibling, so spin math is untouched. */
.nexus-spin-section {
  --nv-ink: #050810;
  --nv-navy: #091323;
  --nv-panel: #0d1727;
  --nv-gold: #d8b878;
  --nv-gold-bright: #f4dfab;
  --nv-cyan: #73c9d2;
  --nv-purple: #9270bc;
  border-color: rgba(216, 184, 120, .34);
  background:
    radial-gradient(circle at 15% 8%, rgba(115, 201, 210, .07), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(146, 112, 188, .1), transparent 31%),
    linear-gradient(145deg, #050810 0%, #081323 56%, #100d1c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 216, .05), 0 24px 70px rgba(0, 0, 0, .42);
}
.nexus-spin-heading h2 {
  color: var(--nv-gold-bright);
  text-shadow: 0 2px 16px rgba(216, 184, 120, .22);
}
.nexus-spin-heading h2::after {
  background: linear-gradient(90deg, transparent, rgba(216, 184, 120, .48), var(--nv-gold-bright), rgba(216, 184, 120, .48), transparent);
  box-shadow: 0 0 10px rgba(216, 184, 120, .24);
}
.nexus-spin-heading p { color: #9eafbf; }
.nexus-spin-preview-badge,
.nexus-spin-cost { border-color: rgba(216, 184, 120, .3); color: #ddc894; background: rgba(216, 184, 120, .055); }

.nexus-spin-stage {
  border-color: rgba(216, 184, 120, .24);
  background:
    radial-gradient(circle at 50% 43%, rgba(115, 201, 210, .08), transparent 37%),
    radial-gradient(circle at 50% 52%, rgba(146, 112, 188, .08), transparent 57%),
    linear-gradient(145deg, rgba(5, 12, 24, .96), rgba(8, 16, 30, .84));
  box-shadow: inset 0 0 0 1px rgba(255, 246, 216, .035), inset 0 0 50px rgba(0, 0, 0, .34), 0 20px 45px rgba(0, 0, 0, .28);
}
.nexus-spin-stage::before {
  inset: 12px;
  border-color: rgba(216, 184, 120, .12);
  box-shadow: inset 0 0 28px rgba(115, 201, 210, .035);
}
.nexus-spin-wheel-shell {
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .54));
}
.nexus-spin-wheel-shell::before {
  inset: 1.1%;
  border-color: rgba(244, 223, 171, .26);
  box-shadow: 0 0 0 9px rgba(2, 6, 14, .8), 0 0 0 11px rgba(216, 184, 120, .07), inset 0 0 24px rgba(216, 184, 120, .08);
}
.nexus-spin-wheel {
  border-width: 14px;
  background:
    conic-gradient(from -22.5deg, #123b3d 0 12.5%, #33281d 12.5% 25%, #142b4d 25% 37.5%, #203e59 37.5% 50%, #163f4b 50% 62.5%, #3b243d 62.5% 75%, #164247 75% 87.5%, #2c2044 87.5% 100%) padding-box,
    linear-gradient(145deg, #f4dfab 0, #8f6c32 22%, #e1bd70 47%, #493313 73%, #d5b36b 100%) border-box;
  box-shadow:
    0 0 0 5px rgba(3, 7, 14, .94),
    0 0 0 8px rgba(216, 184, 120, .12),
    inset 0 0 0 2px rgba(255, 246, 216, .1),
    inset 0 0 42px rgba(0, 0, 0, .78),
    0 0 34px rgba(115, 201, 210, .08),
    0 0 45px rgba(216, 184, 120, .08);
}
.nexus-spin-wheel::before {
  inset: 5.5%;
  border: 1px solid rgba(244, 223, 171, .4);
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(244, 223, 171, .055) 23px 24px, transparent 25px 46px);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, .28), 0 0 18px rgba(115, 201, 210, .1);
}
.nexus-spin-wheel::after {
  inset: 2.1%;
  border-color: rgba(244, 223, 171, .25);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .42), 0 0 0 1px rgba(115, 201, 210, .08);
}
.nexus-spin-wheel-bezel {
  opacity: .32;
  background: repeating-conic-gradient(from 0deg, rgba(244, 223, 171, .22) 0 .7deg, transparent .7deg 15deg);
}
.nexus-spin-segments {
  background:
    repeating-conic-gradient(from -22.5deg, rgba(244, 223, 171, .28) 0 .8deg, transparent .8deg calc(360deg / var(--segment-count))),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 28px, rgba(115, 201, 210, .035) 29px 30px, transparent 31px 54px),
    linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 38%, rgba(0, 0, 0, .15));
}
.nexus-spin-segment { color: #f4e8c5; text-shadow: 0 2px 5px rgba(0, 0, 0, .95); }
.nexus-spin-segment span {
  width: 104px;
  min-height: 66px;
  border-color: rgba(244, 223, 171, .16);
  background: linear-gradient(180deg, rgba(7, 14, 27, .34), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px 0 rgba(255, 246, 216, .035);
}
.nexus-spin-segment i { color: #e4c985; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .82)); }
.nexus-spin-segment b { color: #f4e8c5; letter-spacing: .045em; }

/* The core is still a separate, non-transformed energy layer. */
.nexus-spin-wheel-core {
  border: 4px solid var(--nv-gold);
  background:
    radial-gradient(circle at 35% 22%, rgba(115, 201, 210, .38), transparent 23%),
    radial-gradient(circle at 65% 72%, rgba(146, 112, 188, .24), transparent 46%),
    linear-gradient(145deg, #101c31, #050912 72%);
  box-shadow:
    inset 0 0 0 5px #0b1424,
    inset 0 0 22px rgba(115, 201, 210, .26),
    0 0 0 4px rgba(216, 184, 120, .12),
    0 0 24px rgba(115, 201, 210, .2),
    0 0 28px rgba(216, 184, 120, .12);
}
.nexus-spin-wheel-core i { color: #f4dfab; text-shadow: 0 0 10px rgba(115, 201, 210, .42); }
.nexus-spin-wheel-core strong { color: #f4dfab; text-shadow: 0 2px 8px rgba(0, 0, 0, .72); }
.nexus-spin-wheel-core span { color: #9dd9df; }
.nexus-spin-pointer::before { background: linear-gradient(110deg, #f7e8b7, #b58c48 55%, #f0d898); }
.nexus-spin-pointer span { border-color: #e8cb89; background: #101728; box-shadow: 0 0 10px rgba(216, 184, 120, .36); }
.nexus-spin-pedestal { border-color: rgba(216, 184, 120, .4); background: linear-gradient(#4c391d, #15130e 48%, #05070a); box-shadow: 0 12px 22px rgba(0, 0, 0, .65), 0 0 18px rgba(216, 184, 120, .08); }
.nexus-spin-pedestal span { background: #d6b66e; box-shadow: 0 0 10px rgba(216, 184, 120, .5); }
.nexus-spin-button {
  border-color: rgba(244, 223, 171, .84);
  background: linear-gradient(135deg, #f2d99a, #b4863c 52%, #65471d);
  box-shadow: inset 0 1px 0 rgba(255, 252, 231, .65), 0 7px 0 #3c2910, 0 12px 24px rgba(216, 184, 120, .14);
}
.nexus-spin-button:hover:not(:disabled) { filter: brightness(1.08); }
.nexus-spin-status { color: #d9c58e; }
.nexus-spin-remaining { color: #8294a7; }

/* Jackpot card: a quieter purple-black reliquary, distinct from the wheel. */
.nexus-spin-exclusive {
  position: relative;
  border-color: rgba(216, 184, 120, .48);
  background:
    radial-gradient(circle at 50% 19%, rgba(146, 112, 188, .2), transparent 31%),
    radial-gradient(circle at 50% 57%, rgba(216, 184, 120, .07), transparent 38%),
    linear-gradient(145deg, #171323 0%, #080c16 63%, #18100f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 216, .055), inset 0 0 40px rgba(146, 112, 188, .08), 0 24px 48px rgba(0, 0, 0, .48), 0 0 24px rgba(146, 112, 188, .08);
}
.nexus-spin-exclusive::after { border-color: rgba(216, 184, 120, .16); background: linear-gradient(110deg, transparent 0 44%, rgba(244, 223, 171, .06) 50%, transparent 56%) 140% 0 / 220% 100% no-repeat; }
.nexus-spin-exclusive-ribbon { border-color: rgba(216, 184, 120, .36); color: #ead39b; background: rgba(216, 184, 120, .07); }
.nexus-spin-exclusive .nexus-eyebrow { color: #c6a9e1; }
.nexus-spin-card-stage { background: radial-gradient(circle, rgba(216, 184, 120, .16), transparent 22%), radial-gradient(circle, rgba(146, 112, 188, .3), transparent 56%), transparent; }
.nexus-spin-card-art {
  border-color: #e1c27d;
  background: radial-gradient(circle at 30% 22%, rgba(146, 112, 188, .5), transparent 22%), linear-gradient(145deg, #2a1b3c, #080912 64%, #21130f);
  box-shadow: inset 0 0 0 3px rgba(56, 29, 74, .82), inset 0 0 28px rgba(216, 184, 120, .18), 0 0 24px rgba(146, 112, 188, .26), 0 18px 30px rgba(0, 0, 0, .66);
}
.nexus-spin-card-image { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.nexus-spin-exclusive h3 { color: #f4dfab; text-shadow: 0 0 14px rgba(216, 184, 120, .16); }
.nexus-spin-exclusive-rarity { color: #dfc48b; }
.nexus-spin-featured-stats span { border-color: rgba(216, 184, 120, .2); background: rgba(5, 8, 18, .48); }
.nexus-spin-featured-stats small { color: #8f9bab; }
.nexus-spin-featured-stats b { color: #f1d99e; }
.nexus-spin-exclusive-meta { border-color: rgba(216, 184, 120, .24); background: rgba(216, 184, 120, .045); }
.nexus-spin-disclaimer { color: #7f8c9c; }

@media (max-width: 640px) {
  .nexus-spin-segment span { width: 72px; }
  .nexus-spin-wheel-core { inset: 32% !important; }
  .nexus-spin-exclusive { border-radius: 15px; }
}

/* The old decorative pedestal was absolutely positioned over the copy below the spin button. */
.nexus-spin-stage .nexus-spin-pedestal { display: none !important; }

.nexus-spin-exclusive-meta { gap: .55rem; flex-wrap: wrap; }
.nexus-spin-featured-value { color: #f4dfab; font-size: .72rem; font-weight: 900; letter-spacing: .04em; overflow-wrap: anywhere; }
.nexus-spin-featured-value--collection { color: #ffe7a3; }
.nexus-spin-card-image[hidden],
.nexus-spin-card-sigil[hidden],
.nexus-spin-card-art small[hidden] { display: none !important; }
.nexus-spin-card-image { display: block; width: 100%; height: 100%; padding: 0; background: transparent; object-fit: contain; object-position: center; }
.nexus-spin-card-art { padding: 0; background: transparent; }
 .admin-card-input {
  width: 100%;
  background: rgb(15 23 42);
  border: 1px solid rgb(51 65 85);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: white;
  outline: none;
}
.admin-card-input:focus { border-color: rgb(16 185 129); box-shadow: 0 0 10px rgb(16 185 129 / 30%); }
.admin-card-check { display: flex; align-items: center; gap: 0.55rem; color: rgb(226 232 240); font-size: 0.8rem; font-weight: 700; }

/* Lucky Spin result panels: keep all three columns inside the section even
   when a code, status, or translated heading is longer than usual. */
.nexus-spin-bottom-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1rem);
  align-items: stretch;
}

.nexus-spin-list-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 220px;
  max-height: 220px;
  overflow: hidden;
}

.nexus-spin-list-panel h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nexus-spin-list-panel > div {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.nexus-spin-list-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nexus-spin-list-item > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .nexus-spin-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nexus-spin-bottom-grid { grid-template-columns: 1fr; }
}

html,
body { overflow-x: hidden; }

/* Compact Nexus Vault marketplace filters. IDs and onchange handlers remain
   untouched; this block only refines the control geometry and affordances. */
.nexus-filter-controls {
  flex: 0 1 min(100%, 590px);
  width: min(100%, 590px);
  gap: 8px !important;
}

.nexus-filter-field {
  min-height: 44px;
}

.nexus-filter-field > i {
  left: 13px;
  font-size: 13px;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 5px currentColor);
}

/* A crisp CSS chevron replaces the old text glyph, which could render as a
   mojibake symbol depending on the document encoding. */
.nexus-filter-field::after {
  top: 50%;
  right: 14px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #b9c7d8;
  border-bottom: 1.5px solid #b9c7d8;
  color: transparent;
  content: "";
  transform: translateY(-65%) rotate(45deg);
  transition: border-color .18s ease, transform .2s ease, filter .18s ease;
}

.nexus-filter-field:focus-within::after {
  border-color: #f0d596;
  transform: translateY(-25%) rotate(225deg);
  filter: drop-shadow(0 0 4px rgba(240, 213, 150, .45));
}

.nexus-filter-field::before {
  top: 7px;
  left: 38px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}
.nexus-filter-field--type::before { content: "\004C\004F\1EA0\0049 \0054\0048\1EBA"; }
.nexus-filter-field--rarity::before { content: "\004D\1EE8\0043 \0110\1ED8 \0048\0049\1EBE\004D"; }
.nexus-filter-field--sort::before { content: "\0053\1EAE\0050 \0058\1EBE\0050 \0054\0048\1ECA \0047\0049\00C1"; }

.nexus-filter-field select {
  height: 44px;
  min-height: 44px;
  padding: 17px 32px 3px 38px !important;
  border-radius: 10px !important;
  font-size: .68rem !important;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 4px 10px rgba(0, 0, 0, .1) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.nexus-filter-field select:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 6px 14px rgba(0, 0, 0, .18) !important;
}

.nexus-filter-field:focus-within select {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(217, 183, 108, .08), 0 0 14px rgba(117, 203, 213, .1), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.nexus-filter-field--rarity:focus-within select { box-shadow: 0 0 0 2px rgba(159, 131, 201, .1), 0 0 14px rgba(159, 131, 201, .12), inset 0 1px 0 rgba(255, 255, 255, .07) !important; }
.nexus-filter-field--sort:focus-within select { box-shadow: 0 0 0 2px rgba(117, 181, 232, .1), 0 0 14px rgba(117, 181, 232, .12), inset 0 1px 0 rgba(255, 255, 255, .07) !important; }

@media (max-width: 900px) {
  .nexus-filter-controls {
    flex: 1 1 100%;
    width: 100%;
    max-width: 590px;
  }
}

@media (max-width: 640px) {
  .nexus-filter-controls { gap: 7px !important; }
  .nexus-filter-field select { height: 42px; min-height: 42px; padding-top: 16px !important; }
  .nexus-filter-field { min-height: 42px; }
  .nexus-filter-field > i { left: 12px; font-size: 12px; }
  .nexus-filter-field::before { left: 35px; }
  .nexus-filter-field::after { right: 13px; width: 5px; height: 5px; }
}

/* --------------------------------------------------------------------------
   Lucky Spin / Nexus Vault visual system
   Presentation only: the wheel still rotates #spin-wheel and all reward
   state continues to be rendered by app.js.
   -------------------------------------------------------------------------- */
.nexus-spin-section {
  --spin-ink: #050811;
  --spin-panel: #0a1220;
  --spin-panel-raised: #101b2c;
  --spin-gold: #d9b76c;
  --spin-gold-bright: #f5e2ae;
  --spin-cyan: #75cbd5;
  --spin-violet: #9f83c9;
  position: relative;
  isolation: isolate;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(1.1rem, 2.7vw, 2.25rem);
  overflow: hidden;
  border: 1px solid rgba(217, 183, 108, .36) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(117, 203, 213, .11), transparent 25%),
    radial-gradient(circle at 94% 12%, rgba(159, 131, 201, .13), transparent 28%),
    linear-gradient(145deg, #050811 0%, #091323 58%, #110d1b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 216, .06),
    inset 0 0 70px rgba(0, 0, 0, .22),
    0 26px 70px rgba(0, 0, 0, .38) !important;
}

.nexus-spin-section::before {
  z-index: -1;
  opacity: .12;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(217, 183, 108, .12) 50%, transparent 56%) 120% 0 / 180% 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 45px, rgba(117, 203, 213, .08) 46px, transparent 47px),
    repeating-linear-gradient(90deg, transparent 0 45px, rgba(117, 203, 213, .08) 46px, transparent 47px);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
  animation: nexusSpinSectionSheen 13s ease-in-out infinite;
}

.nexus-spin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  padding: 0 .2rem;
}

.nexus-spin-heading h2 {
  margin: .35rem 0 .55rem;
  color: var(--spin-gold-bright);
  font-family: var(--font-body, inherit);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: .075em;
  text-shadow: 0 2px 18px rgba(217, 183, 108, .2);
}

.nexus-spin-heading h2::after {
  width: min(360px, 100%);
  height: 1px;
  margin: .75rem 0 0;
  background: linear-gradient(90deg, var(--spin-gold), rgba(217, 183, 108, .16), transparent);
  box-shadow: 0 0 10px rgba(217, 183, 108, .25);
}

.nexus-spin-heading p {
  max-width: 620px;
  margin: 0;
  color: #9babbc;
  font-size: .78rem;
  line-height: 1.55;
}

.nexus-spin-heading-actions { flex: 0 0 auto; }
.nexus-spin-cost {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.15rem;
  padding: .45rem .75rem;
  border: 1px solid rgba(217, 183, 108, .3);
  border-radius: 999px;
  color: #e2c98e;
  background: rgba(217, 183, 108, .06);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nexus-spin-cost i { color: var(--spin-gold-bright); }

.nexus-spin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: stretch;
}

.nexus-spin-stage,
.nexus-spin-exclusive {
  min-width: 0;
  border-radius: 18px;
}

.nexus-spin-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 600px;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid rgba(117, 203, 213, .16) !important;
  background:
    radial-gradient(circle at 50% 33%, rgba(117, 203, 213, .09), transparent 35%),
    radial-gradient(circle at 50% 58%, rgba(159, 131, 201, .08), transparent 56%),
    linear-gradient(145deg, rgba(6, 14, 27, .98), rgba(9, 18, 32, .86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 216, .04),
    inset 0 0 48px rgba(0, 0, 0, .3),
    0 18px 34px rgba(0, 0, 0, .24) !important;
}

.nexus-spin-stage::before {
  inset: 12px;
  border: 1px solid rgba(217, 183, 108, .11);
  border-radius: 12px;
  box-shadow: inset 0 0 28px rgba(117, 203, 213, .035);
}

.nexus-spin-wheel-shell {
  position: relative;
  isolation: isolate;
  width: min(500px, 100%);
  max-width: 100%;
  margin: .2rem auto 0;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .56));
}

.nexus-spin-wheel-shell::before {
  inset: 1.2%;
  z-index: 0;
  border: 1px solid rgba(245, 226, 174, .22);
  border-radius: 50%;
  box-shadow:
    0 0 0 9px rgba(2, 6, 14, .82),
    0 0 0 11px rgba(217, 183, 108, .06),
    inset 0 0 24px rgba(217, 183, 108, .08);
}

.nexus-spin-wheel {
  z-index: 1;
  border: 14px solid transparent;
  background:
    conic-gradient(from -22.5deg,
      #123d3d 0 12.5%, #3d3020 12.5% 25%, #17335a 25% 37.5%,
      #24445d 37.5% 50%, #174b51 50% 62.5%, #45263e 62.5% 75%,
      #1c4d4b 75% 87.5%, #34264f 87.5% 100%) padding-box,
    linear-gradient(140deg, #fff0b8 0%, #8e6a32 23%, #e3c174 47%, #483413 74%, #d2ad65 100%) border-box;
  box-shadow:
    0 0 0 5px rgba(3, 7, 14, .96),
    0 0 0 8px rgba(217, 183, 108, .11),
    inset 0 0 0 2px rgba(255, 246, 216, .12),
    inset 0 0 42px rgba(0, 0, 0, .8),
    0 0 38px rgba(117, 203, 213, .08),
    0 0 50px rgba(217, 183, 108, .1);
}

.nexus-spin-wheel::before {
  inset: 5.5%;
  border: 1px solid rgba(245, 226, 174, .36);
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 23px, rgba(245, 226, 174, .045) 24px 25px, transparent 26px 50px);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, .28), 0 0 18px rgba(117, 203, 213, .09);
}

.nexus-spin-wheel::after {
  inset: 2.1%;
  z-index: 5;
  border: 1px solid rgba(245, 226, 174, .23);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .42), 0 0 0 1px rgba(117, 203, 213, .07);
}

.nexus-spin-wheel-bezel {
  z-index: 6;
  opacity: .28;
  background: repeating-conic-gradient(from 0deg, rgba(245, 226, 174, .23) 0 .7deg, transparent .7deg 15deg);
}

.nexus-spin-segments {
  z-index: 2;
  background:
    repeating-conic-gradient(from -22.5deg, rgba(245, 226, 174, .34) 0 .85deg, transparent .85deg calc(360deg / var(--segment-count))),
    linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 38%, rgba(0, 0, 0, .18));
}

.nexus-spin-segment {
  z-index: 4;
  padding-top: 10.5%;
  color: #f7ebc9;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .96);
}
.nexus-spin-segment span {
  box-sizing: border-box;
  width: 106px;
  min-height: 68px;
  padding: .55rem .4rem .45rem;
  border: 1px solid rgba(245, 226, 174, .17);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(7, 14, 27, .42), rgba(0, 0, 0, .2));
  box-shadow: inset 0 1px 0 rgba(255, 246, 216, .04), 0 5px 10px rgba(0, 0, 0, .1);
  backdrop-filter: blur(2px);
}
.nexus-spin-segment i { color: #e6ca84; font-size: 1.16rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .86)); }
.nexus-spin-segment b { max-width: 98px; color: #f7ebc9; font-size: .62rem; line-height: 1.18; letter-spacing: .045em; }
.nexus-spin-segment--sapphire span { border-color: rgba(117, 181, 232, .35); }
.nexus-spin-segment--sapphire i { color: #9bd5ef; }
.nexus-spin-segment--teal span { border-color: rgba(117, 203, 213, .34); }
.nexus-spin-segment--teal i { color: #8adfe0; }
.nexus-spin-segment--violet span { border-color: rgba(181, 145, 225, .36); }
.nexus-spin-segment--violet i { color: #d1b4f1; }
.nexus-spin-segment--ruby span { border-color: rgba(224, 129, 159, .36); }
.nexus-spin-segment--ruby i { color: #f4a8bb; }

.nexus-spin-wheel-core {
  position: absolute !important;
  inset: 34% !important;
  z-index: 20 !important;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transform: none !important;
  animation: nexusSpinCoreBreath 4.6s ease-in-out infinite;
  border: 4px solid var(--spin-gold) !important;
  background:
    radial-gradient(circle at 34% 20%, rgba(117, 203, 213, .36), transparent 23%),
    radial-gradient(circle at 65% 76%, rgba(159, 131, 201, .2), transparent 48%),
    linear-gradient(145deg, #12233a, #050912 74%);
  box-shadow:
    inset 0 0 0 5px #0b1425,
    inset 0 0 24px rgba(117, 203, 213, .22),
    0 0 0 4px rgba(217, 183, 108, .12),
    0 0 24px rgba(117, 203, 213, .2),
    0 0 30px rgba(217, 183, 108, .14);
}
.nexus-spin-wheel-core::before { opacity: .48; animation: none !important; transform: none !important; }
.nexus-spin-wheel-core i { color: var(--spin-gold-bright); text-shadow: 0 0 12px rgba(117, 203, 213, .48); }
.nexus-spin-wheel-core strong { color: var(--spin-gold-bright); font-size: clamp(.62rem, 1.15vw, .8rem); letter-spacing: .16em; }
.nexus-spin-wheel-core span { color: #a4dce0; font-size: clamp(.4rem, .8vw, .52rem); letter-spacing: .12em; }

.nexus-spin-pointer {
  top: -1.55rem;
  z-index: 30;
  width: 50px;
  height: 64px;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .76));
}
.nexus-spin-pointer::before {
  inset: 0 5px 11px;
  background: linear-gradient(110deg, #fff3c4 0%, #b98f4d 52%, #f4d995 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 0 8px rgba(217, 183, 108, .48));
}
.nexus-spin-pointer span {
  top: -.1rem;
  width: 15px;
  height: 15px;
  border: 2px solid #f5e2ae;
  background: #111a2a;
  box-shadow: inset 0 0 0 2px #263b57, 0 0 11px rgba(117, 203, 213, .48);
}

.nexus-spin-button {
  position: relative;
  min-width: min(270px, 88%);
  min-height: 52px;
  margin-top: 1.65rem;
  border: 1px solid #f5e2ae;
  border-radius: 12px;
  color: #211708;
  background: linear-gradient(135deg, #f8e7b0 0%, #d9ad58 52%, #76501e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 5px 0 #3e2a12, 0 12px 26px rgba(0, 0, 0, .4), 0 0 22px rgba(217, 183, 108, .14);
  font-size: .74rem;
  letter-spacing: .17em;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.nexus-spin-button i { margin-right: .35rem; }
.nexus-spin-button:hover:not(:disabled),
.nexus-spin-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 0 #3e2a12, 0 15px 32px rgba(0, 0, 0, .5), 0 0 30px rgba(217, 183, 108, .3);
  outline: none;
}
.nexus-spin-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 0 #3e2a12, 0 8px 18px rgba(0, 0, 0, .38); }
.nexus-spin-button:disabled { border-color: rgba(148, 163, 184, .3); color: #718096; background: linear-gradient(135deg, #273244, #151d2c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 0 #080c14; cursor: not-allowed; filter: saturate(.45); opacity: .76; }
.nexus-spin-status { min-height: 1.25rem; color: #e2c98e; font-weight: 800; }
.nexus-spin-remaining { color: #8294a7; font-size: .68rem; }

.nexus-spin-exchange {
  width: min(440px, 100%);
  box-sizing: border-box;
  margin-top: 1rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(117, 203, 213, .2);
  border-radius: 12px;
  background: rgba(4, 12, 23, .58);
  box-shadow: inset 0 0 20px rgba(117, 203, 213, .035);
}
.nexus-spin-exchange strong { color: #dfc68a; }
.nexus-spin-exchange span { color: #8294a7; }
.nexus-spin-exchange button { border-radius: 8px; color: #c6f1f3; background: rgba(46, 139, 151, .14); }
.nexus-spin-exchange button:hover:not(:disabled), .nexus-spin-exchange button:focus-visible { border-color: var(--spin-cyan); background: rgba(46, 139, 151, .3); box-shadow: 0 0 15px rgba(117, 203, 213, .12); }

.nexus-spin-how-button { color: #74859a; transition: color .18s ease, transform .18s ease; }
.nexus-spin-how-button:hover, .nexus-spin-how-button:focus-visible { color: var(--spin-gold-bright); transform: translateY(-1px); outline: none; }

.nexus-spin-exclusive {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 600px;
  padding: clamp(1.2rem, 2.2vw, 1.75rem);
  overflow: hidden;
  border: 1px solid rgba(217, 183, 108, .34) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(159, 131, 201, .2), transparent 29%),
    radial-gradient(circle at 50% 58%, rgba(217, 183, 108, .06), transparent 37%),
    linear-gradient(145deg, #141224 0%, #080d17 62%, #17100f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 246, 216, .05), inset 0 0 42px rgba(159, 131, 201, .07), 0 20px 42px rgba(0, 0, 0, .35) !important;
  text-align: center;
}
.nexus-spin-exclusive::before { inset: 10px; border-color: rgba(217, 183, 108, .13); border-radius: 12px; }
.nexus-spin-exclusive::after { inset: 10px; border-color: rgba(217, 183, 108, .1); }
.nexus-spin-featured-label { color: #c5a7e1; font-size: .58rem; letter-spacing: .18em; }
.nexus-spin-exclusive-ribbon { position: static; align-self: center; margin: .65rem 0 .65rem; border-color: rgba(217, 183, 108, .36); color: #ead39b; background: rgba(217, 183, 108, .07); box-shadow: none; }
.nexus-spin-exclusive .nexus-eyebrow { color: #a7b7c5; }
.nexus-spin-card-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  margin: .2rem 0 .4rem;
  background: radial-gradient(circle, rgba(217, 183, 108, .15), transparent 24%), radial-gradient(circle, rgba(159, 131, 201, .25), transparent 56%), transparent;
}
.nexus-spin-card-art {
  width: clamp(180px, 16vw, 235px);
  max-height: none;
  margin: 0 auto;
  border: 2px solid #dfc17d;
  border-radius: 13px;
  box-shadow: inset 0 0 0 3px rgba(35, 22, 49, .88), inset 0 0 26px rgba(217, 183, 108, .15), 0 0 22px rgba(159, 131, 201, .22), 0 16px 28px rgba(0, 0, 0, .58);
}
.nexus-spin-card-image { object-fit: contain; }
.nexus-spin-card-art:hover, .nexus-spin-card-art:focus-visible { transform: translateY(-4px) scale(1.025); box-shadow: inset 0 0 0 3px rgba(35, 22, 49, .88), 0 0 28px rgba(217, 183, 108, .3), 0 20px 30px rgba(0, 0, 0, .62); }
.nexus-spin-exclusive h3 { max-width: 100%; margin: .3rem 0 .2rem; color: var(--spin-gold-bright); font-size: clamp(1rem, 1.8vw, 1.28rem); line-height: 1.2; overflow-wrap: anywhere; }
.nexus-spin-exclusive-rarity { margin: .35rem 0 .55rem; color: #d8bd80; font-size: .68rem; }
.nexus-spin-exclusive p { max-width: 420px; margin: .2rem auto 0; color: #9eafbf; font-size: .72rem; line-height: 1.5; }
.nexus-spin-featured-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 430px); margin: .85rem auto .55rem; gap: .45rem; text-align: left; }
.nexus-spin-featured-stats span { padding: .45rem .5rem; border-color: rgba(217, 183, 108, .18); border-radius: 8px; background: rgba(3, 8, 17, .46); }
.nexus-spin-featured-stats small { color: #8294a7; font-size: .5rem; }
.nexus-spin-featured-stats b { color: #e5ca8b; font-size: .64rem; }
.nexus-spin-exclusive-meta { justify-content: center; width: min(100%, 430px); margin-top: auto; padding: .7rem .75rem; border-color: rgba(217, 183, 108, .2); background: rgba(217, 183, 108, .04); }
.nexus-spin-exclusive-meta strong, .nexus-spin-featured-value { color: #e5ca8b; font-size: .65rem; }

.nexus-spin-reward-legend { margin-top: clamp(1.2rem, 2vw, 1.65rem); padding-top: 1.2rem; border-color: rgba(217, 183, 108, .14); }
.nexus-spin-subheading h3 { color: #e9dfc4; font-size: .9rem; letter-spacing: .08em; }
.nexus-spin-reward-grid { gap: .6rem; }
.nexus-spin-reward-item { min-height: 54px; padding: .6rem .65rem; border-color: rgba(117, 203, 213, .14); border-radius: 10px; background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .22)); transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.nexus-spin-reward-item:hover { transform: translateY(-2px); border-color: rgba(217, 183, 108, .35); background: linear-gradient(145deg, rgba(217, 183, 108, .07), rgba(0, 0, 0, .22)); }
.nexus-spin-reward-icon { border: 1px solid rgba(217, 183, 108, .15); }
.nexus-spin-reward-item strong { color: #dce4eb; font-size: .65rem; line-height: 1.25; }

.nexus-spin-bottom-grid { gap: .65rem; margin-top: 1rem; }
.nexus-spin-list-panel { height: 206px; max-height: 206px; padding: .85rem; border-color: rgba(117, 203, 213, .14) !important; border-radius: 13px; background: rgba(5, 11, 21, .62) !important; box-shadow: inset 0 1px 0 rgba(255, 246, 216, .035), 0 9px 20px rgba(0, 0, 0, .16); }
.nexus-spin-list-panel h3 { min-height: 1.8rem; margin-bottom: .55rem; color: #ddc78f; font-size: .68rem; letter-spacing: .055em; }
.nexus-spin-list-panel h3 i { color: var(--spin-cyan); }
.nexus-spin-list-item { padding: .38rem .4rem; border-bottom-color: rgba(148, 163, 184, .12); }
.nexus-spin-list-item strong { color: #dce4eb; font-size: .66rem; }
.nexus-spin-list-item span { color: #8191a4; font-size: .62rem; }
.nexus-spin-empty { color: #718096; }
.nexus-spin-empty i { color: #8fa4b6; }

@keyframes nexusSpinCoreBreath {
  0%, 100% { box-shadow: inset 0 0 0 5px #0b1425, inset 0 0 24px rgba(117, 203, 213, .2), 0 0 0 4px rgba(217, 183, 108, .12), 0 0 24px rgba(117, 203, 213, .18), 0 0 30px rgba(217, 183, 108, .12); }
  50% { box-shadow: inset 0 0 0 5px #0b1425, inset 0 0 24px rgba(117, 203, 213, .28), 0 0 0 4px rgba(217, 183, 108, .16), 0 0 29px rgba(117, 203, 213, .25), 0 0 34px rgba(217, 183, 108, .18); }
}
@keyframes nexusSpinSectionSheen { 0%, 62% { background-position: 120% 0, 0 0, 0 0; } 80%, 100% { background-position: -40% 0, 0 0, 0 0; } }

@media (max-width: 980px) {
  .nexus-spin-layout { grid-template-columns: 1fr; }
  .nexus-spin-stage, .nexus-spin-exclusive { min-height: 0; }
  .nexus-spin-exclusive { width: min(680px, 100%); margin: 0 auto; }
  .nexus-spin-card-stage { min-height: 310px; }
  .nexus-spin-card-art { width: min(220px, 34vw); }
}

@media (max-width: 680px) {
  .nexus-spin-section { padding: 1rem .75rem; border-radius: 18px !important; }
  .nexus-spin-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .nexus-spin-heading-actions { width: 100%; }
  .nexus-spin-cost { width: fit-content; }
  .nexus-spin-stage { padding: .9rem .55rem; }
  .nexus-spin-wheel-shell { width: min(370px, 100%); }
  .nexus-spin-segment span { width: 72px; min-height: 57px; padding: .35rem .2rem; }
  .nexus-spin-segment b { max-width: 68px; font-size: .49rem; }
  .nexus-spin-segment i { font-size: .88rem; }
  .nexus-spin-wheel-core { inset: 32% !important; }
  .nexus-spin-button { min-width: min(280px, 92%); }
  .nexus-spin-exchange { align-items: stretch; flex-direction: column; }
  .nexus-spin-exchange button { width: 100%; }
  .nexus-spin-card-stage { min-height: 270px; }
  .nexus-spin-card-art { width: min(230px, 64vw); }
  .nexus-spin-featured-stats { gap: .35rem; }
  .nexus-spin-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-spin-section::before, .nexus-spin-wheel-core { animation: none; }
  .nexus-spin-button, .nexus-spin-how-button, .nexus-spin-card-art, .nexus-spin-reward-item { transition: none; }
}

/* Hallmark · hero artwork edge-blend refinement · visual-only. */
.hero-visual[data-hero-tilt] {
  overflow: visible;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 8%, #000 25%, #000 76%, rgba(0, 0, 0, .7) 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 8%, #000 24%, #000 80%, rgba(0, 0, 0, .62) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 8%, #000 25%, #000 76%, rgba(0, 0, 0, .7) 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 8%, #000 24%, #000 80%, rgba(0, 0, 0, .62) 93%, transparent 100%);
  mask-composite: intersect;
}

.hero-visual[data-hero-tilt]::before {
  inset: -24%;
  opacity: .34;
}

.hero-visual[data-hero-tilt]::after {
  inset: -16%;
  background:
    radial-gradient(ellipse at 58% 48%, color-mix(in oklch, var(--nv-violet-bright) 20%, transparent), transparent 54%),
    radial-gradient(ellipse at 76% 66%, color-mix(in oklch, var(--nv-cyan) 7%, transparent), transparent 62%);
  filter: blur(24px);
  opacity: .64;
}

/* Fade the raster edges only; the character and card details stay crisp. */
.hero-character-wrap .hero-character {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .58) 10%, #000 24%, #000 80%, rgba(0, 0, 0, .62) 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .62) 9%, #000 23%, #000 80%, rgba(0, 0, 0, .58) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .58) 10%, #000 24%, #000 80%, rgba(0, 0, 0, .62) 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .62) 9%, #000 23%, #000 80%, rgba(0, 0, 0, .58) 93%, transparent 100%);
  mask-composite: intersect;
}