:root{
  --bg:#ffffff;
  --ink:#0b0b0b;
  --dim:#444;
  --link:#0000ee;
  --visited:#551a8b;
  --border:#000;
}

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size:14px;
  overflow-x: hidden; /* avoid sideways scroll from jitter */
}

a{ color: var(--link); }
a:visited{ color: var(--visited); }
.dim{ color: var(--dim); }
.tiny{ font-size:12px; }

/* FULL-WIDTH pinned header */
#topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-sizing: border-box;

  padding: 6px 10px;
  background: #f4f4f4;
  border-bottom: 1px solid var(--border);

  display:flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
}

/* FULL-WIDTH marquee */
#marq{
  width: 100%;
  box-sizing: border-box;

  background:#ffffcc;
  border-bottom:1px solid var(--border);
  padding:3px 0;
  font-size:12px;
}

/* content stays left aligned, not full width */
#site{
  max-width: 980px;
  padding: 10px 12px;
}

/* the content block */
#page{
  animation: boot .45s steps(6,end) both;
}
@keyframes boot{
  from{ opacity: 0; transform: translateY(2px); }
  to{ opacity: 1; transform: translateY(0); }
}

table.layout{
  border: 0;
  width: 100%;
}

.titleLine{
  margin: 8px 0 10px 0;
  line-height: 1.2;
}
.title{
  font-size: 34px;
  letter-spacing: -1px;
  margin-right: 8px;
}
#statusText{
  margin-left: 10px;
  font-family: "Courier New", monospace;
}

/* section title */
.secTitle{
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 16px;
  text-decoration: underline;
}

/* stars */
.star{ display:inline-block; margin-right: 6px; }
.blink{ animation: blink .9s steps(2,end) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.twinkle{ animation: twinkle 2.2s steps(4,end) infinite; }
@keyframes twinkle{
  0%{ opacity: .35; transform: translateY(0); }
  25%{ opacity: 1; transform: translateY(-1px); }
  50%{ opacity: .6; transform: translateY(0); }
  100%{ opacity: .35; transform: translateY(0); }
}

/* pfp */
.pfp{
  width: 100%;
  max-width: 240px;
  border: 1px solid #000;
  image-rendering: pixelated;
  filter: blur(0.55px) contrast(1.06) saturate(0.95);
}

/* inputs */
textarea, input{
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 6px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  background: #fff;
  color:#000;
}

button{
  border: 1px solid #000;
  background: #eee;
  padding: 4px 10px;
  cursor: pointer;
}

/* posts */
.post{
  border: 0;
  margin: 0 0 14px 0;
  padding: 0;
  background: transparent;
}
.postTitle{ cursor: pointer; text-decoration: underline; }
.postToggle{ text-decoration: none; margin-right: 6px; }
.postBody{ margin-top: 6px; }
.post.collapsed .postBody,
.post.collapsed .postimg{ display:none; }

.postimg{
  display:block;
  margin: 8px 0;
  max-width: 100%;
  border: 1px solid #000;
  image-rendering: pixelated;
  filter: blur(0.5px) contrast(1.05) saturate(0.95);
}

/* =========================
   FULL-SCREEN OLD / CINEMATIC FX (LESS INTENSE)
   ========================= */

body.ancient{
  /* gentle global film look */
  filter: contrast(1.03) saturate(1.02);
}

/* scanlines across full viewport (lighter) */
body.ancient::before{
  content:"";
  pointer-events:none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0.08; /* less intense */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.05),
      rgba(0,0,0,0.05) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 5px
    );
  mix-blend-mode: multiply;
}

/* dither/grain (lighter) */
body.ancient::after{
  content:"";
  pointer-events:none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0.045; /* less intense */
  background-image: radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

/* subtle vignette (less intense) */
body.cinema #site::before{
  content:"";
  pointer-events:none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: radial-gradient(closest-side, rgba(0,0,0,0) 62%, rgba(0,0,0,.18) 100%);
  mix-blend-mode: multiply;
  opacity: .7;
}

/* very light chroma fringing */
body.ancient, body.ancient *{
  text-shadow:
    0.4px 0 rgba(255,0,0,0.12),
   -0.4px 0 rgba(0,120,255,0.10);
}

/* slowfps jitter moves the whole screen but with less blur */
body.slowfps.frame0{ transform: translate(0,0); filter: blur(.25px) contrast(1.02) saturate(1.01); }
body.slowfps.frame1{ transform: translate(0.5px, -0.3px); filter: blur(.30px) contrast(1.02) saturate(1.01); }
body.slowfps.frame2{ transform: translate(-0.4px, 0.5px); filter: blur(.28px) contrast(1.02) saturate(1.01); }

/* keep sticky header stable */
body.slowfps #topbar{ transform: translateZ(0); }

/* toggle off */
body.fxOff{
  transform:none !important;
  filter:none !important;
}
body.fxOff::before,
body.fxOff::after{ display:none !important; }
body.fxOff #site::before{ display:none !important; }
body.fxOff, body.fxOff *{ text-shadow:none !important; }

/* mobile layout */
@media (max-width: 860px){
  .title{ font-size: 28px; }
  #statusText{ display:block; margin-left:0; margin-top:4px; }

  table.layout, table.layout tr, table.layout td{ display:block; width:auto !important; }
  table.layout td{ padding: 10px 6px; }
  table.layout td + td{ border-top: 1px dotted #000; }

  .pfp{ max-width: 280px; }
  textarea, input{ max-width:100%; }
}