@font-face {
  font-family:TC Sans;
  src:url('brand/heading.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
:root {
  --paper:#f5eedc;
  --ink:#20251f;
  --red:#c73622;
  --yellow:#f1be38;
  --green:#61765b;
  --muted:#565b4e;
  --line:#c3bfac;
  --heading:'TC Sans','Arial',sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:17px/1.65 Arial,Helvetica,sans-serif;
  background-image:radial-gradient(#20251f0a .65px,transparent .65px);
  background-size:5px 5px;
}
body.viewer-open {
  overflow:hidden;
}
a {
  color:inherit;
  text-underline-offset:.24em;
}
a:hover {
  color:var(--red);
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--red);
  outline-offset:6px;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
figure {
  margin:0;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  line-height:1.05;
}
h1,h2 {
  font-family:var(--heading);
  font-weight:700;
  letter-spacing:-.055em;
}
h1 {
  font-size:clamp(3.3rem,7vw,7rem);
}
h2 {
  font-size:clamp(2.4rem,4vw,3.8rem);
}
h3 {
  font-size:1.3rem;
}
em {
  font-style:normal;
  color:var(--red);
}
.wrap {
  width:calc(100% - 112px);
  max-width:1328px;
  margin-inline:auto;
}
.eyebrow,.platform-line,.hero-platform,.fine-print,.screen-caption,.cover-top,.cover-bottom,.breadcrumb,.platform-status {
  font-family:'Courier New',monospace;
  font-size:.76rem;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.eyebrow {
  margin-bottom:1.4rem;
  font-weight:700;
}
.lead {
  font-size:1.4rem;
  line-height:1.5;
  max-width:42ch;
}
.small {
  font-size:.85rem;
  color:var(--muted);
  line-height:1.6;
}
.text-link {
  font-size:.9rem;
  font-weight:700;
  text-decoration-thickness:1px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
  background:var(--red);
  color:#fff;
  padding:1rem 1.5rem;
  text-decoration:none;
  font-size:.91rem;
  font-weight:700;
  min-height:54px;
  transition:background .15s,transform .15s;
}
.button:hover {
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-2px);
}
.skip-link {
  position:fixed;
  top:0;
  left:16px;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  z-index:10;
  transform:translateY(-120%);
}
.skip-link:focus {
  transform:translateY(0);
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:128px;
  border-bottom:2px solid var(--ink);
}
.brand {
  width:180px;
  flex-shrink:0;
}
.site-header nav {
  display:flex;
  gap:2rem;
  margin-left:auto;
}
.site-header nav a {
  font-size:.78rem;
  letter-spacing:.055em;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  padding:12px 0;
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.13fr;
  gap:2.5rem;
  align-items:center;
  padding-block:58px 50px;
}
.hero h1 {
  font-size:clamp(5rem,8.5vw,8rem);
  line-height:.9;
  margin:0 0 2rem;
  letter-spacing:-.07em;
}
.hero .lead {
  font-size:1.3rem;
  max-width:28ch;
}
.hero-description {
  margin:12px 0 28px;
  max-width:36ch;
  font-size:1rem;
  color:var(--muted);
}
.hero-platform {
  margin-top:1.5rem;
  font-size:.66rem;
  font-weight:700;
}
.hero-platform span {
  margin-inline:.4rem;
  color:var(--red);
}
.hero-machine {
  padding-top:30px;
}
.monitor {
  position:relative;
  filter:drop-shadow(0 20px 16px #20251f17);
}
.monitor-body {
  padding:26px 78px 43px 26px;
  border-radius:28px;
  background:linear-gradient(140deg,#42483d,#20251f);
  position:relative;
  box-shadow:inset 0 2px 2px #ffffff15,inset 0 -5px 10px #0004;
}
.monitor-screen {
  padding:16px 8px;
  border-radius:26px;
  background:#11150f;
  box-shadow:inset 0 0 15px #000;
}
.monitor-screen a {
  display:block;
}
.monitor-screen img {
  width:100%;
  aspect-ratio:5/4;
  object-fit:contain;
  image-rendering:pixelated;
}
/* CRT copies (site/crt/) are high-resolution renders of MAME's CRT shader,
   not pixel art: scale them smoothly so the mask and scanlines do not alias.
   The linked originals and the lightbox stay pixelated. */
.monitor-screen img.crt,.screenshot-grid img.crt {
  image-rendering:auto;
}
/* Renders of 3D scenes (the Dreamcast) are not pixel art either. */
.screenshot-grid img.smooth,.teaser-shot img,dialog img.smooth {
  image-rendering:auto;
}
.monitor-controls {
  position:absolute;
  right:24px;
  top:34px;
  bottom:40px;
  width:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
}
.speaker {
  height:96px;
  width:30px;
  margin-bottom:auto;
  background:repeating-linear-gradient(to bottom,#6b7260 0px,#6b7260 2px,transparent 2px,transparent 9px);
  border:5px solid #1c2119;
  border-radius:4px;
}
.monitor-controls i {
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid #79816e;
  background:#20251f;
  box-shadow:2px 3px 6px #0004;
}
.monitor-controls b {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#b6d087;
  box-shadow:0 0 7px #b6d08740;
}
.monitor-label {
  position:absolute;
  bottom:13px;
  left:40px;
  color:#dfe3d6;
  font-weight:700;
  letter-spacing:2px;
  font-size:.69rem;
}
.monitor-label small {
  font-family:monospace;
  letter-spacing:.5px;
  margin-left:1.5rem;
  font-size:.5rem;
  color:#b6baad;
}
.monitor-neck {
  height:39px;
  width:35%;
  margin:auto;
  background:#30372c;
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
}
.monitor-foot {
  height:14px;
  width:52%;
  margin:auto;
  border-radius:5px;
  background:var(--ink);
}
.screen-caption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:20px;
  font-size:.63rem;
}
.screen-caption>span:last-child {
  color:var(--muted);
  margin-left:8px;
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}
.machine-note {
  font-size:.73rem;
  color:var(--muted);
  text-align:center;
  margin:9px auto 0;
  max-width:40ch;
}
.platform-strip {
  border-block:1px solid var(--line);
  margin-top:8px;
}
.platform-strip .wrap {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:16px;
  font:700 .65rem/1.5 'Courier New',monospace;
  letter-spacing:.09em;
}
.platform-strip span::before {
  content:'+';
  color:var(--red);
  margin-right:13px;
}
.catalogue {
  padding-block:76px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:2rem;
  margin-bottom:36px;
}
.section-heading p:not(.eyebrow) {
  font-size:.92rem;
  color:var(--muted);
}
.section-heading .eyebrow {
  margin-bottom:14px;
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;
}
/* Every cover in a row is the same height, whatever wraps (a two-line name or
   genre line): each card spans three rows of the grid, the cover, the tagline
   and the platform line, and shares them with the other cards in its row
   through subgrid. A shorter cover stretches, its colour filling the space
   below its genre line. */
.game-card {
  display:grid;
  grid-row:span 3;
  grid-template-rows:subgrid;
  row-gap:0;
  align-content:start;
}
.game-card h3,.game-card .platform-line {
  align-self:start;
}
/* Cover names are sized from the card's own width, not the window's (the grid
   stops widening at 1328px while the window does not), so the longest name,
   BOOT SECTOR, stays on one line at every width a card has, and every name in
   a row is the same size. The container is the cover, not the card: a
   container has layout containment, which would take the card out of the
   subgrid above. */
.game-card .cover {
  container-type:inline-size;
}
.game-card .cover-name {
  font-size:clamp(1.2rem,12cqi,2.4rem);
}
.cover {
  display:flex;
  flex-direction:column;
  background:var(--red);
  color:var(--paper);
  text-decoration:none;
  box-shadow:4px 5px 0 #20251f20;
  border:1px solid #20251f20;
  overflow:hidden;
}
.cover:hover {
  color:var(--paper);
}
.cover-top {
  display:flex;
  justify-content:space-between;
  padding:10px 14px;
  align-items:center;
  font-size:.6rem;
  font-weight:700;
}
.cover-top>span:first-child {
  text-transform:none;
  font-style:italic;
  font-family:Arial,sans-serif;
  font-size:.95rem;
  letter-spacing:-.05em;
}
.cover img {
  width:100%;
  aspect-ratio:11/13;
  object-fit:cover;
  transition:transform .4s;
}
.cover:hover img {
  transform:scale(1.015);
}
.cover-name {
  font:700 clamp(1.9rem,3.1vw,3.1rem)/1 var(--heading);
  letter-spacing:-.055em;
  padding:15px 14px 3px;
  text-transform:uppercase;
}
.cover-bottom {
  font-size:.54rem;
  padding:7px 14px 14px;
  letter-spacing:.07em;
}
.scarab .cover {
  background:var(--ink);
  color:var(--yellow);
}
.cubit .cover {
  background:var(--yellow);
  color:var(--ink);
}
.wyrm .cover {
  background:#1b2347;
  color:var(--yellow);
}
.boot-sector .cover {
  background:#24472c;
  color:var(--yellow);
}
.game-card h3 {
  margin-top:24px;
  font:700 .94rem/1.4 Arial,sans-serif;
  letter-spacing:-.02em;
}
.game-card h3 a {
  text-decoration:none;
  display:block;
}
.platform-line {
  margin-top:9px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:0;
}
.art-note {
  margin-top:29px;
  color:var(--muted);
  font-size:.72rem;
}
.catalogue-page h1 {
  margin-bottom:1.5rem;
}
.catalogue-page>.lead {
  margin-bottom:3rem;
}
.formats-band {
  background:var(--ink);
  color:var(--paper);
  padding:52px 0;
}
.formats-band h2 {
  font-size:2.6rem;
}
.formats-band .text-link {
  color:var(--paper);
}
.format-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
  margin-top:40px;
}
.format-grid .eyebrow {
  color:var(--yellow);
  font-size:.69rem;
  margin-bottom:16px;
}
.format-grid h3 {
  font-family:var(--heading);
  font-size:2.4rem;
  letter-spacing:-.04em;
  margin-bottom:15px;
}
.format-grid p:not(.eyebrow) {
  font-size:.9rem;
  color:#d4d6c9;
  max-width:35ch;
}
.formats-band .fine-print {
  font-size:.61rem;
  margin-top:32px;
  color:#d4d6c9;
}
.bespoke-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding-block:78px;
}
.bespoke-section h2 {
  font-size:clamp(2.5rem,4.2vw,4rem);
}
.bespoke-section .lead {
  margin-bottom:16px;
}
.bespoke-section .button {
  margin-top:25px;
}
.bespoke-section>div:last-child {
  padding-top:15px;
}
.studio-note {
  border-top:1px solid var(--line);
  padding-block:65px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:80px;
}
.studio-note>.eyebrow {
  grid-column:1/-1;
}
.studio-note h2 {
  grid-row:2/4;
  font-size:2.7rem;
}
.studio-note p:not(.eyebrow) {
  max-width:45ch;
  margin-bottom:17px;
}
.studio-note .text-link {
  justify-self:start;
}
.site-footer {
  border-top:2px solid var(--ink);
  padding-block:32px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 32px;
  align-items:center;
}
.footer-brand {
  width:140px;
}
.site-footer>p {
  font-size:.8rem;
  color:var(--muted);
  justify-self:end;
}
.site-footer nav {
  display:flex;
  gap:24px;
  font-size:.76rem;
  grid-column:1/-1;
}
.site-footer .legal {
  grid-column:1/-1;
  justify-self:start;
  max-width:90ch;
  font-size:.72rem;
}
.site-footer .legal a {
  color:inherit;
}
.owner-input {
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  padding:0 .3em;
}
.company-details {
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:8px 24px;
  margin:20px 0 0;
}
.company-details dt {
  font-weight:700;
}
.company-details dd {
  margin:0;
}
.site-footer small {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:15px;
  font: .65rem 'Courier New',monospace;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
}
.breadcrumb {
  display:flex;
  gap:16px;
  padding-top:32px;
  font-size:.69rem;
}
.game-intro {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:100px;
  align-items:center;
  padding-block:40px 60px;
}
.game-intro h1 {
  font-size:clamp(5rem,8vw,8rem);
  text-transform:uppercase;
  margin-bottom:18px;
}
.game-intro .game-tagline {
  font-family:var(--heading);
  font-size:1.9rem;
  letter-spacing:-.035em;
  margin-bottom:23px;
  line-height:1.2;
}
.game-intro .lead {
  font-size:1.18rem;
  color:var(--muted);
  max-width:36ch;
}
.game-intro .platform-line {
  margin-block:22px;
  font-size:.74rem;
}
.game-poster {
  max-width:400px;
  justify-self:center;
  transform:rotate(2deg);
  width:100%;
}
.game-poster .cover {
  box-shadow:12px 15px 0 #20251f1a;
  container-type:inline-size;
}
/* Sized from the cover's width, as the cards' names are, so BOOT SECTOR fits. */
.game-poster .cover-name {
  font-size:clamp(2rem,11.5cqi,3.4rem);
  padding:20px 20px 0;
}
.game-poster .cover-bottom {
  padding:10px 20px 20px;
}
.game-poster figcaption {
  font-size:.65rem;
  text-align:center;
  margin-top:22px;
  transform:rotate(-2deg);
  color:var(--muted);
}
.game-detail {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:100px;
  border-top:1px solid var(--line);
  padding-top:50px;
}
.prose {
  font-size:1.04rem;
  max-width:65ch;
}
.prose h2 {
  font-size:2.35rem;
  margin:2.5rem 0 1.1rem;
  letter-spacing:-.035em;
}
.prose h2:first-child {
  margin-top:0;
}
.prose h3 {
  font-size:1.24rem;
  margin:2rem 0 .8rem;
  line-height:1.3;
}
.prose p {
  margin-bottom:1.25rem;
}
.prose ul {
  padding-left:1.3rem;
  margin-block:1.25rem;
}
.prose li {
  margin-block:.7rem;
}
.prose em {
  font-style:italic;
  color:var(--muted);
  font-size:.9rem;
}
.editions {
  align-self:start;
  background:#e9e2cf;
  border:1px solid #d4cdb8;
  padding:30px;
  position:sticky;
  top:24px;
}
.editions>.eyebrow {
  font-size:.64rem;
}
.editions h2 {
  font-size:2rem;
  margin-bottom:20px;
}
.edition-row {
  display:flex;
  gap:15px;
  justify-content:space-between;
  border-top:1px solid #c8c2ae;
  padding-block:17px;
  align-items:start;
}
.edition-row h3 {
  font-size:1rem;
}
.edition-row p {
  font-size:.72rem;
  margin-top:5px;
  color:var(--muted);
}
.edition-row strong {
  font-size:.9rem;
  white-space:nowrap;
}
.availability {
  font-weight:700;
  font-size:.9rem;
  display:flex;
  gap:10px;
  align-items:center;
  margin-block:16px;
}
.editions .small {
  font-size:.76rem;
  margin-bottom:16px;
}
.editions .text-link {
  font-size:.8rem;
}
.gameplay {
  padding-block:70px 35px;
}
.platform-panel {
  border:1px solid var(--line);
  padding:28px;
  margin-top:26px;
}
.platform-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.platform-heading h3 {
  font-size:1.6rem;
  font-family:var(--heading);
  letter-spacing:-.035em;
}
.platform-status {
  font-size:.58rem;
  padding:5px 8px;
  background:#e5dfcc;
}
.platform-panel>p {
  margin-top:13px;
  font-size:.9rem;
  color:var(--muted);
}
.screenshot-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:26px;
}
.screenshot-grid figure {
  display:flex;
  flex-direction:column;
}
.screenshot-grid a {
  display:grid;
  place-items:center;
  background:#12150f;
  padding:18px;
  flex-grow:1;
}
.screenshot-grid img {
  width:100%;
  height:auto;
  image-rendering:pixelated;
  max-width:480px;
}
.screenshot-grid figcaption {
  font:.65rem 'Courier New',monospace;
  text-transform:uppercase;
  margin-top:13px;
  letter-spacing:.05em;
}
.controls strong {
  display:block;
  color:var(--ink);
  margin-block:12px 5px;
}
.platform-panel>.small {
  font-size:.76rem;
}
.preview-lead {
  font-weight:700;
}
.preview-features {
  margin:14px 0 0 1.1em;
  font-size:.9rem;
  color:var(--muted);
}
.cheat-card {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  align-items:center;
  margin:22px 0 4px;
  padding:16px;
  border:2px solid var(--line);
}
.cheat-card img {
  display:block;
  width:120px;
  height:auto;
  box-shadow:4px 5px 0 var(--ink);
}
.cheat-card p {
  font-size:.9rem;
  color:var(--muted);
}
.cheat-card .cheat-card-title {
  font-family:var(--heading);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:4px;
}
.cheat-card-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:10px;
}
.cheat-card-links a {
  color:var(--red);
  font-weight:700;
}
.preview-grid .media-placeholder:last-child:nth-child(odd) {
  grid-column:1 / -1;
}
.preview-grid .preview-video {
  grid-column:1 / -1;
}
.preview-grid .preview-feature {
  grid-column:1 / -1;
}
.preview-grid .preview-feature img {
  max-width:640px;
}
.preview-video video {
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  margin-inline:auto;
  background:#12150f;
}
.preview-video figcaption {
  font:.65rem 'Courier New',monospace;
  text-transform:uppercase;
  margin-top:13px;
  letter-spacing:.05em;
}
.media-placeholder {
  display:grid;
  place-items:center;
  min-height:180px;
  border:2px dashed var(--line);
  padding:18px;
  text-align:center;
}
.teaser {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:center;
  padding-block:20px 76px;
}
.teaser h2 {
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1;
  margin-block:10px 18px;
}
.teaser-copy p:not(.eyebrow) {
  max-width:46ch;
  margin-bottom:18px;
}
.teaser-shot {
  background:#12150f;
  padding:18px;
}
.teaser-shot a {
  display:block;
  cursor:zoom-in;
}
.teaser-shot img {
  display:block;
  width:100%;
  height:auto;
}
.teaser-shot figcaption {
  font:.65rem 'Courier New',monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#c9c3b0;
  margin-top:12px;
}
@media (max-width:760px) {
  .teaser {
    grid-template-columns:1fr;
    gap:24px;
  }
}
.coming-soon {
  padding:25px;
  background:#e9e2cf;
}
/* A bonus game that comes with a page's editions (game.html, extra.bonus):
   deliberately quieter than the platform panels above it, with smaller
   screenshots and no price. */
.bonus {
  margin-top:38px;
  padding:26px 28px 28px;
  border:1px dashed #b2ad98;
  background:#ece6d4;
}
.bonus-heading .eyebrow {
  margin-bottom:10px;
  color:var(--muted);
  font-size:.62rem;
}
.bonus-badge {
  display:inline-block;
  padding:3px 7px;
  margin-right:6px;
  background:var(--ink);
  color:var(--paper);
}
.bonus-heading h3 {
  font:700 1.25rem/1.25 var(--heading);
  letter-spacing:-.025em;
}
.bonus-included {
  margin-top:10px;
  font-size:.86rem;
  font-weight:700;
}
.bonus-body {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:30px;
  margin-top:18px;
  align-items:start;
}
.bonus-note {
  font-size:.86rem;
  color:var(--muted);
}
.bonus-note p {
  margin-bottom:.8rem;
}
.bonus-note strong {
  color:var(--ink);
}
.bonus-note em {
  color:inherit;
  font-style:italic;
}
.bonus-note .small,.bonus-note .controls {
  font-size:.76rem;
}
.bonus-shots {
  gap:14px;
  margin-top:0;
}
.bonus-shots a {
  padding:10px;
}
.bonus-shots img {
  max-width:240px;
}
.bonus-shots figcaption {
  font-size:.56rem;
  margin-top:8px;
}
.next-game {
  display:flex;
  justify-content:space-between;
  gap:22px;
  border-top:1px solid var(--line);
  padding-block:30px 60px;
}
.editorial {
  padding-block:65px 90px;
  max-width:960px;
}
.editorial>h1 {
  font-size:clamp(3.3rem,6vw,5.7rem);
  max-width:16ch;
  margin-bottom:25px;
}
.editorial>.lead {
  max-width:52ch;
  margin-bottom:45px;
}
.editorial .prose {
  max-width:65ch;
}
.editorial .prose h2 {
  border-top:1px solid var(--line);
  padding-top:28px;
}
.commission-note {
  max-width:65ch;
  margin:40px 0 0;
  padding:20px 24px;
  border-left:4px solid var(--red);
  background:rgba(255,255,255,.35);
}
.contact-panel {
  margin-top:25px;
  background:#e9e2cf;
  padding:30px;
  max-width:65ch;
}
.contact-panel p:not(.eyebrow) {
  margin-bottom:20px;
}
dialog {
  border:0;
  max-width:min(95vw,1100px);
  max-height:94dvh;
  padding:55px 25px 20px;
  background:var(--paper);
  color:var(--ink);
  overflow:auto;
  box-shadow:0 20px 90px #0008;
}
dialog::backdrop {
  background:#11180feb;
  backdrop-filter:blur(5px);
}
dialog img {
  display:block;
  width:auto;
  height:min(73dvh,768px);
  max-width:min(90vw,960px);
  max-height:73dvh;
  object-fit:contain;
  image-rendering:pixelated;
  margin:auto;
}
dialog p {
  font-size:.85rem;
  margin-top:14px;
  text-align:center;
}
/* The CRT / Clean switch: two radio buttons and plain CSS. site.js only says
   whether the opened picture has a CRT copy (.has-crt), loads it, and selects
   CRT on each opening. */
.viewer-mode-input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.viewer-mode,#viewer-crt,.viewer-note,
#image-viewer:not(.has-crt) .viewer-mode-input {
  display:none; /* no CRT copy: no switch, and no invisible stop in the Tab order */
}
#image-viewer.has-crt .viewer-mode {
  display:flex;
  justify-content:center;
  gap:0;
  margin:-30px auto 14px;
  width:max-content;
  border:1px solid var(--ink);
  font:.7rem 'Courier New',monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.viewer-mode label {
  padding:5px 14px;
  cursor:pointer;
}
#viewer-mode-crt:checked ~ .viewer-mode label[for=viewer-mode-crt],
#viewer-mode-clean:checked ~ .viewer-mode label[for=viewer-mode-clean] {
  background:var(--ink);
  color:var(--paper);
}
#viewer-mode-crt:focus-visible ~ .viewer-mode label[for=viewer-mode-crt],
#viewer-mode-clean:focus-visible ~ .viewer-mode label[for=viewer-mode-clean] {
  outline:2px solid var(--ink);
  outline-offset:3px;
}
#image-viewer.has-crt .viewer-note {
  display:block;
  margin-top:4px;
  font-size:.75rem;
  opacity:.75;
}
#image-viewer.has-crt #viewer-mode-crt:checked ~ #viewer-crt {
  display:block;
  image-rendering:auto;
}
#image-viewer.has-crt #viewer-mode-crt:checked ~ #viewer-image,
#viewer-mode-crt:checked ~ .viewer-note .viewer-note-clean,
#viewer-mode-clean:checked ~ .viewer-note .viewer-note-crt {
  display:none;
}
.viewer-close {
  position:absolute;
  right:20px;
  top:14px;
  background:none;
  border:0;
  padding:4px 6px;
  cursor:pointer;
  font-weight:700;
}
@media(min-width:1500px) {
  .hero {
    padding-block:75px 65px;
  }
  .hero-machine {
    padding-left:20px;
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .site-header {
    gap:1.5rem;
  }
  .site-header nav {
    gap:1.2rem;
  }
  .brand {
    width:155px;
  }
  .hero {
    gap:1.5rem;
  }
  .hero h1 {
    font-size:6.3rem;
  }
  .hero .lead {
    font-size:1.1rem;
  }
  .monitor-body {
    padding:19px 57px 38px 19px;
    border-radius:23px;
  }
  .monitor-controls {
    right:16px;
    width:24px;
    gap:12px;
  }
  .monitor-controls i {
    width:24px;
    height:24px;
  }
  .speaker {
    width:24px;
    height:65px;
  }
  .game-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  .cover-name {
    font-size:2rem;
  }
  .game-card h3 {
    font-size:.85rem;
  }
  .game-intro,.game-detail {
    gap:50px;
  }
  .format-grid {
    gap:26px;
  }
  .format-grid h3 {
    font-size:1.9rem;
  }
  .formats-band h2 {
    font-size:2.2rem;
  }
  .bespoke-section,.studio-note {
    column-gap:40px;
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    min-height:0;
    flex-wrap:wrap;
    padding-block:19px 14px;
    gap:13px;
  }
  .brand {
    width:150px;
  }
  .site-header nav {
    order:2;
    flex-basis:100%;
    justify-content:space-between;
    margin:0;
    gap:8px;
    border-top:1px solid var(--line);
    padding-top:4px;
  }
  .site-header nav a {
    font-size:.65rem;
    padding-block:9px;
    white-space:nowrap;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:35px;
    gap:20px;
  }
  .hero-copy>.eyebrow {
    font-size:.62rem;
    margin-bottom:20px;
  }
  .hero h1 {
    font-size:5.8rem;
    line-height:.92;
    max-width:6ch;
    margin-bottom:24px;
  }
  .hero .lead {
    font-size:1.16rem;
    max-width:30ch;
  }
  .hero-description {
    font-size:.95rem;
    max-width:37ch;
  }
  .hero .button {
    min-width:190px;
  }
  .hero-platform {
    font-size:.57rem;
    margin-top:18px;
  }
  .hero-machine {
    padding-top:7px;
    max-width:540px;
    width:100%;
    margin:auto;
  }
  .monitor-body {
    padding:18px 58px 35px 18px;
  }
  .monitor-screen {
    padding:8px 4px;
    border-radius:16px;
  }
  .monitor-label {
    left:27px;
    bottom:10px;
    font-size:.6rem;
  }
  .monitor-label small {
    font-size:.41rem;
    margin-left:12px;
  }
  .monitor-controls {
    top:27px;
    bottom:32px;
  }
  .monitor-neck {
    height:25px;
  }
  .monitor-foot {
    height:11px;
  }
  .screen-caption {
    font-size:.55rem;
    margin-top:18px;
    gap:7px;
  }
  .screen-caption>span:last-child {
    margin-left:0;
  }
  .machine-note {
    font-size:.66rem;
    max-width:35ch;
  }
  .platform-strip .wrap {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:.53rem;
    padding-block:15px;
  }
  .platform-strip span::before {
    margin-right:6px;
  }
  .catalogue {
    padding-block:43px;
  }
  .section-heading {
    display:block;
    margin-bottom:25px;
  }
  .section-heading h2 {
    font-size:2.6rem;
  }
  .section-heading>p {
    margin-top:17px;
    font-size:.85rem;
  }
  .section-heading .text-link {
    display:inline-block;
    margin-top:20px;
  }
  .game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 16px;
  }
  .cover-top {
    padding:7px 9px;
    font-size:.5rem;
  }
  .cover-top>span:first-child {
    font-size:.75rem;
  }
  .cover-name {
    font-size:clamp(1.4rem,6vw,2.6rem);
    padding:11px 9px 2px;
  }
  .cover-bottom {
    font-size:.44rem;
    padding:5px 9px 10px;
    letter-spacing:0;
  }
  .game-card h3 {
    margin-top:16px;
    font-size:.83rem;
    line-height:1.4;
  }
  .game-card .platform-line {
    font-size:.52rem;
    line-height:1.7;
  }
  .art-note {
    font-size:.66rem;
    margin-top:25px;
  }
  .formats-band {
    padding-block:38px;
  }
  .format-grid {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:25px;
  }
  .format-grid>div+div {
    padding-top:24px;
    border-top:1px solid #ffffff30;
  }
  .format-grid .eyebrow {
    margin-bottom:11px;
  }
  .format-grid h3 {
    font-size:2.2rem;
    margin-bottom:10px;
  }
  .format-grid p:not(.eyebrow) {
    font-size:.85rem;
  }
  .formats-band .fine-print {
    font-size:.55rem;
    line-height:1.8;
  }
  .bespoke-section {
    grid-template-columns:1fr;
    padding-block:43px;
    gap:15px;
  }
  .bespoke-section h2 {
    font-size:2.8rem;
  }
  .bespoke-section .lead {
    font-size:1.18rem;
  }
  .bespoke-section>div:last-child {
    padding-top:5px;
  }
  .bespoke-section p {
    font-size:.97rem;
  }
  .studio-note {
    display:block;
    padding-block:40px;
  }
  .studio-note h2 {
    font-size:2.4rem;
    margin-bottom:24px;
  }
  .studio-note p:not(.eyebrow) {
    font-size:.95rem;
  }
  .site-footer {
    gap:15px;
    padding-block:24px;
  }
  .site-footer>p {
    font-size:.67rem;
    max-width:14ch;
    text-align:right;
  }
  .footer-brand {
    width:125px;
  }
  .site-footer nav {
    font-size:.7rem;
    gap:18px;
    flex-wrap:wrap;
  }
  .site-footer small {
    font-size:.53rem;
    gap:10px;
    line-height:1.7;
  }
  .game-intro {
    grid-template-columns:1fr;
    gap:38px;
    padding-block:30px 40px;
  }
  .game-intro h1 {
    font-size:4.5rem;
    overflow-wrap:anywhere;
  }
  .game-intro .eyebrow {
    font-size:.61rem;
  }
  .game-intro .game-tagline {
    font-size:1.6rem;
  }
  .game-intro .lead {
    font-size:1.12rem;
  }
  .game-poster {
    max-width:300px;
    width:85%;
  }
  .game-detail {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:32px;
  }
  .prose {
    font-size:.97rem;
  }
  .prose h2 {
    font-size:2rem;
  }
  .editions {
    position:static;
    padding:24px;
  }
  .gameplay {
    padding-block:43px 22px;
  }
  .platform-panel {
    padding:18px;
    margin-top:20px;
  }
  .platform-heading {
    display:block;
  }
  .platform-heading h3 {
    font-size:1.4rem;
  }
  .platform-status {
    display:inline-block;
    margin-top:12px;
    font-size:.52rem;
  }
  .platform-panel>p {
    font-size:.84rem;
  }
  .screenshot-grid {
    grid-template-columns:1fr;
    gap:23px;
    margin-top:20px;
  }
  .screenshot-grid a {
    padding:12px;
  }
  .screenshot-grid figcaption {
    font-size:.58rem;
  }
  .bonus {
    padding:18px;
  }
  .bonus-body {
    grid-template-columns:1fr;
    gap:18px;
  }
  .bonus-shots {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .bonus-shots a {
    padding:6px;
  }
  .next-game {
    flex-direction:column;
    padding-bottom:40px;
  }
  .editorial {
    padding-block:40px 50px;
  }
  .editorial>h1 {
    font-size:3.2rem;
    overflow-wrap:anywhere;
  }
  .editorial>.lead {
    font-size:1.18rem;
    margin-bottom:30px;
  }
  .contact-panel {
    padding:22px;
  }
  .catalogue-page h1 {
    font-size:3.5rem;
  }
  dialog {
    padding-inline:15px;
    max-width:95vw;
  }
  dialog img {
    width:100%;
    height:auto;
    max-height:73dvh;
  }
  dialog p {
    font-size:.72rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}
.game-clip {
  max-width:680px;
  margin:30px auto 40px;
}
.game-clip video {
  display:block;
  width:100%;
  height:auto;
  background:#12150f;
  image-rendering:pixelated;
}
.game-clip figcaption {
  font:.65rem/1.7 "Courier New",monospace;
  text-transform:uppercase;
  margin-top:12px;
  color:var(--muted);
}

/* The CRT video player (static/crt-player/crt-player.js, RETRO-150). It exists
   only when JavaScript and WebGL2 work; without it the <video> above is shown
   exactly as before. Every rule is scoped to .crt-player so the player looks
   the same in the page, in full screen and in a pop-out window. The canvas sits
   BEHIND the video: with CRT on, the video's own picture is moved out of its
   box and its background is transparent, so the native controls paint over
   the CRT picture and keep working. */
.crt-player {
  display:flex;
  flex-direction:column;
  width:100%;
}
.preview-video .crt-player {
  max-width:640px;
  margin-inline:auto;
}
.crt-player .crt-frame {
  position:relative;
  width:100%;
  aspect-ratio:var(--crt-aspect);
  background:#12150f;
}
.crt-player .crt-frame canvas {
  position:absolute;
  left:var(--crt-left, 0);
  top:var(--crt-top, 0);
  width:var(--crt-width, 100%);
  height:var(--crt-height, 100%);
  z-index:0;
  visibility:hidden;
}
.crt-player .crt-frame video {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  object-fit:contain;
  z-index:1;
  background:transparent;
  image-rendering:auto;
}
.crt-player.crt-pixelated .crt-frame video {
  image-rendering:pixelated;
}
.crt-player.crt-on .crt-frame canvas {
  visibility:visible;
}
.crt-player.crt-on .crt-frame video {
  object-position:0 -100000px;
}
.crt-player .crt-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-top:10px;
  font:.7rem 'Courier New',monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.crt-player .crt-mode-input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
/* The same switch as the screenshot viewer's CRT / Clean. */
.crt-player .crt-toggle {
  display:flex;
  border:1px solid var(--ink);
}
.crt-player .crt-toggle label {
  padding:5px 14px;
  cursor:pointer;
}
.crt-player .crt-mode-crt:checked ~ .crt-toggle .crt-label-crt,
.crt-player .crt-mode-clean:checked ~ .crt-toggle .crt-label-clean {
  background:var(--ink);
  color:var(--paper);
}
.crt-player .crt-mode-crt:focus-visible ~ .crt-toggle .crt-label-crt,
.crt-player .crt-mode-clean:focus-visible ~ .crt-toggle .crt-label-clean {
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.crt-player .crt-button {
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  padding:5px 12px;
  cursor:pointer;
}
.crt-player .crt-button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.crt-player .crt-note {
  flex-basis:100%;
  margin:0;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
}
/* Full screen and the pop-out window: the picture fills the space above the
   controls. */
.crt-player:fullscreen,
.crt-player.in-pip {
  height:100%;
  max-width:none;
  margin:0;
  padding:12px;
  background:#000;
  --ink:#f5eedc;
  --paper:#20251f;
  --muted:#c3bfac;
  color:var(--ink);
}
.crt-player:fullscreen .crt-frame,
.crt-player.in-pip .crt-frame {
  flex:1 1 auto;
  min-height:0;
  aspect-ratio:auto;
  background:#000;
}
.crt-player.in-pip .crt-fullscreen,
.crt-player.in-pip .crt-popout {
  display:none;
}
.crt-pip-body {
  margin:0;
  height:100vh;
  background:#000;
}
.crt-placeholder {
  font:.7rem 'Courier New',monospace;
  text-transform:uppercase;
  color:var(--muted);
  border:1px dashed var(--line);
  padding:40px 12px;
  text-align:center;
}

.cover .cover-logo {
  width: 68px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.cubit .cover .cover-logo {
  filter: none;
}
.cover:hover .cover-logo {
  transform: none;
}
/* Five header links on the narrowest phones (320 px): keep each on one line. */
@media(max-width:370px) {
  .site-header nav a {
    font-size:.58rem;
    letter-spacing:.02em;
  }
}