/*
  Tank Battle: Firefall City site, drawn like the game's own screens
  (TankApp/UiFactory, BrickText, TallyScreen): near-black, the bundled
  Press Start 2P pixel font for everything the game would print, titles
  laid in bricks one letter pixel at a time, gray pixel-box buttons with a
  black inner line and cut corners, gold (#FACC40) for the player and for
  whatever is selected, red labels and orange numbers from the results
  screen, and real captures of the 3D battlefield. Long reading text stays
  in the system sans. Dark only, like the game.
*/

@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/PressStart2P-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0a0a0b;
  --card: #18181a;            /* stage card body */
  --card-edge: #34343a;       /* its frame */
  --banner: #1a1714;          /* the cheat mode banner */
  --hairline: #1d1d20;

  --text: #f2edde;            /* UiFactory.TextCol */
  --text2: #c9c4b6;
  --muted: #807d75;           /* UiFactory.TextDim */

  --gold: #facc40;            /* UiFactory.Accent */
  --red: #ed5438;             /* TallyScreen labels */
  --orange: #ffa840;          /* TallyScreen numbers */
  --on-gold: #1f1408;

  /* BrickText */
  --mortar: #5a2a14;
  --brick-lit: #e07a45;
  --brick: #c95a2b;
  --brick-shade: #93401c;

  --pixel: "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --wide: 1080px;
  --doc: 720px;
  --gutter: 20px;

  /* BrickText's wall: one 8×8 cell per letter pixel, two courses of four,
     joints staggered by half a cell, lit top row, shaded bottom row. */
  --wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%235a2a14'/%3E%3Cg fill='%23e07a45'%3E%3Crect width='7' height='1'/%3E%3Crect y='4' width='3' height='1'/%3E%3Crect x='4' y='4' width='4' height='1'/%3E%3C/g%3E%3Cg fill='%23c95a2b'%3E%3Crect y='1' width='7' height='1'/%3E%3Crect y='5' width='3' height='1'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3C/g%3E%3Cg fill='%2393401c'%3E%3Crect y='2' width='7' height='1'/%3E%3Crect y='6' width='3' height='1'/%3E%3Crect x='4' y='6' width='4' height='1'/%3E%3C/g%3E%3C/svg%3E");

  /* UiFactory's 8×8 pixel box, 9-sliced at 3: rim, black inner line,
     corner texel cut away, dark fill. Normal, hovered, pressed (gold). */
  --box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23aaa496' d='M1 0h6v1h1v6H7v1H1V7H0V1h1z'/%3E%3Cpath d='M1 1h6v6H1z'/%3E%3Cpath fill='%23202226' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --box-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23f2edde' d='M1 0h6v1h1v6H7v1H1V7H0V1h1z'/%3E%3Cpath d='M1 1h6v6H1z'/%3E%3Cpath fill='%232c2e33' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --box-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23facc40' d='M1 0h6v1h1v6H7v1H1V7H0V1h1z'/%3E%3Cpath d='M1 1h6v6H1z'/%3E%3Cpath fill='%233b3218' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  /* The cheat banner's UNLOCK bar: gold with a brown rim. */
  --box-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23996119' d='M1 0h6v1h1v6H7v1H1V7H0V1h1z'/%3E%3Cpath fill='%23facc40' d='M2 1h4v1h1v4H6v1H2V6H1V2h1z'/%3E%3C/svg%3E");

  /* The stage card frame, 9-sliced at 2: a two-texel rim, corner cut. */
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2334343a' fill-rule='evenodd' d='M1 0h6v1h1v6H7v1H1V7H0V1h1zM2 2v4h4V2z'/%3E%3C/svg%3E");
  --frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23facc40' fill-rule='evenodd' d='M1 0h6v1h1v6H7v1H1V7H0V1h1zM2 2v4h4V2z'/%3E%3C/svg%3E");

  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

img { display: block; max-width: 100%; height: auto; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--on-gold);
  font: 12px/1.5 var(--pixel);
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.doc { max-width: var(--doc); }

/* Small pixel caption, red like the results screen's I-PLAYER. */
.label {
  font: 12px/1.6 var(--pixel);
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
}

/* A title laid in bricks: every pixel of a letter is one 8×8 brick cell
   (font sizes are multiples of 8, line height 1.25 keeps the letter rows
   on the brick grid), with BrickText's drop shadow half a pixel down-right. */
.chunky {
  font-family: var(--pixel);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brick);
  background: var(--wall) 0 0 / 0.125em 0.125em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0.0625em 0.0625em 0 rgba(0, 0, 0, 0.6));
}

/* ---------- Top bar ---------- */

.topbar { background: #000; }
.topbar .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav lang";
  align-items: center;
  gap: 10px 24px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font: 12px/1.5 var(--pixel);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand em { font-style: normal; color: var(--gold); }
.nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; font: 12px/1.5 var(--pixel); }
.nav a { color: var(--text); text-decoration: none; text-transform: uppercase; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }

/* Language switch: three pixel-box keys. */
.lang { grid-area: lang; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lang a {
  display: inline-block;
  min-width: 44px;
  padding: 3px 4px;
  border: 6px solid transparent;
  border-image: var(--box) 3 fill / 6px;
  font: 12px/1.5 var(--pixel);
  text-align: center;
  color: var(--text);
  text-decoration: none;
}
.lang a:hover { border-image-source: var(--box-hi); }
.lang a[aria-current="true"] { border-image-source: var(--box-gold); color: var(--gold); }

/* A course of bricks, the same wall the titles are built from. */
.brickband {
  height: 16px;
  background: var(--wall) 0 0 / 16px 16px;
  border-bottom: 4px solid #000;
}

/* ---------- Buttons and chips ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: 6px solid transparent;
  border-image: var(--box) 3 fill / 6px;
  font: 12px/1.5 var(--pixel);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}
.btn:hover { border-image-source: var(--box-hi); }
.btn:active { border-image-source: var(--box-gold); color: var(--gold); }
.btn-primary { border-image-source: var(--box-unlock); color: var(--on-gold); }
.btn-primary:hover, .btn-primary:active { border-image-source: var(--box-unlock); color: #000; }

.chip {
  display: inline-block;
  margin: 0;
  padding: 8px 12px;
  border: 4px solid transparent;
  border-image: var(--frame) 2 / 4px;
  font: 12px/1.6 var(--pixel);
  text-transform: uppercase;
  color: var(--muted);
}

/* The title screen menu: captions in white, the selected one in gold with
   the player tank parked beside it. The first entry is selected until
   another is hovered or focused, as on the cartridge. */
.menu {
  display: inline-grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.menu a {
  position: relative;
  display: inline-block;
  padding: 4px 0 4px 54px;
  font: 16px/1.5 var(--pixel);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}
.menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 34px;
  margin-top: -18px;
  background: url("assets/game/cursor.png") center / contain no-repeat;
  visibility: hidden;
}
.menu a.sel, .menu a:hover, .menu a:focus-visible { color: var(--gold); }
.menu a.sel::before, .menu a:hover::before, .menu a:focus-visible::before { visibility: visible; }
.menu:hover a.sel:not(:hover), .menu:focus-within a.sel:not(:focus-visible):not(:hover) { color: var(--text); }
.menu:hover a.sel:not(:hover)::before, .menu:focus-within a.sel:not(:focus-visible):not(:hover)::before { visibility: hidden; }
.menu a:focus-visible { outline: none; }

/* ---------- Cards ---------- */

/* A stage card: dark body inside a thin two-texel frame. */
.panel {
  background: var(--card);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-image: var(--frame) 2 / 4px;
  padding: 18px;
}

/* ---------- Hero: the title screen ---------- */

.hero {
  padding: 36px 0 72px;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(10, 10, 11, 0) 65%, var(--bg)),
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(4, 4, 5, 0.7), rgba(4, 4, 5, 0.92)),
    url("assets/game/hero-forest.jpg") center 30% / cover no-repeat,
    var(--bg);
}
/* The HUD line along the top: white captions, gold numbers. */
.hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
  margin: 0 0 44px;
  font: 12px/1.5 var(--pixel);
  text-transform: uppercase;
  color: var(--text);
}
.hud b { font-weight: 400; color: var(--gold); margin-left: 0.5em; }
.title { margin: 0; font-weight: 400; }
.title .chunky { display: block; width: fit-content; margin: 0 auto; text-align: center; }
.title .t1 { font-size: 32px; margin-bottom: 16px; }
.title .t2 { font-size: 64px; }
.tagline { font: 16px/1.5 var(--pixel); text-transform: uppercase; color: var(--gold); margin: 28px 0 22px; }
.lede { font-size: 1.12rem; color: var(--text2); max-width: 36em; margin: 0 auto 36px; text-shadow: 0 1px 3px #000, 0 0 12px #000; }
.hero .menu { margin-bottom: 36px; }
.hero .chip { display: table; margin: 0 auto; }
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font: 12px/1.6 var(--pixel);
  text-transform: uppercase;
  color: var(--muted);
}
.facts li + li::before { content: "·"; margin-right: 12px; }

/* ---------- Sections ---------- */

.section { padding: 72px 0; }
.section + .section { border-top: 2px solid var(--hairline); }
.section h2 { font-size: 32px; margin: 0 0 18px; }
.section .intro { color: var(--text2); max-width: 38em; margin: 0 0 36px; }

/* Screenshots: a strip of cards like the stage select, scrolled sideways. */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(560px, 84vw);
  gap: 18px;
  margin: 0;
  padding: 4px max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter))) 20px;
  scroll-padding: 0 max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--card-edge) transparent;
}
.shots li { scroll-snap-align: start; }
.shot { margin: 0; padding: 10px; height: 100%; }
.shot img { width: 100%; background: #000; }
.shot figcaption { margin: 14px 4px 4px; font: 12px/1.6 var(--pixel); text-transform: uppercase; color: var(--text); }
.shot figcaption b { font-weight: 400; color: var(--gold); margin-right: 0.75em; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.card h3, .tile h3, .plan h3 {
  font: 12px/1.7 var(--pixel);
  text-transform: uppercase;
  color: var(--text);
}
.card h3 { margin: 0 0 10px; }
.card p { color: var(--text2); font-size: 15px; margin: 0; }
.card .label { color: var(--gold); margin-bottom: 10px; }

/* Terrain cards with a capture of the tile from the game. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.tile {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "img name" "img text";
  grid-template-rows: auto 1fr;
  gap: 8px 16px;
  padding: 10px;
}
.tile img { grid-area: img; width: 96px; height: 96px; background: #000; }
.tile h3 { grid-area: name; margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.tile p { grid-area: text; margin: 0; color: var(--text2); font-size: 15px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.split > div > p:not(.label) { color: var(--text2); }

/* Key/value panel, like the results screen: captions on the left, the
   numbers in orange. */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px 24px;
  margin: 0;
  font-size: 15px;
}
.kv dt { font: 12px/1.6 var(--pixel); text-transform: uppercase; color: var(--text); padding-top: 3px; }
.kv dd { margin: 0; color: var(--text2); }
.kv dd.none { font: 12px/1.6 var(--pixel); color: var(--orange); text-transform: uppercase; padding-top: 3px; }

/* Free and cheat mode. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plan h3 { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.5; margin: 0 0 8px; }
.plan .sub { color: var(--text2); font-size: 15px; margin: 0 0 18px; }
.plan .lock { flex: none; width: 28px; height: 28px; fill: var(--gold); }
/* The in-game cheat mode banner: warm dark fill in a gold frame. */
.plan.cheat { background-color: var(--banner); border-image-source: var(--frame-gold); }
.plan.cheat .label, .plan.cheat h3 { color: var(--gold); }
.ticks { list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--text2); }
.ticks li { position: relative; padding: 9px 0 9px 26px; border-top: 2px solid var(--hairline); }
.plan.cheat .ticks li { border-top-color: #2a241b; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 10px;
  height: 10px;
  background: var(--muted);
}
.plan.cheat .ticks li::before { background: var(--gold); }
.note { color: var(--muted); font-size: 14px; margin: 20px 0 0; }

.closing { text-align: center; }
.closing h2 { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.closing .cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 32px; }
.closing .chip { display: inline-flex; align-items: center; min-height: 52px; }

/* ---------- Documents: privacy, terms, support ---------- */

.doc-page { padding-top: 48px; padding-bottom: 24px; }
.doc-page h1 { font-size: 32px; margin: 0 0 14px; -webkit-hyphens: auto; hyphens: auto; }
.updated { font: 12px/1.6 var(--pixel); text-transform: uppercase; color: var(--muted); margin: 0 0 36px; }
.doc-page h2 {
  font: 16px/1.6 var(--pixel);
  text-transform: uppercase;
  color: var(--text);
  margin: 48px 0 14px;
  padding-top: 24px;
  border-top: 2px solid var(--hairline);
}
/* Section numbers on a brick. */
.doc-page h2 .num {
  display: inline-block;
  margin-right: 14px;
  padding: 4px 6px 3px;
  background: var(--brick);
  border-top: 2px solid var(--brick-lit);
  border-bottom: 3px solid var(--brick-shade);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  vertical-align: 0.1em;
}
.doc-page h3 { font-size: 1.02rem; margin: 22px 0 6px; }
.doc-page p, .doc-page li { color: var(--text2); }
.doc-page strong { color: var(--text); font-weight: 700; }
.doc-page ul { padding-left: 22px; }
.doc-page li { margin: 6px 0; }
.doc-page li::marker { color: var(--brick); }
code { font-family: var(--mono); font-size: 0.9em; background: #1d1d20; padding: 1px 5px; }

.callout {
  background: var(--banner);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-image: var(--frame-gold) 2 / 4px;
  padding: 18px 20px;
  margin: 0 0 12px;
}
.callout p { color: var(--text); margin: 0; }
.callout .label { color: var(--gold); }

/* FAQ. */
.faq details { border-top: 2px solid var(--hairline); }
.faq details:last-child { border-bottom: 2px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 48px 18px 0;
  position: relative;
  font-weight: 700;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  width: 32px;
  height: 32px;
  border: 6px solid transparent;
  border-image: var(--box) 3 fill / 6px;
  font: 16px/20px var(--pixel);
  text-align: center;
  color: var(--text);
}
.faq summary:hover::after { border-image-source: var(--box-hi); }
.faq details[open] summary::after { content: "-"; border-image-source: var(--box-gold); color: var(--gold); }
.faq details > *:not(summary) { margin-top: 0; }
.faq details > :last-child { margin-bottom: 18px; }

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

.footer { margin-top: 72px; background: #000; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; padding-top: 32px; padding-bottom: 48px; }
.footer .links { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 12px/1.6 var(--pixel); text-transform: uppercase; }
.footer .links a { color: var(--text); text-decoration: none; }
.footer .links a:hover { color: var(--gold); }
.footer .links a[href^="mailto:"] { text-transform: none; }
.footer p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.footer .fine { flex-basis: 100%; font-size: 12px; }
.home .footer { margin-top: 0; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .hero { padding: 28px 0 56px; }
  .title .t2 { font-size: 48px; }
  .split, .plans { grid-template-columns: 1fr; gap: 18px; }
  .split { gap: 32px; }
  .section { padding: 56px 0; }
}

@media (max-width: 900px) {
  .topbar .wrap { grid-template-columns: 1fr auto; grid-template-areas: "brand lang" "nav nav"; }
  .nav { justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .brand span { white-space: normal; }
  .hud { gap: 8px 24px; margin-bottom: 32px; }
  .title .t1 { font-size: 24px; }
  .title .t2 { font-size: 40px; }
  .section h2, .doc-page h1 { font-size: 24px; -webkit-hyphens: auto; hyphens: auto; }
  .menu a { font-size: 12px; }
  .facts { gap: 8px 22px; }
  .facts li + li::before { content: none; }
  .kv { gap: 12px 16px; }
}

@media (max-width: 420px) {
  .brand .tb { display: none; }
}

@media (max-width: 359px) {
  .title .t2 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .chunky { -webkit-text-fill-color: CanvasText; background: none; filter: none; }
}

/* Visually hidden, still read by screen readers. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}