/* ============================================================================
   BASE STREET — clean floor
   Iconic Wall Street ambiance, calmed down and tidied up for easy use.
   ========================================================================== */

:root{
  --bg:#0b0a07; --bg2:#15110a;
  --ink:#f4ecda; --ink-dim:#b7ab92; --muted:#7c715b;
  --gold:#f3b32a; --gold-2:#ffd36b; --gold-deep:#9a6c12;
  --green:#2bd980; --green-deep:#15a85f;
  --red:#ff4d5e;
  --blue:#5a86ff; --blue-2:#8fb0ff;
  --card:rgba(20,16,10,.78);
  --card-solid:#15110a;
  --line:rgba(243,179,42,.16);
  --line-2:rgba(243,179,42,.34);
  --r:14px; --r-lg:20px;
  --f-display:'Anton',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f:'Inter',system-ui,sans-serif;
  --topbar:56px; --ticker:26px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#1a1206}

/* ---------- fx ---------- */
.fx-grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,2%)}100%{transform:translate(0,0)}}
.fx-vignette{position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(135% 115% at 50% 16%,transparent 42%,rgba(0,0,0,.5) 100%);mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){.fx-grain{animation:none}}

/* ---------- backdrop ---------- */
.backdrop{position:fixed;inset:-26px;z-index:0;overflow:hidden;background:var(--bg);transition:transform .3s ease-out;will-change:transform}
.backdrop__img{position:absolute;inset:-2%;background-size:cover;background-position:center 40%;
  background-image:linear-gradient(180deg,rgba(9,7,5,.74),rgba(9,7,5,.86) 55%,rgba(9,7,5,.96)),url("/assets/nyse.jpg");
  transform:scale(1.06);animation:kenburns 38s var(--ease) infinite alternate;transition:background-image .8s ease}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.15) translate(-1%,-1.5%)}}
.spotlight{position:absolute;top:-30vh;width:44vw;height:130vh;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,210,110,.12),transparent 60%);filter:blur(16px);mix-blend-mode:screen;opacity:.6}
.spotlight--l{left:5vw;transform:rotate(14deg);transform-origin:top center;animation:sway 11s ease-in-out infinite alternate}
.spotlight--r{right:5vw;transform:rotate(-14deg);transform-origin:top center;animation:swayR 11s ease-in-out -5s infinite alternate}
@keyframes sway{to{transform:rotate(10deg)}}@keyframes swayR{to{transform:rotate(-10deg)}}
@media (prefers-reduced-motion:reduce){.backdrop__img,.spotlight{animation:none}}

/* ---------- ticker ---------- */
.ticker{position:fixed;left:0;right:0;height:var(--ticker);z-index:40;overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(9,7,4,.92),rgba(6,5,3,.92));border-block:1px solid var(--line);
  font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.03em}
.ticker--top{top:calc(var(--topbar) + var(--sat))}.ticker--bottom{bottom:var(--sab)}
.ticker__track{display:flex;gap:30px;white-space:nowrap;padding-left:30px;will-change:transform;animation:scroll 55s linear infinite}
.ticker--bottom .ticker__track{animation-direction:reverse;animation-duration:68s}
@keyframes scroll{to{transform:translateX(-50%)}}
.tk{display:inline-flex;gap:7px;align-items:baseline}.tk__sym{color:var(--ink-dim)}
.tk__up{color:var(--green)}.tk__dn{color:var(--red)}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:calc(var(--topbar) + var(--sat));z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:var(--sat) calc(18px + var(--sar)) 0 calc(18px + var(--sal));
  background:linear-gradient(180deg,rgba(7,6,3,.9),rgba(7,6,3,.35));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);letter-spacing:.04em;font-size:18px}
.brand__bull{font-size:19px;filter:drop-shadow(0 0 7px rgba(243,179,42,.45))}
.brand__name{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar__right{display:flex;align-items:center;gap:12px}
.floorcount{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:12px;color:var(--ink-dim);
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.28)}
.floorcount__dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
.floorcount__num{color:var(--gold-2);font-weight:800}.floorcount__label{color:var(--muted)}
.iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.28);font-size:15px;display:grid;place-items:center;transition:.2s}
.iconbtn:hover{border-color:var(--line-2)}.iconbtn.is-muted{opacity:.4}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;
  letter-spacing:.01em;padding:12px 22px;border-radius:11px;color:#fff;transition:transform .12s var(--ease),filter .2s,box-shadow .2s,background .2s;white-space:nowrap;user-select:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2a1c04;box-shadow:0 6px 18px rgba(243,179,42,.28)}
.btn--gold:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 8px 26px rgba(243,179,42,.42)}
.btn--primary{background:linear-gradient(180deg,var(--green),var(--green-deep));color:#03210f;box-shadow:0 6px 18px rgba(43,217,128,.24)}
.btn--primary:hover:not(:disabled){filter:brightness(1.07)}
.btn--ghost{background:rgba(255,255,255,.03);color:var(--ink-dim);border:1px solid var(--line-2)}
.btn--ghost:hover:not(:disabled){background:rgba(243,179,42,.08);color:var(--gold-2)}
.btn--lg{font-size:17px;padding:15px 28px;width:100%;max-width:360px}
.btn--xl{font-size:19px;padding:17px 38px;border-radius:13px}
.btn--mini{font-size:13.5px;padding:9px 16px;border-radius:9px}
.xlogo{width:17px;height:17px;fill:currentColor}
.textbtn{margin-top:6px;color:var(--ink-dim);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.textbtn:hover{color:var(--gold-2)}

/* ---------- fields ---------- */
.field{display:flex;align-items:center;gap:8px;min-width:0;background:#0c0a06;border:1px solid var(--line-2);border-radius:11px;padding:2px 14px}
.field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,179,42,.16)}
.field__at{font-family:var(--f-mono);color:var(--gold);font-size:17px}
.field input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--f-mono);font-size:16px;padding:13px 0}
.field input.is-valid{color:var(--green)}
.hint{min-height:18px;font-size:13px;color:var(--ink-dim);font-family:var(--f-mono)}
.hint--err{color:var(--red)}

/* ---------- scenes ---------- */
#stage{position:fixed;inset:0;z-index:10}
.scene{position:absolute;inset:0;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);overflow-y:auto;overflow-x:hidden;
  padding:calc(var(--topbar) + var(--sat) + var(--ticker) + 20px) calc(18px + var(--sar)) calc(var(--ticker) + var(--sab) + 20px) calc(18px + var(--sal));
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s}
.scene.is-active{opacity:1;visibility:visible;transform:none}
.scene::-webkit-scrollbar{width:8px}.scene::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}

/* ---------- gate ---------- */
.gate{text-align:center;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:8px}
.chip{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.34em;color:var(--gold);opacity:.85;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 16px;margin-bottom:10px}
.wordmark{font-family:var(--f-display);line-height:.82;letter-spacing:-.005em;font-size:clamp(66px,15vw,184px);text-transform:uppercase;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.4)) drop-shadow(0 20px 36px rgba(0,0,0,.55))}
.wordmark__base{display:block;background:linear-gradient(180deg,var(--blue-2),var(--blue) 60%,#2a52d8);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark__street{display:block;background:linear-gradient(180deg,#fff3cf,var(--gold-2) 42%,var(--gold) 66%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.gate__tag{font-size:clamp(17px,3vw,24px);color:var(--ink-dim);margin:16px 0 22px;font-weight:500}
.flicker{color:var(--green);font-weight:700;text-shadow:0 0 16px rgba(43,217,128,.5);animation:flick 6s infinite}
@keyframes flick{0%,96%,100%{opacity:1}94%{opacity:.45}95%{opacity:.9}97%{opacity:.55}}
.btn--xl{animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-4px)}}

/* ---------- console ---------- */
.console{width:100%;max-width:680px;background:var(--card);backdrop-filter:blur(18px) saturate(1.05);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px clamp(18px,4vw,34px) 28px;box-shadow:var(--shadow)}
.stepper{display:flex;list-style:none;margin:0 0 26px;gap:0;justify-content:space-between;position:relative}
.stepper::before{content:"";position:absolute;top:15px;left:6%;right:6%;height:2px;background:var(--line);z-index:0}
.stepper li{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;z-index:1;flex:1;color:var(--muted);transition:.3s}
.stepper__dot{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:800;font-size:13px;
  background:var(--card-solid);border:2px solid var(--line);color:var(--muted);transition:.3s}
.stepper__t{font-size:12px;font-weight:600;letter-spacing:.02em}
.stepper li.is-active{color:var(--gold-2)}
.stepper li.is-active .stepper__dot{border-color:var(--gold);color:#2a1c04;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 0 4px rgba(243,179,42,.14)}
.stepper li.is-done{color:var(--green)}
.stepper li.is-done .stepper__dot{border-color:var(--green);color:var(--green);background:rgba(43,217,128,.08)}
.stepper li.is-done .stepper__dot{font-size:0}
.stepper li.is-done .stepper__dot::after{content:"✓";font-size:15px}
.stepper li[data-clickable]{cursor:pointer}

.step{display:none;animation:stepIn .5s var(--ease)}
.step.is-active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step__title{font-family:var(--f-display);font-size:clamp(28px,5vw,42px);line-height:.96;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6da,var(--gold-2) 60%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.step__lead{color:var(--ink-dim);margin:10px 0 22px;font-size:15.5px;max-width:48ch}
.step__lead b{color:var(--gold-2)}
.step__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}

/* ---------- pass card ---------- */
.passwrap{display:flex;justify-content:center;margin-bottom:22px;perspective:1000px}
.pass{width:100%;max-width:380px;border-radius:16px;position:relative;overflow:hidden;padding:18px;color:var(--ink);font-family:var(--f-mono);
  background:radial-gradient(120% 130% at 85% -10%,rgba(90,134,255,.22),transparent 46%),linear-gradient(155deg,#241a0c,#120d07 62%,#1b140b);
  border:1px solid var(--line-2);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08)}
.pass__sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);transform:translateX(-60%);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,100%{transform:translateX(-70%)}50%{transform:translateX(70%)}}
@media (prefers-reduced-motion:reduce){.pass__sheen{animation:none}}
.pass__top{display:flex;justify-content:space-between;align-items:center}
.pass__org{font-family:var(--f-display);font-size:15px;letter-spacing:.04em;color:var(--gold-2)}
.pass__tag{font-size:9px;letter-spacing:.12em;color:var(--blue-2);border:1px solid rgba(90,134,255,.45);border-radius:5px;padding:3px 7px}
.pass__main{display:flex;align-items:center;gap:13px;margin:16px 0}
.pass__avatar{width:54px;height:54px;border-radius:12px;flex:none;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,#2c1f0d,#15100a);border:1px solid var(--line-2);font-size:22px;color:var(--gold)}
.pass__avatar img{width:100%;height:100%;object-fit:cover}
.pass__name{font-family:var(--f);font-weight:700;font-size:17px;color:var(--ink);line-height:1.15}
.pass__handle{font-size:13px;color:var(--ink-dim)}
.pass__bottom{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px dashed var(--line-2);padding-top:13px}
.pass__k{display:block;font-size:9px;letter-spacing:.18em;color:var(--muted)}
.pass__field--r{text-align:right}
.pass__seat{font-size:20px;font-weight:800;color:var(--gold-2);letter-spacing:.16em}
.pass__rank{font-size:15px;color:var(--green)}
.pass__stamp{position:absolute;right:14px;top:54px;font-family:var(--f-display);font-size:24px;letter-spacing:.06em;
  color:rgba(43,217,128,0);border:2.5px solid rgba(43,217,128,0);border-radius:7px;padding:2px 9px;transform:rotate(-13deg) scale(1.3);transition:.5s var(--ease);pointer-events:none}
.pass.is-verified .pass__stamp{color:rgba(43,217,128,.85);border-color:rgba(43,217,128,.65);transform:rotate(-13deg) scale(1)}
.pass.is-minting{animation:mint .6s var(--ease)}
@keyframes mint{0%{filter:brightness(1.9)}100%{filter:none}}

.connect{display:flex;flex-direction:column;align-items:center;gap:12px}
.handleform{display:flex;gap:10px;width:100%;max-width:380px;animation:stepIn .35s var(--ease)}
.handleform .field{flex:1}
.connect__done{font-family:var(--f-mono);color:var(--green);font-size:14.5px;padding:13px 18px;border:1px solid rgba(43,217,128,.38);border-radius:11px;background:rgba(43,217,128,.06)}

/* ---------- quests ---------- */
.progress{position:relative;height:30px;border-radius:9px;background:#0c0a06;border:1px solid var(--line);overflow:hidden;margin-bottom:18px;display:flex;align-items:center}
.progress__bar{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--green-deep),var(--green));transition:width .6s var(--ease)}
.progress__txt{position:relative;margin-left:13px;font-family:var(--f-mono);font-weight:700;font-size:12.5px;color:var(--ink);mix-blend-mode:difference}
.quests{display:flex;flex-direction:column;gap:11px}
.quest{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:15px 17px;border-radius:13px;
  background:rgba(12,9,5,.55);border:1px solid var(--line);transition:.3s var(--ease);position:relative}
.quest__n{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:800;font-size:13px;background:rgba(243,179,42,.1);color:var(--gold-2)}
.quest__text h3{font-size:15.5px;font-weight:600}
.quest__text p{font-size:13px;color:var(--ink-dim);margin-top:1px}
.quest__btn[data-state="armed"]{background:linear-gradient(180deg,var(--green),var(--green-deep));color:#03210f}
.quest__done{position:absolute;right:17px;font-size:22px;color:var(--green);opacity:0;transform:scale(.4);transition:.35s var(--ease)}
.quest.is-done{border-color:rgba(43,217,128,.4);background:linear-gradient(90deg,rgba(43,217,128,.07),rgba(12,9,5,.55) 45%)}
.quest.is-done .quest__btn{opacity:0;pointer-events:none}
.quest.is-done .quest__done{opacity:1;transform:scale(1)}
.quest.is-done .quest__n{background:rgba(43,217,128,.14);color:var(--green)}

/* ---------- account ---------- */
.account{display:flex;flex-direction:column;align-items:center;gap:14px}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.18em;width:100%;max-width:380px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.walletform{display:flex;gap:10px;width:100%;max-width:380px}
.walletform .field{flex:1}

/* ---------- tweet card / bell ---------- */
.tweetcard{background:#0c0c0e;border:1px solid #25252b;border-radius:15px;padding:16px 18px;color:#e7e9ea;max-width:480px}
.tweetcard__head{display:flex;align-items:center;gap:11px}
.tweetcard__avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(160deg,#2c1f0d,#15100a)}
.tweetcard__avatar img{width:100%;height:100%;object-fit:cover}
.tweetcard__id{display:flex;flex-direction:column;line-height:1.2}
.tweetcard__name{font-weight:700;font-size:14.5px}.tweetcard__handle{color:#71767b;font-size:13px}
.tweetcard__x{width:19px;height:19px;fill:#fff;margin-left:auto}
.tweetcard__text{margin-top:10px;white-space:pre-wrap;font-size:14px;line-height:1.5}
.bell__actions{display:flex;flex-direction:column;gap:11px;align-items:flex-start;margin-top:20px;max-width:480px}
.bell__actions .btn{width:100%;max-width:none}

/* ---------- desk ---------- */
.desk{width:100%;max-width:720px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.desk__id{display:flex;align-items:center;gap:14px}
.desk__avatar{width:54px;height:54px;border-radius:14px;overflow:hidden;flex:none;background:linear-gradient(160deg,#2c1f0d,#15100a)}
.desk__avatar img{width:100%;height:100%;object-fit:cover}
.desk__handle{font-family:var(--f-mono);font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px}
.verif{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px}
.desk__sub{font-size:13px;color:var(--ink-dim);font-family:var(--f-mono)}
.desk__sub b{color:var(--gold-2);letter-spacing:.12em}
.rankpill{margin-left:auto;font-family:var(--f-display);font-size:18px;letter-spacing:.03em;color:var(--gold-2);
  padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(243,179,42,.07)}
.rankbar{height:9px;border-radius:7px;background:#0c0a06;border:1px solid var(--line);overflow:hidden;margin:16px 0 8px}
.rankbar__fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));transition:width 1s var(--ease)}
.desk__next{font-size:12.5px;color:var(--ink-dim);font-family:var(--f-mono)}
.invite__label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.26em;color:var(--gold);margin-bottom:11px}
.invite__row{display:flex;gap:9px}
.invite__input{flex:1;min-width:0;background:#0c0a06;border:1px solid var(--line-2);border-radius:11px;padding:13px 14px;color:var(--gold-2);font-family:var(--f-mono);font-size:16px;outline:none}
.invite__share{width:100%;margin-top:11px}
.desk__floorhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:8px}
.desk__floorhead h3{font-family:var(--f-display);font-size:22px;letter-spacing:.03em}
.desk__counts{font-family:var(--f-mono);font-size:13px;color:var(--ink-dim)}
.desk__counts b{color:var(--gold-2);font-size:15px}.desk__counts .sep{margin:0 8px;color:var(--muted)}
.roster{list-style:none;display:flex;flex-direction:column;gap:8px}
.roster__row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;border-radius:11px;
  background:rgba(12,9,5,.5);border:1px solid var(--line);animation:stepIn .35s var(--ease)}
.roster__seat{width:34px;height:34px;border-radius:9px;overflow:hidden;background:linear-gradient(160deg,#2c1f0d,#15100a);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--gold-2)}
.roster__seat img{width:100%;height:100%;object-fit:cover}
.roster__handle{font-family:var(--f-mono);font-size:14px;color:var(--ink)}
.roster__status{font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px}
.roster__status--joined{color:var(--gold-2);border:1px solid var(--line-2)}
.roster__status--claimed{color:var(--green);border:1px solid rgba(43,217,128,.38);background:rgba(43,217,128,.07)}
.roster__empty{text-align:center;color:var(--muted);padding:26px 10px}
.roster__empty span{font-size:36px;display:block;margin-bottom:9px}
.roster__empty p{font-size:13.5px;max-width:34ch;margin:0 auto}

/* ---------- toast + confetti ---------- */
#confetti{position:fixed;inset:0;z-index:70;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(44px + var(--sab));transform:translateX(-50%) translateY(20px);z-index:80;
  background:var(--card-solid);border:1px solid var(--line-2);border-radius:12px;padding:12px 19px;color:var(--ink);
  font-size:13.5px;box-shadow:0 16px 40px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.32s var(--ease);font-family:var(--f-mono)}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast--err{border-color:var(--red);color:#ffd7db}
.toast--ok{border-color:rgba(43,217,128,.5);color:#c9ffe0}

/* ---------- responsive ---------- */
@media (max-width:680px){
  :root{--ticker:24px}
  .floorcount__label{display:none}
  .stepper__t{font-size:0}
  .iconbtn{width:40px;height:40px}            /* comfier touch target */
  .btn--mini{padding:11px 18px}               /* ≈44px tall for thumbs */
  .step__nav{gap:8px}
  .step__nav .btn{flex:1}
  .quest{grid-template-columns:auto 1fr;gap:11px}
  .quest__btn{grid-column:2;justify-self:end}
  .quest__done{position:static;opacity:1;transform:none;display:none}
  .quest.is-done .quest__done{display:block;justify-self:end;grid-column:2}
  .handleform,.walletform{flex-direction:column}
  .handleform .btn,.walletform .btn{width:100%}
  .invite__row{flex-wrap:wrap}                /* copy button drops below on tiny screens */
  .invite__row .btn{flex:1}
}
@media (max-width:420px){.btn--xl{font-size:17px;padding:15px 26px}}

/* ============================================================================
   PRESALE — gate sub/fine · live pill · raise bar · wallet · amount · cex · receipt
   Reuses the same tokens, buttons, .console / .step / .card / .progress shells.
   ========================================================================== */
.gate__sub{font-size:clamp(15px,2.4vw,18px);color:var(--ink-dim);margin:-4px 0 18px;max-width:52ch}
.gate__fine{font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.02em;margin-top:14px}

.livepill{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  color:var(--gold-2);padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;background:rgba(243,179,42,.07)}
.livepill__dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.4s infinite}
.mono{font-family:var(--f-mono)}

/* raise progress */
.raise{margin-bottom:22px}
.raise__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.raise__amt{font-family:var(--f-display);font-size:clamp(28px,6vw,40px);letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6da,var(--gold-2) 60%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.raise__cap{font-family:var(--f-mono);font-size:13px;color:var(--ink-dim)}
.raise .progress{height:12px;border-radius:7px;margin-bottom:9px}
.raise__sub{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}

/* wallet */
.pswallet{margin-bottom:20px;display:flex;flex-direction:column;gap:10px}
.pswallet .btn--lg{max-width:none}
.pswallet__info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:#0c0a06}
.pswallet__addr{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:15px;color:var(--gold-2);min-width:0}
.pswallet__addr span:last-child{overflow:hidden;text-overflow:ellipsis}
.pswallet__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--green);box-shadow:0 0 8px var(--green)}
.netwarn{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 15px;border-radius:12px;
  border:1px solid rgba(255,77,94,.4);background:rgba(255,77,94,.08);color:var(--red);font-size:14px;font-weight:600}

/* amount */
.amount{margin-bottom:18px}
.amount__label{display:block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.26em;color:var(--gold);margin-bottom:11px;text-transform:uppercase}
.amount__inputwrap{display:flex;align-items:center;gap:8px;background:#0c0a06;border:1px solid var(--line-2);border-radius:12px;padding:4px 16px}
.amount__inputwrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,179,42,.16)}
.amount__cur{font-family:var(--f-mono);color:var(--gold);font-size:22px}
.amount__input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--f-mono);font-weight:700;font-size:26px;padding:14px 0;-moz-appearance:textfield}
.amount__input::-webkit-outer-spin-button,.amount__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amount__eth{font-family:var(--f-mono);font-size:14px;color:var(--green);white-space:nowrap}
.amount__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.amtchip{font-family:var(--f-mono);font-size:13.5px;font-weight:700;color:var(--ink-dim);padding:9px 15px;border-radius:9px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);transition:.18s}
.amtchip:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(243,179,42,.08)}
.amount__allow{margin-top:13px;font-family:var(--f-mono);font-size:13px;color:var(--ink-dim)}

/* cex warning */
.cexwarn{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:13px;margin-bottom:18px;cursor:pointer;
  border:1px solid rgba(255,77,94,.32);background:rgba(255,77,94,.06)}
.cexwarn input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--gold);cursor:pointer}
.cexwarn__text{font-size:13px;line-height:1.5;color:var(--ink-dim)}
.cexwarn__text b{color:var(--ink)}.cexwarn__text u{color:var(--red);text-decoration-color:var(--red)}

/* buy */
#buyBtn{width:100%;max-width:none;animation:none}
.buystatus{min-height:20px;margin-top:13px;text-align:center;font-family:var(--f-mono);font-size:13.5px;color:var(--gold-2)}
.buystatus a{color:var(--blue-2);text-decoration:underline;text-underline-offset:2px}
.buyfoot{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}

/* receipt */
.receipt{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 24px}
.receipt__seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:32px;
  background:rgba(43,217,128,.1);border:2px solid var(--green);color:var(--green);box-shadow:0 0 0 6px rgba(43,217,128,.08)}
.receipt__title{font-family:var(--f-display);font-size:clamp(26px,5vw,38px);
  background:linear-gradient(180deg,#fff6da,var(--gold-2) 60%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.receipt__lead{color:var(--ink-dim);font-size:14.5px}
.receipt__big{display:flex;align-items:baseline;gap:12px;margin:6px 0 4px}
.receipt__big>span:first-child{font-family:var(--f-display);font-size:clamp(34px,8vw,52px);
  background:linear-gradient(180deg,#fff6da,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.receipt__eth{font-family:var(--f-mono);font-size:15px;color:var(--green)}
.receipt__txs{list-style:none;width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px;margin:8px 0}
.receipt__tx{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:10px;
  background:rgba(12,9,5,.55);border:1px solid var(--line);font-family:var(--f-mono);font-size:13px}
.receipt__tx a{color:var(--blue-2)}
.receipt__note{font-size:13px;color:var(--ink-dim);line-height:1.55;max-width:46ch;margin-top:4px}
.receipt__note b{color:var(--gold-2)}

/* gate live stats */
.gatestats{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-mono);font-size:13px;color:var(--ink-dim)}
.gatestats__dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.4s infinite}
.gatestats b{color:var(--gold-2)}

/* countdown + live recent-buys line */
.countdown{margin-top:10px;font-family:var(--f-mono);font-size:13px;color:var(--ink-dim);letter-spacing:.02em}
.countdown b{color:var(--red);font-weight:800}
.raise__live{margin-top:11px;display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-dim);min-height:18px}
.raise__live b{color:var(--gold-2)}
.raise__livedot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--green);box-shadow:0 0 8px var(--green)}
.raise__live.is-in{animation:liveIn .4s var(--ease)}
@keyframes liveIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}

/* tier / position box */
.tierbox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:13px 16px;border-radius:13px;
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(243,179,42,.08),rgba(243,179,42,.02))}
.tierbox__now{display:flex;align-items:center;gap:11px}
.tierbox__emoji{font-size:26px;line-height:1}
.tierbox__now>div{display:flex;flex-direction:column}
.tierbox__label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.tierbox__name{font-family:var(--f-display);font-size:21px;letter-spacing:.02em;color:var(--gold-2)}
.tierbox__next{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-dim);text-align:right}
.tierbox__next b{color:var(--ink)}
.tierbox__add{color:var(--green);font-weight:700}

/* receipt tier badge + action row */
.receipt__tier{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:20px;letter-spacing:.03em;color:var(--gold-2);
  padding:7px 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(243,179,42,.07)}
.receipt__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.receipt__actions .btn--lg{width:auto;max-width:none}

/* ---- game-y polish: tier ladder · ready-glow buy · raise sheen ---- */
.tierbox{flex-direction:column;align-items:stretch}
.tierbox__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tierladder{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2px}
.tierladder::before{content:"";position:absolute;left:13px;right:13px;top:50%;height:3px;transform:translateY(-50%);background:var(--line);border-radius:3px;z-index:0}
.tierladder::after{content:"";position:absolute;left:13px;top:50%;height:3px;transform:translateY(-50%);width:calc((100% - 26px) * var(--fill,0) / 100);background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));border-radius:3px;z-index:0;transition:width .5s var(--ease)}
.rung{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card-solid);border:2px solid var(--line);filter:grayscale(1);opacity:.45;transition:.3s var(--ease)}
.rung__e{font-size:13px;line-height:1}
.rung.is-on{border-color:var(--gold);opacity:1;filter:none;background:rgba(243,179,42,.12)}
.rung.is-cur{transform:scale(1.22);border-color:var(--gold-2);box-shadow:0 0 0 4px rgba(243,179,42,.16),0 0 12px rgba(243,179,42,.5);animation:rungPulse 2s infinite}
@keyframes rungPulse{50%{box-shadow:0 0 0 5px rgba(243,179,42,.22),0 0 18px rgba(243,179,42,.75)}}

#buyBtn:not(:disabled){animation:buyReady 2.2s ease-in-out infinite}
@keyframes buyReady{0%,100%{box-shadow:0 6px 18px rgba(243,179,42,.30)}50%{box-shadow:0 8px 30px rgba(243,179,42,.6),0 0 0 3px rgba(243,179,42,.14)}}

.raise .progress__bar{position:relative;overflow:hidden}
.raise .progress__bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-100%);animation:sheen 2.6s linear infinite}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.rung.is-cur,#buyBtn:not(:disabled),.raise .progress__bar::after{animation:none}}

/* ============================================================================
   GAME-UI PASS — chunky pressable buttons · token chips · HUD panel · XP bar
   Visual only: no markup or logic touched. Appended last so it wins cleanly.
   ========================================================================== */

/* buttons become chunky, pressable arcade buttons with a 3D lip + glossy top */
.btn--gold,.btn--primary{position:relative}
.btn--gold::before,.btn--primary::before{content:"";position:absolute;inset:2px 2px 46% 2px;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
.btn--gold{box-shadow:0 4px 0 var(--gold-deep),0 10px 22px rgba(243,179,42,.32)}
.btn--gold:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 4px 0 var(--gold-deep),0 14px 30px rgba(243,179,42,.5)}
.btn--gold:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--gold-deep),0 5px 14px rgba(243,179,42,.3)}
.btn--primary{box-shadow:0 4px 0 var(--green-deep),0 10px 22px rgba(43,217,128,.26)}
.btn--primary:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 4px 0 var(--green-deep),0 14px 30px rgba(43,217,128,.44)}
.btn--primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--green-deep),0 5px 14px rgba(43,217,128,.28)}
.btn:disabled{box-shadow:none}
/* the buy CTA keeps its lip while it pulses */
@keyframes buyReady{
  0%,100%{box-shadow:0 5px 0 var(--gold-deep),0 10px 22px rgba(243,179,42,.4)}
  50%{box-shadow:0 5px 0 var(--gold-deep),0 14px 34px rgba(243,179,42,.68),0 0 0 4px rgba(243,179,42,.16)}}

/* amount picks → chunky casino-style tokens that pop and press */
.amtchip{border-width:2px;box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.amtchip:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.34),0 8px 16px rgba(243,179,42,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.amtchip:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,.4)}

/* cards become game panels: thicker frame, inner sheen, HUD corner brackets */
.console,.card{border:2px solid var(--line-2);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.console{position:relative}
.console::before,.console::after{content:"";position:absolute;width:24px;height:24px;pointer-events:none;opacity:.55}
.console::before{top:12px;left:12px;border-top:3px solid var(--gold);border-left:3px solid var(--gold);border-top-left-radius:9px}
.console::after{bottom:12px;right:12px;border-bottom:3px solid var(--gold);border-right:3px solid var(--gold);border-bottom-right-radius:9px}

/* raise bar → glossy XP bar (deeper well + top gloss over the fill) */
.raise .progress{box-shadow:inset 0 2px 5px rgba(0,0,0,.55)}
.raise .progress__bar::before{content:"";position:absolute;inset:0 0 50% 0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent)}

/* arcade glow on the hero numbers + titles + win seal */
.raise__amt{text-shadow:0 0 20px rgba(243,179,42,.45)}
.step__title{text-shadow:0 3px 22px rgba(243,179,42,.22)}
.receipt__big>span:first-child{text-shadow:0 0 22px rgba(243,179,42,.5)}
.rung.is-cur{transform:scale(1.3)}
.receipt__seal{box-shadow:0 0 0 6px rgba(43,217,128,.08),0 0 26px rgba(43,217,128,.42);animation:sealPulse 2.2s ease-in-out infinite}
@keyframes sealPulse{50%{box-shadow:0 0 0 8px rgba(43,217,128,.13),0 0 36px rgba(43,217,128,.62)}}
@media (prefers-reduced-motion:reduce){.receipt__seal{animation:none}}
