:root {
  --ink: #0d0812; --night0: #150d24; --night1: #1f1536; --night2: #2c2050; --night3: #40306e; --night4: #5b4590;
  --gold0: #ffe27a; --gold1: #f2b230; --gold3: #6e4012; --blood3: #d12a3c; --teal0: #7fe0d8;
  --white: #f8f4ff; --grey0: #c8c0d8; --grey1: #8c84a0; --grey2: #5a5470;
  --pixel: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; background: var(--night0); color: var(--grey0); font: 17px/1.6 var(--text); }
img { image-rendering: pixelated; max-width: 100%; height: auto; display: block; }
a { color: var(--gold0); text-underline-offset: 3px; }
a:hover { color: var(--white); }
h1, h2, h3 { font-family: var(--pixel); color: var(--white); text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; }
h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0 0 .6em; }
h2 { font-size: 1.2rem; margin: 2.2em 0 1em; }
h2 small, h1 small { display: block; font-size: .7rem; color: var(--grey1); letter-spacing: .08em; margin-top: .3em; }
h3 { font-size: .95rem; margin: 0 0 .5em; color: var(--gold0); }
b { color: var(--white); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem max(16px, calc((100% - 1100px) / 2)); background: var(--ink); border-bottom: 2px solid var(--night3); }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--white); text-decoration: none; font-family: var(--pixel); text-transform: uppercase; letter-spacing: .06em; }
.brand b { color: var(--gold0); }
.brand img { border: 2px solid var(--night3); }
.top-nav { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.top-nav a { color: var(--grey0); text-decoration: none; }
.top-nav a:hover { color: var(--gold0); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px 3rem; }
.hero { margin: 0 -16px; }
.hero img { width: 100%; aspect-ratio: 16 / 7.2; object-fit: cover; object-position: center 42%; }
.intro { max-width: 760px; margin: 1.8rem auto 0; text-align: center; }
.intro p { margin: 0 0 1rem; }

.btn { display: inline-block; font-family: var(--pixel); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
  padding: .55em 1em; margin: .25rem; color: var(--white); text-decoration: none; background: var(--night2);
  border: 2px solid var(--grey2); box-shadow: inset 0 0 0 2px var(--night0), 0 3px 0 var(--ink); }
.btn:hover, .btn:focus-visible { border-color: var(--gold1); color: var(--gold0); }
a:focus-visible, .card:focus-visible { outline: 3px solid var(--gold1); outline-offset: 2px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.card.is-soon { cursor: default; }
.card.is-soon:hover { transform: none; border-color: var(--grey2); color: var(--grey0); }
.card.is-soon .title { font-family: var(--pixel); color: var(--grey1); letter-spacing: .2em; }
.more { color: var(--grey1); font-family: var(--pixel); font-size: .8rem; text-transform: uppercase; margin: .8rem 0 0; }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--grey0); background: var(--night1);
  border: 2px solid var(--grey2); box-shadow: inset 0 0 0 2px var(--night0), 0 4px 0 var(--ink); transition: transform .12s, border-color .12s; }
.card:hover { transform: translateY(-3px); border-color: var(--gold1); color: var(--white); }
.card img { width: 100%; aspect-ratio: 270 / 262; border-bottom: 2px solid var(--grey2); }
.card .when { font-family: var(--pixel); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold0); padding: .7rem .8rem 0; }
.card.is-soon .when { color: var(--teal0); }
.card .title { padding: .25rem .8rem .9rem; font-size: .95rem; line-height: 1.4; }

.method .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.box { background: var(--night1); border: 2px solid var(--grey2); box-shadow: inset 0 0 0 2px var(--night0); padding: 1rem 1.1rem; }
.box p { margin: 0; font-size: .95rem; }

.ep { max-width: 900px; }
.back { margin: 1.4rem 0; font-size: .9rem; }
.ep-head { display: grid; grid-template-columns: minmax(0, 270px) 1fr; gap: 28px; align-items: start; }
.ep-img { width: 100%; border: 2px solid var(--grey2); box-shadow: inset 0 0 0 2px var(--night0), 0 4px 0 var(--ink); }
.kicker { font-family: var(--pixel); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold0); margin: 0 0 .5rem; }
.ep .platforms { margin-top: 1.2rem; }
.ep .platforms .btn { margin: 0 .4rem .5rem 0; }
.sources { margin-top: 2rem; background: var(--night1); border: 2px solid var(--grey2); box-shadow: inset 0 0 0 2px var(--night0); padding: .2rem 1.4rem 1.2rem; }
.sources h2 { margin-top: 1.2rem; }
.short { color: var(--grey0); }
.links { padding-left: 1.4rem; }
.links li { margin: .35rem 0; }
.links .host { color: var(--grey1); font-size: .8rem; font-family: var(--pixel); margin-left: .3rem; }
.note { font-size: .9rem; color: var(--grey1); }
.prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; font-size: .9rem; }
.prevnext a { max-width: 48%; }
.prevnext a:last-child { text-align: right; }

.legal { max-width: 760px; padding-top: 1.6rem; }
.legal h1 { margin-top: .6em; }
.legal h2 { font-size: 1rem; margin: 1.8em 0 .5em; }
.legal .en, .stand { color: var(--grey1); font-size: .9rem; }
.center { text-align: center; padding-top: 4rem; }

.foot { border-top: 2px solid var(--night3); background: var(--ink); color: var(--grey1); font-size: .85rem; text-align: center; padding: 1.4rem 16px 2rem; }
.foot p { margin: 0 0 .5rem; }
.foot nav { display: flex; gap: 1.2rem; justify-content: center; }
.foot a { color: var(--grey0); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .ep-head { grid-template-columns: 1fr; }
  .ep-img { max-width: 270px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card .title { font-size: .85rem; }
  .top-nav { font-size: .8rem; gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }