/* ============================================================
   GTA LOBBIES — shared design system
   Holographic South-Florida night. One file, sitewide.
   Edit here and every page changes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Sora:wght@300;400;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- base --- */
  --void:      #06040e;
  --abyss:     #0d0820;
  --slab:      #150e2c;

  /* --- neon --- */
  --violet:    #7c3aed;
  --violet-hi: #a78bfa;
  --magenta:   #ff2e88;
  --cyan:      #2ee6d6;
  --sunset:    #ff9142;

  /* --- type --- */
  --chrome:    #f2eefc;
  --mist:      #a99cc6;
  --dim:       #6f6390;

  /* --- system --- */
  --maxw: 1240px;
  --pad: clamp(1.1rem, 4vw, 2.4rem);
  --r: 20px;

  --holo: linear-gradient(100deg,
      var(--cyan) 0%,
      var(--violet-hi) 26%,
      var(--violet) 44%,
      var(--magenta) 68%,
      var(--sunset) 100%);

  --glow-v: 0 0 24px rgba(124,58,237,.45);
  --glow-m: 0 0 28px rgba(255,46,136,.40);
  --glow-c: 0 0 22px rgba(46,230,214,.35);

  font-size: 16.5px;

  /* sentinel: site.js checks this to confirm the stylesheet loaded */
  --nm-css: 1;
}

@media (min-width:1500px){ :root{ font-size:17.5px; --maxw:1360px; } }
@media (min-width:1900px){ :root{ font-size:18.5px; --maxw:1460px; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--chrome);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ambient violet pooling — page never reads as flat black */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 45% at 50% 0%,   rgba(124,58,237,.20), transparent 70%),
    radial-gradient(50% 40% at 12% 38%,  rgba(255,46,136,.10), transparent 70%),
    radial-gradient(55% 40% at 88% 72%,  rgba(46,230,214,.08), transparent 70%);
}

/* film grain — stops the gradients from banding, adds screen-print tooth */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer{ position:relative; z-index:2; }

img,svg{ max-width:100%; display:block; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{
  width:min(100% - (var(--pad) * 2), var(--maxw));
  margin-inline:auto;
}

/* ============================================================
   TYPE
   ============================================================ */

h1,h2,h3,.display{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}

h1{ font-size:clamp(2.5rem, 7.5vw, 5.2rem); font-weight:900; }
h2{ font-size:clamp(1.9rem, 4.4vw, 3.1rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.42rem); font-weight:700; letter-spacing:-.01em; }

p{ margin:0 0 1.1rem; max-width:64ch; color:var(--mist); }
.lede{ font-size:clamp(1.02rem,1.7vw,1.2rem); color:#cfc4e6; }

/* holographic fill for headline words */
.holo-text{
  background:var(--holo);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:hueDrift 14s ease-in-out infinite;
}
@keyframes hueDrift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* eyebrow: mono label with a lit rule */
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cyan);
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 .9rem;
}
.eyebrow::after{
  content:''; height:1px; flex:1; max-width:110px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}

.mono{ font-family:'Space Mono',monospace; }

/* ============================================================
   HOLOGRAPHIC PANEL
   The background lives on ::before so it can be edge-masked
   without fading the text that sits on top of it.
   ============================================================ */

.holo{
  position:relative;
  border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.3rem);
  isolation:isolate;
  overflow:hidden;
}
.holo::before{
  content:'';
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(160deg, rgba(167,139,250,.13), rgba(255,46,136,.05) 45%, rgba(46,230,214,.07)),
    linear-gradient(rgba(13,8,32,.86), rgba(13,8,32,.72));
  -webkit-mask-image:radial-gradient(130% 115% at 50% 0%, #000 55%, rgba(0,0,0,.35) 88%, transparent 100%);
          mask-image:radial-gradient(130% 115% at 50% 0%, #000 55%, rgba(0,0,0,.35) 88%, transparent 100%);
}
/* 1px iridescent rim, itself dissolving at the bottom */
.holo::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:var(--holo);
  background-size:300% 100%;
  opacity:.5;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:hueDrift 18s ease-in-out infinite;
}

@supports (backdrop-filter:blur(1px)){
  @media (min-width:900px){
    .holo{ backdrop-filter:blur(14px) saturate(1.3); }
  }
}

/* ============================================================
   NAV
   ============================================================ */

.topbar{
  position:sticky; top:0; z-index:60;
  padding:.7rem 0;
  transition:background .35s ease, box-shadow .35s ease;
}
.topbar.stuck{
  background:rgba(6,4,14,.72);
  box-shadow:0 1px 0 rgba(167,139,250,.16), 0 18px 40px -28px rgba(0,0,0,.9);
}
@supports (backdrop-filter:blur(1px)){
  .topbar.stuck{ backdrop-filter:blur(18px) saturate(1.2); }
}

.bar{ display:flex; align-items:center; gap:1.4rem; }

.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; flex:0 0 auto;
}
.brand-name{
  font-family:'Unbounded',sans-serif;
  font-weight:700; font-size:.94rem;
  letter-spacing:.11em; text-transform:uppercase;
  line-height:1.1;
}
.brand-sub{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:.56rem; letter-spacing:.2em;
  color:var(--dim); text-transform:uppercase;
}

/* --- the VI mark: blacked-out disc, neon violet outline --- */
.mark{ width:40px; height:40px; flex:0 0 auto; }
.mark .disc{ fill:#04030a; }
.mark .ring{
  fill:none; stroke:url(#markHolo); stroke-width:2.4;
  opacity:.85;
}
/* the numeral is a closed outline filled with the disc colour, so the
   inside stays black and only the edge carries the neon */
.mark .vi{
  fill:#04030a;
  stroke:var(--violet-hi);
  stroke-width:3.4;
  stroke-linejoin:miter;
  filter:url(#markGlow);
}
.mark .spin{ transform-origin:50% 50%; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.links{
  display:flex; align-items:center; gap:1.15rem;
  margin-left:auto;
  font-size:.83rem; letter-spacing:.05em;
}
.links a{
  text-decoration:none; color:var(--mist);
  padding:.3rem 0; position:relative;
  transition:color .22s ease;
}
.links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--holo); background-size:200% 100%;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.links a:hover, .links a[aria-current="page"]{ color:var(--chrome); }
.links a:hover::after, .links a[aria-current="page"]::after{ transform:scaleX(1); }

@supports not (gap:1px){
  .links a{ margin-left:1.5rem; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Space Mono',monospace;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 1.7rem;
  border-radius:100px; border:0;
  text-decoration:none; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.btn-primary{
  color:#0a0616; font-weight:700;
  background:var(--holo); background-size:220% 100%;
  box-shadow:0 0 0 rgba(255,46,136,0), 0 10px 30px -14px rgba(255,46,136,.8);
  animation:hueDrift 12s ease-in-out infinite;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow-m), 0 16px 40px -16px rgba(255,46,136,.9);
}
.btn-ghost{
  color:var(--chrome);
  background:rgba(167,139,250,.07);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.35);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  background:rgba(167,139,250,.13);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.6), var(--glow-v);
}

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.7rem; }

/* ============================================================
   HERO + MARINA SCENE
   ============================================================ */

.hero{ position:relative; padding-top:1rem; }

.marina{
  position:relative;
  width:100%;
  height:clamp(300px, 42vw, 600px);
  margin-bottom:-14vw;
  /* the scene bleeds into the page instead of ending in a box */
  -webkit-mask-image:linear-gradient(#000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
          mask-image:linear-gradient(#000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
.marina svg{ width:100%; height:100%; display:block; }

.hero-body{
  position:relative; z-index:5;
  padding-bottom:clamp(3rem,7vw,6rem);
}

/* --- countdown --- */
.countdown{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin:0 0 1.6rem; padding:0; list-style:none;
}
.countdown li{
  min-width:78px;
  padding:.6rem .8rem .5rem;
  border-radius:12px;
  background:rgba(13,8,32,.66);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.22);
  text-align:center;
}
.countdown .num{
  display:block;
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  line-height:1;
  color:var(--chrome);
  text-shadow:0 0 18px rgba(167,139,250,.75);
  font-variant-numeric:tabular-nums;
}
.countdown .lab{
  display:block; margin-top:.34rem;
  font-family:'Space Mono',monospace;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
}

.launch-line{
  font-family:'Space Mono',monospace;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sunset); margin-bottom:.9rem;
}

.marina--slim{ height:clamp(190px, 25vw, 330px); margin-bottom:-7vw; }
@media (max-width:760px){ .marina--slim{ aspect-ratio:2/1; max-height:34vh; margin-bottom:-12vw; } }

@keyframes palmSway{
  0%,100%{ transform:rotate(-1.1deg); }
  50%    { transform:rotate(1.4deg); }
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section{ padding:clamp(3.4rem,8vw,7rem) 0; position:relative; }

/* soft light bleeding between sections — no hard dividers anywhere */
.section::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(167,139,250,.35), transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.hero + .section::before{ display:none; }

.section-head{ margin-bottom:clamp(1.8rem,4vw,2.9rem); max-width:62ch; }

.grid{
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

/* ============================================================
   BOARD CARDS
   ============================================================ */

.board{
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:transform .3s ease;
}
.board:hover{ transform:translateY(-4px); }
.board:hover::after{ opacity:.95; }

.board h3{ margin-bottom:.4rem; }
.board p{ font-size:.92rem; margin-bottom:1.1rem; }

.board-stat{
  margin-top:auto;
  display:flex; gap:1.2rem;
  font-family:'Space Mono',monospace;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.board-stat b{ color:var(--cyan); font-weight:700; }

.board-ic{
  width:38px; height:38px; margin-bottom:1rem;
  stroke:var(--violet-hi); fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(167,139,250,.5));
}

/* ============================================================
   SHOP CARDS
   ============================================================ */

.shop-card{ display:flex; flex-direction:column; padding:0; }
.shop-media{
  aspect-ratio:4/3;
  display:grid; place-items:center;
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(255,46,136,.22), transparent 70%),
    linear-gradient(160deg, rgba(46,230,214,.10), rgba(124,58,237,.16));
  position:relative;
}
.shop-media svg{ width:64%; height:64%; }
.shop-body{ padding:1.15rem 1.3rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.shop-body h3{ font-size:1.05rem; margin-bottom:.3rem; }
.shop-body p{ font-size:.88rem; margin-bottom:1rem; }

.price-row{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.price{
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:1.05rem; color:var(--chrome);
}
.price small{
  display:block; font-weight:400; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.btn-sm{ padding:.6rem 1.1rem; font-size:.68rem; }

.tag{
  position:absolute; top:.75rem; left:.75rem;
  font-family:'Space Mono',monospace;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:100px;
  background:rgba(6,4,14,.7); color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(46,230,214,.4);
}

/* ============================================================
   SIGNAL (news / guides)
   ============================================================ */

.signal-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.signal-list a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.1rem;
  padding:1rem 1.2rem;
  border-radius:14px;
  text-decoration:none;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.14);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.signal-list a:hover{
  background:rgba(21,14,44,.75);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.42), var(--glow-v);
  transform:translateX(3px);
}
.signal-date{
  font-family:'Space Mono',monospace; font-size:.65rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}
.signal-title{ font-weight:400; color:var(--chrome); font-size:.95rem; }
.signal-arrow{ color:var(--cyan); font-size:1rem; }

@media (max-width:640px){
  .signal-list a{ grid-template-columns:1fr; gap:.35rem; }
  .signal-arrow{ display:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

footer{
  padding:clamp(2.6rem,6vw,4rem) 0 2.4rem;
  margin-top:2rem;
  position:relative;
}
footer::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(124,58,237,.10), rgba(6,4,14,0));
  -webkit-mask-image:linear-gradient(#000, transparent 80%);
          mask-image:linear-gradient(#000, transparent 80%);
}
.foot-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:2.4rem;
}
.foot-grid h4{
  font-family:'Space Mono',monospace;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 .9rem;
}
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot-grid a{
  text-decoration:none; color:var(--mist); font-size:.87rem;
  transition:color .2s ease;
}
.foot-grid a:hover{ color:var(--chrome); }

.legal{
  font-size:.76rem; color:var(--dim); max-width:none;
  padding-top:1.6rem;
  border-top:1px solid rgba(167,139,250,.12);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   MOBILE — cut the expensive effects, keep the look
   ============================================================ */

@media (max-width:899px){
  /* backdrop-filter is the expensive one — drop it, keep a solid glass tone */
  .holo{ background:rgba(13,8,32,.82); }
  body::after{ opacity:.03; }
}

/* keep the scene from cropping its own palms on a phone */
@media (max-width:760px){
  .marina{ height:auto; aspect-ratio:3/2; max-height:66vh; margin-bottom:-22vw; }
}

@media (max-width:560px){
  .links{ gap:.95rem; font-size:.76rem; }
  .brand-sub{ display:none; }
  .btn{ width:100%; }
  .btn-sm{ width:auto; }
  .countdown li{ flex:1 1 68px; min-width:0; }
}

/* stop hover styles sticking on touch */
@media (hover:none){
  .board:hover, .signal-list a:hover, .btn:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   TABS
   ============================================================ */

.tabs{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin:0 0 1.6rem; padding:0; list-style:none;
}
.tab{
  font-family:'Space Mono',monospace;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1.1rem; border-radius:100px; border:0;
  background:rgba(13,8,32,.6); color:var(--mist);
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18);
  transition:color .22s ease, box-shadow .22s ease, background .22s ease;
}
.tab:hover{ color:var(--chrome); box-shadow:inset 0 0 0 1px rgba(167,139,250,.4); }
.tab[aria-selected="true"]{
  color:#0a0616; font-weight:700;
  background:var(--holo); background-size:220% 100%;
  box-shadow:0 8px 26px -14px rgba(255,46,136,.9);
  animation:hueDrift 12s ease-in-out infinite;
}
.panel[hidden]{ display:none; }

/* ============================================================
   LEADERBOARD TABLE
   ============================================================ */

.lb{ display:grid; gap:.4rem; }

.lb-head, .lb-row{
  display:grid;
  grid-template-columns:52px 1.6fr 1fr 92px 92px;
  align-items:center; gap:1rem;
  padding:.85rem 1.15rem;
  border-radius:13px;
}
.lb-head{
  font-family:'Space Mono',monospace;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); padding-block:.4rem;
}
.lb-row{
  background:rgba(13,8,32,.52);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.13);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
  text-decoration:none; color:inherit;
}
.lb-row:hover{
  background:rgba(21,14,44,.8);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.4), var(--glow-v);
  transform:translateX(3px);
}

.lb-rank{
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:1.05rem; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.lb-row:nth-child(2) .lb-rank{ color:var(--sunset); text-shadow:0 0 14px rgba(255,145,66,.7); }
.lb-row:nth-child(3) .lb-rank{ color:var(--chrome); }
.lb-row:nth-child(4) .lb-rank{ color:var(--magenta); }

.lb-crew{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.lb-tag{
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:.66rem; letter-spacing:.1em;
  padding:.28rem .55rem; border-radius:6px;
  background:rgba(124,58,237,.2); color:var(--violet-hi);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.4);
  white-space:nowrap;
}
.lb-name{
  font-size:.95rem; color:var(--chrome);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-meta, .lb-pts, .lb-trend{
  font-family:'Space Mono',monospace; font-size:.78rem;
  color:var(--mist); font-variant-numeric:tabular-nums;
}
.lb-pts{ color:var(--chrome); font-weight:700; }
.lb-trend.up{ color:var(--cyan); }
.lb-trend.down{ color:#ff6a6a; }
.lb-trend.flat{ color:var(--dim); }

@media (max-width:760px){
  .lb-head{ display:none; }
  .lb-row{
    grid-template-columns:44px 1fr auto;
    grid-template-areas:'rank crew pts' 'rank meta trend';
    row-gap:.2rem;
  }
  .lb-rank{ grid-area:rank; }
  .lb-crew{ grid-area:crew; }
  .lb-meta{ grid-area:meta; font-size:.68rem; }
  .lb-pts{ grid-area:pts; text-align:right; }
  .lb-trend{ grid-area:trend; text-align:right; font-size:.68rem; }
}

/* pre-launch: standings are empty on purpose */
.lb-locked{
  text-align:center; padding:clamp(1.8rem,5vw,3rem) 1.2rem;
}
.lb-locked .num{
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:clamp(2rem,6vw,3.2rem); color:var(--chrome);
  text-shadow:0 0 24px rgba(167,139,250,.6);
}

/* ============================================================
   CLIP FEED
   ============================================================ */

.clip-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.clip{ padding:0; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.clip:hover{ transform:translateY(-4px); }
.clip{ transition:transform .3s ease; }

.clip-thumb{
  aspect-ratio:16/9; position:relative;
  display:grid; place-items:center;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(255,46,136,.24), transparent 70%),
    linear-gradient(150deg, rgba(46,230,214,.09), rgba(124,58,237,.2));
}
.clip-play{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(6,4,14,.66);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.5), 0 0 26px rgba(124,58,237,.5);
  transition:box-shadow .25s ease, transform .25s ease;
}
.clip:hover .clip-play{ transform:scale(1.08); box-shadow:inset 0 0 0 1px var(--magenta), var(--glow-m); }
.clip-play svg{ width:18px; height:18px; margin-left:3px; fill:var(--chrome); }

.clip-dur{
  position:absolute; right:.6rem; bottom:.6rem;
  font-family:'Space Mono',monospace; font-size:.6rem;
  padding:.2rem .45rem; border-radius:5px;
  background:rgba(6,4,14,.8); color:var(--mist);
}
.clip-body{ padding:.95rem 1.1rem 1.15rem; display:flex; flex-direction:column; flex:1; gap:.5rem; }
.clip-body h3{ font-size:.96rem; margin:0; line-height:1.3; }
.clip-by{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-family:'Space Mono',monospace; font-size:.64rem;
  letter-spacing:.1em; color:var(--dim);
}
.clip-votes{
  margin-top:auto; display:flex; align-items:center; gap:.4rem;
  font-family:'Space Mono',monospace; font-size:.72rem; color:var(--cyan);
}

/* ============================================================
   REGISTRY — claim a name before launch
   ============================================================ */

.reg-form{ display:flex; flex-wrap:wrap; gap:.6rem; max-width:620px; margin-bottom:1rem; }
.field{
  flex:1 1 190px; min-width:0;
  padding:.9rem 1.2rem; border-radius:100px; border:0;
  background:rgba(6,4,14,.72); color:var(--chrome);
  font-family:'Space Mono',monospace; font-size:.85rem;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.35);
}
.field::placeholder{ color:var(--dim); }
.field:focus{ outline:2px solid var(--cyan); outline-offset:2px; }

.reg-result{
  font-family:'Space Mono',monospace; font-size:.8rem;
  padding:.9rem 1.2rem; border-radius:12px; margin-top:.4rem;
  display:none;
}
.reg-result.show{ display:block; }
.reg-result.free{ color:var(--cyan); background:rgba(46,230,214,.09); box-shadow:inset 0 0 0 1px rgba(46,230,214,.35); }
.reg-result.taken{ color:#ff8fa8; background:rgba(255,46,136,.09); box-shadow:inset 0 0 0 1px rgba(255,46,136,.35); }

/* ============================================================
   LIVE CHAT DOCK
   Open to everyone. Reading is free; posting needs an account.
   ============================================================ */

.chatdock{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  width:min(340px, calc(100vw - 2.2rem));
  border-radius:18px; overflow:hidden;
  background:rgba(9,6,20,.92);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.28), 0 30px 60px -30px rgba(0,0,0,.95);
  display:flex; flex-direction:column;
  transition:height .35s cubic-bezier(.22,.7,.3,1);
  height:min(470px, 68vh);
}
@supports (backdrop-filter:blur(1px)){
  @media (min-width:900px){ .chatdock{ backdrop-filter:blur(20px) saturate(1.2); } }
}
.chatdock[data-open="false"]{ height:52px; }

.chat-head{
  flex:0 0 52px;
  display:flex; align-items:center; gap:.6rem;
  padding:0 1rem; cursor:pointer; border:0; width:100%;
  background:transparent; color:var(--chrome); text-align:left;
  font-family:'Space Mono',monospace; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.chat-live{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.chat-count{ margin-left:auto; color:var(--dim); font-size:.66rem; }
.chat-caret{ transition:transform .35s ease; color:var(--mist); }
.chatdock[data-open="false"] .chat-caret{ transform:rotate(180deg); }

.chat-log{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:.3rem 1rem .6rem;
  display:flex; flex-direction:column; gap:.75rem;
  scrollbar-width:thin; scrollbar-color:rgba(167,139,250,.4) transparent;
}
.chat-log::-webkit-scrollbar{ width:5px; }
.chat-log::-webkit-scrollbar-thumb{ background:rgba(167,139,250,.35); border-radius:4px; }

.msg{ font-size:.83rem; line-height:1.5; animation:msgIn .4s ease both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.msg .who{
  font-family:'Space Mono',monospace; font-size:.68rem;
  letter-spacing:.06em; margin-right:.45rem;
}
.msg .who.c1{ color:var(--cyan); }
.msg .who.c2{ color:var(--magenta); }
.msg .who.c3{ color:var(--sunset); }
.msg .who.c4{ color:var(--violet-hi); }
.msg .tagchip{
  font-family:'Space Mono',monospace; font-size:.58rem;
  padding:.1rem .32rem; border-radius:4px; margin-right:.4rem;
  background:rgba(124,58,237,.24); color:var(--violet-hi);
}
.msg .txt{ color:var(--mist); }

.chat-foot{ flex:0 0 auto; position:relative; padding:.75rem; }
.chat-input-row{ display:flex; gap:.5rem; }
.chat-input{
  flex:1; min-width:0; padding:.7rem .95rem; border-radius:100px; border:0;
  background:rgba(6,4,14,.8); color:var(--chrome);
  font-family:'Sora',sans-serif; font-size:.82rem;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.22);
}
.chat-send{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--holo); background-size:220% 100%;
  display:grid; place-items:center; cursor:pointer;
}
.chat-send svg{ width:15px; height:15px; fill:#0a0616; }

/* the gate: readable chat, locked composer */
.chat-gate{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:.7rem;
  background:linear-gradient(rgba(9,6,20,.55), rgba(9,6,20,.96));
  text-align:center;
}
@supports (backdrop-filter:blur(1px)){
  .chat-gate{ backdrop-filter:blur(4px); }
}
.chat-gate p{
  margin:0; font-family:'Space Mono',monospace;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist);
}
.chat-gate .btn{ padding:.55rem 1.1rem; font-size:.64rem; width:auto; }

@media (max-width:560px){
  .chatdock{
    right:0; left:0; bottom:0; width:100%;
    border-radius:18px 18px 0 0;
    height:min(60vh, 420px);
  }
  .chatdock[data-open="false"]{ height:48px; }
  .chat-head{ flex-basis:48px; }
  body{ padding-bottom:56px; }
}

/* ============================================================
   MOCK-DATA BANNER — remove once a real backend is wired in
   ============================================================ */

.mocknote{
  font-family:'Space Mono',monospace; font-size:.66rem;
  letter-spacing:.1em; color:var(--sunset);
  padding:.7rem 1rem; border-radius:10px; margin-bottom:1.4rem;
  background:rgba(255,145,66,.08);
  box-shadow:inset 0 0 0 1px rgba(255,145,66,.3);
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:.8rem 1.3rem; border-radius:0 0 12px 0;
  background:var(--violet); color:#fff;
  font-family:'Space Mono',monospace; font-size:.8rem;
}
.skip:focus{ left:0; }

/* ============================================================
   MOBILE NAV
   ============================================================ */

.nav-toggle{
  display:none;
  margin-left:auto;
  width:42px; height:42px; border:0; border-radius:12px;
  background:rgba(167,139,250,.08);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.28);
  cursor:pointer;
  place-items:center;
}
.nav-toggle span{
  display:block; width:18px; height:1.5px; background:var(--chrome);
  border-radius:2px; position:relative;
  transition:background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:1.5px;
  background:var(--chrome); border-radius:2px;
  transition:transform .3s cubic-bezier(.22,.7,.3,1);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1020px){
  .nav-toggle{ display:grid; }
  .links{
    position:fixed; inset:0; z-index:70;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.4rem; margin:0;
    padding:5rem var(--pad) 3rem;
    background:rgba(6,4,14,.98);
    transform:translateY(-101%);
    transition:transform .38s cubic-bezier(.22,.7,.3,1);
    overflow-y:auto;
  }
  .links[data-open="true"]{ transform:none; }
  .links a{
    font-family:'Unbounded',sans-serif;
    font-size:1.5rem; font-weight:700; letter-spacing:-.01em;
    color:var(--chrome); padding:.55rem 0; width:100%;
  }
  .links a::after{ bottom:.3rem; }
}

/* ============================================================
   ROUTE CARDS  (home page hub)
   ============================================================ */

.route{
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .3s ease;
}
.route:hover{ transform:translateY(-4px); }
.route .rn{
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.9rem;
}
.route h3{ margin-bottom:.45rem; }
.route p{ font-size:.92rem; margin-bottom:1.1rem; }
.route .go{
  margin-top:auto;
  font-family:'Space Mono',monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:.45rem;
}
.route:hover .go{ color:var(--magenta); }

/* ============================================================
   PROSE  (about / rules / privacy)
   ============================================================ */

.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.35rem,2.6vw,1.85rem); margin:2.6rem 0 .8rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.05rem; margin:1.9rem 0 .5rem; }
.prose p{ margin-bottom:1.05rem; }
.prose ul, .prose ol{ padding-left:1.15rem; margin:0 0 1.3rem; }
.prose li{ color:var(--mist); margin-bottom:.55rem; }
.prose strong{ color:var(--chrome); font-weight:600; }
.prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.prose .updated{
  font-family:'Space Mono',monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  margin-bottom:2rem;
}

/* ============================================================
   STEPS  (shop process)
   ============================================================ */

.steps{ counter-reset:step; }
.steps .holo::marker{ content:none; }
.step-n{
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:.72rem; letter-spacing:.18em;
  color:var(--magenta); margin-bottom:.7rem; display:block;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq{ display:grid; gap:.55rem; }
.faq details{
  border-radius:14px; padding:0;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.14);
  overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.05rem 1.25rem;
  font-size:.95rem; color:var(--chrome);
  display:flex; align-items:center; gap:1rem;
  transition:background .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; margin-left:auto; flex:0 0 auto;
  font-family:'Space Mono',monospace; color:var(--cyan); font-size:1.1rem;
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ background:rgba(21,14,44,.7); }
.faq .ans{ padding:0 1.25rem 1.2rem; }
.faq .ans p{ font-size:.9rem; margin:0; }

/* ============================================================
   404
   ============================================================ */

.lost{ text-align:center; padding:clamp(3rem,10vw,7rem) 0; }
.lost .code{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(4.5rem,18vw,11rem); line-height:.9;
  margin-bottom:.4rem;
}
.lost p{ margin-inline:auto; }
.lost .btn-row{ justify-content:center; }

/* ============================================================
   CHAT DOCK — keep clear of the footer on desktop
   ============================================================ */

@media (min-width:561px){
  body{ padding-bottom:80px; }
}

/* ============================================================
   LEONIDA MAP
   ============================================================ */

.map-layout{
  display:grid; gap:1.1rem;
  grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:960px){ .map-layout{ grid-template-columns:1fr; } }

.mapwrap{ position:relative; border-radius:var(--r); overflow:hidden; }
.mapstage{
  width:100%; aspect-ratio:5/4; display:block;
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(124,58,237,.16), transparent 70%),
    linear-gradient(#0a0620, #06040e);
  touch-action:none; cursor:grab;
}
.mapstage:active{ cursor:grabbing; }
@media (max-width:600px){ .mapstage{ aspect-ratio:3/4; } }

.mapctl{
  position:absolute; top:.75rem; right:.75rem;
  display:grid; gap:.35rem; z-index:3;
}
.mapbtn{
  width:34px; height:34px; border:0; border-radius:10px; cursor:pointer;
  background:rgba(6,4,14,.8); color:var(--chrome);
  font-family:'Space Mono',monospace; font-size:.95rem; line-height:1;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);
  transition:box-shadow .2s ease, color .2s ease;
}
.mapbtn:hover{ color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(46,230,214,.6); }
.mapbtn.wide{ width:auto; padding:0 .7rem; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }

.maphint{
  position:absolute; left:.75rem; top:.75rem; z-index:3;
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  background:rgba(6,4,14,.7); padding:.35rem .6rem; border-radius:7px;
  pointer-events:none;
}

.mapinfo{
  position:absolute; left:.75rem; bottom:.75rem; z-index:3;
  width:min(270px, calc(100% - 1.5rem));
  padding:.9rem 1rem; border-radius:14px;
  background:rgba(9,6,20,.94);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.mapinfo.show{ opacity:1; transform:none; pointer-events:auto; }
.mapinfo h4{
  margin:0 0 .2rem; font-family:'Unbounded',sans-serif;
  font-size:.92rem; font-weight:700; color:var(--chrome);
}
.mapinfo .kind{
  font-family:'Space Mono',monospace; font-size:.56rem;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:.5rem;
}
.mapinfo p{ font-size:.8rem; margin:0; }
.mapinfo .close{
  position:absolute; top:.5rem; right:.6rem; border:0; background:none;
  color:var(--dim); cursor:pointer; font-size:1rem; line-height:1;
}

/* pin colours by type */
.k-confirmed{ color:var(--cyan); }
.k-community{ color:var(--violet-hi); }
.k-crew{ color:var(--magenta); }
.k-meet{ color:var(--sunset); }

.mapfilters{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem; }

/* ---- roster rail ---- */
.roster{ display:grid; gap:.45rem; }
.roster-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem;
  width:100%; text-align:left; border:0; cursor:pointer;
  padding:.7rem .85rem; border-radius:12px;
  background:rgba(13,8,32,.55); color:inherit;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.14);
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.roster-item:hover{
  background:rgba(21,14,44,.85); transform:translateX(3px);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.42);
}
.roster-dot{
  width:8px; height:8px; border-radius:50%; background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.roster-name{ font-size:.86rem; color:var(--chrome); }
.roster-where{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.1em; color:var(--dim); display:block; margin-top:.1rem;
}
.roster-ago{ font-family:'Space Mono',monospace; font-size:.6rem; color:var(--dim); }

.checkin-gate{
  margin-top:.8rem; padding:1rem; border-radius:14px; text-align:center;
  background:rgba(124,58,237,.09);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.28);
}
.checkin-gate p{
  margin:0 0 .7rem; font-family:'Space Mono',monospace;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist);
}
.checkin-gate .btn{ padding:.6rem 1.2rem; font-size:.66rem; width:auto; }

/* ---- honest capability table ---- */
.cando{ display:grid; gap:.5rem; }
.cando-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:.85rem 1.1rem; border-radius:12px;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.13);
}
.cando-row .what{ font-size:.9rem; color:var(--chrome); }
.cando-row .why{
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.08em; color:var(--dim); display:block; margin-top:.15rem;
}
.yn{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:100px; white-space:nowrap;
}
.yn.y{ color:var(--cyan); background:rgba(46,230,214,.1); box-shadow:inset 0 0 0 1px rgba(46,230,214,.4); }
.yn.n{ color:#ff8fa8; background:rgba(255,46,136,.1); box-shadow:inset 0 0 0 1px rgba(255,46,136,.4); }
.yn.m{ color:var(--sunset); background:rgba(255,145,66,.1); box-shadow:inset 0 0 0 1px rgba(255,145,66,.4); }

@media (max-width:560px){
  .cando-row{ grid-template-columns:1fr auto; }
  .cando-row .ico{ display:none; }
}

/* ============================================================
   STREAMS
   ============================================================ */

/* --- featured player --- */
.player{ position:relative; border-radius:var(--r); overflow:hidden; padding:0; }
.stage{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#04030a; display:grid; gap:2px;
}
.stage.l-single{ grid-template-columns:1fr; }
.stage.l-split { grid-template-columns:1fr 1fr; }
.stage.l-quad  { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

.pane{
  position:relative; overflow:hidden; min-width:0; min-height:0;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(255,46,136,.2), transparent 70%),
    linear-gradient(150deg, rgba(46,230,214,.08), rgba(124,58,237,.18));
  display:grid; place-items:center;
}
.pane iframe{ width:100%; height:100%; border:0; display:block; }
.pane-label{
  position:absolute; top:.55rem; left:.55rem;
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:6px;
  background:rgba(6,4,14,.78); color:var(--mist);
}
.pane-drop{
  position:absolute; top:.5rem; right:.5rem;
  width:26px; height:26px; border:0; border-radius:7px; cursor:pointer;
  background:rgba(6,4,14,.8); color:var(--mist); line-height:1;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);
}
.pane-drop:hover{ color:var(--magenta); }
.pane-empty{
  font-family:'Space Mono',monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  text-align:center; padding:1rem;
}

/* pip: second pane floats over the first */
.stage.l-pip{ grid-template-columns:1fr; }
.stage.l-pip .pane:nth-child(2){
  position:absolute; right:.7rem; bottom:.7rem;
  width:clamp(110px, 26%, 260px); aspect-ratio:16/9;
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(167,139,250,.5), 0 18px 34px -18px #000;
}

.playerbar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.8rem 1rem;
}
.playerbar .who{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.playerbar .nm{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:.92rem; }
.layoutctl{ display:flex; gap:.3rem; margin-left:auto; }
.lbtn{
  border:0; cursor:pointer; border-radius:9px; padding:.42rem .7rem;
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(13,8,32,.7); color:var(--mist);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.2);
  transition:color .2s ease, box-shadow .2s ease;
}
.lbtn:hover{ color:var(--chrome); box-shadow:inset 0 0 0 1px rgba(167,139,250,.45); }
.lbtn[aria-pressed="true"]{
  color:#0a0616; font-weight:700;
  background:var(--holo); background-size:220% 100%;
}

/* --- streamer cards --- */
.stream-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.stream-card{ padding:0; display:flex; flex-direction:column; transition:transform .3s ease; }
.stream-card:hover{ transform:translateY(-4px); }

.stream-thumb{
  position:relative; aspect-ratio:16/9; display:grid; place-items:center;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(255,46,136,.22), transparent 70%),
    linear-gradient(150deg, rgba(46,230,214,.09), rgba(124,58,237,.2));
  cursor:pointer;
}
.stream-thumb .clip-play{ width:46px; height:46px; }

.livebadge{
  position:absolute; top:.6rem; left:.6rem;
  display:flex; align-items:center; gap:.35rem;
  font-family:'Space Mono',monospace; font-weight:700; font-size:.56rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:100px;
  background:rgba(6,4,14,.82); color:var(--magenta);
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.5);
}
.livebadge i{
  width:6px; height:6px; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 8px var(--magenta); animation:pulse 2s ease-in-out infinite;
}
.livebadge.off{ color:var(--dim); box-shadow:inset 0 0 0 1px rgba(167,139,250,.25); }
.livebadge.off i{ background:var(--dim); box-shadow:none; animation:none; }

.viewers{
  position:absolute; right:.6rem; top:.6rem;
  font-family:'Space Mono',monospace; font-size:.58rem;
  padding:.26rem .5rem; border-radius:6px;
  background:rgba(6,4,14,.8); color:var(--mist);
}
.modebadge{
  position:absolute; right:.6rem; bottom:.6rem;
  font-family:'Space Mono',monospace; font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.26rem .5rem; border-radius:6px;
  background:rgba(6,4,14,.8);
}
.modebadge.dual{ color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(46,230,214,.45); }
.modebadge.face{ color:var(--sunset); box-shadow:inset 0 0 0 1px rgba(255,145,66,.4); }
.modebadge.screen{ color:var(--violet-hi); box-shadow:inset 0 0 0 1px rgba(167,139,250,.4); }

.stream-body{ padding:.95rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.stream-body h3{ font-size:.95rem; margin:0; line-height:1.34; }
.stream-who{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.av{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  font-family:'Space Mono',monospace; font-weight:700; font-size:.62rem; color:#0a0616;
}
.stream-name{ font-size:.84rem; color:var(--chrome); }

.socials{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:auto; }
.socials a, .socials span{
  width:29px; height:29px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(13,8,32,.7);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18);
  transition:box-shadow .2s ease, transform .2s ease;
}
.socials a:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(46,230,214,.6); }
.socials svg{ width:14px; height:14px; fill:none; stroke:var(--mist); stroke-width:1.6; }
.socials a:hover svg{ stroke:var(--cyan); }
.socials span{ opacity:.55; }

.stream-actions{ display:flex; gap:.45rem; }
.stream-actions .btn{ flex:1; padding:.6rem .8rem; font-size:.63rem; }

.addbtn{
  flex:0 0 auto; width:38px; padding:0 !important;
  display:grid; place-items:center; font-size:1rem !important;
}

/* --- VOLTS --- */
.volts{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:'Space Mono',monospace; font-weight:700;
}
.volts svg{ width:12px; height:12px; fill:var(--sunset); }

.packs{ display:grid; gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.pack{
  border:0; cursor:pointer; text-align:left;
  padding:1rem 1.05rem; border-radius:14px;
  background:rgba(13,8,32,.6); color:inherit;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18);
  transition:box-shadow .22s ease, transform .22s ease;
}
.pack:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(46,230,214,.55), var(--glow-c); }
.pack[aria-pressed="true"]{ box-shadow:inset 0 0 0 2px var(--magenta), var(--glow-m); }
.pack .amt{
  display:flex; align-items:center; gap:.35rem;
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:1.15rem; color:var(--chrome);
}
.pack .amt svg{ width:14px; height:14px; fill:var(--sunset); }
.pack .usd{
  display:block; margin-top:.3rem;
  font-family:'Space Mono',monospace; font-size:.72rem; color:var(--mist);
}
.pack .save{
  display:inline-block; margin-top:.5rem;
  font-family:'Space Mono',monospace; font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}

/* --- modal --- */
.modal{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center; padding:1.2rem;
  background:rgba(4,3,10,.82);
}
@supports (backdrop-filter:blur(1px)){ .modal{ backdrop-filter:blur(10px); } }
.modal[hidden]{ display:none; }
.modal-box{
  width:min(480px,100%); max-height:88vh; overflow-y:auto;
  border-radius:20px; padding:clamp(1.3rem,4vw,2rem);
  background:rgba(11,7,24,.98);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3), 0 40px 80px -40px #000;
  position:relative;
}
.modal-box .close{
  position:absolute; top:.8rem; right:.9rem; border:0; background:none;
  color:var(--dim); cursor:pointer; font-size:1.4rem; line-height:1;
}
.modal-box .close:hover{ color:var(--chrome); }
.modal-box h3{ margin-bottom:.3rem; }

.tip-split{
  display:grid; gap:.3rem; margin:1rem 0;
  font-family:'Space Mono',monospace; font-size:.72rem;
}
.tip-split div{ display:flex; justify-content:space-between; gap:1rem; }
.tip-split .to{ color:var(--cyan); }
.tip-split .fee{ color:var(--dim); }

/* --- payout split table --- */
.split{ display:grid; gap:.5rem; }
.split-row{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center;
  padding:.85rem 1.1rem; border-radius:12px;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.13);
}
.split-row .lab{ font-size:.9rem; color:var(--chrome); }
.split-row .sub{
  font-family:'Space Mono',monospace; font-size:.62rem;
  color:var(--dim); display:block; margin-top:.15rem;
}
.split-row .pct{
  font-family:'Space Mono',monospace; font-weight:700; font-size:1.05rem;
}
.split-row.hero-row{ box-shadow:inset 0 0 0 1px rgba(46,230,214,.45); }
.split-row.hero-row .pct{ color:var(--cyan); }

/* ============================================================
   DATA-DRIVEN LEADERBOARD
   ============================================================ */

.lbctl{ display:grid; gap:.7rem; margin-bottom:1rem; }
.lbctl-row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.lbctl .field{ flex:1 1 200px; padding:.7rem 1.1rem; font-size:.8rem; }

.chip{
  border:0; cursor:pointer; border-radius:100px;
  padding:.5rem .95rem;
  font-family:'Space Mono',monospace; font-size:.63rem;
  letter-spacing:.13em; text-transform:uppercase;
  background:rgba(13,8,32,.62); color:var(--mist);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18);
  transition:color .2s ease, box-shadow .2s ease, background .2s ease;
}
.chip:hover{ color:var(--chrome); box-shadow:inset 0 0 0 1px rgba(167,139,250,.45); }
.chip[aria-pressed="true"]{
  color:#0a0616; font-weight:700;
  background:var(--holo); background-size:220% 100%;
  animation:hueDrift 12s ease-in-out infinite;
}
.chip.locked{ opacity:.5; cursor:not-allowed; }
.chip.locked:hover{ color:var(--mist); box-shadow:inset 0 0 0 1px rgba(167,139,250,.18); }

.lbcount{
  font-family:'Space Mono',monospace; font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  margin-left:auto;
}

/* grid shared by header and rows */
.lb-head, .lb-row{
  display:grid;
  grid-template-columns:50px minmax(0,1.7fr) repeat(4, minmax(62px,84px));
  align-items:center; gap:.7rem;
  padding:.8rem 1.05rem; border-radius:13px;
}
.lb-head{ padding-block:.35rem; gap:.7rem; }

.sortbtn{
  border:0; background:none; cursor:pointer; padding:0; text-align:right;
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; justify-content:flex-end; gap:.25rem;
  transition:color .2s ease;
}
.sortbtn:hover{ color:var(--chrome); }
.sortbtn[aria-sort]{ color:var(--cyan); }
.sortbtn .car{ font-size:.55rem; opacity:0; }
.sortbtn[aria-sort] .car{ opacity:1; }

.lb-stat{
  font-family:'Space Mono',monospace; font-size:.8rem;
  color:var(--mist); text-align:right;
  font-variant-numeric:tabular-nums;
}
.lb-stat.on{ color:var(--chrome); font-weight:700; }
.lb-stat.locked{ color:var(--dim); }

.lb-sub{
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.1em; color:var(--dim); display:block; margin-top:.12rem;
}

.lb-empty{
  padding:2.4rem 1rem; text-align:center;
  font-family:'Space Mono',monospace; font-size:.75rem;
  letter-spacing:.1em; color:var(--dim);
}

@media (max-width:820px){
  .lb-head{ display:none; }
  .lb-row{
    grid-template-columns:42px 1fr auto;
    gap:.5rem 0.7rem;
  }
  /* only the column being sorted survives on a phone */
  .lb-row .lb-stat{ display:none; text-align:right; }
  .lb-row .lb-stat.on{ display:block; }
}

/* ============================================================
   BOARD THREADS
   ============================================================ */

.board[aria-expanded]{ cursor:pointer; }
.board[aria-expanded="true"]::after{ opacity:1; }

.threads{ margin-top:1.2rem; }
.thread-head{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  margin-bottom:.8rem;
}
.thread-head h3{ margin:0; }
.thread-head .cnt{
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.thread-list{ display:grid; gap:.45rem; }
.thread{
  display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem;
  padding:.85rem 1.1rem; border-radius:12px;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.13);
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease;
  text-decoration:none; color:inherit;
}
.thread:hover{
  background:rgba(21,14,44,.8); transform:translateX(3px);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.4);
}
.thread .t{ font-size:.92rem; color:var(--chrome); line-height:1.35; }
.thread .m{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.1em; color:var(--dim);
}
.thread .r{
  font-family:'Space Mono',monospace; font-size:.72rem;
  color:var(--cyan); text-align:right; white-space:nowrap;
}
.thread .r small{ display:block; color:var(--dim); font-size:.56rem; letter-spacing:.1em; }
.thread.pinned{ box-shadow:inset 0 0 0 1px rgba(255,145,66,.4); }
.thread.pinned .t::before{
  content:'PINNED'; font-family:'Space Mono',monospace; font-size:.5rem;
  letter-spacing:.16em; color:var(--sunset); margin-right:.5rem;
  vertical-align:middle;
}

/* ============================================================
   SIGNAL — expandable entries
   ============================================================ */

.signal-list details{
  border-radius:14px; overflow:hidden;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.14);
  transition:box-shadow .22s ease;
}
.signal-list details[open]{ box-shadow:inset 0 0 0 1px rgba(167,139,250,.4); }
.signal-list summary{
  cursor:pointer; list-style:none;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.1rem;
  padding:1rem 1.2rem;
}
.signal-list summary::-webkit-details-marker{ display:none; }
.signal-list summary:hover{ background:rgba(21,14,44,.6); }
.signal-list details[open] .signal-arrow{ transform:rotate(90deg); }
.signal-arrow{ transition:transform .25s ease; }
.signal-body{ padding:0 1.2rem 1.2rem; }
.signal-body p{ font-size:.9rem; margin:0 0 .8rem; }
.signal-body p:last-child{ margin:0; }
.kindpill{
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.22rem .45rem; border-radius:5px; margin-left:.5rem;
}
.kindpill.Confirmed{ color:var(--cyan);      background:rgba(46,230,214,.12); }
.kindpill.Guide{     color:var(--violet-hi); background:rgba(167,139,250,.14); }
.kindpill.Policy{    color:var(--sunset);    background:rgba(255,145,66,.12); }
.kindpill.Site{      color:var(--magenta);   background:rgba(255,46,136,.12); }

@media (max-width:640px){
  .signal-list summary{ grid-template-columns:1fr; gap:.35rem; }
  .signal-list .signal-arrow{ display:none; }
}

/* ============================================================
   SERVER / COMMUNITY FINDER
   ============================================================ */

.srv-grid{ display:grid; gap:.75rem; }

.srv{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:.9rem 1.1rem; align-items:start;
  padding:1.05rem 1.2rem; border-radius:15px;
  background:rgba(13,8,32,.55);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.14);
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease;
  position:relative;
}
.srv:hover{
  background:rgba(21,14,44,.82); transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.4);
}

/* what the money actually buys: position and a visible frame */
.srv.boosted{ box-shadow:inset 0 0 0 1px rgba(46,230,214,.42); }
.srv.featured{
  box-shadow:inset 0 0 0 1.5px rgba(255,46,136,.55), 0 0 34px -14px rgba(255,46,136,.6);
  background:
    linear-gradient(140deg, rgba(255,46,136,.09), transparent 55%),
    rgba(17,10,36,.78);
}

.srv-mark{
  width:52px; height:52px; border-radius:13px; flex:0 0 auto;
  display:grid; place-items:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:.95rem;
  color:#0a0616;
}
.srv-body{ min-width:0; }
.srv-top{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.25rem; }
.srv-name{
  font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:1rem; color:var(--chrome); letter-spacing:-.01em;
}
.srv-desc{ font-size:.87rem; color:var(--mist); margin:.15rem 0 .55rem; }

.pill{
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.24rem .5rem; border-radius:100px; white-space:nowrap;
}
.pill.sponsored{ color:var(--magenta); background:rgba(255,46,136,.14); box-shadow:inset 0 0 0 1px rgba(255,46,136,.45); }
.pill.boost{     color:var(--cyan);    background:rgba(46,230,214,.12); box-shadow:inset 0 0 0 1px rgba(46,230,214,.4); }
.pill.type{      color:var(--violet-hi); background:rgba(124,58,237,.18); }
.pill.plat{      color:var(--mist);    background:rgba(167,139,250,.1); }

.srv-tags{ display:flex; gap:.3rem; flex-wrap:wrap; }
.srv-meta{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:.6rem;
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.1em; color:var(--dim);
}
.srv-meta b{ color:var(--mist); font-weight:700; }

.srv-side{ display:grid; gap:.4rem; justify-items:stretch; align-content:start; }
.votebtn{
  border:0; cursor:pointer; border-radius:11px; padding:.5rem .8rem;
  background:rgba(6,4,14,.7); color:var(--cyan);
  font-family:'Space Mono',monospace; font-weight:700; font-size:.72rem;
  box-shadow:inset 0 0 0 1px rgba(46,230,214,.32);
  display:grid; gap:.1rem; justify-items:center; min-width:66px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.votebtn small{ font-size:.5rem; letter-spacing:.14em; color:var(--dim); font-weight:400; }
.votebtn:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--cyan), var(--glow-c); }
.votebtn.gated{ color:var(--dim); box-shadow:inset 0 0 0 1px rgba(167,139,250,.25); }
.votebtn.gated small{ color:var(--dim); }

.srv-join{
  text-align:center; text-decoration:none; border-radius:11px;
  padding:.5rem .8rem;
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(167,139,250,.1); color:var(--chrome);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);
  transition:box-shadow .2s ease;
}
.srv-join:hover{ box-shadow:inset 0 0 0 1px var(--violet-hi), var(--glow-v); }

@media (max-width:720px){
  .srv{ grid-template-columns:auto minmax(0,1fr); }
  .srv-side{
    grid-column:1 / -1; grid-auto-flow:column; justify-content:start; gap:.5rem;
  }
  .srv-side .srv-join{ padding-inline:1.2rem; }
}

/* ---- featured rail on the home page ---- */
.feat-rail{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feat{
  display:block; text-decoration:none; color:inherit;
  padding:1.05rem 1.15rem; border-radius:15px;
  background:linear-gradient(140deg, rgba(255,46,136,.1), rgba(13,8,32,.8) 60%);
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.feat:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--magenta), var(--glow-m); }
.feat .srv-top{ margin-bottom:.35rem; }
.feat p{ font-size:.84rem; margin:0 0 .6rem; }

/* ---- pricing tiers ---- */
.tiers{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tier{ display:flex; flex-direction:column; position:relative; }
.tier.pick{ box-shadow:inset 0 0 0 1.5px rgba(46,230,214,.5); }
.tier .price{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(1.8rem,4vw,2.5rem); line-height:1; color:var(--chrome);
  margin:.3rem 0 .1rem;
}
.tier .per{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.tier ul{ list-style:none; margin:1.1rem 0 1.4rem; padding:0; display:grid; gap:.55rem; }
.tier li{
  font-size:.86rem; color:var(--mist);
  display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start;
}
.tier li::before{ content:'+'; color:var(--cyan); font-family:'Space Mono',monospace; font-weight:700; }
.tier li.no{ color:var(--dim); }
.tier li.no::before{ content:'–'; color:var(--dim); }
.tier .btn{ margin-top:auto; }
.tier-flag{
  position:absolute; top:-9px; right:1.1rem;
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.24rem .6rem; border-radius:100px;
  background:var(--holo); background-size:220% 100%; color:#0a0616; font-weight:700;
}

.discl{
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.1em; color:var(--dim);
  padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem;
  background:rgba(167,139,250,.06);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.2);
}

/* ============================================================
   SERVER FINDER
   ============================================================ */

.srv-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.srv{
  padding:0; display:flex; flex-direction:column;
  transition:transform .3s ease;
  position:relative;
}
.srv:hover{ transform:translateY(-4px); }

.srv-banner{
  height:74px; position:relative; overflow:hidden;
  border-radius:var(--r) var(--r) 0 0;
}
.srv-banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(6,4,14,0), rgba(13,8,32,.85));
}
.srv-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  display:flex; align-items:center; gap:.3rem;
  font-family:'Space Mono',monospace; font-weight:700; font-size:.54rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:100px;
  background:rgba(6,4,14,.85); color:var(--sunset);
  box-shadow:inset 0 0 0 1px rgba(255,145,66,.55);
}
.srv-verified{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.26rem .5rem; border-radius:100px;
  background:rgba(6,4,14,.85); color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(46,230,214,.5);
}

.srv-body{ padding:0 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }

.srv-top{ display:flex; align-items:center; gap:.65rem; margin-top:-20px; position:relative; z-index:2; }
.srv-ic{
  width:44px; height:44px; border-radius:13px; flex:0 0 auto;
  display:grid; place-items:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:.9rem; color:#0a0616;
  box-shadow:0 0 0 3px var(--abyss);
}
.srv-name{ min-width:0; }
.srv-name h3{ margin:0; font-size:.98rem; line-height:1.25; }
.srv-meta{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.1em; color:var(--dim); display:block; margin-top:.2rem;
}

.srv-body p{ font-size:.86rem; margin:0; }

.srv-tags{ display:flex; gap:.3rem; flex-wrap:wrap; }
.stag{
  font-family:'Space Mono',monospace; font-size:.55rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.24rem .5rem; border-radius:5px;
  background:rgba(124,58,237,.18); color:var(--violet-hi);
}

.srv-foot{
  margin-top:auto; display:flex; align-items:center; gap:.5rem;
  padding-top:.3rem;
}
.srv-stat{
  font-family:'Space Mono',monospace; font-size:.66rem;
  color:var(--mist); font-variant-numeric:tabular-nums;
}
.srv-stat b{ color:var(--chrome); }
.srv-foot .btn{ margin-left:auto; padding:.55rem 1rem; font-size:.62rem; }

/* promoted listings get the iridescent rim turned all the way up */
.srv.promoted::after{ opacity:1; padding:1.5px; }
.srv.promoted{ box-shadow:0 0 34px -14px rgba(255,145,66,.7); }

.srv-empty{
  grid-column:1/-1; padding:2.6rem 1rem; text-align:center;
  font-family:'Space Mono',monospace; font-size:.75rem;
  letter-spacing:.1em; color:var(--dim);
}

/* ---- pricing tiers ---- */
.tiers{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  align-items:start;
}
.tier{ display:flex; flex-direction:column; position:relative; }
.tier .price{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(1.9rem,4vw,2.5rem); line-height:1;
  margin:.3rem 0 .1rem; display:block; color:var(--chrome);
}
.tier .per{
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.tier ul{ list-style:none; margin:1.1rem 0 1.3rem; padding:0; display:grid; gap:.55rem; }
.tier li{
  font-size:.86rem; color:var(--mist);
  display:grid; grid-template-columns:16px 1fr; gap:.55rem; align-items:start;
}
.tier li::before{ content:'+'; color:var(--cyan); font-family:'Space Mono',monospace; }
.tier li.no{ color:var(--dim); }
.tier li.no::before{ content:'\2013'; color:var(--dim); }
.tier .btn{ margin-top:auto; width:100%; }
.tier.best::after{ opacity:1; padding:1.5px; }
.tier.best{ box-shadow:0 0 34px -16px rgba(255,46,136,.75); }
.tier-flag{
  position:absolute; top:-10px; right:1.1rem;
  font-family:'Space Mono',monospace; font-weight:700; font-size:.54rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:100px;
  background:var(--holo); background-size:220% 100%; color:#0a0616;
}

/* ============================================================
   ADVANCED SERVER FINDER
   ============================================================ */

.finder{ display:grid; gap:1.2rem; grid-template-columns:265px minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .finder{ grid-template-columns:1fr; } }

.filters{ position:sticky; top:74px; }
@media (max-width:900px){ .filters{ position:static; } }
.filters h4{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 .55rem;
}
.fgroup{ margin-bottom:1.15rem; }
.fgroup:last-child{ margin-bottom:0; }
.fopts{ display:flex; flex-wrap:wrap; gap:.3rem; }
.fopt{
  border:0; cursor:pointer; border-radius:8px;
  padding:.4rem .65rem;
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.08em;
  background:rgba(13,8,32,.62); color:var(--mist);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.16);
  transition:color .18s ease, box-shadow .18s ease;
}
.fopt:hover{ color:var(--chrome); box-shadow:inset 0 0 0 1px rgba(167,139,250,.42); }
.fopt[aria-pressed="true"]{
  color:#0a0616; font-weight:700;
  background:var(--holo); background-size:220% 100%;
}
.fclear{
  border:0; background:none; cursor:pointer; padding:0;
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.fclear:hover{ color:var(--magenta); }

.ftoolbar{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-bottom:.9rem;
}
.ftoolbar .field{ flex:1 1 220px; padding:.72rem 1.1rem; font-size:.82rem; }
.fcount{
  font-family:'Space Mono',monospace; font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.viewtog{ display:flex; gap:.25rem; margin-left:auto; }
.vbtn{
  width:34px; height:34px; border:0; border-radius:9px; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(13,8,32,.7); color:var(--mist);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.2);
}
.vbtn svg{ width:15px; height:15px; fill:currentColor; }
.vbtn[aria-pressed="true"]{ color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(46,230,214,.6); }

/* ---- spotlight strip ---- */
.spotlight{
  display:grid; gap:.9rem; margin-bottom:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.spot{
  position:relative; padding:0; overflow:hidden;
  text-align:left; border:0; cursor:pointer; color:inherit;
  transition:transform .3s ease;
}
.spot:hover{ transform:translateY(-4px); }
.spot-top{ height:88px; position:relative; }
.spot-top::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(6,4,14,.1), rgba(13,8,32,.9));
}
.spot-in{ padding:0 1rem 1.1rem; }
.spot .srv-top{ margin-top:-22px; }
.spot p{ font-size:.82rem; margin:.55rem 0 0; }

/* ---- compact list view ---- */
.srv-list{ display:grid; gap:.45rem; }
.srv-row{
  display:grid;
  grid-template-columns:42px minmax(0,2.2fr) 96px 92px 84px auto;
  align-items:center; gap:.9rem;
  padding:.7rem .95rem; border-radius:12px;
  background:rgba(13,8,32,.5);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.13);
  text-align:left; border:0; cursor:pointer; color:inherit; width:100%;
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.srv-row:hover{
  background:rgba(21,14,44,.85); transform:translateX(3px);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.42);
}
.srv-row.promo{ box-shadow:inset 0 0 0 1px rgba(255,145,66,.45); }
.srv-row .ric{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:.62rem; color:#0a0616;
}
.srv-row .rname{ font-size:.9rem; color:var(--chrome); }
.srv-row .rsub{
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.08em; color:var(--dim); display:block; margin-top:.14rem;
}
.srv-row .rcell{
  font-family:'Space Mono',monospace; font-size:.68rem; color:var(--mist);
  font-variant-numeric:tabular-nums;
}
.srv-row .rpromo{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.52rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sunset);
}
@media (max-width:820px){
  .srv-row{ grid-template-columns:34px 1fr auto; gap:.6rem; }
  .srv-row .rcell.hide-sm{ display:none; }
}

.loadmore{ margin-top:1.1rem; text-align:center; }

/* requirement pills */
.req{ display:flex; gap:.28rem; flex-wrap:wrap; }
.req span{
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .42rem; border-radius:4px;
  background:rgba(46,230,214,.12); color:var(--cyan);
}
.req span.warn{ background:rgba(255,145,66,.13); color:var(--sunset); }

/* ============================================================
   SUBMISSION FORM
   ============================================================ */

.formwrap{ display:grid; gap:1.3rem; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .formwrap{ grid-template-columns:1fr; } }

.fset{ margin-bottom:1.6rem; }
.fset:last-of-type{ margin-bottom:0; }
.fset > legend, .fset-h{
  display:flex; align-items:baseline; gap:.6rem; width:100%;
  font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:1.02rem; color:var(--chrome);
  margin:0 0 .2rem; padding:0;
}
.fset-n{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.66rem;
  letter-spacing:.16em; color:var(--magenta);
}
.fset-sub{ font-size:.84rem; color:var(--dim); margin:0 0 1rem; }

.frow{ margin-bottom:.9rem; }
.frow:last-child{ margin-bottom:0; }
.frow > label{
  display:flex; align-items:baseline; gap:.5rem;
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mist);
  margin-bottom:.4rem;
}
.req-star{ color:var(--magenta); }
.counter{ margin-left:auto; color:var(--dim); font-size:.58rem; }
.counter.over{ color:#ff8fa8; }

.field, textarea.field, select.field{
  width:100%; display:block;
  font-family:'Sora',sans-serif; font-size:.88rem;
}
textarea.field{ border-radius:16px; line-height:1.6; resize:vertical; min-height:96px; }
select.field{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),
                   linear-gradient(135deg,var(--mist) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.6rem; cursor:pointer;
}
select.field option{ background:#12082a; color:var(--chrome); }
.field:invalid:not(:placeholder-shown){ box-shadow:inset 0 0 0 1px rgba(255,46,136,.6); }

.fgrid2{ display:grid; gap:.9rem; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .fgrid2{ grid-template-columns:1fr; } }

.checks{ display:flex; flex-wrap:wrap; gap:.45rem; }
.check{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.55rem .9rem; border-radius:100px;
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.1em; color:var(--mist);
  background:rgba(13,8,32,.6);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18);
  transition:color .2s ease, box-shadow .2s ease;
}
.check input{ accent-color:var(--magenta); width:14px; height:14px; margin:0; }
.check:hover{ color:var(--chrome); box-shadow:inset 0 0 0 1px rgba(167,139,250,.45); }
.check:has(input:checked){ color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(46,230,214,.55); }

/* plan picker */
.plans{ display:grid; gap:.6rem; }
.plan{
  display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:center;
  cursor:pointer; padding:1rem 1.15rem; border-radius:14px;
  background:rgba(13,8,32,.55);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.16);
  transition:box-shadow .2s ease, background .2s ease;
}
.plan:hover{ background:rgba(21,14,44,.8); }
.plan input{ accent-color:var(--magenta); width:16px; height:16px; margin:0; }
.plan:has(input:checked){ box-shadow:inset 0 0 0 2px var(--magenta); background:rgba(21,14,44,.85); }
.plan .pn{ font-size:.95rem; color:var(--chrome); }
.plan .pd{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.08em; color:var(--dim); display:block; margin-top:.15rem;
}
.plan .pp{ font-family:'Space Mono',monospace; font-weight:700; font-size:.95rem; color:var(--chrome); white-space:nowrap; }
.plan .pp small{ display:block; font-weight:400; font-size:.54rem; letter-spacing:.14em; color:var(--dim); text-align:right; }

/* live preview rail */
.preview{ position:sticky; top:80px; }
@media (max-width:900px){ .preview{ position:static; } }
.preview-h{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 .7rem;
}
.preview .srv{ pointer-events:none; }
.preview-note{ font-size:.76rem; color:var(--dim); margin:.9rem 0 0; }

.formnote{
  font-size:.78rem; color:var(--dim);
  padding:.85rem 1.05rem; border-radius:12px; margin:0 0 1.2rem;
  background:rgba(46,230,214,.07);
  box-shadow:inset 0 0 0 1px rgba(46,230,214,.28);
}
.tagfeedback{
  font-family:'Space Mono',monospace; font-size:.66rem;
  margin:.4rem 0 0; min-height:1.1em;
}
.tagfeedback.free{ color:var(--cyan); }
.tagfeedback.taken{ color:#ff8fa8; }

/* ============================================================
   PLATFORM PICKER + PILLS
   GTA VI launches console-only, so "which console" is the most
   load-bearing filter on the site. It gets its own band.
   Icons are generic controller/monitor shapes on purpose --
   the PlayStation and Xbox marks are trademarks.
   ============================================================ */

.platband{ margin-bottom:1.1rem; }
.platband-h{
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 .6rem;
}
.platpick{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
}
.platbtn{
  border:0; cursor:pointer; border-radius:15px;
  padding:.95rem .8rem;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  background:rgba(13,8,32,.62); color:var(--mist);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18);
  transition:transform .22s ease, box-shadow .22s ease, color .22s ease;
}
.platbtn:hover{ transform:translateY(-3px); color:var(--chrome); }
.platbtn svg{ width:24px; height:24px; fill:none; stroke:currentColor;
              stroke-width:1.5; stroke-linejoin:round; }
.platbtn .pl{
  font-family:'Space Mono',monospace; font-size:.64rem;
  letter-spacing:.13em; text-transform:uppercase;
}
.platbtn .pc2{ font-family:'Space Mono',monospace; font-size:.55rem; color:var(--dim); }
.platbtn[aria-pressed="true"]{ color:var(--chrome); }
.platbtn[aria-pressed="true"].ps  { box-shadow:inset 0 0 0 2px #5b8cff;     }
.platbtn[aria-pressed="true"].xb  { box-shadow:inset 0 0 0 2px #3dd36a;     }
.platbtn[aria-pressed="true"].pc  { box-shadow:inset 0 0 0 2px #a78bfa;     }
.platbtn[aria-pressed="true"].all { box-shadow:inset 0 0 0 2px var(--cyan); }
.platbtn.ps[aria-pressed="true"]  svg{ stroke:#5b8cff; }
.platbtn.xb[aria-pressed="true"]  svg{ stroke:#3dd36a; }
.platbtn.pc[aria-pressed="true"]  svg{ stroke:#a78bfa; }
.platbtn.all[aria-pressed="true"] svg{ stroke:var(--cyan); }

@media (hover:none){ .platbtn:hover{ transform:none; } }

/* small platform pills on cards, rows, modal and the listing preview */
.ppills{ display:flex; gap:.26rem; flex-wrap:wrap; }
.ppill{
  font-family:'Space Mono',monospace; font-weight:700; font-size:.53rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.2rem .44rem; border-radius:5px; white-space:nowrap;
}
.ppill.ps{ background:rgba(91,140,255,.17);  color:#8fb0ff; }
.ppill.xb{ background:rgba(61,211,106,.16);  color:#6fe095; }
.ppill.pc{ background:rgba(167,139,250,.17); color:var(--violet-hi); }
.ppill.none{ background:rgba(167,139,250,.1); color:var(--dim); }

.crossnote{
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.76rem; color:var(--mist); line-height:1.5;
  padding:.75rem .95rem; border-radius:11px; margin:0 0 1rem;
  background:rgba(255,145,66,.07);
  box-shadow:inset 0 0 0 1px rgba(255,145,66,.28);
}
.crossnote b{ color:var(--sunset); }

/* ============================================================
   UNCLAIMED LISTINGS
   Seeded from public directories so the site is not empty on
   day one. They rank below every claimed listing, say plainly
   that they are unclaimed, and carry a claim/remove path --
   that visible ownership route is what makes seeding fair.
   ============================================================ */

.srv.unclaimed .srv-banner{ filter:saturate(.35) brightness(.72); }
.srv.unclaimed .srv-ic{ filter:saturate(.4); }
.srv.unclaimed h3{ color:var(--mist); }

.unclaimed-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  display:flex; align-items:center; gap:.3rem;
  font-family:'Space Mono',monospace; font-weight:700; font-size:.53rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:100px;
  background:rgba(6,4,14,.85); color:var(--dim);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);
}

.claimbar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-top:.7rem; padding:.6rem .75rem; border-radius:11px;
  background:rgba(46,230,214,.07);
  box-shadow:inset 0 0 0 1px rgba(46,230,214,.26);
}
.claimbar span{
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.1em; color:var(--mist); flex:1; min-width:120px;
}
.claimbar .btn{ padding:.45rem .85rem; font-size:.58rem; }

.srv-row.unclaimed .ric{ filter:saturate(.35); }
.srv-row.unclaimed .rname{ color:var(--mist); }
.rclaim{
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* the honesty banner above a seeded directory */
.seednote{
  display:grid; grid-template-columns:auto 1fr; gap:.8rem;
  align-items:start; padding:.9rem 1.1rem; border-radius:13px;
  margin:0 0 1.1rem;
  background:rgba(167,139,250,.07);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.26);
}
.seednote .ico{ font-size:1rem; line-height:1.3; }
.seednote p{ margin:0; font-size:.8rem; color:var(--mist); line-height:1.55; }
.seednote a{ color:var(--cyan); }
.seednote b{ color:var(--chrome); }

/* claimed-vs-unclaimed counts in the toolbar */
.splitcount{
  font-family:'Space Mono',monospace; font-size:.63rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.splitcount b{ color:var(--cyan); }
.splitcount i{ font-style:normal; color:var(--mist); }

/* claim page: the record being claimed */
.claimtarget{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:1rem 1.15rem; border-radius:14px; margin-bottom:1.3rem;
  background:rgba(13,8,32,.6);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.26);
}
.claimtarget .srv-ic{ width:40px; height:40px; font-size:.68rem; }
.claimtarget h3{ margin:0; font-size:1rem; }
.claimtarget .srv-meta{ display:block; margin-top:.2rem; }
.claimtarget .miss{
  font-family:'Space Mono',monospace; font-size:.66rem; color:var(--dim);
}

/* inline form failure -- replaces landing on a 404 page */
.formerr{
  margin:.9rem 0 0; padding:.8rem 1rem; border-radius:12px;
  font-size:.82rem; line-height:1.5; color:#ffc2cf;
  background:rgba(255,46,136,.1);
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.45);
}
.formerr[hidden]{ display:none; }
button[disabled]{ opacity:.6; cursor:progress; }

/* link back to where an unclaimed community is publicly listed */
.srclink{
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.1em; color:var(--cyan); text-decoration:none;
  flex:1; min-width:0;
}
.srclink:hover{ color:var(--chrome); text-decoration:underline; text-underline-offset:3px; }

/* Spotlight with nothing booked: the slot advertises itself */
.spot-open{
  text-decoration:none; color:inherit; display:block;
  box-shadow:inset 0 0 0 1px rgba(255,145,66,.35);
}
.spot-open .spot-top{
  background:
    repeating-linear-gradient(135deg, rgba(255,145,66,.10) 0 10px, transparent 10px 20px),
    linear-gradient(120deg, rgba(255,46,136,.25), #12082a);
}
.spot-open .spot-in{ padding-top:1rem; }
.spot-open h3{ font-size:1rem; margin:0 0 .4rem; }
.spot-open:hover{ box-shadow:inset 0 0 0 1px rgba(255,145,66,.75), 0 0 30px -14px rgba(255,145,66,.8); }