/* BANSE — one stylesheet, no framework.
 *
 * The whole site is greyscale except for one variable, `--accent`, which each
 * page sets to the colour of the game it's about. That's what lets a shared
 * shell hold games that look nothing alike: BANSE stays neutral, the game
 * brings the colour.
 *
 * Dark only, deliberately — these are games played in the dark, and a light
 * theme would make the screenshots (all of which are near-black) sit in white
 * boxes.
 */

:root {
  --bg:        #08090b;
  --bg-raised: #0e1014;
  --bg-sunk:   #050608;
  --line:      rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);
  --ink:       #f2f5f7;
  --ink-2:     #99a1aa;
  --ink-3:     #6b737c;
  --accent:    #7dd3e8;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --step: clamp(64px, 9vw, 128px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A single very wide wash of the page accent, so the background is never
     flat black but never a gradient you'd notice either. */
  background-image:
    radial-gradient(120% 80% at 78% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img, video { max-width: 100%; display: block; }

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

p { margin: 0 0 1em; }

h1, h2, h3 {
  margin: 0 0 0.4em;
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.015em; }

.muted { color: var(--ink-2); }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 720px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #04070a; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  height: 62px; display: flex; align-items: center; justify-content: space-between;
}

.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: 0.18em; font-size: 0.82rem; text-transform: uppercase;
}

.nav__mark {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
  position: relative;
}
.nav__mark::after {
  content: ""; position: absolute; inset: 3.5px;
  border-radius: 50%; background: var(--accent);
}

.nav__links { display: flex; gap: 26px; font-size: 0.94rem; }
.nav__links a { color: var(--ink-2); transition: color 0.18s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); }

/* -------------------------------------------------------------- buttons */

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  font-size: 0.94rem; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid var(--line);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn--lg { padding: 13px 24px; font-size: 1rem; }
.btn__mark { width: 15px; height: 18px; flex: none; }

.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #04070a;
}
.btn--primary:hover { transform: translateY(-1px); filter: brightness(1.08); }

.btn--ghost { color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); }

.btn--disabled {
  color: var(--ink-3);
  background: transparent;
  border-style: dashed;
  cursor: default;
}

.back {
  display: inline-block; color: var(--ink-2); font-size: 0.92rem; margin-bottom: 34px;
}
.back:hover { color: var(--ink); }

/* --------------------------------------------------------------- badge */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 18px;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.badge--development { color: var(--ink-3); }
.badge--development::before { background: var(--ink-3); box-shadow: none; }

/* ---------------------------------------------------------------- hero */

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }

.hero__grid {
  display: grid; gap: clamp(32px, 6vw, 72px);
  grid-template-columns: 1.05fr 0.95fr; align-items: center;
}

.hero__title { font-size: clamp(3rem, 8vw, 5.4rem); margin-bottom: 0.1em; }
.hero__sub {
  color: var(--accent); font-size: 1.05rem;
  letter-spacing: 0.03em; margin-bottom: 1.1em;
}
.hero__blurb { color: var(--ink-2); font-size: 1.1rem; max-width: 46ch; }

.hero__device { display: flex; justify-content: center; }

.device {
  position: relative;
  width: min(280px, 72vw);
  aspect-ratio: 9 / 19.5;
  border-radius: 42px;
  padding: 7px;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.08));
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.9),
    0 0 90px -20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.device video {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 35px; background: var(--bg-sunk);
}

/* ------------------------------------------------------------- sections */

.section { padding: var(--step) 0; }
.section--tight { padding: clamp(24px, 4vw, 48px) 0; }
.section--edge { padding-bottom: calc(var(--step) * 1.2); }

.section__head { margin-bottom: 40px; max-width: 60ch; }
.section__head h2 { margin-bottom: 0.2em; }

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid; gap: 18px;
  /* auto-fit, not auto-fill: with two games the row should be full rather than
     leaving a ghost column where a third game isn't yet. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-sunk));
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--accent) 60%, transparent);
}
.card--quiet { opacity: 0.62; }
.card--quiet:hover { transform: none; border-color: var(--line); box-shadow: none; }

.card__icon { width: 72px; height: 72px; border-radius: 17px; border: 1px solid var(--line); }
.card__icon--empty {
  display: block; width: 72px; height: 72px; border-radius: 17px;
  border: 1px dashed var(--line); background: var(--bg-sunk);
}

.card__body { flex: 1; }
.card__title { margin-bottom: 0.15em; }
.card__sub { color: var(--accent); font-size: 0.88rem; margin-bottom: 0.7em; }
.card__blurb { color: var(--ink-2); font-size: 0.95rem; margin: 0; }

.card__foot { display: flex; align-items: center; justify-content: space-between; }
.card__foot .badge { margin-bottom: 0; }
.card__go { color: var(--ink-3); transition: transform 0.2s ease, color 0.2s ease; }
.card:hover .card__go { color: var(--accent); transform: translateX(3px); }

/* ----------------------------------------------------------- game pages */

.ghero { padding: clamp(40px, 6vw, 72px) 0 0; }
.ghero__top { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.ghero__icon { width: 96px; height: 96px; border-radius: 22px; border: 1px solid var(--line); flex: none; }
.ghero__top h1 { margin-bottom: 0.08em; }
.ghero__sub { color: var(--accent); margin: 0; letter-spacing: 0.03em; }
.ghero__top .badge { margin-bottom: 10px; }

.lede { font-size: 1.18rem; color: var(--ink-2); max-width: 62ch; }

.videoframe {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-sunk); max-width: 300px; margin: 0 auto;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9);
}
.videoframe video { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; }
.caption { text-align: center; font-size: 0.88rem; margin-top: 16px; }

/* A scrolling rail rather than a grid. Phone screenshots are 1:2.17 — five of
   them in a row of grid cells makes a wall of tall thin strips, and the page
   ends up scrolling past nothing else. A rail keeps them at a readable size at
   any count and behaves the same on a phone. */
.shots {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  /* The rail is a direct child of the section, so it already spans the
     viewport; this indents its contents to line up with .wrap. */
  padding-inline: max(24px, calc((100vw - 1140px) / 2 + 24px));
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.shot { margin: 0; flex: 0 0 auto; width: 250px; scroll-snap-align: start; }
.shot img {
  width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg-sunk);
}
.shot figcaption { color: var(--ink-3); font-size: 0.82rem; margin-top: 12px; max-width: 250px; }

.features {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.feature {
  padding: 26px; border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--bg-raised);
}
.feature h3 { color: var(--ink); }
.feature p { color: var(--ink-2); font-size: 0.96rem; margin: 0; }

.specs {
  display: grid; gap: 0; margin: 0;
  border-top: 1px solid var(--line-soft);
}
.spec {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 15px 2px; border-bottom: 1px solid var(--line-soft);
}
.spec dt { color: var(--ink-3); font-size: 0.9rem; }
.spec dd { margin: 0; text-align: right; color: var(--ink); font-size: 0.95rem; }

/* --------------------------------------------------------- doc pages */

.doc { padding: clamp(48px, 7vw, 88px) 0 var(--step); }
.doc--center { text-align: center; }
.doc h2 {
  margin-top: 2.2em; padding-top: 0.9em; border-top: 1px solid var(--line-soft);
  font-size: 1.35rem;
}
.doc .callout h2, .doc .gamesupport h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.doc p { color: var(--ink-2); }
.doc .lede { color: var(--ink-2); }
.doc a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc strong { color: var(--ink); font-weight: 560; }

.callout {
  margin: 36px 0; padding: 26px 28px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-raised);
}
.callout p:last-child { margin-bottom: 0; }

.gamesupport { margin-top: 56px; }
.gamesupport > h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.gamesupport > .muted { color: var(--accent); margin-bottom: 1.4em; font-size: 0.92rem; }

.qa {
  border-bottom: 1px solid var(--line-soft);
}
.qa summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  color: var(--ink); font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 1.2rem; transition: transform 0.2s ease, color 0.2s ease;
}
.qa[open] summary::after { content: "−"; color: var(--accent); }
.qa summary:hover { color: var(--accent); }
.qa p { padding: 0 0 18px; margin: 0; }

/* ----------------------------------------------------------------- form */

.form { margin: 28px 0 8px; }

.field { margin-bottom: 20px; }

.field label {
  display: block; margin-bottom: 8px;
  font-size: 0.86rem; letter-spacing: 0.02em; color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.18s ease, background 0.18s ease;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

/* The arrow has to be drawn in: `appearance: none` is what stops iOS and macOS
   painting a light-mode select over a dark page. */
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.16); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--bg-raised);
}

/* `:user-invalid`, not `:invalid` — the latter matches an empty required field
   from the moment the page loads, so every field greets the visitor in red
   before they've typed anything. This one waits until they've actually had a
   go at it. */
.field input:user-invalid,
.field textarea:user-invalid { border-color: rgba(255, 120, 150, 0.55); }

.hint { color: var(--ink-3); font-size: 0.82rem; margin: 8px 0 0; }

/* Off-screen rather than display:none — a bot reading the DOM fills what it can
   find, and some skip anything explicitly hidden. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form button[type="submit"] { margin-top: 4px; }
.form button[disabled] { opacity: 0.55; cursor: default; }

.form__status { margin: 16px 0 0; font-size: 0.92rem; min-height: 1.5em; }
.form__status--busy { color: var(--ink-2); }
.form__status--ok { color: var(--accent); }
.form__status--bad { color: #ff8098; }

.tablewrap { overflow-x: auto; margin: 24px 0 8px; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 540px; }
.table th, .table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table thead th { color: var(--ink-3); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.table tbody th { color: var(--ink); font-weight: 560; white-space: nowrap; }
.table td { color: var(--ink-2); }

/* -------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 52px 0 40px;
  background: var(--bg-sunk);
}
.foot__inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start;
}
.foot__brand { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3em; }
.foot__inner .muted { margin: 0; font-size: 0.92rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 0.92rem; }
.foot__links a { color: var(--ink-2); }
.foot__links a:hover { color: var(--accent); }
.foot__legal {
  max-width: 1140px; margin: 40px auto 0; padding: 0 24px;
  font-size: 0.78rem; color: var(--ink-3);
}

/* -------------------------------------------------------------- narrow */

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__device { order: -1; }
  .device { width: min(230px, 62vw); }
  .ghero__top { gap: 16px; }
  .ghero__icon { width: 72px; height: 72px; border-radius: 17px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav__links { gap: 18px; font-size: 0.88rem; }
  .shots { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .btn { width: 100%; }
  .row { gap: 10px; }
}

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