/* --------------------------------------------------------------------------
   Share Tech Mono, self-hosted.  The .woff2 sits next to this file in
   resource/ - no Google connection, works offline.  Single weight by design:
   faking bold on a thin monospace smears it, so emphasis is done with
   colour, size and letter-spacing instead.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Share Tech Mono";
  src: url(ShareTechMono.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   kAoS theme for UTStatsDB  -  style5.css   v3
   No background image.  Five dark backgrounds, five bright accents.

   EVERY colour is set once in the :root block below.  Change a value there
   and it changes everywhere.  Nothing below :root needs editing.
   ========================================================================== */

:root {
  /* --- the five background colours ------------------------------------- */
  --bg-navy:    #051542;   /* base                                         */
  --bg-teal:    #052f42;   /* alternate row                                */
  --bg-violet:  #1a0509;   /* sidebar panel - dark blood                    */
  --bg-magenta: #2a0608;   /* heading bars - dark blood                     */
  --bg-rust:    #421805;   /* third shade / warm counterpoint              */

  /* --- the five accent colours ----------------------------------------- */
  --ac-pink:    #ee2b70;   /* hover, highlighted headings                  */
  --ac-orange:  #ee472b;   /* warnings, red team                           */
  --ac-amber:   #eea82b;   /* primary text accent, links, gold team        */
  --ac-yellow:  #dfee2b;   /* humans, emphasis                             */
  --ac-green:   #98ee2b;   /* system messages, green team                  */

  /* two blues continuing the same hue sweep, for bots and blue team       */
  --ac-blue:    #2ba8ee;
  --ac-blue-dk: #2b70ee;

  /* --- roles ------------------------------------------------------------ */
  --text:       #e6e9f5;
  --text-dim:   rgba(230,233,245,.62);
  --border:     rgba(255,255,255,.12);

  --row-dark:      var(--bg-navy);
  --row-light:     var(--bg-teal);
  --row-darkgrey:  var(--bg-rust);
  --panel:         var(--bg-violet);

  --head-top:   #470a0e;   /* heading bar gradient, top                     */
  --head-bot:   var(--bg-magenta);
  --head-text:  #ffe7c2;
  --head-hl:    var(--ac-amber);
  --head-rule:  var(--ac-pink);   /* the line under every heading bar      */

  --hover:      var(--ac-pink);
  --hover-glow: rgba(238,43,112,.55);
  --link:       var(--ac-amber);

  /* --- player identity  (MEANING - do not repurpose) ------------------- */
  --human:      var(--ac-yellow);
  --bot:        var(--ac-blue);

  /* --- team colours  (MEANING - do not repurpose) ---------------------- */
  --team-red:      var(--ac-orange);
  --team-blue:     var(--ac-blue-dk);
  --team-green:    var(--ac-green);
  --team-gold:     var(--ac-amber);
  --team-red-txt:  #f4795f;
  --team-blue-txt: #6f9cf5;
  --team-green-txt:#b6f472;
  --team-gold-txt: #f0c469;

  /* --- chat log  (MEANING - do not repurpose) -------------------------- */
  --chat:       #d8dcec;
  --chat-sys:   var(--ac-green);
  --chat-kill:  var(--ac-yellow);
  --chat-vote:  var(--ac-blue);
  --chat-weap:  var(--ac-pink);

  /* --- misc ------------------------------------------------------------ */
  --warn:       var(--ac-orange);
  --offline:    var(--ac-orange);
  --graph-bar-1: var(--ac-pink);
  --graph-bar-2: var(--ac-blue);
  --graph-bg:   rgba(5,21,66,.65);

  --radius:     4px;
  --font: "Share Tech Mono", "Courier New", monospace;

  /* --------------------------------------------------------------------
     BUMP THIS EVERY TIME YOU CHANGE THIS FILE.
     It prints bottom-right on every page.  Same reason as the kAoS
     WebAdmin footer - it is the only way to tell whether the browser is
     showing the new stylesheet or a cached old one.
     -------------------------------------------------------------------- */
  --theme-version: "kAoS theme v25 \00b7 30-08-2026 \00b7 by g\00e4mm\00f6";
}

/* --------------------------------------------------------------------------
   Page.  The !important kills the sidebarN.gif the PHP sets inline.  A slow
   diagonal wash across four of the five background colours - no image.
   -------------------------------------------------------------------------- */
body {
  background: linear-gradient(160deg,
              var(--bg-teal) 0%,
              var(--bg-navy) 32%,
              var(--bg-violet) 68%,
              var(--bg-magenta) 100%) !important;
  background-attachment: fixed !important;
  color: var(--text);
  font-family: var(--font);
  margin: 0;
  padding: 10px 0 40px 0;
}

td { transition: background-color .12s ease; }
a  { transition: color .12s ease, text-shadow .12s ease; }

/* --- the colour slider bar, bottom far right ----------------------------- */
.kaosbar {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 10pt;
  letter-spacing: .5px;
  color: var(--text-dim);
  background: rgba(0,0,0,.55);
  border: 1px solid var(--border);
  border-left: 2px solid var(--head-rule);
  border-radius: var(--radius);
  padding: 5px 11px;
}
.kaosbar-label {color: var(--ac-amber); font-size: 9pt}
.kaosbar-stamp {color: var(--text-dim)}

.kaosbar-slider {
  -webkit-appearance: none; appearance: none;
  width: 150px; height: 8px; margin: 0; cursor: pointer;
  border-radius: 4px; border: 1px solid var(--border);
  background: linear-gradient(to right,
    hsl(0,80%,55%), hsl(60,80%,55%), hsl(120,80%,55%),
    hsl(180,80%,55%), hsl(240,80%,55%), hsl(300,80%,55%), hsl(360,80%,55%));
}
.kaosbar-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 18px; border-radius: 3px;
  background: var(--ac-amber); border: 1px solid #000;
  box-shadow: 0 0 6px rgba(0,0,0,.8); cursor: pointer;
}
.kaosbar-slider::-moz-range-thumb {
  width: 14px; height: 18px; border-radius: 3px;
  background: var(--ac-amber); border: 1px solid #000;
  box-shadow: 0 0 6px rgba(0,0,0,.8); cursor: pointer;
}

.kaosbar-reset {
  font-family: var(--font); font-size: 9pt; letter-spacing: .5px;
  color: var(--ac-amber); background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2px 7px; cursor: pointer;
}
.kaosbar-reset:hover {color: var(--hover); border-color: var(--head-rule)}

/* the CSS-only stamp is the no-JavaScript fallback - once the bar exists it
   carries the version itself, so hide the duplicate */
body.kaos-has-bar::after {display: none}

/* --- theme stamp, bottom far right, outside everything ------------------- */
body::after {
  content: var(--theme-version);
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 9999;
  font-family: var(--font);
  font-size: 10pt;
  letter-spacing: .5px;
  color: var(--text-dim);
  background: rgba(5,21,66,.72);
  border: 1px solid var(--border);
  border-left: 2px solid var(--head-rule);
  border-radius: var(--radius);
  padding: 3px 9px;
  pointer-events: none;
}

.box      {border: 1px solid var(--border); border-radius: var(--radius)}
.titlemsg {color: var(--ac-amber); font-weight: normal}
.tinytext {font-family: var(--font); font-size: 9pt; font-weight: normal; color: var(--text-dim)}

/* --- headings ------------------------------------------------------------ */
.heading, .medheading, .hlheading, .hlheadingred, .hlheadingblue,
.smheading, .lglheading, .chatlink {
  background: linear-gradient(180deg, var(--head-top), var(--head-bot));
  border-bottom: 2px solid var(--head-rule);
  font-family: var(--font);
  font-weight: normal;
  letter-spacing: .6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.heading       {font-size: 16pt; color: var(--head-text); text-transform: uppercase}
.medheading    {font-size: 13pt; color: var(--head-text)}
.hlheading     {font-size: 13pt; color: var(--head-hl)}
.hlheadingred  {font-size: 11pt; color: var(--team-red-txt)}
.hlheadingblue {font-size: 11pt; color: var(--team-blue-txt)}
.smheading     {font-size: 11pt; color: var(--head-text); text-decoration: none}
a.smheading:hover {font-size: 11pt; color: var(--hover); text-decoration: none; text-shadow: 0 0 10px var(--hover-glow)}

.lglheading    {font-size: 16pt; color: var(--head-hl)}
a.lglheading   {font-size: 16pt; color: var(--head-text)}
a.lglheading:hover {font-size: 16pt; color: var(--hover); text-shadow: 0 0 10px var(--hover-glow)}

/* --- alternating table rows ---------------------------------------------- */
.dark, .darkn, a.dark {
  font-family: var(--font); font-size: 11pt; color: var(--text);
  background: var(--row-dark); font-weight: normal;
}
.darkn {white-space: nowrap}
a.dark:hover {color: var(--hover); background: var(--row-dark); text-shadow: 0 0 10px var(--hover-glow)}

.grey, .greyn, a.grey {
  font-family: var(--font); font-size: 11pt; color: var(--text);
  background: var(--row-light); font-weight: normal;
}
.greyn {white-space: nowrap}
a.grey:hover {color: var(--hover); background: var(--row-light); text-shadow: 0 0 10px var(--hover-glow)}

.darkgrey {font-family: var(--font); font-size: 11pt; color: var(--text); background: var(--row-darkgrey); font-weight: normal}

.warn    {font-family: var(--font); font-size: 11pt; color: var(--warn);      background: var(--row-darkgrey); font-weight: normal}
.gselog  {font-family: var(--font); font-size: 11pt; color: var(--chat-vote); background: var(--row-light); font-weight: normal}
.tclog   {font-family: var(--font); font-size: 11pt; color: var(--ac-amber);  background: var(--row-light); font-weight: normal}
.opnote  {font-family: var(--font); font-size: 11pt; color: var(--ac-orange); font-weight: normal}
.gsedark {font-family: var(--font); font-size: 11pt; color: var(--chat-vote); background: var(--row-dark);  font-weight: normal}

/* --- chat log ------------------------------------------------------------ */
.chatlink        {font-size: 13pt; color: var(--head-text)}
a.chatlink       {font-size: 13pt; color: var(--ac-amber)}
a.chatlink:hover {font-size: 13pt; color: var(--hover); text-shadow: 0 0 10px var(--hover-glow)}

.chat, .chatred, .chatblue, .chatgreen, .chatgold,
.chatsys, .chatkill, .votesys, .chatweapspec {
  font-family: var(--font); font-size: 11pt; background: var(--row-light); font-weight: normal;
}
.chat         {color: var(--chat)}
.chatred      {color: var(--team-red-txt)}
.chatblue     {color: var(--team-blue-txt)}
.chatgreen    {color: var(--team-green-txt)}
.chatgold     {color: var(--team-gold-txt)}
.chatsys      {color: var(--chat-sys)}
.chatkill     {color: var(--chat-kill)}
.votesys      {color: var(--chat-vote)}
.chatweapspec {color: var(--chat-weap)}

/* --- humans (yellow) and bots (blue) ------------------------------------- */
.darkhuman, a.darkhuman {font-family: var(--font); font-size: 11pt; color: var(--human); background: var(--row-dark);  font-weight: normal; text-decoration: none}
.greyhuman, a.greyhuman {font-family: var(--font); font-size: 11pt; color: var(--human); background: var(--row-light); font-weight: normal; text-decoration: none}
a.darkhuman:hover, a.greyhuman:hover {color: var(--hover); text-shadow: 0 0 10px var(--hover-glow)}

.darkbot, a.darkbot {font-family: var(--font); font-size: 11pt; color: var(--bot); background: var(--row-dark);  font-weight: normal; text-decoration: none}
.greybot, a.greybot {font-family: var(--font); font-size: 11pt; color: var(--bot); background: var(--row-light); font-weight: normal; text-decoration: none}
a.darkbot:hover, a.greybot:hover {color: var(--hover); text-shadow: 0 0 10px var(--hover-glow)}

/* --- navigation ----------------------------------------------------------
   .sidebar sits on the 159px <td>, so it becomes the menu panel.
   -------------------------------------------------------------------------- */
/* The menu panel has no border and no hard edge anywhere.  One solid fill,
   and two masks multiplied together fade it out by the same amount on the
   top, the right and the bottom - so every edge that meets the page
   background dissolves identically.  --fade is the single dial for how soft
   it is.  (The left edge is the browser window edge, not a page edge, so it
   is deliberately left alone - fading it would eat the first letter of every
   menu item.) */
td.sidebar {
  /* THE PANEL ENDS JUST BELOW THE MENU.  It is not a full-height column.

     The menu is a FIXED height - logo, ten links, "Help" ends about 549px
     down - and it does not care how long the page is.  The table CELL does:
     adding the 1024x512 map picture took it from ~800px to ~1310px.

     Three goes at this before it was right, so here is the whole story:
       v21  faded the last 70px OF THE CELL.  Cell grew, 700px of solid
            column appeared above the fade, looked like a hard stop.
       v22  faded the last 9.5% of the cell.  Same fault, slightly less bad.
       v23  started the fade 600px down - correct place - but ran it all the
            way to the bottom of the cell.  Spread over 709px it is still 97%
            opaque where you are actually looking, so it STILL read as solid.
       v24  starts in the same place and finishes 300px later.  The panel is
            simply gone below that.  That is the "floating there" look, and
            it is now independent of page height for good.

     The ramp is front-loaded on purpose - most of the alpha is dropped in the
     first third, so it is visibly dissolving right after the menu rather than
     technically-fading-but-looking-solid. */
  --fade-top:   70px;   /* dissolve in at the top                         */
  --fade-x:     70px;   /* and at the right edge                          */
  --fade-start: min(560px, 62%);   /* solid down to just under "Help"     */
  --fade-len:   300px;  /* and completely gone this far below that        */
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 26px 6px 80px 6px;
}

/* The fade lives on a background layer UNDERNEATH the cell contents, not on
   the cell itself.  Masking the cell faded the logo and the menu text along
   with it - this way only the coloured panel dissolves, and everything on it
   stays at full strength.  The left edge is the browser window edge, not a
   page edge, so it is deliberately left alone.

   Every ramp is EASED rather than linear.  A straight two-stop gradient bands
   badly on a dark panel: the eye locks onto the constant-slope middle and
   picks out every 8-bit step.  Curving it hides them. */
td.sidebar::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--panel);

  -webkit-mask-image:
      linear-gradient(to bottom,
          rgba(0,0,0,0)   0,
          rgba(0,0,0,.05) calc(var(--fade-top) * .13),
          rgba(0,0,0,.18) calc(var(--fade-top) * .28),
          rgba(0,0,0,.42) calc(var(--fade-top) * .45),
          rgba(0,0,0,.68) calc(var(--fade-top) * .62),
          rgba(0,0,0,.88) calc(var(--fade-top) * .78),
          rgba(0,0,0,.97) calc(var(--fade-top) * .90),
          #000            var(--fade-top),
          #000            var(--fade-start),
          rgba(0,0,0,.82) calc(var(--fade-start) + var(--fade-len) * .07),
          rgba(0,0,0,.60) calc(var(--fade-start) + var(--fade-len) * .15),
          rgba(0,0,0,.40) calc(var(--fade-start) + var(--fade-len) * .25),
          rgba(0,0,0,.24) calc(var(--fade-start) + var(--fade-len) * .37),
          rgba(0,0,0,.13) calc(var(--fade-start) + var(--fade-len) * .51),
          rgba(0,0,0,.06) calc(var(--fade-start) + var(--fade-len) * .66),
          rgba(0,0,0,.02) calc(var(--fade-start) + var(--fade-len) * .82),
          rgba(0,0,0,0)   calc(var(--fade-start) + var(--fade-len) * 1),
          rgba(0,0,0,0)   100%),
      linear-gradient(to right,
          #000 0,
          #000 calc(100% - var(--fade-x)),
          rgba(0,0,0,.97) calc(100% - var(--fade-x) * .90),
          rgba(0,0,0,.88) calc(100% - var(--fade-x) * .78),
          rgba(0,0,0,.68) calc(100% - var(--fade-x) * .62),
          rgba(0,0,0,.42) calc(100% - var(--fade-x) * .45),
          rgba(0,0,0,.18) calc(100% - var(--fade-x) * .28),
          rgba(0,0,0,.05) calc(100% - var(--fade-x) * .13),
          rgba(0,0,0,0)   100%);
  -webkit-mask-composite: source-in;
          mask-image:
      linear-gradient(to bottom,
          rgba(0,0,0,0)   0,
          rgba(0,0,0,.05) calc(var(--fade-top) * .13),
          rgba(0,0,0,.18) calc(var(--fade-top) * .28),
          rgba(0,0,0,.42) calc(var(--fade-top) * .45),
          rgba(0,0,0,.68) calc(var(--fade-top) * .62),
          rgba(0,0,0,.88) calc(var(--fade-top) * .78),
          rgba(0,0,0,.97) calc(var(--fade-top) * .90),
          #000            var(--fade-top),
          #000            var(--fade-start),
          rgba(0,0,0,.82) calc(var(--fade-start) + var(--fade-len) * .07),
          rgba(0,0,0,.60) calc(var(--fade-start) + var(--fade-len) * .15),
          rgba(0,0,0,.40) calc(var(--fade-start) + var(--fade-len) * .25),
          rgba(0,0,0,.24) calc(var(--fade-start) + var(--fade-len) * .37),
          rgba(0,0,0,.13) calc(var(--fade-start) + var(--fade-len) * .51),
          rgba(0,0,0,.06) calc(var(--fade-start) + var(--fade-len) * .66),
          rgba(0,0,0,.02) calc(var(--fade-start) + var(--fade-len) * .82),
          rgba(0,0,0,0)   calc(var(--fade-start) + var(--fade-len) * 1),
          rgba(0,0,0,0)   100%),
      linear-gradient(to right,
          #000 0,
          #000 calc(100% - var(--fade-x)),
          rgba(0,0,0,.97) calc(100% - var(--fade-x) * .90),
          rgba(0,0,0,.88) calc(100% - var(--fade-x) * .78),
          rgba(0,0,0,.68) calc(100% - var(--fade-x) * .62),
          rgba(0,0,0,.42) calc(100% - var(--fade-x) * .45),
          rgba(0,0,0,.18) calc(100% - var(--fade-x) * .28),
          rgba(0,0,0,.05) calc(100% - var(--fade-x) * .13),
          rgba(0,0,0,0)   100%);
          mask-composite: intersect;
}

/* lift the logo and the menu links above that layer */
td.sidebar > * {position: relative; z-index: 1}
/* Both logo files are supplied at 2x their display size so they stay sharp
   on high-DPI screens.  These two rules pin the on-screen size - the PHP
   emits the <img> with no width attribute, so without them the files would
   render at full pixel size and blow the layout apart. */
td.sidebar img {width: 155px; height: auto; display: block; margin: 0 auto 10px auto}
img[src$="utstatsdblogo.png"] {width: 720px; height: auto}
.sidebar        {font-family: var(--font); font-size: 13pt; color: var(--text); font-weight: normal}
a.sidebar       {font-family: var(--font); font-size: 13pt; color: var(--ac-amber); background: transparent; font-weight: normal; text-decoration: none; display: block; padding: 3px 6px; border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0}
a.sidebar:hover {color: var(--hover); background: rgba(238,43,112,.12); border-left-color: var(--head-rule); text-shadow: 0 0 10px var(--hover-glow)}

.topbar         {font-family: var(--font); font-size: 13pt; color: var(--text); font-weight: normal}
a.topbar        {font-family: var(--font); font-size: 13pt; color: var(--ac-amber); font-weight: normal; text-decoration: none}
a.topbar:hover  {color: var(--hover); text-shadow: 0 0 10px var(--hover-glow)}

.pages          {font-family: var(--font); font-size: 12pt; color: var(--text); font-weight: normal}
a.pages         {font-family: var(--font); font-size: 12pt; color: var(--link); font-weight: normal; text-decoration: none; padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--row-dark)}
a.pages:hover   {color: var(--hover); border-color: var(--head-rule); background: rgba(238,43,112,.14); text-shadow: 0 0 10px var(--hover-glow)}

.searchform     {font-family: var(--font); font-size: 11pt; font-weight: normal; color: var(--text)}
.searchformbox  {font-family: var(--font); font-size: 11pt; font-weight: normal; background: var(--row-light); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 5px}

/* --- team bars and scores ------------------------------------------------ */
.blueteam, .redteam, .greenteam, .goldteam {
  font-family: var(--font); font-size: 11pt; color: #0a0a14; font-weight: normal; text-shadow: none;
}
.blueteam  {background: var(--team-blue)}
.redteam   {background: var(--team-red)}
.greenteam {background: var(--team-green)}
.goldteam  {background: var(--team-gold)}

.blueteamscore, .redteamscore, .greenteamscore, .goldteamscore {
  font-family: var(--font); font-size: 11pt; background: var(--row-light); font-weight: normal;
}
.blueteamscore  {color: var(--team-blue-txt)}
.redteamscore   {color: var(--team-red-txt)}
.greenteamscore {color: var(--team-green-txt)}
.goldteamscore  {color: var(--team-gold-txt)}

/* --- live server status panel -------------------------------------------- */
.status        {font-family: var(--font); font-size: 10pt; color: var(--text); background: var(--row-light); border: 1px solid var(--border); border-radius: var(--radius); text-align: left}
a.status       {font-family: var(--font); font-size: 10pt; color: var(--ac-amber); text-decoration: none; border: none}
a.status:hover {color: var(--hover); text-decoration: none; border: none; text-shadow: 0 0 10px var(--hover-glow)}
.statusnb      {font-family: var(--font); font-size: 10pt; color: var(--text); background: var(--row-light); padding-left: 4px}
.statusnbw     {font-family: var(--font); font-size: 10pt; color: var(--text); background: var(--row-light); white-space: nowrap; padding-left: 4px}
.statustitle, .spectitle {
  font-family: var(--font); font-size: 10pt; color: var(--head-text);
  background: linear-gradient(180deg, var(--head-top), var(--head-bot));
  border-bottom: 2px solid var(--head-rule);
}
.blueteambar   {font-family: var(--font); font-size: 10pt; color: #ffffff; background: #0a2472}
.redteambar    {font-family: var(--font); font-size: 10pt; color: #ffffff; background: #6b1a08}
.offline       {color: var(--offline); font-weight: normal}
.mapimage      {padding-left: 4px; padding-right: 2px}
.mapimage img  {border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,.5)}

#matchup {width: 720px; overflow: auto}

/* --- graphs -------------------------------------------------------------- */
.tgheading  {font-family: var(--font); font-size: 11pt; color: var(--text);      background: var(--graph-bg); font-weight: normal}
.tglheading {font-family: var(--font); font-size: 11pt; color: var(--ac-amber); background: var(--graph-bg); font-weight: normal}
.tgmainbox  {overflow: hidden; text-align: left; width: 390px; height: 150px}
.tgsubbox   {font-size: 0pt; width: 390px; height: 130px; background-color: var(--graph-bg); border-bottom: 2px solid var(--head-rule); float: right}
.tgbarspace {width: 5px; float: left}
.tgbar      {font-size: 0pt; width: 9px; background: var(--graph-bar-1); border: none; float: left; position: relative; border-radius: 2px 2px 0 0}
.tglabel    {font-size: 9pt; font-family: var(--font); color: var(--text); font-weight: normal; text-decoration: none; width: 9px; text-align: center; float: left; overflow: visible; position: relative; border: 1px solid transparent}
.tgblank    {font-size: 0pt; height: 0px; clear: both}

.wgmainbox  {overflow: hidden; text-align: left; width: 180px; height: 150px}
.wgsubbox   {font-size: 0pt; width: 180px; height: 130px; background-color: var(--graph-bg); border-bottom: 2px solid var(--head-rule); float: right}
.wgbarspace {width: 13px; float: left}
.wgbar      {font-size: 0pt; width: 9px; background: var(--graph-bar-2); border: none; float: left; position: relative; border-radius: 2px 2px 0 0}
.wgprespace {width: 10px; float: left}
.wglabel    {font-size: 9pt; font-family: var(--font); color: var(--text); font-weight: normal; text-decoration: none; width: 9px; text-align: center; float: left; overflow: visible; position: relative; border: 1px solid transparent}

/* --- help ---------------------------------------------------------------- */
.help        {font-family: var(--font); color: var(--text); font-size: 11pt; text-align: left}
.helphdr     {font-family: var(--font); font-size: 16pt; font-weight: normal; color: var(--ac-amber)}
a.help       {color: var(--ac-amber); font-weight: normal; text-decoration: none}
a.help:hover {color: var(--hover); text-shadow: 0 0 10px var(--hover-glow)}

a.idmatch {font-family: var(--font); font-size: 11pt; color: var(--ac-orange); background: var(--row-dark); font-weight: normal; text-decoration: none}

/* ==========================================================================
   BIG MAP PICTURE  -  front page only
   --------------------------------------------------------------------------
   1024x512 shot of the map from the last logged match, sitting under the
   Last Match box.

   The 28px edge fade that shipped in v21 is GONE as of v22, at his request.
   A frame and a dissolving edge fight each other - the fade exists so the
   picture disappears into the page, and a frame draws a hard line exactly
   where the fade is trying to vanish.  You cannot have both.

   THE FRAME is "Runner": a 2px dark rail with a single neon comet - red into
   orange into yellow into a white tip - travelling around the perimeter.
   It is one rotating conic-gradient behind the picture, clipped by the 2px
   padding on the wrapper.  No JavaScript, no images, nothing to load.
   ========================================================================== */
table.bigmapbox,
table.bigmapbox td {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
table.bigmapbox {margin: 0 auto}

/* NOT img.bigmap - it must be a CLASS selector.  theme.js swaps the <img>
   for a <canvas> carrying the same class when the water shader starts, and a
   canvas does not match an img type selector.  When it was img.bigmap the
   canvas got no position and no z-index, so the comet painted straight OVER
   the picture as a huge coloured wedge instead of being hidden behind it. */
.bigmap {
  display: block;
  width: 1024px;
  max-width: 92vw;
  height: auto;
  border: 0;
  position: relative;
  z-index: 1;
}

/* the rail --------------------------------------------------------------- */
.bigmapframe {
  --speed: 12s;
  --neon-red:    #ff1a2e;
  --neon-orange: #ff8a1f;
  --neon-yellow: #ffe23d;

  position: relative;
  display: inline-block;
  padding: 2px;                /* this IS the rail thickness */
  background: #180407;         /* the unlit part of the rail */
  overflow: hidden;
  isolation: isolate;
  line-height: 0;
}

/* The comet.  A conic gradient that is transparent for most of its sweep, so
   only a short bright arc shows at any moment.  Rotating the whole thing
   walks that arc around the edge of the picture. */
.bigmapframe::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%; left: 50%;
  width: 190%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
      transparent            0deg,
      transparent          288deg,
      rgba(255,26,46,.10)  300deg,
      rgba(255,26,46,.55)  330deg,
      var(--neon-red)      344deg,
      var(--neon-orange)   351deg,
      var(--neon-yellow)   356deg,
      #fff6d8            358.5deg,
      transparent          360deg);
  filter: drop-shadow(0 0 6px rgba(255,60,20,.9));
  animation: bigmap-drunk var(--speed) infinite;
}

/* DRUNK - his pick, 30-08-2026.  Nine uneven steps, each with its own easing
   curve, so the comet surges, catches itself, drifts, stalls, then bolts.  It
   never settles into a rhythm you can predict, which is the whole point.
   --speed scales the lot, so the personality survives any speed. */
@keyframes bigmap-drunk {
  0%   {rotate:   0deg; animation-timing-function: cubic-bezier(.10,.80,.20,1)}
  11%  {rotate:  72deg; animation-timing-function: cubic-bezier(.90,0,.90,.20)}
  19%  {rotate:  80deg; animation-timing-function: cubic-bezier(.15,.90,.25,1)}
  27%  {rotate: 150deg; animation-timing-function: cubic-bezier(.80,0,1,.35)}
  41%  {rotate: 162deg; animation-timing-function: cubic-bezier(.05,.95,.10,1)}
  48%  {rotate: 268deg; animation-timing-function: cubic-bezier(.85,0,.95,.50)}
  66%  {rotate: 276deg; animation-timing-function: cubic-bezier(.30,.60,.20,1)}
  79%  {rotate: 318deg; animation-timing-function: cubic-bezier(.90,0,1,.30)}
  92%  {rotate: 352deg; animation-timing-function: cubic-bezier(.10,.90,.30,1)}
  100% {rotate: 360deg}
}

/* ==========================================================================
   LAST MATCH box  -  front page only
   --------------------------------------------------------------------------
   It was pinned to width="350" with both lines at 16pt, so a map name like
   DM-kAoS-DE-Ironic-fReon_v_054 (about 380px at that size) wrapped, and then
   the date wrapped too - five lines deep to say two things.

   Width is AUTO now rather than a bigger fixed number: the box grows for a
   long map name and shrinks back for a short one, so no map can ever wrap it
   again.  A hard 460px would look right today and break on the first longer
   name.  The date drops to 11pt so the two lines read as a hierarchy.
   ========================================================================== */
table.lastmatch {width: auto; min-width: 350px; margin: 0 auto}
table.lastmatch td.lm-cell {padding-left: 20px; padding-right: 20px; white-space: nowrap}
.lm-map  {display: block; white-space: nowrap}
.lm-when {display: block; white-space: nowrap; font-size: 11pt; letter-spacing: .04em; opacity: .95}