/* aeyv: shared by every page (studio shell and every game world).
   Reset, skip link, sr-only, focus mechanism, the 12/4 grid, the studio strip and the view-transition opt-in.
   Colours come from each page's own stylesheet (--focus-ring, --gutter, --col-gap, --maxw, .skip colours,
   body background), except the strip, which carries its own so it looks the same inside any game. */

:root { --strip-h: 44px; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; -webkit-font-smoothing: antialiased; hyphens: manual; }
h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip { position: fixed; left: 16px; top: 10px; z-index: 60; padding: 12px 18px; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s ease; }
.skip:focus, .skip:focus-visible { transform: none; }

:focus-visible { outline: var(--focus-ring, 2px solid currentColor); outline-offset: 3px; }

.wrap { max-width: var(--maxw, 1440px); margin-inline: auto; padding-inline: var(--gutter, 16px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap, 16px); }
@media (max-width: 759px) {
  .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wrap > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* the mark: the six strokes of media/aeyv-stroke.svg as a hairline */
.mark path { fill: none; stroke: currentColor; stroke-width: 1.25px; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .skip { transition: none; }
}

/* ------------------------------------------------------------------ the studio strip
   The only studio element inside a game world: top of the page (not sticky) and the footer.
   Its colours live here, on the strip itself, so a game's palette never reaches it. */

.strip {
  --s-ink: #08090a; --s-text: #8e918d; --s-mark: #e4e6e3; --s-trace: #f2f5f1; --s-line: rgb(228 230 227 / .13);
  position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; height: var(--strip-h); margin: 0;
  padding-inline: max(16px, var(--gutter, 16px)); background: var(--s-ink); color: var(--s-text);
  box-shadow: inset 0 -1px 0 var(--s-line);
  font: 400 .75rem/1 "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; }
.strip--foot { z-index: 2; box-shadow: inset 0 1px 0 var(--s-line); }
.strip a { color: var(--s-text); text-decoration: none; }
/* the link is only as wide as its words: a stray click on the empty bar never leaves the game */
.strip__a { flex: 0 1 auto; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 44px; min-width: 0; }
.strip__mark { flex: none; width: 44px; height: 20px; overflow: visible; color: var(--s-mark); }
.strip__back { margin-left: 4px; text-decoration: underline 1px transparent; text-underline-offset: 5px; white-space: nowrap; }
.strip__n { white-space: nowrap; }
.strip__up { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
  text-decoration: underline 1px var(--s-line) !important; text-underline-offset: 5px; white-space: nowrap; }
.strip a:hover, .strip a:focus-visible { color: var(--s-mark); }
.strip__a:hover .strip__back, .strip__a:focus-visible .strip__back { text-decoration-color: var(--s-trace); }
.strip__up:hover, .strip__up:focus-visible { text-decoration-color: var(--s-trace) !important; }
.strip a:focus-visible { outline: 2px solid var(--s-trace); outline-offset: -4px; border-radius: 0; }

/* ------------------------------------------------------------------ view transitions between pages
   Every page opts in here, so a new game morphs without copying anything. The page names its own element
   (view-transition-name: tx-NNN, the same as its row's --vt) and sizes ::view-transition-*(tx-NNN) itself. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: vt-dim .22s ease-in both; }
::view-transition-new(root) { animation: vt-wake .38s var(--ease-out, cubic-bezier(.2, .7, .2, 1)) .08s both; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease-out, cubic-bezier(.2, .7, .2, 1)); }
@keyframes vt-dim  { to   { filter: brightness(.2); } }
@keyframes vt-wake { from { filter: brightness(.2); } }

/* a short page (404): the footer sits at the bottom of the screen */
.p-short { display: flex; flex-direction: column; }
.p-short > main { flex: 1 0 auto; }