/* ===========================================================
   BIKINI HORRORS FNF — design tokens
   Palette: deep underwater teal/navy, toxic sponge acid-green,
   coral accent for "horror" beats. Display face is blocky/poster
   (Bungee) used sparingly; body is Inter; mono is the patch-note
   / status voice that runs through the whole site.
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:        #0A1B1F;
  --bg-2:      #0F2A2E;
  --bg-3:      #133338;
  --ink:       #E8F5EC;
  --ink-dim:   #87ABA4;
  --ink-faint: #4F6E69;
  --acid:      #C6FF4D;
  --acid-dim:  #8FBE3A;
  --coral:     #FF5C7A;
  --line:      #1E3A3E;

  --display: 'Bungee', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--acid);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}

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

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

/* ---------- top status ticker (signature element) ---------- */
.ticker{
  background:#061417;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--ink-dim);
}
.ticker-track{
  display:inline-flex;
  gap:48px;
  padding:8px 0;
  animation:ticker 32s linear infinite;
  padding-left:48px;
}
.ticker-track span{color:var(--acid);}
@keyframes ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- header / nav ---------- */
header.site{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  background:rgba(10,27,31,.92);
  backdrop-filter:blur(6px);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:var(--max);margin:0 auto;
}
.brand{
  font-family:var(--display);
  font-size:18px;
  color:var(--ink);
  display:flex;align-items:center;gap:10px;
  letter-spacing:.02em;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);}
.navlinks{display:flex;gap:28px;font-family:var(--mono);font-size:13px;}
.navlinks a{color:var(--ink-dim);}
.navlinks a:hover{color:var(--acid);text-decoration:none;}
.navlinks a.active{color:var(--acid);}
.navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:8px 10px;border-radius:6px;font-family:var(--mono);}

@media (max-width:760px){
  .navlinks{display:none;}
  .navtoggle{display:block;}
}

/* ---------- buttons / badges ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:13px;font-weight:700;
  padding:13px 22px;border-radius:6px;
  border:1px solid var(--acid);
  color:var(--bg);
  background:var(--acid);
  cursor:pointer;
}
.btn:hover{background:var(--ink);border-color:var(--ink);text-decoration:none;}
.btn.ghost{
  background:transparent;color:var(--ink);border-color:var(--line);
}
.btn.ghost:hover{border-color:var(--acid);color:var(--acid);}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;
  border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;color:var(--ink-dim);
}
.badge .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--acid);
  box-shadow:0 0 8px var(--acid);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
  position:relative;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(198,255,77,.08), transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(255,92,122,.06), transparent 45%);
}
.eyebrow{
  font-family:var(--mono);font-size:13px;color:var(--acid);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--acid);}
h1{
  font-family:var(--display);
  font-size:clamp(34px,6vw,64px);
  line-height:1.05;
  margin:0 0 20px;
  color:var(--ink);
}
h1 .accent{color:var(--acid);}
.lede{
  font-size:18px;color:var(--ink-dim);max-width:620px;margin:0 0 30px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.hero-meta{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:64px 0;border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
.section-head{margin-bottom:36px;max-width:680px;}
.kicker{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;
}
h2{
  font-family:var(--display);
  font-size:clamp(24px,3.4vw,36px);
  margin:0 0 14px;color:var(--ink);
}
h3{font-family:var(--body);font-weight:700;font-size:19px;color:var(--ink);margin:0 0 8px;}
p{color:var(--ink-dim);margin:0 0 14px;}
.muted{color:var(--ink-faint);}

/* ---------- wave divider (signature underwater motif) ---------- */
.wave{display:block;width:100%;height:36px;}
.wave path{fill:none;stroke:var(--acid);stroke-width:1.4;opacity:.35;}

/* ---------- grid / cards ---------- */
.grid{display:grid;gap:18px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}
}
.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
}
.card .num{font-family:var(--mono);color:var(--acid-dim);font-size:13px;margin-bottom:10px;display:block;}

/* ---------- patch log list ---------- */
.log{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.log-row{
  display:grid;grid-template-columns:90px 1fr 110px;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line);
  align-items:start;
}
.log-row:last-child{border-bottom:none;}
.log-row .ver{font-family:var(--mono);color:var(--acid);font-weight:700;}
.log-row .date{font-family:var(--mono);color:var(--ink-faint);font-size:12.5px;text-align:right;}
.log-row .desc{color:var(--ink-dim);font-size:14.5px;}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px;}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
th{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
td{color:var(--ink-dim);}
tr:hover td{color:var(--ink);}

/* ---------- callout ---------- */
.callout{
  background:var(--bg-3);
  border-left:3px solid var(--coral);
  border-radius:0 8px 8px 0;
  padding:18px 22px;
  font-size:14.5px;color:var(--ink-dim);
  margin-bottom:24px;
}
.callout strong{color:var(--ink);}

.callout.acid{border-left-color:var(--acid);}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:40px 0 30px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);
}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
footer a{color:var(--ink-faint);}
footer a:hover{color:var(--acid);}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin-bottom:18px;}
.crumb a{color:var(--ink-faint);}
.crumb a:hover{color:var(--acid);}

/* ---------- song list ---------- */
.song{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.song:last-child{border-bottom:none;}
.song .title{color:var(--ink);font-weight:600;}
.song .sub{color:var(--ink-faint);font-size:12.5px;font-family:var(--mono);}
.song .tag{
  font-family:var(--mono);font-size:11px;color:var(--acid);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;
}