/* ==========================================================================
   Billogna.lol — the Racing section on the front page: BombosSwap, EtherNet
   and QuakeCast, in the game's medallion order, then CuccoStorm (the cucco is
   not an item at all, so it comes last).

   The section FRAME (heading, intro line, note) is themed like the rest of the
   page. The cards are not: they carry the apps' own fixed identity
   (AlttprHelper's graphite, one gold, a pale "ether" blue for anything that
   travels into a game; Bricolage for names, a pixel face only where the text
   is literally what the game draws). A visitor who clicks through lands on a
   page that looks like the card they just clicked, and a dark graphite object
   reads the same on every theme, light or loud. Every token here is --m-* so
   nothing collides with the theme system, and no class here is one a theme
   file styles (.card / .tile / .cta / .media-embed are avoided on purpose).

   Nothing animates at rest, and hover only changes colour, so reduced-motion
   needs no special casing beyond dropping the transitions.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 600 700;
  font-display: swap;
  src: url(/fonts/BricolageGrotesque-600.woff2) format("woff2");
}
@font-face {
  font-family: "Press Start 2P HUD";
  font-weight: 400;
  font-display: block;
  src: url(/fonts/PressStart2P-hud.woff2) format("woff2");
}

.race {
  --m-bg: #17171A;
  --m-raised: #1D1D21;
  --m-well: #121215;
  --m-hair: rgba(255, 255, 255, .075);
  --m-hair-top: rgba(255, 255, 255, .12);
  --m-hair-strong: rgba(255, 255, 255, .18);
  --m-ink: #F3F1EA;
  --m-ink2: #BDBBB3;
  --m-mute: #918F87;
  --m-faint: #5F5E59;
  --m-gold: #E6B143;
  --m-gold-hi: #F1C158;
  --m-gold-lo: #C9962F;
  --m-on-gold: #171512;
  --m-gold-wash: rgba(230, 177, 67, .09);
  --m-gold-line: rgba(230, 177, 67, .42);
  --m-ether-line: rgba(159, 217, 232, .38);
  --m-cucco-line: rgba(181, 148, 255, .38);   /* CuccoStorm's game voice, where the others use ether blue */
  --m-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --m-body: "Inter", system-ui, -apple-system, sans-serif;
  --m-mono: "DM Mono", "IBM Plex Mono", Consolas, monospace;
  --m-pixel: "Press Start 2P HUD", "Press Start 2P", monospace;
}

/* Frame: inherits the theme's heading + muted body from .section (hero.css). */
.race > p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.race-note {
  margin: 26px auto 0 !important;   /* .section > p sets 0 0 22px */
  font-size: .9em;
}

/* ------------------------------------------------------------ the medallions */
/* Two columns, as the section is 920 px at most: three across would leave no
   room for a twenty-cell HUD strip. BombosSwap (co-op) takes the whole top
   row and splits its own insides in two; the race pair sits under it;
   CuccoStorm (chat plays) takes the next whole row the same way, and the
   tracker the last. Wide, pair, wide, wide. */
.medals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
  text-align: left;
}

.medal {
  position: relative;               /* the stretched link below sizes to this */
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 26px 24px;
  border-radius: 10px;
  border: 1px solid var(--m-hair);
  border-top-color: var(--m-hair-top);
  /* one warm light from the upper right, like the apps' own pages */
  background:
    radial-gradient(420px 240px at 92% -12%, rgba(230, 177, 67, .10), transparent 62%),
    linear-gradient(180deg, var(--m-raised), var(--m-bg));
  color: var(--m-ink);
  font: 400 15px/1.5 var(--m-body);
  /* a graphite object needs some depth to sit on the light themes */
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .75);
  transition: border-color .15s ease;
}
.medal:hover,
.medal:focus-within { border-color: var(--m-gold-line); }

.medal-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* The medallion sprite, pixel for pixel: 64px is exactly 4x the 16px sprite,
   so every pixel of it lands on whole screen pixels. */
.medal-mark {
  width: 64px;
  height: 64px;
  flex: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.medal-kicker {
  display: block;
  margin-bottom: 8px;
  font: 600 11px/1 var(--m-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-mute);
}
.medal-word {
  margin: 0;
  font: 700 30px/1 var(--m-display);
  letter-spacing: -.02em;
  color: var(--m-ink);
  text-shadow: none;
}
.medal-word b { color: var(--m-gold); font-weight: 700; }

.medal-lede {
  margin: 0;
  max-width: 36em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--m-ink2);
}

/* ---------------------------------------------------------- the demo bits */
.medal-demo {
  display: grid;
  gap: 8px;
  justify-items: start;
  min-height: 56px;
}
.medal-demo-cap {
  font: 400 12.5px/1.35 var(--m-body);
  color: var(--m-mute);
}

/* EtherNet, BombosSwap and CuccoStorm: twenty cells, the game's HUD width. The text is exactly what a
   linked game draws, so this is the one place the pixel face appears. */
.hud-strip {
  display: inline-grid;
  grid-template-columns: repeat(20, 13px);
  padding: 7px 8px;
  border: 1px solid var(--m-ether-line);
  border-radius: 3px;
  background: #08080A;
  font: 400 11px/1 var(--m-pixel);
  color: #F8F8F8;
  max-width: 100%;
}
.hud-strip i {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  font-style: normal;
}
/* CuccoStorm's own strip is edged in the cucco's lavender, as on its pages. */
.medal-cucco .hud-strip { border-color: var(--m-cucco-line); }

/* QuakeCast: three sources become one OBS scene. */
.cast-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cast-src,
.cast-obs {
  display: grid;
  place-items: center;
  width: 60px;
  height: 34px;
  border: 1px solid var(--m-hair-strong);
  border-radius: 3px;
  background: var(--m-well);
  font: 500 11px/1 var(--m-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--m-ink2);
}
.cast-arrow {
  padding: 0 4px;
  font: 400 14px/1 var(--m-mono);
  color: var(--m-faint);
}
.cast-obs {
  width: 66px;
  border-color: var(--m-gold-line);
  background: var(--m-gold-wash);
  color: var(--m-gold-hi);
}

/* --------------------------------------------------------------- the rest */
.medal-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.medal-facts li {
  padding: 4px 9px;
  border: 1px solid var(--m-hair-strong);
  border-radius: 3px;
  font: 500 12px/1.2 var(--m-mono);
  color: var(--m-ink2);
}

.medal-act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;                 /* pins the action row to the bottom of every card */
  padding-top: 4px;
}
.medal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--m-gold-lo);
  border-top-color: #F6D687;
  border-radius: 6px;
  background: linear-gradient(180deg, #EFBE52, #DFA93C);
  color: var(--m-on-gold);
  font: 700 15px/1 var(--m-display);
  letter-spacing: 0;
  text-decoration: none;
  transition: background .12s ease;
}
/* Stretched link: the whole card is the target, with a single tab stop. The
   pseudo sizes to .medal (the nearest positioned ancestor), so this element
   itself must stay unpositioned. */
.medal-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.medal-btn:hover,
.medal:hover .medal-btn { background: linear-gradient(180deg, #F5C75F, #E7B144); color: var(--m-on-gold); }
.medal-btn:focus-visible { outline: 2px solid var(--m-gold); outline-offset: 3px; }
.medal-url {
  font: 400 12px/1 var(--m-mono);
  color: var(--m-mute);
  white-space: nowrap;
}

/* The wide cards (BombosSwap on top, CuccoStorm and the tracker along the
   bottom): name and pitch on the left, the demo line and the facts on the
   right, the action along the bottom. Below 761 px they stack like the rest. */
.medal-wide { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .medal-wide {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "head demo" "lede facts" "act act";
    column-gap: 36px;
    row-gap: 18px;
    align-items: start;
  }
  .medal-wide .medal-head  { grid-area: head; }
  .medal-wide .medal-lede  { grid-area: lede; }
  .medal-wide .medal-demo  { grid-area: demo; }
  .medal-wide .medal-facts { grid-area: facts; }
  .medal-wide .medal-act   { grid-area: act; }
}

/* ---------------------------------------------------------------- widths */
@media (max-width: 760px) {
  .medals { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .medal { padding: 20px 18px; gap: 16px; }
  .medal-mark { width: 48px; height: 48px; }   /* 3x, still whole pixels */
  .medal-word { font-size: 26px; }
  .medal-act { flex-direction: column; align-items: stretch; gap: 10px; }
  .medal-url { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .medal, .medal-btn { transition: none; }
}

/* ======================================================= 2026-10-03 additions
   1. Watch along: the front page's door to /live/ (chat + tracker + map while
      I stream). The same graphite object as the medallions, so the two
      sections read as one family; the preview is a real render of the map.
   2. The medallions, small: one row of four tiles on the front page; the full
      cards moved to /github.html (the Projects page) where they have room.
   ========================================================================== */

/* --------------------------------------------------------------- 1. watch */
.wa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  margin-top: 30px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--m-hair);
  border-top-color: var(--m-hair-top);
  background:
    radial-gradient(520px 300px at 96% -10%, rgba(230, 177, 67, .11), transparent 62%),
    linear-gradient(180deg, var(--m-raised), var(--m-bg));
  color: var(--m-ink);
  font: 400 15px/1.5 var(--m-body);
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .75);
  overflow: hidden;
}
.wa-shot {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--m-well);
  border-right: 1px solid var(--m-hair);
}
.wa-shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.wa-shot-tag {
  position: absolute; left: 14px; bottom: 14px;
  padding: 4px 9px; border-radius: 999px;
  font: 500 11px/1.2 var(--m-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--m-ink2); background: rgba(18, 18, 21, .82); border: 1px solid var(--m-hair-strong);
}
.wa-body { display: flex; flex-direction: column; gap: 18px; padding: 28px 30px 26px; }
.wa-status {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  font: 500 12px/1.2 var(--m-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--m-mute); border: 1px solid var(--m-hair-strong);
}
.wa-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-faint); }
.wa-status.is-live { color: #ff8a98; border-color: rgba(255, 90, 110, .5); }
.wa-status.is-live::before { background: #ff5a6e; box-shadow: 0 0 0 3px rgba(255, 90, 110, .2); }
.wa-title { margin: 0; font: 700 30px/1.1 var(--m-display); letter-spacing: -.01em; color: var(--m-ink); }
.wa-title b { color: var(--m-gold); font-weight: 700; }
.wa-lede { margin: 0; color: var(--m-ink2); max-width: 46ch; }
.wa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wa-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.wa-ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: var(--m-well); border: 1px solid var(--m-hair-strong); color: var(--m-gold);
}
.wa-ico svg { width: 18px; height: 18px; }
.wa-list strong { display: block; font: 700 15px/1.3 var(--m-display); color: var(--m-ink); }
.wa-list span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--m-mute); }
.wa-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: auto; padding-top: 4px; }
.wa .medal-btn::after { content: none; }    /* not a stretched card link here */

@media (max-width: 860px) {
  .wa { grid-template-columns: minmax(0, 1fr); }
  .wa-shot { border-right: 0; border-bottom: 1px solid var(--m-hair); aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 560px) {
  .wa-body { padding: 22px 18px; }
  .wa-title { font-size: 25px; }
  .wa-act { flex-direction: column; align-items: stretch; }
  .wa-act .medal-url { text-align: center; }
}

/* ----------------------------------------------------- 2. the small medals */
.minis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
  text-align: left;
}
.mini {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-content: center;
  align-items: center;
  padding: 14px 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--m-hair);
  border-top-color: var(--m-hair-top);
  background: linear-gradient(180deg, var(--m-raised), var(--m-bg));
  color: var(--m-ink);
  text-decoration: none;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .7);
  transition: border-color .15s ease;
}
.mini:hover, .mini:focus-visible { border-color: var(--m-gold-line); }
.mini:focus-visible { outline: 2px solid var(--m-gold); outline-offset: 3px; }
.mini img { grid-row: 1 / 3; width: 40px; height: 40px; image-rendering: pixelated; }
.mini-word { font: 700 18px/1.15 var(--m-display); color: var(--m-ink); white-space: nowrap; }
.mini-word b { color: var(--m-gold); font-weight: 700; }
.mini, .mini * { text-decoration: none; }
.mini-kick {
  font: 500 12px/1.3 var(--m-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--m-mute);
}
/* The tracker is not one of the four apps: a row of its own under them,
   its tile centred. */
.mini-wide { grid-column: 1 / -1; grid-template-columns: 40px auto; justify-content: center; }
.minis-more { margin: 16px auto 0 !important; text-align: center; font-size: .92em; }
.minis-more a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 900px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .mini-word { font-size: 16px; }
  .mini { grid-template-columns: 32px minmax(0, 1fr); padding: 12px 10px; column-gap: 10px; }
  .mini img { width: 32px; height: 32px; }
  .mini-kick { font-size: 11px; letter-spacing: .03em; }
  .mini-wide { grid-template-columns: 32px auto; }
}
@media (prefers-reduced-motion: reduce) { .mini { transition: none; } }
/* 2026-10-24: Fold cover screen (~344 px) clipped "BombosSwap": one tile per row there */
@media (max-width: 400px) {
  .minis { grid-template-columns: minmax(0, 1fr); }
  .mini-wide { grid-template-columns: 32px minmax(0, 1fr); justify-content: stretch; }
}