/* Star Soft website styles, shared by the HOME, ABOUT and DOWNLOAD pages and each
   game's info page. (The games themselves use engine/engine.css.) */

:root {
  --bg: #05050f;
  --panel: #10102a;
  --line: #2a2a5a;
  --text: #dcdcff;
  --dim: #b4b4dc;
  --gold: #ffd23f;
  --sky: #8fd3ff;
  --red: #ff5a5a;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
/* Text is crisp everywhere: no blurred shadows (owner, November 2026). The text sits on solid
   dark panels, so it doesn't need them, and the browser's own menus (such as an audio
   player's) would inherit them and look smudged. */
body { font: 15px/1.5 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; min-height: 100vh; text-shadow: none; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
/* Every page: header (menu, logo), main, footer, centred over the starfield. */
.site-header, main, .site-footer { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 16px; }
.site-header { padding-top: 16px; text-align: center; }
main { padding-bottom: 16px; }
.site-footer { padding-bottom: 64px; }

/* ---- Menu ---- */

.site-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 0 28px;
}
.site-nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  border: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; border-color: var(--line); outline: none; }
.site-nav a[aria-current="page"] { color: var(--gold); border-color: var(--gold); }

/* ---- Logo and HOME intro ---- */

.logo { width: min(100%, 640px); height: auto; image-rendering: pixelated; display: block; margin: 0 auto 12px; }
.logo-link { display: block; width: min(100%, 640px); margin: 0 auto 4px; }
.byline { margin: 0 0 36px; color: var(--sky); letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px; }
.logo-link .logo { margin: 0; }
.intro-block { text-align: center; margin-bottom: 40px; }
h1.site-title { margin: 0; font-size: inherit; letter-spacing: normal; text-transform: none; }
.tagline { display: block; font-weight: normal; color: var(--sky); letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
.intro-block p.intro {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
}
.intro-block p.intro a { color: var(--sky); }

h1 { color: var(--gold); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; text-align: center; }
h2 { color: var(--sky); font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; margin: 36px 0 12px; }

/* ---- Game cards (HOME) ---- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.card {
  background: var(--panel); border: 2px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 6px;
  min-height: 112px;
}
.card.live:hover, .card.live:focus-within { border-color: var(--gold); }
.card h3, .card h4 { margin: 0; color: #fff; font-size: 16px; }
.card h3 a { color: #fff; text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { color: var(--gold); text-decoration: underline; outline: none; }
.card .orig { color: var(--sky); font-weight: normal; font-size: 13px; }
/* Play now: bigger cards with the game's picture. */
.grid.features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.card.feature { padding: 0 0 14px; gap: 8px; }
.card.feature > :not(.shot-link) { padding: 0 14px; }
.card.feature h3 { font-size: 19px; margin-top: 4px; }
.card.feature .shot-link { display: block; border-bottom: 2px solid var(--line); background: #000; }
.card.feature img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.card.feature:hover .shot-link, .card.feature:focus-within .shot-link { border-color: var(--gold); }
.section-note { color: var(--text); font-size: 14px; margin: -4px 0 4px; }
h3.group { color: var(--sky); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: normal; margin: 18px 0 10px; }
.card p { margin: 0; }
.card .genre { color: var(--dim); font-size: 13px; }
.card .tags { margin-top: auto; padding-top: 4px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { font-size: 11px; padding: 2px 6px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; }
a.tag.play { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: bold; padding: 3px 12px; }
a.tag.play:hover, a.tag.play:focus-visible { background: #fff; border-color: #fff; outline: none; }
.tags .more { color: var(--sky); font-size: 12px; margin-left: auto; }
.tag.play { color: var(--gold); }
.tag.dev { color: var(--sky); }
.tag.planned { color: var(--dim); }
.tag.platform { color: var(--text); }

/* ---- Text pages (ABOUT, DOWNLOAD) ---- */

.prose {
  background: rgba(16, 16, 42, 0.88);
  border: 2px solid var(--line);
  padding: 8px 24px 24px;
  max-width: 760px;
  margin: 0 auto;
}
.prose p, .prose li { max-width: 68ch; }
.prose ul { padding-left: 20px; }
.prose li { margin: 4px 0; }
.prose a { color: var(--sky); }
.prose strong { color: #fff; }
.prose .lead { color: #fff; font-size: 16px; }
.prose code { color: var(--gold); }
.prose h1 { margin: 24px 0 8px; }
.prose h3 { color: #fff; font-size: 14px; margin: 20px 0 6px; }
.prose kbd { color: var(--gold); border: 1px solid var(--line); padding: 0 4px; font: inherit; }
.prose ol { padding-left: 22px; }

/* ---- Download list ---- */

.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.download {
  background: var(--panel);
  border: 2px solid var(--line);
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prose .download h3 { margin: 0 0 4px; color: #fff; font-size: 16px; }
.download h3 a { color: #fff; }
.download h3 .orig { color: var(--sky); font-weight: normal; font-size: 13px; }
.download .genre { color: var(--dim); font-size: 13px; margin: 0; }
.button {
  display: inline-block;
  color: var(--bg);
  background: var(--gold);
  border: 2px solid var(--gold);
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  white-space: nowrap;
}
.prose a.button { color: var(--bg); }
.prose ul.downloads { padding-left: 0; }
.prose li.download { max-width: none; }
.download > div { flex: 1 1 260px; min-width: 0; }
.prose .download h3, .prose .download .genre { max-width: none; }
.button:hover, .button:focus-visible { background: #fff; border-color: #fff; outline: none; }
.button.disabled { background: transparent; color: var(--dim); border-color: var(--line); pointer-events: none; }

/* ---- A game's info page (games/<folder>/info.html) ---- */

.game-info .inspired { text-align: center; color: var(--sky); margin: 0 auto; max-width: none; }
.game-info .lead { margin-left: auto; margin-right: auto; text-align: center; }
.play-row, .prose .play-row { text-align: center; max-width: none; margin: 20px 0; }
.prose .shot { max-width: none; margin: 8px 0 20px; }
.shot img { display: block; width: 100%; height: auto; border: 2px solid var(--line); }
.shot a:hover img, .shot a:focus-visible img { border-color: var(--gold); }
.button.big { font-size: 18px; padding: 12px 28px; }
/* A second, quieter button beside the main one (DOWNLOAD beside PLAY NOW): gold outline. */
.button.outline, .prose a.button.outline { background: transparent; color: var(--gold); }
.button.outline:hover, .button.outline:focus-visible, .prose a.button.outline:hover, .prose a.button.outline:focus-visible { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.play-row .button { margin: 6px; }

/* ---- DOWNLOAD page: the music player ---- */
.music-player { display: block; width: min(100%, 520px); margin: 8px 0 24px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 24px 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }
table.controls { border-collapse: collapse; width: 100%; max-width: 68ch; }
.controls th, .controls td { text-align: left; vertical-align: top; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line); }
.controls th { color: var(--dim); font-weight: normal; width: 40%; }

/* Another licence quoted inside the LICENCE page. */
.prose blockquote { margin: 0 0 16px; padding: 4px 16px; border-left: 3px solid var(--line); color: var(--dim); font-size: 13px; }

/* ---- Footer ---- */

.site-footer { margin-top: 48px; text-align: center; color: var(--dim); font-size: 12px; }
.site-footer p { max-width: 640px; margin: 0 auto 8px; }
.site-footer a { color: var(--text); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); }

@media (max-width: 480px) {
  .site-nav a { padding: 6px 8px; letter-spacing: 0.12em; }
  .prose { padding: 4px 16px 16px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 8px; }
}

/* ---- "Why Coverdisk?": the magazine picture beside the words ---- */

.why { display: flex; gap: 28px; align-items: center; max-width: 760px; margin: 28px auto 0; text-align: left; }
.why-pic { flex: 0 0 220px; margin: 0; }
.why-pic img { display: block; width: 100%; height: auto; transform: rotate(-3deg); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); }
.why-text h2 { margin-top: 0; }
.why-text p { margin: 0; font-size: 14px; }
.about-pic { float: right; width: 200px; margin: 6px 0 16px 24px; }
@media (max-width: 600px) {
  .why { flex-direction: column; gap: 20px; }
  .why-pic { flex-basis: auto; width: 170px; }
  .about-pic { float: none; width: 170px; margin: 0 auto 20px; }
}

/* A game's own logo as its info page's heading. */
.game-logo { display: block; width: min(100%, 560px); height: auto; margin: 0 auto 8px; }

/* ---- DOWNLOAD: the box that opens before a game downloads ---- */

.download-box { max-width: 560px; width: calc(100% - 32px); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 28px;
  background: var(--panel); color: var(--text); border: 2px solid var(--gold); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); font: inherit; }
.download-box::backdrop { background: rgba(0, 0, 10, 0.75); }
.download-box h2 { margin-top: 0; color: var(--gold); }
.download-box h3 { margin: 18px 0 6px; }
.download-box ul { padding-left: 20px; }
.download-box .box-download { text-align: center; margin: 18px 0; }
.download-box .credit-line code { color: var(--gold); }
.download-box button { font: inherit; font-size: 12px; letter-spacing: 0.12em; color: var(--text); background: transparent; border: 2px solid var(--line); padding: 4px 10px; cursor: pointer; }
.download-box button:hover, .download-box button:focus-visible { color: #fff; border-color: var(--sky); }
.download-box .box-close, .download-box .support { text-align: center; margin: 16px 0 0; }
.download-box a:not(.button) { color: var(--sky); }

/* In development cards: the early-look picture at the top. */
.card.has-pic { padding-top: 0; }
.card .concept { position: relative; margin: 0 -14px 6px; border-bottom: 2px solid var(--line); background: #000; }
.card .concept img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 315; }
.card .early { position: absolute; left: 6px; top: 6px; background: rgba(0, 0, 10, 0.75); color: var(--gold); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--gold); }

/* A tip box (the F8 picture modes, on HOME and each game's page). */
.tip { max-width: 640px; margin: 18px auto 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: rgba(16, 16, 42, 0.85); font-size: 13px; text-align: left; color: var(--text); }
.prose .tip { max-width: none; margin: 18px 0 0; }

/* MUSIC page: each tune's player sits under its name, inside its card. */
.download.track > div { flex: 1 1 18rem; min-width: 0; }
.download.track .music-player { display: block; width: 100%; max-width: 26rem; height: 2.5rem; margin: 0.6rem 0 0; }

/* MUSIC page: the list of soundtracks at the top; each tile jumps to its section. */
.prose ul.music-contents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px;
  list-style: none; margin: 0 0 8px; padding: 0; max-width: none; }
.music-contents li { margin: 0; max-width: none; }
.music-contents a { display: flex; flex-direction: column; height: 100%; background: var(--panel); border: 2px solid var(--line);
  color: #fff; text-decoration: none; }
.music-contents img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: #000;
  border-bottom: 2px solid var(--line); }
.music-contents .name { font-weight: bold; font-size: 14px; line-height: 1.3; padding: 8px 10px 0; }
.music-contents .tunes { color: var(--dim); font-size: 13px; padding: 2px 10px 10px; }
.music-contents a:hover, .music-contents a:focus-visible { border-color: var(--gold); outline: none; }
.music-contents a:hover .name, .music-contents a:focus-visible .name { color: var(--gold); }
.prose .to-contents { font-size: 13px; margin: 10px 0 0; }
/* Jumping to a section glides there (unless the visitor prefers less motion), with room above the heading. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.prose h2[id] { scroll-margin-top: 16px; }

/* HOME, In development cards: "I'd play this" (counted by the visitor counter), small and quiet. */
.card .want-row { margin: 2px 0 0; text-align: right; }
.card .want { font: inherit; font-size: 12px; color: var(--sky); background: none; border: 1px dashed var(--line); padding: 3px 8px;
  cursor: pointer; letter-spacing: 0.03em; }
.card .want:hover, .card .want:focus-visible { color: #fff; border-color: var(--sky); border-style: solid; outline: none; }
.card .want:disabled { color: var(--gold); border-color: transparent; cursor: default; }

/* What's new: one entry per new game, update or piece of news, newest first. */
.prose ol.news { list-style: none; margin: 8px 0 0; padding: 0; max-width: none; }
.news li { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin: 0 0 22px; max-width: none; }
.news .date { color: var(--gold); font-size: 13px; letter-spacing: 0.06em; margin: 0 0 2px; }
.prose .news h2 { margin: 0 0 6px; font-size: 15px; letter-spacing: 0.08em; }
.news h2 a { color: var(--sky); text-decoration: none; }
.news h2 a:hover, .news h2 a:focus-visible { text-decoration: underline; }
.news li p { margin: 0 0 4px; }
/* A game page's "Watch it played" link: our own picture, then the words. */
.prose .video a { display: inline-flex; flex-direction: column; gap: 6px; max-width: 360px; }
.prose .video img { width: 100%; height: auto; border: 2px solid var(--line); }