/* Press Start 2P — SIL OFL 1.1 (codeman38), self-hosted. Retro pixel font
       for the Monkey-Island-style closing screen. */
    @font-face {
      font-family: 'Press Start 2P';
      src: url('fonts/press-start-2p.woff2') format('woff2');
      font-weight: 400; font-display: swap;
    }
    :root {
      --bg:      #070a07;
      --bg-2:    #0b110b;
      --ph:      #33ff66;  /* phosphor green */
      --ph-dim:  #1d8c44;
      --ph-dark: #11502a;
      --amber:   #ffb000;
      --red:     #ff4040;
      --cyan:    #2ad4d4;
      --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: radial-gradient(120% 120% at 50% 40%, #0d130d 0%, var(--bg) 70%);
      font-family: var(--mono);
      color: var(--ph);
      overflow: hidden;
    }
    .crt {
      position: relative;
      height: 100dvh;
      padding: clamp(0.6rem, 2vw, 2rem);
    }
    .bezel {
      position: relative;
      height: 100%;
      border-radius: 14px;
      background: var(--bg-2);
      box-shadow:
        inset 0 0 120px rgba(0, 0, 0, 0.85),
        inset 0 0 18px rgba(51, 255, 102, 0.07),
        0 0 40px rgba(51, 255, 102, 0.06);
      border: 1px solid #142a18;
      overflow: hidden;
    }
    .screen {
      height: 100%;
      overflow-y: auto;
      padding: clamp(0.8rem, 2.4vw, 2rem) clamp(0.9rem, 3vw, 2.4rem);
      font-size: clamp(0.72rem, 0.6rem + 0.6vw, 0.98rem);
      line-height: 1.45;
      /* phosphor bloom + faint RGB convergence error */
      text-shadow:
        -0.5px 0 1px rgba(255, 70, 70, 0.14),
        0.5px 0 1px rgba(60, 170, 255, 0.12),
        0 0 6px rgba(51, 255, 102, 0.45);
      scrollbar-width: thin;
      scrollbar-color: var(--ph-dark) transparent;
    }
    /* scanlines + RGB aperture grille + vignette */
    .bezel::before {
      content: '';
      position: absolute; inset: 0;
      pointer-events: none; z-index: 3;
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255,40,40,0.02) 0 1px, rgba(40,255,80,0.013) 1px 2px, rgba(40,80,255,0.02) 2px 3px),
        radial-gradient(130% 110% at 50% 50%, transparent 58%, rgba(0,0,0,0.5) 100%);
    }
    /* refresh band sweeping down the tube */
    .bezel::after {
      content: '';
      position: absolute; left: 0; right: 0; top: -15%;
      height: 14%;
      pointer-events: none; z-index: 4;
      background: linear-gradient(180deg, transparent, rgba(120,255,160,0.02) 35%, rgba(200,255,220,0.035) 50%, rgba(120,255,160,0.02) 65%, transparent);
      animation: scanband 9s linear infinite;
    }
    @keyframes scanband { 0% { top: -15%; } 100% { top: 115%; } }
    /* phosphor flicker: mostly steady, with occasional pronounced brightness drops */
    @keyframes flicker {
      0%, 100% { opacity: 1; }
      6.8% { opacity: 1; } 7.2% { opacity: 0.86; } 7.8% { opacity: 1; }
      34% { opacity: 1; } 34.6% { opacity: 0.74; } 35.2% { opacity: 0.95; }
      35.8% { opacity: 0.8; } 36.6% { opacity: 1; }
      61% { opacity: 1; } 61.3% { opacity: 0.92; } 61.8% { opacity: 1; }
      84% { opacity: 1; } 84.5% { opacity: 0.88; } 85.4% { opacity: 1; }
    }
    .screen { animation: flicker 11s infinite; }
    @media (prefers-reduced-motion: reduce) {
      .screen { animation: none; }
      .bezel::after { animation: none; display: none; }
    }

    /* CRT power-off: the picture collapses to a bright line and dies */
    @keyframes crtdie {
      0%   { transform: none; filter: none; opacity: 1; }
      55%  { transform: scaleY(0.006); filter: brightness(4); opacity: 1; }
      80%  { transform: scaleY(0.006) scaleX(0.6); filter: brightness(5); opacity: 1; }
      100% { transform: scaleY(0.006) scaleX(0); filter: brightness(6); opacity: 0; }
    }
    .bezel.dying .screen { animation: crtdie 3.5s cubic-bezier(0.55, 0, 0.6, 1) forwards; transform-origin: center; }

    /* Monkey-Island-style closing screen: violet pixel text on black */
    #byescreen {
      position: fixed; inset: 0; z-index: 50;
      background: #000;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2.2rem; padding: 2rem; text-align: center;
      cursor: pointer;
    }
    #byescreen .phrase {
      font-family: 'Press Start 2P', var(--mono);
      color: #b66dff; text-shadow: 0 0 10px rgba(182, 109, 255, 0.55);
      font-size: clamp(0.78rem, 0.55rem + 1.3vw, 1.35rem);
      line-height: 2; max-width: 34ch; min-height: 6em;
      display: flex; align-items: center;
    }
    #byescreen .flagline {
      font-family: 'Press Start 2P', var(--mono);
      color: #e3c8ff; text-shadow: 0 0 14px rgba(182, 109, 255, 0.9);
      font-size: clamp(0.7rem, 0.5rem + 1vw, 1.1rem);
    }
    #byescreen .reboothint {
      font-family: var(--mono); font-size: 0.75rem;
      color: #5a3a80; letter-spacing: 0.05em;
    }
    #byescreen .byeclose {
      position: absolute; top: 0.9rem; right: 1.1rem;
      font-family: var(--mono); font-size: 1rem;
      color: #5a3a80; padding: 0.5rem 0.7rem; cursor: pointer;
      border: 1px solid #2a1a40; border-radius: 4px; line-height: 1;
    }
    #byescreen .byeclose:hover { color: #b66dff; border-color: #5a3a80; }

    pre, .line { margin: 0; white-space: pre-wrap; word-break: break-word; }
    pre.block { white-space: pre; overflow-x: auto; }
    .dim   { color: var(--ph-dim); text-shadow: none; }
    .amber { color: var(--amber); text-shadow: 0 0 6px rgba(255,176,0,0.4); }
    .red   { color: var(--red);   text-shadow: 0 0 6px rgba(255,64,64,0.4); }
    .cyan  { color: var(--cyan);  text-shadow: 0 0 6px rgba(42,212,212,0.4); }
    .violet { color: #b66dff; text-shadow: 0 0 7px rgba(182,109,255,0.45); font-weight: 700; }
    a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed var(--ph-dark); }
    a:hover, a:focus-visible { color: var(--ph); border-bottom-color: var(--ph); outline: none; }

    .cursor { display: inline-block; width: 0.62em; background: var(--ph); color: var(--bg); animation: blink 1.1s steps(1) infinite; }
    @keyframes blink { 50% { background: transparent; color: var(--ph); } }
    @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

    #kb {
      position: absolute; left: -9999px; top: 0;
      width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
      font-size: 16px; /* keeps iOS from zooming on focus */
    }
    /* figlet banner: scale down instead of overflowing on narrow screens */
    pre.banner { font-size: clamp(5px, 1.95vw, 1em); line-height: 1.25; }
    /* matrix rain */
    pre.mx { font-size: clamp(7px, 1.35vw, 12px); line-height: 1.04; white-space: pre; overflow: hidden; text-shadow: none; }
    .mx .h { color: #e8ffe8; text-shadow: 0 0 6px #bfffce; }
    .mx .a { color: #7dffa6; }
    .mx .b { color: #3ad673; }
    .mx .c { color: #1d8c44; }
    .mx .d { color: #0e5026; }
    .mx .f { color: #ffb000; text-shadow: 0 0 8px rgba(255,176,0,0.85); font-weight: 700; }
    /* old-site reveal */
    .oldsite { margin: 0.5rem 0; max-width: 100%; }
    .oldsite img {
      display: block; width: 100%; height: auto;
      border: 1px solid var(--ph-dark);
      filter: contrast(1.04) saturate(0.92) brightness(0.96);
    }
    .oldsite figcaption {
      font-family: var(--mono); font-size: 0.78rem;
      color: var(--ph-dim); margin-top: 0.35rem;
    }
    /* clickable contact bar in the welcome banner */
    .ctas { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.55rem 0 0.25rem; }
    .ctas a {
      display: inline-block;
      border: 1px solid var(--ph-dark); border-radius: 5px;
      padding: 0.3rem 1rem;
      color: var(--cyan); text-decoration: none;
      box-shadow: inset 0 0 8px rgba(42, 212, 212, 0.06);
      transition: color 0.12s, border-color 0.12s;
    }
    .ctas a:hover, .ctas a:focus-visible {
      color: var(--amber); border-color: var(--amber);
      box-shadow: inset 0 0 10px rgba(255, 176, 0, 0.1);
    }
    /* touch controls for panes */
    .wfctl { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0; user-select: none; }
    .wfctl span {
      border: 1px solid var(--ph-dark); border-radius: 4px;
      padding: 0.2rem 0.8rem; cursor: pointer; color: var(--ph-dim);
      touch-action: manipulation;
    }
    .wfctl span:active { color: var(--amber); border-color: var(--amber); }
    /* sigint waterfall — ~80% of the screen, scale margin set from JS */
    .wfwrap { position: relative; width: min(100%, 80vw); margin: 0.35rem 0; line-height: 0; }
    .wfwrap canvas { display: block; width: 100%; height: auto; }
    .wfwrap .wf { border: 1px solid var(--ph-dark); border-top: 0; }
    .wfwrap .ov { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
    .ps1 { color: var(--ph-dim); }
    .ps1 b { color: var(--ph); font-weight: 400; }

    /* enigma — lampboard (top, amber) and keyboard (bottom, cyan) */
    pre.enigma { line-height: 1.55; }
    pre.enigma .lampon { background: var(--amber); color: var(--bg); text-shadow: 0 0 8px rgba(255, 176, 0, 0.8); }
    pre.enigma .keyon  { background: var(--cyan);  color: var(--bg); text-shadow: 0 0 8px rgba(42, 212, 212, 0.8); }

    /* hollywood — six tiles of cinematic intrusion */
    .hwood { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0.35rem 0; }
    .hwood pre {
      margin: 0; border: 1px solid var(--ph-dark); padding: 4px 6px;
      height: 11.5rem; overflow: hidden; white-space: pre;
      font-size: 0.55rem; line-height: 1.3;
    }
    @media (max-width: 700px) { .hwood { grid-template-columns: repeat(2, 1fr); } }

    /* joshua — the NORAD big board */
    .joshuamap { margin: 0.35rem 0; line-height: 0; }
    .joshuamap canvas { display: block; width: min(100%, 75vw); border: 1px solid var(--ph-dark); }

    /* noaa — satellite downlink canvas */
    .satwrap { margin: 0.35rem 0; line-height: 0; }
    .satwrap canvas { display: block; width: min(100%, 75vw); border: 1px solid var(--ph-dark); }

    /* tempest — van Eck phreaking on ourselves: raster jitter + RGB split */
    @keyframes tempest-jitter {
      0%   { transform: translate(0, 0); filter: none; }
      18%  { transform: translate(-4px, 1px) skewX(-1.2deg); filter: hue-rotate(35deg) contrast(1.7); }
      37%  { transform: translate(3px, -2px); filter: saturate(3) brightness(1.5); }
      55%  { transform: translate(-2px, 3px) skewX(1deg); filter: hue-rotate(-55deg) contrast(1.3); }
      78%  { transform: translate(4px, -1px); filter: contrast(2.2) brightness(0.6); }
      100% { transform: translate(0, 0); filter: none; }
    }
    .tempesting .screen { animation: tempest-jitter 0.13s steps(3) infinite; }
    .tempesting .screen .line, .tempesting .screen pre {
      text-shadow: 2px 0 rgba(255, 0, 80, 0.75), -2px 0 rgba(0, 160, 255, 0.75);
    }
    @media (prefers-reduced-motion: reduce) { .tempesting .screen { animation: none; } }

/* noscript fallback */
.ns {
  position: fixed; inset: 0; z-index: 10;
  background: #070a07; color: #33ff66;
  font-family: monospace; padding: 2rem; line-height: 1.8;
}
.ns a { color: #2ad4d4; }