/* a crt monitor on a desk in a dark room. the tube shows what a c64 showed:
   a light blue border round a blue screen, forty columns wide, and the glass
   over it is drawn by three.js. the type on the screen is sized from the
   screen's own width, so all of it scales at once like the real thing. */

:root {
  --room: #0e0c0a;
  --case: #d6cebb;
  --tube-off: #191b18;
  --border: #6c5eb5;
  --screen: #352879;
  --ink: #c9c3ff;
  --bright: #ffffff;
  --dim: #a59cf0;
  --shadow: #1d1650;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 38%, #29241e 0%, var(--room) 70%);
  color: var(--ink);
  font-family: "Press Start 2P", ui-monospace, Menlo, monospace;
  overflow: hidden;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

::selection { background: var(--ink); color: var(--screen); }

/* ---- the case ------------------------------------------------------------ */

.monitor {
  --w: min(96vw, calc(94dvh * 1.2));
  width: var(--w);
  aspect-ratio: 1.2;
  display: flex;
  flex-direction: column;
  padding: 4.2% 4.5% 0;
  background: linear-gradient(to bottom, #e6dfce 0%, var(--case) 45%, #bfb59d 100%);
  border-radius: 2.4% / 2.9%;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(0, 0, 0, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 40px 80px rgba(0, 0, 0, 0.55);
}

/* ---- the tube ------------------------------------------------------------ */

.tube {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  border-radius: 5% / 6.5%;
  overflow: hidden;
  background: var(--tube-off);
  container-type: size;
  /* the black lip the glass sits in, then the bevel of the case round it */
  box-shadow:
    0 0 0 calc(var(--w) * 0.009) #24211c,
    0 0 0 calc(var(--w) * 0.013) #a89f89,
    0 0 0 calc(var(--w) * 0.015) #efe9da;
}

.crt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--border);
}

#glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* scanlines, on the tube only */
.tube::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
}

.noglass .tube::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 8cqw rgba(0, 0, 0, 0.65);
}

/* switching on, and off again when a program loads */
.warm .crt { animation: on 0.9s ease-out; }
.off .crt { animation: off 0.45s ease-in forwards; }

@keyframes on {
  0% { transform: scale(0.02, 0.003); filter: brightness(4); }
  45% { transform: scale(1, 0.006); filter: brightness(3); }
  100% { transform: scale(1, 1); filter: none; }
}
@keyframes off {
  0% { transform: scale(1, 1); filter: none; }
  55% { transform: scale(1, 0.005); filter: brightness(3); }
  100% { transform: scale(0, 0.005); filter: brightness(5); opacity: 0; }
}

/* ---- the chin ------------------------------------------------------------ */

.chin {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.2em;
  padding: 0 1.5%;
  font: calc(var(--w) * 0.014) / 1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.label { color: #857b67; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.label b { color: #5f5747; }
.knobs { margin-left: auto; display: flex; gap: 1.4em; }
.knobs i {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a453d, #1f1c18 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}
.led {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: #ff4a3d;
  box-shadow: 0 0 0.6em #ff4a3d, inset 0 -1px 1px rgba(0, 0, 0, 0.4);
}

/* ---- the screen ---------------------------------------------------------- */

.screen {
  --cols: 40;
  width: min(86cqw, calc(82cqh * 4 / 3));
  aspect-ratio: 4 / 3;
  background: var(--screen);
  container-type: inline-size;
  overflow: hidden;
}

.inner {
  position: relative;
  height: 100%;
  padding: 1em;
  font-size: calc(100cqi / var(--cols));
  line-height: 1;
  text-transform: uppercase;
  /* phosphor bleeding a little past each letter */
  text-shadow: 0 0 0.25em rgba(201, 195, 255, 0.35);
}

.basic {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  color: var(--ink);
}

.cursor {
  display: inline-block;
  width: 1ch;
  height: 1em;
  vertical-align: top;
  background: var(--ink);
  animation: blink 0.66s steps(1) infinite;
}

/* ---- the menu ------------------------------------------------------------ */

.menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.brand { margin: 0.4em 0 0; font-size: 1em; font-weight: normal; }
.logo { display: block; width: 100%; height: auto; }
.logo .shade { fill: var(--shadow); }
.r0 { fill: #ffffff; }
.r1 { fill: #e6e2ff; }
.r2 { fill: #c9c3ff; }
.r3 { fill: #afa6f5; }
.r4 { fill: #958ae6; }

.rule {
  height: 0.5em;
  margin: 1em 0 1.1em;
  border-top: 0.14em solid var(--ink);
  border-bottom: 0.14em solid var(--dim);
}

.head { margin: 0 0 0.6em; }
.rev { background: var(--ink); color: var(--screen); padding: 0 1ch; text-shadow: none; }

.list { margin: 0; padding: 0; list-style: none; }

.entry {
  display: grid;
  grid-template-columns: 3ch 14ch 1fr;
  padding: 0.3em 1ch;
  color: var(--ink);
  text-decoration: none;
  outline: none;
}
.entry .num { color: var(--dim); }
.entry .name { color: var(--bright); }
.entry .tag { color: var(--dim); }

/* the cursor bar: reverse video, the c64's only highlight */
.entry[aria-current] { background: var(--ink); }
.entry[aria-current] span { color: var(--screen); text-shadow: none; }
.entry:focus-visible { box-shadow: inset 0 0 0 0.12em var(--bright); }

.about {
  margin: 0.8em 0 0;
  min-height: 3.9em;
  line-height: 1.3;
  color: var(--ink);
}

.help { margin: auto 0 0; color: var(--dim); line-height: 1.4; }
.keys { background: var(--dim); color: var(--screen); padding: 0 0.5ch; text-shadow: none; }
.help.touch { display: none; }
@media (pointer: coarse) {
  .help.keyed { display: none; }
  .help.touch { display: block; }
}

.scroller {
  height: 2.2em;
  margin: 0.4em -1em -0.6em;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--bright);
}
.scroll-line { white-space: nowrap; will-change: transform; }
.scroll-line span { display: inline-block; }

.arrive { animation: wipe 0.5s steps(10); }

@keyframes wipe {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---- phones: the tube fills the glass, fewer and bigger columns ---------- */

@media (max-width: 640px), (max-aspect-ratio: 1 / 1) {
  .monitor {
    --w: 100vw;
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
    padding: 12px 12px 0;
  }
  .tube { flex: 1; aspect-ratio: auto; border-radius: 22px / 26px; }
  .chin { flex: none; height: 44px; font-size: 9px; gap: 1.6em; }
  .screen {
    --cols: 24;
    width: 90cqw;
    height: 93cqh;
    aspect-ratio: auto;
  }
  .inner { overflow-y: auto; overscroll-behavior: contain; }
  .entry { grid-template-columns: 3ch 1fr; padding: 0.5em 1ch; }
  .entry .tag { grid-column: 2; margin-top: 0.45em; font-size: 0.8em; }
  .about { min-height: 5.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .arrive, .warm .crt, .off .crt { animation: none; }
}