/* ============================================================
   halowars.com revival — shared stylesheet for all stats pages.
   Faithful recreation of the 2009 site: metrics + palette lifted
   from the original css/layout_thread.css (Wayback 2013-08-28),
   original art assets under images/.
   ============================================================ */
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
  color: #CCCCCC;
  background: #000000 url(images/largeBGimage.jpg) repeat-x fixed right top;
  /* the 2009 layout is authored at 1003px / 10-12px type — scale the whole
     site up for modern displays (layout, art and text together) */
  zoom: 1.2;
}
a { color: #698d73; }

#content { width: 1003px; margin: 0 auto; }

/* ---- header + nav (original art) ---- */
#header {
  height: 348px;
  background: url(images/HeaderBG_Art.jpg) no-repeat;
  position: relative;
}
/* The tab strip is centred in the 1003px bar (the OG pinned it 25px left).
   It has the bar to itself -- the nav's old right-aligned search group was
   competing with it for width and now lives under the header (.tagFind).
   Flex rather than inline-block: the tabs are images of differing heights and
   baseline alignment left them sitting off the navbar_left/right end-caps.
   width:100% is load-bearing: without it this shrink-to-fits to 867px (1003
   minus the search group), which pulled the strip 81px off-centre and slid the
   search box 66px INTO the tabs, clipping "Game Stats" to "Game". */
#navbar {
  position: relative; top: 305px; height: 30px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
#navbar .navTabs { display: flex; align-items: center; }
#navbar img { border: 0; display: block; }
#navbar a { display: block; }

/* ---- content shell (original tiles) ---- */
#contentBG { background: url(images/contentBG_tile.png) repeat-y; }
#contentBody {
  background: url(images/contentBG.gif) no-repeat;
  padding: 12px 25px 25px 25px; min-height: 800px; color: #CCCCCC;
}

/* ---- stats framework (values from original layout_thread.css) ---- */
#stats { padding: 10px; font-size: 10px; text-align: left; }
#stats table.statsTable { border: solid 5px #112F61; background-color: #000; border-collapse: collapse; }
#stats td.heading, #stats div.heading { font-weight: bold; font-size: 13px; color: #FFCC33; padding: 10px 10px 0px 10px; }
#stats .left-heading { font-weight: bold; font-size: 13px; color: #FFCC33; padding: 10px 10px 0px 0px; }
#stats hr.hr { color: #333333; background-color: #333333; height: 1px; border: none; margin: 6px 5px; }
#stats td.statsHeading { border-right: 1px solid #000; border-bottom: 1px solid #000; background-color: #10243a; padding: 5px; font-weight: bold; color: #e8e9eb; text-align: right; }
#stats td.statsCell { padding: 5px; background-color: #212121; border-right: 1px solid #000; border-bottom: 1px solid #000; }
/* Faction subtotal rows under Leaders Used (player profile): the leader rows
   folded to UNSC and Covenant.  They wear the SAME cell colour and text colour
   as the leader rows above them (2026-08-28) -- a rule across the top
   and the emblem in place of a portrait are all the separation they need, and
   a colour of their own only made the table louder.  The emblem is clipped to
   a circle for the same reason it is on the combo board: the source art is a
   round emblem baked onto a black JPG. */
#stats tr.civSum td.statsCell { font-weight: bold; border-top: 2px solid #37617a; }
#stats tr.civSum td.statsCell img { border-radius: 50%; vertical-align: middle; margin-right: 6px; }
/* Secondary tally inside a stat cell (e.g. "1,016 (698 ranked)") — dimmed so
   the headline number still reads first */
#stats td.statsCell .rankedTally { color: #8fa2b5; font-size: 10px; }
/* OG leaderboard gamertags are plain text (no links) — keep ours clickable but
   render them in the cell's body color so the table matches the original */
#stats td.statsCell a { color: #CCCCCC; text-decoration: none; }
#stats td.statsCell a:hover { text-decoration: underline; }
#stats td.statsCellAlt { padding: 5px; background-color: #111111; border-right: 1px solid #000; border-bottom: 1px solid #000; }
#stats td.center { text-align: center; }
#stats td.left { text-align: left; }
#stats td.civHeading { font-weight: bold; font-size: 13px; color: #FFCC33; padding: 10px; background-color: #010916; border-top: 2px solid #37617a; border-bottom: 2px solid #37617a; }
#stats td.civBar { background-color: #000; height: 6px; padding: 0; }

/* ---- Team Combinations (MapStats) ----
   One row per POSSIBLE team combo, so the table is the whole space and not
   just the corner of it somebody has already played.  The win rate is a
   number over a bar with a tick at 50%: every row is a record against the
   field, so 50% is the line that means "even" — not the middle of some
   arbitrary range — and gold vs steel says which side of it a combo sits on
   before the number is read.
   `tr.thin` dims a row whose sample cannot carry its own percentage.  The bar
   still draws: hiding it would make a one-game 100% look like missing data
   rather than a real number that is simply too small to lean on. */
#stats table.comboTbl { border-collapse: collapse; }
#stats table.comboTbl td { font-size: 11px; }
#stats td.comboHead { background-color: #10243a; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 5px; font-weight: bold; color: #e8e9eb; text-align: center; white-space: nowrap; }
#stats td.comboHead a { color: #e8e9eb; text-decoration: none; }
#stats td.comboHead a:hover { color: #fff; text-decoration: underline; }
#stats td.comboHead a.on { color: #FFCC33; }
#stats td.comboCell { padding: 2px 5px; background-color: #212121; border-right: 1px solid #000; border-bottom: 1px solid #000; text-align: center; color: #ccc; }
#stats tr.alt td.comboCell { background-color: #191919; }
#stats tr.comboRow:hover td.comboCell { background-color: #10243a; }
/* Centred, not left: this column absorbs the table's slack, so once the
   "A / B / C" caption went away, left-aligned stacks sat against a wide empty
   gap. Centring also keeps a 2v2 pair and a 1v1 single balanced in the same
   column, and matches the centred header above it. */
#stats td.comboName { text-align: center; white-space: nowrap; color: #e8e9eb; }
/* One stack per leader: portrait over its own name. Fixed-width and centred so
   the three columns line up down the whole table however long the names are
   ("Prophet" is the widest at these sizes), and so a doubled leader reads as
   two identical stacks rather than a caption the eye has to re-pair. */
#stats td.comboName .ldr { display: inline-flex; flex-direction: column; align-items: center; width: 48px; margin-right: 3px; vertical-align: middle; }
#stats td.comboName .ldr img { display: block; }
#stats td.comboName .ldr b { font-size: 9px; font-weight: normal; color: #cfe0ee; line-height: 1.2; margin-top: 2px; }
#stats tr.thin td.comboName .ldr b { color: #7c7c7c; }
#stats .comboPct { font-weight: bold; color: #fff; font-size: 11px; }
#stats tr.thin td.comboCell, #stats tr.thin td.comboName { color: #7c7c7c; }
#stats tr.thin .comboPct { color: #8a8a8a; }
#stats .wrBar { position: relative; height: 6px; background: #0b1930; border: 1px solid #000; margin: 2px 0 1px 0; }
#stats .wrBar b { position: absolute; left: 0; top: 0; bottom: 0; background: #37617a; }
#stats .wrBar.up b { background: #FFCC33; }
#stats tr.thin .wrBar b { background: #2b3d50; }
#stats tr.thin .wrBar.up b { background: #7a672c; }
#stats .wrBar i { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: #7fa8c9; }
#stats .comboEmpty { color: #666; }
/* Civ mix: one faction emblem per leader, no counts — the marks are countable
   on sight against the row's own portraits.
   The source art is a circular emblem baked onto a BLACK square (JPG, no
   alpha), which on these rows read as a black tile with a logo in it. Clipping
   to a circle drops the corners the emblem never used, so it sits on the row
   colour instead of carrying its own background. */
#stats .civMix { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
#stats .civMix img { border-radius: 50%; display: block; }
#stats tr.thin .civMix img { opacity: .5; }
#stats td.statsMode { padding: 5px; background-color: #37617a; border-left: 10px solid #010916; border-top: 10px solid #010916; border-right: 10px solid #010916; }
#stats h2 { font-size: 18px; font-weight: bold; margin: 4px 6px; color: #fff; }
#stats td.statsMapList { border-right: 1px solid #000; border-bottom: 1px solid #000; background-color: #10243a; padding: 5px; font-weight: bold; color: #e8e9eb; text-align: center; }
#stats td.statsMapListDetail { border-right: 1px solid #000; border-bottom: 1px solid #000; background-color: #010916; color: #fff; padding: 3px; }
#stats td.statsMapListDetailYellow { border-right: 1px solid #000; border-bottom: 1px solid #000; background-color: #FFCC33; color: #000; padding: 3px; }
#stats label { padding-left: 5px; }
#stats select { font-size: 11px; font-family: Verdana, Arial, Helvetica; }
/* Peak filter on the leaderboard: every peak emblem in the column is the
   control — click one to floor the board at that peak.  The gold arrow is
   the sort-style indicator of what drives the view (Rank by default, the
   Peak column while its filter is on — clicking it there clears it); it
   is never a menu. */
#stats td.statsCell a.pkPick, #stats td.statsCell a.pkPick:hover { text-decoration: none; }
#stats a.pkPick img { cursor: pointer; }
#stats a.pkPick:hover img { filter: brightness(1.35); }
#stats .pkFon { color: #FFCC33; text-decoration: none; font-size: 9px; vertical-align: 1px; }
/* The Rank / Peak headings are click targets (they move the arrow); they
   keep the heading's own face and only warm on hover. */
#stats a.pkHead, #stats a.pkHead:visited { color: #e8e9eb; text-decoration: none; }
#stats a.pkHead:hover { color: #FFCC33; text-decoration: none; }
/* The heading driving the order, on the CSR board and on Leaders Used. */
#stats a.pkHead.on, #stats a.pkHead.on:visited { color: #FFCC33; }
.statsButton, .CommonSearchButton {
  width: 175px; font-family: Verdana, Arial, Helvetica; font-size: 11px; font-weight: bold; padding: 2px 4px;
  /* plain black per original Common.css — its search-button.gif accent
     renders as a stray white sliver at the left edge, so it's dropped */
  background: #000;
  border: 1px solid #444; color: #cccccc; cursor: pointer; height: 21px;
}
.statsButton:hover, .CommonSearchButton:hover { color: #ffffff; border-color: #777; }

/* ---- "now known as halowarsde.com" notice (hw.js, pages.dev host only) ----
   A dark veil over the whole page with one box in the stats framework: the
   3px black frame and #010916 body of every stats table, the #37617a title
   bar with its white h2, a #05142d panel, the gold uppercase kicker the
   header search uses, and a statsButton for Go -- gold on navy like a live
   .togSeg switch so it reads as THE thing to press. The html gets .movedLock
   so the page behind cannot scroll out from under it. */
.movedLock, .movedLock body { overflow: hidden; }
.movedVeil {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000;
  background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center;
}
.movedBox {
  width: 460px; max-width: 92%; box-sizing: border-box;
  background: #010916; border: 3px solid #000;
  box-shadow: 0 0 0 1px #234b63, 0 12px 48px rgba(0, 0, 0, 0.9);
  font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center;
}
.movedBar { background: #37617a; margin: 10px 10px 0 10px; padding: 5px; }
.movedBar h2 { font-size: 18px; font-weight: bold; margin: 4px 6px; color: #fff; }
.movedBody { background: #05142d; margin: 0 10px 10px 10px; padding: 18px 24px 22px 24px; }
.movedKick { color: #FFCC33; font-weight: bold; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.movedHost { color: #fff; font-size: 24px; font-weight: bold; margin: 6px 0 12px 0; letter-spacing: 0.5px; }
.movedBody p { color: #ccc; font-size: 11px; line-height: 17px; margin: 0 0 16px 0; }
.movedBody p b { color: #fff; font-weight: normal; overflow-wrap: anywhere; }
/* the Go button IS the destination, spelled out in full under the "this page
   is now at" kicker; a long player/game link wraps at 17px lines inside the
   button instead of pushing the box wide (2026-09-07). */
.movedBody a.statsButton {
  display: block; width: auto; height: auto; line-height: 17px; margin-top: 6px;
  padding: 7px 14px; font-size: 12px; text-decoration: none;
  overflow-wrap: anywhere;
  color: #FFCC33; background: #10243a; border-color: #37617a;
}
.movedBody a.statsButton:hover { color: #fff; background: #37617a; border-color: #6fa3cf; }

/* recent-game detail card (original structure) */
.teamTbl { width: 84%; table-layout: fixed; margin: 4px auto 0 auto; }
.cardInfo { margin: 0 auto; }
.teamTbl .playerCell { overflow: hidden; }
.teamHeadCell { border-bottom: dashed 1px #777777; padding: 5px 4px; color: #ccc; font-size: 14px; }
.playerCell { border-right: solid 1px #777777; }
.playerCell a { color: #698d73; text-decoration: none; }
.playerCell a:hover { color: #fff; text-decoration: underline; }
.pgLine { vertical-align: bottom; padding-top: 4px; padding-bottom: 6px; color: #ccc; font-size: 13px; white-space: nowrap; }
/* Card view settings (hw.js renderGW): one row of labelled two-way
   switches in the .ladChip vocabulary -- steel border, navy fill, the live
   side gold.  Replaced the "X -- switch to Y" prose links (2026-09-06). */
.cardTog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 10px; }
.togSet { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.togLbl { font-size: 9px; font-weight: bold; color: #8fa3b5; text-transform: uppercase; letter-spacing: 0.04em; }
.togSeg { display: inline-flex; border: 1px solid #37617a; background: #0b1930; }
.togSeg a { display: inline-block; padding: 2px 7px; font-size: 10px; line-height: 13px; color: #8fa3b5; text-decoration: none; border-left: 1px solid #37617a; cursor: pointer; }
.togSeg a:first-child { border-left: 0; }
.togSeg a:hover { color: #fff; background: #10243a; }
.togSeg a.on, .togSeg a.on:hover { color: #FFCC33; background: #10243a; font-weight: bold; cursor: default; }
#stats td.cardHead { font-size: 11px; padding: 6px; }
#stats td.cardVal { font-size: 11px; padding: 6px; }
.playerCell a { font-size: 13px; }
/* Win chance banner under the team columns (hw.js gameCard), in the
   site's bar vocabulary (MapStats .ldrBars / GlobalStats .wrBar): a thin
   navy track with a black rule and the pale 50% tick, teal fill, gold for
   the side that won.  Team 1 fills from the left, team 2 from the right;
   the small light-blue end labels carry each share, the winner's in gold. */
.wcBanner { max-width: 360px; margin: 6px auto 2px auto; padding: 0 6px; }
.wcCap { font-size: 10px; color: #fff; text-align: center; padding-bottom: 2px; }
.wcCap b.t1, .wcLbl.l em { color: #6fa3cf; }
.wcCap b.t2, .wcLbl.r em { color: #8fa2b5; }
.wcCap b.won, .wcLbl.won em { color: #FFCC33; }
/* Leaver-loss caption in the banner's slot (hw.js winBanner, m.lv). */
.lvNote .wcCap { color: #c9a0a0; }
.lvNote .wcCap b { color: #e6b3b3; }
.wcRow { display: flex; align-items: center; gap: 5px; font-size: 9px; line-height: 12px; color: #fff; font-weight: bold; }
.wcLbl { flex: 0 0 auto; white-space: nowrap; }
.wcLbl em { font-style: normal; }
.wcTrack { position: relative; flex: 1 1 auto; height: 5px; background: #0b1930; border: 1px solid #000; overflow: hidden; }
.wcTrack b { position: absolute; top: 0; bottom: 0; background: #37617a; }
.wcTrack b.t1 { left: 0; }
.wcTrack b.t2 { right: 0; background: #2b3d50; }
.wcTrack b.won { background: #FFCC33; }
.wcTrack i { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: #7fa8c9; }

/* country flag, drawn after the gamertag (never before — it would collide with
   the rank art). Height comes from the img attribute so the 36x24 source keeps
   its 3:2; this only buys it the gap from the name. */
/* vertical-align in CSS, not the legacy align="middle" attribute: that left the
   flag sitting on the baseline, so it rode high against the name. middle puts
   its centre on the x-height midpoint, which is where the eye reads centre. */
.flag { margin-left: 5px; vertical-align: middle; }
/* The leaderboard's Gamertag column takes whatever the five width="100" columns
   leave it, which is barely the widest name — so the flag broke to a line of
   its own and doubled the row height. Keeping the pair unbreakable makes the
   column ask for those ~16px instead. */
.tagFlag { white-space: nowrap; }

/* gamerpic avatar, drawn before the gamertag (the flag owns the after-slot).
   Square 64x64 source drawn small; the slight rounding reads as an avatar
   rather than a stray icon. Same vertical-align reasoning as .flag. */
.gamerpic { margin-right: 5px; vertical-align: middle; border-radius: 2px; }

/* Twitch channel link, drawn after the flag and so the last thing in the
   after-slot.  Inline SVG, so the only geometry it needs is the gap and the
   same middle alignment the flag beside it already uses. */
.twitch { margin-left: 5px; vertical-align: middle; }
/* The boards underline their links; the glyph must not pick one up, and the
   hover fade is what says it is clickable in its place. */
a.twitchLink { text-decoration: none; }
a.twitchLink:hover .twitch { opacity: .75; }

/* Rank-1 crown.  The board's top seat is an accolade the Tier column cannot
   say (a champion emblem marks a TIER, and several rows can wear one) — so
   the single #1 gets the crest itself, perched on its gamerpic.  Geometry is
   in custom properties so the badge can be resized in one place; the wrapper
   is inline-block only to give the badge a positioning box, and keeps the
   avatar's own middle alignment so the name beside it does not shift. */
.picCrown { position: relative; display: inline-block; vertical-align: middle; line-height: 0; margin-right: 6px; }
.picCrown > .crown {
  position: absolute;
  /* Top-RIGHT corner of the avatar, clear of the gamertag: the wrapper's
     margin-right opens the gap so the crest never sits on the first letter
     (2026-08-30, mockup B2). */
  right: var(--crown-x, -2px);
  top: var(--crown-y, -8px);
  z-index: 2;
  width: var(--crown-sz, 13px);
  height: var(--crown-sz, 13px);
  /* No glow: the reference badge sits on its own dark rim, and a drop-shadow
     at this size just haloes the disc into the row behind it. */
  pointer-events: none;
}

/* team average rank, inline beside the win/loss mark at the same 16px, so the
   header reads as one run: team, outcome, rating. */
.tavg { padding-left: 5px; white-space: nowrap; }
.tavgLbl { font-size: 10px; padding-left: 4px; }

/* The toggle line under the Recent Games card is pinned to the bottom of
   the card cell, level with the list's pager, whatever height the card has
   (2026-09-05) -- when the list column is the taller one.  renderGW
   sets .flow when it is not (a short list on a player page), and the line
   then sits in flow under the card, clear of the win chance banner. */
#gameCard { position: relative; }
/* A card on its own page (StreamGame.html), held to the width Recent Games
   gives the card beside its game list (measured: the card cell is 628px of
   the 1003px page once the list and gutters are out), and centred under
   the section heading. */
.cardSolo { max-width: 628px; margin: 0 auto; }
.cardFoot { position: absolute; left: 12px; right: 0; bottom: 6px; }
.cardFoot.flow { position: static; padding: 6px 0 0 0; }
/* Centred under the card, like the team columns above it (2026-09-06:
   "pic 2 should be centered to pic 1"). */
.cardFootRow { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.cardFootRow .cardTog { padding: 0 0 6px 0; }
/* The Detailed Debriefing is its own full-width section under the list +
   card table (#gameDebrief, 2026-09-06); the box itself is
   H.statsBox.  This is the shard-loading line that stands in for it. */
.gwDdLoad { padding: 12px 0 0 0; text-align: left; }

/* ---- StatsGame.html — the original stats/StatsGame.aspx page ----
   High Level Debriefing = the game card; Detailed Debriefing = the
   "Player Views" list beside one player's panel: a category strip over the
   chosen category's table.  Rules from the original layout_thread.css
   (statsMapList*, statsCategoryListDetail*, statsGameCell, statsSquads)
   plus the page's own inline styles. */
#stats td.statsCategoryListDetail { background-color: #010916; color: #FFCC33; border-right: solid 1px #FFCC55; padding: 6px; text-align: center; vertical-align: middle; cursor: pointer; font-weight: bold; }
#stats td.statsCategoryListDetailYellow { background-color: #FFCC33; color: #000; border-right: solid 1px #FFCC55; padding: 6px; text-align: center; vertical-align: middle; cursor: pointer; font-weight: bold; }
#stats td.statsCategoryListDetail.last, #stats td.statsCategoryListDetailYellow.last { border-right: 0; }
#stats td.statsCategoryListDetail:hover { background-color: #FFCC33; color: #000; }
#stats td.statsGameCell { padding: 5px; background-color: #212121; border-right: solid 1px #000; border-bottom: solid 1px #000; width: 50px; text-align: center; }
#stats td.statsSquads { border-right: solid 1px #000; border-bottom: solid 1px #000; background-color: #10243a; padding: 5px; font-weight: bold; color: #e8e9eb; text-align: center; }
#stats .pvRow { cursor: pointer; }
#stats .pvRow:hover td.statsMapListDetail { background-color: #FFCC33; color: #000; }
#stats td.ddLeft { text-align: left; vertical-align: top; }
#stats td.ddDiv { border-right: dashed 1px #555555; width: 1px; }
#stats td.ddRight { padding-left: 10px; vertical-align: top; width: 100%; }
#stats td.ddPlayerHead { padding: 10px 10px 3px 10px; text-align: left; background-color: #0f2439; font-weight: bold; font-size: 14px; color: #fff; }
#stats td.ddPlayerHead a { color: #698d73; text-decoration: none; }
#stats td.ddPlayerHead a:hover { color: #fff; text-decoration: underline; }
#stats td.ddPlayerHead img { vertical-align: top; }
#stats td.ddPanel { padding: 10px; text-align: left; border: solid 3px #0f2439; }
/* the game's own column icons beside the labels (site/stats/images/postgame/,
   64px source with the glow baked in; drawn at the row's text height) */
#stats .pgIco { width: 24px; height: 24px; vertical-align: middle; margin: -4px 6px -4px 0; }
#stats td.ddClock { width: 96px; font-weight: normal; }
#stats table.ddCats { background-color: #05142d; border: solid 3px #112F61; }
#stats hr.ddRule { color: #37617a; background-color: #37617a; border: 0; height: 1px; margin: 8px 0; }
#stats table.ddSect { background-color: #05142d; border: solid 3px #112F61; }
#stats table.ddSect td.heading { padding: 8px 10px 0 10px; }
#stats .ddNone { color: #999; font-style: italic; padding: 4px 6px; }
#stats td.ddName { text-align: left; }
#stats .ddSub { color: #FFCC33; font-weight: bold; padding: 12px 0 4px 0; }
#stats td.ddTotal { border-top: solid 2px #37617a; }
#stats tr.sqRow { cursor: pointer; }
#stats tr.sqRow:hover td.statsHeading { color: #FFCC33; }
#stats .sqArrow { margin-left: 4px; }
#stats .sqArrow.open { transform: rotate(90deg); }
#stats td.sqHead { padding: 5px 5px 0 5px; text-align: center; border-bottom: solid 1px #777777; font-weight: bold; }
#stats td.sqVal { padding: 0 5px 2px 5px; text-align: center; font-weight: normal; }

/* ---- Longest Turtles (Turtles.html) ----
   The record callout: map art beside the standing record, gold label, the
   time as the headline number.  Palette is the site's own — navy panel,
   steel border, gold accents — so the box reads as part of the 2009
   framework rather than a modern hero banner. */
#stats .recordBox { display: flex; align-items: center; gap: 16px; background: #05142d; border: 1px solid #37617a; padding: 10px 14px; margin: 8px 0 4px 0; }
#stats .recordBox .recArt img { display: block; border: 1px solid #10243a; }
#stats .recTitle { font-weight: bold; color: #FFCC33; font-size: 11px; letter-spacing: 1px; }
#stats .recTime { font-size: 24px; font-weight: bold; color: #fff; padding: 2px 0; }
#stats .recMeta { color: #cfe0ee; font-size: 11px; }
#stats .recTeams { color: #ccc; font-size: 11px; padding-top: 4px; }
#stats .recTeams a { color: #698d73; text-decoration: none; }
#stats .recTeams a:hover { color: #fff; text-decoration: underline; }
#stats .recDare { color: #8fa2b5; font-size: 9px; font-style: italic; padding-top: 4px; }
/* tag on a row whose game never counted — dim, so the marathons that were
   customs read as spectacle beside the official record, not as its peers */
#stats .tUnr { color: #7c7c7c; font-size: 8px; margin-left: 5px; text-transform: uppercase; }
/* board rows are click targets (they drive the game card below) */
#stats tr.tRow { cursor: pointer; }
#stats tr.tRow:hover td.statsCell { background-color: #0b1930; }
#stats tr.tRow.on td.statsCell { background-color: #10243a; }

/* leaderboard pager (original divPages) */
.lbPages { text-align: center; padding: 8px; font-size: 10px; color: #666; }
.lbPages a { color: #698d73; text-decoration: none; font-weight: bold; }
.lbPages a:hover { color: #fff; text-decoration: underline; }
.lbPages a.off { color: #444; cursor: default; text-decoration: none; }
#stats td.statsCell a, #stats td.statsCellAlt a { color: #698d73; text-decoration: none; }
#stats td.statsCell a:hover, #stats td.statsCellAlt a:hover { color: #fff; text-decoration: underline; }

.modeLinks { padding: 0 6px 4px 6px; font-size: 10px; }
.modeLinks a { color: #cfe0ee; text-decoration: none; margin-right: 10px; font-weight: bold; }
.modeLinks a:hover { color: #fff; text-decoration: underline; }
.modeLinks a.on { color: #FFCC33; }
/* second-level section links -- Galleries' own pages, under the Game Info row */
.modeLinksSub { padding: 0 6px 5px 20px; font-size: 10px; }
.modeLinksSub a { font-weight: normal; color: #9fb6c9; }
/* the Leaders-by-Map roster row: the whole map list, so it wraps and needs a
   little more air between rows than a single-line mode row does */
/* ---- Leaders by Map: the map picker ----
   Real map art, big enough to pick a map by sight. Native art is 200x100, so
   the tiles are sized just under that and never upscale. */
.mapPick {
  /* fixed four across: the site is a fixed 1003px, and auto-fill kept landing
     on three, which pushed the combo table most of a screen further down */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
}
.mapPick .mapTile {
  display: block; text-decoration: none; background: #010916;
  border: 2px solid #10243a; padding: 0 0 5px 0; text-align: center;
}
.mapPick .mapTile img { display: block; width: 100%; height: auto; }
.mapPick .mapTileNoArt { display: block; width: 100%; padding-top: 50%; background: #05142d; }
.mapPick .mapTileName {
  display: block; color: #cfe0ee; font-weight: bold; font-size: 11px;
  padding: 5px 4px 0 4px; line-height: 1.3;
}
.mapPick .mapTileGames { display: block; color: #666; font-size: 9px; }
.mapPick .mapTile:hover { border-color: #37617a; }
.mapPick .mapTile:hover .mapTileName { color: #fff; }
/* the map being shown below */
.mapPick .mapTile.on { border-color: #FFCC33; background: #10243a; }
.mapPick .mapTile.on .mapTileName { color: #FFCC33; }
/* on the roster, no games yet -- dimmed, never dropped */
.mapPick .mapTile.empty img { opacity: 0.35; }
.mapPick .mapTile.empty .mapTileName { color: #4a5a68; }

/* ---- Leaders by Map: the selected-map band ----
   The Team Combinations panel's heading, as the map it is about. A yellow
   line of text said which map the numbers belonged to; the picker directly
   above is all art, so the panel under it opens on the map you just clicked
   instead (2026-08-25).

   Native art is 200x100 and is NEVER upscaled -- the plate is pinned to its
   own size, and the width is filled by a blurred, dimmed copy of the same
   file behind a scrim. The scrim is heavy enough for the brightest maps on
   the roster (Blood Gulch, Release): the gold name sits on tan sand there,
   and a lighter wash left it unreadable. */
.mapBand { position: relative; overflow: hidden; background: #010916; border: 2px solid #10243a; }
.mapBandBG {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background-size: cover; background-position: center;
  filter: blur(10px) saturate(.9) brightness(.8); opacity: .6; transform: scale(1.25);
}
.mapBandScrim {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(1,9,22,.96) 0%, rgba(1,9,22,.90) 45%, rgba(1,9,22,.68) 100%);
}
.mapBand .mapBandIn { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px; }
.mapBand img.mapBandArt { display: block; width: 200px; height: 100px; border: 1px solid #37617a; flex: 0 0 auto; }
.mapBand .mapBandTxt { min-width: 0; }
.mapBand .mapBandName {
  color: #FFCC33; font-size: 21px; font-weight: bold; letter-spacing: .5px;
  text-transform: uppercase; line-height: 1.1;
}
.mapBand .mapBandSub { color: #9fc4dd; font-size: 11px; padding-top: 5px; }
.mapBand .mapBandSub b { color: #cfe0ee; }
.mapBand .mapChip {
  display: inline-block; border: 1px solid #37617a; background: #05142d; color: #cfe0ee;
  font-size: 10px; font-weight: bold; padding: 1px 6px; margin-right: 7px;
}
.mapBand .mapBandTitle { color: #fff; font-size: 14px; font-weight: bold; padding-top: 9px; }
.mapBand .mapBandLine { color: #9fb3c4; font-size: 11px; padding-top: 2px; }
.footnote { color: #666; font-size: 9px; padding: 4px 10px 8px 10px; }
/* ---- Leaders by Map: best leader on the picked map (2026-08-25) ----------
   Sits under the map band, above the civ-mix strip: the leader with the best
   win rate on this map wearing the board's portrait stack, and beside it six
   thin bars on the board's 50%-tick scale, one per leader, best in gold. */
#stats td.comboCell.bestPick { padding: 8px 6px; vertical-align: middle; }
#stats td.bestPick .ldr { width: auto; margin: 0; }
#stats td.bestPick .ldr b { font-size: 11px; font-weight: bold; color: #fff; margin-top: 4px; }
#stats td.bestPick .bestWr { width: 120px; margin: 4px auto 0 auto; }
#stats td.bestPick .bestN { color: #9fb3c4; font-size: 10px; padding-top: 3px; }
#stats tr.thin td.bestPick .ldr b, #stats tr.thin td.bestPick .bestN { color: #7c7c7c; }
#stats td.comboCell.bestBars { padding: 6px 10px; }
.ldrBars { display: flex; flex-direction: column; gap: 2px; }
.ldrBars .lb { display: flex; align-items: center; gap: 5px; font-size: 9px; line-height: 14px; color: #9fb3c4; }
.ldrBars .lb img { display: block; width: 14px; height: 14px; object-fit: cover; flex: 0 0 auto; }
.ldrBars .lb em { font-style: normal; width: 42px; text-align: left; flex: 0 0 auto; }
.ldrBars .lb .lbTrack { position: relative; flex: 1 1 auto; min-width: 120px; height: 6px; background: #0b1930; border: 1px solid #000; }
.ldrBars .lb .lbTrack b { position: absolute; left: 0; top: 0; bottom: 0; background: #37617a; }
.ldrBars .lb.up .lbTrack b { background: #FFCC33; }
.ldrBars .lb .lbTrack i { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: #7fa8c9; }
.ldrBars .lb .lbNum { width: 38px; text-align: right; color: #cfe0ee; flex: 0 0 auto; }
.ldrBars .lb .lbN { width: 26px; text-align: right; color: #666; flex: 0 0 auto; }
.ldrBars .lb.best em, .ldrBars .lb.best .lbNum { color: #FFCC33; font-weight: bold; }
.ldrBars .lb.thin .lbTrack b { background: #2b3d50; }
.ldrBars .lb.thin.up .lbTrack b { background: #7a672c; }
.ldrBars .lb.thin em, .ldrBars .lb.thin .lbNum { color: #7c7c7c; }
.ldrBars .lb.none { opacity: .45; }

.filterNote { color: #FFCC33; font-size: 9px; padding: 2px 0 4px 0; }
.filterNote a { color: #fff; }

/* Recent Games filter bar */
/* ---- civ mix as a filter (2026-08-25) -----------------------------------
   The strip that aggregates the four line-up shapes is also the control that
   picks one: a column with a gold frame is the shape the board below is
   showing, and the shapes it is not showing stay on the strip, dimmed, so the
   table reads as a slice of the strip rather than as the whole story. */
#stats td.comboHead.mixPick { padding: 3px; }
#stats td.comboHead.mixPick a { display: block; padding: 2px 0; border: 1px solid transparent; }
#stats td.comboHead.mixPick a:hover { border-color: #37617a; background-color: #05142d; }
#stats td.comboHead.mixPick.mixOn a { border-color: #FFCC33; background-color: #05142d; }
#stats td.comboHead.mixOff .civMix img { opacity: .28; }
#stats td.comboCell.mixOff { color: #5d5d5d; }
#stats td.comboCell.mixOff .comboPct { color: #5d5d5d; }
#stats td.comboCell.mixOff .wrBar { opacity: .3; }
/* The Line-ups control: a dropdown in the filter bar, but one that can carry
   the faction emblems -- a native <select> cannot, which is the whole reason
   it is hand-built.  Sized to sit level with the real <select>s beside it. */
.gwBar .mixSel { position: relative; }
.mixSelBtn { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 5px;
             background-color: #010916; border: 1px solid #37617a; color: #ccc;
             font-size: 10px; text-decoration: none; white-space: nowrap; }
.mixSelBtn:hover, .mixSel.open .mixSelBtn { border-color: #FFCC33; color: #fff; }
.mixSelBtn .civMix { gap: 2px; }
.mixCaret { color: #6f8ba3; font-size: 7px; padding-left: 1px; }
.mixMenu { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 2px; padding: 2px;
           background-color: #05142d; border: 1px solid #37617a; }
.mixMenu a { display: flex; align-items: center; gap: 7px; padding: 3px 9px 3px 6px;
             color: #cfe0ee; font-size: 10px; text-decoration: none; white-space: nowrap; }
.mixMenu a:hover { background-color: #10243a; color: #fff; }
.mixMenu a.on { color: #FFCC33; }
.mixMenu .civMix { gap: 2px; }
.mixMenu .mixArtCell { display: inline-flex; flex: 0 0 auto; justify-content: flex-start; }
.mixMenu .mixSep { display: block; height: 1px; margin: 3px 2px; background-color: #1c3350; }

/* Centred under the box title, like the mode tabs above it (2026-09-06:
   "this should be centered"); the groups keep their own spacing. */
.gwBar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 4px; padding: 2px 0 6px 0; font-size: 10px; color: #cfe0ee; }
.gwGrp { display: inline-flex; align-items: center; margin-left: 10px; }
.gwGrp:first-child { margin-left: 0; }
.gwBar label { padding: 0 4px 0 0; font-weight: bold; }
.gwBar select, .gwBar input[type="text"] { background: #010916; color: #ccc; border: 1px solid #37617a; font-size: 10px; padding: 1px 2px; }
.gwBar input[type="text"] { width: 110px; }
.gwBar input[type="checkbox"] { margin: 0; accent-color: #37617a; }
.gwBar .gwClear { width: auto; height: 18px; padding: 0 8px; margin-left: 10px; font-size: 10px; font-weight: normal; }

/* Service Record panel (StatsPlayer): section mini-headings + ladder cards.
   The cards are the CSR graph's game-type tabs — the gold border marks the
   board being plotted; .dead = a board with counted games but no CSR-stamped
   rated one (nothing to plot, so it doesn't act as a tab). Steel borders and
   navy fills from the OG palette so the cards sit inside the 2009 framework.
   Cards are anchors (keyboard-reachable like every clickable thing here) —
   kill the underline and let the inner spans carry their own colors. */
.miniHead { font-weight: bold; color: #FFCC33; font-size: 11px; text-align: center; padding: 8px 0 4px 0; }
.ladChips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 2px 0; }
.ladChip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #37617a; background: #0b1930; cursor: pointer; text-decoration: none; }
.ladChip:hover { border-color: #7fa8c9; background: #10243a; }
.ladChip.on { border-color: #FFCC33; background: #10243a; cursor: default; }
.ladChip.dead { cursor: default; border-color: #26364a; }
.ladChip.dead:hover { border-color: #26364a; background: #0b1930; }
.ladChipTxt { display: inline-flex; flex-direction: column; text-align: left; line-height: 1.35; }
.ladChipTxt .n { font-size: 9px; font-weight: bold; color: #cfe0ee; }
.ladChip.on .n { color: #FFCC33; }
.ladChipTxt .v { font-size: 13px; font-weight: bold; color: #fff; }
.ladChip.dead .v { color: #777; }
/* In placements: progress, not a rating -- grey, matching the placement
   diamond's own outline and the N/10 the match cards print. */
.ladChip.plc .v { color: #b0bac6; }
.ladChipTxt .g { font-size: 8px; color: #8fa2b5; }

/* ---- nav search (original: a right-aligned #searchCell on the nav row) ----
   The tab strip stays centred; the search sits at the right edge of the
   1003px bar, where the original put it. */
/* ---- gamertag search (over the header art, just above the tab strip) ----
   Injected into #header by HW.renderFind() on every page.  It replaced a
   cramped text box in the nav row: at 46px wide it was easy to miss, and being
   anchored in the same 1003px bar as the centred tab strip it capped how many
   sections the nav could carry.  #header is 348px tall with the strip at
   top:305px, so this sits at 262 and clears it by 13px.  The art behind it is
   busy, so the controls ride a translucent plate rather than the bare image. */
.tagFind {
  position: absolute; top: 262px; left: 0; width: 100%;
  text-align: center; z-index: 60;
}
.tagFind .tagFindIn {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(1, 9, 22, 0.72); border: 1px solid #234b63;
  padding: 5px 14px;
}
.tagFind label {
  color: #FFCC33; font-weight: bold; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase;
}
.tagFind input[type="text"] {
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;
  width: 240px; height: 22px; padding: 0 8px;
  border: 1px solid #37617a; background: #ddd; color: #000;
}
.tagFind .tagFindBtn {
  width: auto; padding: 0 14px; height: 24px; line-height: 24px;
  font-size: 12px; text-decoration: none; display: inline-block;
}
.tagFind .sugBox { font-size: 12px; }

/* ---- Last 24-Hours plate (over the header art, left of the soldiers) ----
   Injected into #header by HW.renderLast24() on every page that carries match
   data.  It is what survives of the 2009 left rail: the rail's other entries
   (Global / Leaderboards / Turtles / the map list / gamertag search) are all
   nav tabs or the header search now, so the rail column was dropped and the
   main column has the full 1003px -- one column also reads far better on a
   phone.  Same translucent plate as .tagFind so the two read as one set. */
.hdrLive { position: absolute; top: 10px; left: 28px; z-index: 60; }
.hdrLive .hdrLiveIn {
  background: rgba(1, 9, 22, 0.72); border: 1px solid #234b63;
  padding: 1px 3px 2px 3px; text-align: left; border-collapse: separate;
}
.hdrLive th {
  color: #FFCC33; font-weight: bold; font-size: 6px; letter-spacing: 0;
  text-transform: uppercase; text-align: right; padding: 0 0 0 5px;
}
.hdrLive th.hdrLiveTitle { text-align: left; padding-left: 0; }
.hdrLive td { line-height: 9px; white-space: nowrap; }
.hdrLive .v { font-size: 7px; font-weight: bold; color: #fff; text-align: right; padding-left: 5px; }
.hdrLive .k { font-size: 6px; color: #cfe0ee; }

/* ---- nav drop-downs (original RadMenu had these on Game Info + Galleries) ---- */
#navbar .navItem { position: relative; display: block; }
#navbar .navSub {
  display: none; position: absolute; left: 10px; top: 30px; z-index: 50;
  background: #010916; border: 1px solid #37617a; padding: 4px 0; min-width: 150px; text-align: left;
}
#navbar .navItem:hover .navSub { display: block; }
#navbar .navSub a, #navbar .navSub2 a {
  display: block; padding: 5px 12px; font-size: 11px; color: #cfe0ee; text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navbar .navSub a:hover, #navbar .navSub2 a:hover { background: #10243a; color: #FFCC33; }

/* Galleries is the one section that hangs two levels deep, so its list flies
   out to the right of its own row instead of dropping again.  top:-5px pulls
   the first flyout row level with the row that opened it (parent padding 4px
   + 1px border). */
#navbar .navSubItem { position: relative; display: block; }
#navbar .navSub a.hasSub { position: relative; padding-right: 22px; }
#navbar .navSub a.hasSub::after {
  content: '\25B8'; position: absolute; right: 10px; color: #7f9bb1;
}
#navbar .navSubItem:hover > a.hasSub { background: #10243a; color: #FFCC33; }
#navbar .navSubItem:hover > a.hasSub::after { color: #FFCC33; }
#navbar .navSub2 {
  display: none; position: absolute; left: 100%; top: -5px; z-index: 51;
  background: #010916; border: 1px solid #37617a; padding: 4px 0; min-width: 130px; text-align: left;
}
#navbar .navSubItem:hover .navSub2 { display: block; }

/* ---- gamertag search suggestions (rail + nav search boxes) ----
   Same language as the nav drop-downs: navy panel, steel border, gold
   highlight.  .on is the keyboard cursor; hover paints the same row style.
   The box anchors under its input (.sugWrap) and overlays whatever sits
   below — z-index above the nav drop-downs so the nav box's list never
   loses to a neighbouring tab's menu. */
.sugWrap { position: relative; display: inline-block; }
.sugBox {
  display: none; position: absolute; left: 0; top: 100%; z-index: 60;
  min-width: 100%; background: #010916; border: 1px solid #37617a;
  padding: 2px 0; text-align: left; white-space: nowrap;
}
/* the nav search sits at the bar's right edge — grow leftwards, not off-frame */
.sugBox.sugRight { left: auto; right: 0; }
.sugBox a {
  display: block; padding: 4px 9px; font-size: 11px; color: #cfe0ee;
  text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.sugBox a b { color: #fff; }                /* the matched part of the name */
.sugBox a .sugN { color: #61758a; font-size: 9px; padding-left: 9px; }
.sugBox a.on, .sugBox a:hover { background: #10243a; color: #FFCC33; }
.sugBox a.on b, .sugBox a:hover b { color: #FFCC33; }

/* ---- article pages (Home / Game Info / Galleries) ----
   The original marketing pages used Common.css + Home.css; these rules keep the
   recovered content readable inside the same shell as the stats pages. */
#page { font-size: 12px; line-height: 1.7; text-align: left; color: #CCCCCC; }
#page .pageHead { margin: 0 0 14px 0; }
#page .pageHead img { max-width: 100%; border: 0; }
#page h1 { font-size: 20px; color: #FFCC33; margin: 0 0 4px 0; }
#page h2 { font-size: 13px; font-weight: bold; color: #FFCC33; margin: 18px 0 6px 0; border-bottom: 1px solid #10243a; padding-bottom: 4px; }
#page h2:first-child { margin-top: 0; }
#page h3 { font-size: 13px; color: #cfe0ee; margin: 16px 0 4px 0; }
#page p { margin: 0 0 12px 0; color: #CCCCCC; }
#page a { color: #698d73; }
#page a:hover { color: #fff; }
#page img { border: 0; max-width: 100%; height: auto; }
#page .subNav { margin: 0 0 14px 0; font-size: 11px; }
#page .subNav a { color: #cfe0ee; text-decoration: none; font-weight: bold; margin-right: 14px; }
#page .subNav a:hover { color: #fff; text-decoration: underline; }
#page .subNav a.on { color: #FFCC33; }
#page .lead { color: #e8e9eb; font-size: 13px; }
#page .quote { color: #FFCC33; font-style: italic; font-size: 15px; margin: 0 0 14px 0; }
#page .gallery { margin: 0 0 18px 0; }
#page .gallery a { display: inline-block; margin: 0 6px 6px 0; }
#page .gallery img { border: 1px solid #10243a; }
#page .gallery img:hover { border-color: #FFCC33; }
#page .card { border: solid 5px #112F61; background: #000; padding: 12px 16px; margin: 0 0 14px 0; }
#page .card .cardHead { font-weight: bold; font-size: 13px; color: #FFCC33; margin-bottom: 6px; }
#page table.list { width: 100%; border-collapse: collapse; }
#page table.list td, #page table.list th { padding: 6px 8px; border-bottom: 1px solid #10243a; text-align: left; font-size: 11px; }
#page table.list th { background: #10243a; color: #e8e9eb; }
#page .meta { color: #666; font-size: 10px; }
#page .archiveNote {
  color: #999; font-size: 10px; background: #05142d; border-left: 3px solid #37617a;
  padding: 8px 12px; margin: 0 0 16px 0; line-height: 1.6;
}
#page .archiveNote a { color: #cfe0ee; }

#footer {
  height: 93px;
  background: url(images/footer.png) no-repeat;
  text-align: center; padding-top: 40px; color: #999999; font-size: 10px; line-height: 1.7;
}
#footer .tiny { color: #555; font-size: 9px; }

/* ============================================================
   Narrow windows: 1004-1218px (2026-08-28).
   The 2009 layout is authored at 1003px and FITS in any of these windows --
   it is only the 1.2 body zoom that inflates it to 1204 and pushes it off the
   screen.  So drop the zoom and keep the real desktop site here, instead of
   handing the phone layout to a window that never needed it: a 1152-wide
   window, a half-screen split, or 150% browser zoom on a 2560 display all
   land in this band.  Type is the 2009 native size through it, which is the
   size the art was cut for.
   The ceiling is 1218, not 1203, because a media query measures the WINDOW
   while the layout gets the window MINUS the vertical scrollbar (~15px).  At
   1204-1218 the old rules kept the 1.2 zoom and the 1204px layout then would
   not fit the ~1195px left over, so a long page -- the 50-row Leaderboards
   above all -- grew a horizontal scrollbar while a short page did not.
   ============================================================ */
@media (max-width: 1218px) and (min-width: 1004px) {
  body { zoom: 1; }
}

/* ============================================================
   Phones and genuinely narrow windows (2026-08-25).
   Above 1003px nothing here applies and the site is the fixed 2009 layout
   (unzoomed between 1004 and 1218, see the band above).  Below it the shell
   goes fluid: the header art scales to the width, the image tab strip gives
   way to text pills, the header search and Last-24-Hours plate drop into the
   flow, and the stats pages' side-by-side columns stack.  Type comes UP, not
   down: the old viewport (width=1003) shrank the whole page to ~32% on a
   phone.
   ============================================================ */
.navMob { display: none; }
.teamStack { display: none; }
@media (max-width: 1003px) {
  body { zoom: 1; }
  #content { width: 100%; }

  /* header: the HALO WARS wordmark only, then search, nav, live box.
     The full 1003x348 art at phone width was a third of the first screen
     spent on a 240px-wide title over soldiers nobody came to look at
     (2026-09-05: "that banner on mobile is a waste of space ...
     should only have the halo wars part").  So the phone shows the art's
     own wordmark plate and nothing else: the letters sit at x 202-790,
     y 12-50 of the source, on a dark plate that ends at y 60 where the
     skyline begins.  The crop is x 186-806 by y 0-60 -- 620x60, 16px
     clear of the letters each side, 12 over and 10 under -- taken from
     the same image with background-size/position rather than a second
     copy of the art: 1003/620 = 161.77% wide, and a percentage offset
     of 186/(1003-620) = 48.56% lands the crop's left edge at x 186.
     The strip is 60/620 = 9.68% of the width, so the wordmark spans
     ~95% of the screen at about 37px tall on a 390px phone, against
     24px tall and 60% wide inside the old banner.
     The art is painted on the strip itself, not on #header: enlarged to
     161.77% it is taller than the strip, and on #header the rest of it
     showed through under the search box and the nav pills. */
  #header { height: auto; display: flex; flex-direction: column; background: #000; }
  #header::before {
    content: ''; display: block; padding-top: 9.68%; order: 0;
    background: url(images/HeaderBG_Art.jpg) no-repeat 48.56% 0 / 161.77% auto;
  }
  .tagFind { position: static; order: 1; width: auto; padding: 6px 6px 6px 6px; z-index: auto; }
  .tagFind .tagFindIn { display: flex; gap: 6px; padding: 4px 6px; }
  .tagFind label { display: none; }
  .tagFind .sugWrap { flex: 1 1 auto; min-width: 0; }
  .tagFind input[type="text"] { width: 100%; box-sizing: border-box; font-size: 16px; height: 30px; }
  .tagFind .tagFindBtn { height: 30px; line-height: 30px; font-size: 13px; padding: 0 12px; }
  .tagFind .sugBox { font-size: 14px; }
  .tagFind .sugBox a { padding: 8px 10px; }
  #navbar { position: static; order: 2; height: auto; width: auto; white-space: normal; padding: 0 6px 6px 6px; }
  #navbar .navTabs { display: none; }
  /* One joined tab bar, two rows (hw.js deals the sections out 3 + 4: the
     site pages over the stats pages).  Every tab in a row is the same
     width, so a row is a strip of cells with hairline dividers rather than
     a run of free-wrapping pills -- seven natural-width pills fell 3 + 3 + 1
     with Leaders by Map alone on the last line (2026-09-07, "make it 2
     lines on mobile"; this was the layout picked from the three tried).
     The stats tabs carry short labels (hw.js `mob`) because four cells on
     a 375px phone are ~88px each.  The current section gets the gold text
     and a gold underline instead of a lighter box: the box read as a fourth
     border in the strip. */
  .navMob { display: flex; flex-direction: column; width: 100%; border: 1px solid #234b63; background: #05142d; }  /* #navbar is a centring flex box: without width the bar shrink-fits */
  .navMob .navMobRow { display: flex; }
  .navMob .navMobRow + .navMobRow { border-top: 1px solid #234b63; }
  .navMob a {
    display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0;
    padding: 10px 3px; font-size: 11px; font-weight: bold; text-align: center; line-height: 1.25;
    color: #cfe0ee; text-decoration: none; border-right: 1px solid #234b63;
  }
  .navMob .navMobRow a:last-child { border-right: 0; }
  .navMob a.on { color: #FFCC33; background: #10243a; box-shadow: inset 0 -3px 0 #FFCC33; }
  .hdrLive { position: static; order: 3; text-align: center; padding: 0 6px 8px 6px; }
  .hdrLive .hdrLiveIn { display: inline-table; padding: 2px 6px 3px 6px; }
  .hdrLive th { font-size: 9px; padding-left: 8px; }
  .hdrLive td { line-height: 13px; }
  .hdrLive .v { font-size: 11px; padding-left: 8px; }
  .hdrLive .k { font-size: 9px; }

  /* content shell tiles scale with the width */
  #contentBG { background-size: 100% auto; }
  #contentBody { background-size: 100% auto; padding: 8px 4px 16px 4px; min-height: 0; }
  #stats { padding: 4px 0; font-size: 12px; overflow-x: auto; }
  #stats h2 { font-size: 15px; }
  #stats td.statsMode { border-left-width: 4px; border-right-width: 4px; border-top-width: 6px; }
  #stats table[cellpadding="10"] > tbody > tr > td { padding: 4px; }
  #stats td[style*="padding:15px"] { padding: 6px 4px !important; }
  #stats td.heading, #stats div.heading, #stats .left-heading { font-size: 14px; }
  #stats td.statsCell .rankedTally { font-size: 11px; }
  #stats select, #stats input[type="text"], #stats input[type="submit"] { font-size: 16px; }
  .footnote { font-size: 10px; }
  /* moved notice: type up with the rest of the phone layout */
  .movedBox { width: 100%; max-width: 92%; }
  .movedKick { font-size: 12px; }
  .movedBody p { font-size: 13px; line-height: 19px; }
  .movedHost { font-size: 19px; }
  .movedBody a.statsButton { font-size: 14px; line-height: 19px; padding: 9px 12px; }
  .filterNote { font-size: 10px; }
  .modeLinks { font-size: 11px; line-height: 2; }
  .modeLinksSub { padding-left: 6px; }

  /* leaderboards: the six width="100" columns share the width they have */
  #stats td[width="100"] { width: auto; }
  #lbTable td.statsCell, #lbTable td.statsHeading { padding: 4px 3px; font-size: 11px; }
  /* Longest Turtles: eight columns cannot fit 390px -- the board scrolls
     sideways inside its own cell and the record box wraps art over text */
  /* display:block takes the cell out of the table algorithm, and contain
     zeroes its intrinsic width -- a scrolling cell otherwise still asks
     the table for the board's full width */
  #stats td:has(> #tTable), #stats td:has(> #comboTable) { display: block; overflow-x: auto; contain: inline-size; }
  #tTable td.statsCell, #tTable td.statsHeading { padding: 4px 3px; font-size: 11px; }
  #stats .recordBox { flex-wrap: wrap; gap: 10px; padding: 8px 10px; }
  #stats .recTime { font-size: 20px; }
  .lbPages { font-size: 12px; padding: 12px; }

  /* Global/Map Stats: the two 50% columns stack */
  #stats td[width="50%"] { display: block; width: auto; box-sizing: border-box; padding: 10px 0 0 0 !important; }

  /* Recent Games: the card on top, the game list under it in its own
     scrolling window (63 rows would otherwise push the card off the page) */
  #stats tr:has(> #gameCard) { display: flex; flex-direction: column-reverse; }
  #stats td:has(> #gameList) {
    display: block; width: auto !important; border-right: 0 !important; padding: 8px 0 0 0 !important;
    max-height: 300px; overflow-y: auto;
  }
  #gameList { width: 100%; }
  /* The pager rides the bottom of that box so that if a row measures a pixel
     out the arrows still stay on screen instead of hiding under the last row. */
  #gameList .lbPages { position: sticky; bottom: 0; background: #010916; box-shadow: 0 -1px 0 #000; }
  #gameCard { display: block; width: auto !important; padding: 0 !important; }
  .cardInfo img { width: 120px; height: auto; }
  .teamTbl { display: none; }
  .teamStack { display: flex; gap: 6px; margin-top: 6px; }
  .teamBlk { flex: 1 1 0; min-width: 0; }
  .teamBlk .teamHeadCell { display: block; padding: 6px 4px; }
  .tsRow { display: flex; align-items: center; gap: 5px; padding: 4px 0; border-bottom: 1px solid #1a1a1a; }
  .tsRow > img { width: 40px; height: auto; flex: 0 0 auto; }
  .tsTxt { min-width: 0; flex: 1 1 auto; }
  .tsTxt a { color: #698d73; text-decoration: none; font-size: 12px; overflow-wrap: anywhere; }
  .tsTxt .pgLine { padding: 2px 0 0 0; font-size: 11px; }
  .tsTxt .pgLine img { height: 24px; }
  .teamHeadCell { font-size: 13px; padding: 4px 2px; }
  .teamTbl .playerCell { padding-right: 4px !important; }
  .playerCell a { font-size: 12px; }
  .pgLine { font-size: 12px; padding-top: 2px; }
  .pgLine img { height: 28px; }
  .wcBanner { max-width: none; margin-top: 8px; padding: 0 2px; }
  .wcRow { font-size: 11px; }
  /* Game Stats page: Player Views stacks above the player's panel */
  #stats table.ddTbl, #stats table.ddTbl > tbody, #stats table.ddTbl > tbody > tr, #stats td.ddLeft, #stats td.ddRight { display: block; width: auto; }
  #stats td.ddDiv { display: none; }
  #stats td.ddLeft table { width: 100%; }
  #stats td.ddRight { padding: 8px 0 0 0; }
  #stats td.statsCategoryListDetail, #stats td.statsCategoryListDetailYellow { padding: 5px 2px; font-size: 10px; }
  .cardFoot { position: static; padding-top: 8px; }
  .cardFootRow { flex-direction: column; align-items: center; }
  .cardFootRow .cardTog { justify-content: center; padding: 0; }
  .gwBar { font-size: 11px; row-gap: 6px; }
  .gwGrp { margin-left: 8px; }
  .gwBar select, .gwBar input[type="text"] { font-size: 14px; }
  .gwBar input[type="text"] { width: 90px; }
  .gwBar .gwClear { height: 24px; font-size: 12px; }

  /* Leaders by Map */
  /* contain: the picker sits in a table cell, which would otherwise size
     itself to the 200px art (percentage-width images count at their
     intrinsic size in table min-content) and push the frame wide */
  .mapPick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; contain: inline-size; }
  .mapPick .mapTile { min-width: 0; }
  .mapPick .mapTileName { font-size: 12px; }
  .mapPick .mapTileGames { font-size: 10px; }
  .mapBand .mapBandIn { flex-wrap: wrap; gap: 10px; }
  .mapBand .mapBandName { font-size: 18px; }
  #stats table.comboTbl td { font-size: 11px; }
  #stats td.comboName .ldr { width: 40px; }
  #stats td.comboName .ldr img { width: 40px; height: auto; }
  #stats td.comboName .ldr b { font-size: 8px; }
  .ldrBars .lb .lbTrack { min-width: 60px; }

  /* Player page */
  .ladChips { gap: 6px; }
  .ladChip { padding: 5px 8px; }
  .miniHead { font-size: 12px; }

  /* article pages */
  #page { font-size: 13px; }
  #page h1 { font-size: 18px; }
  #page .card { padding: 10px 12px; border-width: 3px; }
  #page .gallery a { margin: 0 4px 4px 0; }

  /* the footer art (1003x133) is a ~52px cap at phone width: black under
     it, and the text starts below the cap instead of on the body's lava */
  #footer {
    height: auto; background: #000 url(images/footer.png) no-repeat top center / 100% auto;
    padding: calc(13.3% + 6px) 10px 18px 10px; font-size: 11px;
  }
}

/* ---------- Download page ---------- */
#page .dlGrid { display: flex; gap: 14px; margin: 4px 0 18px 0; }
#page .dlGrid .card { flex: 1 1 0; margin: 0; }
#page .dlBtn { display: inline-block; background: #112F61; color: #fff; font-weight: bold; font-size: 13px; padding: 8px 16px; border: 1px solid #FFCC33; text-decoration: none; }
#page .dlBtn:hover { background: #FFCC33; color: #000; }
#page .dlSub { margin: 8px 0 0 0; font-size: 11px; color: #8a9bb0; }
#page .dlWarn { border: solid 5px #5a1f1f; background: #000; padding: 12px 16px; margin: 6px 0 0 0; color: #e8e9eb; }
#page .dlWarn b { color: #ff6666; font-size: 13px; }
@media (max-width: 700px) { #page .dlGrid { flex-direction: column; } }

/* ---------- Stream evidence (Streams.html, StreamGame.html) ----------
   Matches read off Twitch streams, with the frames and checks they rest
   on.  Same vocabulary as the rest of the stats section: navy heading
   cells, dark value cells, gold for the thing to click. */
.svIntro { color: #9fb3c4; font-size: 11px; line-height: 1.4; padding: 6px 0 10px 0; }
#stats table.svKv td.statsHeading { width: 110px; white-space: nowrap; font-size: 11px; vertical-align: top; }
#stats table.svKv td.statsCell { font-size: 11px; color: #ccc; line-height: 1.5; }
#stats table.svKv td.statsCell a { color: #698d73; }
.svChip { display: inline-block; border: 1px solid #37617a; background: #05142d; color: #9fb3c4; font-size: 10px; font-weight: bold; padding: 1px 6px; margin-right: 6px; vertical-align: middle; }
.svChip.ok { color: #7fc97f; }
.svChip.new { color: #FFCC33; }
.svChip.bad { color: #d9776f; border-color: #6b3030; }
.svRef { color: #d9776f; }
/* A player the roster does not know, beside their name on a stream card and
   in the listing: the name is what the screen showed, nobody can vouch for it. */
.urTag { font-size: 9px; color: #d9776f; border: 1px solid #5a2f2b; border-radius: 3px; padding: 0 3px; white-space: nowrap; vertical-align: middle; }
.svFrame { margin: 6px 0 16px 0; }
.svFrame .svCap { color: #FFCC33; font-size: 12px; font-weight: bold; padding: 4px 0 5px 0; }
.svFrame .svCap span { color: #9fb3c4; font-weight: normal; font-size: 11px; }
.svFrame .svCap span a { color: #698d73; }
.svFrame .svNone { color: #6f7f8c; font-size: 11px; font-style: italic; padding: 0 0 2px 0; }
.svFrame img { display: block; width: 100%; max-width: 1280px; border: 1px solid #37617a; }
.svKey { color: #9fb3c4; font-size: 10px; padding: 4px 0 8px 0; }
.svKey b { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; vertical-align: middle; margin: 0 4px 0 10px; }
.svWrap { overflow-x: auto; }
#stats table.svList { width: 100%; border-collapse: collapse; }
#stats table.svList td.h { background-color: #10243a; color: #e8e9eb; font-weight: bold; font-size: 11px; padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; text-align: left; white-space: nowrap; }
#stats table.svList td.c { background-color: #212121; color: #ccc; font-size: 11px; padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; vertical-align: middle; line-height: 1.4; }
#stats table.svList tr.alt td.c { background-color: #111111; }
#stats table.svList td.c a { color: #698d73; text-decoration: none; }
#stats table.svList td.c a:hover { color: #fff; text-decoration: underline; }
#stats table.svList td.c a.svGo { color: #FFCC33; font-weight: bold; white-space: nowrap; }