@font-face { font-family: 'VT323'; src: url('/assets/fonts/VT323.woff2') format('woff2'); font-display: block; }

:root { --fg: #3dff8e; --bright: #c9ffdf; --dim: #1fa65c; --bg: #07110b; --glow: 61 255 142; }
[data-theme=amber] { --fg: #ffb000; --bright: #ffe6a0; --dim: #a06d00; --bg: #120c00; --glow: 255 176 0; }
[data-theme=white] { --fg: #e6e6e6; --bright: #ffffff; --dim: #8a8a8a; --bg: #0c0c0c; --glow: 230 230 230; }
[data-theme=blue]  { --fg: #6fd0ff; --bright: #d6f1ff; --dim: #2f7fa8; --bg: #04101a; --glow: 111 208 255; }

* { box-sizing: border-box; }
#crt {
  position: fixed; inset: 0; overflow: hidden; color: var(--fg);
  font-family: 'VT323', ui-monospace, monospace; font-size: clamp(16px, min(4.4vw, 3.3vh), 26px);   /* by width AND height: a page holds ~27 rows on any screen */ line-height: 1.15;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg) 80%, var(--fg) 20%) 0%, var(--bg) 70%, #000 100%);
}
#screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; visibility: hidden;
  padding: max(4vh, env(safe-area-inset-top)) 5vw max(4vh, env(safe-area-inset-bottom));
  scrollbar-width: none; overscroll-behavior: contain; cursor: text;
  text-shadow: 0 0 2px rgb(var(--glow) / .85), 0 0 8px rgb(var(--glow) / .5), 0 0 18px rgb(var(--glow) / .25);
}
#screen::-webkit-scrollbar { display: none; }
#inner { max-width: 62ch; margin: 0 auto; }

.line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.15em; }
.s-dim { color: var(--dim); }
.s-bright { color: var(--bright); }
.s-inverse { background: var(--fg); color: var(--bg); text-shadow: none; }
.s-blink { animation: blink 1s steps(1) infinite; }
.s-link { color: var(--bright); text-decoration: underline; }
a { text-shadow: inherit; cursor: pointer; }

.menu-item { text-transform: uppercase; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-shadow: inherit; cursor: default; }
.menu-item.live { cursor: pointer; }
.menu-item.live.sel, a.sel-item.live.sel { background: var(--fg); color: var(--bg); text-shadow: none; }

#prompt { display: flex; flex-wrap: wrap; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bright); }
#typed, #typedAfter { white-space: pre-wrap; overflow-wrap: anywhere; }
.cursor { display: inline-block; width: .5em; height: .9em; margin-left: 1px; background: var(--fg); box-shadow: 0 0 8px rgb(var(--glow) / .8); align-self: center; animation: blink 1s steps(1) infinite; }
/* a result link is highlighted: the cursor steps aside and the prompt says how to get back */
#crt[data-focus=link] .cursor { visibility: hidden; }
#crt[data-focus=link] #prompt::after { content: 'ENTER: OPEN   DOWN: BACK TO PROMPT'; margin-left: .7em; color: var(--dim); white-space: pre-wrap; }
#hint { margin-left: .7em; color: var(--dim); align-self: center; }
#hint[hidden], #typed:not(:empty) ~ #hint { display: none; }
#kbd { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; }
#kbd:focus-visible + .x { outline: none; }
#measure { position: absolute; visibility: hidden; white-space: pre; font: inherit; left: 0; top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- CRT effects: transform/opacity only ---- */
.fx { position: absolute; inset: 0; pointer-events: none; }
.scan { background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0) 2px, rgb(0 0 0 / .22) 3px, rgb(0 0 0 / 0) 4px); }
.vig { background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .55) 100%), linear-gradient(135deg, rgb(255 255 255 / .05), transparent 30%); box-shadow: inset 0 0 90px rgb(0 0 0 / .8); border-radius: 22px; }
.grain { inset: -50%; opacity: .07; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
.band { height: 22%; inset: auto 0 auto 0; top: -22%; background: linear-gradient(to bottom, transparent, rgb(var(--glow) / .07), transparent); animation: band 8s linear infinite; }
#screen { animation: flicker 5.3s infinite; }
.flash { background: rgb(var(--glow) / .9); opacity: 0; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@keyframes band { to { transform: translateY(560%); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .96; } 49% { opacity: 1; } 71% { opacity: .97; } 72% { opacity: 1; } }

/* ---- power on / off ---- */
#crt.on #screen { visibility: visible; animation: poweron var(--pon, .7s) cubic-bezier(.2, .8, .2, 1) both, flicker 5.3s 1s infinite; }
#crt.on .flash { animation: flashon var(--pon, .7s) ease-out both; }
#crt.off #screen { animation: poweroff .65s ease-in forwards; }
#crt.off .flash { animation: flashoff .65s ease-in forwards; }
@keyframes poweron { 0% { transform: scale(1, .003); opacity: 1; } 35% { transform: scale(1, .006); } 100% { transform: scale(1, 1); opacity: 1; } }
@keyframes flashon { 0% { opacity: .9; } 40% { opacity: .5; } 100% { opacity: 0; } }
@keyframes poweroff { 0% { transform: scale(1, 1); } 60% { transform: scale(1, .004); opacity: 1; } 100% { transform: scale(0, .004); opacity: 0; } }
@keyframes flashoff { 0% { opacity: 0; } 55% { opacity: .5; } 100% { opacity: 0; } }

#power { position: absolute; inset: 0; z-index: 5; border: 0; background: #000; color: var(--fg); font: inherit; font-size: clamp(18px, 4vw, 26px); cursor: pointer; text-shadow: 0 0 8px rgb(var(--glow) / .7); display: grid; place-items: center; }
#power[hidden] { display: none; }
.pwr-text::before { content: ''; display: inline-block; width: .5em; height: .9em; margin-right: .6em; background: var(--fg); animation: blink 1.2s steps(1) infinite; vertical-align: -.1em; }
#power:focus-visible { outline: 2px solid var(--fg); outline-offset: -8px; }

#soundToggle { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 10px; z-index: 6; padding: 2px 8px; font: inherit; font-size: .7em; color: var(--dim); background: none; border: 1px solid var(--dim); cursor: pointer; text-shadow: none; }
#soundToggle:hover, #soundToggle:focus-visible { color: var(--bg); background: var(--fg); border-color: var(--fg); outline: none; }

/* CRT OFF: plainer screen */
#crt.plain .grain, #crt.plain .band, #crt.plain .scan { display: none; }
#crt.plain #screen { animation: none; text-shadow: 0 0 2px rgb(var(--glow) / .5); }
#crt.plain .vig { box-shadow: none; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .grain, .band, .flash { display: none; }
  #screen, #crt.on #screen { animation: none; }
  .s-blink, .cursor, .pwr-text::before { animation: none; }
}
#crt.fixtures { position: static; min-height: 100%; }
#crt.fixtures #screen { position: static; }