/* lil 0. black, gray, white, one green.
 *
 * The look is two things fused on purpose. The bones are brutalist terminal:
 * full bleed bars, stacked slabs, hard borders, no rounding, no shadow that
 * is not a glow. Over the top of that sits the maximalist trench site: the
 * nav link soup, the popup, the quote boxes, the grid of nonsense, sprites
 * crossing the page. One of those alone reads as tasteful and the other alone
 * reads as noise, and he is neither.
 *
 * Everything is monospace. Every colour is one of four. The green is used for
 * structure and for the thing that matters, gray for everything that does not,
 * white only for a number you are supposed to read.
 */

:root{
  --bg:#000;
  --panel:#070907;
  --panel2:#0d110d;
  --green:#00ff41;
  --green-d:#00a82b;
  --green-k:#00591a;
  --green-glow:rgba(0,255,65,.35);
  --gray:#7a807c;
  --gray-l:#a8afaa;
  --gray-d:#161a16;
  --white:#fff;
  --red:#ff3b30;
  --mono:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--green)}
body{
  font-family:var(--mono);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  text-rendering:optimizeSpeed;
}
img{max-width:100%;image-rendering:pixelated}
a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
a:hover{background:var(--green);color:#000;text-decoration:none}
pre{margin:0;font-family:var(--mono)}

/* The CRT wash. One element, fixed, never intercepts a click.
 *
 * This started as multiply blended scanlines at .28 over a heavy vignette and
 * it crushed the whole page: the green bars rendered near black and the body
 * copy stopped being readable, while the modal sat above the overlay looking
 * correct, so the page appeared to have two different colour schemes. Screen
 * shot at 1400x2400 to catch it, because on a bright monitor it just reads as
 * "moody". Scanlines only now, light, no blend mode, no vignette over text.
 */
.crt{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
.crt.off{display:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 10px 90px}

/* ------------------------------------------------------------------ bars */
/* These were centred full bleed slabs, which is the brutalist reference's
   signature move and made every sub page read as that site with the words
   swapped. They are window title bars now, left aligned with chrome on the
   right, matching desk.css so the whole site is one object instead of two
   borrowed ones. */
.bannerbar{
  background:var(--green);color:#000;
  font-weight:bold;letter-spacing:.06em;
  padding:4px 8px;margin:10px 0 0;text-transform:lowercase;
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.bannerbar:after{content:"_ □ X";font-family:var(--mono);opacity:.75}
.bannerbar.big{font-size:15px;letter-spacing:.08em}

.sechead{
  background:#000;color:var(--green);font-weight:bold;
  padding:5px 10px;margin:26px 0 0;text-align:left;letter-spacing:.08em;
  border:2px solid var(--green);border-bottom:0;font-size:12px;
  display:flex;align-items:center;justify-content:space-between;
}
.sechead:after{content:"_ □ X";opacity:.5;font-size:11px}
.sechead .tag{color:var(--green-d)}

.subbar{
  background:#000;color:var(--gray);
  text-align:left;padding:4px 10px;font-size:12px;
  border:2px solid var(--green-k);border-top:0;
}

.castrip{
  border:1px dashed var(--green);background:#020402;
  padding:9px 8px;text-align:center;margin:8px 0;
  font-size:13px;word-break:break-all;cursor:pointer;user-select:all;
}
.castrip:hover{background:var(--green);color:#000}
.castrip b{letter-spacing:.1em}

/* --------------------------------------------------------------- the nav */
/* HPOS10I: one enormous run of links that wraps, separators between. */
.navsoup{
  border:2px solid var(--green);padding:10px 12px;margin:10px 0;
  background:var(--panel);font-size:15px;line-height:2;
}
.navsoup a{margin:0 2px;white-space:nowrap}
.navsoup .sep{color:var(--green-k);margin:0 4px}

/* febu: the same destinations again as full width slabs, because doing it
   twice in two different systems is the actual aesthetic. */
.navstack{border:2px solid var(--green);padding:8px;background:var(--panel)}
.navstack a{
  display:block;background:var(--green);color:#000;text-decoration:none;
  text-align:center;padding:9px 6px;margin:6px 0;font-weight:bold;
  letter-spacing:.06em;
}
.navstack a:hover{background:#000;color:var(--green);outline:2px solid var(--green)}
.navstack a.hot{
  background:#000;color:var(--green);border:1px solid var(--green);
  box-shadow:0 0 14px var(--green-glow),inset 0 0 14px rgba(0,255,65,.12);
  animation:hotpulse 2.4s infinite;
}
@keyframes hotpulse{50%{box-shadow:0 0 26px var(--green-glow),inset 0 0 20px rgba(0,255,65,.2)}}

/* ------------------------------------------------------------- ascii art */
.asciipanel{
  border:2px solid var(--green);background:var(--panel);
  padding:14px 6px;text-align:center;overflow-x:auto;
}
.asciipanel pre{
  display:inline-block;text-align:left;font-size:11px;line-height:1.15;
  color:var(--green);white-space:pre;
}
.asciipanel.dim pre{color:var(--green-k)}

/* ---------------------------------------------------------------- panels */
.panel{
  border:2px solid var(--green);background:var(--panel);
  padding:14px 16px;margin:0;
}
.sechead + .panel{border-top:0}
.panel.gray{border-color:var(--gray-d);background:#050605}
.panel h3{margin:0 0 8px;font-size:14px;letter-spacing:.14em;color:var(--green-d)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.cols,.cols3{grid-template-columns:1fr}}

/* the readout tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  border:2px solid var(--green);background:var(--green-k)}
.tile{background:#000;padding:12px 10px;min-height:74px}
.tile dt{font-size:10px;letter-spacing:.18em;color:var(--green-d);margin:0 0 4px}
.tile dd{margin:0;font-size:24px;font-weight:bold;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile dd small{font-size:12px;color:var(--gray);font-weight:normal}
.tile.zero dd{color:var(--gray)}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* ----------------------------------------------------------- the threads */
/* febu's table, restated: id, subject, status, heat. */
table.threads{width:100%;border-collapse:collapse;font-size:13px}
table.threads th{
  background:var(--green);color:#000;text-align:left;padding:6px 10px;
  letter-spacing:.1em;font-size:11px;
}
table.threads td{padding:7px 10px;border-bottom:1px solid var(--gray-d)}
table.threads tr:nth-child(odd) td{background:#050705}
.st{font-size:10px;letter-spacing:.1em;padding:1px 5px;border:1px solid}
.st.open{color:var(--green);border-color:var(--green-k)}
.st.locked{color:var(--gray);border-color:var(--gray-d)}
.st.bleeding{color:var(--red);border-color:var(--red)}
.st.disputed{color:var(--white);border-color:var(--gray)}
.st.redacted{color:#222;border-color:#222;background:#111}
.heat{display:inline-block;height:9px;background:var(--green);vertical-align:middle}
.heat.hot{background:var(--red)}

/* -------------------------------------------------------------- warnings */
.warn{
  border:1px solid var(--green);color:var(--green);
  text-align:center;padding:6px;font-size:12px;letter-spacing:.1em;margin:8px 0;
}
.warn.red{border-color:var(--red);color:var(--red)}

.hazard{
  height:16px;margin:16px 0;
  background:repeating-linear-gradient(45deg,var(--green) 0 14px,#000 14px 28px);
}

.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--green-k);
  border-bottom:1px solid var(--green-k);padding:4px 0;font-size:12px;color:var(--green-d)}
.marquee span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

/* ------------------------------------------------------------ quoteboxes */
/* the hpos10i community boxes: fixed height, scrolls internally, ugly on
   purpose, and the content is other people's words rather than his. */
.quotebox{
  border:2px solid var(--green);background:#020302;color:var(--gray-l);
  height:190px;overflow-y:auto;padding:10px;font-size:13px;white-space:pre-wrap;
}
.quotebox::-webkit-scrollbar{width:10px}
.quotebox::-webkit-scrollbar-thumb{background:var(--green-k)}
.quotebox b{color:var(--green)}

/* ------------------------------------------------------------------ misc */
.redacted{background:#141414;color:#141414;user-select:none}
.redacted:hover{color:var(--gray-d)}

.glitch{position:relative;display:inline-block}
.glitch:after{
  content:attr(data-t);position:absolute;left:2px;top:0;color:var(--red);
  clip-path:inset(0 0 55% 0);opacity:.55;animation:gl 3.4s infinite steps(2);
}
@keyframes gl{0%,92%{transform:none}94%{transform:translateX(-3px)}96%{transform:translateX(3px)}}

.blink{animation:bl 1.05s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

.watermark{
  position:fixed;right:6px;top:4px;z-index:5;pointer-events:none;
  color:#0d140d;font-size:26px;font-weight:bold;letter-spacing:.2em;line-height:1;
}

/* a sprite crossing the page, the way every 2010s coin site had something
   running across it. purely decorative, never blocks a click. */
.flyer{position:fixed;z-index:4;pointer-events:none;opacity:.9}

/* --------------------------------------------------------------- the pet */
.petwrap{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:200px}
#pet{display:block}
.bubble{
  position:absolute;top:2px;left:50%;transform:translateX(-50%) translateY(-6px);
  background:#000;border:1px solid var(--green);color:var(--green);
  padding:4px 9px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .18s;
  pointer-events:none;
}
.bubble.on{opacity:1}
.petstat{font-size:11px;color:var(--green-d);letter-spacing:.14em;margin-top:6px}

/* ---------------------------------------------------------------- the chat */
.chatbox{border:2px solid var(--green);background:var(--panel);display:flex;
  flex-direction:column;height:430px}
.chatlog{flex:1;overflow-y:auto;padding:12px;font-size:14px}
.chatlog .m{margin:0 0 12px;white-space:pre-wrap;word-wrap:break-word}
.chatlog .m.you{color:var(--gray-l)}
.chatlog .m.him{color:var(--green)}
.chatlog .who{font-size:10px;letter-spacing:.16em;color:var(--green-k);display:block}
.chatrow{display:flex;border-top:2px solid var(--green)}
.chatrow input{
  flex:1;background:#000;border:0;color:var(--green);font-family:var(--mono);
  font-size:14px;padding:11px;outline:none;
}
.chatrow button{
  background:var(--green);border:0;color:#000;font-family:var(--mono);
  font-weight:bold;padding:0 20px;cursor:pointer;letter-spacing:.1em;
}
.chatrow button:disabled{background:var(--gray-d);color:var(--gray)}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:16px}
.modal.hide{display:none}
.modal .box{border:2px solid var(--green);background:#000;max-width:520px;width:100%}
.modal .box .bannerbar{margin:0}
.modal .body{padding:20px 18px;text-align:center}
.modal .body p{margin:0 0 14px}
.modal .btns{display:flex;gap:10px;justify-content:center;padding:0 18px 18px}
.modal button{
  font-family:var(--mono);font-weight:bold;padding:9px 26px;cursor:pointer;
  background:var(--green);border:2px solid var(--green);color:#000;letter-spacing:.1em;
}
.modal button.no{background:#000;color:var(--gray);border-color:var(--gray-d)}

/* --------------------------------------------------------------- footer */
.foot{border-top:2px solid var(--green);margin-top:26px;padding:14px 6px;
  text-align:center;font-size:12px;color:var(--gray)}
.foot b{color:var(--green-d)}

.small{font-size:12px;color:var(--gray)}
.dim{color:var(--gray)}
.hot{color:var(--white)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.nowrap{white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .marquee span{padding-left:0}
}