/* ─── Moonflower Society — theme ──────────────────────────────────────────────
   Moody indigo/violet night palette with moonlit gold accents. Colours pull
   from the bot's Discord embed palette (blurple 5865F2, gold FEE75C, green
   57F287, red ED4245) so the site and the bot feel like one product. */

:root {
  --bg:        #0b0a1a;
  --bg-2:      #12102a;
  --panel:     #1a1736;
  --panel-2:   #221d44;
  --line:      #2d2857;
  --text:      #e9e6ff;
  --muted:     #a29dce;
  --muted-2:   #6f6aa0;

  --blurple:   #5865F2;
  --violet:    #8b7bff;
  --gold:      #ffd56b;
  --gold-soft: #fee75c;
  --green:     #57F287;
  --red:       #ED4245;
  --orange:    #ffa500;

  --glow: 0 0 40px rgba(139, 123, 255, 0.25);
  --radius: 16px;
  --maxw: 1100px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,123,255,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(88,101,242,.14), transparent 55%),
    var(--bg);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Starfield + drifting moon glow sit behind everything */
.stars { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.moon-glow {
  position: fixed; top: -140px; right: -120px; width: 420px; height: 420px;
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff7e0 0%, #ffe6a8 18%, rgba(255,213,107,.25) 42%, transparent 70%);
  filter: blur(6px); opacity: .9;
  animation: float 16s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(26px) } }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--gold); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ─── Nav ───────────────────────────────────────────────────────────────── */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11,10,26,.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .3px; font-size: 1.05rem; color: var(--text); white-space: nowrap; flex: 0 0 auto; }
.brand .logo { font-size: 1.5rem; filter: drop-shadow(0 0 8px rgba(255,213,107,.6)); }
.brand b { background: linear-gradient(90deg, var(--violet), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav.links { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
nav.links a {
  color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap;
  padding: 7px 11px; border-radius: 10px; transition: .15s;
}
#auth-slot { flex: 0 0 auto; }
nav.links a:hover, nav.links a.active { color: var(--text); background: var(--panel); }

/* Hamburger toggle — hidden on desktop, shown on mobile via media query. */
.nav-toggle {
  display: none; cursor: pointer; background: var(--panel); border: 1px solid var(--line);
  color: var(--text); font-size: 1.2rem; line-height: 1; width: 42px; height: 38px;
  border-radius: 10px; margin-left: auto; font-family: inherit; transition: .15s;
}
.nav-toggle:hover { background: var(--panel-2); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .92rem;
  padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s, background .2s; text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: linear-gradient(90deg, var(--blurple), var(--violet)); color: #fff; box-shadow: 0 8px 24px rgba(88,101,242,.35); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(139,123,255,.5); color: #fff; }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-discord { background: #5865F2; color: #fff; }
.btn-discord:hover { background: #4a57e0; color: #fff; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 90px 0 60px; text-align: center; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; font-weight: 900; letter-spacing: -1px; }
.hero h1 .accent { background: linear-gradient(90deg, var(--violet), var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { color: var(--muted); font-size: 1.15rem; max-width: 620px; margin: 18px auto 30px; }
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─── Stat strip ────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 46px 0; }
.stat {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center; position: relative; overflow: hidden;
}
.stat::before { content:''; position:absolute; inset:0; background: radial-gradient(400px 120px at 50% -40%, rgba(139,123,255,.25), transparent); }
.stat .num { font-size: 2.1rem; font-weight: 900; background: linear-gradient(90deg,#fff,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lbl { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ─── Sections / cards ──────────────────────────────────────────────────── */
section.block { padding: 50px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 24px; flex-wrap: wrap; }
.section-head h2 { font-size: 1.7rem; font-weight: 800; }
.section-head p { color: var(--muted); }

.card {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--glow);
}
.feature-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:18px; }
.feature { padding: 22px; }
.feature .ic { font-size: 1.8rem; margin-bottom: 8px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: .94rem; }

/* ─── Tabs (leaderboard / punishments) ──────────────────────────────────── */
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 20px; }
.tab {
  cursor:pointer; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem;
  background: var(--panel); border:1px solid var(--line); color: var(--muted); transition:.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color:#fff; background: linear-gradient(90deg,var(--blurple),var(--violet)); border-color: transparent; }

.seg { display:inline-flex; background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px; gap:4px; }
.seg button { cursor:pointer; border:none; background:transparent; color:var(--muted); font-weight:700; font-size:.82rem; padding:6px 12px; border-radius:7px; font-family:inherit; }
.seg button.active { background: var(--panel-2); color: var(--text); }

/* ─── Leaderboard rows ──────────────────────────────────────────────────── */
.lb-row {
  display:flex; align-items:center; gap:14px; padding: 12px 16px;
  border:1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
  background: var(--panel); transition: transform .12s, border-color .2s;
}
.lb-row:hover { transform: translateX(4px); border-color: var(--violet); }
.lb-rank { font-weight: 900; font-size: 1.1rem; width: 34px; text-align:center; color: var(--muted); }
.lb-row.top1 .lb-rank { color:#ffd56b; } .lb-row.top2 .lb-rank { color:#cfd3e0; } .lb-row.top3 .lb-rank { color:#e0a86b; }
.lb-row.top1 { border-color: rgba(255,213,107,.5); box-shadow: 0 0 24px rgba(255,213,107,.15); }
.lb-av { width: 42px; height: 42px; border-radius: 50%; border:2px solid var(--line); object-fit: cover; }
.lb-name { font-weight: 700; }
.lb-sub { color: var(--muted); font-size: .82rem; }
.lb-val { margin-left:auto; text-align:right; }
.lb-val .v { font-weight: 800; font-size: 1.05rem; color: var(--gold); }
.lb-val .u { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing:.06em; }

/* ─── Punishment rows ───────────────────────────────────────────────────── */
.pun-row {
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px;
  border:1px solid var(--line); border-left-width:4px; border-radius:12px; background: var(--panel);
}
.pun-ic { font-size:1.4rem; }
.pun-main { flex:1; }
.pun-who { font-weight:800; }
.pun-cat { color: var(--muted); font-size:.85rem; }
.pun-time { color: var(--muted-2); font-size:.78rem; white-space:nowrap; }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

/* ─── Profile ───────────────────────────────────────────────────────────── */
.profile-head { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.profile-head img { width:96px; height:96px; border-radius:50%; border:3px solid var(--violet); box-shadow: var(--glow); }
.profile-head h2 { font-size:1.6rem; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip { background: var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:.84rem; color: var(--muted); }
.chip b { color: var(--text); font-weight:700; }

.field { margin-bottom: 16px; }
.field label { display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.field input, .field select, .field textarea {
  width:100%; background: var(--bg-2); border:1px solid var(--line); border-radius:10px;
  color: var(--text); padding:10px 12px; font-family:inherit; font-size:.95rem;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,123,255,.2); }
.multi { display:flex; flex-wrap:wrap; gap:8px; }
.multi .opt { cursor:pointer; user-select:none; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size:.86rem; font-weight:600; }
.multi .opt.on { background: linear-gradient(90deg,var(--blurple),var(--violet)); color:#fff; border-color:transparent; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity:0; background: var(--panel-2); border:1px solid var(--violet); color: var(--text); padding:12px 22px; border-radius:12px; box-shadow: var(--glow); transition:.25s; z-index: 100; font-weight:600; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* ─── Misc ──────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.center { text-align:center; }
.empty { text-align:center; color: var(--muted); padding: 40px 20px; }
.skeleton { background: linear-gradient(90deg,var(--panel),var(--panel-2),var(--panel)); background-size:200% 100%; animation: shimmer 1.4s infinite; border-radius:12px; height:66px; margin-bottom:10px; }
@keyframes shimmer { to { background-position: -200% 0 } }

footer.foot { border-top:1px solid var(--line); margin-top: 60px; padding: 30px 0; color: var(--muted); }
.foot-inner { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.foot a { color: var(--muted); } .foot a:hover { color: var(--gold); }

.spin { width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--violet);border-radius:50%;animation:rot .8s linear infinite;margin:40px auto; }
@keyframes rot { to { transform: rotate(360deg) } }

@media (max-width: 640px) {
  nav.links a { padding: 7px 10px; font-size: .85rem; }
  .hero { padding: 60px 0 40px; }
}

/* ─── Aurora shimmer behind everything ──────────────────────────────────────
   A slow, drifting veil of violet/blurple/gold light under the starfield. */
body::before {
  content: ''; position: fixed; inset: -20% -20% auto -20%; height: 90vh; z-index: -3;
  pointer-events: none; filter: blur(70px); opacity: .55;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(139,123,255,.35), transparent 70%),
    radial-gradient(45% 55% at 80% 20%, rgba(88,101,242,.30), transparent 70%),
    radial-gradient(35% 45% at 55% 60%, rgba(255,213,107,.18), transparent 70%);
  background-size: 200% 200%;
  animation: aurora 24s ease-in-out infinite;
}
@keyframes aurora {
  0%,100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%     { background-position: 100% 50%, 0% 50%, 50% 0%; }
}

/* ─── Drifting moonflower petals ─────────────────────────────────────────── */
.petal-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -40px; will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(255,213,107,.4));
  animation-name: fall; animation-timing-function: linear; animation-iteration-count: 1;
}
@keyframes fall {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(var(--sway,0), 108vh) rotate(540deg); }
}

/* ─── Custom cursor ─────────────────────────────────────────────────────── */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  translate: -50% -50%; /* center on the transform point */
  margin: -0px; will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7e0, #ffd56b 60%, #8b7bff);
  box-shadow: 0 0 10px rgba(255,213,107,.9), 0 0 22px rgba(139,123,255,.7);
}
.cursor-ring {
  width: 34px; height: 34px; margin-left: -17px; margin-top: -17px; border-radius: 50%;
  border: 1.5px solid rgba(139,123,255,.7);
  box-shadow: 0 0 16px rgba(139,123,255,.35), inset 0 0 10px rgba(139,123,255,.2);
  transition: width .18s ease, height .18s ease, margin .18s ease, border-color .18s, background .18s;
}
.cursor-ring.hot {
  width: 48px; height: 48px; margin-left: -24px; margin-top: -24px;
  border-color: var(--gold); background: rgba(255,213,107,.08);
  box-shadow: 0 0 24px rgba(255,213,107,.45);
}
.cursor-ring.down { width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; }

/* ─── Brand icon (auto-pulled Discord server icon) ──────────────────────── */
.brand .logo { display: inline-flex; align-items: center; }
.brand-icon {
  width: 30px; height: 30px; border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,213,107,.55); border: 1px solid rgba(255,213,107,.4);
  object-fit: cover; vertical-align: middle;
}

/* ─── Hero banner (auto-pulled Discord server banner) ───────────────────── */
.hero.has-banner {
  position: relative; border-radius: 24px; overflow: hidden;
  padding: 110px 24px 70px; margin-top: 20px;
  border: 1px solid var(--line);
  isolation: isolate;
}
.hero.has-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--banner); background-size: cover; background-position: center;
  transform: scale(1.08); filter: saturate(1.1);
  animation: bannerDrift 30s ease-in-out infinite alternate;
}
.hero.has-banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,10,26,.55) 0%, rgba(11,10,26,.82) 70%, var(--bg) 100%);
}
@keyframes bannerDrift { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.14) translateY(-14px); } }

/* Buttons/tabs still show a pointer hint via the ring, but keep focus rings for a11y */
a:focus-visible, button:focus-visible, .tab:focus-visible, .opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body::before, .petal, .hero.has-banner::before { animation: none !important; }
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─── Responsive: tablets & phones ──────────────────────────────────────────
   The desktop layout is the default. These breakpoints adapt it down to small
   screens: the nav wraps into its own row, the hero/stat grids reflow, and the
   leaderboard / mod-log rows shrink their paddings and type. */

/* Make the page never cause horizontal scroll on small screens */
html, body { max-width: 100%; }
img, canvas, svg { max-width: 100%; }

/* ── Tablets, small laptops and below (<= 1024px) ──
   The inline nav has many links, so collapse to the hamburger early enough
   that the links never wrap or crowd the brand/auth button. */
@media (max-width: 1024px) {
  :root { --maxw: 100%; }
  .nav-inner { min-height: 60px; gap: 10px; flex-wrap: nowrap; }
  .brand { font-size: 1rem; }

  /* Show the hamburger, collapse the links into a dropdown panel. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; }
  #auth-slot { order: 1; margin-left: auto; }

  nav.links {
    order: 4; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; margin: 0;
    background: rgba(15,13,38,.98); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: 10px 16px;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .28s ease, opacity .2s ease, padding .2s ease;
  }
  nav.links.open { max-height: 80vh; opacity: 1; pointer-events: auto; overflow-y: auto; }
  nav.links a { padding: 12px 14px; font-size: .95rem; border-radius: 10px; }
  header.nav { position: sticky; } /* ensure the absolute dropdown anchors here */
  .nav-inner { position: relative; }

  .hero { padding: 64px 0 44px; }
  .hero.has-banner { padding: 80px 16px 50px; }

  .section-head { flex-direction: column; align-items: flex-start; }
  .feature-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ── Phones (<= 600px) ── */
@media (max-width: 600px) {
  .wrap { padding: 0 14px; }

  /* Nav: brand + hamburger + compact auth button on one row */
  .nav-inner { gap: 8px; }
  .brand b { display: inline; }
  #auth-slot .btn { padding: 7px 10px; font-size: .8rem; }
  #auth-slot .btn img { width: 18px; height: 18px; }

  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hero p.sub { font-size: 1rem; }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn { justify-content: center; }

  /* Stats: two per row, tighter */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0; }
  .stat { padding: 16px 12px; }
  .stat .num { font-size: 1.6rem; }
  .stat .lbl { font-size: .72rem; }

  section.block { padding: 34px 0; }
  .section-head h2 { font-size: 1.4rem; }
  .feature-grid { grid-template-columns: 1fr; }

  /* Tabs & segmented controls wrap and scroll */
  .tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; padding: 8px 12px; font-size: .84rem; }
  .seg { flex: 0 0 auto; }

  /* Leaderboard rows: compact, value stacks under on very small screens */
  .lb-row { padding: 10px 12px; gap: 10px; }
  .lb-rank { width: 24px; font-size: 1rem; }
  .lb-av { width: 36px; height: 36px; }
  .lb-name { font-size: .95rem; }
  .lb-val .v { font-size: .95rem; }
  .lb-val .u { font-size: .65rem; }

  /* Mod-log rows */
  .pun-row { padding: 12px; gap: 10px; }
  .pun-who { font-size: .95rem; }
  .pun-time { font-size: .72rem; }

  /* Profile head stacks and centers */
  .profile-head { flex-direction: column; text-align: center; }
  .profile-head img { width: 84px; height: 84px; }
  .profile-head .chips { justify-content: center; }
  .profile-head .btn { width: 100%; justify-content: center; }
  .chips { justify-content: center; }

  /* Footer stacks */
  .foot-inner { flex-direction: column; text-align: center; gap: 8px; }

  /* Hide the heavy moon glow a touch so text stays readable on tiny screens */
  .moon-glow { width: 280px; height: 280px; top: -100px; right: -90px; }
}

/* ── Very small phones (<= 380px) ── */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 1.8rem; }
  nav.links a { padding: 6px 9px; font-size: .82rem; }
}

/* ── Large screens: keep content comfortably centered ── */
@media (min-width: 1400px) {
  :root { --maxw: 1180px; }
}

/* ─── Role chips, badge grid, members/staff grids, manage panel ─────────── */
.role-chip { font-weight: 700; }

.badge-cat { margin-bottom: 28px; }
.badge-cat h3 { font-size: 1.15rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; text-align: center; transition: transform .12s, border-color .2s; position: relative;
}
.badge:hover { transform: translateY(-3px); border-color: var(--violet); }
.badge.locked { opacity: .5; filter: grayscale(.6); }
.badge .ic { font-size: 1.8rem; }
.badge .nm { font-weight: 700; font-size: .92rem; margin-top: 4px; }
.badge .ds { color: var(--muted); font-size: .76rem; margin-top: 3px; }
.badge .rarity { color: var(--muted-2); font-size: .7rem; margin-top: 6px; }
.badge.earned::after { content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--green); font-weight: 900; }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.person {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; transition: transform .12s, border-color .2s;
}
.person:hover { transform: translateY(-2px); border-color: var(--violet); }
.person img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); }
.person .nm { font-weight: 700; }
.person .ro { font-size: .78rem; color: var(--muted); }

.staff-list { display: flex; flex-direction: column; gap: 10px; }
.staff-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px;
}
.staff-row img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--line); }
.staff-row .nm { font-weight: 800; font-size: 1.05rem; }
.staff-row .ro { font-size: .82rem; font-weight: 700; }

.manage-section { margin-bottom: 26px; }
.manage-section h3 { font-size: 1.1rem; margin-bottom: 12px; }
.manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 18px; align-items: start; }
/* Keep every field cell a consistent block; the label row stays a fixed height
   so inputs line up across columns even when some labels wrap. */
.manage-grid .field { margin-bottom: 0; display: flex; flex-direction: column; }
.manage-grid .field > label { min-height: 20px; }
.manage-grid .field textarea.auto { min-height: 70px; }
.manage-note { background: rgba(255,213,107,.08); border: 1px solid rgba(255,213,107,.3); border-radius: 10px; padding: 10px 14px; color: var(--gold); font-size: .85rem; margin-bottom: 16px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { font-weight: 700; }
.list-row .s { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c93a3d; color:#fff; }

/* ─── Themed search box (Members) ───────────────────────────────────────── */
.search-box {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 12px; max-width: 280px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.search-box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,123,255,.2); }
.search-box .search-ic { color: var(--muted-2); font-size: .95rem; }
.search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: .95rem; padding: 10px 0;
}
.search-box input::placeholder { color: var(--muted-2); }

/* ─── Staff groups ──────────────────────────────────────────────────────── */
.staff-group { margin-bottom: 26px; }
.staff-group h3 { font-size: 1.1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* .person is now an <a> — strip link styling, keep the card look */
a.person { text-decoration: none; color: inherit; cursor: pointer; }
a.person:hover { color: inherit; }
.person .nm { font-weight: 700; }

/* ─── Sign in with Discord button fix ───────────────────────────────────── */
/* Keep the auth button on one line and compact so it never wraps/squashes. */
#auth-slot .btn { white-space: nowrap; }
#auth-slot .btn-discord { padding: 9px 16px; font-weight: 700; }

/* ─── Invisible scrollbars everywhere (still scrollable) ─────────────────── */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ─── Auto-resizing textareas (no user resize handle) ───────────────────── */
textarea.auto { resize: none; overflow: hidden; min-height: 44px; }
.field textarea { resize: none; } /* kill the drag handle on all textareas */

/* ─── Manage panel: sidebar + content layout ────────────────────────────── */
.manage-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.manage-side {
  position: sticky; top: 80px; align-self: start;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.side-title { color: var(--muted-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin: 2px 0 10px 6px; }
#side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  text-align: left; cursor: pointer; border: none; background: transparent;
  color: var(--muted); font-family: inherit; font-weight: 700; font-size: .9rem;
  padding: 10px 12px; border-radius: 10px; transition: .15s; width: 100%;
}
.side-link:hover { color: var(--text); background: var(--bg-2); }
.side-link.active { color: #fff; background: linear-gradient(90deg, var(--blurple), var(--violet)); }
.side-badge { margin-top: 14px; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--gold); font-weight: 700; font-size: .82rem; text-align: center; }
.manage-content { min-width: 0; }

@media (max-width: 760px) {
  .manage-layout { grid-template-columns: 1fr; }
  .manage-side { position: static; }
  #side-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .side-link { white-space: nowrap; flex: 0 0 auto; }
  .side-badge { display: inline-block; margin-top: 10px; }
}

/* ─── Custom emote badge images (sized to match their context) ──────────── */
/* In the Badges grid, the icon slot is ~1.8rem — size the emote to match. */
.badge .ic .badge-emote,
.badge-emote {
  width: 1.8rem; height: 1.8rem; object-fit: contain; vertical-align: middle;
  image-rendering: auto;
}
/* Inside a chip, match the surrounding text line-height so it sits inline. */
.chip-emote {
  width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: -0.2em; margin-right: 1px;
}

/* ─── Announcement banner ───────────────────────────────────────────────── */
.announce-bar {
  position: sticky; top: 64px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  margin: 0 auto; max-width: var(--maxw); width: calc(100% - 40px);
  background: linear-gradient(90deg, rgba(139,123,255,.22), rgba(88,101,242,.18));
  border: 1px solid var(--violet); border-radius: 14px;
  padding: 12px 16px; margin-top: 14px; box-shadow: var(--glow);
  transform: translateY(-8px); opacity: 0; transition: .3s;
}
.announce-bar.show { transform: translateY(0); opacity: 1; }
.announce-ic { font-size: 1.2rem; flex: 0 0 auto; }
.announce-text { flex: 1; min-width: 0; color: var(--text); font-size: .95rem; line-height: 1.4; }
.announce-text b { color: var(--gold); }
.announce-by { color: var(--muted); font-size: .85rem; }
.announce-close {
  flex: 0 0 auto; cursor: pointer; background: transparent; border: none;
  color: var(--muted); font-size: 1rem; width: 28px; height: 28px; border-radius: 8px; transition: .15s;
}
.announce-close:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* ─── Responsive footer: shrink on smaller devices ──────────────────────── */
@media (max-width: 900px) {
  footer.foot { padding: 22px 0; margin-top: 44px; font-size: .9rem; }
  .announce-bar { top: 60px; }
}
@media (max-width: 600px) {
  footer.foot { padding: 16px 0; margin-top: 32px; font-size: .82rem; }
  .foot-inner { flex-direction: column; text-align: center; gap: 6px; }
  .announce-bar { width: calc(100% - 28px); font-size: .88rem; padding: 10px 12px; top: 58px; }
}
@media (max-width: 380px) {
  footer.foot { padding: 12px 0; font-size: .76rem; }
}

/* ─── Help tooltip (hoverable ? circle) + token reference ───────────────── */
.help-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; margin-left: 6px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--violet); color: var(--violet);
  font-size: .74rem; font-weight: 800; line-height: 1; cursor: help;
  position: relative; vertical-align: middle; transition: .15s;
}
.help-q:hover, .help-q:focus-visible { color: #fff; background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,123,255,.25); }
/* Labels that carry a help ? become a flex row so the circle sits neatly beside
   the text (and wraps cleanly on narrow screens). Scoped to manage labels. */
.manage-grid .field label, .manage-note + * .field label { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.help-q[data-tip]:hover::after,
.help-q[data-tip]:focus-visible::after,
.help-q[data-tip].show-tip::after {
  content: attr(data-tip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--violet); color: var(--text);
  padding: 8px 12px; border-radius: 10px; font-size: .78rem; font-weight: 500;
  width: max-content; max-width: 240px; white-space: normal; text-align: left;
  box-shadow: var(--glow); z-index: 60; line-height: 1.4;
}
/* Little arrow under the bubble */
.help-q[data-tip]:hover::before,
.help-q[data-tip]:focus-visible::before,
.help-q[data-tip].show-tip::before {
  content: ''; position: absolute; bottom: 150%; left: 50%; transform: translate(-50%, 50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--panel-2); border-right: 1px solid var(--violet); border-bottom: 1px solid var(--violet); z-index: 61;
}

.token-ref {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; align-items: center;
}
.token-ref .tok {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; font-size: .8rem; font-family: ui-monospace, monospace; color: var(--violet); cursor: default;
}
.token-ref .tok b { color: var(--muted); font-family: var(--font); font-weight: 600; font-size: .78rem; }

/* Appearance section (avatar/banner preview) */
.appearance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.appear-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.appear-card h4 { margin-bottom: 10px; }
.appear-preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--violet); margin: 0 auto 12px; display: block; background: var(--bg-2); }
.appear-preview.banner { width: 100%; height: 90px; border-radius: 12px; }
@media (max-width: 600px) { .appearance-grid { grid-template-columns: 1fr; } }

/* ─── Channel topic rows (themed) ───────────────────────────────────────── */
.chan-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
}
.chan-meta { flex: 0 0 auto; min-width: 150px; max-width: 200px; }
.chan-meta .t { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-meta .s { font-size: .72rem; color: var(--muted-2); font-family: ui-monospace, monospace; }
.field-inline {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 9px 12px; font-family: inherit; font-size: .9rem;
}
.field-inline:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,123,255,.2); }
@media (max-width: 600px) {
  .chan-row { flex-wrap: wrap; }
  .chan-meta { max-width: none; width: 100%; }
  .field-inline { width: 100%; }
}

/* Field hint (shows the real default beneath a textarea) */
.field-hint { margin-top: 6px; font-size: .78rem; color: var(--muted); }
.field-hint code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--violet); font-size: .76rem; }
.token-ref .tok-head { align-self: center; color: var(--muted-2); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }

/* ─── Device-aware tweaks ────────────────────────────────────────────────
   body.is-touch / body.is-mobile are set by JS from pointer + screen checks,
   so we adapt to the actual device, not just the viewport width. */
body.is-mobile .hero h1 { letter-spacing: -0.5px; }
body.is-touch a.person:hover, body.is-touch .lb-row:hover { transform: none; } /* no hover-shift on touch */

/* ─── Touch devices: use the hamburger dropdown regardless of width ──────── */
body.is-touch .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; }
body.is-touch #auth-slot { order: 1; margin-left: auto; }
body.is-touch .nav-inner { position: relative; flex-wrap: nowrap; }
body.is-touch nav.links {
  order: 4; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 4px; margin: 0;
  background: rgba(15,13,38,.98); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); padding: 10px 16px;
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .28s ease, opacity .2s ease, padding .2s ease;
}
body.is-touch nav.links.open { max-height: 80vh; opacity: 1; pointer-events: auto; overflow-y: auto; }
body.is-touch nav.links a { padding: 12px 14px; font-size: .95rem; border-radius: 10px; }

/* ─── Light theme ────────────────────────────────────────────────────────────
   The entire palette is CSS variables, so a light mode is just a set of
   overrides on <html data-theme="light">. Kept soft and moonlit — a daytime
   garden rather than a harsh white. */
html[data-theme="light"] {
  --bg:        #f4f2fb;
  --bg-2:      #ffffff;
  --panel:     #ffffff;
  --panel-2:   #f0edfb;
  --line:      #ddd7f0;
  --text:      #211d3a;
  --muted:     #5f5a86;
  --muted-2:   #8580ad;

  --violet:    #6c5ce7;
  --gold:      #c79a2e;
  --gold-soft: #d8b24a;

  --glow: 0 10px 30px rgba(108, 92, 231, 0.12);
}
html[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(108,92,231,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(88,101,242,.08), transparent 55%),
    var(--bg);
}
/* Tone the night-time decorations down in daylight. */
html[data-theme="light"] .stars { opacity: .35; }
html[data-theme="light"] .moon-glow { opacity: .4; }
html[data-theme="light"] body::before { opacity: .3; }
html[data-theme="light"] header.nav { background: rgba(255,255,255,.78); }
html[data-theme="light"] nav.links a:hover, html[data-theme="light"] nav.links a.active { background: var(--panel-2); }
html[data-theme="light"] .brand b,
html[data-theme="light"] .hero h1 .accent,
html[data-theme="light"] .stat .num { -webkit-text-fill-color: transparent; }
html[data-theme="light"] .badge.locked { opacity: .6; }
/* The custom cursor glow reads better slightly dimmed on light backgrounds. */
html[data-theme="light"] .cursor-dot { box-shadow: 0 0 8px rgba(199,154,46,.7), 0 0 16px rgba(108,92,231,.5); }

/* ─── Footer controls (theme toggle + hidden disco button) ──────────────────*/
.footer-controls { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.foot-btn {
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: .8rem;
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); transition: .15s; line-height: 1;
}
.foot-btn:hover { background: var(--panel-2); border-color: var(--violet); }
.foot-btn:active { transform: translateY(1px); }
.disco-btn {
  background: linear-gradient(90deg, #ff3cac, #784ba0, #2b86c5);
  background-size: 200% 100%; color: #fff; border-color: transparent;
}
.disco-btn.just-revealed { animation: discoPop .5s ease, discoHue 3s linear infinite; }
@keyframes discoPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes discoHue { to { background-position: 200% 0; } }

/* ─── Disco mode 🪩 ──────────────────────────────────────────────────────────
   A short-lived rave: a color-cycling veil over the page, pulsing accents and
   a spinning mirror ball. Respects reduced-motion by dropping the strobe. */
body.disco::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  mix-blend-mode: color; opacity: .35;
  background: linear-gradient(60deg, #ff0040, #ff8a00, #ffe600, #00ff85, #00b3ff, #8b00ff, #ff0040);
  background-size: 400% 400%;
  animation: discoFlow 6s linear infinite;
}
@keyframes discoFlow { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }

body.disco .card,
body.disco .stat,
body.disco .lb-row,
body.disco .badge { animation: discoGlow 1.2s ease-in-out infinite alternate; }
@keyframes discoGlow {
  0%   { box-shadow: 0 0 22px rgba(255,0,128,.45); border-color: #ff3cac; }
  50%  { box-shadow: 0 0 22px rgba(0,179,255,.45); border-color: #2b86c5; }
  100% { box-shadow: 0 0 22px rgba(123,0,255,.45); border-color: #8b00ff; }
}

.disco-ball {
  position: fixed; top: 76px; left: 50%; z-index: 9999; pointer-events: none;
  font-size: 2.6rem; transform-origin: center;
  animation: discoSpin 2.2s linear infinite, discoBob 3s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(255,255,255,.7));
}
@keyframes discoSpin { to { transform: rotate(360deg); } }
@keyframes discoBob { 0%,100% { margin-top: 0; } 50% { margin-top: 10px; } }

@media (prefers-reduced-motion: reduce) {
  body.disco::after { animation: none; opacity: .25; }
  body.disco .card, body.disco .stat, body.disco .lb-row, body.disco .badge { animation: none; }
  .disco-ball { animation: none; }
  .disco-btn.just-revealed { animation: discoPop .3s ease; }
}