/* Reefpirate Games: one page, one accent, no framework. */

/* The greys are the game's palette.json (gray.darkest through gray.white),
   so the page and the city it draws are the same ink. Teal is the mark's,
   and the only accent on the page: the game's cyan and its sign colours stay
   inside the city and the screenshots. */
:root {
  --ink:    #0b0f14;   /* gray.darkest, every page ground */
  --panel:  #151b22;   /* gray.darker, cards and bars */
  --line:   #232b33;   /* gray.dark, hairlines */
  --stroke: #42505f;   /* gray.medium, outline buttons */
  --muted:  #6b7c8f;   /* gray.light, eyebrows and footer */
  --dim:    #9fb1c5;   /* gray.lighter, captions */
  --text:   #eaf2ff;   /* gray.white: headings, short copy, emphasis */
  --read:   #c5cfdb;   /* between gray.lighter and gray.white: long prose. Full white at
                          paragraph length on ink is glare; this reads at ~12:1 without it. */
  --teal:   #2ec3b5;   /* sampled from the RP GAMES mark */
  --teal-lit: #46dfd0;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.6 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.lb-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- hero: the game's city, the mark standing on its horizon ---- */

.hero {
  position: relative;
  height: clamp(560px, 92vh, 820px);
  overflow: hidden;
  /* The no-JS ground: the horizon glow at 80%, where city.js puts it, so a
     page without the canvas still has a horizon for the mark to stand on. */
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink) 48%,
      rgba(0, 90, 120, 0.4) 79%, rgba(0, 245, 255, 0.28) 80%, var(--ink) 80.6%, var(--ink) 100%);
}

.hero.short { height: 300px; }

.city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The HUD corner frame the game draws around its menu: 14px in, 26px arms.
   Eight gradients on one element, so it costs no markup and no image. */
.frame {
  position: absolute;
  inset: 14px;
  pointer-events: none;
  opacity: 0.85;
  background:
    linear-gradient(var(--teal), var(--teal)) top left / 26px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) top left / 1px 26px no-repeat,
    linear-gradient(var(--teal), var(--teal)) top right / 26px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) top right / 1px 26px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom left / 26px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom left / 1px 26px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom right / 26px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom right / 1px 26px no-repeat;
}

/* The mark sits in the sky, centred on the space above the horizon. */
.masthead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 24px;
}

.masthead a { display: block; }

.wordmark {
  width: min(580px, 80vw);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(46, 195, 181, 0.35));
}

.hero.short .wordmark { width: min(300px, 70vw); }

.tagline {
  margin: 0;
  color: var(--dim);
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.26em;
}

.hero.short .tagline { font-size: 13px; letter-spacing: 0.24em; }

/* The nav lives on the floor, where the game keeps its menu footer. */
.site-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.hero.short .masthead { height: 74%; }
.hero.short .site-nav { height: 26%; }

.site-nav a {
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 120ms ease;
}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--teal); outline: none; }

/* ---- the game section ---- */

main { flex: 1; }

.game {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 48px 0;
}

/* The eyebrow on a horizon rule: the same lit line the city ends on. */
.rule {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(46, 195, 181, 0) 0%, rgba(46, 195, 181, 0.7) 12%, rgba(46, 195, 181, 0.7) 88%, rgba(46, 195, 181, 0) 100%);
  box-shadow: 0 0 12px rgba(46, 195, 181, 0.35);
}

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 552px;
  gap: 64px;
  align-items: center;
  margin-top: 44px;
}

.intro-copy { display: flex; flex-direction: column; gap: 24px; }

.game-logo { width: min(400px, 100%); }

.pitch {
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
  text-wrap: pretty;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* The board's COMMIT TURN and BACK, as the page's two buttons. */
.btn, .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  background: var(--teal);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover, .btn:focus-visible, .cta:hover, .cta:focus-visible { background: var(--teal-lit); outline: none; }

.btn svg { width: 18px; height: 18px; fill: currentColor; }

.btn.outline {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--stroke);
  font-weight: 600;
}

.btn.outline:hover, .btn.outline:focus-visible { background: var(--panel); border-color: var(--teal); color: var(--teal); }

.note { color: var(--muted); font-size: 15px; margin: 0; }

.note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.note a:hover { color: var(--teal); }

/* ---- the trailer ---- */

.intro-side { display: flex; flex-direction: column; gap: 16px; width: min(552px, 100%); }

.trailer {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.trailer iframe { width: 100%; height: 100%; border: 0; display: block; }

.trailer-facade {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  width: 100%;
}

.trailer-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 200ms ease; }
.trailer-facade:hover img, .trailer-facade:focus-visible img { opacity: 1; }
.trailer-facade .play-badge { padding: 12px 26px; font-size: 15px; }
.trailer-facade .play-badge svg { width: 18px; height: 18px; }
.trailer-facade:hover .play-badge, .trailer-facade:focus-visible .play-badge { background: var(--teal-lit); }

/* ---- itch store widget ---- */

/* The widget is a fixed 552x167 iframe, so it cannot reflow. The wrapper
   reserves the scaled box and gallery.js sets --widget-scale to fit. */
.widget-wrap {
  width: min(552px, 100%);
  height: calc(167px * var(--widget-scale, 1));
  margin: 0 auto;
}

.itch-widget {
  display: block;
  width: 552px;
  height: 167px;
  border: 0;
  transform: scale(var(--widget-scale, 1));
  transform-origin: top left;
}

/* ---- the playable embed ---- */

.play {
  padding: 64px 0 0;
  text-align: center;
}

.play-lead {
  margin: 0 0 18px;
  font-size: 19px;
  text-wrap: balance;
}

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 820;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.player iframe { width: 100%; height: 100%; border: 0; display: block; }

.player-facade {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  width: 100%;
}

.player-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dimmed so the badge reads; undimmed on hover as a hint it is live. */
  opacity: 0.55;
  transition: opacity 200ms ease;
}

.player-facade:hover img,
.player-facade:focus-visible img { opacity: 0.75; }

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: var(--teal);
  color: var(--ink);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 120ms ease;
}

.player-facade:hover .play-badge,
.player-facade:focus-visible .play-badge { background: var(--teal-lit); }

.play-badge svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }

/* Covers the iframe until it fires `load`, then removes itself. Above rather
   than behind it: a loading iframe may paint opaque, which would hide a
   message sitting underneath. */
.player-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--panel);
  pointer-events: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.play-note { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.play-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.play-note a:hover { color: var(--teal); }

/* Swapped in for the player below the breakpoint; see the note in index.html. */
.play-small-screen {
  display: none;
  margin: 0;
  padding: 34px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--dim);
  font-size: 16px;
  text-wrap: balance;
}

.play-small-screen a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* ---- gallery ---- */

.gallery { padding: 64px 0 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.shot { margin: 0; }

.shot button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.shot button:hover,
.shot button:focus-visible {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 10px 34px -12px rgba(46, 195, 181, 0.55);
  outline: none;
}

.shot img { width: 100%; }

.shot figcaption {
  margin-top: 10px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---- posts: patch notes, and the devlog when it lands ---- */

.post {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.post h1 { margin: 0 0 6px; font-size: 42px; line-height: 1.1; font-weight: 800; font-style: italic; }
.post h2 { margin: 36px 0 10px; font-size: 20px; color: var(--teal); }
.post p, .post li { color: var(--read); font-size: 16px; line-height: 1.65; }
.post strong { color: var(--text); }
.post p { margin: 0 0 16px; }
.post ul, .post ol { margin: 0 0 16px; padding-left: 22px; }
.post li { margin-bottom: 10px; }
.post a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.post img { border: 1px solid var(--line); border-radius: 4px; margin: 6px 0 18px; }

.post-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.post-kicker a { color: var(--muted); text-decoration: none; }
.post-kicker a:hover { color: var(--teal); }
.post-date { color: var(--muted); font-size: 14px; margin: 0 0 30px; }
.post-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }

/* The release list: version, date, first line. Rows, not cards. */
.releases { list-style: none; margin: 0; padding: 0; }
.releases li {
  display: grid;
  grid-template-columns: 84px 100px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.releases li:last-child { border-bottom: 1px solid var(--line); }
.release-version { color: var(--teal); font-weight: 700; text-decoration: none; }
.release-version:hover { text-decoration: underline; text-underline-offset: 3px; }
.release-date { color: var(--muted); font-size: 13px; white-space: nowrap; }
.release-summary { color: var(--dim); }
.releases.compact li { grid-template-columns: 84px minmax(0, 1fr); padding: 10px 0; }

/* The post list: title, date and game, summary. */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 16px 16px;
  border-left: 2px solid #ff40e0; /* magenta.bright: the devlog's rail, so it never reads as patch notes */
  margin-bottom: 18px;
}
.post-title { font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; line-height: 1.25; }
.post-title:hover { color: var(--teal); }
.post-meta { color: var(--muted); font-size: 13px; }
.post-summary { color: var(--dim); font-size: 15px; line-height: 1.5; }
.posts.compact li { padding: 10px 0 10px 12px; margin-bottom: 8px; }
.posts.compact .post-title { font-size: 16px; }
.posts.compact .post-summary { font-size: 14px; }

/* Feed panels under a game: its latest releases and its latest posts. */
.feeds {
  max-width: 1440px;
  margin: 64px auto 0;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.feed {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 22px 8px;
  position: relative;
  overflow: hidden;
}

.feed::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--teal); box-shadow: 0 0 10px rgba(46, 195, 181, 0.6); }
.feed-head { display: flex; align-items: baseline; margin-bottom: 8px; }
.feed-title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.feed-head a { margin-left: auto; font-size: 13px; color: var(--muted); }
.feed-head a:hover { color: var(--teal); }
.feed .releases li:last-child { border-bottom: 0; }
.feed.devlog::before { background: #ff40e0; box-shadow: 0 0 10px rgba(255, 64, 224, 0.5); }
.feed.devlog .feed-title { color: #ff40e0; }

.game-links { display: flex; gap: 24px; }
.game-links a { color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.game-links a:hover { color: var(--teal); }

/* ---- /games: the catalog ---- */

.catalog {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 48px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.catalog h1 { margin: 0; font-size: 42px; line-height: 1.1; font-weight: 800; font-style: italic; }

/* The game's card: its own key art on the left, the studio's frame around
   it. Same shape at any count. */
.entry {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.entry::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(46, 195, 181, 0.6);
  z-index: 1;
}

.entry-art { display: block; border-right: 1px solid var(--line); background: var(--ink); }
.entry-art img { width: 100%; height: 100%; object-fit: cover; }

.entry-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; }

.entry-kicker { color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.entry h2 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; }
.entry h2 a { color: var(--text); text-decoration: none; }
.entry h2 a:hover { color: var(--teal); }

.entry-pitch { margin: 0; font-size: 17px; line-height: 1.5; max-width: 620px; }

.entry-rows { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.entry-rows div { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.4; }
.entry-rows dt { flex: 0 0 64px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.entry-rows dd { margin: 0; }

/* ---- more games, under the current project on the home ---- */

.more { max-width: 1440px; margin: 64px auto 0; padding: 0 48px; }

.more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.more-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.more-card img { border: 1px solid var(--line); border-radius: 4px; transition: border-color 150ms ease; }
.more-card:hover img { border-color: var(--teal); }
.more-title { font-weight: 700; font-size: 18px; }
.more-pitch { color: var(--dim); font-size: 14px; line-height: 1.45; }

/* ---- lightbox ---- */

/* `display: flex` below would otherwise beat the `hidden` attribute. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(5, 7, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
}

.lightbox figure {
  margin: 0;
  max-width: min(1400px, 100%);
}

.lightbox img {
  max-height: 82vh;
  width: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.lightbox figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--dim);
  font-size: 15px;
}

.lightbox button {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: color 120ms ease;
}

.lightbox button:hover,
.lightbox button:focus-visible { color: var(--teal); outline: none; }

.lb-nav { font-size: 44px; padding: 8px 14px; flex: 0 0 auto; }

.lb-close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 36px;
  padding: 4px 10px;
}

/* ---- footer ---- */

footer {
  margin-top: 72px;
  padding: 22px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}

.social { display: flex; gap: 26px; flex-wrap: wrap; }

.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 120ms ease;
}

.social a:hover { color: var(--teal); }

.social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copyright { margin: 0; color: var(--muted); font-size: 14px; }

/* ---- consent banner ---- */

/* Injected by analytics.js, so it exists on every page that includes it. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  padding: 18px 24px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.consent-text {
  margin: 0;
  max-width: 680px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.consent-text a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.consent-buttons { display: flex; gap: 12px; flex-shrink: 0; }

/* Both buttons are identical on purpose. Refusing has to be exactly as easy
   as agreeing, so neither gets to be the quiet grey one. */
.consent-btn {
  padding: 11px 24px;
  border: 1px solid var(--teal);
  border-radius: 3px;
  background: none;
  color: var(--teal);
  font: 600 15px/1 'Exo 2', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.consent-btn:hover,
.consent-btn:focus-visible { background: var(--teal); color: var(--ink); outline: none; }

@media (max-width: 560px) {
  .consent { gap: 12px; }
  .consent-buttons { width: 100%; }
  .consent-btn { flex: 1; padding: 12px 10px; }
}

/* ---- 404 ---- */

.lost { max-width: 640px; margin: 0 auto; padding: 72px 24px 0; text-align: center; }
.lost h1 { margin: 0 0 14px; font-size: 92px; font-weight: 800; font-style: italic; color: var(--teal); line-height: 1; }
.lost p { margin: 0 0 30px; color: var(--muted); font-size: 18px; text-wrap: balance; }

/* ---- prose pages (privacy) ---- */

.prose {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.prose h1 { margin: 0 0 10px; font-size: 42px; line-height: 1.1; font-weight: 800; font-style: italic; }
.prose h2 { margin: 38px 0 12px; font-size: 20px; color: var(--teal); }
.prose p, .prose li { color: var(--read); font-size: 16px; line-height: 1.65; }
.prose strong { color: var(--text); }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { color: var(--muted); font-size: 14px; margin-bottom: 30px; }

/* ---- smaller screens ---- */

/* The player gets its own, wider threshold than the rest of the layout: a
   768px tablet reflows the page fine but still cannot play the board. */
@media (max-width: 1099px) {
  .intro { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: start; }
  .entry { grid-template-columns: minmax(0, 1fr); }
  .feeds { grid-template-columns: minmax(0, 1fr); }
  .entry-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-wrap { margin: 0; }
  .intro-side { width: 100%; max-width: 552px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (max-width: 899px) {
  .player, .play-note, .if-player { display: none; }
  .play-small-screen { display: block; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { height: 540px; }
  .hero.short { height: 260px; }
  .tagline { font-size: 13px; letter-spacing: 0.22em; }
  .site-nav { gap: 24px; }
  .site-nav a { font-size: 12px; }
  .game { padding: 32px 20px 0; }
  .catalog { padding: 32px 20px 0; gap: 20px; }
  .post { padding-top: 36px; }
  .post h1 { font-size: 34px; }
  .releases li { grid-template-columns: 76px minmax(0, 1fr); }
  .releases li .release-date { grid-column: 2; }
  .releases li .release-summary { grid-column: 1 / -1; }
  .feeds { padding: 0 20px; margin-top: 48px; gap: 20px; }
  .catalog h1 { font-size: 34px; }
  .entry-body { padding: 20px; }
  .entry h2 { font-size: 24px; }
  .more { padding: 0 20px; margin-top: 48px; }
  .more-grid { grid-template-columns: 1fr; }
  .intro { margin-top: 28px; gap: 28px; }
  .intro-copy { gap: 20px; }
  .pitch { font-size: 17px; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { white-space: normal; text-align: center; }
  .play { padding-top: 40px; }
  .play-lead { font-size: 17px; }
  .gallery { padding-top: 40px; }
  .grid { grid-template-columns: 1fr; gap: 28px; }
  footer { margin-top: 56px; padding: 22px 20px; justify-content: center; text-align: center; }
  .social { justify-content: center; }
  .lb-nav { font-size: 34px; padding: 6px 6px; }
  .prose h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .cta, .shot button, .player-facade img, .trailer-facade img { transition: none; }
  .shot button:hover { transform: none; }
}