/* SCREENSHOT VIEWER: real screenshots of the apps and games, shown through the
   phosphor tube so they stay in theme. Hover (or tap on touch) shows true colour.
   Used by index.html (windows) and arcade.html (cabinets). Built by assets/shots.js
   from data-shots="file|caption;file|caption". */
.shots{ margin:12px 0 2px; border:2px solid var(--dim,#1c8a2e); background:#000; position:relative;
  user-select:none; -webkit-user-select:none; }
.shots .frame{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#000; cursor:pointer; }
.shots .frame img, .shots .frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none;
  margin:0; border:0; filter:grayscale(1) sepia(1) hue-rotate(68deg) saturate(3.2) brightness(.92) contrast(1.15);
  transition:filter .25s; }
.shots .frame img.on, .shots .frame video.on{ display:block; }
.shots .frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  transition:opacity .25s; }
.shots.color .frame img, .shots.color .frame video{ filter:none; }
.shots.color .frame::after{ opacity:.15; }
@media (hover:hover){ .shots:hover .frame img, .shots:hover .frame video{ filter:none; } .shots:hover .frame::after{ opacity:.15; } }
body.amber .shots .frame img, .shots .frame video{ filter:grayscale(1) sepia(1) hue-rotate(-14deg) saturate(2.6) brightness(.95) contrast(1.1); }
body.amber .shots.color .frame img, .shots.color .frame video{ filter:none; }
@media (hover:hover){ body.amber .shots:hover .frame img, body.amber .shots:hover .frame video{ filter:none; } }
.shots .strip{ display:flex; align-items:center; gap:6px; border-top:2px solid var(--dim,#1c8a2e);
  font-size:16px; letter-spacing:1px; padding:2px 6px; color:var(--grn,#33ff44); }
.shots .strip .cap{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.shots .strip .cap b{ color:#ffe14d; font-weight:normal; }
body.amber .shots .strip .cap b{ color:#fff0c2; }
.shots .strip .nav{ cursor:pointer; padding:0 6px; }
.shots .strip .nav:hover, .shots .strip .nav:focus-visible{ background:var(--grn,#33ff44); color:#000; outline:none; }
.shots .hint{ position:absolute; top:4px; right:6px; font-size:14px; letter-spacing:1px; color:#ffe14d;
  background:rgba(0,0,0,.7); padding:0 5px; pointer-events:none; transition:opacity .25s; }
.shots.color .hint, .shots:hover .hint{ opacity:0; }
.shots .hint .tap{ display:none; }
@media (hover:none){ .shots .hint .hov{ display:none; } .shots .hint .tap{ display:inline; } }
@media (prefers-reduced-motion:reduce){ .shots .frame img, .shots .frame::after{ transition:none; } }