:root {
  --amber: #ffb000;
  --amber-hot: #ffd35c;
  --white-line: rgba(224, 236, 238, 0.9);
  --muted-line: rgba(205, 225, 229, 0.42);
  --panel: rgba(0, 0, 0, 0.62);
  --text: #e7edf0;
  --dim: #98a5aa;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: #020505;
  color: var(--text);
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

button {
  font: inherit;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0 13%, rgba(0, 0, 0, 0.72) 33%, rgba(4, 22, 23, 0.54) 100%),
    radial-gradient(circle at 62% 108%, rgba(192, 224, 232, 0.24), transparent 26%),
    linear-gradient(180deg, #071010, #010303 68%);
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage::before {
  z-index: -1;
  opacity: 0.72;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 82% 26%, rgba(164, 218, 224, 0.18), transparent 22%);
  mix-blend-mode: screen;
}

.stage::after {
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(255, 135, 0, 0.08), transparent 16%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 5px);
  opacity: 0.32;
}

.bg {
  position: absolute;
  inset: -8vh -5vw;
  z-index: -2;
  filter: blur(18px);
  transform: translateZ(0);
}

.beam {
  position: absolute;
  top: -4vh;
  width: 4.8vw;
  min-width: 52px;
  height: 118vh;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(223, 250, 255, 0.86), rgba(157, 215, 230, 0.18) 29%, rgba(230, 250, 255, 0.8) 52%, rgba(125, 184, 197, 0.14) 83%);
  opacity: 0.34;
  animation: beamDrift 9s ease-in-out infinite alternate;
}

.beam::after {
  content: "";
  position: absolute;
  left: -22%;
  right: -22%;
  bottom: -3vh;
  height: 28vh;
  border-radius: 50%;
  background: rgba(219, 244, 248, 0.38);
  filter: blur(12px);
}

.beam-a { left: 49vw; animation-delay: -1.2s; }
.beam-b { left: 60vw; opacity: 0.48; animation-delay: -4s; }
.beam-c { left: 71vw; animation-delay: -2.1s; }
.beam-d { left: 83vw; opacity: 0.38; animation-delay: -5.4s; }
.beam-e { left: 94vw; opacity: 0.24; animation-delay: -3.2s; }

@keyframes beamDrift {
  from { transform: translateX(-1.3vw) scaleY(0.98); }
  to { transform: translateX(1.3vw) scaleY(1.02); }
}

.hud {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 174px minmax(620px, 1fr) 210px;
  align-items: center;
  gap: 22px;
  padding: 66px 96px 0;
}

.profile,
.wallet {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dce7ea;
  font-size: 20px;
  text-transform: uppercase;
}

.avatar,
.rank {
  height: 34px;
  border-left: 2px solid rgba(228, 239, 242, 0.82);
  border-right: 2px solid rgba(228, 239, 242, 0.82);
  display: grid;
  place-items: center;
  background: rgba(10, 15, 16, 0.72);
}

.avatar {
  width: 38px;
  color: var(--amber);
  font-size: 15px;
  border-color: transparent rgba(228, 239, 242, 0.82) transparent transparent;
}

.rank {
  min-width: 40px;
}

.wallet {
  justify-self: end;
  gap: 38px;
  min-width: 180px;
  padding: 8px 18px;
  justify-content: center;
  border-left: 2px solid rgba(228, 239, 242, 0.82);
  border-right: 2px solid rgba(228, 239, 242, 0.82);
  background: rgba(20, 29, 30, 0.58);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  max-width: 920px;
  height: 50px;
}

.tab {
  position: relative;
  color: rgba(218, 228, 232, 0.56);
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  border-right: 1px solid rgba(222, 239, 243, 0.55);
  border-left: 1px solid rgba(222, 239, 243, 0.13);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 23px;
  cursor: pointer;
}

.tab.active {
  color: #e8eef1;
  background: rgba(45, 50, 51, 0.72);
}

.tab.active::before,
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 2px;
  height: 6px;
  background: #edf5f6;
}

.tab.active::before { left: -1px; }
.tab.active::after { right: -1px; }

.menu-shell {
  position: relative;
  z-index: 3;
  margin: clamp(36px, 5.9vh, 64px) auto 0;
  width: min(1686px, calc(100vw - 12vw));
}

.deck-title {
  position: absolute;
  left: 1px;
  top: -26px;
  color: rgba(190, 206, 211, 0.46);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: clamp(500px, calc(100vh - 250px), 736px);
  border: 1px solid var(--muted-line);
  background: rgba(0, 0, 0, 0.12);
}

.stage.transitioning .card-content {
  opacity: 0;
  transform: translateX(-44px);
  filter: blur(9px);
}

.card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
  min-height: 100%;
  border: 0;
  border-right: 1px solid var(--muted-line);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.38)),
    rgba(3, 6, 7, 0.42);
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.card:last-child {
  border-right: 0;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 3px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear, border-color 120ms linear, box-shadow 120ms linear;
}

.card::after {
  content: "";
  position: absolute;
  left: 44px;
  top: -2px;
  width: 54%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--amber-hot) 12%, var(--amber) 88%, transparent);
  opacity: 0;
  filter: blur(0.3px) drop-shadow(0 0 10px rgba(255, 158, 0, 0.94));
  transition: opacity 120ms linear, transform 140ms ease;
}

.card.is-active::before {
  opacity: 1;
  border-color: var(--amber);
  box-shadow:
    inset 0 0 42px rgba(255, 115, 0, 0.16),
    0 0 0 1px rgba(255, 210, 80, 0.18),
    0 0 26px rgba(255, 126, 0, 0.48);
}

.card.is-active::after {
  opacity: 1;
}

.card.is-active {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.44)),
    rgba(3, 6, 7, 0.74);
}

.card-content {
  position: relative;
  width: 100%;
  padding: clamp(42px, 6.4vh, 70px) 30px 30px;
  transition: opacity 180ms linear, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms linear;
}

.holo-wrap {
  position: relative;
  height: 43%;
  min-height: 210px;
  margin-bottom: clamp(14px, 2.2vh, 24px);
}

.holo-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 3px rgba(230, 247, 250, 0.32));
  transition: filter 140ms linear, opacity 140ms linear;
}

.holo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 176, 0, 0.82);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.42;
}

.three-ready .holo-fallback {
  display: none;
}

.card.is-active canvas {
  filter:
    drop-shadow(0 0 3px rgba(255, 230, 96, 0.84))
    drop-shadow(0 0 16px rgba(255, 126, 0, 0.54));
}

.glyph {
  color: rgba(204, 222, 225, 0.46);
  font-family: Monaco, "Courier New", monospace;
  font-size: 13px;
  line-height: 1;
  transform: scaleX(1.5);
  transform-origin: left center;
  margin-bottom: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.card h2 {
  margin: 0;
  color: #f3f7f8;
  font-size: clamp(38px, 3.2vw, 52px);
  line-height: 0.92;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 0 0 transparent;
  transition: color 120ms linear, text-shadow 120ms linear;
}

.card.is-active h2 {
  color: var(--amber-hot);
  text-shadow:
    0 0 5px rgba(255, 222, 92, 0.86),
    0 0 18px rgba(255, 100, 0, 0.66),
    -9px 0 18px rgba(255, 68, 0, 0.48);
}

.rule {
  width: 72px;
  height: 1px;
  margin: 20px 0 10px;
  background: rgba(224, 235, 238, 0.58);
}

.description {
  max-width: 500px;
  color: rgba(193, 205, 209, 0.72);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
}

.meta {
  position: absolute;
  left: 30px;
  bottom: 30px;
  color: rgba(226, 235, 238, 0.88);
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 800;
}

.meta::before,
.meta::after {
  content: "";
  display: block;
  width: 112px;
  height: 1px;
  margin: 0 0 10px;
  background: rgba(229, 239, 241, 0.76);
}

.meta::after {
  margin: 10px 0 0;
}

.footer-hint {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(1686px, calc(100vw - 12vw));
  margin: clamp(14px, 2.8vh, 30px) auto 0;
  color: #e7eff1;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
}

.select-dot {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #071010;
  background: #dce9ec;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.back {
  height: 32px;
  padding: 0 14px;
  color: #dfe9ec;
  text-transform: uppercase;
  border: 1px solid rgba(226, 240, 242, 0.48);
  background: rgba(0, 0, 0, 0.42);
  cursor: pointer;
}

.hidden {
  display: none;
}

@media (max-width: 1100px) {
  html,
  body {
    position: static;
    overflow: hidden;
  }

  .stage {
    position: relative;
    inset: auto;
    height: 100svh;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hud {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px 0;
  }

  .profile,
  .wallet {
    display: none;
  }

  .tabs {
    width: 100%;
    max-width: none;
    grid-auto-columns: minmax(104px, max-content);
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    font-size: 15px;
  }

  .menu-shell,
  .footer-hint {
    width: calc(100vw - 28px);
  }

  .cards {
    display: flex;
    overflow-x: auto;
    height: clamp(540px, calc(100svh - 176px), 620px);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cards::-webkit-scrollbar {
    display: none;
  }

  .card {
    flex: 0 0 86vw;
    min-height: 100%;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .stage {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0 16%, rgba(0, 0, 0, 0.76) 44%, rgba(4, 22, 23, 0.5) 100%),
      radial-gradient(circle at 72% 100%, rgba(192, 224, 232, 0.2), transparent 30%),
      linear-gradient(180deg, #071010, #010303 72%);
  }

  .hud {
    padding: max(18px, env(safe-area-inset-top)) 14px 0;
  }

  .tabs {
    height: 42px;
    grid-auto-columns: minmax(92px, max-content);
  }

  .tab {
    padding: 0 13px;
    font-size: 13px;
  }

  .menu-shell {
    width: calc(100vw - 18px);
    margin-top: 30px;
  }

  .deck-title {
    top: -21px;
  }

  .cards {
    height: clamp(472px, calc(100svh - 150px), 560px);
  }

  .card {
    flex-basis: min(88vw, 420px);
  }

  .card-content {
    padding: 30px 22px 72px;
  }

  .holo-wrap {
    height: 36%;
    min-height: 156px;
    margin-bottom: 16px;
  }

  .glyph {
    font-size: 11px;
    transform: scaleX(1.26);
  }

  .card h2 {
    font-size: clamp(30px, 9vw, 40px);
    line-height: 0.96;
  }

  .rule {
    margin: 16px 0 9px;
  }

  .description {
    font-size: 15px;
    line-height: 1.32;
  }

  .meta {
    left: 22px;
    bottom: 22px;
    font-size: 16px;
  }

  .footer-hint {
    width: calc(100vw - 18px);
    margin-top: 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    font-size: 14px;
  }

  .select-dot {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}