/* =========================================================
   Mayflower Studios • Unified Theme CSS (WEBSITE)
   - Website styling only
   ========================================================= */

/* -------------------------
   Theme Variables (ONE source of truth)
   ------------------------- */
:root{
  /* Forest night */
  --bg1:#060b14;        /* near-black forest */
  --bg2:#0b1022;        /* deep indigo canopy */

  /* Text */
  --text:#fff2f6;
  --muted:rgba(255,255,255,.68);

  /* Sakura + magic accents */
  --accent:#fb7185;     /* cherry blossom */
  --accent2:#fda4af;    /* soft petal */
  --good:#a78bfa;       /* moon lilac */
  --amber:#fbbf24;      /* lantern */

  /* UI */
  --border:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.45);

  /* Atmosphere */
  --leafglow: rgba(34,197,94,.08);

  /* Shape + motion */
  --radius-1: 12px;
  --radius-2: 16px;
  --radius-3: 18px;
  --radius-4: 22px;
  --lift: translateY(-1px);
  --t: .12s ease;

  /* Glass presets */
  --glass-a: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  --glass-b: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
  --glass-c: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --glass-d: rgba(0,0,0,.16);

  /* Inner tint */
  --tint-soft: rgba(253,164,175,.08);
  --tint-strong: rgba(253,164,175,.14);

  /* Fonts */
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
a{ color:inherit; }

/* -------------------------
   Background Atmosphere
   ------------------------- */
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  position: relative;

  background:
    radial-gradient(1100px 700px at 18% 8%, rgba(167,139,250,.16), transparent 60%),
    radial-gradient(900px 600px at 82% 18%, rgba(167,139,250,.10), transparent 62%),
    radial-gradient(900px 520px at 75% 22%, rgba(251,113,133,.22), transparent 60%),
    radial-gradient(700px 480px at 30% 35%, rgba(253,164,175,.14), transparent 62%),
    radial-gradient(900px 650px at 20% 88%, var(--leafglow), transparent 60%);

  min-height:100vh;
  padding:26px;
}

/* mist */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  z-index:-2;
  opacity:.55;
  background:
    radial-gradient(900px 360px at 30% 30%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(900px 360px at 70% 55%, rgba(255,255,255,.06), transparent 72%),
    radial-gradient(700px 320px at 55% 85%, rgba(255,255,255,.05), transparent 72%);
  filter: blur(1px);
}

/* petals + lantern sparks */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.25;
  background:
    radial-gradient(10px 10px at 12% 22%, rgba(253,164,175,.38), transparent 60%),
    radial-gradient(12px 12px at 28% 38%, rgba(251,113,133,.28), transparent 60%),
    radial-gradient(9px 9px at 54% 18%, rgba(253,164,175,.30), transparent 60%),
    radial-gradient(11px 11px at 76% 46%, rgba(251,113,133,.22), transparent 60%),
    radial-gradient(8px 8px at 86% 74%, rgba(253,164,175,.24), transparent 60%),
    radial-gradient(10px 10px at 22% 82%, rgba(251,113,133,.18), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(251,191,36,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 22%, rgba(251,191,36,.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 68%, rgba(251,191,36,.32), transparent 60%),
    radial-gradient(1.1px 1.1px at 35% 75%, rgba(251,191,36,.28), transparent 60%);
  filter: blur(0.2px);
}

/* wallpaper */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,11,20,.72), rgba(11,16,34,.72)),
    url("/assets/cherry-bg.png") center / cover no-repeat;
  transform: translateZ(0);
}

#fireflies{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* -------------------------
   Layout + type helpers
   ------------------------- */
.wrap{
  width: min(980px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 18px; /* spacing between hero + cards */
}

/* (Old spacing rules removed; the rule above replaces them) */
/* .wrap > .grid2{ margin-bottom: 18px; } */
/* .wrap > .card{ margin-bottom: 18px; } */

h1,h2,h3{ margin:0; letter-spacing:.2px; }
ul{ margin:0; padding-left:18px; }
li{ color:var(--muted); line-height:1.7; margin:6px 0; }

.muted{ margin:0; color:var(--muted); line-height:1.7; }
.small{ font-size:14px; line-height:1.55; }

.kicker{
  color:rgba(255,255,255,.78);
  font-size:12px;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 0 8px;
}

hr.sep{
  border:0;
  height:1px;
  background:var(--border);
  margin:14px 0;
  opacity:.9;
}

/* -------------------------
   Topbar
   ------------------------- */
.topbar{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius: var(--radius-3);
  background: var(--glass-a);
  backdrop-filter: blur(12px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.40),
    0 0 0 1px var(--tint-soft) inset;
}

.topbar::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(251,113,133,.40),
    rgba(167,139,250,.28),
    transparent
  );
  opacity:.55;
}

.brand{ display:flex; flex-direction:column; gap:2px; }
.brand strong{
  font-size:14px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.brand span{ font-size:12px; color:var(--muted); }
.brandLink{ text-decoration:none; color:inherit; }

.nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.pill{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:650;
  font-size:13px;
  transition: transform var(--t), filter var(--t);
}
.pill:hover{ transform: var(--lift); filter: brightness(1.06); }
.pill.active{
  border-color: rgba(253,164,175,.40);
  background: rgba(253,164,175,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

/* -------------------------
   Hero
   ------------------------- */
.hero{
  margin-top:16px;
  /* ✅ extra bottom air; safe even with wrap stacking rule */
  margin-bottom: 0;
  padding:18px 16px;
  border:1px solid var(--border);
  border-radius: var(--radius-4);
  background: var(--glass-b);
  backdrop-filter: blur(12px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.40),
    0 0 0 1px var(--tint-soft) inset;

  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
}
.hero h1{ font-size: clamp(28px, 3.6vw, 44px); }
.hero .muted{ max-width: 75ch; }

.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.btn{
  text-decoration:none;
  font-weight:800;
  padding:12px 14px;
  border-radius: var(--radius-1);
  border:1px solid rgba(255,255,255,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform var(--t), filter var(--t);
  min-width: 170px;
}
.btn:hover{ transform: var(--lift); filter: brightness(1.06); }

/* Sakura + moonlight buttons */
.btn.primary{ color:#1a1020; background: linear-gradient(90deg, var(--accent), var(--good)); }
.btn.ghost{ color:var(--text); background: rgba(255,255,255,.06); border:1px solid var(--border); }
.btn.bots{ color:#1a1020; background: linear-gradient(90deg, var(--accent2), var(--accent)); }

/* Tiles */
.tileGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 560px){
  .tileGrid{ grid-template-columns: 1fr; }
}
.tile{
  border:1px solid var(--border);
  border-radius: var(--radius-3);
  background: rgba(0,0,0,.16);
  padding:14px;
  box-shadow: 0 0 0 1px rgba(251,113,133,.06) inset;
}
.tile strong{ display:block; margin-bottom:6px; }
.tile p{ margin:0; color:var(--muted); line-height:1.55; font-size:14px; }

/* -------------------------
   Sections
   ------------------------- */
.sectionTitle{
  margin:18px 0 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.sectionTitle h2{ margin:0; font-size:18px; }
.sectionTitle h2::after{
  content:"";
  display:block;
  height:2px;
  width:64px;
  margin-top:8px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), rgba(167,139,250,.25), transparent);
  opacity:.95;
}
.sectionTitle span{ color:var(--muted); font-size:13px; }

/* -------------------------
   Cards / grids
   ------------------------- */
.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 760px){
  .grid2{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius-3);
  padding:18px;
  background: var(--glass-c);
  backdrop-filter: blur(12px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.40),
    0 0 0 1px rgba(253,164,175,.06) inset;
}
.card:hover{
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px var(--tint-strong) inset;
}

.card h3{
  margin:0 0 6px;
  font-size:22px;
  display:flex;
  gap:10px;
  align-items:center;
}

.badge{
  font-size:12px;
  color:rgba(255,255,255,.86);
  border:1px solid var(--border);
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}
.desc{ margin:0 0 14px; color:var(--muted); line-height:1.6; }

/* Buttons inside cards */
.btnrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

a.button{
  text-decoration:none;
  color:#1a1020;
  font-weight:800;
  padding:12px 14px;
  border-radius: var(--radius-1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.18);
  transition: transform var(--t), filter var(--t);
  min-width: 190px;
}
a.button:hover{ transform: var(--lift); filter: brightness(1.06); }

a.mods{ background: linear-gradient(90deg, var(--accent2), var(--good)); }
a.bots{ background: linear-gradient(90deg, var(--accent), var(--accent2)); }
a.ghost{
  color:var(--text);
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  font-weight:750;
}
a.disabled {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

.callout{
  border:1px solid var(--border);
  background: rgba(0,0,0,.14);
  border-radius: var(--radius-2);
  padding:14px;
}
.callout strong{ display:block; margin-bottom:6px; }

.codebox{
  margin-top:10px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.20);
  border-radius: 14px;
  padding:12px;
  overflow:auto;
}
.codebox code{
  color: rgba(255,255,255,.9);
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre;
}

/* -------------------------
   Media / icon gallery
   ------------------------- */
.mediaHeader{ display:flex; gap:14px; align-items:center; }

.projectIcon{
  width:64px;
  height:64px;
  border-radius: var(--radius-2);
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  object-fit: cover;
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
}

.mediaMeta strong{ display:block; font-size:16px; margin-bottom:2px; }
.mediaMeta span{ display:block; color:var(--muted); font-size:13px; }

.gallery{
  margin-top:14px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap:12px;

  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar{ height: 8px; }
.gallery::-webkit-scrollbar-track{ background: transparent; }
.gallery::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr; }
}

.shot{
  border:1px solid var(--border);
  border-radius: var(--radius-2);
  overflow:hidden;
  background: rgba(0,0,0,.16);
  scroll-snap-align: start;
  flex-shrink: 0;
}
.shot img{
  width:100%;
  height:180px;
  object-fit: cover;
  display:block;
}
.shot .cap{
  padding:10px 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* -------------------------
   Footer
   ------------------------- */
footer{
  text-align:center;
  margin-top:18px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  padding:14px 0 6px;
}
.links{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.links a{
  text-decoration:none;
  color:rgba(255,255,255,.75);
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding:8px 10px;
  border-radius:999px;
}

/* ===========================
   Server page: modlist scroll
   =========================== */
body[data-nav="server"] .tableScroll{
  max-height: 520px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
}
body[data-nav="server"] .tableScroll .table{ border: 0; }

/* sticky table header */
body[data-nav="server"] .tableScroll .table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(6px);
}

/* category bar scroll */
body[data-nav="server"] .categoryBar{
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
body[data-nav="server"] .categoryBar > *{ flex: 0 0 auto; }
body[data-nav="server"] .categoryBar::-webkit-scrollbar{ height: 10px; }
body[data-nav="server"] .categoryBar::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}