/* Stats pieces shared by the Leaderboards page and My Account's Personal Stats: segmented
   controls, data tables, the small portrait ring, the owner's level emblems and rank numerals.
   Layout of each page lives in leaderboards.css / account.css. */

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- segmented control (real radios) ---------- */
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg-legend { float: left; width: 100%; padding: 0; margin: 0 0 9px; font: 600 10px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.seg-legend.sr-only { float: none; width: 1px; margin: -1px; }
.seg-track { clear: both; display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; border: 1px solid rgba(231, 199, 124, .3); border-radius: 4px;
  background: linear-gradient(180deg, rgba(3, 7, 18, .9), rgba(10, 19, 40, .9)); box-shadow: inset 0 1px 8px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .35); }
.seg-opt { position: relative; display: block; cursor: pointer; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: block; padding: 10px 16px 9px; border-radius: 2px; white-space: nowrap; text-align: center;
  font: 600 11px/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
  transition: color .2s, background-color .2s, box-shadow .2s; }
.seg-opt:hover span { color: var(--gold-100); background: rgba(231, 199, 124, .07); }
.seg-opt input:checked + span { color: #1d1406; background: linear-gradient(180deg, #f8e3a4 0%, #deb35f 50%, #b78534 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 6px 16px -8px rgba(231, 199, 124, .8), inset 0 1px 0 rgba(255, 255, 255, .55); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--astral); outline-offset: 2px; }

/* ---------- data tables ---------- */
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(231, 199, 124, .35) transparent; }
.stat-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; text-align: left; font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { padding: 11px 14px; border-bottom: 1px solid rgba(142, 171, 222, .12); white-space: nowrap; vertical-align: middle; }
.stat-table thead th { padding-top: 9px; padding-bottom: 9px; font: 600 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-300); border-bottom: 1px solid rgba(231, 199, 124, .38); }
.stat-table tbody th { font-weight: 500; color: var(--text); }
.stat-table td { color: #d5ddee; }
.stat-table .num { text-align: right; }
.stat-table .c-key { color: var(--gold-100); font-weight: 600; }
.stat-table thead .c-key { color: var(--gold-100); }

/* ---------- small portrait ring (the launcher's ring, scaled down) ---------- */
.mini-ring { --rs: 40px; position: relative; display: inline-block; flex: none; width: var(--rs); height: var(--rs); padding: 2px; border-radius: 50%;
  background: linear-gradient(135deg, #f1dca6 0%, #9a7a48 45%, #e3c68c 70%, #8a6326 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 5px 12px -5px rgba(0, 0, 0, .9); }
.mini-ring > img, .mini-initial { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 50% 40%, #1b2a4c, #05070c 75%); box-shadow: inset 0 0 0 1px #3a2e1c; }
.mini-initial { display: grid; place-items: center; font: 600 calc(var(--rs) * .4)/1 var(--serif); color: var(--gold-100); }
.mini-md { --rs: 52px; }
.mini-lg { --rs: 76px; padding: 3px; }

/* ---------- level emblem with the number in its ring ----------
   Hole centre (--hy, share of height) and radius (--hr, share of width) per tier, from
   SourceArt/UI/LevelUp/Emblems/metrics.json; the number is sized from the hole as in game. */
.lvl { --lw: 46px; --hy: 47.45%; --hr: .2187; position: relative; display: inline-block; flex: none; width: var(--lw); height: var(--lw); vertical-align: middle; }
.lvl::before { content: ""; position: absolute; left: 50%; top: var(--hy); width: calc(var(--lw) * var(--hr) * 2); height: calc(var(--lw) * var(--hr) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1a2a50, #060b1a 80%); }
.lvl img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lvl b { position: absolute; left: 50%; top: var(--hy); transform: translate(-50%, -46%);
  font: 700 calc(var(--lw) * var(--hr) * 1.18)/1 var(--serif); letter-spacing: 0; color: #fff4d2;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .9); font-variant-numeric: lining-nums tabular-nums; }
.lvl[data-tier="2"] { --hy: 47.41%; --hr: .2179; }
.lvl[data-tier="3"] { --hy: 47.21%; --hr: .2175; }
.lvl[data-tier="4"] { --hy: 46.53%; --hr: .2075; }
.lvl[data-tier="5"] { --hy: 44.86%; --hr: .2018; }
.lvl[data-tier="6"] { --hy: 44.26%; --hr: .1902; }
.lvl[data-tier="7"] { --hy: 43.34%; --hr: .1661; }
.lvl-md { --lw: 64px; }
.lvl-lg { --lw: 96px; }
.lvl-none { display: inline-block; min-width: 46px; text-align: center; color: var(--text-dim); }

/* ---------- rank numerals: gold, silver, bronze, then ivory ---------- */
.rank-num { display: inline-block; min-width: 1.6em; text-align: center; font: 600 20px/1 var(--serif); color: #efe6d0; font-variant-numeric: lining-nums tabular-nums; }
.rank-num[data-medal] { font-size: 24px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rank-num[data-medal="gold"] { background-image: linear-gradient(180deg, #fff6d6 0%, #f2cf74 45%, #b9852f 100%); filter: drop-shadow(0 0 8px rgba(242, 207, 116, .55)); }
.rank-num[data-medal="silver"] { background-image: linear-gradient(180deg, #ffffff 0%, #d5dce8 45%, #8c97aa 100%); filter: drop-shadow(0 0 7px rgba(213, 220, 232, .4)); }
.rank-num[data-medal="bronze"] { background-image: linear-gradient(180deg, #ffe0c2 0%, #e3a06a 45%, #9a5a2c 100%); filter: drop-shadow(0 0 7px rgba(227, 160, 106, .4)); }

/* ---------- class icon ---------- */
.cls-icon { width: 26px; height: 26px; flex: none; mix-blend-mode: screen; vertical-align: middle; }

/* ---------- tags ---------- */
.tag-bot { display: inline-block; margin-left: 8px; padding: 3px 6px 2px; border: 1px solid rgba(182, 192, 216, .45); border-radius: 2px;
  font: 700 9px/1 var(--sans); letter-spacing: .14em; color: #b6c0d8; vertical-align: 2px; }

/* ---------- sideways-scrolling tables: a fade at the edge with more beyond it (statsview.js
   scrollHint sets data-more). Boards keep rank and player pinned, so they fade right only. ---------- */
.table-scroll[data-more="right"], .board-scroll[data-more="left right"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0, 0, 0, .12));
  mask-image: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0, 0, 0, .12)); }
.table-scroll[data-more="left"]:not(.board-scroll) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12), #000 40px);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12), #000 40px); }
.table-scroll[data-more="left right"]:not(.board-scroll) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12), #000 40px, #000 calc(100% - 64px), rgba(0, 0, 0, .12));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12), #000 40px, #000 calc(100% - 64px), rgba(0, 0, 0, .12)); }