/* Chart Wars 3 Remastered site. Colours, borders and type follow the game's theme.tres and
   STYLE_BIBLE.md; the page structure takes its cue from publisher game pages (hero banner,
   screenshot feature cards, description, screenshot grid). The font is the game's own OFL font,
   self-hosted (no third-party requests). */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VF.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #080c12;            /* theme tabbar_bg */
  --panel-grad: linear-gradient(to bottom right, #222d3d, #131a25 50%, #04080d); /* theme panel_gradient.png */
  --panel: #0e1520;         /* theme panel_bg */
  --border: #2a3e58;        /* theme panel/button border */
  --btn: #131d28;           /* theme btn_normal */
  --btn-hover: #1a2a38;     /* theme btn_hover */
  --orange: #d04010;        /* section headers, hover/focus border, pressed button */
  --orange-light: #e86629;  /* theme btn_pressed border */
  --text: #e8eef5;          /* theme Label/Button font */
  --subhead: #a6c7ff;       /* style bible rule 5: column group header */
  --link: #73bfff;          /* style bible rule 14: clickable text */
  --muted: #a6a6a6;         /* style bible rule 15: secondary text */
  --rule: rgba(255, 255, 255, 0.1); /* style bible rule 13: separators */
  --width: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem; /* 17px at the default size; rem follows the reader's text-size setting */
  line-height: 1.6;
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 0.6em; }
/* Style bible rule 5: section header, orange and uppercase. Orange text uses the lighter theme
   orange (#e86629, the pressed-button border) at weight 700: the darker #d04010 is only 4:1
   against the page, below the 4.5:1 that small text needs. */
h2 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-light);
}
/* Style bible rule 5: column group header, blue and sentence case */
h3 { font-size: 1.1rem; color: var(--subhead); }

p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }

a { color: var(--link); }
a:hover { color: var(--text); }
a:focus-visible, .button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 16px;
}
.centre { text-align: center; }

/* Header */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand img { width: 28px; height: 28px; }
.site-nav { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--text); }
.site-nav { align-items: center; }
.site-nav .nav-steam {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: var(--orange);
  border: 1px solid var(--orange-light);
  color: #fff;
  font-weight: 600;
}
.site-nav .nav-steam:hover { background: var(--orange-light); color: #fff; }
/* Phones: logo and Steam button only, on one row. The section links wrapped into a ragged
   second row and were 27px tall, below the 44px minimum tap target. */
@media (max-width: 640px) {
  .site-nav a:not(.nav-steam) { display: none; }
  .brand, .site-nav .nav-steam { min-height: 44px; }
  .site-nav .nav-steam { padding: 0 16px; }
  .site-header .wrap { padding-top: 6px; padding-bottom: 6px; }
}

/* Hero banner: the title screen's photo, dimmed the same way as in the game (modulate 0.55,
   60% black overlay, then a radial vignette darkening the centre). Only this band has it. */
.hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("img/background.jpg") center / cover no-repeat;
  filter: brightness(0.55);
}
.hero .wrap { position: relative; width: 100%; padding-top: 64px; padding-bottom: 64px; }
.hero h1 {
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.05;       /* large display text: tight leading */
  letter-spacing: -0.02em; /* and slightly negative tracking */
  margin-bottom: 0.3em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.85);
}
.hero .tagline {
  font-size: 1.15rem;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85);
}
.hero .buttons { justify-content: center; }

/* Page bands */
/* The game's panel_gradient.png (theme.tres Panel/PanelContainer): lighter top-left corner
   fading to near-black bottom-right. Sampled corner/midpoint colours. */
.band {
  padding: 56px 0;
  background: linear-gradient(to bottom right, #1a2431, #0c1119 50%, #04080d);
}
.band + .band { border-top: 1px solid var(--rule); }

.intro-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 0.4em;
}
.intro-tag { color: var(--orange-light); font-weight: 600; font-size: 1.1rem; margin-bottom: 2em; }

/* Buttons: theme.tres Button states (normal, hover with orange border, pressed in orange) */
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.buttons.centre { justify-content: center; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--btn);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: transform 100ms ease-out;
}
/* Instant feedback on press: buttons sink slightly while held */
.button:active, .site-nav .nav-steam:active, .lb-btn:active { transform: scale(0.97); }
/* Brand icons (Simple Icons, CC0) drawn in the current text colour via a CSS mask */
.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-steam { --icon: url("icons/steam.svg"); }
.icon-discord { --icon: url("icons/discord.svg"); }
.icon-reddit { --icon: url("icons/reddit.svg"); }
.icon-kofi { --icon: url("icons/kofi.svg"); }

.button:hover { background: var(--btn-hover); border-color: var(--orange); color: #fff; }
.button:active, .button.primary { background: var(--orange); border-color: var(--orange-light); color: #fff; }
.button.primary:hover { background: var(--orange-light); }

/* Screenshots. Until real captures exist, .shot-slot marks where each one goes. */
.shot { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; border-bottom: 1px solid var(--border); }
.shot-slot {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--btn), var(--btn) 10px, var(--panel) 10px, var(--panel) 20px);
  color: var(--muted);
  font-size: 0.85rem;
  border: 1px dashed var(--border);
}

/* Feature cards: screenshot on top, text below */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  text-align: left;
}
.feature {
  background: var(--panel-grad);
  border: 1px solid var(--border);
}
.feature .shot-slot { border-width: 0 0 1px 0; border-style: solid; }
.feature-body { padding: 16px 18px 18px; }
.feature-body p { margin: 0; font-size: 0.95rem; }

/* Description column: kept to a readable line length */
.narrow { max-width: 760px; margin: 0 auto; }

.feature-list { padding-left: 1.2em; margin: 0 0 1em; }
.feature-list li { margin-bottom: 0.4em; }
.feature-list li::marker { color: var(--orange); }

/* Screenshot grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.gallery .shot { border: 1px solid var(--border); }
.gallery a:hover .shot { border-color: var(--orange); }
.shot-link { display: block; cursor: zoom-in; }
.gallery a { cursor: zoom-in; }

/* Screenshot viewer (a native <dialog>): full-screen dark backdrop, image fitted to the window,
   square game-style buttons. The arrows sit either side of the image (not at the window edges)
   so the controls stay next to what they change. Motion lives in the script in index.html. */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 56px 24px;
  border: 0;
  background: rgba(4, 8, 13, 0.98);
  color: var(--text);
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-stage { display: flex; align-items: center; gap: 16px; }
.lightbox img {
  /* window minus the dialog padding and an arrow plus gap on each side */
  max-width: calc(100vw - 48px - 2 * (48px + 16px));
  max-height: calc(100vh - 150px);
  border: 1px solid var(--border);
  touch-action: pan-y pinch-zoom; /* horizontal drags are swipes; pinch-zoom still works */
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; }
.lb-btn {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lb-btn:hover { background: var(--btn-hover); border-color: var(--orange); }
.lb-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lb-close { position: absolute; top: 12px; right: 12px; }
body:has(.lightbox[open]) { overflow: hidden; }
/* Phones: the image takes the full width and the arrows move under it */
@media (max-width: 640px) {
  .lightbox { padding: 64px 8px; }
  .lightbox figure { width: 100%; }
  .lb-stage { flex-wrap: wrap; justify-content: center; }
  .lightbox img { order: -1; width: 100%; max-width: 100%; height: auto; }
}

.about { display: flex; gap: 20px; align-items: flex-start; max-width: 720px; margin: 0 auto; text-align: left; }
.about img { width: 56px; height: 56px; flex: none; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer p { margin-bottom: 0.4em; }