/* superfkr — crimson gradient + liquid glass navbar.
   Loaded AFTER each page's own styles; same var names, new values. */
:root{
  --bg:#0c0d14;
  --grad:#c23c5c;
  --panel:rgba(16,17,26,.72);
  --panel2:rgba(24,22,34,.62);
  --glass:rgba(14,15,24,.52);
  --line:rgba(226,110,138,.16);
  --line2:rgba(226,110,138,.38);
  --ink:#f2eef1;
  --dim:#a595a0;
  --accent:#c23c5c;
  --accent2:#e05577;
  --amber:#e0a24e;
  --warn:#e0a24e;
  --warm:#e0a24e;
  --gold:#ff8aa5;
  --ok:#ff8aa5;
  --blurple:#5865F2;
  --r:12px;
  --r-sm:8px;
}
::selection{background:var(--accent); color:#fff}
*{scrollbar-width:thin; scrollbar-color:rgba(226,110,138,.28) var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(226,110,138,.24);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(226,110,138,.42)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent2); outline-offset:2px}

/* simple gradient rising from the bottom; grid killed */
html{scrollbar-gutter:stable}
body{
  color:var(--ink);
  /* single elliptical bloom, color ramp sampled from the reference image */
  background:
    radial-gradient(92% 80% at 50% 104%,
      #e2426f 0%,
      #c93862 7%,
      #a52f56 16%,
      #7c2547 28%,
      #521a35 42%,
      #331227 56%,
      #1d0e1c 70%,
      #140c18 85%,
      #100b16 100%)
    fixed #100b16;
}
body::before{content:none}
body::after{content:none}

/* ---------- liquid glass navbar ---------- */
.gnav{
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  width:min(1060px, calc(100% - 24px));
  display:flex; align-items:center; gap:14px;
  padding:8px 10px 8px 16px; z-index:20;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 14px 40px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.gnav .brand{display:flex; align-items:center}
.gnav .brand img{height:30px; width:auto; display:block; border-radius:7px}
.gnav .navback{
  color:var(--dim); text-decoration:none; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.gnav .navback:hover{color:var(--ink)}
.gnav .navlinks{margin-left:auto; display:flex; gap:2px; align-items:center}
.gnav .navlinks a{
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:8px;
  color:var(--dim); transition:color .15s, background .15s;
  line-height:0;
}
.gnav .navlinks a:hover{color:#fff; background:var(--accent)}
.gnav .navlinks svg{width:17px; height:17px; fill:currentColor; display:block}
.gnav .tabs{position:static; display:flex; gap:4px; margin:0; padding:0;
  background:transparent; border:0; backdrop-filter:none; -webkit-backdrop-filter:none}
.gnav .tab{
  background:transparent; border:0; border-radius:8px; position:relative;
  color:var(--dim); font:inherit; font-size:12px; line-height:1.6;
  letter-spacing:.16em; text-transform:uppercase;
  padding:7px 16px; cursor:pointer;
  transition:color .15s, background .15s;
}
.gnav .tab:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.gnav .tab.on{background:var(--accent); color:#fff}
.gnav .tab .n{opacity:.7; margin-left:6px}
@media (max-width:640px){
  .gnav{gap:6px; padding:6px 8px}
  .gnav .brand img{height:24px}
  .gnav .tabs{gap:2px}
  .gnav .tab, .gnav .navtab{padding:6px 9px; font-size:11px; letter-spacing:.08em; gap:5px}
  .gnav .navlinks{gap:0}
  .gnav .navlinks a{width:26px; height:26px}
  .gnav .navlinks svg{width:14px; height:14px}
}

/* ---------- cursor-follow glow on buttons only (fx.js sets --mx/--my) ---------- */
.tab,.dbtn,.ret,.navtab,button{position:relative}
.tab::after,.dbtn::after,.ret::after,.navtab::after,button::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.14), transparent 65%);
}
.tab:hover::after,.dbtn:hover::after,.ret:hover::after,.navtab:hover::after,button:hover::after{opacity:1}
@media (hover: none){
  .tab::after,.dbtn::after,.ret::after,.navtab::after,button::after{display:none}
}

/* ---------- entry-card return button ---------- */
.ret{
  position:absolute; top:14px; right:14px; z-index:6;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:8px;
  color:var(--ink); text-decoration:none;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:color .15s, border-color .15s, background .15s;
}
.ret .ra{font-size:13px; line-height:1; transform:translateY(-.5px)}
.ret:hover{color:#fff; border-color:transparent; background:var(--accent)}

/* nav back link styled like the board tabs */
.gnav .navtab{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:8px; position:relative;
  color:var(--dim); text-decoration:none;
  font-size:12px; line-height:1.6; letter-spacing:.16em; text-transform:uppercase;
  transition:color .15s, background .15s;
}
.gnav .navtab:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.gnav .navtab .ra{font-size:13px; line-height:1}