/* ==========================================================================
   ARTEMISPVP  --  STYLESHEET
   Layout/metrics measured from a reference build; palette is ours (violet).
   All colours come from the tokens below and from theme{} in config.js.
   ========================================================================== */
:root{
  /* --- violet palette. Base #7c00ff was given by Eric 2026-08-16. --- */
  --accent:#7c00ff;          /* primary violet */
  --accent-bright:#a44dff;   /* lifted violet for glows and gradient tops */
  --accent-deep:#5a00bd;     /* deeper violet for hovers / gradients */
  --accent-soft:rgba(124,0,255,.12);
  --accent-line:rgba(124,0,255,.34);
  --accent-text:#ffffff;     /* white on a violet fill: 6.4:1, the old near-black was 3.3:1 */
  --accent-on-dark:#b98cff;  /* violet readable as text on the dark background */
  --ip-glow:#c46bff;         /* purple-pink, a hair lighter than --accent: the travelling IP highlight */

  --bg:#101010;
  --card:#161616;
  --card-2:#1b1b1b;
  --crumb:#202020;
  --text:#bdbdbd;
  --text-strong:#ffffff;
  --text-soft:rgba(255,255,255,.75);
  --hair:rgba(255,255,255,.024);
  --pill:rgba(255,255,255,.03);
  --panel:rgba(255,255,255,.01);

  --max:1100px;
  --bubble:22px;             /* bubbly radius for post cards */
  --radius:8px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif;
  font-size:16px; font-weight:400; line-height:24px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:var(--accent-on-dark);text-decoration:none;transition:color .18s ease,opacity .18s ease}
a:hover{color:#d3b8ff}   /* lighter on hover: --accent-deep is darker than the page and vanished */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p{margin:0 0 16px}
h2{font-size:32px;font-weight:500;color:var(--text-strong);margin:0 0 16px;line-height:1.2;text-wrap:balance}
h3{font-size:22px;font-weight:600;color:var(--text-strong);margin:26px 0 12px}
h4{font-size:18px;font-weight:600;color:var(--text-strong);margin:0 0 10px}
ul{margin:0 0 16px;padding-left:20px}
code{background:var(--pill);padding:2px 6px;border-radius:4px;color:var(--accent-on-dark);font-size:14.4px}
hr{border:0;border-top:1px solid var(--hair);margin:22px 0}
::selection{background:var(--accent);color:var(--accent-text)}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
.main{padding:34px 0 60px}
.muted{color:var(--text);opacity:.65}

/* ---------- navbar ---------- */
.navbar{position:absolute;top:0;left:0;right:0;z-index:60;height:80px;display:flex;align-items:center;padding:15px 0;transition:background .25s ease,height .25s ease}
/* Eric 2026-08-17: the sticky header is transparent on EVERY size, not just mobile.
   Nav text and icons get their own shadow/pill so they stay readable over whatever
   scrolls beneath. */
.navbar.stuck{position:fixed;background:transparent;backdrop-filter:none;height:64px;padding:0;border-bottom:0}
/* Fully transparent made page text run straight into the nav links as it scrolled
   under them. This is a soft top-down fade, not a panel - the bar still reads as
   see-through, but headings passing beneath no longer collide with the links.
   Delete this rule for a hard 100% transparent bar. */
.navbar.stuck::before{content:"";position:absolute;inset:-1px 0 auto 0;height:104px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(11,7,19,.86) 0%,rgba(11,7,19,.55) 46%,rgba(11,7,19,0) 100%)}
.navbar.stuck .nav-list a,.navbar.stuck .nav-auth a{text-shadow:0 2px 8px rgba(0,0,0,.9)}
.navbar.stuck .nav-social a{background:rgba(16,16,16,.72);backdrop-filter:blur(6px)}
.navbar.stuck .nav-toggle{filter:drop-shadow(0 2px 6px rgba(0,0,0,.85))}
.navbar .container{display:flex;align-items:center;gap:10px}
.nav-list{list-style:none;display:flex;margin:0 auto;padding:0;align-items:center}
.nav-list li{display:flex}
.nav-list a{display:block;color:rgba(255,255,255,.92);font-size:16.8px;font-weight:600;line-height:25.2px;margin:5.04px 22px;padding:6.72px 0;position:relative}
.nav-list li.active a{color:var(--accent-on-dark)}
.nav-list li.active a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);border-radius:2px}
.nav-list a:hover{color:var(--accent-on-dark)}
/* Store is struck through until a store exists */
.nav-list a.struck,.drawer a.struck{text-decoration:line-through;text-decoration-thickness:2px;opacity:.5;cursor:not-allowed}
.nav-list a.struck:hover,.drawer a.struck:hover{color:rgba(255,255,255,.92)}
.nav-auth{list-style:none;display:flex;margin:0;padding:0;gap:10px}
.nav-auth a{color:var(--text-strong);font-size:14.4px;font-weight:600;padding:8px 18px;border-radius:999px;border:1px solid var(--accent-line)}
.nav-auth a:hover{background:var(--accent);border-color:var(--accent-on-dark);color:var(--accent-text)}
.nav-auth a.solid{background:var(--accent);border-color:var(--accent-on-dark);color:var(--accent-text)}
.nav-auth a.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.nav-toggle{display:none;margin-left:auto;width:42px;height:38px;background:none;border:0;color:#fff;cursor:pointer;align-items:center;justify-content:center}

/* ---------- drawer ---------- */
/* Eric 2026-08-17: "make the actual menu pop up a little transperant as well" -
   translucent panel with a blur behind it so the page still reads through. */
.drawer{position:fixed;top:0;right:0;width:290px;height:100%;z-index:200;background:rgba(19,15,26,.72);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);border-left:1px solid var(--accent-line);transform:translateX(100%);transition:transform .28s ease;overflow-y:auto}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;height:71px;padding:0 18px;border-bottom:1px solid var(--hair)}
.drawer-head span{color:var(--accent-on-dark);font-weight:700;letter-spacing:.05em}
.drawer-head button{width:42px;height:36px;background:#202020;border:0;border-radius:var(--radius);color:var(--text);cursor:pointer}
.drawer ul{list-style:none;margin:0;padding:10px 0}
.drawer li a{display:block;height:48px;line-height:48px;padding:0 22px;color:var(--text);font-size:16px;font-weight:600}
.drawer li.active a,.drawer li a:hover{background:var(--accent-soft);color:var(--accent-on-dark)}

/* ---------- hero ----------
   Layer order, back to front: base -> optional photo -> network canvas -> gradient
   veil (65% at the top, per Eric 2026-08-16) -> logo row.
   The row sits in normal flow under a padding-top that clears the 80px navbar, so
   there is no dead band above it. The old build used height:430px with
   margin-top:-150px, which left ~280px of empty gradient. */
.hero-wrap{position:relative;overflow:hidden;background:#0b0713;padding:100px 0 66px;isolation:isolate}
.hero-art{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;opacity:.55;z-index:0}
.hero-net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
/* --veil is the strength of the colour wash (Eric asked for ~65%). It scales the
   coloured stops only; the bottom still resolves to --bg at full alpha so the hero
   blends into the page with no seam. Setting opacity on the element instead would
   wash that bottom stop out and leave a visible band. */
.hero-veil{--veil:.65;position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(ellipse 78% 72% at 50% 0%,rgba(164,77,255,calc(var(--veil) * 1)) 0%,rgba(164,77,255,0) 68%),
  linear-gradient(168deg,
    rgba(124,0,255,calc(var(--veil) * .85)) 0%,
    rgba(90,0,189,calc(var(--veil) * .52)) 34%,
    rgba(11,7,19,.8) 74%,
    var(--bg) 100%)}

/* logo row: status | logo | discord/vote  (all links are ours) */
/* gap is what separates the IP / vote bubbles from the wordmark. Eric asked for
   them CLOSER, so this must stay below the old 20px - it is not a free knob. */
.logo-row{display:flex;align-items:center;justify-content:center;gap:12px;max-width:var(--max);margin:0 auto;padding:0 16px;position:relative;z-index:20}
.logo-row>*{flex:1 1 0;display:flex}
.cell-left{justify-content:flex-end}
.cell-logo{flex:0 0 auto;justify-content:center}
.cell-right{justify-content:flex-start}
.brandmark{width:min(380px,74vw);height:auto;display:block;filter:drop-shadow(0 12px 34px rgba(0,0,0,.7))}

.info-box{display:flex;align-items:center;gap:14px;padding:14px 20px;background:rgba(255,255,255,.04);border:1px solid var(--accent-line);border-radius:999px;color:var(--text);
  animation:drift3 10.7s ease-in-out infinite;will-change:translate,scale;
  transition:scale .32s cubic-bezier(.34,1.56,.64,1),background .25s ease,border-color .25s ease}
.info-box.right{animation-name:drift5;animation-duration:13.1s;animation-delay:-4.9s}
.info-box:hover{background:var(--accent-soft);color:var(--text);border-color:var(--accent);scale:1.055}
.info-box .ico{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-on-dark)}
.info-box .top{color:var(--accent-on-dark);font-size:15px;font-weight:700;text-transform:uppercase;line-height:20px}
.info-box .mid{color:var(--text-strong);font-size:13px;font-weight:600;text-transform:uppercase;line-height:18px}
.info-box .bot{color:var(--text-soft);font-size:11.5px;font-weight:600;text-transform:uppercase;line-height:17px;opacity:.85}
.info-box.copied .bot{color:var(--accent-on-dark)}
.info-box.right{flex-direction:row-reverse;text-align:right}

/* ---------- content ---------- */
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:6px;background:var(--crumb);border-radius:999px;padding:9px 20px;font-size:13.6px;margin:0 0 18px}
.breadcrumb a{color:var(--accent-on-dark)}
.breadcrumb li::after{content:"/";margin-left:6px;opacity:.45}
.breadcrumb li:last-child::after{content:""}
.card{background:var(--card);border-radius:var(--bubble);margin-bottom:20px;overflow:hidden}
.card-header{color:var(--accent-on-dark);font-size:20.8px;font-weight:700;padding:18px 24px 0;line-height:1.2}
.card-body{padding:14px 24px 24px;color:var(--text)}
.card-body>*:last-child{margin-bottom:0}

/* ---------- bubbly blog cards ---------- */
.post-list{display:flex;flex-direction:column;gap:22px}
.post-card{display:flex;background:var(--card);border:1px solid transparent;border-radius:var(--bubble);overflow:hidden;will-change:scale;
  transition:scale .34s cubic-bezier(.34,1.56,.64,1),border-color .25s ease,box-shadow .3s ease}
.post-card:hover{scale:1.014;border-color:var(--accent-line);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 5px var(--accent-soft)}
.post-card .art{flex:0 0 56%;position:relative;overflow:hidden;min-height:260px;border-radius:var(--bubble)}
.post-card .art img{width:100%;height:100%;object-fit:cover}
.post-card .art .empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(160deg,rgba(124,0,255,.18),rgba(124,0,255,.03));color:var(--accent-on-dark);font-size:13.6px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.post-card .side{flex:1 1 auto;padding:24px 26px;display:flex;flex-direction:column}
.post-card.no-art .art{display:none}
.post-title{color:var(--accent-on-dark);font-size:26px;font-weight:700;line-height:36px;display:block;margin-bottom:10px}
.post-excerpt{color:var(--text);flex:1 1 auto}
.post-foot{display:flex;align-items:center;gap:12px;margin-top:22px}
.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 40px;background:var(--accent-soft)}
.by{font-size:15px;font-weight:600;color:var(--text-strong);line-height:19px}
.when{font-size:13px;color:var(--text);opacity:.7}
.readtime{margin-left:auto;background:var(--pill);border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;color:var(--text)}
.post-card:hover .readtime{background:var(--accent);color:var(--accent-text)}

/* empty state (no posts yet) */
.empty-state{background:var(--card);border-radius:var(--bubble);padding:56px 28px;text-align:center}
.empty-state h3{margin:0 0 8px}
.empty-state p{margin:0;color:var(--text);opacity:.8}

/* ---------- lists / tiles ---------- */
.rules-list{list-style:none;margin:0;padding:0;counter-reset:r}
.rules-list li{counter-increment:r;position:relative;padding:11px 0 11px 40px;border-bottom:1px solid var(--hair)}
.rules-list li:last-child{border-bottom:0}
.rules-list li::before{content:counter(r);position:absolute;left:0;top:10px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-on-dark);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Bubbly tiles (Eric 2026-08-16): they drift on their own, barely but always, and
   answer a hover with a springy pop instead of a flat highlight.
   The idle drift animates the standalone `translate` property while hover animates
   `scale` - keeping them on separate properties is what stops the animation from
   stomping the hover transform (one shared `transform` makes it snap). */
/* Eric 2026-08-17: drift must wander in ALL directions around itself, not just up
   and down, and nothing may share a path/duration/phase with its neighbour. Five
   different closed paths, each assigned a different duration and a negative delay
   so every element starts mid-path. Prime-ish durations keep them from re-syncing. */
@keyframes drift1{0%{translate:0 0}20%{translate:7px -6px}40%{translate:-3px -10px}60%{translate:-8px -2px}80%{translate:2px 6px}100%{translate:0 0}}
@keyframes drift2{0%{translate:0 0}25%{translate:-9px -4px}50%{translate:4px -9px}75%{translate:8px 4px}100%{translate:0 0}}
@keyframes drift3{0%{translate:0 0}30%{translate:5px 7px}55%{translate:-6px 3px}80%{translate:-2px -8px}100%{translate:0 0}}
@keyframes drift4{0%{translate:0 0}18%{translate:-5px 6px}42%{translate:7px 2px}66%{translate:3px -7px}88%{translate:-6px -3px}100%{translate:0 0}}
@keyframes drift5{0%{translate:0 0}22%{translate:6px 5px}48%{translate:-7px -6px}72%{translate:2px -3px}100%{translate:0 0}}

/* Eric 2026-08-17: the support tiles were "stupid silly moving" - tamed to a
   3-4px wander (was 7-10px) on slower cycles. Still omni-directional, still
   desynced, just far less freedom. */
@keyframes tame1{0%{translate:0 0}25%{translate:3px -2px}50%{translate:-1px -4px}75%{translate:-3px 1px}100%{translate:0 0}}
@keyframes tame2{0%{translate:0 0}30%{translate:-4px 2px}60%{translate:2px 3px}85%{translate:3px -2px}100%{translate:0 0}}
@keyframes tame3{0%{translate:0 0}22%{translate:2px 3px}55%{translate:-3px 1px}80%{translate:-1px -3px}100%{translate:0 0}}
.tile{background:var(--pill);border-radius:var(--bubble);padding:24px;text-align:center;display:flex;flex-direction:column;gap:10px;
  animation:tame1 13.4s ease-in-out infinite;will-change:translate,scale;
  transition:scale .34s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .3s ease}
.tile:nth-of-type(3n+2){animation-name:tame2;animation-duration:16.1s;animation-delay:-4.3s}
.tile:nth-of-type(3n+3){animation-name:tame3;animation-duration:11.9s;animation-delay:-8.6s}
.tile:hover{scale:1.05;background:var(--accent-soft);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 5px var(--accent-soft)}
.tile .ico,.tile .n{transition:scale .34s cubic-bezier(.34,1.56,.64,1),background .3s ease}
.tile:hover .ico,.tile:hover .n{scale:1.14}
.tile p{font-size:14.4px;margin:0;flex:1 1 auto}
.tile .n{width:42px;height:42px;margin:0 auto;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-on-dark);font-weight:700}
.tile .ico{width:48px;height:48px;margin:0 auto;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-on-dark)}
.btn{display:inline-block;background:var(--accent);color:var(--accent-text);font-size:14.4px;font-weight:700;padding:11px 24px;border-radius:999px;text-align:center;border:0;cursor:pointer;font-family:inherit;
  transition:background .22s ease,scale .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.btn:hover{background:var(--accent-deep);color:#fff;scale:1.04;box-shadow:0 10px 26px rgba(124,0,255,.32)}
.btn:active{scale:.97}
.btn.ghost{background:var(--pill);color:var(--text)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent-on-dark)}
.btn.off{background:var(--pill);color:var(--text);opacity:.4;pointer-events:none;text-decoration:line-through}
.btn.block{display:block;width:100%}

/* ---------- faq / team ---------- */
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item:last-child{border-bottom:0}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--text-strong);font-family:inherit;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;display:flex;gap:12px}
.faq-q:hover{color:var(--accent-on-dark)}
.faq-q .c{margin-left:auto;color:var(--accent-on-dark);transition:transform .2s ease;display:flex}
.faq-item.open .faq-q .c{transform:rotate(180deg)}
.faq-a{display:none;padding:0 0 16px}
.faq-item.open .faq-a{display:block}
.team-group{margin-bottom:30px}
.team-group h4{text-align:center;letter-spacing:.14em;text-transform:uppercase;font-size:15px;margin-bottom:16px}
.team-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.member{width:150px;background:var(--pill);border-radius:var(--bubble);padding:20px 12px;text-align:center}
.member .face{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--accent-soft)}
.member .nm{font-size:15px;font-weight:700;color:var(--text-strong);word-break:break-all}
.member .rk{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:3px;color:var(--accent-on-dark)}

/* ---------- server IP: a glow that walks the address one character at a time ----------
   Eric 2026-08-17: "one letter lights up purpleishpink (a hair lighter then our
   websites current) and one letter lights up at a time and moves down the ip".
   Every character gets the same short pulse; the per-character delay is what makes
   it travel instead of flashing all at once. */
.ip-sweep{display:inline-flex;flex-wrap:wrap}
.ip-sweep .ipc{display:inline-block;white-space:pre;will-change:color,scale;
  animation:ip-pulse 3.2s linear infinite;animation-delay:calc(var(--i) * .085s)}
@keyframes ip-pulse{
  0%,100%{color:var(--text-strong);text-shadow:none;scale:1}
  4%     {color:var(--ip-glow);text-shadow:0 0 12px var(--ip-glow),0 0 4px var(--ip-glow);scale:1.24}
  10%    {color:var(--text-strong);text-shadow:none;scale:1}
}

/* ---------- vote: a field of floating bubbles ----------
   Eric 2026-08-17: the whole vote section is a bubble field (cryptobubbles-style),
   ten of them, smaller so they fit, and on mobile they are just named circles. */
/* Long, wandering paths. The tile drifts move ~8px; these move 40-90px so the field
   visibly roams the way cryptobubbles does. Five paths, all closed loops. */
@keyframes swim1{0%{translate:0 0}18%{translate:52px -34px}37%{translate:18px -74px}56%{translate:-46px -48px}74%{translate:-62px 14px}88%{translate:-16px 46px}100%{translate:0 0}}
@keyframes swim2{0%{translate:0 0}22%{translate:-58px 26px}44%{translate:-24px 68px}63%{translate:44px 52px}81%{translate:66px -18px}100%{translate:0 0}}
@keyframes swim3{0%{translate:0 0}16%{translate:34px 56px}33%{translate:-28px 72px}52%{translate:-70px 12px}71%{translate:-30px -52px}87%{translate:40px -30px}100%{translate:0 0}}
@keyframes swim4{0%{translate:0 0}25%{translate:-44px -58px}48%{translate:36px -70px}67%{translate:74px -10px}85%{translate:28px 44px}100%{translate:0 0}}
@keyframes swim5{0%{translate:0 0}20%{translate:64px 22px}40%{translate:30px 66px}60%{translate:-42px 58px}80%{translate:-66px -26px}100%{translate:0 0}}

/* The field is a physics arena now, not a flex row. Positions come from the
   simulation in site.js (bounce off the walls and off each other, draggable), so
   nothing here may animate or lay out the bubbles. */
.bubble-field{position:relative;width:100%;height:520px;margin:10px 0 4px;touch-action:none;overflow:hidden}

/* Glass bubbles. Eric 2026-08-17: "more transparent (barely any of our website
   colors)" - so the fill is a faint tint at ~14% and the read comes from the rim
   light and the specular highlight, not from a solid colour. */
.vbub{position:absolute;left:0;top:0;width:var(--size,140px);height:var(--size,140px);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;
  cursor:grab;user-select:none;-webkit-user-select:none;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.34),rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 56%),
    radial-gradient(circle at 50% 118%,rgba(255,255,255,.14),rgba(255,255,255,0) 62%),
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--fill) 14%,transparent),color-mix(in srgb,var(--fill) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--fill) 42%,transparent);
  box-shadow:inset 0 0 26px color-mix(in srgb,var(--fill) 16%,transparent),inset 0 -8px 20px rgba(255,255,255,.06),0 10px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  color:#fff;
  will-change:transform;transition:box-shadow .3s ease,border-color .3s ease}
.vbub.grabbed{cursor:grabbing;z-index:5;box-shadow:inset 0 0 30px color-mix(in srgb,var(--fill) 30%,transparent),0 24px 54px rgba(0,0,0,.6)}
.vbub .vname{font-weight:800;font-size:13.5px;line-height:1.16;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.vbub .vcd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.75;margin-top:7px;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.vbub:hover{scale:1.1;border-color:color-mix(in srgb,var(--fill) 85%,transparent);
  box-shadow:inset 0 0 30px color-mix(in srgb,var(--fill) 26%,transparent),0 18px 46px rgba(0,0,0,.5),0 0 0 6px color-mix(in srgb,var(--fill) 14%,transparent)}
.vbub.off{opacity:.7;cursor:not-allowed}

/* NOTE: the ambient hero bubbles were REMOVED on Eric's order 2026-08-17 -
   "Make sure the crypto bubbles do not go in the top header animation (take these
   out)". The header keeps the node network only. Do not reintroduce them. */

/* ---------- rules as hover bubbles ----------
   Eric 2026-08-17: like cosmicencore's rules list, but HOVER instead of click
   ("clicking each rule can get annoying"), and the rule itself is a bubble that
   moves a little more while you are on it. Small title + short line always
   visible; the long explanation opens on hover. No tiers - flat list, as now. */
.rule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:rb}
.rule-bub{counter-increment:rb;position:relative;background:var(--pill);border:1px solid transparent;border-radius:var(--bubble);
  padding:15px 20px 15px 56px;
  animation:tame3 15.2s ease-in-out infinite;will-change:translate,scale;
  transition:scale .3s cubic-bezier(.34,1.56,.64,1),border-color .25s ease,background .25s ease,box-shadow .3s ease}
.rule-bub:nth-of-type(3n+2){animation-name:tame1;animation-duration:17.6s;animation-delay:-5.2s}
.rule-bub:nth-of-type(3n+3){animation-name:tame2;animation-duration:13.1s;animation-delay:-9.4s}
.rule-bub::before{content:counter(rb);position:absolute;left:18px;top:15px;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;background:var(--accent-soft);color:var(--accent-on-dark);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.rule-bub:hover,.rule-bub:focus-within{scale:1.015;border-color:var(--accent-line);background:var(--accent-soft);
  box-shadow:0 14px 34px rgba(0,0,0,.4);animation-duration:4.6s}
.rule-title{font-size:16.5px;font-weight:700;color:var(--text-strong);line-height:1.3}
.rule-short{font-size:13px;color:var(--text);opacity:.7;margin-top:3px}
.rule-detail{max-height:0;overflow:hidden;opacity:0;font-size:14.4px;color:var(--text);
  transition:max-height .34s ease,opacity .26s ease,margin-top .3s ease}
.rule-bub:hover .rule-detail,.rule-bub:focus-within .rule-detail{max-height:400px;opacity:1;margin-top:11px}

/* ---------- confirm dialog ---------- */
.modal-back{position:fixed;inset:0;z-index:400;background:rgba(6,4,12,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px}
.modal{background:var(--card);border:1px solid var(--accent-line);border-radius:var(--bubble);max-width:470px;width:100%;padding:26px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h4{margin:0 0 10px;font-size:20px}
.modal p{font-size:14.6px}
.modal .row{display:flex;gap:12px;margin-top:22px}
.modal .row .btn{flex:1 1 0}
.vote-actions{display:flex;justify-content:center;margin:4px 0 2px}

/* owner vote-link editor rows */
.vrow{display:grid;grid-template-columns:1.1fr 2fr 1fr .7fr auto;gap:8px;align-items:center;margin-bottom:9px}
.vrow input{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--hair);border-radius:var(--radius);color:#fff;font-family:inherit;font-size:14px}
.vrow input:focus{outline:0;border-color:var(--accent-on-dark)}
@media (max-width:760px){.vrow{grid-template-columns:1fr 1fr;gap:6px}}

/* ---------- footer logo ---------- */
.footer-brandmark{width:210px;max-width:70%;height:auto;display:block;margin:0 0 12px}

/* ---------- staff ladder ---------- */
.team-group.rung{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.team-group.rung:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.team-group.rung h4{display:flex;align-items:center;justify-content:center;gap:10px}
.rung-n{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-on-dark);font-size:12px;font-weight:800;letter-spacing:0}
.member.empty{opacity:.48}
.member.empty .nm{font-weight:600;color:var(--text)}
.member.empty .face{background:var(--hair)}

/* ---------- forms ---------- */
.form-wrap{max-width:430px;margin:0 auto}
.form-wrap.wide{max-width:620px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text);opacity:.75;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:12px 16px;background:var(--card-2);border:1px solid var(--hair);border-radius:var(--radius);color:#fff;font-family:inherit;font-size:15px}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent-on-dark) 50%),linear-gradient(135deg,var(--accent-on-dark) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent-on-dark)}
.field .hint{font-size:12.5px;color:var(--text);opacity:.6;margin-top:6px;text-transform:none;letter-spacing:0}
/* "Remember me" style checkbox - the native box cannot be themed reliably, so the
   real input is hidden and a .box is drawn next to it (still keyboard-focusable). */
.check{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:14.4px;color:var(--text);cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:var(--card-2);border:1px solid var(--accent-line);position:relative;
  transition:background .2s ease,border-color .2s ease,scale .3s cubic-bezier(.34,1.56,.64,1)}
.check .box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0;transition:opacity .16s ease}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box::after{opacity:1}
.check:hover .box{scale:1.12;border-color:var(--accent)}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.msg{border-radius:var(--radius);padding:12px 16px;font-size:14.4px;margin-bottom:16px}
.msg.err{background:rgba(255,85,85,.08);color:#ff8a8a}
.msg.ok{background:var(--accent-soft);color:var(--accent-on-dark)}
.form-alt{text-align:center;margin-top:18px;font-size:14.4px}

/* ---------- discord: nav icon + hero box ---------- */
.nav-social{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.nav-social a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--pill);border:1px solid var(--accent-line);color:var(--text-strong);transition:background .2s ease,transform .2s ease,color .2s ease}
.nav-social a:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-text);transform:translateY(-2px)}
.info-box.discord .ico{background:rgba(88,101,242,.18);color:#a8b2ff}
.info-box.discord:hover{background:rgba(88,101,242,.14)}

/* ---------- tickets / appeals ---------- */
.ticket-list{display:flex;flex-direction:column;gap:12px}
.ticket{background:var(--pill);border-radius:var(--radius);padding:14px 18px;border-left:3px solid var(--accent)}
.ticket .th{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ticket .subj{font-weight:700;color:var(--text-strong)}
.ticket .meta{font-size:13px;color:var(--text);opacity:.7;margin-top:4px}
.ticket .body{margin-top:10px;font-size:14.4px;white-space:pre-wrap;word-break:break-word}
.badge{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-on-dark)}
.badge.open{background:rgba(255,176,32,.14);color:#ffc65c}
.badge.closed{background:rgba(80,220,130,.12);color:#78e0a0}
.ref{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;color:var(--accent-on-dark);background:var(--pill);padding:3px 9px;border-radius:6px}

/* ---------- footer socials ---------- */
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--pill);color:var(--text);transition:background .2s ease,color .2s ease}
.footer-social a:hover{background:var(--accent);color:var(--accent-text)}

/* ---------- footer ---------- */
.footer-top{background:var(--panel);border-top:1px solid var(--hair);padding:44px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.footer h5{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-strong);margin:0 0 14px}
.footer-about p{font-size:14.4px;max-width:420px;margin:0}
.footer-brand{color:var(--accent-on-dark);font-size:20px;font-weight:800;letter-spacing:.04em;margin-bottom:10px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:9px}
.footer-col a{color:var(--text);font-size:14.4px}
.footer-col a:hover{color:var(--accent-on-dark)}
.footer-col a.struck{text-decoration:line-through;opacity:.5}
.footer-bottom{background:var(--panel);border-top:1px solid var(--hair);padding:22px 0}
.footer-bottom .container{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.chip{background:var(--hair);border-radius:999px;padding:5px 14px;font-size:13.6px;font-weight:500;color:var(--text)}

/* ==========================================================================
   RESPONSIVE - no empty cells, no blank gaps
   ========================================================================== */
@media (max-width:991px){
  .nav-list,.nav-auth{display:none}
  .nav-toggle{display:flex}
  /* Eric 2026-08-17: on mobile the SUPPORT US bubble gives way to the SERVER IP
     bubble - the address is the thing a phone visitor actually needs - and the gap
     above the logo closes up. */
  .hero-wrap{padding:70px 0 30px}
  .cell-right{display:none}
  /* stack the hero row; nothing is left as an empty column */
  .logo-row{flex-direction:column;align-items:center;gap:10px}
  .logo-row>*{width:100%;flex:0 0 auto;justify-content:center}
  .brandmark{width:min(340px,78vw)}
  .info-box{width:100%;max-width:340px;justify-content:center}
  .info-box.right{flex-direction:row}
  .post-card{flex-direction:column}
  .post-card .art{flex:0 0 200px;min-height:200px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .vbub{width:112px;height:112px}
}
@media (max-width:600px){
  body{font-size:15px}
  .hero-wrap{padding:62px 0 24px}
  .brandmark{width:min(300px,84vw)}
  .bubble-field{height:440px}
  .card{border-radius:18px}
  .card-header{font-size:18px;padding:16px 18px 0}
  .card-body{padding:12px 18px 20px}
  .post-card{border-radius:18px}
  .post-title{font-size:21px;line-height:29px}
  .post-card .side{padding:18px}
  .post-foot{flex-wrap:wrap;gap:10px}
  .readtime{margin-left:0}
  .g3,.g4,.footer-grid{grid-template-columns:1fr}
  .member{width:calc(50% - 8px)}
  h2{font-size:25px}
  /* mobile vote: plain named circles, per Eric - "circle bubble icons and the
     icons will just be the name of the voting website" */
  .bubble-field{gap:12px}
  .vbub{width:96px;height:96px;padding:8px}
  .vbub .vname{font-size:12px}
  .vbub .vcd{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}