/* Ocean’s Scenepacks: dark, flat, one colour per collection. */
@font-face { font-family: "Anton"; src: url("img/fonts/anton-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("img/fonts/archivo-black-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url("img/fonts/barlow-condensed-700-latin.woff2") format("woff2"); font-display: swap; }
:root {
  color-scheme: dark;
  --page: #0b0b0c;
  --ink: #eef4f5;
  --muted: #adbfc3;
  --faint: #8ea7ad;
  --accent: #6ff5bf;
  --accent-ink: #03110c;
  --mint: var(--accent);
  --mint-ink: var(--accent-ink);
  --panel: rgba(3, 9, 13, .64);
  --panel-strong: rgba(4, 10, 14, .92);
  --line: rgba(225, 248, 243, .13);
  --line-strong: rgba(225, 248, 243, .24);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --title: "Anton", Impact, "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@property --accent { syntax: '<color>'; inherits: true; initial-value: #6ff5bf; }
@property --page { syntax: '<color>'; inherits: true; initial-value: #0b0b0c; }
@property --panel-strong { syntax: '<color>'; inherits: true; initial-value: rgba(4,10,14,.92); }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #adbfc3; }
@property --faint { syntax: '<color>'; inherits: true; initial-value: #8ea7ad; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(225,248,243,.13); }
@property --line-strong { syntax: '<color>'; inherits: true; initial-value: rgba(225,248,243,.24); }
/* The collection's light also colors its controls and quiet, tinted surfaces. */
body[data-world=cod], body[data-world=home][data-palette=cod] {
  --page: #0b0c0a; --ink: #f3f1e9; --muted: #c0c2b3; --faint: #a7ae96;
  --accent: #e7c78b; --accent-ink: #17170c;
  --panel: rgba(15,20,12,.72); --panel-strong: rgba(15,20,13,.96);
  --line: rgba(230,227,199,.15); --line-strong: rgba(230,227,199,.28);
}
body[data-world=six], body[data-world=home][data-palette=six] {
  --page: #090b0f; --ink: #eaf3ff; --muted: #afc4dc; --faint: #90adc9;
  --accent: #98cdff; --accent-ink: #071426;
  --panel: rgba(5,14,27,.72); --panel-strong: rgba(7,18,32,.96);
  --line: rgba(202,226,255,.15); --line-strong: rgba(202,226,255,.28);
}
body[data-world=home] { transition: --accent .7s ease, --page .7s ease, --panel-strong .7s ease, --muted .7s ease, --faint .7s ease, --line .7s ease, --line-strong .7s ease; }
body { scrollbar-color: color-mix(in srgb, var(--accent) 35%, var(--page)) var(--page); }
html:has(body[data-world=cod]) { scrollbar-color: #4c4b40 #0b0c0a; }
html:has(body[data-world=six]) { scrollbar-color: #34465c #090b0f; }
/* A dialog locks scrolling; the catalog keeps its width instead of jumping. */
html:has(body:is([data-world=cod], [data-world=six])) { scrollbar-gutter: stable; }
@media(prefers-reduced-motion:reduce) { body[data-world=home] { transition-duration: 100ms; } }
body[data-world=home][data-motion=off] { transition-duration: 100ms; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-color: #3a3a3c var(--page); scrollbar-width: thin; }
body { --mint: var(--accent); --mint-ink: var(--accent-ink); margin: 0; min-width: 320px; background: var(--page); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .45; cursor: default; }
input { caret-color: var(--mint); }
input::placeholder { color: var(--faint); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
button:focus-visible, input:focus-visible, select:focus-visible { outline-offset: 3px; }
button svg, a svg, summary svg { width: 20px; height: 20px; flex: 0 0 20px; }
[hidden] { display: none !important; }
.sr-only, .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 99; padding: 12px 20px; background: var(--mint); color: var(--mint-ink); border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header, main { position: relative; z-index: 1; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(1240px, calc(100% - 80px)); margin: 0 auto; min-height: 84px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 24px; letter-spacing: -.035em; line-height: 1; }
.brand .brand-mark { width: 31px; height: 31px; color: var(--mint); flex: 0 0 31px; }
.brand-caption { display: block; margin-top: 7px; font-size: 12px; font-weight: 400; letter-spacing: .16em; color: var(--muted); }
.site-nav { display: flex; align-self: stretch; gap: 36px; align-items: center; }
.site-nav a { display: flex; align-items: center; height: 100%; position: relative; font-size: 14px; color: var(--muted); transition: color .15s; }
.site-nav a::after { content: ""; position: absolute; height: 2px; background: var(--mint); bottom: 24px; left: 0; right: 0; transform: scaleX(0); transition: transform .35s var(--ease); }
.site-nav a[aria-current], .site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current]::after { transform: scaleX(1); }
.catalog-main { width: min(1240px, calc(100% - 80px)); margin: 0 auto; padding-bottom: 72px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); }
dialog { color: var(--ink); background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius: 16px; padding: 0; max-height: calc(100svh - 40px); box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: rgba(1,4,9,.72); backdrop-filter: blur(10px); }
body:has(dialog[open]) { overflow: hidden; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.preview-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.preview-close:hover { background: rgba(225,248,243,.07); }
.download-dialog { width: min(520px, calc(100% - 32px)); }
.preview-dialog { width: min(1280px, calc(100% - 48px)); overflow: auto; }
.preview-top { position: sticky; top: 0; background: var(--panel-strong); z-index: 4; }
.preview-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; }
.preview-main { padding: 24px; min-width: 0; }
.preview-kicker { margin-bottom: 8px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.preview-heading h2 { margin-bottom: 10px; font: 400 clamp(36px, 4.6vw, 60px)/.92 var(--title); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.preview-game { margin-left: .35em; color: var(--accent); font: 700 .42em/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .08em; vertical-align: .55em; white-space: nowrap; }
.preview-meta { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.preview-screen { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
.preview-screen video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.preview-state { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 8px 12px; background: var(--panel-strong); border-radius: 6px; font-size: 12px; pointer-events: none; }
.preview-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; text-align: center; background: var(--panel-strong); }
.preview-error p { color: var(--muted); font-size: 13px; max-width: 42ch; margin: 8px 0 16px; }
.preview-error button, .preview-tools button, .preview-tools select, .preview-bottom button, .preview-nav button, .preview-parts button, .preview-seasons button { min-height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; background: rgba(225,248,243,.04); font-size: 12px; }
.preview-dialog button:hover:not(:disabled) { border-color: var(--mint); }
.preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.preview-tools label { font-size: 12px; color: var(--muted); }
.preview-tools select option { background: var(--page); }
.preview-jump { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.preview-jump input { width: 88px; min-height: 42px; padding: 8px; border: 1px solid var(--line-strong); background: #03090d; border-radius: 8px; }
.preview-feedback { width: 100%; font-size: 12px; color: var(--mint); }
.preview-feedback:empty { display: none; }
.preview-bottom { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); align-items: center; }
.preview-bottom p { flex: 1 1 100%; font-size: 12px; color: var(--muted); }
.preview-bottom .preview-download { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }
.preview-link { width: 100%; flex: 1 1 100%; background: #03090d; border: 1px solid var(--line-strong); border-radius: 8px; padding: 12px; }
.preview-sidebar { padding: 24px 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.preview-sidebar h3 { font-weight: 500; font-size: 16px; margin-bottom: 14px; }
.preview-seasons { display: flex; gap: 6px; margin-bottom: 14px; }
.preview-seasons button { flex: 1; }
.preview-seasons button[aria-pressed=true], .preview-parts button[aria-pressed=true] { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.preview-list { margin: 0; padding: 0; list-style: none; overflow: auto; max-height: 420px; flex: 1; scrollbar-width: thin; }
.preview-list li + li { margin-top: 6px; }
.preview-episode { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: 8px; background: transparent; }
.preview-episode[aria-current=true] { border-color: var(--mint); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.preview-episode img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; }
.preview-episode strong { display: block; font-size: 12px; font-weight: 500; }
.preview-episode small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.preview-nav { display: flex; gap: 8px; padding-top: 16px; margin-top: auto; }
.preview-nav button { flex: 1; padding: 8px 5px; }
.preview-parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.action-error { position: fixed; z-index: 40; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; transform: translateX(-50%); background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,.4); color: var(--ink); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.no-script { position: relative; z-index: 1; padding: 24px; text-align: center; background: var(--panel-strong); color: var(--muted); }
@media (max-width: 1100px) {
  .site-header, .catalog-main { width: calc(100% - 48px); }
  .site-nav { gap: 24px; }
  .preview-jump { margin-left: 0; }
}
@media (max-width: 760px) {
  .site-header, .catalog-main { width: calc(100% - 40px); }
  .site-header { min-height: 110px; flex-wrap: wrap; gap: 0; padding-top: 20px; }
  .brand { font-size: 22px; }
  .brand-caption { font-size: 11px; }
  .site-nav { order: 3; width: 100%; height: 56px; gap: 28px; }
  .site-nav a { font-size: 13px; }
  .site-nav a::after { bottom: 8px; }
  .catalog-main { padding-bottom: 48px; }
  .preview-dialog { width: calc(100% - 20px); max-height: calc(100svh - 20px); }
  .preview-layout { grid-template-columns: minmax(0,1fr); }
  .preview-top { padding: 10px 16px; font-size: 11px; }
  .preview-main { padding: 16px; }
  .preview-sidebar { border-left: 0; border-top: 1px solid var(--line); padding: 16px; }
  .preview-sidebar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .preview-seasons { min-width: 210px; flex: 1; }
  .preview-list { display: flex; gap: 8px; padding-bottom: 10px; max-height: none; }
  .preview-list li { flex: 0 0 148px; }
  .preview-list li + li { margin-top: 0; }
  .preview-episode { flex-direction: column; align-items: flex-start; }
  .preview-episode img { width: 100%; height: auto; aspect-ratio: 16/9; }
  .preview-jump { width: 100%; }
  .preview-jump input { flex: 1; min-width: 0; }
  .preview-error { padding: 10px; }
  .preview-error p { font-size: 11px; margin: 5px 0 10px; }
  .preview-error button { min-height: 36px; padding: 6px 12px; }
  .preview-error strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}