/* ---------- phosphor palettes ---------- */
:root,
[data-theme="green"] {
  --fg: #4dff88;
  --fg-rgb: 77, 255, 136;
  --hi: #b4ffc9;
  --bg-center: #0c2214;
  --bg-edge: #020804;
}
[data-theme="amber"] {
  --fg: #ffb33d;
  --fg-rgb: 255, 179, 61;
  --hi: #ffe7bf;
  --bg-center: #261804;
  --bg-edge: #080500;
}
[data-theme="white"] {
  --fg: #d9e6ff;
  --fg-rgb: 217, 230, 255;
  --hi: #ffffff;
  --bg-center: #161b24;
  --bg-edge: #040507;
}

:root {
  --glow: rgba(var(--fg-rgb), 0.55);
  --glow-far: rgba(var(--fg-rgb), 0.22);
  --dim: rgba(var(--fg-rgb), 0.6);
  --faint: rgba(var(--fg-rgb), 0.08);
  --font: 'VT323', 'Terminus', 'Fixedsys', 'Courier New', monospace;
  --size: clamp(18px, 0.9vw + 11px, 25px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #0b0b0a;
  overflow: hidden;
}

/* ---------- monitor ---------- */
.bezel {
  height: 100vh;
  height: 100dvh;
  padding: clamp(6px, 2.2vw, 30px);
  padding-top: max(clamp(6px, 2.2vw, 30px), env(safe-area-inset-top));
  padding-bottom: max(clamp(6px, 2.2vw, 30px), env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 0%, #2b2a27 0%, #151513 60%, #0b0b0a 100%);
}

.crt {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(10px, 3vw, 38px) / clamp(10px, 3.6vw, 46px);
  background: radial-gradient(ellipse at 50% 45%, var(--bg-center) 0%, var(--bg-edge) 78%);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 clamp(2px, 0.5vw, 6px) #1d1c1a,
    0 0 50px rgba(var(--fg-rgb), 0.08),
    inset 0 0 clamp(30px, 6vw, 110px) rgba(0, 0, 0, 0.85);
  transition: background 0.6s;
}

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(14px, 3vw, 40px) clamp(16px, 3.6vw, 52px);
  font-family: var(--font);
  font-size: var(--size);
  line-height: 1.22;
  font-variant-ligatures: none; /* VT323 has an "fi" ligature that breaks column alignment */
  font-feature-settings: "liga" 0, "clig" 0;
  color: var(--fg);
  text-shadow:
    0 0 1px var(--fg),
    0 0 6px var(--glow),
    0 0 18px var(--glow-far);
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--fg-rgb), 0.35) transparent;
  -webkit-tap-highlight-color: transparent;
  /* a touch of CRT softness */
  filter: blur(0.25px) contrast(1.05);
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.35); border-radius: 4px; }

::selection { background: var(--fg); color: var(--bg-edge); text-shadow: none; }

/* ---------- CRT effects (all click-through) ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; }

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.32) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  z-index: 2;
}

.noise {
  inset: -100%;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: noise 0.9s steps(6) infinite;
  z-index: 3;
}

.roll {
  top: -30%;
  bottom: auto;
  height: 22%;
  background: linear-gradient(
    to bottom,
    rgba(var(--fg-rgb), 0) 0%,
    rgba(var(--fg-rgb), 0.045) 50%,
    rgba(var(--fg-rgb), 0) 100%
  );
  animation: roll 7.5s linear infinite;
  z-index: 3;
}

.flicker {
  background: rgba(0, 0, 0, 1);
  opacity: 0;
  animation: flicker 4s infinite;
  z-index: 4;
}

.vignette {
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.45) 86%, rgba(0, 0, 0, 0.9) 100%);
  border-radius: inherit;
  z-index: 5;
}

.glass {
  background:
    radial-gradient(ellipse 70% 45% at 22% 8%, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 40%);
  z-index: 6;
}

@keyframes noise {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-7%, 4%); }
  40%  { transform: translate(5%, -9%); }
  60%  { transform: translate(-3%, 8%); }
  80%  { transform: translate(9%, 2%); }
  100% { transform: translate(-6%, -5%); }
}
@keyframes roll {
  from { transform: translateY(0); }
  to   { transform: translateY(650%); }
}
@keyframes flicker {
  0%, 100% { opacity: 0.02; }
  8%   { opacity: 0.05; }
  9%   { opacity: 0.01; }
  42%  { opacity: 0.03; }
  43%  { opacity: 0.07; }
  44%  { opacity: 0.02; }
  71%  { opacity: 0.04; }
  72%  { opacity: 0.015; }
}

/* ---------- power-on ---------- */
.crt.booting .screen { animation: power-on 0.55s ease-out both; }
@keyframes power-on {
  0%   { transform: scale(1, 0.004); filter: brightness(4) blur(1px); opacity: 0.6; }
  45%  { transform: scale(1, 0.004); filter: brightness(4) blur(1px); opacity: 1; }
  70%  { transform: scale(1, 1.04); filter: brightness(1.6) blur(0.5px); }
  100% { transform: scale(1, 1); filter: blur(0.25px) contrast(1.05); }
}

/* ---------- text ---------- */
.line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.22em;
}
.dim { color: var(--dim); }
.hl { color: var(--hi); }
.err { color: var(--hi); }
.ok { color: var(--hi); }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--hi); background: var(--faint); }

#prompt-line { position: relative; }
.p-user, .p-path { color: var(--hi); }

#cursor {
  background: var(--fg);
  color: var(--bg-edge);
  text-shadow: none;
  box-shadow: 0 0 8px var(--glow), 0 0 2px var(--fg);
  animation: blink 1.05s steps(1) infinite;
}
.blurred #cursor {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
  animation: none;
}
@keyframes blink { 50% { background: transparent; color: var(--fg); box-shadow: none; } }

/* hidden real input: keeps mobile keyboards & IME working */
#input {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px; /* no iOS zoom */
  pointer-events: none;
}

/* ---------- ls ---------- */
.ls-grid { display: flex; flex-wrap: wrap; column-gap: 2.5ch; white-space: pre; }
.entry { cursor: pointer; }
.entry:hover { background: var(--faint); color: var(--hi); }
.entry.dir { color: var(--hi); font-weight: bold; }
.entry.img { font-style: italic; }
.click { cursor: pointer; }
.click:hover { background: var(--faint); color: var(--hi); }

/* ---------- README rendering ---------- */
.md { margin: 0.2em 0 0.4em; }
.md-h { color: var(--hi); white-space: pre-wrap; word-break: break-word; }
.md-h1 { margin-top: 0.3em; }
.md-li { padding-left: calc(var(--indent, 0) * 1ch + 2ch); text-indent: -2ch; white-space: pre-wrap; word-break: break-word; }
.md-li > * { text-indent: 0; }
.md-quote { border-left: 1px solid var(--dim); padding-left: 1.5ch; color: var(--dim); white-space: pre-wrap; }
.md-hr { border: 0; border-top: 1px dashed var(--dim); margin: 0.6em 0; box-shadow: 0 0 6px var(--glow-far); }
.md p, .md-p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.md code { font: inherit; background: var(--faint); color: var(--hi); padding: 0 0.4ch; }
.md strong { color: var(--hi); font-weight: normal; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.md em { font-style: italic; }
.md del { opacity: 0.6; }
.md-code {
  position: relative;
  margin: 0.25em 0;
  border-left: 2px solid rgba(var(--fg-rgb), 0.45);
  background: var(--faint);
}
.md-code pre, .md-table {
  margin: 0;
  padding: 0.25em 1.5ch;
  font: inherit;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--fg-rgb), 0.35) transparent;
}
.md-table { padding-left: 0; }
.md-lang { position: absolute; right: 1ch; top: 0; color: var(--dim); font-size: 0.8em; }
.md-foot { color: var(--dim); margin-top: 0.3em; }

/* ---------- pictures: monochrome phosphor tint ---------- */
.pic, .md-img {
  position: relative;
  display: inline-block;
  max-width: 100%;
  isolation: isolate;
  vertical-align: middle;
  line-height: 0;
}
.pic { margin: 0.35em 0 0.1em; box-shadow: 0 0 22px var(--glow-far); }
.pic img, .md-img img {
  display: block;
  max-width: 100%;
  filter: grayscale(1) contrast(1.15) brightness(1.15);
}
.pic img { max-height: min(60vh, 520px); width: auto; }
.md-img img { max-height: 340px; }
.pic::after, .md-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.35) 2px 3px),
    var(--fg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.pic.reveal { animation: raster 1.1s steps(22, end) both; }
@keyframes raster { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- neofetch ---------- */
.fetch { display: flex; flex-wrap: wrap; gap: 0.5em 3ch; margin: 0.3em 0; }
.fetch pre { margin: 0; font: inherit; color: var(--hi); white-space: pre-wrap; }
.fetch pre + pre { color: inherit; min-width: 0; flex: 1 1 22ch; }
.swatch { display: inline-block; width: 3ch; height: 1em; vertical-align: middle; background: var(--fg); }

@media (max-width: 600px) {
  .bezel { padding: 0; }
  .crt { border-radius: 0; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .noise, .roll, .flicker, #cursor, .pic.reveal, .crt.booting .screen { animation: none; }
}