/* THE PIT — visual system copied from fwa.fun's mobile app.
   Near-black canvas, one pink accent, maroon-tinted secondaries, monospace for
   anything that is a number. Mobile-first: the phone layout IS the layout, and
   desktop just centres it in a device-width column the way FWA does. */

:root {
  --bg: #0a0a0b;
  --panel: #121213;
  --panel-2: #17171a;
  --line: #232326;
  --line-2: #2c2c31;
  --text: #f4f4f5;
  --dim: #9a9aa2;
  --dimmer: #6b6b73;
  --pink: #f5a3b7;
  --pink-ink: #1a0d12;
  --maroon: #3d222b;
  --maroon-line: #56313d;
  --amber: #e0a355;
  --green: #7fd18f;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --shell: 430px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #000; }
body {
  font-family: var(--sans);
  color: var(--text);
  min-height: 100dvh;
  display: flex; justify-content: center;
  overscroll-behavior-y: none;
}

/* the phone-width column */
#shell {
  width: 100%; max-width: var(--shell);
  background: var(--bg);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
@media (min-width: 460px) {
  #shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ------------------------------- header -------------------------------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 14px;
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(#0a0a0bF2, #0a0a0bE0);
  backdrop-filter: blur(10px);
}
.brand {
  font-weight: 900; font-size: 22px; letter-spacing: -0.02em;
  color: var(--pink);
  text-shadow: 0 2px 0 #b9758a, 0 0 22px rgba(245,163,183,.35);
  cursor: pointer; user-select: none;
}
.hactions { display: flex; align-items: center; gap: 6px; }
.iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; color: var(--dim); cursor: pointer; border-radius: 10px;
}
.iconbtn:active { background: var(--panel-2); }
.iconbtn svg { width: 21px; height: 21px; }

/* the block ticker strip */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--dimmer);
}
.strip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
  display: inline-block; margin-right: 8px; vertical-align: 1px;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.strip a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }

main { flex: 1; display: flex; flex-direction: column; }

/* ------------------------------ the deck ------------------------------- */
/* A fan of face-down cards that shuffles on a loop. This is the whole hero on
   FWA and it does a lot of work: it says "gacha" before a word is read. */
.deck {
  position: relative; height: 300px; margin: 8px 0 4px;
  display: grid; place-items: center; perspective: 1200px;
}
.deck-card {
  position: absolute; width: 172px; height: 240px; border-radius: 14px;
  background:
    linear-gradient(150deg, #17171a, #0e0e10 60%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 9px);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  box-shadow: 0 18px 40px #000a;
  transition: transform .9s cubic-bezier(.22,.9,.28,1), opacity .5s;
  will-change: transform;
}
.deck-card.hot { border-color: #7a6033; box-shadow: 0 18px 40px #000a, 0 0 0 1px #6d5731 inset; }
.deck-card .q {
  font-size: 128px; font-weight: 900; color: #f2f2f4; line-height: 1;
  font-family: var(--sans); user-select: none;
}

/* ---------------------------- the buy panel ---------------------------- */
.buy { margin: 4px 12px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 13px 13px 11px; }
.qrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qrow .lbl { font-size: 13px; color: var(--dim); }
.qrow .right { display: flex; align-items: center; gap: 9px; }
.qrow .num { font-family: var(--mono); font-size: 16px; }

.qslider { position: relative; background: var(--panel-2); border-radius: 11px; height: 42px; display: flex; align-items: center; padding: 0 16px; margin-bottom: 11px; }
.qslider .track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.qslider .pip { width: 7px; height: 7px; border-radius: 50%; background: #313136; cursor: pointer; transition: background .18s, transform .18s; }
.qslider .pip.on { background: var(--pink); transform: scale(1.25); }
.qslider .pip.filled { background: #6d4c57; }

.cta {
  width: 100%; border: 0; border-radius: 11px; padding: 15px 12px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em;
  cursor: pointer; transition: filter .15s, opacity .15s;
}
.cta.primary { background: var(--pink); color: var(--pink-ink); font-weight: 700; box-shadow: 0 8px 26px rgba(245,163,183,.22); }
.cta.working { background: var(--maroon); color: #c98fa1; cursor: progress; }
.cta:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.cta:active:not(:disabled) { filter: brightness(.93); }
.finetext { text-align: center; font-size: 11.5px; color: var(--dimmer); margin-top: 9px; }
.finetext a { color: var(--dim); }

/* ------------------------------ overlays ------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: #000000d9; backdrop-filter: blur(2px);
  display: flex; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet {
  width: 100%; max-width: var(--shell); background: var(--bg);
  min-height: 100dvh; padding: 14px 16px 40px; position: relative;
}
.sheet-grab { width: 62px; height: 4px; border-radius: 2px; background: #34343a; margin: 2px auto 16px; }
.closex {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--dim);
  font-size: 16px; cursor: pointer; display: grid; place-items: center;
}

/* menu sheet */
.menu-h { display: flex; align-items: center; gap: 11px; margin: 4px 0 26px; }
.menu-h .logo { width: 40px; height: 40px; border-radius: 9px; background: var(--pink); color: var(--pink-ink); display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.menu-h .t { font-size: 18px; font-weight: 700; }
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 16px 17px; margin-bottom: 11px;
  background: transparent; border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--text); font-size: 16px; cursor: pointer; font-family: var(--sans);
}
.menu-item.primary { background: var(--pink); color: var(--pink-ink); border-color: var(--pink); font-weight: 600; box-shadow: 0 8px 26px rgba(245,163,183,.2); }
.menu-foot { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 20px; }
.addr-chip { display: inline-block; font-family: var(--mono); font-size: 13px; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 11px; color: var(--dim); }

/* ---------------------------- reveal carousel -------------------------- */
.reveal-wrap { position: relative; display: grid; place-items: center; min-height: 330px; margin-top: 6px; }
.arrow {
  position: absolute; top: 145px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--dim);
  display: grid; place-items: center; cursor: pointer; z-index: 4; font-size: 15px;
}
.arrow.l { left: 0; } .arrow.r { right: 0; }
.arrow:disabled { opacity: .25; cursor: default; }

/* the revealed card: a share certificate, which is the stock-token analogue of
   FWA's generative NFT art */
.card {
  width: 208px; height: 292px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: #0d0d0f;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 50px #000c;
  transform-style: preserve-3d;
}
.card.flip { animation: flipin 900ms cubic-bezier(.2,.85,.25,1) both; }
@keyframes flipin {
  0% { transform: rotateY(88deg) scale(.86); opacity: .2 }
  60% { transform: rotateY(-9deg) scale(1.03); opacity: 1 }
  100% { transform: rotateY(0) scale(1) }
}
.card-face { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; }
.card-face .rings { position: absolute; inset: -18%; opacity: .55; }
.card-face .tick { position: relative; font-weight: 900; font-size: 40px; letter-spacing: -.03em; }
.card-face .co { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--dimmer); letter-spacing: .08em; text-transform: uppercase; }
.card-foot {
  border-top: 1px solid var(--line); background: #0a0a0b;
  padding: 7px 9px 8px;
}
.card-foot .nm { font-size: 11px; margin-bottom: 3px; }
.card-foot .kv { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--dimmer); }

/* confetti */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 7px; height: 11px; border-radius: 1px; animation: fall 1.5s ease-out forwards; }
@keyframes fall { 0% { transform: translateY(-40px) rotate(0); opacity: 1 } 100% { transform: translateY(340px) rotate(540deg); opacity: 0 } }

/* the "Purchase Successful" rainbow wordmark, per-letter like FWA */
.success { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin: 22px 0 6px; line-height: 1.1; }
.success span { display: inline-block; }
.rtitle { font-size: 23px; font-weight: 700; margin: 0 0 5px; }
.raddr { font-family: var(--mono); font-size: 11px; color: var(--dimmer); word-break: break-all; margin-bottom: 16px; }

.kvrow { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.kvrow .k { color: var(--dim); }
.kvrow .v { font-family: var(--mono); }

/* the settlement stack */
.act { margin-top: 18px; }
.act .lead { font-size: 14.5px; color: var(--dim); line-height: 1.5; margin: 0 0 11px; }
.act.hero { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 15px; }
.btn {
  width: 100%; padding: 15px; border-radius: 11px; font-size: 15px; cursor: pointer;
  font-family: var(--sans); transition: filter .15s;
}
.btn.pink { background: var(--pink); color: var(--pink-ink); border: 0; font-weight: 600; box-shadow: 0 8px 26px rgba(245,163,183,.2); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.maroon { background: var(--maroon); color: var(--pink); border: 1px solid var(--maroon-line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:active:not(:disabled) { filter: brightness(.9); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.field { display: flex; align-items: center; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 0 14px; margin-bottom: 10px; }
.field input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--text);
  font-family: var(--mono); font-size: 16px; padding: 15px 0; min-width: 0;
}
.field .unit { font-family: var(--mono); font-size: 12px; color: var(--dimmer); padding-left: 10px; }
.field select { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font-size: 16px; padding: 15px 0; font-family: var(--sans); }
.field select option { background: var(--panel); }

.pill { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: var(--dim); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }

.waiting { text-align: center; padding: 90px 20px; }
.waiting h2 { font-size: 30px; margin: 18px 0 12px; }
.waiting p { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #1c1c20; border: 1px solid var(--line-2); color: var(--text);
  padding: 12px 17px; border-radius: 11px; font-size: 13.5px; z-index: 200;
  max-width: 88vw; box-shadow: 0 14px 40px #000b;
}
.toast.bad { border-color: #6b3340; color: #ffc7d3; }

.empty { text-align: center; color: var(--dimmer); font-size: 14px; padding: 40px 10px; }
.sect-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); margin: 26px 0 12px; }

.list-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px; margin-bottom: 10px; }
.list-item .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.list-item .sym { font-weight: 700; font-size: 15px; }
.list-item .meta { font-family: var(--mono); font-size: 11.5px; color: var(--dimmer); }

.verify-row { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; font-size: 13.5px; }
.verify-row .mark { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px; flex: none; }
.mark.ok { background: #16301c; color: var(--green); }
.mark.no { background: #351a20; color: #ff9db0; }

/* ---------------------- tier strip + face-up deck ----------------------- */
/* FWA's home is not a pile of "?" cards at rest — that is only the in-flight
   state. At rest the deck IS the pool, face up, with each card's real backing
   and odds on it. The tier chips above filter it and publish the aggregate
   odds of hitting each band. */
.tierstrip {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tierstrip::-webkit-scrollbar { display: none; }
.tchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  background: var(--panel-2); border: 1px solid transparent; border-radius: 999px;
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.tchip.on { border-color: var(--line-2); color: var(--text); background: #202024; }
.tchip .d { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tchip .n { color: var(--dimmer); }

/* a live card in the deck — real ticker, real floor, real odds */
.pcard {
  position: absolute; width: 172px; height: 240px; border-radius: 14px;
  border: 1px solid var(--line-2); background: #0d0d0f; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 40px #000a;
  transition: transform .55s cubic-bezier(.22,.9,.28,1), opacity .35s;
  will-change: transform; cursor: pointer;
}
.pcard.crown { border-color: #7a6033; box-shadow: 0 18px 40px #000a, 0 0 24px #6d573155; }
.pcard .crownpip {
  position: absolute; top: -1px; left: 50%; transform: translate(-50%, -55%);
  width: 22px; height: 22px; border-radius: 50%; background: #17130c;
  border: 1px solid #7a6033; display: grid; place-items: center; font-size: 11px; z-index: 3;
}
.pcard .face { flex: 1; position: relative; display: grid; place-items: center; }
.pcard .face .tk { font-weight: 900; font-size: 30px; letter-spacing: -.03em; }
.pcard .rankbadge {
  position: absolute; top: 8px; right: 9px; font-family: var(--mono);
  font-size: 9.5px; color: var(--dimmer);
}
.pcard .tiertag {
  position: absolute; bottom: 30px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
}
.pcard .pfoot { border-top: 1px solid var(--line); background: #0a0a0b; padding: 6px 8px 7px; }
.pcard .pfoot .nm { font-size: 10px; margin-bottom: 2px; }
.pcard .pfoot .kv { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; color: var(--dimmer); }

/* settlement-drift popover, anchored under the gear */
.pop {
  position: absolute; z-index: 40; right: 10px; top: 44px; width: 268px;
  background: #131316; border: 1px solid var(--line-2); border-radius: 13px;
  padding: 14px; box-shadow: 0 22px 50px #000c;
}
.pop h4 { margin: 0 0 5px; font-size: 14.5px; }
.pop p { margin: 0 0 13px; font-size: 12px; color: var(--dim); line-height: 1.45; }
.pop .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.pop .row b { font-family: var(--mono); }
.pop input[type=range] { width: 100%; accent-color: var(--pink); }
.pop .ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dimmer); margin-top: 3px; }

/* Explore Pool: grid + list */
.poolhead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.poolhead .kv { font-size: 13px; color: var(--dim); }
.poolhead .kv b { display: block; font-family: var(--mono); font-size: 15px; color: var(--text); margin-top: 2px; }
.segbar { display: flex; gap: 6px; margin: 4px 0 14px; }
.seg {
  flex: 1; text-align: center; padding: 9px 6px; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid transparent; border-radius: 9px;
  color: var(--dim); cursor: pointer;
}
.seg.on { background: #24242a; color: var(--text); border-color: var(--line-2); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gcell { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; }
.gcell .art { height: 108px; display: grid; place-items: center; font-weight: 900; font-size: 25px; }
.gcell .gfoot { padding: 7px 9px 9px; border-top: 1px solid var(--line); }
.gcell .gfoot .a { font-size: 11.5px; font-weight: 600; }
.gcell .gfoot .b { font-family: var(--mono); font-size: 9.5px; color: var(--dimmer); margin-top: 2px; display: flex; justify-content: space-between; }

.trow { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.trow .sq { width: 40px; height: 40px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.trow .mid { flex: 1; min-width: 0; }
.trow .mid .a { font-size: 14px; }
.trow .mid .b { font-size: 11.5px; color: var(--dimmer); }
.trow .val { font-family: var(--mono); font-size: 13.5px; text-align: right; }
.trow .val small { display: block; color: var(--dimmer); font-size: 10.5px; }

/* stat grid on the listing detail */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.stat .k { font-size: 11.5px; color: var(--dimmer); margin-bottom: 5px; }
.stat .v { font-family: var(--mono); font-size: 13.5px; word-break: break-all; }
.stat .v.pos { color: var(--green); }
.chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); }
.chip.inpool { border-color: #2c5c37; color: var(--green); }
.chip.rank { border-color: #6d5731; color: var(--amber); }

/* The tier strip scrolls under the Pool link, so the link needs its own
   backdrop and a left fade — otherwise the last chip reads as overlapping it. */
.strip { position: relative; }
.strip #link-pool {
  flex: none; padding: 9px 0 9px 18px; margin-left: -6px;
  background: linear-gradient(90deg, transparent, var(--bg) 18%);
  position: relative; z-index: 2;
}

/* unread badge on the history icon */
.badge {
  position: absolute; top: 4px; right: 3px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--pink); color: var(--pink-ink);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; pointer-events: none;
}

/* --------------------------- swap modal -------------------------------- */
.swaprow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--dim); margin: 12px 0 7px; }
.swaprow .bal { font-family: var(--mono); font-size: 12px; color: var(--dimmer); }
.field.focus { border-color: var(--pink); box-shadow: 0 0 0 1px rgba(245,163,183,.18); }
.maxchip {
  background: transparent; border: 1px solid var(--maroon-line); color: var(--pink);
  border-radius: 8px; padding: 5px 11px; font-size: 12px; cursor: pointer; margin-left: 8px;
}
.slipchip {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 999px; padding: 5px 13px; font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.seg.on.pink { background: var(--pink); color: var(--pink-ink); border-color: var(--pink); font-weight: 600; }

/* official company logo, pulled from Robinhood's CDN by contract address and
   served locally. Sits behind the ticker so the card still reads at a glance. */
.colog {
  position: absolute; width: 86px; height: 86px; object-fit: contain;
  top: 34%; left: 50%; transform: translate(-50%, -50%);
  opacity: .92; border-radius: 12px; background: #ffffff08; padding: 6px;
}
.card-face .tick { margin-top: 46px; }
.colog.sm { width: 54px; height: 54px; top: 33%; padding: 4px; border-radius: 10px; }
.pcard .face .tk { margin-top: 40px; }
.colog.xs { position: static; transform: none; width: 30px; height: 30px; padding: 3px; border-radius: 7px; }
.gcell .art { flex-direction: column; gap: 4px; font-size: 17px; }

/* Footer links out of the app menu to the docs surfaces. */
.menu-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13px}
.menu-links a{color:var(--dim);text-decoration:none}
.menu-links a:hover{color:var(--text);text-decoration:underline}

/* Buy gate on the $RWA sheet — closed at launch, cash-out is the only way in. */
.seg.locked{opacity:.55}
.gatebox{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);
  border-radius:11px;padding:14px 16px;margin:0 0 16px;color:var(--dim);font-size:14px;line-height:1.55}
.gatebox b{color:var(--text)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--maroon)}