/* ────────────────────────────────────────────────────────────────
   Sisi’s Archive · CRT theme v9
   – v8 colour scheme & boxes
   – copy-friendly multi-panel layout
   – CRT overlays cranked up for visibility
   ──────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* =====  palette  ===== */
:root{
  --magenta:#c95eff;
  --cyan:   #7df9ff;
  --bg:     #05050a;
  --p1:     #10111c;
  --p2:     #171828;
  --text:   #e8e8e8;
  --muted:  #9aa0a6;
  --stroke: rgba(201,94,255,.65);
  --r:      14px;
  --font:   'Share Tech Mono',monospace;
}

/* =====  reset  ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  overflow-x:hidden;
}

/* ╔══════════  CRT overlays  ══════════╗ */
body.crt::before{                         /* bold scan-lines */
  content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
              to bottom,
              rgba(255,255,255,.18) 0 1px,
              transparent 1px 4px);
  mix-blend-mode:overlay;
  opacity:.45;                            /* ← turn down later if too strong */
  animation:scan 12s linear infinite;
}
body.crt::after{                          /* cyan bloom */
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(1600px 1000px at 50% -20%,
              rgba(125,249,255,.16),transparent 80%);
  opacity:.8;
}
.grain{                                   /* chunky static */
  position:fixed;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  opacity:.16;
  mix-blend-mode:overlay;
  animation:grain 2s steps(2) infinite;
}

@keyframes scan {to{background-position-y:800px}}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(1px,-1px)}
  75%{transform:translate(-1px,-1px)}
}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.85}98%{opacity:.95}99%{opacity:.9}}
@keyframes aberr{
  0%,100%{text-shadow:2px 0 rgba(255,59,141,.6),-2px 0 rgba(125,249,255,.6),0 0 14px rgba(201,94,255,.5)}
  50%     {text-shadow:4px 0 rgba(255,59,141,.5),-4px 0 rgba(125,249,255,.5),0 0 26px rgba(201,94,255,.8)}
}

/* ╔══════════  window / panel  ══════════╗ */
.window,.panel,.header,.footer{
  position:relative;
  padding:16px;
  background:linear-gradient(180deg,var(--p1),var(--p2));
  border:2px solid var(--stroke);         /* solid inner */
  border-radius:var(--r);
  box-shadow:
     0 0 0 1px rgba(201,94,255,.1) inset,
     0 12px 32px rgba(0,0,0,.45),
     0 0 20px rgba(201,94,255,.18);
  animation:flicker 6s steps(3,end) infinite;
}
/* outer neon bezel */
.window::before,.panel::before,.header::before,.footer::before{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  border:3px solid var(--stroke);
  border-radius:calc(var(--r) + 5px);
  filter:drop-shadow(0 0 8px var(--magenta));
}

/* =====  header / nav  ===== */
.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.logo{
  margin:0;font-size:1.9rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  animation:aberr 10s ease-in-out infinite,flicker 9s linear infinite;
}
.logo small{display:block;font-size:.9rem;color:var(--muted);margin-top:3px}
.menu-toggle{
  display:none;padding:6px 10px;border-radius:10px;background:#141428;color:#fff;
  border:1px solid var(--stroke);
}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
  padding:6px 10px;border-radius:10px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,#141428,#0e0f18);
  box-shadow:0 0 8px rgba(201,94,255,.25);
  transition:.15s box-shadow;
}
.nav a:hover{
  box-shadow:0 0 12px var(--cyan),0 0 28px rgba(201,94,255,.3);
}

/* =====  grid & content  ===== */
.ui-container{max-width:1260px;margin:0 auto;padding:16px}
.main-grid{display:grid;grid-template-columns:300px 1fr 300px;gap:16px;margin-top:16px}
.panel+.panel{margin-top:14px}
.panel-title{margin:0 0 8px;color:#fff;letter-spacing:.06em}
.image-panel img,.main-display img{
  width:100%;display:block;border-radius:10px;background:#0c0d15;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 18px rgba(201,94,255,.14);
}

/* hero artwork */
.hero{
  display:block;margin:0 auto;border-radius:10px;max-width:100%;
  background:#0c0d15;
  border:2px solid rgba(255,255,255,.09);
  box-shadow:0 0 22px rgba(201,94,255,.12);
}

/* kv banner */
.kv{
  display:grid;place-items:center;min-height:240px;text-align:center;padding:28px 18px;
  background:linear-gradient(180deg,#131427,#0c0d18);
  border:2px solid var(--stroke);
  border-radius:var(--r);
  box-shadow:0 0 28px rgba(201,94,255,.15);
  animation:flicker 8s steps(2) infinite;
}
.kv h2{margin:0 0 10px;font-size:1.35rem;color:#fff}
.kv p{margin:0 auto;max-width:60ch;color:var(--muted)}

.list,.list li{list-style:none;margin:0;padding:0}
.list li+li{margin-top:6px}

.badge{
  display:inline-block;padding:4px 8px;border-radius:999px;font-size:.85rem;color:var(--magenta);
  background:#10111c;border:1px solid var(--stroke);
  box-shadow:0 0 12px rgba(201,94,255,.3);
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.footer{margin-top:18px;padding:10px 12px;text-align:center;font-size:.9rem;color:var(--muted)}

/* =====  mobile  ===== */
@media(max-width:980px){
  .main-grid{grid-template-columns:1fr}
  .nav{display:none;width:100%}
  .nav.open{display:flex}
  .menu-toggle{display:inline-block}
}