:root {
  --bronze: rgba(204, 128, 72, 0.74);
  --gold: #dfac77;
  --dark: rgba(3, 3, 3, 0.88);
  --green: #34ca62;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #000;
}

body {
  display: grid;
  place-items: start center;
  overflow-x: auto;
  color: #eee8df;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.pixel-page {
  position: relative;
  width: 1536px;
  height: 1152px;
  flex: 0 0 auto;
  background-position: 0 0;
  background-size: 1536px auto;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page-dashboard {
  background-image: url('./assets/final-reference/main-reference-desktop.png');
}

.page-proof {
  background-image: url('./assets/final-reference/support-proof-reference-desktop.png');
}

body[data-page='dashboard'] .page-dashboard {
  background-image: url('./assets/final-reference/main-reference-desktop.png');
}

.page-access {
  background-image: url('./assets/final-reference/access-key-reference-desktop.png');
}

.page-squad {
  background-image: url('./assets/final-reference/unlock-path-reference-desktop.png');
}

.hot-nav,
.nav-hot,
.hot-card {
  position: absolute;
  z-index: 20;
}

.nav-hot,
.hot-card {
  display: block;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.nav-hot:hover,
.hot-card:hover {
  box-shadow: 0 0 0 1px rgba(230, 159, 93, 0.62) inset, 0 0 28px rgba(208, 119, 55, 0.24);
  background: linear-gradient(180deg, rgba(214, 125, 61, 0.08), rgba(214, 125, 61, 0.02));
}

.nav-hot.active {
  box-shadow: 0 -2px 0 rgba(231, 163, 92, 0.72) inset, 0 17px 30px rgba(197, 111, 48, 0.18);
}

.dashboard-nav-fix {
  display: none;
}

.page-dashboard .dashboard-hot.active {
  background: linear-gradient(180deg, rgba(189, 116, 62, 0.18), rgba(43, 24, 15, 0.24));
  box-shadow:
    0 -1px 0 rgba(231, 163, 92, 0.45) inset,
    0 -3px 0 rgba(231, 163, 92, 0.82) inset,
    0 17px 30px rgba(197, 111, 48, 0.18);
}

.page-dashboard .dashboard-hot.active::after {
  content: '';
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 1px;
  height: 3px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(237, 174, 101, 0.72), rgba(237, 174, 101, 0) 72%);
  box-shadow: 0 0 10px rgba(237, 174, 101, 0.36);
}

.dashboard-image-patch {
  position: absolute;
  z-index: 29;
  background-image: url('./assets/new addition/main-header-wallet-connect-desktop.png');
  background-repeat: no-repeat;
  background-size: 1536px auto;
  pointer-events: none;
}

.dashboard-proof-inactive-patch {
  left: 552px;
  top: 13px;
  width: 132px;
  height: 92px;
  background-position: -552px -13px;
  filter: none;
}

.dashboard-proof-inactive-patch::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 34px;
  background: rgba(3, 3, 3, 1);
  box-shadow: 0 -12px 22px rgba(3, 3, 3, 1);
}

.dashboard-proof-inactive-patch::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 19px;
  width: 88px;
  height: 28px;
  background: rgba(3, 3, 3, 0.28);
}



.dashboard-wallet-connect-patch {
  left: 1130px;
  top: 17px;
  width: 390px;
  height: 62px;
  background-position: -1130px -17px;
  border-radius: 5px;
}

.page-dashboard .wallet-cover {
  opacity: 0;
  pointer-events: none;
}

.page-dashboard .dashboard-wallet-connect-patch.connected {
  opacity: 0;
}

.dashboard-hot { left: 421px; top: 17px; width: 128px; height: 62px; }
.proof-hot { left: 574px; top: 17px; width: 101px; height: 62px; }
.access-hot { left: 675px; top: 17px; width: 111px; height: 62px; }
.squad-hot { left: 786px; top: 17px; width: 113px; height: 62px; }
.console-hot { left: 899px; top: 17px; width: 105px; height: 62px; }
.wallet-hot { left: 1004px; top: 17px; width: 116px; height: 62px; }

.wallet-cover {
  position: absolute;
  z-index: 30;
  left: 1130px;
  top: 17px;
  width: 390px;
  height: 62px;
  display: grid;
  grid-template-columns: 1fr 178px;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(184, 119, 73, 0.3);
  border-radius: 5px;
  background: #050505;
  transition: opacity 180ms ease, transform 180ms ease;
}

.wallet-cover.connected {
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
}

.wallet-cover button {
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  align-items: center;
  border: 0;
  background: transparent;
  text-align: left;
  color: #e9ded2;
  cursor: pointer;
}

.wallet-cover button span {
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9d8a78;
  box-shadow: 0 0 11px rgba(157, 119, 87, 0.42);
}

.wallet-cover b,
.wallet-cover small,
.wallet-cover em {
  font-family: 'Oswald', 'Teko', sans-serif;
  text-transform: uppercase;
}

.wallet-cover b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.wallet-cover small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: #b4aaa2;
}

.wallet-cover em {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(197, 121, 71, 0.56);
  border-radius: 4px;
  background: rgba(20, 12, 8, 0.9);
  color: #e0b186;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.dash-watch { left: 101px; top: 630px; width: 180px; height: 157px; }
.dash-venue { left: 284px; top: 630px; width: 158px; height: 157px; }
.dash-quiz { left: 449px; top: 630px; width: 105px; height: 157px; }
.dash-ama { left: 582px; top: 630px; width: 121px; height: 157px; }
.dash-merch { left: 714px; top: 630px; width: 121px; height: 157px; }
.dash-arena { left: 846px; top: 630px; width: 121px; height: 157px; }
.dash-event { left: 997px; top: 596px; width: 458px; height: 202px; }
.dash-squad { left: 96px; top: 818px; width: 356px; height: 151px; }
.dash-console-ama { left: 728px; top: 861px; width: 222px; height: 90px; }
.dash-console-merch { left: 963px; top: 861px; width: 228px; height: 90px; }
.dash-console-arena { left: 1207px; top: 861px; width: 228px; height: 90px; }

.proof-watch { left: 90px; top: 823px; width: 430px; height: 166px; }
.proof-venue { left: 550px; top: 823px; width: 428px; height: 166px; }
.proof-quiz { left: 1006px; top: 823px; width: 430px; height: 166px; }
.proof-ama { left: 897px; top: 640px; width: 544px; height: 72px; }

.proof-mask {
  position: absolute;
  z-index: 12;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(2, 2, 2, 0.95), rgba(9, 8, 7, 0.95));
  box-shadow: 0 0 0 1px rgba(78, 56, 42, 0.24) inset;
  backdrop-filter: blur(0.2px) saturate(0.55);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.proof-mask.revealed {
  opacity: 0;
  transform: scale(0.992);
}

.mask-path-watch,
.mask-path-venue,
.mask-path-quiz,
.mask-key-row {
  display: none;
}

.mask-status {
  left: 90px;
  top: 671px;
  width: 730px;
  height: 80px;
}

.mask-status::after {
  content: 'CONNECT WALLET TO REVEAL PROOF STATUS';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: 'Oswald', 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(207, 190, 176, 0.68);
}

.mask-card-watch { left: 106px; top: 949px; width: 212px; height: 31px; }
.mask-card-venue { left: 564px; top: 949px; width: 212px; height: 31px; }
.mask-card-quiz { left: 1024px; top: 949px; width: 212px; height: 31px; }

.mask-card-watch::after,
.mask-card-venue::after,
.mask-card-quiz::after {
  content: 'PENDING';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Oswald', 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.21em;
  color: rgba(207, 190, 176, 0.7);
}

.mask-ama {
  left: 897px;
  top: 640px;
  width: 544px;
  height: 72px;
  background: rgba(3, 3, 3, 0.72);
}

.demo-toast {
  position: absolute;
  z-index: 40;
  left: 920px;
  top: 724px;
  min-width: 380px;
  padding: 9px 14px;
  border: 1px solid rgba(190, 117, 68, 0.42);
  border-radius: 4px;
  background: rgba(5, 5, 5, 0.9);
  color: #d8cabe;
  font: 600 13px/1.2 'Roboto Condensed', sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.demo-toast.show {
  opacity: 1;
}

.access-open-top { left: 1055px; top: 307px; width: 369px; height: 62px; }
.access-card-ama { left: 69px; top: 489px; width: 459px; height: 355px; }
.access-card-merch { left: 550px; top: 489px; width: 434px; height: 355px; }
.access-card-arena { left: 1009px; top: 489px; width: 458px; height: 355px; }

.squad-event { left: 74px; top: 316px; width: 1394px; height: 327px; }
.squad-progress { left: 74px; top: 658px; width: 689px; height: 330px; }
.squad-unlock { left: 784px; top: 658px; width: 683px; height: 330px; }

.cs-modal {
  width: min(480px, calc(100% - 32px));
  padding: 0;
  border: 1px solid rgba(229, 164, 103, 0.74);
  border-radius: 8px;
  background: transparent;
  color: #eee8df;
}

.cs-modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.cs-modal div {
  padding: 28px;
  background: linear-gradient(135deg, rgba(179, 103, 54, 0.22), transparent 38%), #080807;
}

.cs-modal h2 {
  margin: 0 0 8px;
  font: 600 34px/1 'Teko', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e7c098;
}

.cs-modal p {
  margin: 0;
  color: #c6bbb1;
  font: 400 16px/1.5 'Roboto Condensed', sans-serif;
}

.cs-modal button {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border: 1px solid rgba(229, 164, 103, 0.76);
  border-radius: 5px;
  background: rgba(91, 48, 24, 0.88);
  color: #f2d8b8;
  font: 600 22px/1 'Teko', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1535px) {
  body {
    overflow-x: hidden;
  }

  .pixel-page {
    transform: scale(calc(100vw / 1536));
    transform-origin: top center;
  }
}