/* ============================================
   MIRANNACULT — HACKER TERMINAL THEME
   Change the colors below to re-theme everything.
   ============================================ */
:root {
  --bg: #030604;          /* near-black with a green tint */
  --panel: #06120a;       /* card background */
  --text: #b6ffce;        /* phosphor green text */
  --dim: #4e8a63;         /* softer green */
  --accent: #00ff66;      /* bright terminal green */
  --accent2: #ff3fd8;     /* glitch pink (for 18+/merch) */
  --border: #0f3a20;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Courier New", ui-monospace, monospace;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* ---- CRT scanlines over the whole page ---- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 255, 102, 0.03) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
  z-index: 999;
}
/* soft green glow vignette */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  z-index: 998;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 80px; }

/* ---- header / glitch title ---- */
header { text-align: center; padding: 32px 0 8px; }

.glitch {
  font-size: 2.1rem;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,255,102,.6), 0 0 24px rgba(0,255,102,.25);
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
}
.glitch::before {
  color: var(--accent2);
  transform: translate(-2px, -1px);
  clip-path: inset(0 0 55% 0);
  animation: glitchy 3s infinite linear alternate;
}
.glitch::after {
  color: #67ffe7;
  transform: translate(2px, 1px);
  clip-path: inset(55% 0 0 0);
  animation: glitchy 2.3s infinite linear alternate-reverse;
}
@keyframes glitchy {
  0%, 92% { transform: translate(0,0); opacity: .7; }
  94% { transform: translate(-3px, 1px); }
  96% { transform: translate(3px, -1px); }
  98% { transform: translate(-1px, 2px); }
  100% { transform: translate(0,0); }
}

/* blinking cursor after the title */
.glitch + .cursor::after,
.tagline::after {
  content: "█";
  color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
  margin-left: 4px;
}
@keyframes blink { 50% { opacity: 0; } }

.tagline { color: var(--dim); margin-top: 4px; }
.tagline::before { content: "> "; color: var(--accent); }

/* ---- nav styled like terminal commands ---- */
nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin: 20px 0 28px;
}
nav a {
  color: var(--dim); text-decoration: none;
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 2px; font-size: .85rem;
  background: rgba(0,255,102,.02);
}
nav a::before { content: "./"; opacity: .7; }
nav a:hover, nav a.here {
  color: var(--accent); border-color: var(--accent);
  text-shadow: 0 0 6px rgba(0,255,102,.7);
}

/* ---- cards styled like terminal windows ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 0 12px rgba(0,255,102,.05) inset;
}
.card h2 {
  color: var(--accent); font-size: 1rem; margin-bottom: 10px;
  text-transform: lowercase; letter-spacing: 1px;
}
.card h2::before { content: "root@mirannacult:~$ "; color: var(--dim); font-weight: normal; }
.card p { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }

.bigbtn {
  display: block;
  background: var(--panel);
  border: 1px solid var(--accent);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  padding: 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 1rem;
  transition: transform .1s, box-shadow .1s;
}
.bigbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(0, 255, 102, .35);
  text-shadow: 0 0 6px rgba(0,255,102,.8);
}
.bigbtn small { display: block; color: var(--dim); font-size: .78rem; }

.bigbtn.merch, .bigbtn.nsfw { border-color: var(--accent2); }
.bigbtn.merch:hover, .bigbtn.nsfw:hover { box-shadow: 0 0 16px rgba(255, 63, 216, .35); }

/* ---- live badge ---- */
.live {
  display: inline-block;
  background: #ff2d55; color: white;
  padding: 2px 10px; border-radius: 2px;
  font-size: .75rem; font-weight: bold;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: .55; } }

/* ---- 18+ section ---- */
.adult { border: 1px dashed var(--accent2); padding: 16px; border-radius: 4px; margin-bottom: 16px; }
.adult .warn { color: var(--accent2); font-size: .8rem; letter-spacing: 2px; text-align: center; margin-bottom: 12px; }

/* ---- announcement / archive lists ---- */
.post { border-left: 2px solid var(--accent); padding-left: 14px; margin-bottom: 22px; }
.post .date { color: var(--dim); font-size: .8rem; }
.post .date::before { content: "[ "; }
.post .date::after { content: " ]"; }
.post h3 { color: var(--text); margin: 2px 0 6px; }

ul.linklist { list-style: none; }
ul.linklist li { margin-bottom: 10px; }
ul.linklist li::before { content: ">> "; color: var(--dim); }
ul.linklist a { color: var(--accent); text-decoration: none; }
ul.linklist a:hover { text-shadow: 0 0 6px rgba(0,255,102,.8); }

footer {
  text-align: center; color: var(--dim);
  font-size: .78rem; margin-top: 40px;
}
footer a { color: var(--dim); }
footer p::before { content: "[EOF] "; opacity: .6; }

/* ---- QR tool ---- */
.qrbox { text-align: center; }
.qrbox input, .qrbox select {
  width: 100%; padding: 10px; margin-bottom: 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 2px;
  font-family: inherit;
}
.qrbox button {
  background: var(--accent); color: #000; border: none;
  padding: 10px 24px; border-radius: 2px; cursor: pointer;
  font-family: inherit; font-weight: bold;
}
#qrcode { display: inline-block; background: white; padding: 12px; border-radius: 4px; margin-top: 16px; }

/* ---- gospel entries: shown EXACTLY as typed ---- */
pre.gospel {
  font-family: inherit;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
  text-shadow: 0 0 4px rgba(0,255,102,.25);
}

/* force decorative glyphs to occupy exactly one character cell,
   so ASCII borders line up no matter how wide the symbol draws */
pre.gospel .g {
  display: inline-block;
  width: 1ch;
  overflow: visible;
}