/* ==========================================================================
   DARK SEA — BETA WEBSITE  ·  WEB-M001 FOUNDATION + WEB-M002 HERO
   --------------------------------------------------------------------------
   Single stylesheet for the beta shell. All design decisions live in the
   :root token block below so later missions (WEB-M003..WEB-M006) restyle the
   site by changing tokens, not by rewriting layout.

   Palette source: matches the in-game HUD chrome palette
   (assets/Scripts/UI/HUD/HUDuGUISeafightChrome.cs — navy panels, bronze and
   gold accents) so the website and the game read as one product.

   Hero background art: assets/images/hero-seascape.png — real Dark Sea launcher
   seascape reused as a TEMPORARY hero image. Owner replacement required; see
   website/README.md for the asset provenance note.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Backgrounds */
  --bg-900: #05090D;
  --bg-800: #08121B;
  --bg-700: #0C1822;

  /* Accents — restrained: gold/bronze highlight, never the dominant colour */
  --bronze: #8B6428;
  --gold: #D3A83E;
  --highlight: #F2CA58;

  /* Text */
  --text-primary: #F1E8D5;
  --text-secondary: #979B9D;

  /* Derived surfaces (kept here so they stay in sync with the palette) */
  --surface: rgba(12, 24, 34, 0.72);
  --surface-raised: rgba(8, 18, 27, 0.86);
  --hairline: rgba(139, 100, 40, 0.34);
  --hairline-strong: rgba(211, 168, 62, 0.46);
  --focus: var(--highlight);

  /* Typography */
  --font-heading: "Cinzel", "Cinzel Decorative", "Times New Roman", Georgia, serif;
  --font-body: "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — no fixed pixel widths, scales 360px → 1920px */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.10rem, 1.04rem + 0.30vw, 1.32rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.30vw, 2.70rem);
  --step-4:  clamp(2.30rem, 1.60rem + 3.20vw, 4.60rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Layout */
  --content-max: 1180px;
  --content-pad: clamp(1rem, 0.55rem + 2.1vw, 3rem);
  --header-h: 68px;
  --radius: 4px;
  --radius-lg: 6px;

  /* Effects */
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 0 1px rgba(211, 168, 62, 0.32), 0 6px 26px rgba(211, 168, 62, 0.10);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -------------------------------------------------------------- 2. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background-color: var(--bg-900);
  /* Layered atmosphere: subtle radial light + deep vertical gradient */
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(211, 168, 62, 0.075), transparent 62%),
    radial-gradient(900px 520px at 12% 6%, rgba(139, 100, 40, 0.055), transparent 60%),
    linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 46%, var(--bg-700) 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  /* Guard against any accidental horizontal overflow */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent media from ever forcing horizontal scroll */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------- 3. LAYOUT PRIMS */
.shell {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.section {
  position: relative;
  padding-block: clamp(3.25rem, 2rem + 5vw, 6.5rem);
}

/* Alternating band keeps long-scroll rhythm without heavy ornament */
.section--alt {
  background: linear-gradient(180deg, rgba(8, 18, 27, 0.55), rgba(5, 9, 13, 0.15));
  border-block: 1px solid var(--hairline);
}

.section-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 1rem + 2.4vw, 3rem); }

.section-title { font-size: var(--step-3); color: var(--text-primary); }

.section-lede {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
}

/* --------------------------------------------------------- 4. EYEBROW/UI */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: 0 0 0 3px rgba(242, 202, 88, 0.16);
  flex: 0 0 auto;
}

.mono { font-family: var(--font-mono); font-size: 0.95em; color: var(--highlight); }

.note {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.6;
}

.note--inline { margin-top: var(--space-5); }

/* -------------------------------------------------------------- 5. BUTTONS */
.btn {
  --btn-fg: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.72em 1.45em;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s var(--ease);
}

.btn--primary {
  background: linear-gradient(180deg, rgba(211, 168, 62, 0.95), rgba(139, 100, 40, 0.95));
  border-color: var(--highlight);
  color: #100C04;
  box-shadow: var(--glow-gold);
}

/* Secondary tier — same weight of intent as a download, quieter than primary.
   Used by the Android beta CTA so Windows reads as the lead action. */
.btn--secondary {
  background: rgba(8, 18, 27, 0.72);
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--highlight);
  background: rgba(211, 168, 62, 0.14);
  transform: translateY(-1px);
}

/* Community tier — Discord sits under the download pair in the hero. */
.btn--ghost { background: rgba(8, 18, 27, 0.6); }

.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--highlight); background: rgba(211, 168, 62, 0.12); }

.btn--primary:hover,
.btn--primary:focus-visible { transform: translateY(-1px); }

/* Non-interactive state for download cards that are not live yet */
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Clear, consistent focus ring for every interactive element */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- 6. HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 9, 13, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); }

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  object-fit: cover;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-primary);
}

.brand__tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- navigation --- */
.primary-nav { display: flex; align-items: center; gap: var(--space-5); }

.primary-nav__list { display: flex; align-items: center; gap: clamp(0.6rem, 0.2rem + 1.1vw, 1.6rem); }

.primary-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0.15rem;
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible { color: var(--text-primary); }

.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after { transform: scaleX(1); }

/* Active section, set by js/main.js */
.primary-nav__link[aria-current="true"] { color: var(--highlight); }

.primary-nav__link[aria-current="true"]::after { transform: scaleX(1); }

/* --- mobile menu button (hidden on desktop) --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(8, 18, 27, 0.7);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--text-primary);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Open state: turn the bars into a close cross */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ----------------------------------------------------------------- 7. HERO */
/* WEB-M002 — beta hero: near-fullscreen opening using real Dark Sea art.
   The asset (assets/images/hero-seascape.png) is a crop of the project's own
   launcher artwork, taken from inside the launcher's ornate border so the
   decorative frame, the skull banners and the painted "DARK SEA" wordmark are
   all excluded. What remains is the clean seascape: moonlit water, the ship,
   the lighthouse cliffs and distant sails.
   Provenance and the "owner replacement required" note: see website/README.md
   and the WEB-M002 report. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(34rem, 84vh, 60rem);
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  background-color: var(--bg-900);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/images/hero-seascape.png");
  /* The crop is already the right shape (2:1); a slight downward bias keeps the
     horizon comfortably above the CTA row on tall viewports. */
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Readability wash: darker top for the header, darker left for left-aligned copy.
   Deliberately not an opaque box — the art stays visible throughout. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 9, 13, 0.88) 0%, rgba(5, 9, 13, 0.34) 26%,
                    rgba(5, 9, 13, 0.62) 68%, var(--bg-900) 100%),
    linear-gradient(90deg, rgba(5, 9, 13, 0.80) 0%, rgba(5, 9, 13, 0.30) 52%,
                    rgba(5, 9, 13, 0.08) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__content { max-width: 46rem; }

.hero__title {
  font-size: var(--step-4);
  letter-spacing: 0.06em;
  /* Keeps the brand legible over the moonlit sky behind it */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.75);
}

.hero__brand { display: block; }

/* Tasteful beta indicator: clearly visible, but quieter than the brand. */
.hero__beta-marker {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.36em 0.9em 0.3em;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(8, 18, 27, 0.72);
  color: var(--gold);
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* balances the trailing letter-spacing */
  line-height: 1;
}

/* Major headline: the early-access hook. */
.hero__headline {
  margin-top: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

.hero__lede {
  margin-top: var(--space-4);
  max-width: 54ch;
  color: var(--text-primary);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}

/* CTA group: primary + secondary downloads on one row, community link below. */
.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__note {
  margin-top: var(--space-5);
  /* Lightened for readability over the hero art (secondary grey can lose
     contrast against the moonlit water). */
  color: var(--text-primary);
  opacity: 0.78;
  font-size: var(--step--1);
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* Entry animation — pure CSS, disabled under prefers-reduced-motion (see §13). */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    opacity: 0;
    animation: hero-rise 0.9s var(--ease) forwards;
  }

  .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
  .hero__content > *:nth-child(3) { animation-delay: 0.26s; }
  .hero__content > *:nth-child(4) { animation-delay: 0.36s; }
  .hero__content > *:nth-child(5) { animation-delay: 0.46s; }
  .hero__content > *:nth-child(6) { animation-delay: 0.56s; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------------------------------------------------------- 8. PLACEHOLDERS */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(45deg, rgba(139, 100, 40, 0.05) 0 10px, transparent 10px 20px),
    var(--surface);
  color: var(--text-secondary);
  text-align: center;
}

.placeholder__label {
  font-family: var(--font-heading);
  font-size: var(--step-0);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.82;
}

.placeholder__hint {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold);
  opacity: 0.85;
}

.placeholder--hero {
  margin-top: var(--space-7);
  min-height: clamp(190px, 26vw, 340px);
}

/* ---------------------------------------------------------------- 9. CARDS */
.card-grid,
.community-grid,
.download-grid {
  display: grid;
  gap: clamp(0.9rem, 0.4rem + 1.3vw, 1.6rem);
}

.card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.community-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.download-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card,
.download-card,
.community-card {
  position: relative;
  padding: clamp(1.1rem, 0.7rem + 1.1vw, 1.7rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.card:hover,
.download-card:hover,
.community-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }

/* Thin bronze top edge — the restrained version of a "premium" accent */
.card::before,
.download-card::before,
.community-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  opacity: 0.75;
}

.card__title,
.download-card__title,
.community-card__title {
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.card__body,
.download-card__meta,
.community-card__meta {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.card__todo {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  opacity: 0.8;
}

/* ------------------------------------------------- 9b. FEATURE CARDS (M003) */
/* Three pillars only, each with a locally authored inline-SVG icon. */
.card-grid--features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.feature-card { padding-top: clamp(1.3rem, 0.9rem + 1.2vw, 1.9rem); }

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(211, 168, 62, 0.07);
  color: var(--gold);
}

.feature-card__icon svg { width: 26px; height: 26px; }

.download-card__meta,
.community-card__meta { font-size: var(--step--1); }

.download-card .btn { margin-top: var(--space-5); }

/* ------------------------------------------- 9e. DOWNLOAD CARDS (WEB-M004) */
/* Two-state cards (READY / NOT READY). Today both are NOT READY: the Windows
   client and the Android APK do not exist in the repository, so the CTA is an
   inert <span> rather than a link that could resolve to a broken target. */
.dl-card { display: flex; flex-direction: column; }

.dl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.dl-card__platform { font-size: var(--step-2); }

.dl-card__state {
  display: inline-block;
  padding: 0.28em 0.7em;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.dl-card__state--pending { color: var(--gold); background: rgba(211, 168, 62, 0.10); }

/* Available now. Uses the brightest existing accent rather than a new hue, so it
   reads as "lit" against the dimmer pending gold without adding a colour the
   restrained gold/bronze palette does not use. */
.dl-card__state--live {
  color: var(--highlight);
  background: rgba(211, 168, 62, 0.20);
  border-color: var(--hairline-strong);
}

.dl-card__product {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step-0);
}

.dl-card__meta {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-3);
}

.dl-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.dl-card__row dt {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dl-card__row dd {
  margin: 0;
  font-size: var(--step-0);
  color: var(--text-primary);
  text-align: right;
  /* Long values (a real SHA256) must wrap, never force horizontal scroll */
  overflow-wrap: anywhere;
  min-width: 0;
}

.dl-card__unavailable { color: var(--text-secondary); font-style: italic; }

/* Download CTA: a real link now that both artifacts are published. */
.dl-card__cta {
  margin-top: var(--space-5);
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

/* Retains the documented inert pattern (<span aria-disabled="true">) as a state rule,
   so a platform added before its artifact exists still looks correctly unavailable. */
.dl-card__cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.dl-card__block { margin-top: var(--space-5); }

.dl-card__block-title {
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dl-card__list {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.55;
}

.dl-card__list li { position: relative; padding-left: 1.1em; }

.dl-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
}

.dl-card__note { font-style: italic; opacity: 0.85; }

/* Awaiting-artifact panel. Currently unused: both download cards are live, so the
   "Not available yet" panel was removed from index.html. Kept for a future platform. */
.dl-integrity {
  margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  padding: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 27, 0.5);
}

.dl-integrity__title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.dl-integrity__list {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.55;
}

.dl-integrity__list li { position: relative; padding-left: 1.1em; }

.dl-integrity__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
}

.dl-integrity__note {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* Beta disclaimer: visible, not a legal notice */
.note--disclaimer {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--bronze);
  color: var(--text-primary);
  font-size: var(--step-0);
  line-height: 1.6;
  opacity: 0.92;
}

.link-placeholder {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong);
  opacity: 0.9;
}

.link-placeholder.is-static { text-decoration: none; cursor: default; opacity: 0.7; }

/* ------------------------------------------- 9g. COMMUNITY (WEB-M005) */
/* Discord is the primary CTA; Facebook/Instagram are secondary; YouTube is
   visible but inactive. Icons are inline SVG, so no icon font or CDN. */
.discord-feature {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  /* Slightly stronger than the secondary cards so Discord reads as primary */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(211, 168, 62, 0.13), transparent 60%),
    linear-gradient(180deg, var(--bg-700), var(--bg-800));
  box-shadow: var(--shadow-panel);
}

.discord-feature__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(211, 168, 62, 0.10);
  color: var(--gold);
}

.discord-feature__icon svg { width: 55%; height: 55%; }

.discord-feature__body { min-width: 0; }

.discord-feature__title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.discord-feature__meta {
  margin-top: var(--space-3);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.discord-feature__cta { margin-top: var(--space-5); gap: var(--space-3); }

.discord-feature__cta .social-icon svg { width: 18px; height: 18px; }

/* Community cards: icon + title + copy + link */
.community-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(211, 168, 62, 0.07);
  color: var(--gold);
}

.community-card__icon svg { width: 22px; height: 22px; }

.community-card__link {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--gold);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.community-card__link:hover,
.community-card__link:focus-visible { color: var(--highlight); }

/* YouTube: visible, intentional, but deliberately not a control */
.community-card__link.is-inactive {
  color: var(--text-secondary);
  text-decoration: none;
  cursor: default;
  opacity: 0.75;
}

/* The "coming soon" suffix is real markup, not ::after, so that it can be
   translated per locale like every other string on the page. */
.community-card__link.is-inactive .is-soon {
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Beta feedback path */
.feedback-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 27, 0.5);
}

.feedback-panel__body { min-width: 0; flex: 1 1 22rem; }

.feedback-panel__title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.feedback-panel__meta {
  margin-top: var(--space-3);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.feedback-panel__cta { flex: 0 0 auto; }

/* Inline social icon wrapper (buttons + footer) */
.social-icon { display: inline-flex; align-items: center; justify-content: center; }
.social-icon svg { width: 16px; height: 16px; display: block; }

/* Footer social links */
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--step--1);
  transition: color 0.2s var(--ease);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { color: var(--highlight); }

.site-footer__social-link.is-inactive { cursor: default; opacity: 0.7; }
.site-footer__social-link.is-inactive:hover { color: var(--text-secondary); }

/* --------------------------------------------------------- 10. BETA PANEL */
.beta-panel {
  padding: clamp(1.4rem, 0.9rem + 2vw, 2.8rem);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(211, 168, 62, 0.06), transparent 42%),
    var(--surface-raised);
  box-shadow: var(--shadow-panel);
}

.beta-panel__body {
  margin-top: var(--space-4);
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: var(--step-1);
  font-weight: 300;
}

.beta-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.beta-fact dt {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.beta-fact dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

/* --------------------------------------------------------------- 11. FOOTER */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(5, 9, 13, 0.4), rgba(5, 9, 13, 0.92));
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
}

.site-footer__copy { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--step--1); }

.site-footer__stage {
  margin-top: var(--space-2);
  max-width: 34ch;
  color: var(--text-secondary);
  font-size: var(--step--1);
  opacity: 0.85;
}

.site-footer__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }

.site-footer__list a {
  color: var(--text-secondary);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible { color: var(--highlight); }

.site-footer__social-label {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer__social-list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

.site-footer__social-list .link-placeholder { margin-top: 0; }

/* --------------------------------------------------------- 12. SKIP LINK */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--gold);
  color: #100C04;
  font-weight: 600;
}

.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ 13. MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   14. RESPONSIVE
   Target widths: 360 (mobile) · 768 (tablet) · 1366 · 1920 (desktop).
   The layout is intrinsically fluid; these queries only adjust navigation
   behaviour, density and spacing.
   ========================================================================== */

/* --- Mobile navigation: <= 900px collapses to the toggle menu --- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5) var(--content-pad) var(--space-6);
    background: rgba(5, 9, 13, 0.97);
    border-bottom: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-panel);
  }

  /* The [hidden] attribute is the source of truth; JS toggles it */
  .primary-nav[data-open="true"] { display: flex; }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .primary-nav__list li + li { border-top: 1px solid var(--hairline); }

  .primary-nav__link { display: block; padding: 0.85rem 0; font-size: var(--step-0); }

  .primary-nav__link::after { display: none; }

  .primary-nav__cta { align-self: flex-start; margin-top: var(--space-2); }

  /* The language menu expands inline inside the collapsed panel instead of
     floating, so it cannot overlap the panel's own items on small screens. */
  .lang-menu { width: 100%; }
  .lang-menu__summary { width: 100%; justify-content: space-between; }
  .lang-menu__list {
    position: static;
    margin-top: var(--space-2);
    min-width: 0;
    box-shadow: none;
  }

  .site-header__inner { position: relative; }
}

/* --- Small mobile (360px / 390px classes) ---
   Query is in `em` so it also triggers when the user zooms text. */
@media (max-width: 30em) {
  :root { --header-h: 60px; }

  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 0.95rem; letter-spacing: 0.12em; }
  .brand__tag { font-size: 0.56rem; letter-spacing: 0.28em; }

  /* Hero: keep the opening section from becoming excessively tall on phones,
     and let the CTAs stack full-width without crowding. */
  .hero {
    min-height: clamp(28rem, 78vh, 42rem);
    padding-block: var(--space-7) var(--space-6);
  }

  .hero__title { font-size: clamp(2.1rem, 12vw, 3rem); }

  /* Portrait crops the pre-cropped 2:1 art heavily on X; bias slightly left so
     the moonlit water stays behind the left-aligned copy. */
  .hero__bg { background-position: 38% 45%; }

  .hero__headline { font-size: var(--step-1); letter-spacing: 0.07em; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__cta-row { align-items: stretch; }
  .hero__cta-row > .hero__cta { width: 100%; }

  .beta-facts { grid-template-columns: 1fr; }
  .card-grid, .download-grid, .community-grid { grid-template-columns: 1fr; }

  /* Download cards: stack label/value rows so nothing crowds at 360px */
  .dl-card__row { flex-direction: column; align-items: flex-start; gap: 0; }
  .dl-card__row dd { text-align: left; }
  .dl-card__head { align-items: flex-start; }
  .dl-card__cta { letter-spacing: 0.1em; }

  /* Community (WEB-M005): stack the Discord feature and feedback panel */
  .discord-feature { flex-direction: column; align-items: flex-start; }
  .discord-feature__cta { width: 100%; justify-content: center; letter-spacing: 0.1em; }
  .feedback-panel { flex-direction: column; align-items: stretch; }
  .feedback-panel__cta { width: 100%; text-align: center; justify-content: center; }
  .feedback-panel__body { flex: 1 1 auto; }
}

/* --- Tablet tuning (768px class) --- */
@media (min-width: 30.0625em) and (max-width: 64em) {
  .hero__content { max-width: 40rem; }
}

/* --- Large desktop (1920px class): widen the shell a little --- */
@media (min-width: 100em) {
  :root { --content-max: 1280px; }
}

/* ------------------------------------------------- 13. LANGUAGE SWITCH */
/* One static page per locale the GAME ships (see Assets/Resources/Localization
   and Loc.cs). Plain links only - no JS, no redirects - so every language is
   directly linkable, independently indexable, and works with scripting off. */
.lang-switch__label {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lang-switch__list {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.lang-switch__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  transition: color 0.2s var(--ease);
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible { color: var(--highlight); }

/* The language you are already reading is marked, not a link to itself. */
.lang-switch__link[aria-current="true"] {
  color: var(--highlight);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ------------------------------------------------- 14. LANGUAGE FLAGS */
/* Flags are decoration: the language name beside them is the real label, so
   each flag carries alt="" and never becomes a second accessible name.
   Sizing lives here so header and footer flags cannot drift apart. */
.lang-switch__flag,
.lang-menu__flag {
  width: 20px;
  height: 13px;
  flex: 0 0 auto;
  display: block;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

/* Screen-reader-only text (the header menu's "Language" label). */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------- 15. HEADER LANGUAGE MENU (`<details>`)
   A dropdown built from <details>/<summary>: no JavaScript at all, and it sits
   inside the nav so on mobile it opens with the menu panel rather than floating
   loose over it. Keyboard and screen-reader behaviour come free with <details>. */
.lang-menu { position: relative; }

.lang-menu__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

/* Drop the native disclosure triangle in every engine. */
.lang-menu__summary::-webkit-details-marker { display: none; }
.lang-menu__summary::marker { content: ""; }

.lang-menu__summary:hover,
.lang-menu__summary:focus-visible,
.lang-menu[open] > .lang-menu__summary {
  color: var(--text-primary);
  border-color: var(--hairline-strong);
}

.lang-menu__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.lang-menu[open] .lang-menu__chevron { transform: rotate(-135deg); }

.lang-menu__list {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  min-width: 11rem;
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  background: rgba(5, 9, 13, 0.98);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

.lang-menu__link {
  padding: 0.45rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  text-decoration: none;
}

.lang-menu__link:hover,
.lang-menu__link:focus-visible {
  background: rgba(211, 168, 62, 0.12);
  color: var(--text-primary);
}