/* ============================================================
   GIGA LEGENDS — styled after the Gigaverse UI
   fonts: m5x7 (body) + bitcell (headings) · 9-slice pixel panels
   ============================================================ */

@font-face { font-family: m5x7; src: url('../assets/fonts/m5x7.ttf') format('truetype'); font-display: block; }
@font-face { font-family: bitcell; src: url('../assets/fonts/bitcell.ttf') format('truetype'); font-display: block; }

:root {
  --bg: #060b14;
  --bg-2: #081420;
  --bg-3: #0b1b2a;
  --line: rgba(4, 131, 171, .4);
  --line-solid: #0b4a63;

  --text: #e0e0e0;
  --heading: #f2f2f2;
  --muted: #7a8a9e;

  --gold: #f5c563;
  --cyan: #02c7d7;
  --cyan-hi: #2ad4ee;
  --ice: #bfefff;
  --purple: #e39bff;
  --red: #ff7a7a;
  --green: #5fe08a;
  --ribbon: #9b1b2e;

  --f-body: m5x7, ui-monospace, monospace;
  --f-head: bitcell, ui-monospace, monospace;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 24px;
  line-height: 1.35;
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow-x: hidden;
}
body.gate-open { overflow: hidden; }
img { image-rendering: pixelated; display: block; }
a { color: inherit; }
b { font-weight: normal; color: var(--heading); }
::selection { background: var(--cyan); color: #00151a; }

.c-gold { color: var(--gold); }
.c-cyan { color: var(--cyan); }
.c-purple { color: var(--purple); }
.c-red { color: var(--red); }
.c-green { color: var(--green); }

.wrap { max-width: var(--max); margin: 0 auto; }
.wrap--narrow { max-width: 860px; }

/* ---------- 9-slice building blocks (Gigaverse UI) ---------- */
.panel {
  border-style: solid;
  border-width: 6px;
  border-image: url('../assets/img/panel.png') 3 fill stretch;
  image-rendering: pixelated;
}
.slot {
  border-style: solid;
  border-width: 6px;
  border-image: url('../assets/img/input.png') 3 fill stretch;
  image-rendering: pixelated;
}
.window {
  position: relative;
  border-style: solid;
  border-width: 6px;
  border-image: url('../assets/img/panel.png') 3 fill stretch;
  image-rendering: pixelated;
  background: transparent;
}

/* ---------- wordmark: orange gradient + pink 3D shadow ---------- */
.wordmark {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-head);
  font-weight: normal;
  line-height: .9;
  text-decoration: none;
  letter-spacing: .02em;
}
.wordmark span {
  position: relative;
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #fff6c2 0%, #ffd84a 30%, #ffb21e 52%, #ff8a1a 53%, #ff7a12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
}
.wordmark span::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #1a0710;
  text-shadow:
    0 .09em 0 #e2306f,
    0 .14em 0 #a5144c,
    .045em 0 0 #1a0710, -.045em 0 0 #1a0710, 0 .045em 0 #1a0710, 0 -.045em 0 #1a0710,
    .045em .19em 0 #1a0710, -.045em .19em 0 #1a0710, 0 .2em 0 #1a0710;
}
.wordmark--xl span { font-size: clamp(56px, 13vw, 168px); }
.wordmark--xl span + span { font-size: clamp(40px, 9.4vw, 122px); margin-top: .02em; }
.wordmark--sm { flex-direction: row; }
.wordmark--sm span { font-size: 30px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-family: var(--f-head);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 12px 22px 13px;
  border: 2px solid;
  transition: transform .08s, filter .12s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.btn--gold {
  color: #3a1e00;
  border-color: #f5c563;
  background: linear-gradient(#ffe070 0%, #f0c040 48%, #d8a020 52%, #c08010 100%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 204, .45), 0 2px 0 rgba(0, 0, 0, .4);
}
.btn--teal {
  color: var(--ice);
  border-color: #0a8fb0;
  background: linear-gradient(#0d6e88 0%, #0b5d75 48%, #094c61 52%, #083f52 100%);
  box-shadow: inset 0 1px 0 rgba(191, 239, 255, .25), 0 2px 0 rgba(0, 0, 0, .45);
}
.btn--dark {
  color: var(--muted);
  border-color: var(--line-solid);
  background: var(--bg-2);
}
.btn--dark:hover { color: var(--text); }
.btn--lg { font-size: 24px; padding: 15px 28px 16px; }
.btn--sm { font-size: 17px; padding: 9px 15px 10px; }

/* ---------- top bar + nav ---------- */
.topbar {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 7px 16px;
  font-size: 20px;
  color: var(--text);
  background: var(--bg);
  border-bottom: 1px solid rgba(122, 138, 158, .18);
  position: relative;
  z-index: 101;
}
.topbar a { color: var(--cyan); text-decoration: none; border-bottom: 1px dotted var(--cyan); }
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 28px);
  background: rgba(6, 11, 20, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(4, 131, 171, .25);
}
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-family: var(--f-head);
  font-size: 18px;
  color: #c9cfd8;
  text-decoration: none;
  letter-spacing: .04em;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--gold); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-x {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--ice);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.nav-x:hover { color: var(--gold); }
body.has-pass .nav-cta .btn { border-color: #2fb46a; background: linear-gradient(#1f8a52, #156b3f); color: #d8ffe6; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - 110px);
  display: grid;
  place-items: center;
  padding: 56px 16px 72px;
}
.hero-forest {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  image-rendering: pixelated;
  filter: blur(2px) brightness(.62) saturate(1.05);
  z-index: -2;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 60% at 50% 52%, rgba(6, 11, 20, .55), transparent 75%),
    linear-gradient(180deg, rgba(6, 11, 20, .5), transparent 20%, transparent 78%, var(--bg));
}
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }

.live-tag {
  font-family: var(--f-head);
  font-size: clamp(20px, 2.6vw, 30px);
  color: #ff6a3d;
  letter-spacing: .03em;
  text-shadow: 0 2px 0 #4a0d0d, 2px 0 0 #4a0d0d, -2px 0 0 #4a0d0d, 0 -2px 0 #4a0d0d;
  margin-bottom: 14px;
}

/* crest = the Awakening-style banner card */
.crest {
  position: relative;
  width: min(600px, 100%);
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.crest-gem { position: relative; width: 220px; height: 64px; display: grid; place-items: center; margin-bottom: -18px; z-index: 2; }
.crest-chains { position: absolute; left: 0; right: 0; bottom: 4px; width: 100%; height: 40px; }
.crest-gem img { position: relative; width: 60px; height: 60px; filter: drop-shadow(0 0 10px rgba(227, 155, 255, .55)); animation: gem 3s ease-in-out infinite; }
@keyframes gem { 50% { transform: translateY(-4px); filter: drop-shadow(0 0 16px rgba(95, 224, 138, .6)); } }

.ribbon {
  position: relative;
  z-index: 1;
  width: calc(100% + 64px);
  max-width: calc(100vw - 16px);
  display: flex;
  align-items: stretch;
}
.ribbon-text {
  flex: 1;
  font-family: var(--f-head);
  font-size: clamp(26px, 5vw, 46px);
  line-height: 1;
  padding: 14px 10px 16px;
  color: #ffd84a;
  background: linear-gradient(#b3243a 0 12%, var(--ribbon) 12% 88%, #6e0f1f 88%);
  border-top: 4px solid #f0a020;
  border-bottom: 4px solid #f0a020;
  box-shadow: 0 4px 0 #2a0508, 0 -4px 0 #2a0508;
  text-shadow: 0 3px 0 #7a2a00, 2px 0 0 #3a0a00, -2px 0 0 #3a0a00, 0 -2px 0 #3a0a00;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ribbon-end {
  width: 40px;
  margin: 12px 0 -12px;
  background: #6e0f1f;
  border-top: 4px solid #c27612;
  border-bottom: 4px solid #c27612;
}
.ribbon-end--l { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); margin-right: -6px; }
.ribbon-end--r { clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); margin-left: -6px; }

.crest-main {
  width: 100%;
  margin-top: -6px;
  padding: 22px 16px 18px;
}
.crest-amount {
  font-family: var(--f-head);
  font-size: clamp(64px, 11vw, 104px);
  line-height: .9;
  color: var(--gold);
  text-shadow: 0 5px 0 #7a4a00, 3px 0 0 #2a1400, -3px 0 0 #2a1400, 0 -3px 0 #2a1400;
}
.crest-dollar { font-size: .62em; vertical-align: .32em; margin-right: .04em; }
.crest-sub {
  margin-top: 8px;
  font-family: var(--f-head);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
  color: #4ee08a;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #0c4a26, 2px 0 0 #031a0c, -2px 0 0 #031a0c, 0 -2px 0 #031a0c;
}
.crest-or { width: calc(100% - 28px); margin-top: 14px; padding: 18px 16px 22px; }
.crest-or p { margin: 0 0 18px; font-size: 26px; color: var(--text); }
.crest-or i { color: var(--muted); }
.crest-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 6px 12px 6px 6px;
  font-family: var(--f-body);
  font-size: 22px;
  color: var(--text);
  background: rgba(8, 20, 32, .9);
  border: 1px solid var(--line);
  cursor: pointer;
  max-width: 100%;
}
.ca-chip:hover { border-color: var(--cyan); }
.ca-label { font-family: var(--f-head); font-size: 15px; padding: 4px 7px 5px; background: #0b4a63; color: var(--ice); }
.ca-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { color: var(--cyan); }
.ca-chip--block { display: flex; width: 100%; justify-content: space-between; margin-top: 18px; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 120px) clamp(16px, 4vw, 40px); }
.section--deep { background: linear-gradient(180deg, var(--bg), #07121d 18%, #07121d 82%, var(--bg)); }
.sec-head { text-align: center; max-width: 820px; margin: 0 auto 52px; }
.h2 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: normal;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
  color: var(--heading);
}
.lead { margin: 18px auto 0; color: var(--muted); font-size: 26px; max-width: 720px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--d, 0ms), transform .5s var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .crest-gem img { animation: none; }
}

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature { padding: 24px 20px 22px; }
.feature img { width: 64px; height: 64px; margin-bottom: 14px; }
.feature h3 { margin: 0 0 8px; font-family: var(--f-head); font-weight: normal; font-size: 28px; }
.feature p { margin: 0; color: var(--muted); font-size: 22px; }

/* ---------- event window (access) ---------- */
.window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #02060b;
  border-bottom: 3px solid var(--line-solid);
}
.window-icon { flex: none; }
.window-title { margin: 0; font-family: var(--f-head); font-weight: normal; font-size: 30px; color: #fff; }
.window-x {
  margin-left: auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  background: var(--cyan-hi);
  box-shadow: inset -3px -3px 0 #0a8fb0, inset 3px 3px 0 #8af0ff;
  cursor: pointer;
}
.tabs { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; background: #040a12; border-bottom: 3px solid var(--line-solid); }
.tab {
  font-size: 22px;
  color: #c9cfd8;
  padding: 7px 20px 9px;
  background: #02060b;
  border: 3px solid #0b3446;
  border-radius: 6px;
}
.tab.is-active { color: #fff; border-color: var(--cyan-hi); }
.tab--counter { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 26px; }
.tab--counter b { font-family: var(--f-head); }
.window-body { padding: clamp(18px, 3vw, 34px); background: var(--bg-3); }
.deals-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-bottom: 20px; margin-bottom: 26px; border-bottom: 2px solid #11324a; }
.deals-title { margin: 0; font-family: var(--f-head); font-weight: normal; font-size: 36px; color: #fff; }
.deals-sub { margin: 6px 0 0; color: var(--muted); }
.deals-meta { text-align: right; }
.deals-meta p { margin: 0; color: var(--muted); font-size: 22px; }
.deals-meta .c-cyan { color: #39e6c8; font-size: 24px; }
.deals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.deal {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 14px;
  padding: 20px;
  border: 3px solid #0b3446;
  border-radius: 8px;
  background: #091927;
}
.deal .slot { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 14px; }
.deal .slot img { width: 56px; height: 56px; }
.slot--art img { width: 72px !important; height: 72px !important; }
.slot-count {
  position: absolute;
  left: 50%; bottom: -22px;
  translate: -50% 0;
  min-width: 70px;
  text-align: center;
  font-size: 22px;
  padding: 1px 8px 3px;
  color: #fff;
  background: #02060b;
  border: 3px solid #0b3446;
  border-radius: 6px;
}
.deal-arrow {
  width: 30px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23063845' d='M4 0h2v1h1v1h1v1h1v1h1v2H9v1H8v1H7v1H6v1H4V7H0V3h4z'/%3E%3Cpath fill='%232ad4ee' d='M5 1h1v1h1v1h1v1h1v2H8v1H7v1H6v1H5V6H1V4h4z'/%3E%3Cpath fill='%23bfefff' d='M5 1h1v1H5zM1 4h4v1H1z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
}
.deal-info { display: flex; flex-direction: column; text-align: right; }
.deal-info b { font-family: var(--f-head); font-size: 22px; }
.deal-info span { color: var(--muted); font-size: 20px; }
.deal-btn { grid-column: 1 / -1; }
.deal--how { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.deal--how ol { margin: 0; padding-left: 28px; color: var(--muted); display: grid; gap: 8px; }
.deal--how li::marker { color: var(--gold); font-family: var(--f-head); }

/* ---------- podium ---------- */
.podium {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  max-width: 900px;
  gap: 12px;
}
.podium-spot { display: flex; flex-direction: column; align-items: center; text-align: center; }
.podium-spot--2 { order: 1; }
.podium-spot--1 { order: 2; }
.podium-spot--3 { order: 3; }
.podium-art {
  position: relative;
  z-index: 1;
  margin-bottom: -10px;
  border: 4px solid #02060b;
  box-shadow: 0 0 0 3px #f2f2f2, 0 0 0 7px #02060b;
  max-width: 80%;
  height: auto;
  animation: idle 2.4s steps(2) infinite;
}
.podium-spot--1 .podium-art { animation-delay: .4s; }
.podium-spot--3 .podium-art { animation-delay: .8s; }
@keyframes idle { 50% { transform: translateY(-4px); } }
.plinth { max-width: 100%; height: auto; }
.podium-name { margin: 14px 0 0; font-family: var(--f-head); font-size: 26px; color: var(--heading); }
.podium-faction { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 24px; }
.podium-faction img { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .podium-art { animation: none; } }

.legend-strip { display: flex; justify-content: center; gap: 14px; margin-top: 56px; flex-wrap: wrap; }
.legend-strip img {
  width: 96px; height: 96px;
  border: 3px solid #02060b;
  box-shadow: 0 0 0 2px #0b4a63;
  filter: saturate(.85);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.legend-strip img:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold); filter: none; }

/* ---------- token ---------- */
.token { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px 36px; padding: clamp(18px, 3vw, 34px); }
.token-sym { display: flex; align-items: center; gap: 14px; font-family: var(--f-head); font-size: 36px; color: var(--gold); }
.token-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-family: var(--f-head); font-size: clamp(44px, 6vw, 64px); color: #fff; }
.token-price sub { font-size: .5em; }
.token-price em { font-style: normal; font-family: var(--f-body); font-size: 26px; }
.token-price .up { color: var(--green); }
.token-price .down { color: var(--red); }
.token-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.stat { display: flex; flex-direction: column; padding: 10px 12px; }
.stat span { color: var(--muted); font-size: 20px; }
.stat b { font-family: var(--f-head); font-size: 26px; }
.token-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- FAQ (Gigaverse FAQ page style) ---------- */
.faq-h { margin: 0 0 18px; padding-bottom: 18px; font-family: var(--f-head); font-weight: normal; font-size: 40px; color: var(--gold); border-bottom: 2px solid #8a6d2a; }
.faq details { border-bottom: 1px solid rgba(122, 138, 158, .18); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0;
  font-family: var(--f-head);
  font-size: 26px;
  color: var(--heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--gold); }
.faq details[open] summary::before { background: var(--cyan); }
.faq summary:hover { color: var(--gold); }
.faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.faq details p { margin: 0 0 22px 22px; color: var(--muted); }

/* ---------- footer ---------- */
.footer { padding: 36px clamp(16px, 4vw, 40px) 44px; border-top: 1px solid rgba(4, 131, 171, .25); background: #04080f; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-links { display: flex; gap: 26px; }
.footer-links a { font-family: var(--f-head); font-size: 18px; color: #c9cfd8; text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.footer-fine { margin-top: 18px; color: var(--muted); font-size: 20px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 300;
  padding: 10px 16px 12px;
  font-family: var(--f-head); font-size: 18px;
  color: var(--ice); background: #0b4a63; border: 2px solid var(--cyan-hi);
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

/* ============================================================
   THE GATE (modal)
   ============================================================ */
.gate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.gate.open { visibility: visible; opacity: 1; transition: opacity .2s; }
.gate-backdrop { position: absolute; inset: 0; background: rgba(2, 5, 10, .82); backdrop-filter: blur(3px); }
.gate-panel { position: relative; width: min(500px, 100%); max-height: calc(100svh - 32px); overflow: auto; transform: translateY(8px); transition: transform .2s; }
.gate.open .gate-panel { transform: none; }
.gate-body { padding: 26px 24px 26px; text-align: center; background: var(--bg-3); }
.gate-kicker { font-family: var(--f-head); font-size: 18px; color: var(--cyan); }
.gate-kicker--ok { color: var(--green); }
.gate-kicker--no { color: var(--red); }
.gate-title { margin: 6px 0 10px; font-family: var(--f-head); font-weight: normal; font-size: 34px; color: #fff; }
.gate-title--ok { color: var(--gold); }
.gate-sub { margin: 0 0 18px; color: var(--muted); }
.gate-fine { margin: 18px 0 0; color: var(--muted); font-size: 20px; }
.gate-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.gate-row--stack { flex-direction: column; align-items: center; margin-top: 22px; }
.wallet-list { display: grid; gap: 10px; }
.wallet-btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; cursor: pointer;
  font-family: var(--f-head); font-size: 22px; color: #fff; text-align: left;
  background: #091927; border: 3px solid #0b3446; border-radius: 6px;
}
.wallet-btn:hover { border-color: var(--cyan-hi); }
.wallet-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.wallet-btn img { image-rendering: auto; width: 28px; height: 28px; }
.wallet-dot { width: 28px; text-align: center; color: var(--purple); }
.wallet-go { margin-left: auto; color: var(--cyan); }
.gate-empty p { margin: 0 0 4px; color: var(--muted); }
.gate-loader { display: flex; justify-content: center; gap: 10px; margin: 24px 0; }
.gate-loader span { width: 12px; height: 12px; background: var(--gold); animation: load .9s steps(2) infinite; }
.gate-loader span:nth-child(2) { animation-delay: .15s; background: var(--purple); }
.gate-loader span:nth-child(3) { animation-delay: .3s; background: var(--cyan); }
@keyframes load { 50% { transform: translateY(-8px); } }
.gate-steps { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 8px; text-align: left; }
.gate-step { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; background: #091927; border: 3px solid #0b3446; border-radius: 6px; }
.gs-icon { display: grid; place-items: center; width: 24px; height: 24px; font-size: 16px; background: #0b3446; color: var(--muted); }
.gs-label { font-size: 22px; line-height: 1.1; color: #fff; }
.gs-label em { font-style: normal; color: var(--muted); }
.gs-detail { font-size: 20px; color: var(--muted); text-align: right; }
.gate-step.is-busy .gs-icon { background: var(--gold); animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.gate-step.is-ok { border-color: #1f8a52; }
.gate-step.is-ok .gs-icon { background: var(--green); color: #022010; }
.gate-step.is-ok .gs-detail { color: var(--green); }
.gate-step.is-no .gs-icon { background: #7a1f2a; color: #fff; }
.gate-step.is-err .gs-icon { background: #8a5a12; color: #fff; }
.gate-or { text-align: center; font-family: var(--f-head); font-size: 16px; color: var(--muted); }
.gate-badge { display: inline-block; padding: 4px 12px 6px; font-family: var(--f-head); font-size: 20px; color: var(--green); background: #04140b; border: 2px solid #1f8a52; }

/* ---------- play page ---------- */
.play { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; padding: 16px; }
.play-card { width: min(520px, 100%); }
.play-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 120; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1060px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .deals { grid-template-columns: 1fr; }
  .token { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .deals-meta { text-align: left; }
  .tab--counter { margin-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 22px; }
  .wordmark--sm span { font-size: 24px; }
  .nav-x { display: none; }
  .features { grid-template-columns: 1fr; }
  .crest-actions { flex-direction: column; }
  .crest-actions .btn { width: 100%; }
  .ribbon { width: calc(100% + 24px); }
  .ribbon-end { width: 24px; }
  .deal { grid-template-columns: auto auto auto; }
  .deal-info { grid-column: 1 / -1; text-align: left; }
  .deal .slot { width: 76px; height: 76px; }
  .podium-name { font-size: 20px; }
  .podium-faction { font-size: 19px; }
  .legend-strip img { width: 64px; height: 64px; }
  .token-stats { grid-template-columns: 1fr; }
  .tabs .tab:not(.is-active):not(.tab--counter) { display: none; }
}

/* ---------- The Awakening embed ---------- */
.window-open { margin-left: auto; }
.awakening-frame { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: var(--bg); }

/* links waiting for the token contract */
.btn.is-disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.75); transform: none; }