/* ===================================================================================
   pomp.fun waitlist: v4 visual layer (2026-10-26)
   Loaded AFTER styles.css. Visual only: no IDs, data attributes or behaviour change.
   To roll back the look, remove the <link> to this file (and the title text swap in index.html).
   Look: night-sky background, slate surfaces, Rubik UI + Inter 900 headline, #00ffa3 accents.
   =================================================================================== */
:root{
  --v4-ground:#121524;
  --v4-surface:#2d3146;          /* podium plaques, countdown boxes, table header */
  --v4-board:#282c3e;            /* leaderboard panel */
  --v4-line:#333850;
  --v4-text:#eef0f8;
  --v4-dim:#9298b0;
  --v4-faint:#7d84a0;
  --v4-green:#00ffa3;
  --v4-green-top:#00e894;
  --v4-green-edge:#00b571;
  --v4-ink:#03140c;
}

/* ---------- type ---------- */
html body{font-family:Rubik,system-ui,sans-serif;background:var(--v4-ground);color:var(--v4-text);scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

/* ---------- background: night sky (replaces the green wave image), faded to the ground colour at the bottom ---------- */
html body #background-dot-pattern{background:var(--v4-ground)}
html body #background-dot-pattern::before{
  background-image:image-set(url("/assets/v4/stars.webp") type("image/webp"),url("/assets/v4/stars.jpg") type("image/jpeg"));
  background-position:center top;background-size:cover;opacity:.7;filter:blur(.6px);
  top:-8%;height:116%;bottom:auto;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.25) 66%,transparent 78%);mask:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.25) 66%,transparent 78%)}
html body #background-dot-pattern::after{display:block;
  background:
    radial-gradient(26% 14% at 50% 13%,rgba(12,14,26,.6),transparent 78%),
    radial-gradient(60% 45% at 0% 100%,rgba(132,156,214,.22),transparent 70%),
    linear-gradient(180deg,rgba(18,21,36,.35) 0%,rgba(18,21,36,0) 30%)}
@media (max-width:768px){html body #background-dot-pattern::after{display:block}}

/* ---------- header: no bar; X, Discord, Connect at the top-right ---------- */
html body .top-nav{background:none;box-shadow:none;border:0}
html body .nav-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;color:var(--v4-dim);
  background:linear-gradient(180deg,#23273a,#2f3449);
  box-shadow:0 2px 0 rgba(12,14,21,.35),0 .5px 0 #161928,inset 0 -1px 0 #161928,inset 0 -2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  transition:color .1s,filter .1s}
html body .nav-icon svg{width:18px;height:18px}
html body .nav-icon:hover{color:var(--v4-text);filter:brightness(1.08)}
html body #nav-wallet-btn,html body .nav-btn{height:40px;padding:0 20px;border-radius:12px;border:0;
  font-family:Rubik,system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--v4-ink);
  background:linear-gradient(180deg,var(--v4-green-top),var(--v4-green));
  box-shadow:0 2px 0 rgba(12,14,21,.2),0 .5px 0 #00a86a,inset 0 -1px 0 var(--v4-green-edge),inset 0 -2px 0 rgba(0,181,113,.45)}
html body #nav-wallet-btn:hover{filter:brightness(1.05)}
html body #nav-wallet-btn:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 var(--v4-green-edge),inset 0 1px 2px rgba(0,70,40,.3)}

/* ---------- headline: "$2,500 LEADERBOARD" on one line, Inter 900, slight slant ---------- */
html body .headline-container{display:flex;justify-content:center}
html body .prize-amount-small.v4-title{display:flex;align-items:baseline;justify-content:center;gap:.28em;flex-wrap:nowrap;white-space:nowrap;
  margin:0;font-family:Inter,Rubik,sans-serif;font-style:normal;font-weight:900;font-size:clamp(25px,4.7vw,56px);letter-spacing:-.035em;line-height:1;
  color:var(--v4-text);text-shadow:none}
html body .v4-title span{display:inline-block;transform:skewX(-8deg)}
html body .v4-title .v4-lb{color:var(--v4-green);text-transform:uppercase;letter-spacing:-.025em}

/* ---------- countdown ---------- */
html body #timer-status-text{margin:26px 0 10px!important;font-family:Rubik,sans-serif!important;font-size:18px!important;font-weight:700!important;
  letter-spacing:.06em!important;color:var(--v4-dim)!important;opacity:1!important}
html body .countdown{display:flex;align-items:flex-start;gap:14px}
html body .countdown-block{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:8px 10px 9px;
  border-radius:12px;background:var(--v4-surface);box-shadow:none;border:0}
html body .countdown-value{font-family:Rubik,sans-serif;font-size:32px;font-weight:700;line-height:1;color:var(--v4-text);text-shadow:none}
html body .countdown-label{margin-top:5px;font-family:Rubik,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-faint)}
html body .countdown-sep{font-size:26px;font-weight:700;line-height:44px;color:var(--v4-faint)}

/* ---------- invite line ---------- */
html body .cta-line{margin-top:22px}
html body .cta-text{font-family:Rubik,sans-serif;font-size:17px;font-weight:600;color:var(--v4-text);text-transform:none;letter-spacing:0;text-shadow:none}
html body .cta-info-icon{color:var(--v4-faint)}
html body .cta-info-icon:hover{color:var(--v4-text)}
html body .cta-tooltip-box{border-radius:14px;background:linear-gradient(180deg,#1f2234,#191c2b);color:var(--v4-dim);font-family:Rubik,sans-serif;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #090a11,0 18px 40px -12px rgba(0,0,0,.7)}

/* ---------- podium (2 | 1 | 3, #1 raised a little) ---------- */
html body .podium-slot:hover{transform:none}
html body .podium-avatar,html body .podium-avatar-revealed,html body .podium-avatar-blur{width:72px;height:72px;border-radius:9px;border:0;
  box-shadow:0 0 0 3px #5b6282;background:#23263a}
html body .podium-slot-1 .podium-avatar{width:86px;height:86px;border-radius:10px;border:0;box-shadow:0 0 0 3px #5b6282}
html body .podium-avatar img{border-radius:inherit!important;object-fit:cover}
html body .podium-avatar-wrap{margin-bottom:12px}
html body .podium-username{font-family:Rubik,sans-serif;font-size:19.5px;font-weight:700}
html body .podium-stat{font-family:Rubik,sans-serif;font-size:15.5px;font-weight:500;margin-bottom:14px}
html body .podium-stat-label{color:var(--v4-dim)}
html body .podium-stat-value{color:var(--v4-text);font-weight:700}
html body .podium-prize-card,html body .podium-slot:hover .podium-prize-card{border:0;border-radius:12px;background:var(--v4-surface);box-shadow:none;height:52px;min-height:52px}
html body .podium-prize-conversion{display:flex;align-items:center;justify-content:center;gap:8px;font-family:Rubik,sans-serif;font-size:19px;font-weight:700}
html body .podium-prize-usd{color:var(--v4-text);font-family:Rubik,sans-serif;font-size:19px;font-weight:700;opacity:1}
html body .prize-approx{color:var(--v4-faint);font-weight:500}
html body .podium-prize-sol{display:inline-flex;align-items:center;gap:7px;font-family:Rubik,sans-serif;font-size:19px;font-weight:700;color:var(--v4-text)}

/* SOL token everywhere: the real Solana mark (the raster coin is pushed out of view, the logo is its background) */
html body .prize-sol-token{width:18px!important;height:14px!important;border-radius:0!important;object-fit:none;object-position:-9999px 0;
  background:url("/assets/v4/sol.svg") center/contain no-repeat;filter:none;box-shadow:none}

/* ---------- leaderboard: one slate panel, rows divided by hairlines ---------- */
html body .leaderboard-table-wrap{border-radius:14px;overflow:hidden;background:var(--v4-board);box-shadow:0 0 0 1px #343950,0 18px 40px -22px rgba(0,0,0,.6);padding:0}
html body .leaderboard-table{border-collapse:collapse;border-spacing:0;width:100%}
html body .leaderboard-table thead th{height:44px;padding:0 18px;background:var(--v4-surface);border:0;border-bottom:1px solid #363b52;border-radius:0!important;
  font-family:Rubik,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8c93ad}
html body .lb-row td{height:70px;padding:0 18px;background:transparent;border:0;border-bottom:1px solid var(--v4-line);border-radius:0!important;box-shadow:none}
html body .lb-row:last-child td{border-bottom:0}
html body .lb-row:hover td{background:#2e3247}
html body .lb-row td.col-position{font-family:Rubik,sans-serif;font-size:17px;font-weight:700;color:var(--v4-text)}
html body .user-cell{gap:12px}
html body .user-cell .avatar{width:40px;height:40px;border-radius:7px;border:0;box-shadow:none;overflow:hidden}
html body .user-cell .avatar img{width:100%;height:100%;border-radius:7px;object-fit:cover}
html body .user-cell .username{font-family:Rubik,sans-serif;font-size:17.5px;font-weight:600;color:var(--v4-text)}
html body .ref-val{font-family:Rubik,sans-serif;font-size:17.5px;font-weight:600;color:var(--v4-text)}
html body .prize-cell{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.2}
html body .prize-sol-inline{display:inline-flex;align-items:center;gap:6px;font-family:Rubik,sans-serif;font-size:18px;font-weight:700;color:var(--v4-text)}
html body .prize-usd-sub{font-family:Rubik,sans-serif;font-size:14px;font-weight:500;color:var(--v4-dim)}
html body .leaderboard-page-btn{border-radius:12px;border:0;background:var(--v4-surface);color:var(--v4-text)}
html body .leaderboard-page-label{font-family:Rubik,sans-serif;color:var(--v4-dim)}

/* ---------- signed-in cards (invite link, referral count): flat slate, no hex/coin art ---------- */
html body .premium-card{border:0;border-radius:14px;background:var(--v4-surface);box-shadow:none}
html body .premium-card .card-bg-layer{display:none}
html body .premium-label{font-family:Rubik,sans-serif;color:var(--v4-dim);text-transform:none}
html body .premium-value,html body .ref-link-display{font-family:Rubik,sans-serif;color:var(--v4-text)}
html body .copy-btn{border-radius:12px!important;color:var(--v4-ink);background:linear-gradient(180deg,var(--v4-green-top),var(--v4-green));border:0;
  box-shadow:0 .5px 0 #00a86a,inset 0 -1px 0 var(--v4-green-edge),inset 0 -2px 0 rgba(0,181,113,.45)}

/* ---------- phones ---------- */
@media (max-width:768px){
  html body #timer-status-text{font-size:15px!important;margin-top:20px!important}
  html body .countdown{gap:6px}
  html body .countdown-block{min-width:54px;padding:7px 6px 8px}
  html body .countdown-value{font-size:24px}
  html body .countdown-label{font-size:9.5px}
  html body .countdown-sep{font-size:20px;line-height:40px}
  html body .cta-text{font-size:15.5px}
  html body .podium-avatar,html body .podium-avatar-revealed,html body .podium-avatar-blur{width:54px;height:54px;border-radius:8px}
  html body .podium-slot-1 .podium-avatar{width:64px;height:64px;border-radius:8px}
  html body .podium-username{font-size:15px}
  html body .podium-stat{font-size:13px}
  html body .podium-prize-conversion,html body .podium-prize-usd,html body .podium-prize-sol{font-size:15px}
  html body .lb-row td{height:62px;padding:0 12px}
  html body .leaderboard-table thead th{padding:0 12px;font-size:11.5px}
  html body .user-cell .avatar{width:34px;height:34px;border-radius:6px}
  html body .user-cell .username,html body .ref-val,html body .prize-sol-inline{font-size:15.5px}
  html body .prize-usd-sub{font-size:12.5px}
  html body .lb-row td.col-position{font-size:15px}
  html body #nav-wallet-btn{height:38px;padding:0 15px;font-size:14px}
  html body .nav-icon{width:38px;height:38px}
}

/* ---------- r2: beat styles.css's later !important / slot-specific rules ---------- */
html body .podium-slot .podium-avatar,html body .podium-slot .podium-avatar-revealed,html body .podium-slot .podium-avatar-blur{box-shadow:0 0 0 3px #5b6282!important;border:0!important}
html body .podium-prize-card .podium-prize-usd{color:var(--v4-text)!important;font-size:19px!important;font-weight:700}
html body .podium-prize-card .podium-prize-sol,html body .podium-prize-card .podium-prize-sol [data-sol-amount]{color:var(--v4-text)!important;font-size:19px!important}
html body .leaderboard-table .prize-sol-inline,html body .leaderboard-table .prize-sol-inline [data-sol-amount]{color:var(--v4-text)!important;font-size:18px!important}
html body .leaderboard-table .prize-usd-sub{font-size:14px!important;color:var(--v4-dim)!important}

/* table columns: Spot | User | Referrals (right) | Prize (right), like the v4 board */
html body .leaderboard-table{table-layout:fixed}
html body .leaderboard-table .col-position{width:84px}
html body .leaderboard-table .col-user{width:auto}
html body .leaderboard-table .col-referrals{width:130px;text-align:right}
html body .leaderboard-table .col-prize{width:170px;text-align:right}
html body .leaderboard-table td.col-prize .prize-cell{align-items:flex-end}
html body .leaderboard-table td.col-referrals .ref-val{text-align:right}
html body .user-cell .username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html body .user-cell{min-width:0}

@media (max-width:768px){
  /* plaques: amount on top, SOL under it (no "~", no token) so it never clips */
  html body .podium-prize-card,html body .podium-slot:hover .podium-prize-card{height:auto;min-height:0;padding:9px 4px;width:100%}
  html body .podium-prize-conversion{flex-direction:column;gap:2px}
  html body .podium-prize-card .prize-approx,html body .podium-prize-card .prize-sol-token{display:none!important}
  html body .podium-prize-card .podium-prize-usd{font-size:16px!important}
  html body .podium-prize-card .podium-prize-sol,html body .podium-prize-card .podium-prize-sol [data-sol-amount]{font-size:12.5px!important;color:var(--v4-dim)!important;font-weight:600}
  html body .leaderboard-table .col-position{width:40px}
  html body .leaderboard-table .col-referrals{width:56px}
  html body .leaderboard-table .col-prize{width:96px}
  html body .leaderboard-table .prize-sol-inline,html body .leaderboard-table .prize-sol-inline [data-sol-amount]{font-size:15px!important}
  html body .leaderboard-table .prize-usd-sub{font-size:12.5px!important}
  html body .leaderboard-table .prize-sol-inline .prize-sol-token{width:14px!important;height:11px!important}
  html body .leaderboard-table thead th.col-referrals{font-size:0}
  html body .leaderboard-table thead th.col-referrals::after{content:"Refs";font-size:11.5px}
}
@media (max-width:768px){
  html body .leaderboard-table .col-position{width:34px}
  html body .leaderboard-table .col-referrals{width:44px}
  html body .leaderboard-table .col-prize{width:100px}
  html body .lb-row td,html body .leaderboard-table thead th{padding:0 10px}
  html body .lb-row td.col-position{padding-right:0}
  html body .user-cell{gap:9px}
  html body .user-cell .avatar{width:30px;height:30px}
  html body .user-cell .username{font-size:15px}
  html body .leaderboard-table .prize-sol-inline,html body .leaderboard-table .prize-sol-inline [data-sol-amount]{font-size:14px!important}
  html body .leaderboard-table .prize-sol-inline{gap:4px}
}
@media (max-width:768px){html body .leaderboard-table .col-position{width:44px}}

/* r3: phones: "$2,500" stacked above LEADERBOARD (desktop stays on one line) */
@media (max-width:768px){
  html body .prize-amount-small.v4-title{flex-direction:column;align-items:center;gap:2px;font-size:clamp(34px,10.5vw,46px);line-height:.98}
  html body .v4-title .v4-amt{font-size:.78em}
}

/* r4: real wallet logos in the wallet picker (was ◈ ✦ ▰ glyphs) */
html body .wallet-option-placeholder.wallet-option-logo{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;overflow:hidden;background:none;flex:none}
html body .wallet-option-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}

/* r4: phones: sky zoomed out (smaller, sharper stars, more sky visible), no blur filter */
@media (max-width:768px){
  html body #background-dot-pattern::before{background-size:auto 72%;background-position:center top;filter:none;opacity:.75}
}

/* r5 (phones) */
@media (max-width:768px){
  /* "$2,500" the same size as LEADERBOARD */
  html body .v4-title .v4-amt{font-size:1em}
  /* table panel + rows in the same slate as the podium plaques */
  html body .leaderboard-table-wrap{background:var(--v4-surface)}
  html body .leaderboard-table thead th{background:#33384f}
  html body .lb-row:hover td{background:#33384f}
  /* background locked while scrolling: size it to the LARGE viewport (lvh) instead of the dynamic one (dvh),
     so the address bar showing/hiding no longer resizes or shifts the sky */
  html body #background-dot-pattern{top:0;bottom:auto;height:100vh;height:100lvh;min-height:0}
}
/* r5b: rows take the panel's colour (styles.css paints every cell #2b2e36 with a later rule) */
html body .leaderboard-table .lb-row td{background:transparent!important}
html body .leaderboard-table .lb-row:hover td{background:rgba(255,255,255,.035)!important}
html body .leaderboard-table .lb-row td{border-bottom:1px solid rgba(255,255,255,.07)!important}html body .leaderboard-table .lb-row:last-child td{border-bottom:0!important}

/* r6 (phones): tighter top spacing: header -> title, title -> "Ends in" */
@media (max-width:768px){
  html body .hero{padding-top:34px}
  html body .headline-container{margin-bottom:0}
  html body #timer-status-text{margin-top:16px!important;margin-bottom:8px!important}
}
@media (max-width:768px){html body .hero{padding-top:30px!important}}

/* r7: background locked on every mobile browser (incl. wallet in-app browsers): fixed pixel height from the screen size */
@media (max-width:768px){
  html body #background-dot-pattern{position:fixed!important;top:0!important;left:0;right:0;bottom:auto!important;height:var(--v4-bgh,100lvh)!important;min-height:0!important;transform:translateZ(0)}
}
/* signed-in cards (invite link, referral count) in the new slate look */
html body .stat-card.premium-card{background:var(--v4-surface)!important;border:0!important;box-shadow:none!important;border-radius:14px!important}
html body .premium-card .card-bg-layer{display:none!important}
html body .premium-inner{background:transparent!important;box-shadow:none!important;border:0!important}
html body .premium-label{font-family:Rubik,sans-serif!important;font-weight:600!important;font-size:15px!important;color:var(--v4-dim)!important;text-transform:none!important;letter-spacing:0!important}
html body .ref-link-display{background:rgba(0,0,0,.18)!important;border:0!important;border-radius:10px!important;font-family:Rubik,sans-serif!important}
html body .ref-link-display .ref-prefix{color:var(--v4-faint)!important}
html body #your-referrals-count{font-family:Rubik,sans-serif!important;color:var(--v4-text)!important}

/* ================= r8: fallback wallet picker styled like Privy's modal =================
   centered card that fades + scales in on desktop; bottom sheet that slides up on phones.
   Logo + centered "Log in or sign up", flat rows with a hairline border, no green glow. */
html body #wallet-picker-overlay{background:rgba(5,7,15,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:v4PkFade .2s ease both}
html body #wallet-picker-modal{position:relative;width:400px;max-width:calc(100vw - 32px);padding:56px 24px 22px;border:0;border-radius:24px;
  background:#05070f;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px -12px rgba(0,0,0,.7);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;animation:v4PkPop .24s cubic-bezier(.2,.8,.2,1) both}
html body #wallet-picker-modal::before{content:"";display:block;width:64px;height:64px;margin:0 auto 14px;background:url("/assets/v4/pomp-logo-clear-512.png") center/contain no-repeat}
html body .wallet-picker-header{display:block;text-align:center;margin:0}
html body .wallet-picker-header span,html body #wallet-picker-title{display:block;font-family:inherit;font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff}
html body #wallet-picker-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;border-radius:999px;
  background:rgba(255,255,255,.08);color:#c7cbd6;font-size:20px;line-height:1;border:0}
html body #wallet-picker-close:hover{background:rgba(255,255,255,.14);color:#fff}
html body .wallet-picker-sub{display:none}
html body #wallet-picker-list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
html body .wallet-option{display:flex;align-items:center;gap:12px;width:100%;height:56px;padding:0 14px;border-radius:12px;
  background:transparent;border:1px solid #2a2f3a;box-shadow:none;transform:none;font-family:inherit;transition:background .12s,border-color .12s}
html body .wallet-option:hover{background:rgba(255,255,255,.04);border-color:#3a404d}
html body .wallet-option:active{transform:scale(.99)}
html body .wallet-option-placeholder.wallet-option-logo{width:32px;height:32px;border-radius:8px}
html body .wallet-option-logo img{border-radius:8px}
html body .wallet-option-info{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
html body .wallet-option-name{font-family:inherit;font-size:16px;font-weight:500;color:#fff}
html body .wallet-option-status{font-family:inherit;font-size:12.5px;font-weight:500;color:#8b90a0}
html body .wallet-option-status:not(.not-installed){color:#00ffa3}
html body .wallet-picker-install{margin-top:18px;font-family:inherit;font-size:13px;font-weight:500;color:#8b90a0;text-align:center}
html body .wallet-picker-install a{color:#00ffa3}
@keyframes v4PkFade{from{opacity:0}to{opacity:1}}
@keyframes v4PkPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes v4PkSheet{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:640px){
  html body #wallet-picker-overlay{align-items:flex-end}
  html body #wallet-picker-modal{width:100%;max-width:100%;border-radius:24px 24px 0 0;padding:56px 20px calc(28px + env(safe-area-inset-bottom));
    animation:v4PkSheet .3s cubic-bezier(.2,.8,.2,1) both}
}
@media (prefers-reduced-motion:reduce){html body #wallet-picker-overlay,html body #wallet-picker-modal{animation:none}}
/* r8b: rows like Privy's: icon + name left, status small on the right, regular weight */
html body #wallet-picker-modal,html body #wallet-picker-modal *{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;text-align:left}
html body .wallet-picker-header span,html body #wallet-picker-title{text-align:center!important;font-weight:600!important}
html body .wallet-picker-install{text-align:center!important}
html body .wallet-option-info{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
html body .wallet-option-name{font-weight:500!important;font-size:16px!important}
html body .wallet-option-status{font-weight:400!important;font-size:12.5px!important;color:#8b90a0!important}
html body .wallet-option-status:not(.not-installed){color:#00ffa3!important}
html body .wallet-picker-install{font-weight:400!important}
html body .wallet-picker-install a{font-weight:500!important}

/* SIGNUP_MODE=discord (temporary): username comes from Discord (field shown again only if that name is taken),
   email marked optional */
body.signup-discord:not(.signup-show-username) .reg-form .form-group:first-child > label,
body.signup-discord:not(.signup-show-username) #reg-username{display:none!important}
body.signup-discord .reg-form .form-group:nth-child(2) > label::after{content:" (optional)";font-weight:500;color:var(--v4-faint,#7d84a0)}
/* Discord mode: way back to an older wallet account */
.reg-wallet-alt{display:block;width:100%;margin-top:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);
  color:#9298b0;font:500 13.5px/1.35 Rubik,system-ui,sans-serif;text-align:center;cursor:pointer}
.reg-wallet-alt b{color:#00ffa3;font-weight:600}
.reg-wallet-alt:hover{background:rgba(255,255,255,.06)}

/* ---------- follow on X: one card under the countdown ----------
   Slate like the countdown boxes; X's own black tile; a light 3D key so it
   doesn't compete with the green Connect key. The whole card is the link. */
html body .x-follow{display:flex;align-items:center;gap:14px;width:min(520px,100%);margin:14px auto 0;padding:12px;
  border-radius:16px;text-decoration:none;color:var(--v4-text);text-align:left;
  background:var(--v4-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 2px 0 rgba(12,14,21,.35);
  transition:filter .12s,transform .06s;-webkit-tap-highlight-color:transparent}
html body .x-follow:hover{filter:brightness(1.07)}
html body .x-follow:active{transform:translateY(1px)}
html body .x-follow:focus-visible{outline:2px solid var(--v4-green);outline-offset:3px}
html body .x-follow-mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#000;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
html body .x-follow-mark svg{width:19px;height:19px}
html body .x-follow-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
html body .x-follow-title{font-family:Rubik,sans-serif;font-size:16.5px;font-weight:700;line-height:1.15;color:var(--v4-text);white-space:nowrap}
html body .x-follow-title b{font-weight:700;color:var(--v4-green)}
html body .x-follow-sub{font-family:Rubik,sans-serif;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--v4-dim)}
html body .x-follow-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:1px 18px 0;border-radius:11px;
  font-family:Rubik,sans-serif;font-size:15px;font-weight:600;color:#0c0e15;
  background:linear-gradient(180deg,#e6e8f0,#ffffff);
  box-shadow:0 2px 0 rgba(12,14,21,.3),0 .5px 0 #9ea3b8,inset 0 -1px 0 #b9bdcd,inset 0 -2px 0 rgba(160,166,190,.45)}
/* Phones/tablets lay the page out by flex order (hero 1, invite line 3, podium 4), and
   styles.css lifts the invite line 70px under the countdown. With the banner in between:
   banner in slot 2 tucked under the hero, the invite line back in normal flow. */
@media (max-width:768px){
  html body #dashboard-view > .x-follow{order:2;margin-top:-28px}
  html body #dashboard-view > .cta-line{top:0;margin-top:20px;margin-bottom:26px}
}
@media (max-width:520px){
  html body .x-follow{gap:11px;padding:10px;border-radius:14px}
  html body .x-follow-mark{width:40px;height:40px;border-radius:11px}
  html body .x-follow-mark svg{width:17px;height:17px}
  html body .x-follow-title{font-size:15px}
  html body .x-follow-verb,html body .x-follow-on{display:none} /* the key already says Follow */
  html body .x-follow-sub{font-size:12.5px}
  html body .x-follow-btn{height:36px;padding:1px 14px 0;font-size:14px;border-radius:10px}
}
@media (max-width:359px){
  html body .x-follow{gap:10px}
  html body .x-follow-mark{width:36px;height:36px;border-radius:10px}
  html body .x-follow-title{font-size:14.5px}
  html body .x-follow-sub{display:none}
  html body .x-follow-btn{padding:1px 12px 0}
}

/* ---------- link-your-Discord card (invited accounts without Discord): same card as the X banner ---------- */
html body .x-follow[hidden]{display:none}
html body button.x-follow{border:0;font:inherit;cursor:pointer}
html body .x-follow + .dc-link{margin-top:10px}
html body .dc-link-mark{background:#5865f2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html body .dc-link-mark svg{width:22px;height:22px}
@media (max-width:768px){html body #dashboard-view > .x-follow + .dc-link{order:2;margin-top:10px}}
@media (max-width:520px){html body .dc-link-mark svg{width:20px;height:20px}}
/* signed in on desktop: the dashboard follows the cards; keep the same breathing room as the invite line */
@media (min-width:769px){html body #personal-dashboard{margin-top:24px}}