/* The dress shared by every site page except the landing: the generated
   scene pages, the /scenes hub and the guides (build-scene-pages.mjs and
   pages.mjs), plus terms.html and privacy.html. Arcade Club, the same tokens
   and fonts as index.html (app/DESIGN.md). One file, so a restyle changes
   this stylesheet rather than rewriting every page. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bebas-neue-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/barlow-condensed-700-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
}
:root {
  --ink: #071329;
  --cobalt: #1650db;
  --lime: #d7ff3f;
  --lime-hover: #e6ff85;
  --lime-edge: #7d9a0f;
  --coral: #ff817c;
  --lilac: #b693ff;
  --cyan: #00dcea;
  --cyan-edge: #00808a;
  --on-surface: #f4f3f7;
  --muted: #b8bdd0;
  --outline: #8a92ab;
  --outline-variant: #41495f;
  --panel-low: #0a1833;
  --panel: #0e1d3c;
  --panel-high: #132446;
  --arcade: "Bebas Neue", "Barlow Condensed", sans-serif;
  --label: "Barlow Condensed", sans-serif;
  --body: "Inter", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--ink); color: var(--on-surface);
  font-family: var(--body); font-weight: 400; font-synthesis-weight: none;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
img { max-width: 100%; }

/* ---- Top bar, the landing's: ink, a 2px cobalt rule, the compact lockup. ---- */
.bar { position: sticky; top: 0; z-index: 30; background: rgba(7,19,41,.95); border-bottom: 2px solid var(--cobalt); }
.bar-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 16px; }
.bar .brand { display: inline-flex; flex: none; }
.bar .brand img { display: block; height: 32px; width: auto; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.bar nav a.txt { font-family: var(--label); font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--muted); text-decoration: none; }
.bar nav a.txt:hover { color: var(--on-surface); text-decoration: none; }
.bar .key { min-height: 44px; padding: 0 18px; font-size: 17px; }
@media (max-width: 720px) { .bar nav a.txt { display: none; } }
@media (max-width: 767px) { .bar-in { padding: 0 16px; } }
@media (max-width: 400px) { .bar-in { height: 58px; } .bar .brand img { height: 26px; } .bar .key { padding: 0 14px; font-size: 16px; } }

/* ---- Keys: solid fill, ink type, a hard edge of the same hue. ---- */
.key, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: 2px solid var(--lime);
  font-family: var(--label); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--ink); background: var(--lime); box-shadow: 0 4px 0 var(--key-edge, var(--lime-edge));
  transition: transform 90ms cubic-bezier(.2,.8,.2,1), box-shadow 90ms cubic-bezier(.2,.8,.2,1), background-color .18s;
}
.key:hover, .btn:hover { background: var(--lime-hover); border-color: var(--lime-hover); text-decoration: none; }
.key:active, .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--key-edge, var(--lime-edge)); }
.key svg { display: block; flex: none; }
.btn-cyan { background: var(--cyan); border-color: var(--cyan); --key-edge: var(--cyan-edge); }
.btn-cyan:hover { background: #4de8f2; border-color: #4de8f2; }
@media (prefers-reduced-motion: reduce) { .key:active, .btn:active { transform: none; } }

/* ---- Article column ---- */
.wrap { max-width: 760px; margin: 0 auto; padding: 36px 24px 88px; }
@media (max-width: 767px) { .wrap { padding: 28px 16px 72px; } }
.back {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--label); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none;
}
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.kicker {
  display: block; margin-top: 14px; font-family: var(--label); font-weight: 700; font-size: 16px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
}
h1 {
  font-family: var(--arcade); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(46px, 8vw, 76px); line-height: .92; margin-top: 8px; text-wrap: balance;
}
/* The accent words are still marked .lime in the generated markup; Arcade
   Club draws a headline's accent coral, as the landing does. */
h1 .lime { color: var(--coral); }
.updated { color: var(--muted); font-size: 14px; margin-top: 12px; }
.facts { color: var(--muted); font-size: 14px; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.facts b { color: var(--on-surface); font-weight: 700; }
.still {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 22px;
  border: 2px solid var(--outline-variant); border-radius: 16px; background: #000;
}
.lede {
  margin-top: 22px; padding-left: 16px; border-left: 4px solid var(--lilac);
  color: var(--on-surface); font-size: 19px; font-weight: 500; line-height: 1.5;
}
h2 {
  font-family: var(--arcade); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: 34px; line-height: 1; margin: 44px 0 12px; color: var(--on-surface);
}
p, li { color: var(--muted); font-size: 16px; line-height: 1.7; }
p + p, ul + p { margin-top: 12px; }
ul { margin: 12px 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
strong { color: var(--on-surface); font-weight: 600; }
a { color: var(--cyan); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.steps { margin: 12px 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 479px) { .cta .btn { flex: 1 1 100%; } }

/* A flat panel: terms' and privacy's callouts. */
.card {
  display: block; border: 2px solid var(--outline-variant); border-radius: 16px; background: var(--panel);
  padding: 18px 22px; margin-top: 14px;
}

/* ---- Scene page parts ---- */
.cast { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.role {
  border: 2px solid var(--outline-variant); border-radius: 999px; padding: 7px 14px;
  font-size: 14px; font-weight: 600; color: var(--on-surface); background: var(--panel);
}
.role span { color: var(--muted); font-weight: 400; }
.script { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.line {
  border: 2px solid var(--outline-variant); border-left: 6px solid var(--cyan); border-radius: 12px;
  background: var(--panel); padding: 12px 16px;
}
.line b { display: block; font-family: var(--label); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); }
.line q { color: var(--on-surface); font-size: 16px; font-style: italic; }
.more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.more a {
  display: inline-flex; align-items: center; min-height: 44px; border: 2px solid var(--outline-variant); border-radius: 12px;
  padding: 8px 14px; font-size: 14px; background: var(--panel);
}
.more a:hover { border-color: var(--cyan); text-decoration: none; }
.more a span { color: var(--muted); font-weight: 400; }
.dubs { list-style: none; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.dub { border: 2px solid var(--outline-variant); border-radius: 12px; background: var(--panel); padding: 12px 16px; }
.dub p { color: var(--on-surface); }
.dub q { color: var(--lilac); font-style: italic; }
.dub p span { color: var(--muted); font-size: 13px; }
.comments { list-style: none; margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--outline-variant); display: flex; flex-direction: column; gap: 6px; }
.comments li { font-size: 14px; }
.comments b { color: var(--cyan); font-weight: 700; margin-right: 4px; }

/* ---- The /scenes hub ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 10px; }
.grid .card { padding: 0; margin: 0; overflow: hidden; text-decoration: none; color: var(--on-surface); transition: border-color .3s; }
.grid .card:hover { border-color: var(--cyan); text-decoration: none; }
.grid .card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.grid .card div { padding: 12px 14px 14px; }
.grid .card h3 { font-family: var(--label); font-weight: 700; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; color: var(--on-surface); }
.grid .card p { font-size: 13px; line-height: 1.5; margin-top: 4px; }
.grid .card .dubs { display: inline; margin: 0; color: var(--lime); font-weight: 700; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .grid .card h3 { font-size: 16px; } .grid .card div { padding: 10px; } }
/* Ordering the library: a segmented switch, the lit choice lime. Hidden
   until the script that drives it runs, so there is never a button that
   does nothing. */
.sorts { display: inline-flex; gap: 4px; padding: 4px; margin: 20px 0 4px; border: 2px solid var(--outline-variant); border-radius: 12px; background: var(--ink); }
.sorts[hidden] { display: none; }
.sorts button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sorts button:hover { color: var(--on-surface); }
.sorts button[aria-pressed="true"] { background: var(--lime); color: var(--ink); }

/* ---- Footer ---- */
footer { border-top: 2px solid var(--cobalt); margin-top: 56px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 18px; }
footer .brand img { display: block; height: 44px; width: auto; }
footer p { font-size: 13px; line-height: 1.6; flex-basis: 100%; }
footer nav { display: flex; gap: 4px 18px; flex-wrap: wrap; flex-basis: 100%; }
footer a { font-size: 14px; line-height: 32px; }
footer nav a { color: var(--muted); font-weight: 600; }
footer nav a:hover { color: var(--on-surface); }