/* ─── DOS player frame ────────────────────────────────────────
   The chrome around the emulator canvas and the CRT filter, for
   public/js-dos.html.

   These were a <style> block in that file. js-dos.html is served by
   express.static and has nowhere to carry a per-response nonce — the same
   reason its two inline <script> blocks became js/js-dos-player.js — so
   while the block was inline, style-src had to keep 'unsafe-inline' for the
   whole site. As a file it is covered by 'self' and the directive closes.

   Referenced by its bare name, like the two files beside it: a static page
   cannot call app.locals.asset. app.ts therefore serves this one
   revalidating rather than with the usual day, so a change reaches a browser
   holding yesterday's copy — see PLAYER_STYLESHEET there. */

#dos .pointer-events-none {
  display: none;
}

/* ── CRT filter ─────────────────────────────────────────────── */
#dos {
  position: relative;
  overflow: hidden;
}

/* Slight contrast boost to compensate scanline darkening */
#dos.crt-on canvas {
  filter: url(#crt-phosphor) brightness(1.02) contrast(1.04) blur(0.3px) !important;
}

/* Scanlines – dark gap after every 2 bright pixels */
#crt-scanlines {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.45) 2px,
    rgba(0, 0, 0, 0.45) 3px
  );
}

/* Vignette */
#crt-vignette {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/* RGB phosphor dot matrix (the "matice") */
#crt-matrix {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 50, 30, 0.05) 0px,
    rgba(255, 50, 30, 0.05) 1px,
    rgba(50, 255, 50, 0.05) 1px,
    rgba(50, 255, 50, 0.05) 2px,
    rgba(30, 50, 255, 0.05) 2px,
    rgba(30, 50, 255, 0.05) 3px
  );
}

#dos.crt-on #crt-scanlines,
#dos.crt-on #crt-vignette,
#dos.crt-on #crt-matrix {
  display: block;
}

/* Toggle button */
#crt-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 100;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.6);
  color: #88ff88;
  border: 1px solid rgba(136, 255, 136, 0.35);
  border-radius: 3px;
  font:
    11px/1.4 "Courier New",
    monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  user-select: none;
}

#crt-btn:hover {
  background: rgba(0, 40, 0, 0.75);
  border-color: rgba(136, 255, 136, 0.7);
}

#dos.crt-on #crt-btn {
  color: #aaffaa;
  border-color: rgba(170, 255, 170, 0.6);
}
/* ─────────────────────────────────────────────────────────── */