/* 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;
}

/* One store: its mark, and a COMING SOON note until its page is live. */
.store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.soon {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;   /* balances the trailing letter-space */
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
}

.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);
}

a.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, a.badge { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
  .link:hover, a.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; }
  .soon { font-size: 10px; }
  .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. Columns size to their links and
   spread so the block's outer edges sit evenly about the center, in line
   with the centered copyright under it. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  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); }

/* A boxed note at the top of a page, edged in the accent like PLAY. */
.doc .notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.07);
}

@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; }
}