:root {
  color-scheme: dark;
  --bg: #030303;
  --surface: rgba(10, 10, 11, 0.84);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f5f5f0;
  --muted: #a6a6a0;
  --signal: #e9ff70;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(115deg, rgba(233, 255, 112, 0.08), transparent 28rem),
    linear-gradient(245deg, rgba(255, 255, 255, 0.06), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.cards-page {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 64px;
}

.hero {
  display: grid;
  justify-items: center;
  padding: 32px 0 42px;
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 42px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
}

.brand-mark {
  width: 17px;
  height: 17px;
  border: 2px solid var(--text);
  border-radius: 50%;
  box-shadow: inset 6px 0 0 var(--signal);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 820;
  line-height: 0.9;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(64px, 12vw, 148px);
}

h2 {
  font-size: clamp(38px, 7vw, 76px);
}

.lede {
  max-width: 720px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.22;
}

.wallet,
.tabs,
.panel,
.modal,
.redeem-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 70%),
    var(--surface);
}

.wallet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px;
}

.wallet div {
  display: grid;
  gap: 6px;
}

.wallet span,
.kicker,
.card-topline span,
.edition {
  color: var(--signal);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.wallet strong {
  font-size: clamp(30px, 5vw, 58px);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
}

.tab,
.button,
.trading-card,
.close {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.tab {
  min-height: 42px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 16px;
  font-weight: 760;
}

.tab.active {
  background: #f5f7e9;
  color: #11120e;
}

.panel {
  display: none;
  padding: clamp(18px, 4vw, 34px);
}

.panel.active {
  display: grid;
  gap: 22px;
}

.filters {
  display: grid;
  grid-template-columns: 1fr 160px 160px 190px;
  gap: 10px;
}

.filters input,
.filters select,
.redeem-form input {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font: inherit;
  font-weight: 720;
  padding: 0 16px;
  outline: none;
}

.filters input:focus,
.filters select:focus,
.redeem-form input:focus {
  border-color: rgba(233, 255, 112, 0.72);
}

.filters select option {
  background: #111113;
}

.section-heading {
  display: grid;
  gap: 12px;
}

.pack-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pack-card,
.owned-pack {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  padding: 18px;
}

.pack-card span {
  color: var(--signal);
  font-weight: 820;
}

.odds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.odds small,
.owned-pack span,
.empty {
  color: var(--muted);
}

.owned-packs {
  display: grid;
  gap: 10px;
}

.owned-pack {
  grid-template-columns: 1fr auto auto;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 40px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 760;
}

.button-light {
  border: 1px solid #eff2d6;
  background: #f5f7e9;
  color: #11120e;
}

.button-dark {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.trading-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 430px;
  border: 5px solid var(--edition-color, #d9d9d2);
  border-radius: 18px;
  background: #f5f5f0;
  color: #11120e;
  padding: 14px;
  text-align: left;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.limited-ribbon {
  justify-self: start;
  max-width: 100%;
  border: 1px solid rgba(17, 18, 14, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, #e9ff70, #ff5ce1);
  color: #11120e;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.trading-card:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

.static-card {
  cursor: default;
}

.static-card:hover {
  transform: none;
}

.unobtainable-card {
  filter: grayscale(1);
  opacity: 0.58;
}

.unobtainable-card::after {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(17, 18, 14, 0.22);
  content: "";
  pointer-events: none;
}

.unobtainable-card .unobtainable-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #11120e;
  color: #f5f5f0;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.trading-card.basic { --edition-color: #d9d9d2; }
.trading-card.uncommon { --edition-color: #80ffaa; }
.trading-card.rare { --edition-color: #7fb7ff; }
.trading-card.epic { --edition-color: #d78cff; }
.trading-card.legendary { --edition-color: #ffd36b; }
.trading-card.mythic { --edition-color: #ff5ce1; }

.trading-card.mythic {
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(232, 229, 255, 0.94)) padding-box,
    linear-gradient(130deg, #ff5ce1, #e9ff70, #7fb7ff, #ff5ce1) border-box;
  background-size: 100% 100%, 260% 260%;
  color: #11120e;
  box-shadow:
    0 0 28px rgba(255, 92, 225, 0.36),
    0 0 70px rgba(233, 255, 112, 0.18),
    0 28px 90px rgba(0, 0, 0, 0.44);
  animation: mythicGradient 4s linear infinite, mythicGlow 1.9s ease-in-out infinite alternate;
}

.trading-card.mythic::before {
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 24px;
  background: linear-gradient(130deg, #ff5ce1, #e9ff70, #7fb7ff, #ff5ce1);
  background-size: 260% 260%;
  content: "";
  filter: blur(18px);
  opacity: 0.46;
  animation: mythicGradient 4s linear infinite;
}

.trading-card.mythic .card-art {
  border-color: rgba(17, 18, 14, 0.82);
  box-shadow: 0 0 22px rgba(255, 92, 225, 0.24);
}

.trading-card.mythic .edition,
.trading-card.mythic .card-topline span {
  color: #11120e;
}

.trading-card.mythic .card-topline span,
.trading-card.mythic .attributes span,
.trading-card.mythic small {
  background: rgba(17, 18, 14, 0.12);
}

.card-topline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.card-topline strong {
  font-size: 22px;
  line-height: 1;
}

.card-topline span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #11120e;
}

.card-art {
  overflow: hidden;
  border: 3px solid #11120e;
  border-radius: 12px;
  background: #11120e;
}

.card-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1.4;
  object-fit: cover;
}

.edition {
  color: #11120e;
}

.trading-card p {
  margin: 0;
  line-height: 1.25;
}

.attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.attributes span,
.trading-card small {
  border-radius: 999px;
  background: rgba(17, 18, 14, 0.09);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 760;
}

.modal {
  width: min(760px, calc(100% - 28px));
  color: var(--text);
  padding: 24px;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.close {
  float: right;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  width: 36px;
  height: 36px;
}

#card-detail {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 18px;
  align-items: start;
}

.card-meta {
  display: grid;
  gap: 12px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.opening-modal {
  text-align: center;
}

.pack-opening {
  display: grid;
  place-items: center;
  min-height: 500px;
}

.sealed-pack {
  position: relative;
  display: grid;
  width: min(330px, 88vw);
  aspect-ratio: 0.72;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(233, 255, 112, 0.5);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(233, 255, 112, 0.22), transparent 36%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.16), transparent 42%),
    #080908;
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.64);
  animation: packPulse 1.1s ease-in-out infinite alternate;
}

.sealed-pack::before,
.sealed-pack::after {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  content: "";
}

.sealed-pack::after {
  inset: auto 0 50%;
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 56px rgba(255, 255, 255, 0.08),
    0 -56px rgba(255, 255, 255, 0.08);
}

.sealed-pack strong {
  position: relative;
  z-index: 1;
  max-width: 220px;
  font-size: 38px;
  font-weight: 900;
  line-height: 0.92;
}

.sealed-pack span {
  position: absolute;
  bottom: 42px;
  color: var(--signal);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.pack-shine {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 44%;
  height: 170%;
  background: rgba(255, 255, 255, 0.16);
  filter: blur(10px);
  transform: rotate(20deg);
  animation: packShine 1.25s ease-in-out infinite;
}

.reveal-wrap {
  width: min(320px, 100%);
  animation: revealCard 700ms ease both;
}

.redeem-box {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 430px);
  gap: 16px;
  align-items: end;
  margin-top: 14px;
  padding: clamp(18px, 4vw, 28px);
}

.redeem-box h2 {
  font-size: clamp(32px, 5vw, 54px);
}

.redeem-form {
  display: flex;
  gap: 10px;
}

.redeem-message {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-weight: 760;
}

@keyframes revealCard {
  from {
    opacity: 0;
    transform: translateY(40px) rotateY(80deg) scale(0.86);
  }
}

@keyframes mythicGradient {
  from {
    background-position: 0% 50%, 0% 50%;
  }

  to {
    background-position: 0% 50%, 260% 50%;
  }
}

@keyframes mythicGlow {
  from {
    box-shadow:
      0 0 24px rgba(255, 92, 225, 0.3),
      0 0 58px rgba(233, 255, 112, 0.14),
      0 28px 90px rgba(0, 0, 0, 0.44);
  }

  to {
    box-shadow:
      0 0 38px rgba(255, 92, 225, 0.52),
      0 0 94px rgba(233, 255, 112, 0.24),
      0 28px 90px rgba(0, 0, 0, 0.44);
  }
}

@keyframes packPulse {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes packShine {
  from {
    translate: -120% 0;
  }

  to {
    translate: 360% 0;
  }
}

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

@media (max-width: 620px) {
  .cards-page {
    width: min(100% - 28px, 1180px);
  }

  .wallet,
  .pack-grid,
  .cards-grid,
  .filters,
  #card-detail,
  .owned-pack,
  .redeem-box {
    grid-template-columns: 1fr;
  }

  .redeem-form {
    flex-direction: column;
    align-items: stretch;
  }

  .trading-card {
    min-height: 390px;
  }
}