/* Shattered Stars brochure site: shared stylesheet.
   Design tokens copied verbatim from the game's src/hud/hud.css (:root block).
   Keep this file in sync with that block if the game's palette ever changes. */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/orbitron-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/exo2-latin-400.woff2') format('woff2');
}

:root {
  --title-idle: #c8d8e4;
  --title-hover: #eaf7ff;
  --title-accent: #5fd0ee;
  --title-grid: rgba(150, 205, 230, 0.28);
  --title-panel: rgba(6, 14, 22, 0.55);
  --title-panel-solid: rgba(6, 14, 22, 0.90);
  --bg-void: #05070c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  color: var(--title-idle);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.65;
}

body { overflow-x: hidden; }

h1, h2, h3, .heading {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--title-idle);
}

a { color: var(--title-accent); }

img { max-width: 100%; }

/* ─────────────────────────────────────────────────────────
   Hex-tag button / nav item — same shape as #title-menu's
   .title-menu-item in the game (hud.css).
   ───────────────────────────────────────────────────────── */
.hex-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--title-idle);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, filter 0.2s ease;
}
.hex-tag .hex-border {
  position: absolute;
  inset: 0;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  background: var(--title-grid);
  transition: background 0.2s ease;
  z-index: 0;
}
.hex-tag .hex-fill {
  position: absolute;
  inset: 2px;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
  background: var(--title-panel);
  z-index: 1;
}
.hex-tag .label { position: relative; z-index: 2; }
.hex-tag:hover { color: var(--title-hover); }
.hex-tag:hover .hex-border { background: var(--title-accent); }
.hex-tag:hover { filter: drop-shadow(0 0 8px var(--title-accent)); }
.hex-tag:active { color: var(--title-hover); }
.hex-tag.primary .hex-fill { background: rgba(95, 208, 238, 0.14); }
.hex-tag.primary .hex-border { background: rgba(95, 208, 238, 0.5); }
.hex-tag.current .hex-border { background: var(--title-accent); }

/* ─────────────────────────────────────────────────────────
   Home hero — full-viewport reproduction of the game's title
   screen (background art + screen-blended wordmark + hex nav).
   ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 48px;
  background-image: url('../images/title_image.jpg');
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,7,12,0) 40%, rgba(5,7,12,0.9) 100%);
  pointer-events: none;
}
.hero-logo {
  /* Positioned out of the flex flow, over the empty starfield near the
     top of title_image.jpg, so it doesn't sit on top of the ship battle
     rendered lower in the frame. */
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(820px, 84vw);
  mix-blend-mode: screen;
}
.hero-tagline {
  position: relative;
  z-index: 2;
  font-family: 'Exo 2', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--title-hover);
  font-size: clamp(14px, 2vw, 19px);
  text-align: center;
  max-width: 620px;
  margin: 22px 0 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  padding: 0 16px;
}
.hero-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--title-grid);
  border-bottom: 1px solid var(--title-grid);
}

/* ─────────────────────────────────────────────────────────
   Compact header — used on every sub-page (How to Play,
   Privacy, Support, Terms, Credits). Same visual family as
   the hero, condensed, with a link back to the homepage.
   ───────────────────────────────────────────────────────── */
.page-header {
  position: relative;
  padding: 22px clamp(16px, 4vw, 40px) 26px;
  background-image: url('../images/title_image.jpg');
  background-size: cover;
  background-position: center 30%;
}
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,7,12,0.35), rgba(5,7,12,0.92));
  pointer-events: none;
}
.page-header-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
/* A screen-blended image logo here would need to sit outside
   .page-header-inner's stacking context (position + z-index) to blend
   with .page-header's background-image behind it — nested the way the
   nav requires, the blend has nothing to reach and the JPEG's black
   background shows through solid. Plain Orbitron text sidesteps that
   entirely and needs no transparency trick. */
.page-logo-text {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.4vw, 19px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--title-hover);
  text-decoration: none;
  text-shadow: 0 0 10px rgba(95, 208, 238, 0.4);
}
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-nav .hex-tag { padding: 8px 18px; font-size: 12px; min-height: 36px; }

/* ─────────────────────────────────────────────────────────
   Starfield content area (home page, below the hero)
   ───────────────────────────────────────────────────────── */
.starfield {
  background-image: url('../images/title_image.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center 82%;
}
.content-wrap {
  background: linear-gradient(rgba(5,7,12,0.9), rgba(5,7,12,0.97));
  padding: 64px 20px 90px;
}
.container { max-width: 1100px; margin: 0 auto; }

/* ─────────────────────────────────────────────────────────
   Panels (translucent reading / content boxes)
   ───────────────────────────────────────────────────────── */
.panel {
  background: var(--title-panel-solid);
  border: 1px solid var(--title-grid);
  border-radius: 6px;
  padding: 28px clamp(18px, 4vw, 40px);
}
section.rule::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--title-accent);
  margin-bottom: 14px;
}

/* Home: screenshot panel */
.screenshot-panel { padding: 0; overflow: hidden; margin-bottom: 44px; }
.screenshot-panel img { display: block; width: 100%; height: auto; }

/* Home: HUD-console content grid (Direction B) */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}
.panel h2 { font-size: 15px; color: var(--title-accent); margin: 0 0 4px; }
.panel .sub { font-size: 12px; color: var(--title-idle); opacity: 0.75; margin: 0 0 18px; }

.cell-features { grid-column: span 12; }
.cell-ships { grid-column: span 12; }
.cell-stats { grid-column: span 12; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; }
.feature-list li { font-size: 13.5px; padding-left: 16px; position: relative; }
.feature-list li::before { content: '▸'; position: absolute; left: 0; color: var(--title-accent); }
@media (max-width: 460px) {
  .feature-list { grid-template-columns: 1fr; }
}

.ships-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; }
.ship { text-align: center; flex: 1 1 240px; max-width: 380px; min-width: 200px; }
.ship img { display: block; width: 100%; height: auto; }
.ship span { display: block; font-family: 'Orbitron', sans-serif; font-size: 13px; letter-spacing: 0.1em; margin-top: 10px; text-transform: uppercase; }

.stat-strip { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; text-align: center; }
.stat-strip .stat b { display: block; font-family: 'Orbitron', sans-serif; font-size: 24px; color: var(--title-hover); }
.stat-strip .stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--title-idle); opacity: 0.8; }

.cta-row { text-align: center; margin: 8px 0 8px; }

/* ─────────────────────────────────────────────────────────
   App Store badge, store panel, and screenshot strip.
   The badge is Apple's trademarked Marketing Tools asset
   (images/app-store-badge.svg) — render it unmodified, no
   recolouring/filters, keep it >=40px tall with clear space
   on all sides. It cannot be a .hex-tag (that shape/fill is
   this site's own button style, not Apple's asset).
   ───────────────────────────────────────────────────────── */
.appstore-badge {
  display: inline-block;
  line-height: 0;
  padding: 6px; /* clear space around the badge */
  transition: transform 0.2s ease;
}
.appstore-badge img { height: 54px; width: auto; display: block; }
.appstore-badge:hover { transform: scale(1.03); }

.hero-cta {
  position: relative; /* clears .hero::after, same as .hero-tagline/.hero-nav */
  z-index: 2;
  margin: 0 0 22px;
}

.store-panel {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 34px);
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.store-icon {
  width: 112px;
  height: 112px;
  border-radius: 24px;
  border: 1px solid var(--title-grid);
  flex: 0 0 auto;
}
.store-panel-body { flex: 1 1 320px; }
.store-panel-body h2 { margin: 0 0 8px; }
.store-panel-body p { margin: 0 0 14px; font-size: 14.5px; }
.store-facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--title-idle);
  opacity: 0.85;
}

.shots-heading {
  font-size: 15px;
  color: var(--title-accent);
  margin: 0 0 4px;
  text-align: center;
}
.shots-sub {
  font-size: 12px;
  color: var(--title-idle);
  opacity: 0.75;
  margin: 0 0 20px;
  text-align: center;
}

.shots-strip {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  overflow-x: auto;
  padding: 4px 28px 16px;
  margin: 0 -28px 44px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
}
.shots-strip::-webkit-scrollbar { display: none; }

/* Each screenshot in its own CSS-only "phone" — a dark chassis frame
   with rounded corners and side buttons, rather than a bare image.
   No device-specific art; a light, generic silhouette. */
.shot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}
.shot-frame {
  position: relative;
  padding: 9px;
  background: linear-gradient(155deg, #22262f, #050608 65%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 32px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.shot-frame img {
  display: block;
  height: 380px;
  width: auto;
  border-radius: 23px;
}
/* power button */
.shot-frame::before {
  content: '';
  position: absolute;
  right: -2px;
  top: 88px;
  width: 3px;
  height: 46px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}
/* volume rocker (two pills via a repeated box-shadow) */
.shot-frame::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 66px;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 44px 0 0 rgba(255, 255, 255, 0.14);
}
.shot-card figcaption {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--title-idle);
  opacity: 0.85;
  max-width: 170px;
}
@media (max-width: 600px) {
  .shot-frame img { height: 300px; }
}

/* ─────────────────────────────────────────────────────────
   Sub-page reading content (Privacy, Terms, Support, Credits,
   How to Play) — long-form copy on the dense --title-panel-solid
   panel, matching the in-game How To Play screen.
   ───────────────────────────────────────────────────────── */
.page-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 20px 80px;
  position: relative;
  z-index: 3;
}
.page-title {
  font-size: clamp(22px, 4vw, 32px);
  margin: 0 0 20px;
}
.page-panel { margin-bottom: 0; }
.page-panel h2 {
  font-size: 16px;
  color: var(--title-accent);
  margin: 28px 0 10px;
}
.page-panel h2:first-child { margin-top: 0; }
.page-panel h3 {
  font-size: 14px;
  color: var(--title-hover);
  margin: 22px 0 8px;
  letter-spacing: 0.05em;
}
.page-panel p { margin: 0 0 14px; font-size: 15px; }
.page-panel ul, .page-panel ol { margin: 0 0 14px; padding-left: 22px; font-size: 15px; }
.page-panel li { margin-bottom: 6px; }
.effective-date { font-size: 13px; opacity: 0.75; margin: 0 0 24px; }

/* How To Play sections reuse the game's own image treatment */
.htp-section { margin-bottom: 8px; }
.htp-image {
  text-align: center;
  margin: 18px 0 26px;
}
.htp-image img {
  border-radius: 6px;
  border: 1px solid var(--title-grid);
}
.htp-image figcaption {
  font-size: 12.5px;
  color: var(--title-idle);
  opacity: 0.8;
  margin-top: 8px;
}
.htp-unit-images {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin: 20px 0 26px;
}
.htp-unit-images div { text-align: center; }
.htp-unit-images img { width: 72px; height: 72px; object-fit: contain; }
.htp-unit-images span {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Credits page table-ish list */
.credits-list { list-style: none; margin: 0; padding: 0; }
.credits-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--title-grid);
  font-size: 14.5px;
}
.credits-list li:last-child { border-bottom: none; }
.credits-list b { color: var(--title-hover); display: block; margin-bottom: 2px; }

/* ─────────────────────────────────────────────────────────
   Footer — every page
   ───────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 36px 20px 48px;
  font-size: 13px;
  color: var(--title-idle);
  border-top: 1px solid var(--title-grid);
  background: var(--bg-void);
  position: relative;
  z-index: 3;
}
footer .links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
footer a { color: var(--title-idle); text-decoration: none; }
footer a:hover { color: var(--title-accent); }

/* ─────────────────────────────────────────────────────────
   Responsive — mirrors the game's own breakpoints
   ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero-nav { flex-direction: column; border: none; gap: 10px; }
  .page-header-inner { flex-direction: column; align-items: flex-start; }
  .page-nav { flex-direction: column; width: 100%; }
  .page-nav .hex-tag { width: 100%; }
}