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

:root {
  --fg: #00ff66;
  --fg-dim: #66ff66;
  --accent: #00ff66;
  --accent2: #00ffaa;
  --panel: rgba(0,255,102,0.08);
  --panel-border: rgba(0,255,102,0.35);
}
:root[data-theme="amber"] {
  --fg: #ffcc66; --fg-dim: #ffd98a; --accent: #ffcc66; --accent2: #ffe29c;
  --panel: rgba(255,204,102,0.08); --panel-border: rgba(255,204,102,0.35);
}
:root[data-theme="white"] {
  --fg: #e8f6ff; --fg-dim: #cfe8f5; --accent: #e8f6ff; --accent2: #ffffff;
  --panel: rgba(232,246,255,0.06); --panel-border: rgba(232,246,255,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:var(--fg);font-family:'VT323',monospace;
  text-transform:uppercase;letter-spacing:1px;font-size:18px;line-height:1.8;
  text-shadow:0 0 2px currentColor,0 0 6px currentColor;
}

/* scanlines + noise */
.scanline{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(to bottom,
    color-mix(in srgb,currentColor 9%,transparent) 0px,
    color-mix(in srgb,currentColor 9%,transparent) 2px,
    transparent 3px,transparent 5px);
  mix-blend-mode:screen;opacity:.35;animation:scan-jitter 3.2s infinite;
}
@keyframes scan-jitter{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
.noise{position:fixed;inset:0;pointer-events:none;z-index:2;
  background-image:radial-gradient(circle at 1px 1px,currentColor .3px,transparent .3px);
  background-size:2px 2px;opacity:.05;mix-blend-mode:screen;
}
.page::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 58%,
    rgba(0,0,0,.38) 78%,
    rgba(0,0,0,.78) 100%);
  mix-blend-mode:multiply;
}

/* navbar */
.navbar{position:sticky;top:0;z-index:5;background:rgba(0,0,0,.65);border-bottom:1px solid var(--panel-border)}
.navbar-inner{max-width:1100px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand a{color:var(--fg);text-decoration:none;font-size:28px}
.navlinks{display:flex;gap:8px}
.navlinks a{color:var(--fg);text-decoration:none;border:1px solid var(--panel-border);padding:6px 10px;border-radius:12px;font-size:16px}
.navlinks a:hover{border-color:var(--accent2);transform:translateY(-1px)}

/* hamburger (mobile) */
.hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--panel-border);border-radius:10px;background:rgba(0,0,0,.45);color:currentColor}
.hamburger span{width:18px;height:2px;background:currentColor;position:relative;display:block}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}

/* page frame */
.page{position:relative;z-index:4;padding:1rem}
.frame{max-width:1100px;margin:1.2rem auto;background:var(--panel);border:2px solid var(--panel-border);border-radius:18px;padding:1.5rem;box-shadow:0 0 24px rgba(0,0,0,.2), inset 0 0 24px color-mix(in srgb,currentColor 25%,transparent)}
.title{font-size:48px;margin:0 0 .5rem}
.subtitle{color:var(--fg-dim);font-size:18px;margin:0 0 1rem}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{display:block;color:var(--fg);text-decoration:none;background:rgba(0,0,0,.35);border:1.5px solid var(--panel-border);border-radius:16px;padding:22px;transition:.12s ease}
.card:hover{border-color:var(--accent2);transform:translateY(-2px)}

/* back button fix */
.back-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px solid var(--panel-border);border-radius:10px;background:transparent;color:var(--fg)!important;text-shadow:0 0 2px currentColor,0 0 6px currentColor;letter-spacing:0;line-height:1;font-size:18px;appearance:none;box-shadow:none;text-decoration:none;transition:border-color .12s ease,transform .1s ease}
.back-button:hover{border-color:var(--accent2);transform:translateY(-1px)}

/* footer */
.footer{border-top:1px dashed var(--panel-border);margin-top:1rem;padding-top:.8rem;font-size:16px;color:var(--fg-dim);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* subtle flicker */
@keyframes crt-flicker{0%,100%{opacity:1}50%{opacity:.975}}
body{animation:crt-flicker 2.8s infinite}

/* mobile */
@media (max-width:880px){
  .navbar-inner{padding:.5rem .75rem}.brand a{font-size:24px}
  .hamburger{display:inline-flex}
  .navlinks{display:none;position:absolute;top:56px;left:0;right:0;padding:.5rem;gap:8px;background:rgba(0,0,0,.9);border-bottom:1px solid var(--panel-border);flex-wrap:wrap;justify-content:center}
  .navbar.open .navlinks{display:flex}
  .navlinks a{font-size:14px;padding:6px 10px}
  .title{font-size:36px}.subtitle{font-size:14px}
  .grid{grid-template-columns:1fr}
  .scanline{opacity:.22}.page::before{display:none}
}


/* theme-colored links (no default blue) */
a, .content a, .card a {
  color: var(--fg);
}
a:hover, .content a:hover, .card a:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}