/* film.css: styles for the 38-second ASCII film. */
:root{
  color-scheme: dark;
  --bg:#000; --hud:#9dffc0; --hud-dim:rgba(157,255,192,.55); --line:rgba(157,255,192,.35); --accent:#ff5ad8;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono","Courier New",monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#000; --hud:#9dffc0; --hud-dim:rgba(157,255,192,.55); --line:rgba(157,255,192,.35); }
}
:root[data-theme="dark"]{ --bg:#000; --hud:#9dffc0; --hud-dim:rgba(157,255,192,.55); --line:rgba(157,255,192,.35); }
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;height:100%;position:relative;overflow:hidden;background:var(--bg);color:var(--hud);font-family:var(--mono);-webkit-text-size-adjust:100%}
body.paper{--hud:#1c2cf0;--hud-dim:rgba(28,44,240,.6);--line:rgba(28,44,240,.4)}
body.paper .top,body.paper .cap{text-shadow:0 0 5px #d6d3d2,0 0 2px #d6d3d2,0 0 10px #d6d3d2}
body.paper .bar button{background:rgba(214,211,210,.85)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}

/* crt layers */
.fx{position:absolute;inset:0;pointer-events:none}
.scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px);mix-blend-mode:multiply}
.vig{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 58%,rgba(0,0,0,.5) 100%);transition:opacity .6s}
body.paper .vig{opacity:.4}
.grain{opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");animation:jit .6s steps(6) infinite}
@keyframes jit{0%{background-position:0 0}20%{background-position:-40px 22px}40%{background-position:31px -57px}60%{background-position:-72px -14px}80%{background-position:18px 66px}100%{background-position:0 0}}

/* hud */
.top{position:absolute;left:0;right:0;top:env(safe-area-inset-top,0px);display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;font-size:12px;letter-spacing:.02em;pointer-events:none;text-shadow:0 0 8px currentColor}
.top span{opacity:.9}
#tc{font-variant-numeric:tabular-nums;opacity:.75}
.cap{position:absolute;left:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 68px);font-size:12px;opacity:.85;pointer-events:none;text-shadow:0 0 8px currentColor;min-height:1.2em}
.bar{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);display:flex;align-items:center;gap:14px;padding:14px 18px 18px;font-size:12px;transition:opacity .5s}
.bar.idle{opacity:0;pointer-events:none}
.bar button{background:none;border:1px solid var(--line);color:inherit;font:inherit;padding:5px 11px;border-radius:2px;cursor:pointer;min-width:74px}
.bar button:hover{border-color:currentColor}
.bar button:focus-visible,.bar input:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#seek{flex:1;-webkit-appearance:none;appearance:none;background:transparent;height:22px;cursor:pointer;margin:0}
#seek::-webkit-slider-runnable-track{height:1px;background:var(--line)}
#seek::-moz-range-track{height:1px;background:var(--line)}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:15px;margin-top:-7px;background:currentColor;border:0;border-radius:0}
#seek::-moz-range-thumb{width:9px;height:15px;background:currentColor;border:0;border-radius:0}
.hint{position:absolute;left:0;right:0;top:48%;text-align:center;font-size:13px;pointer-events:none;opacity:0;transition:opacity .6s;text-shadow:0 0 10px currentColor}
.hint.on{opacity:.9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){ .top{font-size:11px;padding:12px 14px} .bar{gap:10px;padding:12px 14px 16px} .bar button{min-width:0;padding:5px 8px} #snd{display:none} }
@media (prefers-reduced-motion: reduce){ .grain{animation:none} }

.top .back{pointer-events:auto;color:inherit;text-decoration:none;border-bottom:1px solid var(--line);margin-right:14px}
.top .back:hover{border-bottom-color:currentColor}
.top .back:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.nojs{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;font-size:14px;line-height:1.7}
.nojs a{color:inherit}