/**
 * The rank pill in the header.
 *
 * WHY A FILE OF ITS OWN, for eighteen rules.
 *
 * The pill sits in the header of four pages — two homepages and two arenas
 * — and those four pages do not share a stylesheet. `public/styles.css` is
 * the game's, and only the arenas load it; everything else about the header
 * (`.bar`, `.brand`) is duplicated in each page's own <style> block, which
 * is survivable for a rule that has not changed in months and is not
 * survivable for one that is new.
 *
 * So: one small file, four link tags, and the pill looks the same in all
 * four places by construction rather than by four people remembering.
 *
 * Colour comes from the age, through the same three golds the scale uses:
 * gold-700 for the Mortals, gold-500 for the middle two ages, gold-300 for
 * the Immortals. The emblem inherits it with currentColor.
 */

.ax-rankpill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(201,168,76,.45);border-radius:999px;
  padding:5px 12px 5px 7px;background:rgba(201,168,76,.08);
  color:#C9A84C;text-decoration:none;line-height:1;
  transition:background 280ms cubic-bezier(.25,.46,.45,.94),
             border-color 280ms cubic-bezier(.25,.46,.45,.94);
}
.ax-rankpill:hover{background:rgba(201,168,76,.16);border-color:rgba(201,168,76,.7)}
.ax-rankpill:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
.ax-rankpill .pill-emblem{width:22px;height:22px;display:block;flex:none}
.ax-rankpill .nm{
  font-family:'Jost',system-ui,sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#080808;
}
.ax-rankpill .pt{
  font-family:'JetBrains Mono','Courier New',monospace;font-size:11px;
  color:#8A6A22;font-variant-numeric:tabular-nums;
}
.ax-rankpill[data-age="1"]{color:#8A6A22}
.ax-rankpill[data-age="4"]{color:#D4A840}

/*
 * The invitation, for a visitor with no account.
 *
 * Quieter than a rank somebody has earned, and it must stay that way: it is
 * an offer, and it sits two centimetres from the button that signs them in.
 */
.ax-rankpill[data-state="anon"]{
  border-color:rgba(8,8,8,.14);background:transparent;color:rgba(8,8,8,.34);
}
.ax-rankpill[data-state="anon"]:hover{
  border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.08);color:#8A6A22;
}
.ax-rankpill[data-state="anon"] .nm{color:rgba(8,8,8,.50)}
.ax-rankpill[data-state="anon"]:hover .nm{color:#080808}

/* On a dark header the pill has to hold its own; the homepages invert. */
.on-dark .ax-rankpill .nm{color:#FFF8DC}
.on-dark .ax-rankpill[data-state="anon"]{border-color:rgba(255,248,220,.22)}
.on-dark .ax-rankpill[data-state="anon"] .nm{color:rgba(255,248,220,.62)}

@media (prefers-reduced-motion: reduce){ .ax-rankpill{transition:none} }