/* =====================================================================
   VINTAGE TERMINAL STREAM PACK — shared design system (B&W hacker/spy)
   CRT-glow windows · binary rain · code type-out · classified tables
   Accent: vintage pink tags (chat only). Reskin via :root tokens.
   ===================================================================== */
:root{
  --paper:#0a0a0a;        /* background */
  --ink:#f4f4f4;          /* lines + text */
  --dim:#9a9a9a;          /* secondary text */
  --faint:#565656;        /* binary rain */
  --glow:0 0 7px rgba(255,255,255,.55);
  --pink:#e8b4b8;         /* vintage pink accent (chat tags) */
  --cream:#efe3d0;        /* cream accent */
  --term:#8dff9d;         /* terminal green (donation text) */
  --mono:'Space Mono',ui-monospace,monospace;
  --head:'Archivo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--paper);font-family:var(--mono);color:var(--ink)}

/* faint CRT vignette + noise flicker */
.crt::after{content:'';position:absolute;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.5) 100%)}
.crt::before{content:'';position:absolute;inset:0;z-index:59;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);
  animation:flick 4s steps(2) infinite}
@keyframes flick{50%{opacity:.08}}

/* ---------- glowing window ---------- */
.win{position:absolute;border:1.5px solid var(--ink);background:rgba(10,10,10,.92);
  box-shadow:var(--glow), inset 0 0 5px rgba(255,255,255,.18)}
.win .bar{height:30px;background:linear-gradient(180deg,#efefef,#c9c9c9);color:#111;
  display:flex;align-items:center;justify-content:flex-end;padding:0 10px;
  font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.04em}
.win .bar.left{justify-content:flex-start}
.win .body{position:absolute;inset:30px 0 0 0;overflow:hidden;padding:12px 14px}

/* ---------- binary rain (fill a .win .body with .bin spans via JS) ---------- */
.bin{display:block;font-size:12.5px;line-height:1.5;color:var(--faint);
  white-space:nowrap;letter-spacing:.06em}
.bin i{font-style:normal;animation:binfade var(--bd,2.4s) steps(2) infinite}
@keyframes binfade{50%{opacity:.25}}

/* ---------- typing code ---------- */
.code{font-size:12.5px;line-height:1.62;color:var(--dim);white-space:pre-wrap}
.code b{color:var(--ink);font-weight:400}

/* ---------- loading bar ---------- */
.load{border:1.5px solid var(--ink);box-shadow:var(--glow);background:#0a0a0a;
  padding:6px 9px;font-size:12px;color:var(--ink)}
.load .lab{letter-spacing:.05em;color:var(--dim)}
.load .trk{margin-top:5px;height:10px;border:1px solid var(--ink);position:relative;overflow:hidden}
.load .trk i{position:absolute;left:0;top:0;bottom:0;background:#d9d9d9;width:var(--pct,50%);
  animation:loadfill var(--ld,8s) linear infinite}
@keyframes loadfill{0%{width:2%}90%{width:97%}100%{width:97%}}

/* ---------- warning block (⚠ + binary noise) ---------- */
.warnbox{border:1.5px solid var(--ink);box-shadow:var(--glow);display:flex;align-items:center;
  gap:10px;padding:7px 12px;background:#0a0a0a}
.warnbox .tri{font-size:22px;line-height:1}
.warnbox .noise{font-size:9px;line-height:1.35;color:var(--dim);letter-spacing:.12em;white-space:pre}

/* ---------- glitch title ---------- */
.glitch{font-family:var(--head);font-weight:700;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;text-align:center;position:relative;color:var(--ink);
  text-shadow:0 0 10px rgba(255,255,255,.6)}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;opacity:0}
.glitch::before{animation:gl1 3.1s steps(1) infinite}
.glitch::after{animation:gl2 3.1s steps(1) infinite}
@keyframes gl1{92%{opacity:0;transform:none;clip-path:inset(0 0 55% 0)}
  93%{opacity:.85;transform:translate(-5px,-2px);clip-path:inset(0 0 55% 0)}
  95%{opacity:0}}
@keyframes gl2{94%{opacity:0;transform:none;clip-path:inset(55% 0 0 0)}
  95%{opacity:.85;transform:translate(5px,2px);clip-path:inset(55% 0 0 0)}
  97%{opacity:0}}

/* ---------- classified data table ---------- */
.dtable{font-size:11.5px;line-height:1.75;color:var(--dim);white-space:pre}
.dtable b{color:var(--ink);font-weight:400}

/* ---------- globe (SVG wireframe, spins) ---------- */
.globe{position:absolute}
.globe svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.6;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}
.globe .merid{animation:spin 6s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotateY(360deg)}}

/* ---------- social slot bar (icon + underline) ---------- */
.soc{position:absolute;display:flex;align-items:center;gap:12px;color:var(--ink)}
.soc svg{width:22px;height:22px;fill:var(--ink);filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}
.soc .ln{width:150px;border-bottom:1.5px solid var(--ink);box-shadow:var(--glow);height:1px}
.soc .tx{font-size:13px;letter-spacing:.1em;color:var(--dim)}