/* ==========================================================================
   brendanjones.com - VIC-20 homepage stylesheet
   Palette source: VICE emulator "Mike (PAL)" VIC-20 palette (mike-pal.vpl).
   Font: BJVIC20, an original CC0 8x8 pixel font generated locally
   (see ../tools/generate_bj_vic20_pixel_font.py). No external resources.
   ========================================================================== */

@font-face {
  font-family: "BJVIC20";
  src: url("../fonts/bjvic20.woff") format("woff"),
       url("../fonts/bjvic20.ttf") format("truetype");
  font-display: block;
}

:root {
  /* The 16 VIC-20 colours, indexed exactly like the VIC 6561 chip. */
  --vic20-palette-00-black: #000000;
  --vic20-palette-01-white: #FFFFFF;
  --vic20-palette-02-red: #B61F21;
  --vic20-palette-03-cyan: #4DF0FF;
  --vic20-palette-04-purple: #B43FFF;
  --vic20-palette-05-green: #44E237;
  --vic20-palette-06-blue: #1A34FF;
  --vic20-palette-07-yellow: #DCD71B;
  --vic20-palette-08-orange: #CA5400;
  --vic20-palette-09-light-orange: #E9B072;
  --vic20-palette-10-light-red: #E79293;
  --vic20-palette-11-light-cyan: #9AF7FD;
  --vic20-palette-12-light-purple: #E09FFF;
  --vic20-palette-13-light-green: #8FE493;
  --vic20-palette-14-light-blue: #8290FF;
  --vic20-palette-15-light-yellow: #E5DE85;

  /* Live screen colours; the terminal engine rewrites these on POKE 36879. */
  --vic20-current-border-color: var(--vic20-palette-03-cyan);
  --vic20-current-screen-background-color: var(--vic20-palette-01-white);
  --vic20-current-screen-text-color: var(--vic20-palette-06-blue);

  /* Geometry. The BJVIC20 font advance is exactly 4/3 em, so a 22-column
     screen is 22 * 4/3 = 29.333em wide. These calc() values are only the
     pre-JS fallback; the engine re-quantizes them to whole device pixels
     (see recomputeQuantizedTerminalGlyphFontSizeAndScreenWidth). */
  --vic20-border-frame-minimum-thickness: clamp(14px, 3.5vmin, 56px);
  --vic20-screen-usable-width: min(calc(100vw - 2 * var(--vic20-border-frame-minimum-thickness)), 780px);
  --vic20-terminal-glyph-font-size: calc(var(--vic20-screen-usable-width) / 29.4);
}

html[data-terminal-column-count="40"] {
  --vic20-terminal-glyph-font-size: calc(var(--vic20-screen-usable-width) / 53.4);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--vic20-current-border-color);
  color: var(--vic20-current-screen-text-color);
  font-family: "BJVIC20", "Courier New", monospace;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Shared helpers
   -------------------------------------------------------------------------- */

.visually-hidden-but-screen-reader-accessible {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-to-plain-text-content-link {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 40;
  background: var(--vic20-palette-01-white);
  color: var(--vic20-palette-06-blue);
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  transition: top 120ms;
}
.skip-to-plain-text-content-link:focus { top: 0.5rem; }

:focus-visible {
  outline: 3px dashed currentColor;
  outline-offset: 2px;
}

::selection {
  background: var(--vic20-current-screen-text-color);
  color: var(--vic20-current-screen-background-color);
}

/* --------------------------------------------------------------------------
   Plain-text article (the no-JS default, and the JS "TEXT" mode)
   -------------------------------------------------------------------------- */

.plain-text-content-article {
  max-width: 46rem;
  margin: 2rem auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  background: var(--vic20-palette-01-white);
  color: var(--vic20-palette-06-blue);
  border: 6px solid var(--vic20-palette-06-blue);
  box-shadow: 0.6rem 0.6rem 0 rgba(0, 0, 32, 0.25);
  text-transform: uppercase;
  font-size: clamp(11px, 2.6vw, 15px);
  line-height: 1.55;
}

.plain-text-content-article h1 {
  font-size: 1.9em;
  line-height: 1.2;
  margin: 0.2em 0 0.1em;
}

.plain-text-content-article h2 {
  font-size: 1.25em;
  margin-top: 2.2em;
  border-bottom: 0.35em solid var(--vic20-palette-03-cyan);
  padding-bottom: 0.25em;
}

.plain-text-content-article a { color: var(--vic20-palette-06-blue); }

.plain-text-content-article .site-tagline-quote-paragraph {
  color: var(--vic20-palette-02-red);
  margin-top: 0;
}

.plain-text-content-article blockquote {
  margin: 1.2em 0;
  padding: 0.6em 1em;
  border-left: 0.6em solid var(--vic20-palette-03-cyan);
  background: var(--vic20-palette-11-light-cyan);
}

.games-catalog-table {
  border-collapse: collapse;
  width: 100%;
}
.games-catalog-table th,
.games-catalog-table td {
  border: 2px solid var(--vic20-palette-06-blue);
  padding: 0.45em 0.55em;
  text-align: left;
  vertical-align: top;
}
.games-catalog-table th { background: var(--vic20-palette-11-light-cyan); }

.tools-built-definition-list dt {
  margin-top: 1.1em;
  font-weight: normal;
  background: var(--vic20-palette-06-blue);
  color: var(--vic20-palette-01-white);
  display: inline-block;
  padding: 0.1em 0.5em;
}
.tools-built-definition-list dd { margin: 0.35em 0 0 0; }

.kestrel-hovering-pixel-art-image {
  display: block;
  width: clamp(96px, 24vw, 160px);
  height: auto;
  margin: 1rem 0;
  image-rendering: pixelated;
}

.plain-text-article-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 0.35em solid var(--vic20-palette-03-cyan);
  color: var(--vic20-palette-08-orange);
}

/* JS on + terminal mode: keep the article for screen readers only. */
html.js-enhanced-mode-active:not(.plain-text-mode-active) .plain-text-content-article {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html.plain-text-mode-active body { overflow: auto; }

/* --------------------------------------------------------------------------
   Terminal ("the monitor")
   -------------------------------------------------------------------------- */

.vic20-terminal-application-region { display: none; }

html.js-enhanced-mode-active:not(.plain-text-mode-active) .vic20-terminal-application-region {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--vic20-border-frame-minimum-thickness)
           var(--vic20-border-frame-minimum-thickness)
           calc(var(--vic20-border-frame-minimum-thickness) * 0.4);
}

html.js-enhanced-mode-active:not(.plain-text-mode-active) body { overflow: hidden; }

.vic20-monitor-and-controls-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: var(--vic20-screen-usable-width);
  max-width: 100%;
}

.vic20-screen-bezel-positioning-wrapper {
  position: relative;
  width: 100%;
}

.vic20-screen-scroll-viewport {
  width: 100%;
  height: min(23em, calc(100vh - 2 * var(--vic20-border-frame-minimum-thickness) - 3.4rem));
  height: min(23em, calc(100dvh - 2 * var(--vic20-border-frame-minimum-thickness) - 3.4rem));
  /* note: em here tracks the glyph size, so 23em = 23 character rows */
  background: var(--vic20-current-screen-background-color);
  color: var(--vic20-current-screen-text-color);
  font-size: var(--vic20-terminal-glyph-font-size);
  line-height: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--vic20-current-screen-text-color) transparent;
  cursor: text;
}

.vic20-terminal-output-single-line {
  white-space: pre-wrap;
  word-break: break-all;   /* the VIC wrapped mid-word at column 22; so do we */
  min-height: 1em;
}

/* In 40-column mode glyphs are smaller, so allow more visible rows while
   keeping roughly the same physical screen height. */
html[data-terminal-column-count="40"] .vic20-screen-scroll-viewport {
  height: min(42em, calc(100vh - 2 * var(--vic20-border-frame-minimum-thickness) - 3.4rem));
  height: min(42em, calc(100dvh - 2 * var(--vic20-border-frame-minimum-thickness) - 3.4rem));
}

.vic20-terminal-inline-command-button {
  cursor: pointer;
  text-decoration: none;
}
.vic20-terminal-inline-command-button:hover,
.vic20-terminal-inline-command-button:focus-visible {
  background: var(--vic20-current-screen-text-color);
  color: var(--vic20-current-screen-background-color);
  outline: none;
}

.vic20-blinking-block-cursor {
  display: inline-block;
  width: 1ch;
  background: currentColor;
  animation: vic20-cursor-blink-keyframes 0.9s step-end infinite;
}

@keyframes vic20-cursor-blink-keyframes {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The real capture input sits invisibly on top of the fake echoed line;
   it stays 16px so iOS does not zoom when it gains focus. */
.vic20-hidden-keyboard-capture-input {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0.01;
  border: 0; padding: 0;
  font-size: 16px;
  background: transparent;
  color: transparent;
  caret-color: transparent;
}

/* Colour-index helper classes, applied by the engine (e.g. boot garbage). */
.vic20-ink-00 { color: var(--vic20-palette-00-black); }
.vic20-ink-01 { color: var(--vic20-palette-01-white); }
.vic20-ink-02 { color: var(--vic20-palette-02-red); }
.vic20-ink-03 { color: var(--vic20-palette-03-cyan); }
.vic20-ink-04 { color: var(--vic20-palette-04-purple); }
.vic20-ink-05 { color: var(--vic20-palette-05-green); }
.vic20-ink-06 { color: var(--vic20-palette-06-blue); }
.vic20-ink-07 { color: var(--vic20-palette-07-yellow); }

.vic20-reverse-video-text-segment {
  background: var(--vic20-current-screen-text-color);
  color: var(--vic20-current-screen-background-color);
}

/* --------------------------------------------------------------------------
   CRT effects (toggleable, and calmed by prefers-reduced-motion)
   -------------------------------------------------------------------------- */

html.crt-effects-enabled .vic20-screen-scroll-viewport {
  border-radius: 0.55em;
  text-shadow: 0 0 0.09em;
  box-shadow: 0 0 3em rgba(255, 255, 255, 0.5);
}

.crt-scanline-and-vignette-overlay-layer { display: none; }

html.crt-effects-enabled .crt-scanline-and-vignette-overlay-layer {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0.55em;
  font-size: var(--vic20-terminal-glyph-font-size);
  /* one VIC "pixel" is 0.125em; draw a faint line every two of them */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(20, 20, 60, 0.11) 0,
    rgba(20, 20, 60, 0.11) 0.07em,
    transparent 0.07em,
    transparent 0.25em
  );
  box-shadow: inset 0 0 2.2em rgba(10, 10, 60, 0.28);
  animation: crt-phosphor-flicker-keyframes 6s step-end infinite;
}

@keyframes crt-phosphor-flicker-keyframes {
  0%   { opacity: 1; }
  38%  { opacity: 0.93; }
  41%  { opacity: 1; }
  73%  { opacity: 0.96; }
  76%  { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vic20-blinking-block-cursor { animation: none; }
  html.crt-effects-enabled .crt-scanline-and-vignette-overlay-layer { animation: none; }
}

/* --------------------------------------------------------------------------
   Settings toolbar (lives on the cyan border, below the screen)
   -------------------------------------------------------------------------- */

.vic20-display-settings-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.vic20-display-settings-toolbar button {
  font-family: inherit;
  font-size: clamp(9px, 1.9vw, 12px);
  text-transform: uppercase;
  background: transparent;
  color: var(--vic20-palette-06-blue);
  border: 2px solid var(--vic20-palette-06-blue);
  padding: 0.35em 0.7em;
  cursor: pointer;
}

.vic20-display-settings-toolbar button:hover {
  background: var(--vic20-palette-06-blue);
  color: var(--vic20-palette-03-cyan);
}

/* The article's "return to terminal" button (inserted by JS in text mode). */
.return-to-terminal-mode-button {
  font-family: inherit;
  font-size: 1em;
  text-transform: uppercase;
  background: var(--vic20-palette-06-blue);
  color: var(--vic20-palette-01-white);
  border: 0;
  padding: 0.5em 1em;
  cursor: pointer;
  margin-bottom: 1.5rem;
}