/* Fight Foundry.
   Rams discipline — one type family, a short size scale, a strict grid, and as little design as
   the job needs. The colour is the arcade's: its cyan, its yellow, its red. Where the two
   disagree the arcade wins, but each colour still has to mean something. */

:root {
  --bg:        #0c0d0f;
  --bg-2:      #131417;
  --rule:      #26282d;
  --fg:        #eceef1;
  --fg-2:      #9598a0;

  /* Arcade palette. Each has one job. */
  --yellow:    #f5b301;  /* actions and the mark */
  --cyan:      #37c8f5;  /* data and quantities  */

  --gap:       clamp(1.25rem, 4vw, 2rem);
  --measure:   34rem;
  --col:       76rem;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 clamp(1rem, .96rem + .18vw, 1.0625rem)/1.6
        system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.011em; margin: 0; }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h3 { font-size: 1rem; }
p, ul, ol, dl { margin: 0; }
b { font-weight: 600; color: #fff; }
a { color: var(--cyan); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: .5rem; top: .5rem; z-index: 9; background: var(--yellow); color: #000; padding: .6rem 1rem; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ── bar ──────────────────────────────────────────────────────────────────── */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--col); margin-inline: auto;
  padding: 1rem var(--gap);
}
.mark {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--fg); text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
}
.mark-glyph { width: 10px; height: 10px; background: var(--yellow); flex: none; }
.bar nav { display: flex; gap: clamp(.9rem, 3vw, 1.75rem); }
.bar nav a { color: var(--fg-2); text-decoration: none; font-size: .875rem; }
.bar nav a:hover { color: var(--fg); }

/* ── the fight, first ─────────────────────────────────────────────────────── */

.stage { width: 100%; margin-inline: auto; padding: 0 var(--gap); }

/* The fight runs the full width of the page, inside the same gutter as everything else, and its
   height follows from the raster's own ratio. The embedded game fits its picture to whatever box
   it is given, so the box is never larger than the picture and there is no black around it. */
.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 384 / 224;
  background: #000;
  outline: 1px solid var(--rule);
  outline-offset: -1px;
}
.screen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}


/* ── prose ────────────────────────────────────────────────────────────────── */

.prose {
  max-width: var(--col); margin-inline: auto;
  padding: clamp(2.75rem, 8vw, 4.5rem) var(--gap) 0;
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--gap);
  align-items: start;
}
.prose > h2 { grid-column: 1; position: sticky; top: 1rem; }
.prose > :not(h2) { grid-column: 2; max-width: var(--measure); }
.prose > * + :not(h2) { margin-top: 1rem; }
.prose p { color: var(--fg-2); }

@media (max-width: 46rem) {
  .prose { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prose > h2 { grid-column: 1; position: static; margin-bottom: 1rem; }
  .prose > :not(h2) { grid-column: 1; }
}

.steps { list-style: none; counter-reset: s; padding: 0; }
.steps li { counter-increment: s; padding-left: 2.25rem; position: relative; color: var(--fg-2); }
.steps li + li { margin-top: 1rem; }
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: .05em;
  color: var(--yellow); font-variant-numeric: tabular-nums; font-weight: 600;
}

.prose article + article { margin-top: 1.75rem; }
.prose article h3 { margin-bottom: .35rem; }
.prose article p { margin: 0; }

.plain { list-style: none; padding: 0; }
.plain li { color: var(--fg-2); }
.plain li + li { margin-top: .6rem; }

.links {
  list-style: none; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border-block: 1px solid var(--rule);
}
.links a {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: .85rem .1rem; background: var(--bg);
  color: var(--fg); text-decoration: none;
}
.links a:hover { color: var(--yellow); }
.links span { color: var(--fg-2); font-size: .9375rem; }

/* ── footer ───────────────────────────────────────────────────────────────── */

footer {
  max-width: var(--col); margin: clamp(3rem, 9vw, 5rem) auto 0;
  padding: 1.5rem var(--gap) 3rem;
  border-top: 1px solid var(--rule);
}
footer p { color: var(--fg-2); font-size: .875rem; max-width: var(--measure); }
footer p + p { margin-top: .4rem; }

/* ── match stats ──────────────────────────────────────────────────────────── */

/* The bar is the fighting game's own instrument. Two fighters, one measure, meeting where they
   are even, so the shape reads before any number does. Ryu takes the gi's white, Spider-Man the
   suit's red: the colours belong to the characters, not to a slot. */

.tale {
  --ryu: #f2f3f5;
  --spider: #e02b3c;
  max-width: var(--col); margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 3.75rem) var(--gap) 0;
}
.tale[hidden] { display: none; }
.tale-head { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.tale-sub { margin-top: .3rem; color: var(--fg-2); font-size: .9375rem; }

.versus { margin-top: 1.5rem; }

/* Each fighter's own record. Wins are not a split bar: with two fighters one is the other's
   complement, so a bar would draw the same number twice. */
.records {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.record { display: flex; align-items: center; gap: .85rem; }
/* Ryu holds the left, Spider-Man the right, each pushed to its own outer edge. Under
   row-reverse the main axis runs right to left, so flex-start is the right-hand edge. */
.record-a { justify-content: flex-start; }
.record-b { justify-content: flex-start; text-align: right; flex-direction: row-reverse; }

/* Cropped from the fighter's own idle sheet, so the portrait is the extracted art rather than
   something drawn to stand in for it. */
.port {
  flex: none; display: block;
  width: 56px; height: 56px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: 1px solid var(--rule);
  background-color: var(--bg-2);
}
/* Crop boxes were measured off the sprites themselves, not guessed: Ryu's head sits on his
   pivot, and Spider-Man idles in a crawl with his head low and to the left, found by flooding
   out from the white of his mask. */
/* Ryu is drawn facing left, and he sits on the left here, so he is mirrored to face across at
   his opponent. Spider-Man already faces left, which is toward Ryu. */
.port-ryu {
  background-image: url("/local-art/ryu/full/group-00/g00-v000.png");
  background-size: 1002px auto;
  background-position: -22px -4px;
  transform: scaleX(-1);
}
.port-spider_man {
  background-image: url("/local-art/spider_man/full/group-00/g00-v000.png");
  background-size: 1462px auto;
  background-position: -8px -45px;
}

.record-name { font-size: .8125rem; color: var(--fg-2); }
.record-wins { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.record-wins span { font-size: .8125rem; font-weight: 400; color: var(--fg-2); letter-spacing: 0; }
.record-note { font-size: .8125rem; color: var(--fg-2); }
.record-a .record-wins { color: var(--ryu); }
.record-b .record-wins { color: var(--spider); }

.vs-row { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.vs-label { font-size: .8125rem; color: var(--fg-2); margin-bottom: .4rem; }

.vs-track { display: flex; height: 10px; background: var(--bg-2); overflow: hidden; }
.vs-fill { height: 100%; }
.vs-a { background: var(--ryu); }
.vs-b { background: var(--spider); }

.vs-values { display: flex; justify-content: space-between; margin-top: .35rem; }
.vs-num { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-num-a { color: var(--ryu); }
.vs-num-b { color: var(--spider); }

.tale-figures {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1rem; margin-top: 1.5rem;
}
.tale-figures dt { color: var(--fg-2); font-size: .8125rem; }
.tale-figures dd {
  margin: .15rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}
@media (max-width: 46rem) { .tale-figures { grid-template-columns: repeat(3, 1fr); } }
/* The two fighters stay opposed at every width: that facing is the whole point of the block. On a
   narrow screen the portrait moves above the figures instead of beside them, so the pair keeps its
   two columns rather than becoming a list. The portrait keeps its 56px box because the crop is
   anchored to it in pixels. */
@media (max-width: 34rem) {
  .records { gap: .75rem; }
  .record { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .record-b { flex-direction: column; align-items: flex-end; text-align: right; }
  .record-wins { font-size: 1.5rem; }
  .tale-figures { grid-template-columns: repeat(2, 1fr); }
}