/* Now Showing (NOW_SHOWING, dev; Jay 2026-10-30): the game switcher as a strip of film in the house Midnight Screenprint
   style, from the film-strip v2 mockup. templates/_game_nav.html renders it; base.html loads this file only with the flag on.
   Flat inks, sprocket holes on both edges (they scroll with the frames), a warm rim light from the upper left, paper grain.
   Each frame holds the game's two-layer emblem (static/emblems/<game>-back|front-128.webp). States, as in the mockup:
   not played today = the emblem in full color; done = the same print, slightly dimmed, with a green mark; the current game = lit in the gate.
   The nav keeps the game-switch class, so the rules in modern.css and gameframe.css that hide or slim the dock still find it;
   every rule here starts at :root so it wins over the old dock's per-breakpoint rules (body.game-fit ... a > span). */

:root nav.game-switch.ns {
  --ns-gold: #d9ae3a; --ns-cream: #f3e5c0; --ns-ox: #761626; --ns-good: #4caf7d; --ns-base: #0c0708; --ns-gate: 56px;
  position: relative; display: block; overflow: hidden; padding: 0; gap: 0; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 214, 150, .07), transparent 38%), linear-gradient(90deg, #140c0d, var(--ns-base) 30%, #0e0809 70%, #140c0d);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .04), inset 1px 1px 0 rgba(255, 220, 160, .08);
}
/* paper grain over the whole strip */
:root nav.game-switch.ns::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the row scrolls sideways and snaps; the sprockets are its own background, so they travel with the frames */
:root nav.game-switch.ns .ns-row { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 14px; padding: 17px 14px 15px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='2' width='10' height='6' rx='1.5' fill='%23110b0c'/%3E%3Crect x='4' y='2' width='10' height='6' rx='1.5' fill='none' stroke='%23463437' stroke-width='.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='2' width='10' height='6' rx='1.5' fill='%23110b0c'/%3E%3Crect x='4' y='2' width='10' height='6' rx='1.5' fill='none' stroke='%23463437' stroke-width='.8'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 2px, 0 calc(100% - 2px); background-attachment: local, local;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
:root nav.game-switch.ns .ns-row::-webkit-scrollbar { display: none; }

/* a frame: the gate holds the emblem, the name sits under it on the film */
:root nav.game-switch.ns a.ns-fr, :root nav.game-switch.ns a.ns-fr:visited { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: calc(var(--ns-gate) + 16px); min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  color: #d8cfcc; text-decoration: none; font-size: inherit; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
:root nav.game-switch.ns a.ns-fr:hover { background: none; transform: none; }
:root nav.game-switch.ns a.ns-fr > span.ns-gate { position: relative; display: block; width: var(--ns-gate); height: var(--ns-gate); flex: none; border-radius: 4px;
  overflow: hidden; isolation: isolate; background: #1b1214;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .12), inset 2px 2px 0 rgba(255, 220, 160, .14);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1); }
:root nav.game-switch.ns .ns-gate img { position: absolute; inset: -4%; width: 108%; height: 108%; display: block; user-select: none; pointer-events: none;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), filter 520ms cubic-bezier(.2, .8, .2, 1); }
:root nav.game-switch.ns .ns-gate > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
/* a printed frame darkens toward its edges, like a projected image */
:root nav.game-switch.ns .ns-gate::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 14px rgba(0, 0, 0, .5); }
:root nav.game-switch.ns a.ns-fr > span.ns-cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  width: 100%; height: 24px; font: 700 10.5px/12px -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: .01em; text-align: center;
  color: #d8cfcc; overflow-wrap: anywhere; }

/* hover and focus: the cut-out mark lifts off its plate */
:root nav.game-switch.ns a.ns-fr:hover .ns-gate { transform: translateY(-2px); }
:root nav.game-switch.ns a.ns-fr:hover .ns-f, :root nav.game-switch.ns a.ns-fr:focus-visible .ns-f { transform: translateY(-3%) scale(1.06); }
:root nav.game-switch.ns a.ns-fr:hover .ns-b { transform: scale(1.015); }
:root nav.game-switch.ns a.ns-fr:focus-visible { outline: none; }
:root nav.game-switch.ns a.ns-fr:focus-visible .ns-gate { outline: 2px solid var(--ns-cream); outline-offset: 2px; }

/* not played yet: the emblem in true color, so the strip reads as what is left to play (Jay, 2026-11-01: "full-color icons for unplayed
   games, with the film frame doing the work"). The frame keeps its sprockets, grain and the dark vignette above; no filters, no
   blend layers, so it stays cheap on phones. A faint warm sheen across the corner is all that is left of the old negative. */
:root nav.game-switch.ns a.ns-fr.new .ns-gate::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 200, 140, .12), transparent 45%); }
:root nav.game-switch.ns a.ns-fr.new:hover .ns-gate > img { filter: brightness(1.06) saturate(1.05); }
:root nav.game-switch.ns a.ns-fr.new > span.ns-cap { color: #e6dcd6; }

/* done today: a developed print with a green mark, slightly dimmed so what is left to play stands out */
:root nav.game-switch.ns a.ns-fr.done:not(.on) .ns-gate > img, :root nav.game-switch.ns a.ns-fr.done:not(.on) .ns-gate > svg { filter: brightness(.78) saturate(.8); }
:root nav.game-switch.ns a.ns-fr.done:not(.on):hover .ns-gate > img { filter: brightness(.9) saturate(.9); }
:root nav.game-switch.ns a.ns-fr.done:not(.on) > span.ns-cap { color: #b8aaa4; }
:root nav.game-switch.ns .ns-ok { position: absolute; right: 3px; top: 3px; z-index: 5; width: 10px; height: 10px; border-radius: 50%; background: var(--ns-good);
  box-shadow: 0 0 0 2px var(--ns-base); }

/* the current game: lit in the projector gate, a soft flicker */
:root nav.game-switch.ns a.ns-fr.on > span.ns-gate { transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 0 2px var(--ns-gold), 0 0 16px rgba(217, 174, 58, .55), 0 0 40px rgba(217, 174, 58, .2); }
:root nav.game-switch.ns a.ns-fr.on .ns-gate::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255, 236, 190, .2), transparent 70%); animation: ns-flicker 4s ease-in-out infinite; }
:root nav.game-switch.ns a.ns-fr.on > span.ns-cap { color: var(--ns-gold); }
@keyframes ns-flicker { 0%, 100% { opacity: 1 } 50% { opacity: .8 } }

/* All games: the countdown leader, printed on cream stock */
:root nav.game-switch.ns a.ns-lead > span.ns-gate { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #efe4cc, #cfc1a3); }
:root nav.game-switch.ns a.ns-lead .ns-gate::after { box-shadow: inset 0 0 10px rgba(60, 30, 20, .35); }
:root nav.game-switch.ns a.ns-lead svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
:root nav.game-switch.ns .ns-ring { fill: none; stroke: #2a1a1c; stroke-width: 3; }
:root nav.game-switch.ns .ns-ring2 { fill: none; stroke: #2a1a1c; stroke-width: 1.6; }
:root nav.game-switch.ns .ns-cross { stroke: #2a1a1c; stroke-width: 1.6; }
:root nav.game-switch.ns .ns-sweep { fill: rgba(118, 22, 38, .22); transform-origin: 60px 60px; }
:root nav.game-switch.ns a.ns-lead:hover .ns-sweep { animation: ns-sweep 1.6s linear infinite; }
:root nav.game-switch.ns a.ns-lead b { position: relative; z-index: 1; font: 400 20px/1 system-ui, sans-serif; color: #2a1a1c; }
@keyframes ns-sweep { to { transform: rotate(360deg) } }

/* desktop: the strip sits at the top of the raised game screen */
@media (min-width: 1000px) {
  :root main.game-layout > .game-main nav.game-switch.ns { margin: -6px -14px 22px; }
}
/* phones: edge to edge, a little smaller (iPhone SE shows about four and a half frames) */
@media (max-width: 640px) {
  :root nav.game-switch.ns { --ns-gate: 50px; border-radius: 0; }
  :root nav.game-switch.ns .ns-row { gap: 6px; padding: 16px 12px 13px; scroll-padding: 0 12px; }
}
/* one-screen games on phones and short laptop windows: the strip goes slim, emblems only (the names stay in title and
   aria), as the old dock drops its labels there */
@media (max-width: 640px) {
  :root body.game-fit nav.game-switch.ns { --ns-gate: 40px; }
  :root body.game-fit nav.game-switch.ns .ns-row { padding: 14px 12px 12px; gap: 7px; }
  :root body.game-fit nav.game-switch.ns a.ns-fr { width: var(--ns-gate); }
  :root body.game-fit nav.game-switch.ns a.ns-fr > span.ns-cap { display: none; }
}
@media (min-width: 1001px) and (max-height: 780px) {
  :root body.game-fit nav.game-switch.ns { --ns-gate: 40px; }
  :root body.game-fit nav.game-switch.ns .ns-row { padding: 14px 12px 12px; gap: 9px; }
  :root body.game-fit nav.game-switch.ns a.ns-fr { width: var(--ns-gate); }
  :root body.game-fit nav.game-switch.ns a.ns-fr > span.ns-cap { display: none; }
}
/* The one-screen games (Jay, 2026-10-30: show the strip on the game pages too). gameframe.css hides the old dock while a
   game plays (body.game-immersive on phones with !important, and gfr-fit, fr-fit, sd-fit, gx2 and the Timeline family on
   laptops). Every one of those layouts is a flex column whose board takes what is left (flex 1 1 0), so the strip comes back
   as a slim emblem-only band (flex: none) and the board gives up its height; the one fixed-height board (.gfx) subtracts it.
   Once the game is over (gfr-done) the full strip with names returns, as on any other page. */
:root { --ns-slim-h: 62px; }   /* the slim band: 34 px gate + 20 px of sprocket rows + 8 px below */
:root body nav.game-switch.ns { display: block !important; }
:root body:is(.game-immersive, .gfr-fit, .fr-fit, .sd-fit, .gx2):not(.gfr-done) nav.game-switch.ns { --ns-gate: 34px; flex: none; margin: 0 0 8px; border-radius: 10px; }
:root body:is(.game-immersive, .gfr-fit, .fr-fit, .sd-fit, .gx2):not(.gfr-done) nav.game-switch.ns .ns-row { padding: 11px 10px 9px; gap: 7px; scroll-padding: 0 10px; }
:root body:is(.game-immersive, .gfr-fit, .fr-fit, .sd-fit, .gx2):not(.gfr-done) nav.game-switch.ns a.ns-fr { width: var(--ns-gate); gap: 0; }
:root body:is(.game-immersive, .gfr-fit, .fr-fit, .sd-fit, .gx2):not(.gfr-done) nav.game-switch.ns a.ns-fr > span.ns-cap { display: none; }
:root body:is(.game-immersive, .gfr-fit, .fr-fit, .sd-fit, .gx2):not(.gfr-done) nav.game-switch.ns .ns-ok { width: 8px; height: 8px; right: 2px; top: 2px; }
@media (min-width: 641px) {
  :root body.game-immersive:not(.gfr-done) .game-main:has(> nav.game-switch.ns) > .gfx { height: calc(100dvh - var(--head-h, 70px) - 58px - var(--ns-slim-h)); }
}
@media (max-width: 640px) {
  /* under the slim top bar, edge to edge (the frame's .game-main has no side padding) */
  :root body.game-immersive:not(.gfr-done) nav.game-switch.ns { margin: 0; border-radius: 0; box-shadow: none; }}
@media (prefers-reduced-motion: reduce) {
  :root nav.game-switch.ns a.ns-fr.on .ns-gate::before, :root nav.game-switch.ns .ns-sweep { animation: none; }
  :root nav.game-switch.ns .ns-gate, :root nav.game-switch.ns .ns-gate img { transition: none; }
}