/* ============================================================
   REALM — the landing page. One screen, six gates.
   ============================================================ */

.landing{
  position:relative;margin:0;min-height:100svh;overflow-x:hidden;background:#000;
  -webkit-tap-highlight-color:transparent;
}
#sky{
  position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  display:block;pointer-events:none;
}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- across the top of everything ---------- */
.topbar{
  position:fixed;left:0;right:0;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  height:calc(44px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) clamp(12px,4vw,22px) 0;
  background:#000;
  border-bottom:1px solid rgba(227,186,92,.3);
  transition:opacity .5s ease;
}
/* nothing but the tunnel while you are in the tunnel */
body[data-phase="tunnel"] .topbar{opacity:0;pointer-events:none}

/* the mark and the wordmark travel together */
.topbar .brand{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;min-width:0;
  -webkit-tap-highlight-color:transparent;
}
/* The file is 96px so a 3x phone gets it pixel-for-pixel. A 1x screen has to
   shrink it, and that one case wants smoothing — nearest-neighbour would
   throw two out of every three pixels away and the letters would fall apart. */
.topbar .brandmark{
  display:block;width:32px;height:32px;flex:none;
  image-rendering:auto;
  transition:opacity .25s ease;
}
.topbar .brand:hover .brandmark{opacity:.78}

.topbar .mark{
  margin:0;font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.2em;color:#f4efe4;white-space:nowrap;
}
.topbar .mark b{color:#e3ba5c;font-weight:700}

/* on a narrow phone the mark alone carries it */
@media (max-width:380px){
  .topbar .mark{font-size:.82rem;letter-spacing:.14em}
  .topbar .brandmark{width:26px;height:26px}
}

/* everything that is not the brand keeps to the right, together */
.top-links{display:flex;gap:clamp(12px,4vw,20px);align-items:center;margin-left:auto}
.top-links a{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:#9d8fc4;text-decoration:none;
  padding:6px 2px;
}
.top-links a:hover{color:#e3ba5c}

/* ---------- the wallet ---------- */
/* ---------- the door in the tree ---------- */
.gate{
  position:absolute;inset:0;
  transition:opacity .7s ease-in;
}

.gate.gone{opacity:0;pointer-events:none;transition:opacity .5s ease-in 1s}

/* the tree fills the screen; everything else stands on it */
#tree{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
  opacity:0;transition:opacity 1.1s ease-out;
}

#tree.ready{opacity:1}

/* the realm, standing in the doorway.
   Drawn on its own canvas at the full screen resolution while the tree is
   drawn at half, so what is through the door reads as somewhere with more
   in it than the wood around it. That difference IS the effect.
   It sits above the tree and below .gate-in — everything written on the
   door belongs in front of what is behind the door. */
#portal{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:1;
  opacity:0;transition:opacity 1.1s ease-out;
}
#portal.ready{opacity:1}

/* The way through.

   The video is never SHOWN. It plays with its pixels turned off and
   gate.js draws each frame into the tree's own canvas instead, at the
   same chunky resolution as everything else — so going through the door
   does not jump from pixel art to film and back again.

   It also has to live outside anything that fades. The first version sat
   inside .gate, and .gate.gone takes the whole element to opacity 0 a
   second after you press enter: the film played for about a second and
   then went black, which is exactly what it looked like. */






.gate-in{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:clamp(6px,1.4vh,14px);text-align:center;
  padding:0 14px calc(22px + env(safe-area-inset-bottom));
}

.gate.gone .gate-in{opacity:0;transition:opacity .3s;pointer-events:none}

/* the one way in.
   A clip-path cuts a border off at the angled ends, so the rim is a
   second layer: a gold shape with a slightly smaller black one sitting
   on it, both cut to the same outline. */
.enter{
  position:relative;cursor:pointer;border:0;padding:17px 30px;
  width:min(88vw,400px);
  background:rgba(227,186,92,.55);
  clip-path:polygon(5% 0%,95% 0%,100% 50%,95% 100%,5% 100%,0% 50%);
  transition:background .25s,transform .2s;
}

.enter::after{
  content:'';position:absolute;inset:0;transform:scale(.988);
  background:#000;
  clip-path:polygon(5% 0%,95% 0%,100% 50%,95% 100%,5% 100%,0% 50%);
}

.enter:hover{background:#e3ba5c}

.enter:active{transform:scale(.97)}

.enter-in{
  position:relative;z-index:2;display:block;
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:clamp(.94rem,4.3vw,1.26rem);letter-spacing:.11em;line-height:1;
  text-transform:uppercase;white-space:nowrap;color:#f4efe4;
}

.creed{
  margin:0;color:#b5a6d8;display:flex;flex-wrap:wrap;justify-content:center;font-size:.88rem;letter-spacing:.2em;line-height:1.9;
  text-transform:uppercase;
  text-shadow:0 0 14px #03010a,0 0 30px #03010a;
}

/* ---------- overlay panels ---------- */
.panel{
  position:fixed;inset:0;z-index:40;overflow-y:auto;
  background:rgba(3,1,10,.93);backdrop-filter:blur(18px);
  padding:max(58px,calc(env(safe-area-inset-top) + 58px)) 16px
          max(40px,calc(env(safe-area-inset-bottom) + 40px));
  animation:rise .26s ease-out;
}

.panel[hidden]{display:none}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.panel-in{max-width:620px;margin:0 auto}

.panel h2{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:1.35rem;margin:0 0 6px;letter-spacing:.2em;text-transform:uppercase;
  color:#f4efe4;
}

.panel-close{
  position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:41;
  width:44px;height:44px;cursor:pointer;
  font-size:1.5rem;line-height:1;color:#f4efe4;
  background:#000;border:1px solid rgba(227,186,92,.42);
}

.panel-close:hover{border-color:#e3ba5c;color:#e3ba5c}

.wal{
  padding:7px 12px;cursor:pointer;white-space:nowrap;
  font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;
  color:#9d8fc4;background:#07040f;border:1px solid rgba(227,186,92,.3);
}
.wal:hover{border-color:#e3ba5c;color:#e3ba5c}

.wal-sheet{
  position:fixed;top:56px;left:50%;z-index:60;
  width:min(420px,calc(100vw - 24px));
  transform:translateX(-50%) translateY(-8px);
  opacity:0;transition:opacity .18s ease-out,transform .18s ease-out;
  padding:18px;background:#07040f;border:1px solid rgba(227,186,92,.3);
  max-height:min(76vh,720px);overflow-y:auto;
}
.wal-sheet.here{opacity:1;transform:translateX(-50%) translateY(0)}
.wal-sheet[hidden]{display:none}
.wal-sheet h3{
  margin:0 0 9px;font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:#f4efe4;
}
.wal-note{margin:0 0 14px;font-size:.72rem;line-height:1.65;color:#6d6192}

/* the address and the button that reads it */
.wal-find{display:flex;gap:6px;margin-bottom:13px}
.wal-find input{
  flex:1;min-width:0;padding:10px 11px;
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:.78rem;
  color:#f4efe4;background:#03010a;border:1px solid rgba(227,186,92,.26);
}
.wal-find input:focus{outline:none;border-color:#e3ba5c}
.wal-find input::placeholder{color:#6d6192}
.wal-go{
  padding:10px 15px;cursor:pointer;white-space:nowrap;
  font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.70rem;letter-spacing:.14em;text-transform:uppercase;
  color:#03010a;background:#e3ba5c;border:1px solid #e3ba5c;
}
.wal-go:hover{background:#f0cd7a}
.wal-go:disabled{opacity:.5;cursor:default}

.wal-wait,.wal-bad,.wal-none{margin:0;font-size:.78rem;line-height:1.6}
.wal-wait{color:#9d8fc4}
.wal-bad{color:#c4838b}
.wal-none{color:#f4efe4}

/* what the address holds */
.wal-holds{
  display:grid;gap:1px;background:rgba(227,186,92,.26);
  border:1px solid rgba(227,186,92,.26);margin-bottom:11px;
}
.wal-hold-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 11px;background:#07040f;
}
.wal-hold-row span{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.82rem;color:var(--c,#9d8fc4);
}
.wal-hold-row span i{font-style:normal;color:#6d6192;font-size:.74rem}
.wal-hold-row b{
  font-family:'Space Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;
  font-size:.82rem;color:#f4efe4;
}

.wal-sum,.wal-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(227,186,92,.26);border:1px solid rgba(227,186,92,.26);
  margin-bottom:11px}
.wal-pay{grid-template-columns:repeat(2,1fr)}
.wal-sum div,.wal-pay div{
  padding:9px 10px;background:#07040f;display:flex;flex-direction:column;gap:3px;
}
.wal-sum span,.wal-pay span{
  font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:#6d6192;
}
.wal-sum b,.wal-pay b{
  font-family:'Space Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;
  font-size:.88rem;color:#f4efe4;
}
.wal-pay div:last-child b{color:#e3ba5c}

/* ============================================================
   THE DOOR'S OWN LETTERING
   ============================================================ */

.enter-in{font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;}

.enter-in{
  letter-spacing:.14em;color:#f7e9c8;
  animation:fringe 3.4s ease-in-out infinite;
}
@keyframes fringe{
  0%,100%{text-shadow:-1.5px 0 #22d3ee, 1.5px 0 #a855f7, 0 0 24px #e3ba5c}
  50%    {text-shadow: 1.5px 0 #e3ba5c,-1.5px 0 #22d3ee, 0 0 30px #a855f7}
}

/* No filter on .gate or .options: a filter isolates everything inside
   from the backdrop, and that stops the artwork blending with the sky. */

@media (prefers-reduced-motion:reduce){
  .enter-in,.gate{animation:none}
  .enter-in{text-shadow:0 0 20px #a855f7}
}

/* ============================================================
   WRITING THAT MOVES — every letter rides its own wave
   ============================================================ */

.ch{
  display:inline-block;
  animation:letterRide 4.4s ease-in-out infinite,
            letterHue  8s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.085s), calc(var(--i) * -0.12s);
  will-change:transform;
}
@keyframes letterRide{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-0.13em)}
}
@keyframes letterHue{
  0%,100%{color:#fbf1d6; text-shadow:0 0 14px #e3ba5c,0 0 28px rgba(168,85,247,.7)}
  50%    {color:#d8ccff; text-shadow:0 0 14px #a855f7,0 0 30px rgba(34,211,238,.6)}
}

/* the line under the door is quieter */
.ch.soft{
  animation:letterRide 5.4s ease-in-out infinite,
            letterHueSoft 9s linear infinite;
  animation-delay:calc(var(--i) * -0.07s), calc(var(--i) * -0.1s);
}
@keyframes letterHueSoft{
  0%,100%{color:#9d8fc4}
  50%    {color:#c9b6ef}
}

/* the per-letter animation replaces the whole-word one */
.enter-in{animation:none}
.creed{animation:none}

@media (prefers-reduced-motion:reduce){
  .ch,.ch.soft{animation:none;color:#f7e9c8}
  .ch.soft{color:#9d8fc4}
}

/* ============================================================
   THE CHAMBER — the room you come out into, and five ways on
   ============================================================ */

.journey{
  position:fixed;inset:0;z-index:3;overflow:hidden;
  opacity:0;transition:opacity .9s ease-out;
  background:#03010a;
}
.journey[hidden]{display:none}
.journey.here{opacity:1}

#chamber{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;
}
/* the orbs, drawn at full resolution above the room and below the words */
.orbs-layer{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;
}

/* the words stand in the lower half, on the floor of the room */
.j-frame{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:clamp(9px,2vh,16px);
  padding:0 16px calc(20px + env(safe-area-inset-bottom));
  pointer-events:none;
}

.j-where{
  font-family:'Pixelify Sans',system-ui,sans-serif;
  margin:0;padding:6px 16px 7px;pointer-events:none;
  background:#000;border:1px solid rgba(227,186,92,.28);
  font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:#e3ba5c;
}

/* four doors in a square, low on the floor, so the eye and its light stay clear */
.j-menu{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(7px,1.4vh,10px);
  width:min(92vw,460px);pointer-events:auto;
}

/* ---------- the slabs ----------
   Solid black, one hairline of gold, and the lettering from the door.
   Nothing else: the room behind them is doing the work. */
.slab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;padding:clamp(10px,1.6vh,14px) 10px;text-align:center;
  background:#000;
  border:1px solid rgba(227,186,92,.42);
  color:#f4efe4;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s ease, transform .18s ease, background .25s ease;
}
.slab:hover,.slab:focus-visible{
  border-color:#e3ba5c;background:#050208;outline:none;
}
.slab:focus-visible{box-shadow:0 0 0 1px #e3ba5c}
.slab:active{transform:translateY(1px)}

.slab-in{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:clamp(.92rem,4.1vw,1.24rem);letter-spacing:.09em;line-height:1;
  white-space:nowrap;
}
.slab-note{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-style:normal;
  font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:#7b6ea0;white-space:nowrap;
}

/* on a short screen the slabs tighten before anything is dropped */
@media (max-height:640px){
  .j-menu{gap:6px}
  .slab{padding:9px 14px}
  .slab-in{font-size:clamp(.9rem,4vw,1.1rem);letter-spacing:.14em}
}

/* ---------- the standing facts, under the door ---------- */
.standing{
  margin:0;display:flex;gap:clamp(20px,8vw,44px);justify-content:center;
  flex-wrap:nowrap;
}
.standing div{display:flex;flex-direction:column;gap:3px;align-items:center}
.standing dt{
  margin:0;font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#7b6ea0;
}
.standing dd{
  margin:0;font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.88rem;letter-spacing:.05em;color:#f4efe4;
}
.standing dd{white-space:nowrap}
.standing-live{margin-top:12px}
.standing-live dd{color:#e3ba5c}
.live-line b{color:#e3ba5c}
/* the mint's state as a small lit tag, so open/closed reads at a glance */
#st-status{
  padding:1px 8px;border:1px solid rgba(124,232,190,.55);color:#9ff5d2;
  background:rgba(124,232,190,.08);
}
#st-status.shut{
  border-color:rgba(157,143,196,.45);color:#b9acdf;background:rgba(157,143,196,.08);
  font-weight:500;
}

/* ---------- what is behind the door ----------
   Five beings, quiet to loud. Small enough not to fight the tree, big
   enough to read as drawings rather than as icons. */
.peek{
  display:flex;gap:6px;justify-content:center;align-items:center;
  cursor:pointer;margin-top:2px;
}
.peek-art{
  width:clamp(40px,12vw,56px);height:auto;
  image-rendering:pixelated;
  border:1px solid rgba(227,186,92,.3);
  opacity:.9;transition:opacity .2s,border-color .2s,transform .2s;
}
.peek:hover .peek-art{opacity:1}
.peek-art:hover{border-color:var(--c,#e3ba5c);transform:translateY(-2px)}

/* on a short screen the words tighten before any of them are dropped */
@media (max-height:700px){
  .gate-in{gap:clamp(3px,.9vh,9px)}
  .peek-art{width:clamp(36px,10vw,46px)}
}
@media (max-height:520px){
  .peek{display:none}
}

/* ---------- the rest of the chamber's chrome ---------- */
.j-more{
  display:flex;gap:26px;justify-content:center;
  margin-top:2px;pointer-events:auto;
}
.j-more a,.j-more button{text-decoration:none;}
.j-more button,.j-more a{
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.70rem;letter-spacing:.17em;text-transform:uppercase;color:#7b6ea0;
}
.j-more button:hover,.j-more a:hover{color:#e3ba5c}
.go-on{display:block;text-align:center;margin:14px 0 4px}

.j-back{
  position:fixed;z-index:4;
  top:calc(56px + env(safe-area-inset-top));left:14px;
  width:40px;height:40px;cursor:pointer;
  display:grid;place-items:center;font-size:1.1rem;
  color:#f4efe4;background:rgba(7,4,15,.6);border:1px solid rgba(227,186,92,.4);
}
.j-back:hover{border-color:#e3ba5c;color:#e3ba5c}



/* on a phone the top bar is tight: Telegram becomes TG */
@media (max-width: 480px) {
  .top-links a[data-short] { font-size: 0; }
  .top-links a[data-short]::after { content: attr(data-short); font-size: .82rem; }
}

/* ---------- build your holding ---------- */
.bh-tiers{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px}
.bh-tier{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;
  padding:5px 8px 5px 5px;border:1px solid rgba(227,186,92,.14);background:#000;transition:border-color .2s;
}
.bh-tier.on{border-color:var(--c)}
.bh-tier img{width:40px;height:40px;image-rendering:pixelated;display:block}
.bh-name{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.bh-name b{color:var(--c);font-weight:600;letter-spacing:.06em}
.bh-name i{font-style:normal;color:#6d6192;font-size:.72rem}
.bh-step{display:flex;align-items:center;gap:6px}
.bh-step button{
  width:36px;height:36px;font-size:1.15rem;line-height:1;cursor:pointer;
  color:#f4efe4;background:transparent;border:1px solid rgba(227,186,92,.5);
}
.bh-step button:disabled{opacity:.3;cursor:default}
.bh-step span{min-width:2ch;text-align:center;font-size:1.05rem;color:#f4efe4}
.bh-bands{display:grid !important;grid-template-columns:repeat(3,1fr);gap:6px}
.bh-bands button{display:flex;flex-direction:column;align-items:center;gap:2px}
.bh-bands button i{font-style:normal;font-size:.72rem;color:#9d8fc4}
.bh-result{min-height:170px;margin-top:14px}
.bh-figs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bh-figs div{display:flex;flex-direction:column;padding:10px 12px;border:1px solid rgba(227,186,92,.26)}
.bh-figs span{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#6d6192}
.bh-figs b{font-size:1.5rem;color:#f4efe4;line-height:1.3}
.bh-figs i{font-style:normal;font-size:.7rem;color:#9d8fc4;line-height:1.4}
.bh-figs .bh-main{border-color:#e3ba5c;background:rgba(227,186,92,.06)}
.bh-figs .bh-main b{color:#e3ba5c}
.bh-line{margin:10px 0 0;font-size:.82rem;color:#9d8fc4}
.bh-note{margin:8px 0 0;font-size:.74rem;color:#6d6192;line-height:1.55}
.bh-empty{color:#9d8fc4;font-size:.86rem}
.bh-bands button[aria-pressed="true"] i{color:#4a3508}

/* one figure for the two together */
.sum-total{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:8px;
  padding:11px 13px;border:1px solid #e3ba5c;background:linear-gradient(90deg,rgba(227,186,92,.16),rgba(227,186,92,.04));
}
.sum-total span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#e3ba5c}
.sum-total b{font-size:1.45rem;color:#f4efe4;font-weight:700}
.sum-total i{flex-basis:100%;font-style:normal;font-size:.72rem;color:#9d8fc4}

/* ---------- the card under the door ----------
   The facts sat straight on the painting and the doorway's light ran
   through them. They are held in one dark glass card now, edged in gold. */
.gate-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:14px clamp(16px,4vw,28px) 16px;
  background:rgba(5,2,12,.72);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(227,186,92,.38);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,170,.06);
  max-width:min(92vw,520px);
}
.gate-card .creed{margin:0}
.gate-card .standing-live{margin-top:0}
.gate-card .peek{margin-top:2px}

/* ---------- the facts, along the top bar ----------
   The door is left to the tree and the one button. What a stranger wants
   to know (price, how many are gone, the pool, $DMT) sits in the bar as
   small gold-edged chips. On a phone only the count fits; the rest sits
   in one thin line under the button (.gate-facts). */
.top-stats{
  margin:0 0 0 clamp(8px,2vw,22px);display:flex;gap:8px;align-items:center;min-width:0;
}
.top-stats div{
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  padding:5px 10px;border:1px solid rgba(227,186,92,.32);background:rgba(227,186,92,.04);
}
.top-stats dt{
  margin:0;font-family:'Pixelify Sans',system-ui,sans-serif;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#7b6ea0;
}
.top-stats dd{
  margin:0;font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.05em;color:#e3ba5c;
}
.top-stats #st-status{padding:0 6px;font-size:.74rem}

.gate-facts{
  display:none;margin:0;gap:6px 14px;justify-content:center;flex-wrap:wrap;
  font-family:'Pixelify Sans',system-ui,sans-serif;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:#b5a6d8;
  text-shadow:0 0 12px #03010a,0 0 24px #03010a;
}
.gate-facts b{color:#e3ba5c;font-weight:700}
.gate-facts > span + span::before{content:'\00b7';margin-right:14px;color:#6d6192}

@media (max-width:1000px){
  .top-stats .ts-wide{display:none}
  .gate-facts{display:flex}
}
@media (max-width:420px){
  .top-stats{margin-left:auto}
  .top-stats div{padding:4px 7px;gap:5px}
  .top-stats dt{display:none}
  .top-links{margin-left:10px}
}
@media (max-width:420px){
  .topbar{gap:8px}
  .topbar .mark b{display:none}       /* the count needs the room; $DMT is under the button */
  .top-links{gap:12px}
}

/* the rewards wallet, under the pool */
.rw-wallet b{color:#e3ba5c}
.rw-wallet a{color:#e3ba5c;text-decoration:none}
.rw-wallet a:hover{text-decoration:underline}
.wal-full{display:block;margin-top:14px;padding:12px 14px;text-align:center;text-decoration:none;
  background:var(--gold,#e3ba5c);color:#05030b;font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}