/* ===========================================================================
   FLAGWAR — brutalist spectacle (IMPLEMENTATION.md §8)
   Ground: near-white paper. Accent: signal red. One display face, huge, uppercase.
   No cards. No shadows. No rounded corners. Hard 2px rules. Poster, not product page.
   Single stylesheet on purpose — one request, no build step, no framework.
   =========================================================================== */

:root {
  --paper: #f4f1ec;
  --paper-2: #e8e4dc;
  --paper-3: #dcd6cb;
  --ink: #111110;
  --ink-2: #4a4844;
  --red: #d42b1e;
  --red-ink: #8e1a11;
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --display: "Archivo Black", "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  --tick-h: 40px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body { min-height: 100dvh; display: flex; flex-direction: column; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
.red { color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --------------------------------------------------------------- ticker */

.tick {
  height: var(--tick-h);
  border-bottom: var(--rule);
  background: var(--red);
  color: var(--paper);
  overflow: hidden;
  position: relative;
  flex: none;
}
.tick__track {
  display: flex; align-items: center; gap: 3rem;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 46s linear infinite;
  padding-left: 100%;
  font-size: 15px; letter-spacing: .02em;
}
.tick__track > * { flex: none; }
.tick:hover .tick__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .tick__track { animation: none; padding-left: 1rem; overflow-x: auto; }
}

/* ------------------------------------------------------------------ head */

.head {
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: var(--rule); flex: none;
}
.head__brand {
  font-size: clamp(22px, 3.4vw, 34px); letter-spacing: -.03em; line-height: 1;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  border-right: var(--rule);
}
.head__brand b { color: var(--red); }
.head__season {
  font-size: 11px; letter-spacing: .12em; border: var(--rule-thin);
  padding: 2px 6px; align-self: center;
}
.head__nav { display: flex; }
.head__nav a, .head__lang a {
  display: flex; align-items: center; padding: 0 14px;
  border-left: var(--rule); font-size: 13px; letter-spacing: .06em;
}
.head__nav a[aria-current] { background: var(--ink); color: var(--paper); }
.head__lang { display: flex; }
.head__lang a { font-size: 11px; padding: 0 8px; }
.head__lang a[aria-current] { color: var(--red); }

/* ------------------------------------------------------------------ main */

.main { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
.stage { position: relative; overflow: hidden; background: var(--paper); touch-action: none; }
.side { border-left: var(--rule); display: flex; flex-direction: column; overflow-y: auto; }

/* ------------------------------------------------------------------- map */

.map { display: block; width: 100%; height: 100%; }
.map__unclaimed { fill: var(--paper-3); stroke: none; pointer-events: none; }
.map__c {
  stroke: var(--ink); stroke-width: .45; stroke-linejoin: round;
  cursor: crosshair; transition: fill .35s linear;
}
.map__c:hover { stroke-width: 1.4; }
.map__c.is-mine { stroke: var(--red); stroke-width: 1.6; }
.map__c.is-boost { stroke: var(--red); stroke-width: 1.8; filter: drop-shadow(0 0 6px var(--red)); }
.map__c.is-threat { stroke: var(--red); stroke-width: 1.8; animation: threat 1.1s steps(2) infinite; }
.map__c.is-frozen { fill: var(--paper-3) !important; pointer-events: none; opacity: .5; }
.map__m { stroke: var(--ink); stroke-width: .8; cursor: crosshair; }
.map__m.is-mine { stroke: var(--red); stroke-width: 1.8; }
@keyframes threat { 0% { stroke-opacity: 1; } 50% { stroke-opacity: .15; } 100% { stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map__c.is-threat { animation: none; } }

.stage__hud {
  position: absolute; left: 0; top: 0; padding: 10px 12px;
  font-size: 11px; letter-spacing: .1em; color: var(--ink-2); pointer-events: none;
}
.stage__zoom {
  position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column;
}
.stage__zoom button {
  width: 34px; height: 34px; border: var(--rule); background: var(--paper);
  font-size: 18px; line-height: 1; margin-bottom: -2px;
}
.stage__zoom button:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------- rally */

.rally {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: var(--rule); background: var(--paper);
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
}
.rally__btn {
  background: var(--red); color: var(--paper);
  font-size: clamp(20px, 3.2vw, 34px); letter-spacing: -.02em; line-height: 1;
  padding: 16px 26px; border-right: var(--rule);
  -webkit-tap-highlight-color: transparent; user-select: none;
  touch-action: manipulation; white-space: nowrap;
}
.rally__btn:active { background: var(--ink); }
.rally__btn.is-hit { transform: translateY(2px); }
.rally__stats { display: flex; align-items: center; gap: 22px; padding: 0 18px; overflow: hidden; }
.rally__stat { line-height: 1.05; }
.rally__stat b { display: block; font-size: clamp(18px, 2.6vw, 28px); letter-spacing: -.02em; }
.rally__stat span { font-size: 10px; letter-spacing: .12em; color: var(--ink-2); }
.rally__side { display: flex; border-left: var(--rule); }
.rally__side a, .rally__side button {
  display: flex; align-items: center; padding: 0 16px; font-size: 12px; letter-spacing: .08em;
  border-left: var(--rule-thin);
}
.rally__side a:first-child, .rally__side button:first-child { border-left: 0; }
.rally__side a:hover, .rally__side button:hover { background: var(--ink); color: var(--paper); }

.pop {
  position: absolute; pointer-events: none; font-size: 28px; color: var(--red);
  animation: pop .6s ease-out forwards; will-change: transform, opacity;
}
@keyframes pop {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(-50%, -180%) scale(1.5); opacity: 0; }
}

/* ----------------------------------------------------------------- board */

.board__head {
  display: flex; border-bottom: var(--rule); flex: none;
}
.board__tab {
  flex: 1; padding: 10px 8px; font-size: 11px; letter-spacing: .1em; text-align: center;
  border-right: var(--rule-thin);
}
.board__tab:last-child { border-right: 0; }
.board__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.board__list { flex: 1 1 auto; }
.row {
  display: grid; grid-template-columns: 34px 26px 1fr auto;
  align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: var(--rule-thin); font-size: 14px;
}
.row:hover { background: var(--paper-2); }
.row.is-mine { background: var(--red); color: var(--paper); }
.row__rank { font-size: 12px; color: var(--ink-2); }
.row.is-mine .row__rank { color: var(--paper); }
.row__flag { font-size: 17px; font-family: system-ui, sans-serif; }
.row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.row__val { font-size: 14px; }
.row__delta { color: var(--red); font-size: 10px; }

/* ------------------------------------------------------------------ page */

.page { max-width: 1080px; margin: 0 auto; padding: 26px 18px 90px; width: 100%; }
.page h1 {
  font-size: clamp(36px, 8vw, 96px); line-height: .92; letter-spacing: -.045em;
  text-transform: uppercase; margin-bottom: 6px;
}
.page h2 {
  font-size: clamp(18px, 2.6vw, 24px); letter-spacing: -.02em; text-transform: uppercase;
  margin: 34px 0 10px; padding-bottom: 6px; border-bottom: var(--rule);
}
.page h3 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 6px; }
.page p { font-family: var(--mono); font-size: 14px; line-height: 1.55; max-width: 68ch; margin: 8px 0; }
.page li { font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.lede { font-size: 13px; letter-spacing: .1em; color: var(--ink-2); text-transform: uppercase; }

.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: var(--rule); margin: 18px 0;
}
.hero__cell { padding: 14px 16px; border-right: var(--rule); }
.hero__cell:last-child { border-right: 0; }
.hero__cell b { display: block; font-size: clamp(28px, 5.5vw, 54px); line-height: 1; letter-spacing: -.04em; }
.hero__cell span { font-size: 10px; letter-spacing: .14em; color: var(--ink-2); }
.hero__cell.is-red { background: var(--red); color: var(--paper); }
.hero__cell.is-red span { color: var(--paper); }

.slab { border: var(--rule); padding: 14px 16px; margin: 14px 0; }
.slab.is-red { border-color: var(--red); color: var(--red-ink); }
.charter { border: 3px solid var(--red); padding: 18px; margin: 18px 0; }
.charter li {
  font-family: var(--display); font-size: clamp(15px, 2.2vw, 21px); letter-spacing: -.01em;
  padding: 7px 0; border-bottom: var(--rule-thin);
}
.charter li:last-child { border-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { text-align: left; padding: 7px 10px; border-bottom: var(--rule-thin); font-size: 13px; }
th { font-size: 10px; letter-spacing: .12em; border-bottom: var(--rule); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--paper-2); }

.feed__item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: var(--rule-thin);
}
.feed__t { font-size: 10px; letter-spacing: .1em; color: var(--ink-2); }
.feed__x { font-size: clamp(13px, 2vw, 17px); letter-spacing: -.01em; }
.feed__x.is-bond { color: var(--red); }
.feed__x.is-shield { color: var(--red); font-weight: normal; }
.feed__a { font-size: 10px; letter-spacing: .1em; border: var(--rule-thin); padding: 2px 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: var(--rule); padding: 10px 16px; font-size: 13px; letter-spacing: .08em;
  background: var(--paper);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.is-red { background: var(--red); color: var(--paper); border-color: var(--red); }
.btn.is-red:hover { background: var(--ink); border-color: var(--ink); }
.btn[disabled] { opacity: .4; pointer-events: none; }

input[type="text"], input[type="number"], select {
  font: inherit; font-size: 15px; background: var(--paper); color: var(--ink);
  border: var(--rule); padding: 9px 12px; width: 100%;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--red); outline-offset: 1px;
}
.field { margin: 12px 0; max-width: 420px; }
.field label { display: block; font-size: 10px; letter-spacing: .14em; margin-bottom: 5px; }
.err { color: var(--red); font-size: 12px; letter-spacing: .06em; margin-top: 6px; }

/* ---------------------------------------------------------------- modal */

.modal {
  position: fixed; inset: 0; background: rgba(17,17,16,.82);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 40;
}
.modal[open], .modal.is-open { display: flex; }
.modal__box { background: var(--paper); border: 3px solid var(--ink); padding: 22px; max-width: 460px; width: 100%; }
.modal__box h2 { margin-top: 0; font-size: 26px; letter-spacing: -.03em; border-bottom: var(--rule); padding-bottom: 8px; }
.modal__row { display: flex; gap: 10px; margin-top: 16px; }

/* ----------------------------------------------------------------- foot */

.foot {
  border-top: var(--rule); padding: 14px 18px; display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .1em; color: var(--ink-2); flex: none;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .side { border-left: 0; border-top: var(--rule); max-height: 42vh; }
  .head__brand { font-size: 20px; padding: 8px 10px; }
  .head__nav a { padding: 0 9px; font-size: 11px; }
  .rally { grid-template-columns: 1fr; }
  .rally__btn {
    border-right: 0; border-bottom: var(--rule); width: 100%;
    font-size: clamp(24px, 8vw, 40px); padding: 20px 12px;
  }
  .rally__stats { justify-content: space-between; padding: 10px 14px; gap: 12px; }
  .rally__side { border-left: 0; border-top: var(--rule-thin); }
  .rally__side a, .rally__side button { flex: 1; justify-content: center; padding: 12px 8px; }
  .hero { grid-template-columns: repeat(2, 1fr); }
  .hero__cell:nth-child(2n) { border-right: 0; }
  .hero__cell:nth-child(-n+2) { border-bottom: var(--rule); }
  .feed__item { grid-template-columns: 52px 1fr; }
  .feed__a { display: none; }
}

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

/* Print: the monument page (§5 kill-at-peak) should print clean. */
@media print {
  .tick, .rally, .stage__zoom, .head__nav { display: none; }
  body { background: #fff; }
}