/* Galcon site styles.
 *
 *   1. Tokens and base       5. Trailer and screenshots
 *   2. Backdrop              6. Footer
 *   3. Home: hero and demo   7. Inner pages: header and panel
 *   4. Home: PLAY and tiles  8. History page
 *
 * One breakpoint, 560px, switches to the phone layout; each section keeps
 * its own phone rules next to it. Hover motion lives in the
 * prefers-reduced-motion: no-preference blocks, so a visitor who asks for
 * less motion gets none. Every focusable thing shares the cyan focus ring
 * from section 1.
 */

/* ---------- 1. Tokens and base ---------- */

@font-face {
  font-family: "Anta";
  src: url("fonts/Anta.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #04050b;
  --head: #fff;           /* headings */
  --ink: #e8eaf4;         /* labels and strong text */
  --text: #c8cad8;        /* body copy on panels */
  --muted: #aab0c8;       /* secondary links */
  --dim: #8a8ea6;         /* captions and notes */
  --danger: #ff8a95;
  --line: rgba(255, 255, 255, 0.12);

  /* The logo's cyan: the site's one loud color. --accent-rgb feeds its
     translucent glows. */
  --accent: #5ce1ff;
  --accent-rgb: 92, 225, 255;

  --tile: rgba(4, 5, 11, 0.72);     /* home page tiles */
  --panel: rgba(4, 5, 11, 0.86);    /* inner page text panel */
  --radius: 4px;
  --lift: 0 0 8px #000, 0 1px 2px #000;   /* keeps text off bright nebula */

  --display: "Anta", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font: 16px/1.6 var(--body);
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: var(--accent); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 2. Backdrop ---------- */

/* A game background behind every page; partials/backdrop.html picks one. */
.backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg) url("bg/spiral.webp") center / cover no-repeat;
}

/* A flat dim keeps the brighter backgrounds behind the text and ships. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 11, 0.3);
}

/* ---------- 3. Home: hero and demo ---------- */

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 0;
}

.logo {
  margin: 0;
  width: min(100%, 640px, 90vh);   /* short screens get a smaller title */
  line-height: 0;
}

.logo img { width: 100%; height: auto; }

/* title.js draws the animated title on this canvas, over the still logo's
   spot; while it runs the still only holds the space. */
#title {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.live-title .logo img { opacity: 0; }

.tagline {
  margin: 0;
  padding: 2px 10px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  color: #c9d4f2;
  text-shadow: var(--lift);
}

.subline {
  margin: 2px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--dim);
  text-shadow: var(--lift);
}

/* demo.js plays a tiny game here. Rings, ships and sparks add light to
   what is behind them, as the game's lines do; browsers without
   plus-lighter fall back to screen. */
.demo {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 92px;
  margin: 6px 0 12px;
}

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

.demo-glow,
.demo-fx {
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}

@media (max-width: 560px) {
  .tagline { font-size: 12px; letter-spacing: 0.16em; }
  .subline { font-size: 12px; }
  .demo { height: 84px; margin-bottom: 10px; }
}

/* ---------- 4. Home: PLAY and tiles ---------- */

.links {
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tiles are solid enough to read over any background. */
.link,
.play {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tile);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* PLAY spans the row: a plain lead-in line over the stores' own marks, so
   only the marks look like buttons. It owns the accent color. */
.play {
  --badge-h: 48px;   /* every store mark's visible height (Apple and Google
                        require them equal) */
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 14px;
  border-color: rgba(var(--accent-rgb), 0.45);
  border-left: 3px solid var(--accent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.16);
}

.play-label {
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;   /* balances the trailing letter-space */
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}

.play-label em { font-style: normal; color: var(--accent); }

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.badge {
  display: block;
  height: var(--badge-h);
  line-height: 0;
  border-radius: calc(var(--badge-h) * 0.16);
}

.badge img { height: 100%; width: auto; }

/* Valve has no store badge, so its logo sits on a black plate drawn like
   Apple's and Google's: black, thin gray rim, round corners. */
.badge.steam {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--badge-h) * 0.36);
  background: #000;
  border: 1px solid #a6a6a6;
}

.badge.steam img { height: 58%; }

/* Google's art carries its own clear space (41px of 250); trim it so the
   badge itself matches the others' height. */
.badge.google img {
  height: calc(var(--badge-h) * 250 / 168);
  margin: calc(var(--badge-h) * -41 / 168);
}

.badge:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(var(--accent-rgb), 0.5); }

/* One quiet line under the badges: everyone plays together. */
.crossplay {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}

/* The smaller tiles stay neutral so PLAY owns the color. */
.link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border-left: 3px solid rgba(255, 255, 255, 0.22);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.link svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: var(--ink);
  opacity: 0.85;
}

/* Titles show in capitals but are written as words for screen readers. */
.link > span { text-transform: uppercase; }

.link small {
  display: block;
  text-transform: none;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--dim);
}

.link:hover,
.link:focus-visible {
  background: rgba(20, 24, 40, 0.85);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .link, .badge { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
  .link:hover, .badge:hover { transform: translateY(-1px); }
}

/* Phones: tiles stack their icon over the title. */
@media (max-width: 560px) {
  .links { gap: 8px; }
  .play { --badge-h: 40px; padding: 12px 8px; }   /* Apple's minimum */
  .play-label { font-size: 13px; }
  .badges { gap: 8px; }
  .crossplay { font-size: 12px; }
  .link {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    font-size: 13px;
    text-align: center;
  }
  .link small { display: none; }
}

/* ---------- 5. Trailer and screenshots ---------- */

.media {
  width: 100%;
  max-width: 760px;
  margin-top: 40px;
}

.media h2 {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: var(--lift);
}

/* A poster link until clicked; media.js then swaps in the player, which
   keeps this class. */
.trailer {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.trailer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trailer-play {
  --size: 76px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: rgba(4, 5, 11, 0.7);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.45);
}

.trailer-play svg {
  width: 45%;
  height: 45%;
  margin-left: 5%;   /* a play triangle looks centered a little right */
  fill: var(--accent);
}

.trailer:hover .trailer-play { background: rgba(4, 5, 11, 0.88); }

.trailer-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(4, 5, 11, 0.75);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.shots a {
  display: block;
  line-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.shots img { width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .trailer-play { transition: scale 0.15s, background-color 0.15s; }
  .trailer:hover .trailer-play { scale: 1.08; }
  .shots img { transition: scale 0.25s; }
  .shots a:hover img { scale: 1.04; }
}

@media (max-width: 560px) {
  .media { margin-top: 28px; }
  .media h2 { font-size: 13px; }
  .trailer-play { --size: 60px; }
  .shots { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- 6. Footer ---------- */

/* The same footer closes every page (partials/footer.html). */
.foot {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 40px auto 0;
  padding: 0 16px 32px;
  font-size: 13px;
  color: var(--dim);
  text-shadow: var(--lift);
}

/* Short columns, one link per line. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.foot-cols div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.foot h2 {
  margin: 0 0 2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b4b9d0;
}

/* Footer links are at least 24px tall (WCAG 2.5.8), 44px on phones. */
.foot a {
  display: inline-block;
  min-height: 24px;
  padding: 1px 0;
  line-height: 22px;
  color: var(--muted);
  text-decoration: none;
}

.foot a:hover,
.foot a:focus-visible,
.foot a[aria-current="page"] { color: var(--ink); }
.foot a:hover { text-decoration: underline; }

.foot .copy {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 560px) {
  .foot { margin-top: 24px; padding: 0 12px 24px; }
  .foot-cols { gap: 8px; }
  .foot h2 { margin-bottom: 0; }
  .foot a { min-height: 44px; padding: 11px 0; }
}

/* ---------- 7. Inner pages: header and panel ---------- */

/* Inner pages share a slim header (partials/header.html) with the logo,
   nav and a Play button, and set their text on a dark glass panel like
   the home page's tiles. */
.site-head {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.site-logo { display: block; line-height: 0; }
.site-logo img { width: 150px; height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px 18px;
  font-size: 14px;
}

.site-nav a {
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  text-decoration: none;
  text-shadow: var(--lift);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* The one loud thing in the header, in the PLAY tile's cyan. */
.site-nav .site-play {
  margin-left: 6px;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.12);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--head);
  text-shadow: none;
}

.site-nav .site-play:hover {
  background: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}

.doc {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 44px 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
}

.doc h1 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--head);
  text-wrap: balance;
}

.doc h2 {
  margin: 32px 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--head);
}

.doc p, .doc ul, .doc ol { margin: 0 0 12px; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 4px; }
.doc strong { color: var(--head); }
.doc a:hover { color: var(--head); }
.doc h1 + p:not(.updated) { margin-top: 14px; }
.doc .updated { margin-bottom: 24px; font-size: 14px; color: var(--dim); }
.doc .warn { color: var(--danger); }

@media (max-width: 560px) {
  .site-head { padding: 14px 12px 10px; }
  .site-logo img { width: 120px; }
  .site-nav { gap: 4px 14px; font-size: 13px; }
  .site-nav .site-play { margin-left: 0; padding: 6px 10px; font-size: 12px; }
  .doc { margin: 0 8px; padding: 24px 18px 28px; }
}

/* ---------- 8. History page ---------- */

/* Each year is its own block. Pictures float right as on the original
   page (.shot; .tall for phone screens, .wide for full width) and go full
   width on phones. */
.history .era {
  display: flow-root;
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.history .era h2 {
  margin: 4px 0 8px;
  font-size: 26px;
  color: var(--ink);
}

.history .era h3 {
  clear: both;
  margin: 22px 0 2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--head);
}

.history .era h2 + h3 { margin-top: 4px; }

/* The date and platforms line under each release. */
.history .platforms {
  margin: -2px 0 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.history .shot {
  float: right;
  width: 46%;
  margin: 6px 0 12px 20px;
  line-height: 0;
}

.history .shot.tall { width: 30%; }
.history .shot.wide { float: none; display: block; width: 100%; margin: 6px 0 14px; }

.history .shot img,
.history .gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #000;
}

.history pre {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  line-height: 1.5;
  color: #9fe7a8;
}

/* Where the original page ends and the newer years begin. */
.history .since {
  margin: 48px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  color: var(--dim);
}

/* A dated strip of screenshots: portrait phone shots take one column,
   landscape ones (.wide) take two, so the rows come out about even. */
.history .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
  margin: 10px 0 18px;
}

.history .gallery.two { grid-template-columns: repeat(2, 1fr); }
.history .gallery figure { margin: 0; }
.history .gallery figure.wide { grid-column: span 2; }

.history .gallery figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dim);
}

@media (max-width: 560px) {
  .history .shot { float: none; display: block; width: 100%; margin: 6px 0 14px; }
  .history .shot.tall { width: 60%; }
  .history .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .history .gallery.two { grid-template-columns: 1fr; }
  .history .gallery figure.wide { grid-column: auto; }
  .history .gallery figcaption { font-size: 12px; }
}