/* ============================================================
   THE CULT OF SATURN // SCHIZO STYLESHEET v6.66
   IF YOU ARE READING THIS THE PROGRAMMING HAS ALREADY FAILED
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap');

:root{
  --void:#000000;
  --ash:#0a0a0a;
  --lead:#161616;
  --bone:#cfcabf;
  --blood:#c1121f;
  --blood2:#ff1f3d;
  --gold:#d4af37;
  --acid:#39ff14;
  --piss:#f5d20a;
  --cube:#1b1b1b;
  --static:#222;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% -10%, #1a1206 0%, #070707 45%, #000 100%);
  color:var(--bone);
  font-family:'Courier Prime','Courier New',monospace;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  cursor:crosshair;
}

/* ---- CRT scanline + flicker overlay ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 2px);
  mix-blend-mode:multiply;
  animation:flicker 6s infinite steps(60);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
}
@keyframes flicker{0%,100%{opacity:.9}48%{opacity:.86}49%{opacity:.7}50%{opacity:.95}}

::selection{background:var(--blood);color:#000;}

a{color:var(--acid);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:#fff;background:var(--blood);}

img{image-rendering:auto;}

/* ============ ENTER GATE (splash) ============ */
#enter-gate{
  position:fixed;inset:0;z-index:99999;
  background:radial-gradient(ellipse at 50% 45%, #170d05 0%, #060606 58%, #000 100%);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
}
#enter-gate.gone{opacity:0;pointer-events:none;transition:opacity .85s ease;}
#enter-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
#enter-core{position:relative;z-index:2;text-align:center;
  transition:transform .55s ease-in, opacity .55s ease-in;}
#enter-core.blast{transform:scale(2.6) rotate(8deg);opacity:0;}
.enter-scene{perspective:900px;display:flex;justify-content:center;align-items:center;
  height:280px;transform:scale(1.55);}
#enter-cube{cursor:pointer;}
.enter-scene:hover #enter-cube div{box-shadow:inset 0 0 40px rgba(193,18,31,.8), 0 0 14px rgba(193,18,31,.5);}
.enter-title{font-size:clamp(2.4rem,9vw,5.5rem);margin:.5rem 0 .2rem;}
.enter-hint{font-family:'VT323',monospace;color:var(--acid);font-size:1.45rem;letter-spacing:1px;}
.enter-sub{font-family:'VT323',monospace;color:#7a7a6a;font-size:1.05rem;margin-top:.2rem;}

/* ============ MARQUEES / TICKERS ============ */
.ticker{
  width:100%;
  background:var(--blood);
  color:#000;
  font-family:'VT323',monospace;
  font-size:1.5rem;
  letter-spacing:1px;
  white-space:nowrap;
  overflow:hidden;
  border-top:2px solid #000;border-bottom:2px solid #000;
  text-transform:uppercase;
}
.ticker.gold{background:var(--gold);}
.ticker.black{background:#000;color:var(--blood2);border-color:var(--blood);}
.ticker span{display:inline-block;padding-left:100%;animation:scroll-l 22s linear infinite;}
.ticker.fast span{animation-duration:11s;}
.ticker.rev span{animation-name:scroll-r;padding-left:0;padding-right:100%;}
@keyframes scroll-l{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes scroll-r{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}

/* ============ TOP NAV ============ */
.topnav{
  position:sticky;top:0;z-index:500;
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;
  background:#000;border-bottom:2px solid var(--blood);
  padding:.3rem .5rem;
  font-family:'VT323',monospace;font-size:1.3rem;
}
.topnav .sig{color:var(--gold);margin-right:auto;text-shadow:0 0 6px var(--gold);}
.topnav a{color:var(--bone);text-decoration:none;padding:.1rem .5rem;border:1px solid #333;}
.topnav a:hover{background:var(--blood);color:#000;border-color:var(--blood);}
.topnav a.live{color:var(--acid);animation:blink 1s steps(2) infinite;}

@keyframes blink{50%{opacity:0}}
.blink{animation:blink 1.05s steps(2) infinite;}
.blink-slow{animation:blink 2.2s steps(2) infinite;}

/* ============ HEADINGS ============ */
.glitch{
  font-family:'Special Elite',serif;
  position:relative;color:#fff;line-height:1;
  text-shadow:1px 0 var(--blood2), -1px 0 var(--acid);
}
.glitch::before,.glitch::after{
  content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;
}
.glitch::before{color:var(--blood2);clip-path:inset(0 0 55% 0);animation:gl1 2.4s infinite linear alternate-reverse;}
.glitch::after{color:var(--acid);clip-path:inset(55% 0 0 0);animation:gl2 3.1s infinite linear alternate-reverse;}
@keyframes gl1{0%{transform:translate(0)}100%{transform:translate(-3px,1px)}}
@keyframes gl2{0%{transform:translate(0)}100%{transform:translate(3px,-1px)}}

/* ============ LAYOUT ============ */
.wrap{max-width:1100px;margin:0 auto;padding:0 14px;}
.hr{border:0;border-top:1px dashed #444;margin:1.4rem 0;}
.redline{border:0;border-top:2px solid var(--blood);margin:1.4rem 0;box-shadow:0 0 8px var(--blood);}

/* sticky-note / evidence card */
.card{
  background:var(--lead);
  border:1px solid #2a2a2a;
  padding:1rem 1.1rem;margin:1rem 0;
  box-shadow:0 0 0 1px #000, 6px 6px 0 rgba(0,0,0,.6);
}
.card.warn{border-color:var(--blood);box-shadow:0 0 14px rgba(193,18,31,.5);}
.card.acidbox{border-color:var(--acid);}
.tape{
  display:inline-block;background:rgba(212,175,55,.25);color:var(--gold);
  border:1px dashed var(--gold);padding:.1rem .5rem;font-size:.8rem;
  transform:rotate(-2deg);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:2px;
}

.greentext{color:var(--acid);}
.greentext::before{content:"> ";}
.redtext{color:var(--blood2);font-weight:bold;}
.spoiler{background:#000;color:#000;padding:0 2px;}
.spoiler:hover{color:var(--bone);}
mark{background:var(--piss);color:#000;}
.wobble{display:inline-block;animation:wob 3s ease-in-out infinite;}
@keyframes wob{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.5deg) scale(1.03)}}

/* ============ IMAGE BOMB GRIDS ============ */
.bomb{
  column-count:5;column-gap:6px;margin:1rem 0;
}
.bomb img{
  width:100%;margin:0 0 6px;display:block;border:1px solid #000;
  filter:grayscale(.2) contrast(1.05);
  transition:transform .15s, filter .15s, box-shadow .15s;
  break-inside:avoid;cursor:zoom-in;
}
.bomb img:hover{transform:scale(1.4) rotate(.5deg);filter:none;z-index:50;position:relative;box-shadow:0 0 24px var(--blood);}

.scatter img{
  position:absolute;width:160px;border:2px solid #000;box-shadow:5px 5px 0 rgba(0,0,0,.7);
  filter:grayscale(.3);
}

/* ---- CHAOS WALL: randomized sizing + overlap (set inline by JS) ---- */
.chaos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:14px 0;position:relative;
}
.chaos-item{
  display:block;border:1px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.6);
  cursor:zoom-in;transition:transform .15s, filter .15s, box-shadow .15s;
}
.chaos-item:hover{
  transform:scale(1.55) rotate(0deg) !important;filter:none !important;
  z-index:9000 !important;position:relative;box-shadow:0 0 30px var(--blood);
}
.chaos-cap{
  display:inline-block;align-self:center;background:rgba(0,0,0,.82);
  color:var(--acid);border:1px dashed var(--blood);font-family:'VT323';
  font-size:1.15rem;padding:.05rem .5rem;margin:-8px 4px;z-index:80;white-space:nowrap;
}
.chaos-cap.red{color:var(--blood2);border-color:var(--acid);}
/* huge breakout image */
.chaos-item.big{box-shadow:0 0 26px rgba(193,18,31,.5);}

/* free-floating scattered stickers over a section */
.float-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.float-layer img{position:absolute;border:2px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.7);opacity:.5;filter:grayscale(.5);}
.section{position:relative;z-index:2;}

/* pinned string-board */
.board-pin{position:relative;background:#0c0a08;border:1px solid #2a2418;padding:1.2rem;overflow:hidden;}
.pin-note{
  position:relative;display:inline-block;background:#f3ead0;color:#1a1a1a;
  font-family:'Special Elite';padding:.6rem .8rem;margin:.5rem;max-width:230px;
  box-shadow:3px 5px 8px rgba(0,0,0,.6);transform:rotate(var(--r,-3deg));
  font-size:.9rem;
}
.pin-note::before{content:"📌";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:1.1rem;}

/* ============ BUTTONS / CTA ============ */
.btn{
  display:inline-block;font-family:'VT323',monospace;font-size:1.6rem;
  background:var(--acid);color:#000;border:3px solid #000;
  padding:.4rem 1.4rem;text-decoration:none;text-transform:uppercase;
  box-shadow:5px 5px 0 var(--blood);margin:.4rem;
}
.btn:hover{background:var(--blood2);color:#fff;box-shadow:5px 5px 0 var(--acid);transform:translate(-2px,-2px);}
.btn.gold{background:var(--gold);box-shadow:5px 5px 0 #000;}
.ca{
  font-family:'VT323';background:#000;border:2px dashed var(--acid);color:var(--acid);
  padding:.5rem 1rem;display:inline-block;word-break:break-all;cursor:copy;font-size:1.2rem;
}
.ca:hover{background:var(--acid);color:#000;}

/* ============ HERO CUBE ============ */
.scene{perspective:800px;display:flex;justify-content:center;align-items:center;height:220px;margin:1rem 0;}
.cube3d{position:relative;width:120px;height:120px;transform-style:preserve-3d;animation:spin 14s linear infinite;}
.cube3d div{
  position:absolute;width:120px;height:120px;
  background:rgba(8,8,8,.92);border:1px solid var(--blood);
  box-shadow:inset 0 0 30px rgba(193,18,31,.4);
  display:flex;align-items:center;justify-content:center;color:var(--blood);font-size:2.6rem;font-family:'VT323';
}
.cube3d .f1{transform:translateZ(60px)}
.cube3d .f2{transform:rotateY(180deg) translateZ(60px)}
.cube3d .f3{transform:rotateY(90deg) translateZ(60px)}
.cube3d .f4{transform:rotateY(-90deg) translateZ(60px)}
.cube3d .f5{transform:rotateX(90deg) translateZ(60px)}
.cube3d .f6{transform:rotateX(-90deg) translateZ(60px)}
@keyframes spin{0%{transform:rotateX(-20deg) rotateY(0)}100%{transform:rotateX(-20deg) rotateY(360deg)}}

/* ============ POPUPS ============ */
.popup{
  position:fixed;z-index:9000;background:var(--lead);border:2px solid var(--blood);
  width:300px;font-family:'VT323';box-shadow:0 0 30px #000,0 0 60px rgba(193,18,31,.4);
}
.popup .bar{background:var(--blood);color:#000;display:flex;justify-content:space-between;
  padding:.1rem .4rem;font-size:1.2rem;cursor:move;}
.popup .bar b{pointer-events:none;}
.popup .x{cursor:pointer;font-weight:bold;padding:0 .3rem;}
.popup .x:hover{background:#000;color:var(--blood2);}
.popup .body{padding:.7rem;font-size:1.15rem;line-height:1.3;}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.94);display:none;
  align-items:center;justify-content:center;flex-direction:column;cursor:zoom-out;}
.lb.on{display:flex;}
.lb img{max-width:92vw;max-height:80vh;border:2px solid var(--blood);box-shadow:0 0 40px var(--blood);}
.lb .cap{color:var(--acid);font-family:'VT323';font-size:1.4rem;margin-top:.6rem;max-width:90vw;text-align:center;}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;color:var(--blood2);
  padding:0 1rem;user-select:none;}
.lb .prev{left:0;} .lb .next{right:0;}

/* ============ FORUM / IMAGEBOARD ============ */
.board-head{background:#000;border-bottom:1px solid var(--blood);padding:.6rem 0;text-align:center;}
.board-head h1{font-family:'VT323';color:var(--gold);font-size:3rem;margin:.2rem 0;}
.post{
  background:#10100f;border:1px solid #2a2a2a;border-left:3px solid var(--gold);
  margin:.8rem 0;padding:.6rem .8rem;font-size:.95rem;
}
.post.op{border-left-color:var(--blood);background:#14100f;}
.post .meta{font-size:.85rem;color:#7a7a6a;margin-bottom:.3rem;}
.post .meta .name{color:#7e9e58;font-weight:bold;}
.post .meta .trip{color:var(--gold);}
.post .meta .no{color:#555;}
.post .meta .no:hover{color:var(--blood2);cursor:pointer;}
.post .subj{color:var(--blood2);font-weight:bold;}
.post img.thumb{float:left;max-width:160px;max-height:200px;margin:.2rem .8rem .4rem 0;
  border:1px solid #000;cursor:zoom-in;filter:grayscale(.2);}
.post .filename{font-size:.78rem;color:#5a7a3a;display:block;margin-bottom:.2rem;}
.reply-ref{color:var(--acid);}
.post .body{clear:none;}
.quote{color:var(--acid);}
.deadlink{color:var(--blood2);text-decoration:line-through;}

/* ---- WORKING POST FORM ---- */
#post-box{border-color:var(--acid);box-shadow:0 0 14px rgba(57,255,20,.25);}
.frow{display:flex;gap:.6rem;align-items:center;margin:.45rem 0;flex-wrap:wrap;}
.frow > label{font-family:'VT323';color:var(--gold);min-width:78px;font-size:1.15rem;}
.frow input, .frow textarea{flex:1;min-width:220px;background:#000;border:1px solid var(--acid);
  color:var(--acid);font-family:'Courier Prime',monospace;padding:.4rem;font-size:.95rem;}
.frow textarea{resize:vertical;font-family:'Courier Prime',monospace;}
.frow input[type=file]{border:1px dashed #555;color:var(--bone);flex:0 0 auto;min-width:0;cursor:pointer;}
.minibtn{background:var(--lead);color:var(--bone);border:1px solid var(--gold);
  font-family:'VT323';font-size:1.05rem;padding:.25rem .6rem;cursor:pointer;}
.minibtn:hover{background:var(--gold);color:#000;}
.post.you{border-left-color:var(--acid);background:#0e130e;}
.post .youtag{color:var(--acid);font-weight:bold;}
.flash{animation:flash 1.1s ease-out;}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--acid),0 0 24px var(--acid);}100%{box-shadow:none;}}

/* tiny */
.small{font-size:.8rem;color:#666;}
.center{text-align:center;}
.gold{color:var(--gold);}
.blood{color:var(--blood2);}
.acid{color:var(--acid);}
.mono-big{font-family:'VT323';font-size:2rem;line-height:1;}
.rot1{display:inline-block;transform:rotate(-2deg);}
.rot2{display:inline-block;transform:rotate(1.5deg);}

footer{background:#000;border-top:2px solid var(--blood);margin-top:2rem;padding:1.4rem;
  font-size:.8rem;color:#555;text-align:center;font-family:'VT323';}

/* responsive */
@media(max-width:760px){
  .bomb{column-count:3;}
  .topnav{font-size:1.1rem;}
  body{font-size:15px;}
}
@media(max-width:480px){.bomb{column-count:2;}}