/* ════════════════════════════════════════════════
   GINGUGU.COM — base: tokens, type, CRT, dial-in, menu, footer
   The 16-color DOS set plus amber phosphor; js/palette.js mirrors it.
   ════════════════════════════════════════════════ */

:root {
  --bg: #05030c;
  --panel: #0a0716;
  --ink: #d6d3e6;
  --dim: #8a86a3;
  --amber: #ffb000;
  --cyan: #55ffff;
  --magenta: #ff55ff;
  --green: #55ff55;
  --red: #ff5555;
  --yellow: #ffff55;
  --blue: #5555ff;
  --violet: #aa55ff;
  --orange: #ff8c1a;
  --grey: #aaaaaa;
  --edge: #2a2350;
  --pixel: "VT323", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.7 var(--mono);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--yellow); text-shadow: 0 0 8px currentColor; }
code { color: var(--amber); font-family: var(--mono); font-size: 0.95em; }
em { color: var(--cyan); font-style: normal; }
.dim { color: var(--dim); }
::selection { background: var(--magenta); color: #000; }

/* a slow drifting star layer behind everything below the hero */
body::before {
  content: "";
  position: fixed;
  inset: -50% 0 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff8, transparent),
    radial-gradient(1px 1px at 70% 40%, #5ff8, transparent),
    radial-gradient(1.5px 1.5px at 35% 75%, #f5f8, transparent),
    radial-gradient(1px 1px at 85% 85%, #fff6, transparent),
    radial-gradient(1px 1px at 55% 10%, #ffb8, transparent);
  background-size: 340px 340px, 420px 420px, 520px 520px, 260px 260px, 600px 600px;
  animation: drift 120s linear infinite;
}
@keyframes drift { to { transform: translateY(50%); } }

/* cursor sparks (js/fx/trail.js) */
.trail { position: fixed; inset: 0; z-index: 85; pointer-events: none; }

/* memory-type colors, shared with the Explorer legend */
.t-fact { color: var(--blue); }
.t-decision { color: var(--violet); }
.t-bug { color: var(--red); }
.t-pattern { color: var(--orange); }
.t-arch { color: #00d0d0; }
.t-context { color: var(--grey); }
.t-pref { color: var(--magenta); }
.t-workflow { color: var(--green); }
.t-cap { color: var(--yellow); }
i[class^="t-"] { font-style: normal; }

/* ──────────── CRT: scanlines, glow, vignette ──────────── */
.crt {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  animation: flicker 4s infinite steps(1);
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.92; }
  48% { opacity: 1; }
  83% { opacity: 0.95; }
}

/* ──────────── dial-in overlay ──────────── */
.dial {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  cursor: pointer;
  transition: opacity 0.6s, transform 0.6s, filter 0.6s;
}
.dial-log {
  font: clamp(16px, 2.6vw, 26px)/1.35 var(--pixel);
  color: var(--grey);
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 60ch;
  margin: 0 auto;
  width: 100%;
}
.dial-log::after { content: "█"; animation: blink 0.8s steps(1) infinite; color: var(--amber); }
.d-ok { color: var(--green); }
.d-hot { color: var(--amber); text-shadow: 0 0 10px var(--amber); }
.d-noise { color: var(--magenta); }
.dial-skip {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font: 18px var(--pixel);
  color: var(--dim);
  animation: blink 1.2s steps(1) infinite;
}
.dial-out { opacity: 0; transform: scaleY(0.005) scaleX(1.2); filter: brightness(4); }
body.dialing { overflow: hidden; }

@keyframes blink { 50% { opacity: 0; } }

/* ──────────── BBS menu bar ──────────── */
.menu {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  gap: 4px 14px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px var(--gutter);
  background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.88) 100%);
  border-bottom: 2px solid var(--blue);
  box-shadow: 0 2px 0 #000, 0 4px 24px rgba(85, 85, 255, 0.25);
  font: 20px/1 var(--pixel);
  white-space: nowrap;
}
.menu::-webkit-scrollbar { display: none; }
.menu-title {
  color: #000;
  background: var(--cyan);
  padding: 2px 8px;
  margin-right: 6px;
}
.menu a { color: var(--grey); padding: 2px 4px; }
.menu a b { color: var(--yellow); font-weight: normal; }
.menu a:hover,
.menu a.active { background: var(--blue); color: #fff; text-shadow: none; }
.menu a.active b { color: var(--yellow); }


/* ──────────── footer ──────────── */
footer {
  text-align: center;
  padding: 48px var(--gutter) 64px;
  font: 20px/1.5 var(--pixel);
  color: var(--grey);
}
.footer-line { color: var(--blue); overflow: hidden; white-space: nowrap; }
footer .dim { font-size: 17px; }
.egg {
  margin-top: 16px;
  color: var(--amber);
  font: 22px/1.3 var(--pixel);
  white-space: pre-wrap;
  text-shadow: 0 0 12px var(--amber);
}

/* konami party mode */
body.party main { animation: party 2.4s linear infinite; }
@keyframes party { to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}