/* ===========================================================================
   TANKONOMY · PUBLIC SITE
   The design system is taken from the game by DNA, not copied off a screen.

   Carried over literally:
     colour   — packages/client/src/render/ui.js, object C;
     type     — Jupiteroid (headings) and Zerove (interface), the same files;
     geometry — THE CUT CORNER: two corners out of four sheared at 45°.
                It reads as an instrument panel, not as an app card.

   Decided separately for the site:
     grid     — 12 columns, 1360 px maximum, margins grow with the width;
     rhythm   — an 8 px step, vertical spacing is a multiple of it;
     density  — there is more air here than in the game: the game saves screen,
                the site saves attention.

   The rules we hold to (the same as in the game's UI kit):
     1. Colour carries meaning. An accent is a role, not decoration.
     2. One quantity, one way of showing it.
     3. State is visible before the click.
     4. No animation for animation's sake.
   =========================================================================== */

/* --- fonts -------------------------------------------------------------- */
@font-face {
  font-family: 'Jupiteroid';
  src: url('../assets/fonts/jupiteroid-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jupiteroid';
  src: url('../assets/fonts/jupiteroid-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zerove';
  src: url('../assets/fonts/zerove-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- tokens ------------------------------------------------------------- */
:root {
  --ink:        #e9eef8;
  --ink-dim:    #93a3bf;
  --ink-faint:  #5d6a86;
  --ground:     #05070c;
  --ground-2:   #080a11;
  --panel:      #111623;
  --panel-top:  #1c2336;
  --panel-hi:   #232c44;
  --line:       rgba(255,255,255,0.09);
  --line-hi:    rgba(255,255,255,0.20);
  --line-solid: #232b3d;

  --gold:       #ffc441;
  --cyan:       #5fd8ff;
  --red:        #dc6e6e;
  --green:      #6edc82;
  --violet:     #a78bfa;
  --steel:      #8fa2c4;
  --orange:     #ff8250;

  --accent:     var(--gold);

  --display: 'Jupiteroid', 'Segoe UI', system-ui, sans-serif;
  --ui:      'Zerove', 'Segoe UI', system-ui, sans-serif;
  --mono:    ui-monospace, Menlo, 'SF Mono', monospace;

  --cut: 12px;
  --wrap: 1360px;
  --pad: clamp(20px, 4vw, 56px);

  --shadow-1: 0 2px 10px rgba(0,0,0,.4);
  --shadow-2: 0 18px 46px rgba(0,0,0,.55);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* --- the cut corner ------------------------------------------------------ */
/* One shape for the whole site, so it is a variable rather than a set of
   polygons. */
:root {
  --chamfer: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
}

/* The edge is drawn as a backing layer rather than a border: a border does not
   follow the cut. The parent is the line colour, ::before one pixel inside is
   the fill.

   The z-index of that backing is NEGATIVE, and that is not cosmetic. At
   z-index: 0 a positioned pseudo-element paints AFTER inline content, that is,
   it covers bare text — the text that sits in a panel without a wrapping tag.
   The bug shows only on paragraphs with mixed content and is therefore found by
   eye, not by markup. clip-path creates a stacking context, so −1 stays inside
   the panel and does not slip under the page. */
.cut { position: relative; clip-path: var(--chamfer); background: var(--line-solid); }
.cut::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: polygon(
    calc(var(--cut) - 1px) 0, 100% 0,
    100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%,
    0 100%, 0 calc(var(--cut) - 1px));
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel) 55%, #0c101a 100%);
}
.cut > * { position: relative; }
.cut--flat::before { background: var(--panel); }
.cut--dark::before { background: #0b0f18; }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.62 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: #10131c; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* --- the «table»: grid and vignette, like the backdrop of the game screens - */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, #141c30 0%, #0a0e18 55%, #05070c 100%);
}
.grid-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,170,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(130% 90% at 50% 10%, #000 25%, transparent 78%);
}
.page { position: relative; z-index: 1; }

/* --- typography ---------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(38px, 6.2vw, 84px); letter-spacing: -.022em; }
h2 { font-size: clamp(28px, 3.9vw, 54px); letter-spacing: -.016em; }
h3 { font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -.005em; }
h4 { font-size: 16px; letter-spacing: .02em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-dim); }
.dim  { color: var(--ink-dim); }
.faint{ color: var(--ink-faint); }
.mono { font-family: var(--mono); font-size: .92em; }

/* Letter-spacing for short all-caps labels: without it small caps are mush. */
.eyebrow {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow--plain::before { display: none; }

.kicker {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}

/* --- layout -------------------------------------------------------------- */
.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--pad) * 2, 900px); margin-inline: auto; }

.section { padding-block: clamp(64px, 9vw, 132px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head h2, .section-head > p { max-width: 42ch; }
.section-head > p { max-width: 78ch; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 + p { margin-top: 16px; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.cols { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cols-auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 1080px) { .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px)  {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- header -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8,10,17,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hdr__in {
  width: min(100% - 24px, 1560px); margin-inline: auto;
  height: 62px; display: flex; align-items: center; gap: 8px;
}
/* THE MARK AND THE LETTERFORMS ARE CARRIED OVER FROM THE GAME AS THEY ARE.
   Not «in the same spirit» — the same reticle and the same type as in the top
   bar of the battle shell: a player arriving from the site into the game has to
   see the same place. The numbers come from packages/client/index.html and were
   not adjusted.

   The reticle is alive: the ring drifts slowly, the ticks converge on the centre
   and part again, the dot breathes. The motion is deliberately slow — it is part
   of the setting, not a flashing banner at the edge of the screen. */
.logo {
  display: inline-flex; align-items: center; white-space: nowrap; margin-right: 14px;
  font: 700 1.3rem/1 'Jupiteroid', Menlo, monospace; letter-spacing: .08em; color: #e8edf6;
}
.logo b { color: #ffc441; }
/* The spacing belongs to the mark itself rather than to a gap: in flex, text
   nodes become separate items, and a gap would also pull «TANK» away from
   «ONOMY». */
.mark { width: 1.35em; height: 1.35em; margin-right: .45em; flex: none; overflow: visible; }
.m-ring {
  fill: none; stroke: #ffc441; stroke-width: 2.5; stroke-dasharray: 15 8.5;
  transform-origin: 16px 16px; animation: mark-spin 11s linear infinite;
}
.m-dot { fill: #ff8250; transform-origin: 16px 16px; animation: mark-pulse 2.8s ease-in-out infinite; }
.m-t {
  stroke: #5fd8ff; stroke-width: 2.5; stroke-linecap: round; fill: none;
  transform-origin: 16px 16px; animation: mark-lock 2.8s ease-in-out infinite;
}
@keyframes mark-spin { to { transform: rotate(360deg); } }
@keyframes mark-pulse { 0%, 100% { opacity: .7; transform: scale(1); }
                        50% { opacity: 1; transform: scale(1.3); } }
@keyframes mark-lock { 0%, 100% { transform: scale(1); }
                       50% { transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .m-ring, .m-dot, .m-t { animation: none; }
}
.ftr .logo { display: inline-flex; padding: 0; font-size: 1.15rem; align-items: center; }

.nav { display: flex; align-items: stretch; gap: 2px; height: 62px; flex: 1; min-width: 0; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: flex; align-items: center; gap: 6px; height: 100%;
  padding: 0 13px; font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim);
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.nav__link:hover, .nav__item:focus-within .nav__link { color: var(--ink); }
.nav__link[aria-current] { color: var(--ink); border-bottom-color: var(--gold); }
.nav__link .caret { width: 7px; height: 7px; opacity: .5; transition: transform .18s var(--ease); }
.nav__item:hover .caret, .nav__item:focus-within .caret { transform: rotate(180deg); opacity: .9; }

.nav__drop {
  position: absolute; top: 100%; left: 0; min-width: 300px;
  background: #0d121d; border: 1px solid var(--line-solid);
  box-shadow: var(--shadow-2);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__drop a {
  display: grid; justify-items: start; padding: 9px 12px; border-left: 2px solid transparent;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.nav__drop a:hover { background: rgba(255,255,255,.045); border-left-color: var(--gold); }
.nav__drop b { display: block; margin: 0; font-family: var(--display); font-size: 12.5px; letter-spacing: .06em; }
.nav__drop span { display: block; margin: 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }

.hdr__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: flex; margin-left: auto; }
  .hdr__cta { margin-left: 0; }
  .hdr__cta .btn--ghost { display: none; }
}

/* The mobile menu: opens downward and covers nothing. */
.mnav { display: none; border-top: 1px solid var(--line); background: #0b0f18; }
.mnav.open { display: block; }
.mnav__grp { padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.mnav__grp > .kicker { display: block; margin-bottom: 8px; }
.mnav__grp a { display: block; padding: 7px 0; font-family: var(--display); font-size: 13px; letter-spacing: .06em; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  --cut: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px; height: 42px;
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  clip-path: var(--chamfer); position: relative;
  background: var(--line-solid); color: var(--ink);
  transition: transform .14s var(--ease), filter .18s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--chamfer);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  transition: background .18s var(--ease);
}
.btn > * , .btn { }
.btn span { position: relative; z-index: 1; }
.btn:hover { filter: brightness(1.16); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: #b98600; color: #16120a; }
.btn--primary::before { background: linear-gradient(180deg, #ffd66e, var(--gold)); }
.btn--primary:hover::before { background: linear-gradient(180deg, #ffe391, #ffcf5c); }

.btn--lg { height: 56px; padding: 0 32px; font-size: 14px; --cut: 12px; }
.btn--ghost { background: var(--line-hi); }
.btn--ghost::before { background: rgba(255,255,255,.03); }
.btn--ghost:hover::before { background: rgba(255,255,255,.08); }

.btn--sm { height: 34px; padding: 0 14px; font-size: 11px; --cut: 7px; }

/* --- arrow link ---------------------------------------------------------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.arrow-link::after { content: '→'; transition: transform .18s var(--ease); }
.arrow-link:hover::after { transform: translateX(5px); }

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,7,12,.72) 0%, rgba(5,7,12,.14) 30%, rgba(5,7,12,.6) 76%, var(--ground) 100%),
    linear-gradient(90deg, rgba(5,7,12,.94) 0%, rgba(5,7,12,.6) 36%, rgba(5,7,12,0) 76%, rgba(5,7,12,.28) 100%);
}
.hero__in { position: relative; padding-block: clamp(52px, 7vw, 104px); }
@media (max-width: 900px) {
  /* On a narrow screen the frame is cropped by width: shift to the machine
     rather than to empty sky. */
  .hero__bg img { object-position: 66% 50%; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(5,7,12,.8) 0%, rgba(5,7,12,.62) 40%, rgba(5,7,12,.9) 82%, var(--ground) 100%);
  }
}
.hero__title { max-width: 15ch; margin-block: 20px 24px; text-wrap: balance; }
.hero__lead { max-width: 62ch; font-size: clamp(16px, 1.35vw, 19px); color: #c4d0e4; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.hero__note { font-size: 13px; color: var(--ink-dim); margin-top: 14px; max-width: 58ch;
  text-shadow: 0 1px 10px rgba(5,7,12,.9); }

.hero__strip {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.hero__strip div {
  flex: 1 1 190px; padding: 16px 20px 16px 0; border-right: 1px solid var(--line);
}
@media (max-width: 700px) { .hero__strip div { flex: 1 1 42%; padding-right: 12px; } }
.hero__strip div:last-child { border-right: 0; }
.hero__strip b {
  display: block; font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px);
  color: var(--gold); line-height: 1.1;
}
.hero__strip span { font-size: 13px; color: var(--ink-dim); }

/* --- inner page header --------------------------------------------------- */
.phead { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.phead__bg { position: absolute; inset: 0; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.phead__bg[data-art] img { opacity: 1; }
/* Under painted art the darkening is different: we dim the side with the text
   and let the other side go. Under a screenshot that is not possible — there is
   interface on the right as well. */
.phead__bg[data-art]::after {
  background:
    linear-gradient(180deg, rgba(5,7,12,.45) 0%, rgba(5,7,12,.38) 46%, rgba(5,7,12,.88) 86%, var(--ground) 100%),
    linear-gradient(90deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.62) 42%, rgba(5,7,12,.06) 84%, rgba(5,7,12,.3) 100%);
}
.phead__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,.62), rgba(5,7,12,.94) 72%, var(--ground));
}
.phead__in { position: relative; padding-block: clamp(46px, 6.5vw, 92px); }
.phead h1 { margin-block: 16px 18px; max-width: 26ch; text-wrap: balance; }
.phead .lead { max-width: 70ch; }

.crumbs { font-size: 12px; color: var(--ink-faint); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink-dim); }

/* --- cards --------------------------------------------------------------- */
.card { padding: clamp(18px, 1.6vw, 26px); height: 100%; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--ink-dim); }
.card--link { transition: transform .2s var(--ease); display: block; }
.card--link:hover { transform: translateY(-3px); }
.card--link:hover::before { background: linear-gradient(180deg, var(--panel-hi), var(--panel) 60%, #0c101a); }

.card__accent { position: absolute; left: 0; top: var(--cut); bottom: var(--cut); width: 2px; z-index: 1; }

.pillar { padding: clamp(20px, 2vw, 30px); height: 100%; }
.pillar__n {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .18em;
  color: var(--gold); display: block; margin-bottom: 16px;
}
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

/* --- number tiles -------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); }
.facts > div { background: var(--ground-2); padding: 22px 20px; }
.facts b { display: block; font-family: var(--display); font-size: clamp(26px, 2.6vw, 36px); color: var(--ink); line-height: 1; }
.facts span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-dim); }
.facts em { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-faint); font-style: normal; }

/* --- tables -------------------------------------------------------------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--line-hi);
  white-space: nowrap;
}
table.data tbody tr:hover { background: rgba(255,255,255,.022); }
table.data td.num { font-family: var(--mono); text-align: left; white-space: nowrap; }
table.data td b { color: var(--ink); }

/* --- tags ---------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid currentColor; color: var(--ink-faint);
}
.tag--fill { border: 0; background: currentColor; }
.tag--fill span { color: #0b0f18; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* --- arsenal ------------------------------------------------------------- */
.item { display: flex; flex-direction: column; height: 100%; }
.item__shot { aspect-ratio: 63 / 31; overflow: hidden; background: #0b0f18; position: relative; }
.item__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.item:hover .item__shot img { transform: scale(1.04); }
.item__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.item__top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.item__name { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.item__blurb { font-size: 14px; color: var(--ink-dim); flex: 1; }
.item__stats { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 10px; }
.item__stats b { color: var(--ink); font-weight: 400; }

/* Action points as diamonds, as in the game: one quantity, one way to show it. */
.ap { display: inline-flex; gap: 3px; }
.ap i { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); display: block; }
.ap i.off { background: none; box-shadow: inset 0 0 0 1px var(--ink-faint); }

/* The compact card: the same grid without an image — eighteen identical shots of
   one map in a row read as noise, not as an arsenal. */
.item--slim .item__body { padding: 15px 17px 16px; }
.item--slim .item__name { font-size: 15px; }
.item--slim .item__blurb { font-size: 13.5px; }
.item--slim .item__stats { font-size: 12px; gap: 10px; }

/* --- machines ------------------------------------------------------------ */
.tank { display: flex; flex-direction: column; height: 100%; }
.tank__art {
  aspect-ratio: 2 / 1; display: grid; place-items: center; padding: 8px 12px;
  background: radial-gradient(70% 90% at 50% 60%, rgba(120,170,255,.09), transparent 70%);
}
.tank__art img { max-height: 100%; width: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.tank__body { padding: 0 16px 16px; }
.tank__name { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .05em; }
.tank__name--ranked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tank__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.tier {
  font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; background: rgba(255,255,255,.07); color: var(--ink-dim);
}

/* The branch banner. The image is painted art, so the only text on it is the
   branch name: everything else is read below, on a calm background. */
.branch-art { aspect-ratio: 21 / 9; overflow: hidden; }
.branch-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card--link:hover .branch-art img { transform: scale(1.04); }

.branch-banner { position: relative; overflow: hidden; margin-bottom: 30px; }
.branch-banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.branch-banner__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(18px, 3vw, 38px);
  background: linear-gradient(0deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.5) 55%, transparent 100%);
}
.branch-banner__cap b {
  display: block; margin-top: 8px;
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  font-size: clamp(24px, 3.4vw, 46px); color: var(--ink);
}

/* The tree: three columns for the branches, ranks as rows. */
.tree { display: grid; grid-template-columns: 40px repeat(3, minmax(0,1fr)); gap: 10px; align-items: stretch; }
/* THE RANK HEADING IN THE PREMIUM SECTION. The rank name and the price are one
   line but two different messages: «Rank 7» says where we are in the tree, and
   «4 500 tokens» says what it costs. Without spacing they ran together into
   «Rank 74 500 tokens». */
.prem-tier { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--display); font-size: 20px; margin: 26px 0 14px; }
.prem-tier span { font-family: var(--body); font-size: 13px; color: var(--ink-faint);
  letter-spacing: 0; }
.prem-tier span::before { content: '· '; }

.tree__tier { display: grid; place-items: center; font-family: var(--display); font-size: 11px; color: var(--ink-faint); letter-spacing: .1em; }
.tree__head { padding: 16px 18px; }
.tree__head h3 { font-size: 16px; letter-spacing: .08em; }
.tree__head p { font-size: 13px; margin-top: 8px; color: var(--ink-dim); }
.tree__node { display: flex; gap: 12px; align-items: center; padding: 10px 12px; min-height: 78px; }
.tree__node img { width: 92px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.tree__txt { display: block; min-width: 0; }
.tree__node .n {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: .05em;
}
.tree__node .c { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 5px; }
.tree__node .soon { color: var(--steel); font-weight: 400; }
/* A locked node is dimmed as a whole rather than tagged with a badge: twenty
   badges in a row read as background. */
.tree__node:not(.tree__node--mvp) img { opacity: .5; filter: saturate(.5); }
.tree__node:not(.tree__node--mvp) .n { color: var(--ink-dim); }

.tree-legend {
  display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 20px;
  font-size: 12.5px; color: var(--ink-faint);
}
.tree-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tree-legend i { width: 22px; height: 12px; display: block; }
.tree-legend__open { background: linear-gradient(180deg, #1d2a36, #101823); outline: 1px solid var(--line-solid); }
.tree-legend__soon { background: var(--panel); outline: 1px solid var(--line-solid); opacity: .6; }
.tree__node:hover .n { color: var(--gold); }
.tree__node--mvp::before { background: linear-gradient(180deg, #1d2a36, #101823); }
/* The common starter sits under all three branches at once. The span is set by a
   class rather than an inline style: in a single-column layout it has to be
   removed, and an inline style cannot be overridden by a media query — it would
   create implicit columns and the grid would not collapse. */
.tree__root { grid-column: 2 / span 3; }
/* Below 900 px three branches do not fit side by side, and stretched into one
   column they lose the only thing a tree is drawn for — the branches standing
   next to each other. So on a narrow screen we show not the tree but the
   per-branch lists further down the page. */
@media (max-width: 900px) {
  .tree { display: none; }
  .tree-narrow { display: block; }
}
.tree-narrow { display: none; }

/* --- gallery ------------------------------------------------------------- */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gal figure { margin: 0; overflow: hidden; cursor: zoom-in; }
.gal img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .5s var(--ease); }
.gal figure:hover img { transform: scale(1.045); }
.gal figcaption { padding: 12px 14px 14px; }
.gal figcaption b { display: block; font-family: var(--display); font-size: 13px; letter-spacing: .04em; }
.gal figcaption span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button {
  --cut: 7px; padding: 7px 14px; clip-path: var(--chamfer);
  background: rgba(255,255,255,.05); color: var(--ink-dim);
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.filters button:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--gold); color: #16120a; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(4,6,10,.94); }
.lb.open { display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); }
.lb img { max-width: 100%; max-height: 78vh; width: auto; object-fit: contain; }
.lb figcaption { margin-top: 16px; text-align: center; max-width: 76ch; }
.lb figcaption b { font-family: var(--display); display: block; margin-bottom: 6px; }
.lb figcaption span { color: var(--ink-dim); font-size: 14px; }
.lb__close { position: absolute; top: 18px; right: 22px; font-size: 30px; line-height: 1; color: var(--ink-dim); }
.lb__close:hover { color: var(--ink); }

/* --- the large «image + text» block --------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(22px, 3.4vw, 56px); align-items: center; }
.split--flip .split__text { order: -1; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--flip .split__text { order: 0; } }
.split__media img { width: 100%; }
.split__text h2 { margin-bottom: 18px; }
.split__text > p { color: var(--ink-dim); }

.figure { overflow: hidden; }
.figure figcaption { padding: 12px 16px; font-size: 12.5px; color: var(--ink-faint); border-top: 1px solid var(--line); }

/* --- definition list ------------------------------------------------------ */
.deflist { display: grid; gap: 1px; background: var(--line); }
.deflist > div { background: var(--ground-2); padding: 16px 18px; display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 18px; }
.deflist dt, .deflist b { font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; }
.deflist dd, .deflist p { margin: 0; font-size: 14px; color: var(--ink-dim); }
@media (max-width: 640px) { .deflist > div { grid-template-columns: 1fr; gap: 6px; } }

/* --- roadmap ------------------------------------------------------------- */
.road { display: grid; gap: 12px; }
.road__row { display: grid; grid-template-columns: 74px 1fr; gap: 0; }
.road__key {
  display: grid; place-items: center; font-family: var(--display); font-size: 26px;
  font-weight: 700; color: var(--ink-faint);
}
.road__body { padding: 20px 22px; }
.road__body h3 { font-size: 18px; }
.road__body p { font-size: 14.5px; color: var(--ink-dim); margin: 10px 0 0; }
.road__proof { margin-top: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.road__row[data-state="done"] .road__key { color: var(--green); }
.road__row[data-state="now"]  .road__key { color: var(--gold); }
@media (max-width: 640px) { .road__row { grid-template-columns: 52px 1fr; } .road__key { font-size: 20px; } }

/* --- news ---------------------------------------------------------------- */
.post { display: block; overflow: hidden; height: 100%; }
.post__img { aspect-ratio: 16/9; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post:hover .post__img img { transform: scale(1.045); }
.post__body { padding: 18px 20px 22px; }
.post__meta { display: flex; gap: 12px; align-items: center; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 10px; }
.post__body h3 { font-size: 19px; margin-bottom: 10px; }
.post__body p { font-size: 14px; color: var(--ink-dim); margin: 0; }

.article { max-width: 74ch; }
.article p { font-size: 16.5px; line-height: 1.72; color: #c9d4e6; }
.article h2 { margin-top: 44px; margin-bottom: 16px; }

/* --- call to action ------------------------------------------------------- */
.cta { position: relative; overflow: hidden; padding: clamp(34px, 5vw, 68px); text-align: center; }
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta p { max-width: 60ch; margin: 18px auto 0; color: var(--ink-dim); }
.cta .hero__actions { justify-content: center; }

/* --- footer -------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); background: #070910; }
.ftr__in { padding-block: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 980px) { .ftr__in { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .ftr__in { grid-template-columns: 1fr; } }
.ftr h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  padding-top: 4px; margin-bottom: 14px; }
.ftr a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink-dim); }
.ftr a:hover { color: var(--ink); }
.ftr__about p { font-size: 13.5px; color: var(--ink-faint); max-width: 42ch; }
.ftr__bottom { border-top: 1px solid var(--line); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; font-size: 12.5px; color: var(--ink-faint); }

/* --- small things --------------------------------------------------------- */
.note {
  --cut: 9px; padding: 16px 18px; font-size: 14px; color: var(--ink-dim);
  border-left: 2px solid var(--gold);
}
.note b { color: var(--ink); }
.note--warn { border-left-color: var(--red); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  --cut: 6px; clip-path: var(--chamfer); padding: 6px 11px; background: rgba(255,255,255,.05);
  font-size: 12.5px; color: var(--ink-dim);
}
.chip b { color: var(--ink); font-weight: 400; }

/* A SECTION ANCHOR. An empty marker before the heading, offset upward by the
   height of the sticky header: without the offset, following a link puts the
   heading UNDER the header, and the reader lands in the section but sees its
   middle. */
.anchor { display: block; position: relative; top: -88px; visibility: hidden; }

/* --- «in game» counter ------------------------------------------------------ */
/* Sits to the left of the Play button and reads as an instrument, not as a
   badge: the number in the display face, the word beside it small and quiet.
   The dot is the same live dot as beside the hero status — the one animation on
   the site that does not wait for a click, and it is four pixels across.
   Hidden until a number arrives, so it never claims an empty server. */
.online { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 3px; text-decoration: none;
  font: 400 11px/1 var(--body); letter-spacing: .04em; color: var(--ink-dim);
  transition: border-color .15s, color .15s; }
/* `hidden` HAS TO WIN OVER THIS RULE. The attribute is styled by the browser as
   `display: none`, and any class rule with `display` beats it — so the counter
   stayed on screen showing its placeholder dash exactly when it had nothing to
   show. Found by looking at a screenshot; by markup the element was «hidden». */
.online[hidden] { display: none; }
.online:hover { border-color: var(--cyan); color: var(--ink); }
.online b { font-family: var(--display); font-size: 14px; color: var(--ink); letter-spacing: 0; }
.online span { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }
.online__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(110, 220, 130, .6); animation: live 2.6s ease-out infinite; }
@media (max-width: 720px) { .online span { display: none; } }

/* --- cookie notice ---------------------------------------------------------- */
/* Bottom of the screen, full width, above everything — but not a modal: this
   site sets no cookies, so there is nothing to gate and nothing to trap the
   reader behind. It informs and leaves. */
.cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(8, 10, 17, .96); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); padding: 14px var(--pad); }
.cbar[hidden] { display: none; }
.cbar__in { max-width: var(--max); margin: 0 auto; display: flex; align-items: center;
  gap: 18px 26px; flex-wrap: wrap; }
.cbar__text { flex: 1 1 420px; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.cbar__text b { color: var(--ink); }
/* The link to the policy has to look like a link: it is the only way out of the
   notice for someone who wants the detail, and grey text among grey text is not
   a way out. */
.cbar__text a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.cbar__acts { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }
@media (max-width: 620px) { .cbar__acts { width: 100%; } .cbar__acts .btn { flex: 1 1 0; } }

/* --- company details in the footer ------------------------------------------ */
/* An address block, set as one: small, quiet, and never italic — an address in
   italics reads as a quotation rather than as a fact. */
.ftr__co { display: grid; gap: 3px; margin-top: 18px; font-style: normal;
  font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.ftr__co b { color: var(--ink-dim); font-weight: 600; }
.ftr__co a { color: var(--cyan); }

/* --- card marks in the footer ------------------------------------------------ */
/* Quieter than the text around them: a payment mark is a fact, not a badge of
   honour. Visa takes the ink colour and dims with the rest of the footer;
   Mastercard keeps its own two circles, because that is the whole of the mark
   and a grey version of it is not it. */
.ftr__pay { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ftr__pay .pay { width: 46px; height: 16px; flex: none; }
.ftr__pay .pay--visa { color: var(--ink-dim); }
.ftr__pay span { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .02em; }

/* --- legal pages ------------------------------------------------------------ */
/* A long document is read in blocks, not in one column of prose: a heading, a
   thin rule and text with room around it. The same shape for all three
   documents — terms, privacy and cookies are read one after another, and a
   different layout each time reads as three different companies. */
.legal-block { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); }
.legal-block:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.legal-block h3 { font-family: var(--display); font-size: 19px; margin-bottom: 12px; color: var(--ink); }
.legal-block p { font-size: 14.5px; line-height: 1.7; color: var(--ink-dim); margin-bottom: 12px; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block b { color: var(--ink); }
.legal-block a { color: var(--cyan); }
.legal-block .ul { margin: 0 0 12px 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-dim); }
.legal-block .ul li { margin-bottom: 8px; list-style: square; }
.legal-block .tbl-scroll { margin: 6px 0 12px; }
.legal-block code { font-family: var(--mono); font-size: 13px; color: var(--gold); }

.anchor-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 34px; }
.anchor-nav a {
  --cut: 6px; clip-path: var(--chamfer); padding: 7px 13px; background: rgba(255,255,255,.045);
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.anchor-nav a:hover { background: rgba(255,255,255,.1); color: var(--ink); }

.mat { display: flex; gap: 14px; align-items: center; padding: 14px; }
.mat img { width: 68px; height: 68px; object-fit: cover; flex: none; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.mat__name { font-family: var(--display); font-size: 14px; letter-spacing: .05em; }
.mat__nums { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.5; }

.skip {
  position: absolute; left: -9999px; top: 0; padding: 12px 18px; background: var(--gold);
  color: #16120a; font-family: var(--display); z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }


/* ===========================================================================
   LAYER TWO: THE LARGE VISUALS.
   What a player is shown is an image, not a panel of text. So almost everything
   below is a way of putting text ON a picture and keeping it readable: the
   darkening is always on the text side, the picture is always alive on hover.
   =========================================================================== */

/* A thin gold accent line. One per block, no more: it works while it stays
   rare. */
.hair {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--gold), rgba(255,196,65,0) 62%);
}

/* --- the full-width band with art ---------------------------------------- */
/* The main device of the site. A full-width image, the text in one third, the
   darkening exactly under it. Alternating sides is set by a modifier. */
.showcase {
  position: relative; overflow: hidden;
  min-height: clamp(480px, 76vh, 820px);
  display: flex; align-items: center;
}
.showcase__bg { position: absolute; inset: 0; }
.showcase__bg img { width: 100%; height: 100%; object-fit: cover; }
.showcase__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,12,.95) 0%, rgba(5,7,12,.78) 34%, rgba(5,7,12,.05) 78%, rgba(5,7,12,.35) 100%),
    linear-gradient(180deg, rgba(5,7,12,.55) 0%, rgba(5,7,12,0) 24%, rgba(5,7,12,0) 70%, rgba(5,7,12,.75) 100%);
}
.showcase--right .showcase__bg::after {
  background:
    linear-gradient(270deg, rgba(5,7,12,.95) 0%, rgba(5,7,12,.78) 34%, rgba(5,7,12,.05) 78%, rgba(5,7,12,.35) 100%),
    linear-gradient(180deg, rgba(5,7,12,.55) 0%, rgba(5,7,12,0) 24%, rgba(5,7,12,0) 70%, rgba(5,7,12,.75) 100%);
}
.showcase__in { position: relative; }
.showcase__box { max-width: 70ch; padding-block: clamp(40px, 6vw, 80px); }
.showcase--right .showcase__box { margin-left: auto; }

.showcase__box h2 { margin: 16px 0 18px; }
.showcase__box p { color: #cbd6e8; font-size: clamp(15.5px, 1.25vw, 18px); }
.showcase__box .chips { margin-top: 22px; }

@media (max-width: 760px) {
  .showcase__bg::after, .showcase--right .showcase__bg::after {
    background: linear-gradient(180deg, rgba(5,7,12,.62) 0%, rgba(5,7,12,.5) 30%, rgba(5,7,12,.94) 78%, var(--ground) 100%);
  }
  .showcase__box, .showcase--right .showcase__box { max-width: none; margin-left: 0; }
  .showcase { min-height: 0; padding-block: 40px; align-items: flex-end; }
}

/* --- image card ---------------------------------------------------------- */
/* Replaces a text card almost everywhere: a section has its own image, and it
   works better than any icon. */
.acard { display: block; position: relative; overflow: hidden; height: 100%; }
.acard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0f18; }
.acard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s var(--ease); }
.acard__img[data-art="role-damage"] img,
.acard__img[data-art="mode-sniper"] img,
.acard__img[data-art="dig-tunnel"] img,
.acard__img[data-art="dig-seismic"] img,
.acard__img[data-art="arena-alpine"] img,
.acard__img[data-art="arena-canyon"] img {
  position: absolute; inset: -24% 0 auto; height: 148%; object-fit: cover;
}
.acard:hover .acard__img img { transform: scale(1.06); filter: brightness(1.08); }
.acard__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,.15) 0%, rgba(5,7,12,0) 38%, rgba(8,10,17,.92) 100%);
}
.acard__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; z-index: 2; }
.acard__cap .kicker { display: block; margin-bottom: 6px; }
.acard__name {
  font-family: var(--display); font-weight: 700; letter-spacing: .04em;
  font-size: clamp(16px, 1.5vw, 21px); color: var(--ink); display: block;
}
.acard__body { padding: 14px 18px 18px; }
.acard__body p { margin: 0; font-size: 14.5px; color: var(--ink-dim); }
.acard__body .item__stats { margin-top: 12px; }
/* The role bar: the colour enters the frame from below and grows on hover. */
.acard__line {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 34%; z-index: 3;
  transition: width .4s var(--ease);
}
.acard:hover .acard__line { width: 100%; }

/* --- the large image card (16:9, for arenas and formats) ----------------- */
.acard--wide .acard__img { aspect-ratio: 16 / 9; }
.acard--tall .acard__img { aspect-ratio: 3 / 4; }

/* --- machine showcase ---------------------------------------------------- */
/* The sprite on its own frame: a branch has a character, and it shows before
   anything is read. */
.showpiece { position: relative; overflow: hidden; }
.showpiece::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(72% 88% at 50% 62%, rgba(120,170,255,.12), transparent 70%);
}
.showpiece__art { position: relative; z-index: 1; padding: clamp(24px, 4vw, 56px); }
.showpiece__art img {
  width: 100%; filter: drop-shadow(0 22px 42px rgba(0,0,0,.75));
}

/* --- large numbers ------------------------------------------------------- */
/* Exactly four in a row: auto-placement left a lone tile on the second line, and
   the band read as a layout mistake. */
.bignums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
@media (max-width: 900px) { .bignums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bignums > div { background: var(--ground-2); padding: clamp(20px, 2.4vw, 34px) clamp(18px, 2vw, 28px); position: relative; }
.bignums b {
  display: block; font-family: var(--display); font-weight: 700; line-height: .95;
  font-size: clamp(34px, 4.4vw, 62px);
  background: linear-gradient(180deg, #fff2cd 0%, var(--gold) 62%, #b98600 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bignums span { display: block; margin-top: 12px; font-size: 14px; color: var(--ink); }
.bignums em { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); font-style: normal; }

/* --- machine strip ------------------------------------------------------- */
/* Twenty-eight silhouettes in a row say more about the size of the game than a
   number does. */
.fleet {
  display: flex; gap: clamp(10px, 1.4vw, 22px); overflow-x: auto; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: var(--line-solid) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.fleet::-webkit-scrollbar { height: 6px; }
.fleet::-webkit-scrollbar-thumb { background: var(--line-solid); }
.fleet a { flex: none; width: clamp(150px, 15vw, 210px); text-align: center; opacity: .78; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.fleet a:hover { opacity: 1; transform: translateY(-4px); }
.fleet img { width: 100%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.fleet b { display: block; margin-top: 6px; font-family: var(--display); font-size: 11.5px; letter-spacing: .08em; }
.fleet span { display: block; font-size: 11px; color: var(--ink-faint); }

/* --- button: the glow on the primary one ---------------------------------- */
.btn--primary { box-shadow: 0 8px 30px -10px rgba(255,196,65,.55); }
.btn--primary:hover { box-shadow: 0 12px 38px -8px rgba(255,196,65,.7); }

/* --- call to action over an image ----------------------------------------- */
.cta--art { padding: 0; overflow: hidden; }
.cta--art .cta__bg { position: absolute; inset: 0; }
.cta--art .cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta--art .cta__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 50% 50%, rgba(5,7,12,.55), rgba(5,7,12,.94) 76%);
}
.cta--art .cta__in { position: relative; z-index: 1; padding: clamp(48px, 7vw, 104px) clamp(20px, 4vw, 60px); }

/* --- grain --------------------------------------------------------------- */
/* Barely visible noise over everything: it takes the plastic look off large
   flat fills. A translucent SVG, no image file. */
.grid-bg::before {
  content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --- page header: taller and with an image -------------------------------- */
.phead__in { padding-block: clamp(64px, 9vw, 148px); }
.phead h1 { margin-block: 18px 20px; }

/* ===========================================================================
   LAYER THREE: THE FINISH.
   An expensive interface differs from a cheap one not by colour but by every
   plane having an edge, every section a number and every action a response.
   Below is exactly that hardware: instrument-panel corners, section numbering,
   ticks, a highlight running across a button. All of it rests on low opacities:
   a detail should be noticed second, not first.
   =========================================================================== */

:root { --tick: rgba(255,196,65,.42); --tick-dim: rgba(255,255,255,.16); }

/* --- instrument-panel corners -------------------------------------------- */
/* Two of the four square corners (the cut ones must not be touched) get a tick.
   The z-index is the same negative one as the fill: a pseudo-element at zero
   paints after inline text and would cover it. */
.card::after, .acard::after, .cta::after, .bignums > div::after,
.road__body::after, .note::after, .mat::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) right 0 top 0 / 15px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right 0 top 0 / 1px 15px no-repeat,
    linear-gradient(var(--tick-dim), var(--tick-dim)) left 0 bottom 0 / 15px 1px no-repeat,
    linear-gradient(var(--tick-dim), var(--tick-dim)) left 0 bottom 0 / 1px 15px no-repeat;
  opacity: .55; transition: opacity .3s var(--ease);
}
.card--link:hover::after, .acard:hover::after { opacity: 1; }
.bignums > div { position: relative; }

/* --- section heading: number, tick, watermark digit ----------------------- */
.section-head { position: relative; }
/* Two classes in the selector deliberately: the `.section-head > *` rule below
   gives every child position: relative, and at equal specificity it would win
   over absolute — the digit would join the flow and push the eyebrow sideways. */
.section-head .section-head__idx {
  position: absolute; right: 0; top: -6px; z-index: 0;
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(64px, 11vw, 168px); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(147,163,191,.36);
  pointer-events: none; user-select: none;
}
@media (max-width: 900px) { .section-head__idx { display: none; } }
.section-head > *:not(.section-head__idx) { position: relative; z-index: 1; }
.section-head::before {
  content: ''; display: block; width: 100%; height: 1px; margin-bottom: 22px;
  background: linear-gradient(90deg, var(--gold) 0 56px, rgba(184,202,229,.32) 56px 100%);
}

/* --- the diamond divider -------------------------------------------------- */
/* The same diamond that counts action points in battle: a mark of the game, not
   an asterisk. */
.div-rule { display: flex; align-items: center; gap: 14px; opacity: .5; }
.div-rule::before, .div-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.div-rule i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* --- number tiles: index and underline ------------------------------------ */
.bignums > div { overflow: hidden; }
.bignums > div .idx {
  position: absolute; right: 14px; top: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink-faint); opacity: .7;
}
.bignums > div::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(255,196,65,0));
  transition: width .5s var(--ease); z-index: 1;
}
.bignums > div:hover::before { width: 100%; }
.bignums b { text-shadow: 0 0 34px rgba(255,196,65,.22); }

/* --- buttons: highlight and inner edge ------------------------------------ */
.btn { overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .65s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn--primary::before {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22);
}
.btn--ghost::before { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* --- image card: a diagonal highlight ------------------------------------- */
.acard__img::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.acard:hover .acard__img::before { transform: translateX(120%); }

/* --- chips as instrument readings ----------------------------------------- */
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 7px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.chip::before {
  content: ''; width: 4px; height: 4px; background: var(--gold);
  transform: rotate(45deg); flex: none; opacity: .8;
}
.chip b { font-family: var(--display); font-size: 11.5px; letter-spacing: .04em; }

/* --- image band: a vertical edge beside the text -------------------------- */
.showcase__box { position: relative; padding-left: 26px; }
.showcase__box::before {
  content: ''; position: absolute; left: 0; top: clamp(40px, 6vw, 80px); bottom: clamp(40px, 6vw, 80px);
  width: 1px; background: linear-gradient(180deg, var(--gold), rgba(255,196,65,0) 70%);
}



/* --- hero: frame, scale and the scroll cue -------------------------------- */
.hero__in { position: relative; }
/* Ticks on the left, like a measuring rule. Pure finish, carrying no meaning —
   which is why it is invisible until you look for it. */
.hero__scale {
  position: absolute; left: -28px; top: 14%; bottom: 24%; width: 14px;
  border-left: 1px solid var(--tick-dim); opacity: .9;
}
.hero__scale::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg, var(--tick-dim) 0 1px, transparent 1px 20px);
}
.hero__scale i {
  position: absolute; left: 0; top: 38%; width: 14px; height: 1px; background: var(--gold);
}
@media (max-width: 1200px) { .hero__scale { display: none; } }

.hero__corner {
  position: absolute; width: 34px; height: 34px; pointer-events: none; opacity: .5;
  border-color: var(--tick);
}
.hero__corner--tr { top: 26px; right: 26px; border-top: 1px solid; border-right: 1px solid; }
.hero__corner--bl { bottom: 26px; left: 26px; border-bottom: 1px solid; border-left: 1px solid; }

.hero__cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); z-index: 2;
}
.hero__cue i {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(255,196,65,0), var(--gold));
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
                 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }
@media (prefers-reduced-motion: reduce) { .hero__cue i { animation: none; opacity: .7; } }
@media (max-width: 900px) { .hero__cue { display: none; } }

/* The live dot beside the status: the only animation on the page that does not
   wait for a player action — and it is four pixels across. */
.live { display: inline-flex; align-items: center; gap: 7px; }
.live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(110,220,130,.6); animation: live 2.6s ease-out infinite;
}
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(110,220,130,.55); }
                  70% { box-shadow: 0 0 0 9px rgba(110,220,130,0); }
                  100% { box-shadow: 0 0 0 0 rgba(110,220,130,0); } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }

/* --- machine strip: the rail below ---------------------------------------- */
.fleet a { position: relative; padding-bottom: 14px; }
.fleet a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px;
  background: var(--gold); transition: left .3s var(--ease), right .3s var(--ease);
}
.fleet a:hover::after { left: 18%; right: 18%; }

/* --- header: a thin gold thread under the rail ---------------------------- */
.hdr { position: sticky; }
.hdr::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(255,196,65,0), rgba(255,196,65,.35) 22%, rgba(95,216,255,.25) 60%, rgba(255,196,65,0));
  opacity: .8;
}


/* --- footer: details ------------------------------------------------------ */
/* The links of the bottom line stay inline. The general footer rule makes them
   block-level, and without this correction three links form a staircase at the
   right edge. */
.ftr__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr__links a { display: inline; position: relative; }
.ftr__links a + a::before {
  content: '·'; position: absolute; left: -11px; color: var(--ink-faint);
}
.ftr { position: relative; }
.ftr::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(255,196,65,0), rgba(255,196,65,.28) 20%, rgba(255,255,255,.06) 55%, rgba(255,196,65,0));
}
.ftr h4 { display: flex; align-items: center; gap: 9px; }
.ftr h4::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.ftr__in a { position: relative; padding-left: 0; transition: padding-left .2s var(--ease), color .2s var(--ease); }
.ftr__in .ftr__about a { padding-left: 0; }
.ftr__in > div:not(.ftr__about) a:hover { padding-left: 8px; }
.ftr__in > div:not(.ftr__about) a::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px;
  background: var(--gold); transition: width .2s var(--ease);
}
.ftr__in > div:not(.ftr__about) a:hover::before { width: 5px; }

/* ===========================================================================
   EXPLANATORY BLOCKS.
   The «How a battle goes» section is read by someone who has never opened the
   game. They do not need a nine-row table but a picture of the order: first
   this, then that, and it costs this much. Below are the shapes for that kind of
   explanation.
   =========================================================================== */

/* --- steps -------------------------------------------------------------- */
/* Five steps in a row with a thread between them. The thread matters more than
   the numbers: it shows this is a sequence before the first heading is read. */
.steps { --step-pad: clamp(14px, 1.6vw, 24px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.steps::before {
  content: ''; position: absolute; left: calc(var(--step-pad) + 34px);
  right: calc(20% - var(--step-pad) - 34px); top: 34px; height: 1px;
  background: linear-gradient(90deg, rgba(255,196,65,.5), rgba(255,255,255,.12));
}
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--three::before { right: calc(33.333333% - var(--step-pad) - 34px); }
.step { position: relative; padding: 0 var(--step-pad); }
.step__n {
  position: relative; width: 68px; height: 68px; display: grid; place-items: center;
  margin-bottom: 22px; background: var(--ground);
  font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--gold);
  clip-path: var(--chamfer); --cut: 10px;
}
.step__n::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold); opacity: .55;
}
.step__n::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: #0d121d;
  clip-path: var(--chamfer);
}
.step h3 { font-size: 17px; margin-bottom: 10px; }
.step p { font-size: 14px; color: var(--ink-dim); margin: 0; }
.step { border-left: 1px solid rgba(255,255,255,.07); }
.step:first-child { border-left: 0; }
@media (max-width: 1080px) { .step { border-left: 0; } }
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 0; }
  .steps::before { display: none; } }
@media (max-width: 620px) { .steps { grid-template-columns: minmax(0,1fr); } }

/* --- action points, large ------------------------------------------------- */
.apbig { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.apbig__dots { display: flex; gap: 10px; }
.apbig__dots i {
  width: 26px; height: 26px; background: var(--gold); transform: rotate(45deg); display: block;
  box-shadow: 0 0 24px rgba(255,196,65,.35);
}
.apbig__dots i.off { background: none; box-shadow: none; outline: 1px solid rgba(255,255,255,.22); }
.apbig b { font-family: var(--display); font-size: clamp(20px, 2.2vw, 30px); }
.apbig span { color: var(--ink-dim); font-size: 15px; }

/* --- the cost of an action ------------------------------------------------ */
.costs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
@media (max-width: 1080px) { .costs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .costs { grid-template-columns: minmax(0, 1fr); } }
.cost { background: var(--ground-2); padding: 20px; position: relative; }
.cost__ap { display: flex; gap: 4px; margin-bottom: 14px; }
.cost__ap i { width: 11px; height: 11px; background: var(--gold); transform: rotate(45deg); display: block; }
.cost__ap i.off { background: none; outline: 1px solid rgba(255,255,255,.2); }
.cost b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: .04em; margin-bottom: 6px; }
.cost p { margin: 0; font-size: 13.5px; color: var(--ink-dim); }
.cost__key {
  position: absolute; right: 16px; top: 16px; font-family: var(--mono); font-size: 11px;
  padding: 3px 7px; background: rgba(255,255,255,.06); color: var(--ink-dim);
}

/* --- an example turn ------------------------------------------------------ */
/* Three ready-made plans instead of an explanation in words: it shows that three
   points can be spent in different ways, and that each option means giving up
   the other two. */
.combo { padding: 20px 22px; }
.combo__title { font-family: var(--display); font-size: 13px; letter-spacing: .08em; color: var(--gold); margin-bottom: 14px; }
.combo__row { display: grid; gap: 6px; }
.combo__act {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px;
  padding: 9px 12px; background: rgba(255,255,255,.045); font-size: 13.5px;
}
.combo__act span { display: flex; gap: 4px; }
.combo__act i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; }
.combo p { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-faint); }

/* --- «how to hit»: three captions under an image -------------------------- */
.howto { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); }
.howto > div { background: var(--ground-2); padding: 22px; }
.howto kbd {
  display: inline-block; font-family: var(--mono); font-size: 12px; padding: 4px 9px;
  background: rgba(255,255,255,.07); border-bottom: 2px solid rgba(255,255,255,.14);
  color: var(--ink); margin-bottom: 12px;
}
.howto b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 8px; }
.howto p { margin: 0; font-size: 13.5px; color: var(--ink-dim); }
@media (max-width: 760px) { .howto { grid-template-columns: 1fr; } }

/* ===========================================================================
   THE MACHINE CARD.
   Four multipliers in a column are four numbers that say nothing until there is
   something to compare them with. A bar with a median mark answers the question
   a player actually has: is this machine tougher or weaker than an ordinary
   one.
   =========================================================================== */

.statbars { display: grid; gap: 16px; }
.statbar { display: grid; grid-template-columns: minmax(96px, 128px) 1fr 78px; gap: 16px; align-items: center; }
.statbar__name {
  font-family: var(--display); font-size: 12px; letter-spacing: .06em; color: var(--ink-dim);
}
.statbar__track {
  position: relative; height: 10px; background: rgba(255,255,255,.055);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.statbar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #7a5600, var(--gold));
}
.statbar--low .statbar__fill { background: linear-gradient(90deg, #4a5a74, var(--steel)); }
/* The «same as an ordinary machine» mark. Without it the bar shows length
   rather than meaning. */
.statbar__base { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgba(255,255,255,.38); }
.statbar__val { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--ink); white-space: nowrap; }
.statbar__legend {
  display: flex; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--ink-faint);
  align-items: center; flex-wrap: wrap;
}
.statbar__legend i { display: inline-block; width: 1px; height: 11px; background: rgba(255,255,255,.38); margin-right: 7px; vertical-align: -2px; }
@media (max-width: 520px) { .statbar { grid-template-columns: 88px 1fr 50px; gap: 10px; } }

/* --- previous and next machine -------------------------------------------- */
.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.prevnext > * { background: var(--ground-2); padding: 20px 22px; display: flex; align-items: center; gap: 16px; min-height: 104px; }
.prevnext > :last-child { flex-direction: row-reverse; text-align: right; }
.prevnext img { width: 108px; flex: none; filter: drop-shadow(0 5px 10px rgba(0,0,0,.55)); }
.prevnext .kicker { display: block; margin-bottom: 6px; }
.prevnext b { font-family: var(--display); font-size: 15px; letter-spacing: .05em; }
.prevnext a:hover b { color: var(--gold); }
.prevnext .empty { color: var(--ink-faint); font-size: 13px; }
@media (max-width: 620px) {
  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .prevnext > :last-child { flex-direction: row; text-align: left; }
}

/* --- machine card header -------------------------------------------------- */
/* The branch banner already sits behind the sprite itself. The same picture
   cannot be in the header too — two copies of one frame on a screen read as a
   layout mistake. */
.phead--tank .phead__bg img { opacity: .35; }
.phead--tank .phead__bg::after {
  background:
    linear-gradient(180deg, rgba(5,7,12,.72) 0%, rgba(5,7,12,.6) 40%, rgba(5,7,12,.94) 86%, var(--ground) 100%);
}

/* The reward bar: the name and the share get an explanation on the right. On a
   narrow screen it moves below the bar rather than squeezing it into
   illegibility. */
.statbar--wide { grid-template-columns: minmax(96px, 128px) minmax(120px, 1fr) 58px minmax(0, 1.5fr); }
.statbar__note { font-size: 13px; color: var(--ink-dim); }
@media (max-width: 900px) {
  .statbar--wide { grid-template-columns: minmax(96px, 128px) 1fr 52px; }
  .statbar--wide .statbar__note { grid-column: 1 / -1; margin-top: -6px; }
}

/* A tile with a word instead of a number. The large gradient size is made for
   digits: the word «Browser» in it reads as a heading rather than as a
   requirement. */
.bignums--text b { font-size: clamp(19px, 1.9vw, 26px); letter-spacing: .01em; }