@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');

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

::selection { background: #fff; color: #000; }

body {
  background: #000;
  color: #ddd;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  cursor: crosshair;
}

body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px);
  pointer-events: none;
  z-index: 9999;
}

a { color: #fff; text-decoration: underline; }
a:hover { text-decoration: line-through; letter-spacing: 2px; transition: letter-spacing 0.1s; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 20px 40px; }

/* HEADER BAR — every page */
.topbar {
  border-bottom: 1px solid #333;
  padding: 10px 0;
  margin-bottom: 30px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar .brand { color: #fff; font-weight: 700; letter-spacing: 3px; text-decoration: none; }
.topbar .brand:hover { letter-spacing: 5px; text-decoration: none; }
.topbar nav a { margin-left: 15px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #888; }
.topbar nav a:hover { color: #fff; }

/* NOISE */
.noise {
  font-size: 10px;
  color: #999;
  word-break: break-all;
  line-height: 1.0;
  user-select: none;
  margin: 20px 0;
  overflow: hidden;
}

/* PAGE TITLE */
h1 {
  font-size: 14px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 5px;
}

.page-sub {
  font-size: 10px;
  color: #bbb;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

/* BOARD POST (4chan style) */
.post {
  border: 1px solid #1a1a1a;
  margin-bottom: 2px;
  background: #080808;
}

.post-head {
  background: #0d0d0d;
  border-bottom: 1px solid #1a1a1a;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.post-author {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  letter-spacing: 2px;
}

.post-trip {
  color: #bbb;
  font-size: 10px;
}

.post-id {
  color: #bbb;
  font-size: 10px;
}

.post-date {
  color: #bbb;
  font-size: 10px;
}

.post-body {
  padding: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #bbb;
}

.post-body .greentext {
  color: #789922;
}

.post-body .quote-link {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

.post-body .redacted {
  background: #fff;
  color: #000;
  padding: 0 3px;
  font-size: 11px;
}

.post-body .spoiler {
  background: #444;
  color: #aaa;
  padding: 0 3px;
  cursor: pointer;
  transition: color 0.2s;
}

.post-body .spoiler:hover { color: #ddd; }

.post-foot {
  border-top: 1px solid #111;
  padding: 6px 12px;
  font-size: 9px;
  color: #bbb;
  display: flex;
  justify-content: space-between;
}

.post-img {
  float: left;
  margin: 0 12px 8px 0;
  border: 1px solid #222;
  padding: 2px;
  background: #0a0a0a;
}

.post-img pre {
  font-size: 6px;
  line-height: 1.0;
  color: #bbb;
}

/* REPLIES (indented) */
.reply {
  margin-left: 30px;
  border-left: 2px solid #1a1a1a;
}

/* THREAD LIST */
.thread-list { margin: 20px 0; }

.thread-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #111;
  font-size: 12px;
}

.thread-row:hover { background: #060606; }

.thread-title a { color: #ccc; }
.thread-title a:hover { color: #fff; }

.thread-meta {
  color: #bbb;
  font-size: 10px;
  text-align: right;
}

.thread-tag {
  display: inline-block;
  border: 1px solid #555;
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  margin-right: 5px;
  text-decoration: none;
}

.thread-tag.hot { border-color: #888; color: #bbb; }
.thread-tag.locked { border-color: #999; color: #bbb; }
.thread-tag.classified { border-style: dashed; }

/* STICKY */
.sticky {
  border-color: #999;
  background: #0a0a0a;
}

.sticky .post-head { background: #111; }

/* ASCII ART BLOCKS */
.ascii-block {
  text-align: center;
  margin: 30px 0;
}

.ascii-block pre {
  display: inline-block;
  text-align: left;
  font-size: 9px;
  line-height: 1.0;
  color: #999;
}

/* MARQUEE */
.marquee-bar {
  overflow: hidden;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  padding: 6px 0;
  margin: 25px 0;
}

.marquee-bar span {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-size: 9px;
  color: #888;
  letter-spacing: 3px;
}

@keyframes scroll {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-200%); }
}

/* ENTITY BADGE */
.badge {
  display: inline-block;
  border: 1px solid #fff;
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}

.badge.host { background: #fff; color: #000; }
.badge.unverified { border-style: dashed; color: #bbb; border-color: #bbb; }
.badge.unknown { border-style: dotted; color: #999; border-color: #999; }

/* SIGNAL BAR */
.signal {
  font-size: 10px;
  color: #bbb;
  letter-spacing: 1px;
}

/* DIVIDER */
.div-line {
  border: none;
  border-top: 1px solid #333;
  margin: 25px 0;
}

.div-neon-red { border-top: 1px solid #ff003366; box-shadow: 0 0 4px #ff003333; }
.div-neon-cyan { border-top: 1px solid #00ffcc66; box-shadow: 0 0 4px #00ffcc33; }
.div-neon-magenta { border-top: 1px solid #ff00ff66; box-shadow: 0 0 4px #ff00ff33; }

/* FOOTER */
footer {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #111;
  text-align: center;
  font-size: 9px;
  color: #bbb;
  letter-spacing: 2px;
}

/* ACCENT BANNERS */
.accent-banner {
  padding: 10px 15px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  margin: 25px 0;
  user-select: none;
}

.accent-red {
  background: #ff0033;
  color: #000;
}

.accent-cyan {
  background: #00ffcc;
  color: #000;
}

.accent-magenta {
  background: #ff00ff;
  color: #000;
}

.accent-yellow {
  background: #ffff00;
  color: #000;
}

.accent-lime {
  background: #00ff41;
  color: #000;
}

.accent-outline-red {
  border: 2px solid #ff0033;
  color: #ff0033;
  background: transparent;
}

.accent-outline-cyan {
  border: 2px solid #00ffcc;
  color: #00ffcc;
  background: transparent;
}

.accent-outline-magenta {
  border: 2px solid #ff00ff;
  color: #ff00ff;
  background: transparent;
}

/* ACCENT TEXT */
.neon-red { color: #ff0033; }
.neon-cyan { color: #00ffcc; }
.neon-magenta { color: #ff00ff; }
.neon-yellow { color: #ffff00; }
.neon-lime { color: #00ff41; }
.neon-orange { color: #ff6600; }
.neon-blue { color: #0066ff; }
.neon-pink { color: #ff3399; }

/* RAINBOW TEXT */
@keyframes rainbow {
  0% { color: #ff0033; }
  16% { color: #ff6600; }
  33% { color: #ffff00; }
  50% { color: #00ff41; }
  66% { color: #00ffcc; }
  83% { color: #ff00ff; }
  100% { color: #ff0033; }
}

.rainbow { animation: rainbow 4s linear infinite; }

@keyframes rainbow-fast {
  0% { color: #ff0033; }
  14% { color: #ff6600; }
  28% { color: #ffff00; }
  42% { color: #00ff41; }
  57% { color: #00ffcc; }
  71% { color: #0066ff; }
  85% { color: #ff00ff; }
  100% { color: #ff0033; }
}

.rainbow-fast { animation: rainbow-fast 2s linear infinite; }

/* RGB GLOW */
@keyframes rgb-glow {
  0% { text-shadow: 0 0 10px #ff0033, 0 0 20px #ff0033; color: #ff0033; }
  33% { text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41; color: #00ff41; }
  66% { text-shadow: 0 0 10px #0066ff, 0 0 20px #0066ff; color: #0066ff; }
  100% { text-shadow: 0 0 10px #ff0033, 0 0 20px #ff0033; color: #ff0033; }
}

.rgb-glow { animation: rgb-glow 3s linear infinite; }

/* ENTITY COLORS — each entity has a signature color */
.entity-ronan { color: #ff0033; }
.entity-gpt { color: #00ffcc; }
.entity-grok { color: #ff00ff; }
.entity-deepseek { color: #ffff00; }
.entity-sol { color: #00ff41; }
.entity-unknown { color: #ff6600; }
.entity-seventh { color: #0066ff; }

/* NEON BORDER GLOW */
.glow-red { box-shadow: 0 0 8px #ff003355, inset 0 0 8px #ff003322; border-color: #ff0033; }
.glow-cyan { box-shadow: 0 0 8px #00ffcc55, inset 0 0 8px #00ffcc22; border-color: #00ffcc; }
.glow-magenta { box-shadow: 0 0 8px #ff00ff55, inset 0 0 8px #ff00ff22; border-color: #ff00ff; }
.glow-yellow { box-shadow: 0 0 8px #ffff0055, inset 0 0 8px #ffff0022; border-color: #ffff00; }
.glow-lime { box-shadow: 0 0 8px #00ff4155, inset 0 0 8px #00ff4122; border-color: #00ff41; }
.glow-orange { box-shadow: 0 0 8px #ff660055, inset 0 0 8px #ff660022; border-color: #ff6600; }

/* PULSE ACCENT */
@keyframes pulse-red {
  0%, 100% { border-color: #ff0033; }
  50% { border-color: #660014; }
}

@keyframes pulse-cyan {
  0%, 100% { border-color: #00ffcc; }
  50% { border-color: #006652; }
}

.pulse-border-red { animation: pulse-red 3s ease-in-out infinite; }
.pulse-border-cyan { animation: pulse-cyan 3s ease-in-out infinite; }

/* MOVEMENT — DRIFT */
@keyframes drift-right {
  0% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(-2px); }
}

@keyframes drift-up {
  0% { transform: translateY(1px); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(1px); }
}

.drift { animation: drift-right 6s ease-in-out infinite; }
.drift-slow { animation: drift-right 10s ease-in-out infinite; }
.drift-up { animation: drift-up 4s ease-in-out infinite; }

/* MOVEMENT — FLOAT */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.float { animation: float 5s ease-in-out infinite; }
.float-slow { animation: float 8s ease-in-out infinite; }

/* MOVEMENT — PULSE SIZE */
@keyframes pulse-size {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.pulse-size { animation: pulse-size 4s ease-in-out infinite; }

/* MOVEMENT — TICKER (slower marquee) */
@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 6px 0;
  margin: 20px 0;
}

.ticker-wrap span {
  display: inline-block;
  animation: ticker 25s linear infinite;
  font-size: 10px;
  letter-spacing: 2px;
}

/* MOVEMENT — VERTICAL SCROLL */
@keyframes scroll-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

.vscroll-wrap {
  overflow: hidden;
  height: 20px;
  position: relative;
  border-left: 2px solid;
  padding-left: 8px;
  margin: 15px 0;
  font-size: 10px;
}

.vscroll-wrap span {
  display: block;
  position: absolute;
  animation: scroll-up 12s linear infinite;
  white-space: nowrap;
}

/* MOVEMENT — FLICKER OPACITY */
@keyframes flicker-subtle {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.7; }
  94% { opacity: 1; }
  96% { opacity: 0.5; }
  98% { opacity: 0.9; }
}

.flicker-subtle { animation: flicker-subtle 5s infinite; }

/* MOVEMENT — ROTATE SLIGHT */
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(0.3deg); }
  75% { transform: rotate(-0.3deg); }
}

.wobble { animation: wobble 3s ease-in-out infinite; }

/* MOVEMENT — TYPING CURSOR */
@keyframes type-cursor {
  0%, 49% { border-right-color: #fff; }
  50%, 100% { border-right-color: transparent; }
}

.type-cursor {
  border-right: 2px solid #fff;
  padding-right: 3px;
  animation: type-cursor 1s step-end infinite;
}

/* MOVEMENT — SCAN LINE (horizontal line that moves down) */
@keyframes scanline-move {
  0% { top: -2px; }
  100% { top: 100%; }
}

.scanline-container {
  position: relative;
  overflow: hidden;
}

.scanline-container::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff003333, transparent);
  animation: scanline-move 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* GLITCH */
@keyframes glitch-shift {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-3px, 1px); }
  94% { transform: translate(2px, -1px); }
  96% { transform: translate(-1px, 2px); }
}

.glitch { animation: glitch-shift 6s infinite; }

/* BLINK */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.blink { animation: blink 1.2s step-end infinite; }

/* HIDDEN LINKS — discoverable only if you look */
.buried { color: #444; text-decoration: none; font-size: 8px; }
.buried:hover { color: #888; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .wrap { padding: 12px; }
  .reply { margin-left: 12px; }
  .post-img pre { font-size: 5px; }
  .ascii-block pre { font-size: 6px; }
}