/* The ROOT terminal: monitor, tube and paddock. Shared by the landing (/) and the reader (/read/). */
:root {
  --phos: #ffb000;
  --phos-dim: #8a5f00;
  --phos-glow: rgba(255, 176, 0, 0.55);
  --tube: #050300;
  --case: #1a1611;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* ?embed=1 — just the monitor, for iframing into Squarespace */
body.embed {
  background: transparent;
  padding: 0;
  min-height: 100%;
}
html:has(body.embed) { background: transparent; }

/* ---------- The paddock (FIELD mode) ---------- */
.field-bg, .field-veil { position: fixed; inset: 0; display: none; pointer-events: none; }
body.field .field-bg, body.field .field-veil { display: block; }
.field-bg {
  background: url("/field.jpg") center 48% / cover no-repeat;
  filter: saturate(1.06);
  z-index: -2;
}
.field-veil {
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(5, 3, 0, 0.42) 100%);
  z-index: -1;
}
body.field .crt {
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.08),
    inset 0 -6px 14px rgba(0,0,0,0.6),
    0 30px 70px rgba(0,0,0,0.85);
}
body {
  margin: 0;
  background: radial-gradient(circle at 50% 30%, #24201a 0%, #0c0a07 70%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2vmin;
}

/* ---------- The monitor ---------- */
.crt {
  width: min(760px, calc(100vw - 12px));
  background: linear-gradient(160deg, #2b251d 0%, var(--case) 40%, #0f0d0a 100%);
  border-radius: 26px;
  padding: clamp(10px, 3vmin, 30px);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.08),
    inset 0 -6px 14px rgba(0,0,0,0.6),
    0 18px 50px rgba(0,0,0,0.7);
}
.screen-well {
  background: #000;
  border-radius: 18px;
  padding: 10px;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.95);
}
.screen {
  position: relative;
  background: var(--tube);
  border-radius: 14px;
  overflow: hidden;
  height: min(72vh, 560px);
  color: var(--phos);
  text-shadow: 0 0 5px var(--phos-glow);
  font-size: clamp(11px, 2.5vw, 14.5px);
  line-height: 1.5;
}
/* curvature vignette */
.screen::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  z-index: 6;
}
/* scanlines */
.screen::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px,
    transparent 2px, transparent 4px
  );
  z-index: 5;
}
.refresh-band {
  position: absolute; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, rgba(255,200,80,0.05), transparent);
  z-index: 4; pointer-events: none;
  animation: sweep 7s linear infinite;
}
@keyframes sweep { from { top: -120px; } to { top: 110%; } }
.screen.flicker { animation: flick 4.3s infinite; }
@keyframes flick {
  0%, 100% { opacity: 1; } 97.5% { opacity: 1; }
  98% { opacity: 0.93; } 98.5% { opacity: 1; } 99.2% { opacity: 0.96; }
}
@media (prefers-reduced-motion: reduce) {
  .screen.flicker { animation: none; }
  .refresh-band { animation: none; display: none; }
}
body.steady .screen.flicker { animation: none; }
body.steady .refresh-band { display: none; }
body.steady .screen::after { opacity: 0.4; }

/* ---------- Screen content ---------- */
.display {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 1.1rem 1.2rem 3.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--phos-dim) transparent;
  z-index: 2;
}
.display p { margin: 0 0 0.9em; }
.display pre {
  margin: 0.9em 0;
  font-family: inherit;
  font-size: clamp(7.5px, 2.1vw, 13px);
  line-height: 1.35;
  overflow-x: auto;
  text-shadow: 0 0 4px var(--phos-glow);
}
.display .sys { color: var(--phos-dim); text-shadow: none; }
.display .page-head {
  color: var(--phos-dim);
  letter-spacing: 0.2em;
  font-size: 0.72em;
  margin-bottom: 1.2em;
  text-shadow: none;
}
.display .err { color: #ff6a4d; text-shadow: 0 0 5px rgba(255,106,77,0.5); }

/* scan mode */
/* crop the typeset page's blank margins (measured: L/R ~14%, T ~20%, B ~5%) */
.scan-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 789 / 1303;
  border-radius: 3px;
}
.scan-wrap img {
  position: absolute;
  width: 129.9%;
  left: -14.9%;
  top: -22.2%;
  filter: invert(0.94) sepia(0.9) saturate(2.6) hue-rotate(-12deg) brightness(1.18) contrast(1.12);
}
body.paper .scan-wrap img { filter: none; background: #fff; }
/* page 1 opens with a chapter-drop — crop it so the text starts at the top */
.scan-wrap.p1 { aspect-ratio: 789 / 965; }
.scan-wrap.p1 img { top: -65%; }

/* external program (the ROOT game) */
.game-wrap {
  position: absolute;
  inset: 0;
  padding: 0.55rem 0.55rem 2.7rem;
  z-index: 3;
}
.game-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #000;
}

/* command line */
.cmdline {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  background: linear-gradient(to top, rgba(5,3,0,0.96) 60%, transparent);
  z-index: 7;
  cursor: text;
}
.cmdline .prompt-char { color: var(--phos); }
.cmdline input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--phos);
  font: inherit;
  text-shadow: 0 0 5px var(--phos-glow);
  caret-color: var(--phos);
  text-transform: uppercase;
}

/* ---------- Controls under the glass ---------- */
.fascia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 0.4rem 0.1rem;
}
.badge {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: #6b5f4c;
  text-transform: uppercase;
  user-select: none;
}
.keys { display: flex; gap: 0.45rem; }
.key {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #cdbfa4;
  background: linear-gradient(180deg, #383126 0%, #211c15 100%);
  border: 1px solid #0c0a07;
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 0 #0c0a07, inset 0 1px 0 rgba(255,255,255,0.09);
}
.key:active { transform: translateY(1px); box-shadow: 0 1px 0 #0c0a07; }
.key:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.power-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--phos);
  box-shadow: 0 0 8px var(--phos-glow);
}
@media (max-width: 520px) {
  body { padding: 1vmin; }
  .crt { border-radius: 16px; }
  .screen { height: 74vh; }
  .key { padding: 0.4rem 0.6rem; font-size: 0.66rem; }
  .badge { display: none; }
}

/* the /ROOT key is no use inside the Squarespace iframe */
body.embed .key-home { display: none; }

/* iOS Safari: no double-tap zoom (pinch still works), and no zoom-in when the command line is tapped
   (Safari zooms on any input whose text is under 16px) */
* { touch-action: manipulation; }
@supports (-webkit-touch-callout: none) {
  .cmdline input { font-size: 16px; }
}