/* Release pages (private preview): the studio's look on plain document pages. Self-hosted fonts only. */
:root { --snow: #f5f5f7; --text: 'Geist', 'Helvetica Neue', system-ui, sans-serif; --display: 'Cormorant Garamond', 'Times New Roman', serif; --race: #ff453a;
  --line: #1e1e22; --card: #121215; --muted: #c4c4cc; --gutter: clamp(20px, 5vw, 64px); color-scheme: dark; }
* { box-sizing: border-box; }
html { background: #050506; }
body { margin: 0; color: var(--snow); background: #050506; font: 300 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--snow); text-decoration: underline; text-decoration-color: #5a5a62; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--snow); }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: #fff; color: #050506; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.draft-flag { margin: 0; padding: 10px 16px; text-align: center; font-size: 14px; color: #050506; background: #ff9f0a; }
.rl-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px var(--gutter); border-bottom: 1px solid var(--line); }
.rl-brand { font: 500 14px/1 var(--text); letter-spacing: .22em; text-decoration: none; }
.rl-brand span { color: #4fb3ff; }
.rl-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.rl-nav a { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #d2d2d8; display: inline-block; padding: 10px 0; }
.rl-nav a[aria-current='page'] { color: #fff; box-shadow: inset 0 -2px 0 var(--snow); }
main { width: min(880px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 56px 0 72px; }
h1 { margin: 6px 0 12px; font: 400 clamp(40px, 7vw, 72px)/1.05 var(--display); letter-spacing: -.01em; }
h2 { margin: 48px 0 14px; font: 500 22px/1.25 var(--text); }
.lead { margin: 0 0 24px; font-size: 19px; color: #e6e6ea; }
p, li { text-wrap: pretty; }
.tag { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #ff6b61; box-shadow: inset 0 0 0 1px rgba(255,107,97,.55); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; background: var(--snow); color: #050506; font: 600 15px/1 var(--text); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1px rgba(245,245,247,.45); }
.rl-chip { display: inline-block; padding: 2px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ff8a80; box-shadow: inset 0 0 0 1px rgba(255,107,97,.5); }
.rl-note { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.rl-pending { color: #d2d2d8; }
.rl-todo { background: rgba(255,159,10,.18); color: #ffcf7a; padding: 0 4px; }
.box { margin: 16px 0; padding: 14px 16px; background: var(--card); border-left: 2px solid var(--race); color: #d2d2d8; font-size: 15px; }
figure { margin: 28px 0; }
figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.steps { display: grid; gap: 12px; margin: 12px 0; padding: 0; list-style: none; }
.steps li { padding: 16px 18px; background: var(--card); color: #d2d2d8; }
.steps strong, .steps b { color: #fff; font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 15px; }
th, td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { width: 30%; font-weight: 500; color: #fff; }
td { color: #d2d2d8; }
.hash, code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; color: #fff; overflow-wrap: anywhere; }
code { background: #1d1d22; padding: 1px 5px; }
kbd { font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 1px 6px; box-shadow: inset 0 0 0 1px #5a5a62; }
pre { margin: 12px 0; padding: 16px; background: var(--card); color: #e6e6ea; font: 14px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
ul:not([role]), ol:not([role]) { padding-left: 1.2em; }
footer { width: min(880px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 28px 0 48px; border-top: 1px solid var(--line); font-size: 13px; color: #a1a1a6; }
footer p { margin: 0 0 8px; }
footer a { color: #d2d2d8; }
.rl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.rl-cards a { display: grid; gap: 6px; height: 100%; padding: 0 0 14px; background: var(--card); text-decoration: none; }
.rl-cards img { width: 100%; height: auto; display: block; }
.rl-cards b, .rl-cards span { padding: 0 14px; }
.rl-cards b { padding-top: 14px; font-weight: 500; }
.rl-cards span { font-size: 14px; color: var(--muted); }
.rl-404 { text-align: center; padding-top: 96px; }
@media (max-width: 760px) { .rl-cards { grid-template-columns: minmax(0, 1fr); } th { width: 38%; } }
/* ECC gate fixes (a11y + art) */
.btn[aria-disabled='true'] { background: #141417; color: #8e8e96; box-shadow: inset 0 0 0 1px rgba(245,245,247,.14); outline: 0; cursor: not-allowed; }
.btn[aria-disabled='true'] .rl-chip { color: #c4c4cc; box-shadow: inset 0 0 0 1px rgba(245,245,247,.25); }
.rl-chip { font-size: 12px; }
.sr-only { margin: -1px; padding: 0; border: 0; }
main:focus { outline: none; }
a { text-decoration-color: #8a8a93; }
.legal { text-transform: uppercase; letter-spacing: .04em; }
h1, h2 { text-wrap: balance; }
td, .rl-cards span { font-variant-numeric: tabular-nums; }
.btn, .rl-nav a, .rl-cards a, a { transition-property: color, background-color, box-shadow, transform, text-decoration-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.btn:not([aria-disabled='true']):active { transform: scale(.97); }
.rl-nav a:hover { color: #fff; }
.rl-cards a:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.rl-cards li:not(:has(img)) a { align-content: end; min-height: 120px; padding-top: 0; box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
thead th { font-size: 13px; color: #a1a1a6; width: auto; }
/* pack colour per download page (works in the preview and in the built /cyber/download/, /comet/download/) */
body[data-pack="cyber"] { --race: #4fb3ff; }
body[data-pack="cyber"] .tag { color: #7cc8ff; box-shadow: inset 0 0 0 1px rgba(79,179,255,.55); }
body[data-pack="comet"] { --race: #a99cff; }
body[data-pack="comet"] .tag { color: #c7bfff; box-shadow: inset 0 0 0 1px rgba(169,156,255,.55); }
@media (prefers-reduced-motion: reduce) { .btn, .rl-nav a, .rl-cards a, a { transition: none; } }
@media (forced-colors: active) {
  .rl-nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; }
  .btn--ghost, .tag, .rl-chip { border: 1px solid ButtonText; box-shadow: none; }
  .btn[aria-disabled='true'] { color: GrayText; border: 1px dashed GrayText; }
  .rl-todo { border: 1px dashed CanvasText; }
}
/* User-panel fixes (24 Oct): platform line, fit box, advanced details */
.rl-pc { margin: 0 0 14px; font-size: 15px; color: #e6e6ea; }
.rl-fit p { margin: 0; }
.rl-adv { margin: 32px 0 0; padding: 0 16px; background: var(--card); }
.rl-adv summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 500; color: #fff; }
.rl-adv[open] { padding-bottom: 12px; }
.rl-cards .rl-shader { font-size: 12px; color: #a1a1a6; }
/* Wed 28 round: pack screenshot above the fold, shown whole (16:9 source, no crop) */
.rl-hero { margin: 0 0 22px; }
.rl-hero img { width: auto; max-width: 100%; max-height: max(32vh, 200px); object-fit: contain; background: #000; }  /* keeps the download buttons above the fold at 1024x768 */
.rl-hero figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rl-hero .tag { margin: 0; }
/* D53 pack template (29 Oct): same 8 blocks on every pack page */
h3 { margin: 32px 0 10px; font: 500 18px/1.3 var(--text); color: #fff; }
.rl-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 24px; font-size: 15px; color: #d2d2d8; }
.rl-date { color: #fff; font-weight: 600; }
.rl-key { margin: 0 0 8px; }
.rl-key img { object-fit: contain; background: #000; }
.rl-key figcaption, .rl-strip figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rl-key .tag, .rl-strip .tag { margin: 0; }
.rl-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.rl-what li { padding: 18px; background: var(--card); box-shadow: inset 0 2px 0 var(--race); }
.rl-what h3 { margin: 0 0 8px; font-size: 17px; }
.rl-what p { margin: 0; font-size: 15px; color: #d2d2d8; }
/* D59: the strip is a scroller on every page and width: 2 tiles + a 40% peek of the next (1 + 20% on phones), with a swipe line above */
.rl-swipe { margin: 16px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted, #b9bcc4); }
.rl-swipe span { font-weight: 400; }
.rl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 2.4); gap: 14px; margin: 8px 0 10px; padding: 0 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.rl-strip li { scroll-snap-align: start; }
@media (max-width: 760px) { .rl-strip { grid-auto-columns: 80%; } }
.rl-strip figure { margin: 0; }
.rl-strip img, .rl-strip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.rl-strip:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.rl-together { padding: 4px 18px; background: var(--card); }
.rl-fit h3 { margin: 0 0 6px; font-size: 17px; }
@media (max-width: 760px) { .rl-what { grid-template-columns: minmax(0, 1fr); } }
/* D53 film slot on the pack pages: same place as on the home page, native controls */
.rl-film { margin: 16px 0 14px; }
.rl-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.rl-film figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.rl-film .tag { margin: 0; }
/* D62 (COO, 29 Oct): showcase first. Key art and film run wider than the text column; install, requirements
   and limitations fold into details under "Get it" (same on all 3 pages). */
.rl-key, .rl-film { position: relative; left: 50%; width: min(1120px, 100vw - 2 * var(--gutter)); transform: translateX(-50%); }
.rl-key { margin: 8px 0 12px; }
.rl-film video { aspect-ratio: auto; }   /* each film keeps its own frame: no bars, nothing cropped */
.rl-adv { margin: 12px 0 0; }
.rl-adv summary { gap: 10px; list-style: none; }
.rl-adv summary::-webkit-details-marker { display: none; }
.rl-adv summary::before { content: "+"; flex: none; width: 1.1em; font-weight: 600; color: var(--muted); }
.rl-adv[open] summary::before { content: "\2212"; }
.rl-adv summary h2, .rl-adv summary h3 { margin: 0; font: 500 18px/1.3 var(--text); color: #fff; }
.rl-adv summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rl-known { margin-top: 32px; }
.rl-known ul { margin: 4px 0 12px; }

/* D74: the same card pictures on the pack pages */
.rl-what li { --c: var(--race); overflow: hidden; }
.card-pic { margin: -18px -18px 14px; background: #07080b; border-bottom: 2px solid var(--c); }
.card-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: var(--fit, cover); transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%); }
.card-pic img[src$='.svg'] { image-rendering: pixelated; }
.card-pic__tag { margin: 0; padding: 7px 12px 6px; font: 600 11px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #c4c4cc; background: #07080b; border-top: 1px solid rgba(255, 255, 255, .08); }   /* D75: a strip under the picture, never on top of game text or the HUD */
.rl-what h3 { color: var(--race); }   /* D75: pack-colour card titles, as on the home page */

/* D85: a clip that fails the smoothness gate ships as its poster (plain still, no Play) */
.rl-film__still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }

/* Private review: gameplay-first hierarchy and motion-aware stills. */
.concept-detail, .rl-concept { max-width: 1120px; margin: 18px auto 32px; color: #c9c9cd; }
.concept-detail summary, .rl-concept summary { cursor: pointer; width: fit-content; padding: 10px 0; font-size: 14px; }
.compact-keyart, .rl-concept .rl-key { width: min(100%, 360px); margin: 12px 0 0; }
.still-stage { position: relative; overflow: hidden; }
.still-stage img { transform-origin: center; animation: still-pan 16s ease-in-out infinite alternate; animation-play-state: paused; }
.still-stage.is-moving img { animation-play-state: running; }
@keyframes still-pan { from { transform: scale(1); } to { transform: scale(1.045) translateX(-.8%); } }
.stage-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 8px 12px; background: #111; color: #fff; border: 1px solid #aaa; font: 600 13px/1.2 sans-serif; cursor: pointer; }
.stage-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { :root:not(.motion-on) .still-stage img { animation: none; } }