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

body { background: #000; overflow: hidden; width: 100vw; height: 100vh; cursor: none; }

#screen {
  position: relative;
  width: 100vw; height: 100vh;
  background: #030803;
  overflow: hidden;
  transition: transform 0.18s ease-out;
}

#noise {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 15; opacity: 0.05;
}

#scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.14) 2px, rgba(0,0,0,0.14) 4px);
  pointer-events: none; z-index: 14;
}

#sweep {
  position: absolute; left: 0; right: 0; height: 6px;
  background: linear-gradient(transparent, rgba(51,255,51,0.05), transparent);
  pointer-events: none; z-index: 16;
  animation: sweep 9s linear infinite;
}
@keyframes sweep { 0% { top: -6px; } 100% { top: 100vh; } }

#rollbar {
  position: absolute; left: 0; right: 0; height: 120px;
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.55) 65%, transparent 100%);
  pointer-events: none; z-index: 18;
  transform: translateY(-120px);
  animation: rollbar 14s linear infinite;
}
@keyframes rollbar {
  0%   { transform: translateY(-120px); opacity: 0; }
  6%   { opacity: 0.9; }
  87%  { opacity: 0.9; }
  97%  { transform: translateY(calc(100vh + 120px)); opacity: 0; }
  100% { transform: translateY(calc(100vh + 120px)); opacity: 0; }
}

#vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,0.48) 75%, rgba(0,0,0,0.72) 100%);
  pointer-events: none; z-index: 17;
}

#reflection {
  position: absolute; inset: 0;
  background: url('reflect.png') center 35%/180% no-repeat;
  pointer-events: none; z-index: 19;
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(1.9) contrast(1.4);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 60%, transparent 82%);
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 60%, transparent 82%);
  animation: reflect-breathe 13s ease-in-out infinite;
}

@keyframes reflect-breathe {
  0%   { opacity: 0.055; }
  18%  { opacity: 0.028; }
  35%  { opacity: 0.065; }
  52%  { opacity: 0.032; }
  70%  { opacity: 0.058; }
  84%  { opacity: 0.022; }
  100% { opacity: 0.055; }
}

/* ── TERMINAL LAYOUT ─────────────────────────────── */
#terminal {
  position: absolute; inset: 0;
  padding: 1.8em 2.4em 1.8em 2.8em;
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(12px, 1.2vw, 22px);
  line-height: 1.5;
  color: #33ff33;
  z-index: 10;
  text-shadow:
    0 0 4px rgba(51,255,51,0.65),
    1px  0 0 rgba(255,40,40,0.2),
    -1px 0 0 rgba(40,40,255,0.2);
  animation: flicker 5s infinite, ca-breathe 4.5s ease-in-out infinite;
}

#main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 1.5em;
  border-right: 1px solid #1c421c;
  position: relative;
}

#sidebar {
  width: 32ch;
  flex-shrink: 0;
  padding-left: 1.4em;
  padding-right: 2em;
  overflow: hidden;
  position: relative;
  color: #2b8c2b;
  text-shadow: 0 0 3px rgba(51,255,51,0.3);
  transition: width 0.18s steps(2), padding 0.18s steps(2);
}
#sidebar.collapsed {
  width: 3.5ch;
  padding-left: 0.4em;
  padding-right: 0.4em;
  overflow: visible;
}
#sidebar-content {
  white-space: pre;
  overflow: hidden;
  transition: opacity 0.1s steps(3);
}
#sidebar.collapsed #sidebar-content {
  opacity: 0;
  pointer-events: none;
}
#sidebar-tab {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #2b8c2b;
}
#sidebar.collapsed #sidebar-tab {
  display: block;
}

#output {
  flex: 1;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

#prompt-line {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  min-height: 1.5em;
  font-size: 2em;
  position: relative;
  z-index: 35;
}

#cursor {
  display: inline-block;
  width: 0.54em; height: 1.08em;
  background: #33ff33;
  box-shadow: 0 0 8px rgba(51,255,51,0.9), 0 0 16px rgba(51,255,51,0.4);
  animation: blink 1.1s step-end infinite;
  vertical-align: bottom;
  margin-left: 1px;
  visibility: hidden;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── FLICKER ───────────────────────────────────────── */
@keyframes flicker {
  0%,100% { opacity: 1; }
  2%   { opacity: 0.90; } 2.4%  { opacity: 1; }
  7%   { opacity: 0.72; } 7.4%  { opacity: 0.95; } 7.8% { opacity: 0.80; } 8.2% { opacity: 1; }
  16%  { opacity: 0.88; } 16.3% { opacity: 1; }
  22%  { opacity: 0.94; } 22.4% { opacity: 0.70; } 22.8% { opacity: 0.96; } 23.2% { opacity: 1; }
  31%  { opacity: 0.85; } 31.4% { opacity: 1; }
  39%  { opacity: 0.91; } 39.5% { opacity: 0.65; } 39.9% { opacity: 0.88; } 40.3% { opacity: 1; }
  48%  { opacity: 0.78; } 48.5% { opacity: 0.95; } 48.9% { opacity: 0.82; } 49.3% { opacity: 1; }
  55%  { opacity: 0.93; } 55.4% { opacity: 0.75; } 55.8% { opacity: 1; }
  63%  { opacity: 0.86; } 63.4% { opacity: 1; }
  70%  { opacity: 0.68; } 70.3% { opacity: 0.92; } 70.6% { opacity: 0.78; } 71%  { opacity: 1; }
  79%  { opacity: 0.89; } 79.4% { opacity: 1; }
  86%  { opacity: 0.74; } 86.3% { opacity: 0.96; } 86.7% { opacity: 0.84; } 87.1% { opacity: 1; }
  94%  { opacity: 0.91; } 94.5% { opacity: 0.67; } 94.9% { opacity: 0.93; } 95.3% { opacity: 1; }
}

@keyframes ca-breathe {
  0%,100% { text-shadow: 0 0 4px rgba(51,255,51,0.65), 1px 0 0 rgba(255,40,40,0.18), -1px 0 0 rgba(40,40,255,0.18); }
  50%     { text-shadow: 0 0 8px rgba(51,255,51,0.9),  2px 0 0 rgba(255,40,40,0.35), -2px 0 0 rgba(40,40,255,0.35); }
}

/* ── TEXT CLASSES ─────────────────────────────────── */
.dim    { color: #1c6b1c; }
.bright { color: #a0ffa0; }
.ok     { color: #00ff99; text-shadow: 0 0 5px rgba(0,255,153,0.75), 1px 0 0 rgba(255,40,40,0.15); }
.warn   { color: #ffcc00; text-shadow: 0 0 5px rgba(255,204,0,0.8),  1px 0 0 rgba(255,40,40,0.2); }
.err    { color: #ff4444; text-shadow: 0 0 5px rgba(255,68,68,0.85); }
.skull  { color: #88ff88; text-shadow: 0 0 6px rgba(51,255,51,0.9), 2px 0 0 rgba(255,40,40,0.3), -2px 0 0 rgba(40,40,255,0.3); }

/* ── SPLASH ──────────────────────────────────────────── */
#sound-toggle {
  position: absolute;
  bottom: 1.2em;
  right: 2em;
  z-index: 20;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(12px, 1.2vw, 22px);
  color: #1c421c;
  pointer-events: all;
  user-select: none;
}
#sound-toggle:hover { color: #ffcc00; text-shadow: 0 0 8px rgba(255,204,0,0.8); }

body.splash #sidebar       { display: none; }
body.splash #main-area     { border-right: none; }
body.splash #prompt-line   { display: none; }

.splash-wrap  { font-family: 'Share Tech Mono', monospace; font-weight: 400; }
.splash-title { font-size: 2em; }
.splash-item  { font-size: 1.25em; }

/* ── MENU / NAV ─────────────────────────────────────── */
.menu-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.menu-item {
  color: #33ff33;
  text-shadow: 0 0 5px rgba(51,255,51,0.6);
  letter-spacing: 0.08em;
}
.menu-item.nav-focus {
  background: #ffcc00;
  color: #030803 !important;
  text-shadow: none !important;
  padding: 0 0.4em;
}
.panel-card.nav-focus {
  background: #ffcc00;
  border-color: #ffcc00;
}
.panel-card.nav-focus .panel-caption,
.panel-card.nav-focus .panel-tag {
  color: #030803 !important;
  text-shadow: none !important;
}
.panel-card.nav-focus .panel-thumb {
  border-color: #1a1a00;
  color: #1a1a00;
}

.menu-conn { color: #1c421c; }
.menu-back { color: #2b8c2b; margin-top: 1em; }
.menu-back:hover { color: #ffcc00; text-shadow: 0 0 8px rgba(255,204,0,0.9), 0 0 18px rgba(255,204,0,0.4); }

/* ── CONTENT PANEL ───────────────────────────────── */
#content-panel {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(3, 8, 3, 0.97);
  overflow: hidden;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: none;
}
#content-panel.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.panel-header {
  position: absolute;
  top: 0; left: 0; right: 16px;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1.4em;
  border-bottom: 1px solid #0e2a0e;
  background: rgba(3, 8, 3, 0.98);
  z-index: 35;
}
.panel-close {
  color: #33ff33;
  cursor: none;
  letter-spacing: 0.06em;
  user-select: none;
  text-shadow: 0 0 4px rgba(51,255,51,0.5);
}
.panel-close:hover { background: #ffcc00; color: #030803; text-shadow: none; padding: 0 0.3em; }

.panel-scroll-body {
  position: absolute;
  top: 3em; left: 0; right: 16px; bottom: 0;
  overflow: hidden;
}
.panel-inner {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  padding: 1.8em 2em 2.5em 2em;
}

/* ── CRT SCROLLBAR ───────────────────────────────── */
.crt-sb-track {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 16px;
  background: #030803;
  border-left: 1px solid #0e2a0e;
  z-index: 40;
}
.crt-sb-thumb {
  position: absolute;
  left: 2px; right: 2px;
  background: #1c421c;
  min-height: 64px;
  cursor: none;
}
.crt-sb-thumb:hover,
.crt-sb-thumb:active { background: #2b8c2b; }

/* ── PANEL CONTENT STYLES ────────────────────────── */
.panel-title {
  font-size: 1.6em;
  color: #a0ffa0;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(160,255,160,0.5);
}
.panel-sub {
  color: #2b8c2b;
  max-width: 55ch;
  line-height: 1.6;
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1em;
}
.panel-card {
  border: 1px solid #1c421c;
  padding: 0.7em;
  cursor: none;
}
.panel-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: #060e06;
  border: 1px solid #1c421c;
  margin-bottom: 0.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c421c;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  overflow: hidden;
}
.panel-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  filter: saturate(0.3) sepia(0.4);
}
.thumb-canvas {
  display: block;
  width: 100%; height: 100%;
  opacity: 0.85;
  filter: saturate(0.3) sepia(0.4);
}
/* thumb still fetching (native lazy) — shimmer placeholder */
.panel-thumb.img-pending {
  background:
    repeating-linear-gradient(to bottom,
      #060e06 0px, #060e06 3px,
      #0a160a 3px, #0a160a 4px);
  animation: thumb-scan 1.1s steps(8) infinite;
}
.panel-thumb.img-pending img { opacity: 0; }
@keyframes thumb-scan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 8px; }
}
.panel-caption { color: #33ff33; font-size: 0.85em; margin-bottom: 0.2em; }
.panel-tag     { color: #1c6b1c; font-size: 0.75em; }

/* dim status line shown while a JSON manifest loads */
.panel-status {
  color: #1c6b1c;
  letter-spacing: 0.04em;
  animation: status-blink 1s steps(2) infinite;
}
.panel-status.err { color: #ff4444; animation: none; }
@keyframes status-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── COLLECTION OVERLAY ──────────────────────────── */
.panel-collection {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: rgba(3, 8, 3, 0.98);
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}
.panel-collection.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}
.panel-collection-header {
  position: absolute;
  top: 0; left: 0; right: 16px;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4em;
  border-bottom: 1px solid #0e2a0e;
  background: rgba(3, 8, 3, 0.98);
  z-index: 46;
}
.panel-collection-body {
  position: absolute;
  top: 3em; left: 0; right: 16px; bottom: 0;
  overflow: hidden;
}

/* ── DETAIL OVERLAY ──────────────────────────────── */
.panel-detail {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(3, 8, 3, 0.98);
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  pointer-events: none;
}
.panel-detail.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}
.panel-detail-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4em;
  border-bottom: 1px solid #0e2a0e;
  background: rgba(3, 8, 3, 0.98);
  z-index: 51;
}
.panel-detail-breadcrumb {
  color: #2b8c2b;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
.panel-detail-prev,
.panel-detail-next {
  position: absolute;
  top: 3em; bottom: 0;
  width: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c421c;
  cursor: none;
  user-select: none;
  font-size: 1em;
}
.panel-detail-prev { left: 0; border-right: 1px solid #0e2a0e; }
.panel-detail-next { right: 0; border-left: 1px solid #0e2a0e; }
.panel-detail-prev:hover,
.panel-detail-next:hover { background: #ffcc00; color: #030803; }
.panel-detail-content {
  position: absolute;
  top: 3em; left: 3em; right: 3em; bottom: 0;
  padding: 1.8em 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  overflow-y: auto;
}
.panel-detail-img {
  width: 100%; height: 55vh; flex-shrink: 0;
  background: #060e06;
  border: 1px solid #1c421c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c421c;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  overflow: hidden;
}
.panel-detail-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0.85;
  filter: saturate(0.3) sepia(0.4);
}
.img-canvas {
  display: block;
  width: 100%; height: 100%;
  opacity: 0.85;
  filter: saturate(0.3) sepia(0.4);
}
/* live progress readout while the full image streams in */
.panel-detail-img.img-loading {
  background:
    repeating-linear-gradient(to bottom,
      #060e06 0px, #060e06 3px,
      #0a160a 3px, #0a160a 4px);
}
.img-readout {
  color: #33ff33;
  font-size: 0.95em;
  letter-spacing: 0.06em;
  white-space: pre;
  text-align: center;
  text-shadow: 0 0 5px rgba(51,255,51,0.6);
}
.img-loaded {
  animation: img-flicker-in 0.32s steps(3);
}
@keyframes img-flicker-in {
  0%   { opacity: 0; }
  33%  { opacity: 0.4; }
  66%  { opacity: 0.2; }
  100% { opacity: 0.85; }
}
.panel-detail-title { font-size: 1.4em; color: #a0ffa0; letter-spacing: 0.08em; }
.panel-detail-meta  { color: #2b8c2b; font-size: 0.85em; letter-spacing: 0.06em; }

#ghost-cursor, .ghost-trail {
  position: absolute;
  pointer-events: none;
  display: none;
  width: 20px;
  height: 28px;
  background: repeating-linear-gradient(
    to bottom,
    #33ff33 0px, #33ff33 3px,
    rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px
  );
  clip-path: polygon(0% 0%, 0% 100%, 33.86% 69.24%, 78.93% 61.4%);
  user-select: none;
}
#ghost-cursor {
  z-index: 25;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 5px rgba(51,255,51,1))
    drop-shadow(0 0 12px rgba(51,255,51,0.75))
    drop-shadow(0 0 22px rgba(51,255,51,0.35));
}
/* phosphor afterimages — dimmer, behind the live cursor, no heavy glow */
.ghost-trail {
  z-index: 24;
  filter: drop-shadow(0 0 4px rgba(51,255,51,0.6));
}
#ghost-cursor.cursor-hot {
  background: repeating-linear-gradient(
    to bottom,
    #ffcc00 0px, #ffcc00 3px,
    rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px
  );
  filter:
    drop-shadow(0 0 5px rgba(255,204,0,1))
    drop-shadow(0 0 12px rgba(255,204,0,0.75))
    drop-shadow(0 0 22px rgba(255,204,0,0.35));
}