/* ===========================
   RetroCrave — style.css (v15)
   =========================== */

:root{
  --bg:#0e0b16; --ink:#f5f7ff; --muted:#b7b9d4;
  --accent:#ff6bd6; --accent-2:#5ef1ff; --accent-3:#ffe66b;
  --card:#16132b; --glow:0 0 24px rgba(255,107,214,.35), 0 0 64px rgba(94,241,255,.25);
  --radius:20px;

  --retro-bg:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,107,214,.20), transparent 60%),
    radial-gradient(1200px 600px at 80% 0%, rgba(94,241,255,.18), transparent 55%),
    radial-gradient(1000px 800px at 50% 90%, rgba(255,230,107,.15), transparent 60%),
    linear-gradient(180deg, #100d25 0%, #0e0b16 60% 100%);
}

/* Base + scrollbar behavior */
html,body{height:100%}
html{
  background:#0e0b16;
  /* Reserve gutter only on the scrollbar side (right) */
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; } /* reserve space on older browsers */
}
body{
  margin:0; color:var(--ink);
  background:var(--retro-bg);
  font:16px/1.6 ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Color Emoji","Apple Color Emoji",sans-serif;
  overflow-x:hidden;
}
/* Paint backdrop as a fixed layer (prevents white flashes) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:var(--retro-bg); pointer-events:none;
}

/* Scanlines overlay */
.scanlines{
  position:fixed; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.6;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px)
}

/* ===== Layout ===== */
.layout{
  min-height:100svh;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:clamp(16px,2.5vw,28px);
  padding:clamp(24px,4vw,64px);
}

/* Hard-center the whole frame on desktop (Windows/Chrome friendly) */
@media (min-width:1024px){
  .layout{
    grid-template-columns:260px 1fr;
    gap:48px;                          /* visual gutter between sidebar & card */
    max-width:1288px;                   /* 260 + 48 + 980 */
    margin-left:auto;
    margin-right:auto;
    padding-inline:24px;                /* symmetric breathing space */
  }
}

@media (max-width:920px){
  .layout{ grid-template-columns:1fr; padding-top:12px; }
}

/* ===== Topbar (mobile only) ===== */
.topbar{ display:none; }
@media (max-width:920px){
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    position:sticky; top:0; z-index:1002; padding:10px 14px; margin:8px 12px 0;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .brand--mini{
    font-weight:900; letter-spacing:.4px; font-size:1.05rem;
    background:linear-gradient(90deg,var(--accent),var(--accent-2) 60%,var(--accent-3));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}

/* ===== Menu button (mobile) ===== */
.menu-btn{ display:none; }
@media (max-width:920px){
  .menu-btn{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.55rem .8rem; border-radius:12px; border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(180deg,#5ef1ff,#33e0ef); color:#0b0b12; font-weight:800; cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 18px rgba(94,241,255,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
  }
  .menu-icon{ width:18px; height:12px; position:relative; display:inline-block; }
  .menu-icon::before,.menu-icon::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#0b0b12; border-radius:2px;
  }
  .menu-icon::before{ top:0 } .menu-icon::after{ bottom:0 }
}

/* ===== Drawer overlay ===== */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:1000;
}
.drawer-overlay.open{ opacity:1; visibility:visible; }

/* ===== Sidebar ===== */
.sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.35);
  padding:16px 14px; position:sticky; top:24px; height:fit-content; z-index:1;
}
.brand{
  display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.4px; margin:4px 6px 10px; font-size:1.2rem;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 60%,var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pill{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); padding:.28rem .6rem; border-radius:999px; font-weight:700; font-size:.82rem; margin:4px 6px 12px;
}
.pill .dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(255,107,214,.8); }
.nav{ list-style:none; margin:6px 0 0; padding:0; }
.nav a{
  display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink); opacity:.92;
  padding:.55rem .65rem; border-radius:10px; border:1px solid transparent;
}
.nav a:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); }
.nav a.active{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); border-color:rgba(255,255,255,.14); }

/* Sidebar becomes a drawer on mobile */
@media (max-width:920px){
  .sidebar{
    position:fixed; left:0; top:0; height:100vh; width:min(84vw,320px);
    transform:translate3d(-105%,0,0); will-change:transform; transition:transform .25s ease;
    z-index:1001; overflow-y:auto; padding:18px;
  }
  .sidebar.open{ transform:translate3d(0,0,0); }
  body.no-scroll{ overflow:hidden; height:100%; }
  .sidebar .close-btn{ display:inline-flex; }
}
.close-btn{
  display:none; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:8px; margin:2px 0 8px 6px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--ink); font-weight:900;
}

/* ===== Main card ===== */
.card{
  width:100%;
  max-width:980px;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius:var(--radius);
  box-shadow: 0 0 18px rgba(255,107,214,.28), 0 0 42px rgba(94,241,255,.18); /* softer glow */
  isolation:isolate;
  padding:clamp(20px,4vw,40px); position:relative; overflow:hidden;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* original angled shine – kept */
.shine{
  position:absolute; inset:-40% -40% auto auto; rotate:-18deg; width:120%; height:18%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent 70%);
  filter:blur(10px); pointer-events:none;
}

/* ===== Page head ===== */
header.page-head{ display:grid; gap:.75rem; justify-items:center; text-align:center; margin-bottom:.25rem; }
.logo{
  font-size:clamp(2.4rem,6.5vw,5rem); font-weight:900; letter-spacing:.5px; line-height:1.05;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 60%,var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 24px rgba(255,107,214,.35);
}
@supports not (-webkit-background-clip:text){
  .logo{ background:none; color:var(--ink); text-shadow:none; }
}
.tag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);padding:.4rem .75rem;border-radius:999px;font-weight:700;font-size:.9rem}
.tag .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(255,107,214,.8)}

.lead{ max-width:60ch; color:var(--muted); margin:.2rem auto 1.2rem auto; font-size:clamp(1.02rem,1.4vw,1.15rem); }

/* ===== Buttons ===== */
.cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1rem 0 1.6rem; }
.btn{
  --btn-bg:linear-gradient(180deg,#ff6bd6,#ff4acb);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.1rem; border-radius:14px; text-decoration:none; color:#0b0b12; font-weight:800; background:var(--btn-bg);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px rgba(255,75,204,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
}
.btn.alt{ --btn-bg:linear-gradient(180deg,#5ef1ff,#33e0ef); }
.btn.small{ padding:.6rem .85rem; font-size:.95rem; border-radius:12px; }

/* ===== Content panels ===== */
.panels{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:.75rem; }
@media (min-width:860px){ .panels{ grid-template-columns:1fr 1fr; } }
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.panel h2{ font-size:1.1rem; margin:.2rem 0 .4rem 0; }
.panel p{ margin:.25rem 0; color:var(--muted); }
.list{ margin:.5rem 0 .25rem 0; padding-left:1.1rem; color:var(--muted); }
.list li{ margin:.35rem 0; }

/* ===== Footer ===== */
footer.site-foot{ margin-top:1.25rem; display:grid; gap:.6rem; justify-items:center; text-align:center; color:var(--muted); }
footer.site-foot a{ color:var(--ink); opacity:.9; }
.egg{ font-size:.85rem; opacity:.8; }

/* ===== Copyable code boxes ===== */
.codebox{ position:relative; margin:.75rem 0 1rem; border-radius:12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 20px rgba(0,0,0,.25); overflow:auto }
.codebox pre{ margin:0; padding:14px 48px 14px 14px; font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--ink); }
.copy-btn{
  position:absolute; top:8px; right:8px; z-index:2; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .6rem;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,#5ef1ff,#33e0ef); color:#0b0b12; font-weight:800;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 16px rgba(94,241,255,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
}
.copy-btn.copied{ background:linear-gradient(180deg,#ff6bd6,#ff4acb); }
.copy-badge{
  position:absolute; top:10px; left:10px; font-weight:700; font-size:.75rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  padding:.15rem .5rem; border-radius:999px; color:var(--muted);
}

/* ===== A11y ===== */
a:focus-visible, button:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }

/* ===== Perfect centering on desktop (Windows/Chrome friendly) ===== */
@media (min-width:1024px){
  /* Center the sidebar + card as a single block */
  .layout{
    display:flex;                    /* override grid on large screens */
    justify-content:center;          /* center the whole pair */
    align-items:flex-start;
    gap: clamp(32px, 4vw, 48px);     /* same visual gutter as before */
    margin-inline:auto;              /* center the container itself */
    max-width:none;                  /* let flex do the centering */
  }
  /* Fixed sidebar width, keeps sticky behavior */
  .layout > .sidebar{
    flex: 0 0 260px;                 /* exact width */
  }
  /* Main card takes up to 980px, then stops */
  .layout > .card{
    flex: 0 1 980px;                 /* grow up to 980, then cap */
    max-width:980px;
    width:100%;
    margin:0;                        /* no auto-centering inside needed */
  }
}

/* Keep gutter only on the real scrollbar side (right) */
html { scrollbar-gutter: stable; }    /* not both-edges */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
/* === Visual centering nudge (desktop only) === */
/* +value pushes the frame to the RIGHT, −value to the LEFT */
:root { --frame-nudge: -8px; }

@media (min-width:1024px){
  /* you’re on the flex-centering layout, so we bias the left/right padding */
  .layout{
    padding-left:  calc(24px + var(--frame-nudge));
    padding-right: calc(24px - var(--frame-nudge));
  }
}

/* Panel lists: use custom bullets only */
.panel .list{ list-style: none; margin: .5rem 0; padding-left: 1.1rem; }
.panel .list li{ position: relative; padding-left: 0.8rem; }
.panel .list li::before{
  content:""; position:absolute; left:0; top:0.78em;
  width:.38rem; height:.38rem; border-radius:50%;
  background: rgba(245,247,255,.9); box-shadow:0 0 6px rgba(245,247,255,.35);
}
/* --- Vertical rhythm between sections inside a .card --- */
.card > header.page-head{
  margin-bottom: clamp(14px, 2vw, 22px);   /* more space under the title */
}

/* gap between consecutive panels */
.card > .panel + .panel{
  margin-top: clamp(16px, 2.6vw, 28px);
}

/* if a grid block (or other section) comes before a panel, add a gap too */
.card > .grid-cards + .panel,
.card > .panels + .panel{
  margin-top: clamp(16px, 2.6vw, 28px);
}