:root {
  --black: #050706;
  --panel: #101411;
  --panel-2: #181d19;
  --silver: #a9afa9;
  --line: #4e5750;
  --text: #d2d7d2;
  --muted: #8a938c;
  --acid: #b7ff2a;
  --green: #65745a;
  --red: #c91922;
  --blue: #82b8c4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background-color: #080a08;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(140,160,142,.025) 6px 7px);
  background-size: 4px 4px, 4px 4px, 13px 13px;
  font: 12px Verdana, Arial, sans-serif;
  image-rendering: auto;
}

a { color: var(--acid); }
a:hover { color: #fff; background: #7b0010; }

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.35) 3px 4px);
}

.site-shell {
  width: 780px;
  margin: 18px auto 40px;
  border: 1px solid #879087;
  box-shadow: 0 0 0 3px #1b211c, 0 0 34px #000;
  background: #0a0d0a;
}

.top-strip {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  color: #080a08;
  background: var(--silver);
  border-bottom: 2px solid #343a35;
  font: bold 9px "Courier New", monospace;
}

.banner {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #111;
  border-bottom: 1px solid #69726a;
}

.banner-band {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.45) brightness(.42) sepia(.25) hue-rotate(60deg);
}

.banner-noise {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.65) 60%),
    repeating-linear-gradient(175deg, transparent 0 8px, rgba(255,255,255,.055) 9px, transparent 10px);
  mix-blend-mode: screen;
}

.banner-copy {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 21px;
  transform: rotate(-1deg);
  text-shadow: 2px 2px #000;
}

.banner-copy h1 {
  margin: 3px 0 0;
  color: #e8ece8;
  font: 900 40px Arial Black, Impact, sans-serif;
  letter-spacing: -3px;
}

.banner-copy h1 span { color: var(--acid); }
.banner-copy p { margin: -2px 0 0 4px; font: 11px "Courier New", monospace; letter-spacing: 2px; }

.error-label {
  padding: 2px 5px;
  color: #fff;
  background: var(--red);
  font: bold 9px "Courier New", monospace;
}

.banner-emily {
  position: absolute;
  z-index: 1;
  right: -4px;
  bottom: -30px;
  width: 215px;
  max-height: 205px;
  object-fit: contain;
  filter: grayscale(.35) contrast(1.25) drop-shadow(-7px 0 0 rgba(183,255,42,.22));
}

.ticker {
  display: block;
  padding: 5px 0;
  color: #050505;
  background: var(--acid);
  border-top: 1px solid #ddff9d;
  border-bottom: 2px solid #39422f;
  font: bold 10px "Courier New", monospace;
}

.page-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px;
  padding: 8px;
}

.sidebar { min-width: 0; }
.content { min-width: 0; }

.window {
  margin-bottom: 8px;
  border: 1px solid #6c756d;
  border-right-color: #202520;
  border-bottom-color: #202520;
  background: var(--panel);
  box-shadow: 2px 2px 0 #000;
}

.titlebar {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  color: #080a08;
  background: linear-gradient(90deg, #aeb4ae, #687269);
  border: 1px solid #d4d8d4;
  border-right-color: #3c433d;
  border-bottom-color: #3c433d;
  font: bold 10px Verdana, sans-serif;
}

.red-titlebar { color: #fff; background: linear-gradient(90deg, #7a0009, #cb1a23); }
.acid-titlebar { color: #050805; background: linear-gradient(90deg, #839f49, var(--acid)); }
.window-buttons { letter-spacing: 3px; white-space: nowrap; }
.window-body { padding: 12px; line-height: 1.55; }
.window-body.compact { padding: 8px; font-size: 10px; }

.file-list { padding: 5px; }
.file-list a {
  display: block;
  padding: 6px 4px;
  color: #d7ddd7;
  border-bottom: 1px dotted #3e463f;
  text-decoration: none;
  font: 10px "Courier New", monospace;
}
.file-list a:hover { color: #050505; background: var(--acid); }
.file-list a span { color: var(--acid); }
.file-list a:hover span { color: #050505; }
.file-list b { color: #ff2632; font-size: 8px; }

.status-window p { margin: 2px 0; }
.status-window strong { color: var(--acid); }
.status-light {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 7px var(--acid);
}

.fake-player { margin-top: 8px; padding: 5px; color: #a7ff42; background: #020402; border: 1px inset #555; font: 9px "Courier New", monospace; }
.player-line { display: inline-block; width: 83px; height: 5px; margin-left: 4px; background: #26301f; }
.player-line i { display: block; width: 37%; height: 100%; background: var(--acid); }
.player-buttons { margin-top: 5px; text-align: center; letter-spacing: 5px; }

.counter-box {
  margin-bottom: 8px;
  padding: 8px;
  text-align: center;
  color: #9ba49c;
  border: 1px dashed #5a635b;
  background: #080a08;
  font: 9px "Courier New", monospace;
}
.counter-box p { margin: 0 0 4px; }
.counter {
  padding: 3px;
  color: #f32b35;
  background: #000;
  border: 2px inset #5d5d5d;
  font: 18px "Courier New", monospace;
  letter-spacing: 2px;
}

.side-logo { display: block; width: 70px; height: 70px; margin: 12px auto; filter: invert(1) opacity(.55); }
.tiny-warning { padding: 7px; color: #aab2aa; border: 1px solid #5b4e20; background: #201c0b; font: 9px "Courier New", monospace; line-height: 1.4; }
.tiny-warning strong { color: #ffe550; }
.back-home { display: block; margin: 10px 0; text-align: center; font: 9px "Courier New", monospace; }

.content-window { scroll-margin-top: 8px; }
.welcome-grid { display: grid; grid-template-columns: 1fr 145px; gap: 14px; }
.glitch-heading {
  position: relative;
  display: inline-block;
  color: #eef1ee;
  font: 25px Arial Black, Impact, sans-serif;
  letter-spacing: -1px;
  text-shadow: 2px 0 var(--red), -2px 0 var(--blue);
}
.big-line { color: var(--acid); font: bold 15px "Courier New", monospace; }

.photo-frame { padding: 4px; background: #c5cac5; border: 1px solid #fff; box-shadow: 3px 3px 0 #000; transform: rotate(1.5deg); }
.photo-frame img { display: block; width: 100%; height: 130px; object-fit: cover; filter: grayscale(.35) contrast(1.2); }
.photo-frame span { display: block; overflow: hidden; padding-top: 3px; color: #171917; font: 8px "Courier New", monospace; white-space: nowrap; }

.electric-divider { height: 9px; margin: 16px 0; border: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--acid) 6px 8px, transparent 8px 12px); opacity: .65; }
.updates h2 { margin: 0 0 6px; color: var(--blue); font: bold 12px "Courier New", monospace; }
.updates p { margin: 4px 0; padding-bottom: 4px; border-bottom: 1px dotted #343c35; font-size: 10px; }
.updates time { color: var(--acid); font-family: "Courier New", monospace; }

.emily-zone { border-color: #7aa52a; }
.emily-hero { display: grid; grid-template-columns: 190px 1fr; min-height: 245px; overflow: hidden; border: 1px solid #4b5c3b; background: linear-gradient(115deg, #0a0c0a, #1b2416); }
.emily-cutout-wrap { position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, #111 0 8px, #171d15 8px 9px); }
.emily-cutout-wrap img { position: absolute; bottom: -3px; left: -15px; width: 220px; max-height: 275px; object-fit: contain; filter: grayscale(.25) contrast(1.3) drop-shadow(7px 0 0 rgba(183,255,42,.25)); }
.emily-intro { position: relative; padding: 20px 16px; }
.emily-intro h2 { margin: 13px 0 9px; color: #fff; font: 23px Arial Black, Impact, sans-serif; line-height: .95; text-shadow: 2px 2px #000; }
.warning-copy { color: var(--acid); font: bold 9px "Courier New", monospace; }
.stamp { position: absolute; top: 11px; right: 8px; padding: 3px 6px; color: #ff4b52; border: 2px solid #d2232c; font: bold 11px Arial, sans-serif; transform: rotate(8deg); opacity: .8; }

.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.data-box { min-height: 132px; padding: 8px; border: 1px dashed #687169; background: #080b08; }
.data-box h3 { margin: 0 0 7px; color: var(--acid); font: bold 10px "Courier New", monospace; }
.data-box ul { margin: 0; padding-left: 17px; line-height: 1.7; }
.panic-log p { margin: 4px 0; font: 9px/1.45 "Courier New", monospace; }
.days-counter { margin-top: 8px; padding: 7px; color: #080a08; background: var(--acid); text-align: center; font: bold 10px "Courier New", monospace; }
.days-counter b { padding: 1px 5px; color: #ff3841; background: #080a08; font-size: 15px; }

.notepad-menu { padding: 3px 7px; color: #111; background: #c4c7c4; border-bottom: 1px solid #555; font-size: 10px; }
.notepad { min-height: 230px; padding: 13px; color: #080808; background: #e6e7df; font: 12px/1.6 "Courier New", monospace; }
.notepad p { margin: 0 0 13px; }
.text-cursor { animation: blink .75s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.playlist { padding: 8px; color: #77e61d; background: #050705; border: 2px inset #505550; font: 10px "Courier New", monospace; }
.playlist-head { padding: 5px; color: #d3d8d3; background: #242a24; }
.playlist-head span { float: right; }
.playlist ol { margin: 7px 0; padding-left: 29px; }
.playlist li { padding: 5px; border-bottom: 1px dotted #33402c; }
.playlist li:hover { color: #050505; background: var(--acid); }
.playlist li span { display: inline-block; width: 73%; }
.playlist li b { color: #e6ff5d; letter-spacing: 1px; }
.playlist li:hover b { color: #050505; }
.playlist-note { color: #758076; font-size: 8px; }

.album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; padding: 12px; }
.album { min-width: 0; text-align: center; color: #bcc3bd; font: 8px/1.2 Verdana, sans-serif; }
.album img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 4px; object-fit: cover; border: 2px ridge #818881; filter: saturate(.72) contrast(1.08); }
.album:hover img { filter: saturate(1.1) contrast(1.15); outline: 1px solid var(--acid); }
.album b { color: #ff2d38; }

.timeline { padding: 15px 16px; }
.timeline div { display: grid; grid-template-columns: 62px 1fr; min-height: 50px; position: relative; }
.timeline div:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 23px; width: 1px; height: 29px; background: var(--acid); }
.timeline b { align-self: start; padding: 4px; color: #060806; background: var(--acid); text-align: center; font: 10px "Courier New", monospace; }
.timeline span { padding: 4px 0 0 12px; font: 10px "Courier New", monospace; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
.gallery-grid a { min-width: 0; padding: 3px; color: #151815; background: #c3c7c3; border: 1px outset #fff; text-decoration: none; }
.gallery-grid a:nth-child(odd) { transform: rotate(-1deg); }
.gallery-grid a:nth-child(even) { transform: rotate(1deg); }
.gallery-grid img { width: 100%; height: 83px; object-fit: cover; filter: grayscale(.55) contrast(1.25); }
.gallery-grid span { display: block; overflow: hidden; padding: 3px 1px 1px; font: 7px "Courier New", monospace; white-space: nowrap; }
.new-files { margin: 0 12px 12px; font: 9px "Courier New", monospace; }
.new-files span { color: #ff2c37; font-weight: bold; }

.link-section { text-align: center; }
.link-section h2 { color: var(--acid); font: 16px Arial Black, Impact, sans-serif; }
.link-section p { display: inline-block; margin: 4px; }
.site-button { display: flex; width: 88px; height: 31px; margin: 12px auto 4px; align-items: center; justify-content: center; color: #e5e8e5; background: linear-gradient(135deg, #212821, #060706); border: 1px solid var(--acid); font: 8px/8px Arial Black, sans-serif; text-align: right; }
.site-button b { margin-left: 3px; color: var(--acid); font-size: 11px; }

footer { padding: 10px; color: #717a72; border-top: 1px solid #3c443d; text-align: center; font: 8px "Courier New", monospace; }
footer p { margin: 3px; }

@media (max-width: 820px) {
  .site-shell { width: calc(100% - 12px); margin-top: 6px; }
  .page-grid { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sidebar > * { margin: 0; }
  .nav-window { grid-row: span 3; }
  .side-logo { display: none; }
  .back-home { align-self: center; }
}

@media (max-width: 560px) {
  .top-strip span:last-child { display: none; }
  .banner-copy { left: 12px; }
  .banner-copy h1 { font-size: 29px; }
  .banner-emily { width: 160px; opacity: .72; }
  .sidebar { display: block; }
  .sidebar > * { margin-bottom: 8px; }
  .welcome-grid, .data-grid { grid-template-columns: 1fr; }
  .small-photo { width: 150px; margin: 0 auto; }
  .emily-hero { grid-template-columns: 130px 1fr; }
  .emily-cutout-wrap img { left: -37px; width: 190px; }
  .emily-intro { padding: 17px 10px; }
  .emily-intro h2 { font-size: 17px; }
  .stamp { display: none; }
  .album-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .text-cursor { animation: none; }
}

.video-window {
  margin: 12px 0;
  padding: 6px;
  background: #070907;
  border: 1px solid #66705f;
  box-shadow:
    inset 1px 1px #a5ad9f,
    inset -1px -1px #222822;
}

.video-title {
  margin-bottom: 6px;
  padding: 4px 6px;
  color: #080a08;
  background: linear-gradient(
    90deg,
    #829b50,
    #b7ff2a
  );
  font: bold 9px "Courier New", monospace;
}

.video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #000;
  border: 2px inset #606660;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caption {
  margin: 6px 2px 1px;
  color: #8e988f;
  font: 9px "Courier New", monospace;
  text-align: right;
}