/* The ratings page (/ratings): the engines' ladder in tables and charts on light cards. Marks
   thin, the grid a hairline, the numbers in mono; a color only says who (or how much, in a heat
   cell). A tablet stacks what stood side by side, a phone turns the rating into cards and puts
   the three tables of kills for a death under tabs. */

.rt { --soft: oklch(0.55 0.02 265); max-width: 1440px; margin: 0 auto; padding: 20px 20px 72px; display: flex; flex-direction: column; gap: 20px; }
.rt-head { padding: 36px 20px 8px; display: flex; flex-direction: column; gap: 12px; }
.rt-head h1 { font: 800 48px/1.24 var(--f-display); letter-spacing: -.02em; }
.rt-setup { margin: 0; font: 13px/1.6 var(--f-mono); color: var(--ink-3); text-wrap: pretty; }
.rt-body { padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- a section's card: the title and its note, a key on the right, the rest under ---------- */
.rt-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 16px 24px;
  min-width: 0;
  padding: 28px 30px 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid #fff;
  box-shadow: 0 20px 50px rgba(30, 36, 60, .07);
}
.rt-card > * { grid-column: 1 / -1; min-width: 0; }
.rt-card > .rt-cap { grid-column: 1; align-self: last baseline; }
/* the key stands on the note's last line */
.rt-card > .rt-key { grid-column: 2; grid-row: 1; align-self: last baseline; }
.rt-cap { display: flex; flex-direction: column; gap: 6px; }
.rt-cap h2 { font: 700 22px/1.24 var(--f-display); }
.rt-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.rt-board { row-gap: 14px; padding-bottom: 22px; }
.rt-board .rt-note { max-width: 820px; }
.rt-duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
/* the distance's card is narrow beside the guns: its key goes under the table */
.rt-dist > .rt-key { grid-column: 1 / -1; grid-row: auto; order: 1; align-self: start; }
.rt-dist > .rt-key .rt-key-bar { flex: 0 1 180px; }

/* the shorter of two texts, shown from a width on (the media rules below) */
.two > .n2 { display: none; }

/* the key of a diverging scale: its ends in words, its middle under the bar's middle */
.rt-key { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 21px; color: var(--ink-3); white-space: nowrap; }
.rt-key-bar { position: relative; display: block; flex: none; width: 180px; height: 10px; border-radius: 999px; }
.rt-key-bar em { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); font: 10px/1 var(--f-mono); font-style: normal; color: var(--muted); }
.rt-key-bar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; margin-left: -.75px; border-radius: 1px; background: rgba(30, 36, 60, .35); }

/* the engine's place: the first three in the accent */
.rt-rank { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--wash); font: 800 10.5px/1 var(--f-display); color: var(--ink); }
.rt-rank.best { background: var(--accent); color: var(--on-accent); }
.rt-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the rating ---------- */
.rt-rating { display: flex; flex-direction: column; }
.rt-r {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.25fr) 130px minmax(0, 1fr) 96px 96px 130px 130px;
  align-items: center;
  height: 51px;
  border-top: 1px solid rgba(30, 36, 60, .07);
  font-size: 14px;
  transition: background .15s;
}
.rt-r.head { height: 36px; border-top: 0; font: 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* the spacing after the last letter would push a right-aligned head off its numbers */
.rt-r.head .num { text-align: right; margin-right: -.12em; }
.rt-r:not(.head):hover { background: rgba(30, 36, 60, .025); }
.rt-r:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: -2px; border-radius: 12px; }
.rt-r .rt-rank { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.rt-r .rt-name { font-size: 15px; font-weight: 700; }
.rt-score { text-align: right; white-space: nowrap; }
.rt-score b { font: 700 15px/1 var(--f-display); }
.rt-score small, .rt-stat b small { font: 11.5px/1 var(--f-mono); color: var(--soft); }
/* the rating on one scale for all: the dot, two errors either way, 1500 dashed */
.rt-plot { position: relative; height: 20px; margin: 0 8px 0 28px; }
.rt-plot .mid { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed rgba(30, 36, 60, .22); }
.rt-plot .bar { position: absolute; top: 7px; height: 6px; border-radius: 3px; background: rgba(30, 36, 60, .16); }
.rt-plot .dot { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.rt-stat { text-align: right; white-space: nowrap; }
.rt-stat > small { display: none; }
.rt-stat b { font: 400 13px/1 var(--f-mono); }
.rt-stat.kd b { font-weight: 700; }
.rt-stat b small { font-size: 13px; }

/* ---------- heat tables ---------- */
.rt-heat { --name: 280px; display: flex; flex-direction: column; gap: 3px; }
.rt-heat.slim { --name: 204px; }
.rt-hr { display: grid; grid-template-columns: var(--name) repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 38px; }
.rt-hr.head { height: 28px; align-items: center; font: 700 11px/1 var(--f-mono); color: var(--muted); }
.rt-hr.head > span { text-align: center; white-space: nowrap; }
.rt-hr.head > .rt-who { font-weight: 400; text-transform: uppercase; }
.rt-who { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 10px; }
.rt-who .rt-name { font-size: 13.5px; font-weight: 600; }
.slim .rt-who { padding-right: 8px; }
.slim .rt-who .rt-name { font-size: 13px; }
.rt-cell { border-radius: 8px; display: grid; place-items: center; font: 700 12px/1 var(--f-mono); cursor: default; transition: filter .15s; }
.rt-cell.thin { background: rgba(30, 36, 60, .035); color: oklch(0.6 0.02 265); }
.rt-cell.self { background: repeating-linear-gradient(45deg, rgba(30, 36, 60, .06) 0 4px, transparent 4px 8px); }
.rt-cell:not(.self):hover { filter: brightness(.93) saturate(1.1); }
.rt-cell:focus-visible, .rt-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rt-hint { display: none; margin: 0; align-items: center; gap: 6px; font-size: 12px; line-height: 1; color: var(--muted); }
.rt-hint .ic { width: 14px; height: 14px; }
.rt-wide { display: flex; flex-direction: column; gap: 12px; }
.rt-tabs { display: none; }
.rt-tabs button { flex: 1 1 0; height: 32px; font-size: 12px; }

/* ---------- the level chart ---------- */
.rt-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(30, 36, 60, .12);
  font: 600 13px/1 var(--f-text);
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
/* the dot half a pixel under the line's middle: level with the name's lowercase as with its capitals */
.rt-chip i { display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(30, 36, 60, .3); translate: 0 .5px; }
.rt-chip:hover:not(.on) { background: var(--wash); color: var(--ink); }
.rt-chip.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(30, 36, 60, .12), inset 0 0 0 1px rgba(30, 36, 60, .06); }
.rt-chip.on i { box-shadow: none; }
.rt-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent-edge), var(--ring); }
.rt-line svg { display: block; overflow: visible; touch-action: pan-y; }
.rt-line rect:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; }
.rt-grid { stroke: rgba(30, 36, 60, .08); stroke-width: 1; }
.rt-axis { stroke: rgba(30, 36, 60, .3); stroke-width: 1; }
.rt-tick { fill: var(--muted); font: 11px var(--f-mono); dominant-baseline: central; }
.rt-l-rest { fill: none; stroke: rgba(30, 36, 60, .2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.rt-l-pick { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rt-end { font: 700 13px var(--f-text); dominant-baseline: central; }
.rt-leader { stroke: rgba(30, 36, 60, .3); stroke-width: 1; }
.rt-hair { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.rt-more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(30, 36, 60, .05);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .15s;
}
.rt-more summary::-webkit-details-marker { display: none; }
.rt-more summary:hover { background: var(--wash-2); }
.rt-more summary:focus-visible { outline: none; box-shadow: var(--ring); }
.rt-more summary .ic { width: 10px; height: 10px; translate: 0 .5px; transition: transform .15s; }
.rt-more[open] summary .ic { transform: rotate(90deg); }
.rt-more .rt-scroll { margin-top: 12px; overflow-x: auto; }
/* the chart's numbers as a table */
.rt-mini { border-collapse: collapse; font-size: 13px; }
.rt-mini th { height: 32px; padding: 0 12px; font: 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.rt-mini th.num { text-align: right; }
.rt-mini td { height: 36px; padding: 0 12px; border-top: 1px solid rgba(30, 36, 60, .07); white-space: nowrap; }
.rt-mini th:first-child, .rt-mini td:first-child { padding-left: 0; }
.rt-mini td.rt-name { font-weight: 600; }
.rt-mini td.num { text-align: right; font: 13px/1 var(--f-mono); }

/* ---------- what they kill with ---------- */
.rt-gkey { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rt-gkey span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.rt-gkey i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.rt-stacks { display: flex; flex-direction: column; gap: 3px; }
.rt-w { display: grid; grid-template-columns: 204px minmax(0, 1fr) 64px; align-items: center; gap: 10px; height: 38px; }
.rt-w .rt-who { padding-right: 0; }
.rt-w .rt-name { font-size: 13px; font-weight: 600; }
.rt-stack { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; }
.rt-seg { flex: 1 1 0; min-width: 2px; display: grid; place-items: center; font: 700 11px/1 var(--f-mono); color: var(--ink); overflow: hidden; cursor: default; transition: filter .15s; }
.rt-seg::after { content: attr(data-label); }
.rt-seg:hover { filter: brightness(.93) saturate(1.1); }
.rt-total { text-align: right; font: 700 12.5px/1 var(--f-mono); white-space: nowrap; }

/* ---------- the tooltip ---------- */
.rt-tip {
  position: fixed;
  z-index: 20;
  min-width: 200px;
  max-width: 340px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(18, 20, 30, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 16px 40px rgba(30, 36, 60, .25);
  pointer-events: none;
  font-size: 12px;
}
.rt-tip-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.rt-tip-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 8px; }
.rt-tip-rows.keyed { grid-template-columns: 10px auto minmax(0, 1fr); }
.rt-tip-rows i { width: 8px; height: 8px; border-radius: 50%; }
.rt-tip-rows b { font: 700 12px/16px var(--f-mono); text-align: right; white-space: nowrap; }
.rt-tip-rows span { line-height: 16px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- smaller screens ---------- */
/* the distance and the guns one under the other, their tables lined up with the others' */
@media (max-width: 1319px) {
  .rt-duo { grid-template-columns: minmax(0, 1fr); }
  .rt-dist > .rt-key { grid-column: 2; grid-row: 1; order: 0; align-self: last baseline; }
  .rt-dist > .rt-key .rt-key-bar { flex: none; }
  .rt-heat.slim { --name: 280px; }
  .rt-w { grid-template-columns: 273px minmax(0, 1fr) 64px; }
}

@media (max-width: 1199px) {
  .two.mid > .n1 { display: none; }
  .two.mid > .n2 { display: inline; }
  /* the names keep their room, the spread gives it up */
  .rt-r { grid-template-columns: 40px minmax(230px, 1.25fr) 112px minmax(0, 1fr) 72px 72px 84px 100px; }
  .rt-plot { margin-left: 20px; }
}

@media (max-width: 1023px) {
  .rt { padding: 16px 16px 56px; gap: 16px; }
  .rt-head { padding: 24px 12px 4px; }
  .rt-head h1 { font-size: 40px; }
  .rt-body { padding: 0; gap: 16px; }
  .rt-card { padding: 24px 24px 26px; border-radius: 26px; background: #fff; border: 0; box-shadow: 0 12px 30px rgba(30, 36, 60, .06); }
  .rt-board { padding-bottom: 14px; }
  .two.tab > .n1 { display: none; }
  .two.tab > .n2 { display: inline; }
  /* the key a line of its own under the note */
  .rt-card > .rt-key, .rt-dist > .rt-key { grid-column: 1 / -1; grid-row: auto; order: 0; align-self: auto; }

  /* the rating as cards: the name and the rating, the spread, four numbers with their names */
  .rt-rating { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--half), auto); grid-auto-flow: column; column-gap: 28px; }
  .rt-r.head { display: none; }
  .rt-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; height: auto; padding: 12px 0; }
  .rt-r:not(.head):hover { background: none; }
  .rt-r .rt-rank { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .rt-r .rt-name { flex: 1; margin: 0 4px; font-size: 14px; }
  .rt-score { flex: none; }
  .rt-score b { font-size: 14px; }
  .rt-score small { font-size: 11px; }
  .rt-plot { flex: 0 0 calc(100% - 12px); height: 14px; margin: 0 6px; }
  .rt-plot .bar { top: 4px; }
  .rt-plot .dot { top: 1px; }
  .rt-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 10px; background: rgba(30, 36, 60, .04); text-align: left; white-space: normal; }
  /* the level takes more room: its best one is written beside it */
  .rt-stat.lv { flex-grow: 1.35; }
  .rt-stat > small { display: block; font-size: 10.5px; line-height: 13px; color: var(--muted); }
  .rt-stat b, .rt-stat.kd b { font: 700 12.5px/16px var(--f-mono); }
  .rt-stat b small { font: 400 11px/16px var(--f-mono); }

  /* heat tables scroll sideways under the names, which stay */
  .rt-scroll { overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding-right: 24px; }
  .rt-scroll::-webkit-scrollbar { display: none; }
  .rt-heat, .rt-heat.slim { --name: 174px; width: max-content; min-width: 100%; }
  .rt-hr { grid-template-columns: var(--name) repeat(var(--n), minmax(46px, 1fr)); }
  .rt-heat .rt-who { position: sticky; left: 0; z-index: 1; padding-left: 24px; background: #fff; box-shadow: 3px 0 0 #fff; }
  .rt-wide.over .rt-hint { display: flex; }
  .rt-more .rt-scroll { padding-left: 24px; }

  .rt-w { grid-template-columns: 143px minmax(0, 1fr) 64px; }
}

/* too narrow for two columns of the rating's cards: their names would be cut */
@media (max-width: 759px) {
  .rt-rating { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

@media (max-width: 640px) {
  .rt { padding: 12px 12px 40px; gap: 14px; }
  .rt-head { padding: 16px 8px 2px; gap: 10px; }
  .rt-head h1 { font-size: 30px; line-height: 1.1; }
  .rt-setup { font-size: 11.5px; }
  .rt-body { gap: 14px; }
  .rt-card { gap: 12px; padding: 20px 16px; border-radius: 24px; }
  .rt-board { gap: 10px; padding-bottom: 10px; }
  .rt-cap { gap: 12px; }
  .rt-board .rt-cap { gap: 10px; }
  .rt-cap h2 { font-size: 19px; }
  .rt-note { font-size: 13px; }
  .two.phone > .n1 { display: none; }
  .two.phone > .n2 { display: inline; }
  /* the key across the card: no room under it for its middle's number, the tick says it */
  .rt-card > .rt-key { gap: 8px; font-size: 11.5px; line-height: 14px; }
  .rt-card > .rt-key .rt-key-bar { flex: 1 1 auto; width: auto; height: 8px; }
  .rt-key-bar em { display: none; }


  /* the three tables of kills for a death: one at a time, the tabs over it */
  .rt-tabs { display: flex; }
  .rt-away { display: none; }
  .rt-duo { display: contents; }
  .rt-late { order: 1; }

  .rt-scroll { margin: 0 -16px; padding-right: 16px; }
  .rt-heat, .rt-heat.slim { --name: 144px; }
  .rt-hr { grid-template-columns: var(--name) repeat(var(--n), minmax(var(--cell), 1fr)); height: 34px; }
  .rt-hr.head { height: 24px; font-size: 10.5px; }
  .rt-heat .rt-who { gap: 6px; padding: 0 6px 0 16px; }
  .rt-heat .rt-who .rt-name { font-size: 12px; }
  .rt-heat .rt-rank { width: 20px; height: 20px; border-radius: 6px; font-size: 9.5px; }
  .rt-cell { border-radius: 7px; font-size: 11px; }
  .rt-more .rt-scroll { padding-left: 16px; }

  .rt-legend .rt-chip { gap: 7px; height: 30px; padding: 0 10px 0 9px; font-size: 12px; }
  .rt-chip i { width: 9px; height: 9px; }

  .rt-gkey { gap: 6px 12px; }
  .rt-gkey span { gap: 6px; font-size: 11.5px; }
  .rt-gkey i { width: 10px; height: 10px; border-radius: 3px; }
  .rt-stacks { gap: 10px; }
  .rt-w { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who total' 'bar bar'; gap: 5px 8px; height: auto; }
  .rt-w .rt-who { grid-area: who; gap: 8px; }
  .rt-w .rt-rank { width: 20px; height: 20px; border-radius: 6px; font-size: 9.5px; }
  .rt-w .rt-name { font-size: 12.5px; }
  .rt-stack { grid-area: bar; height: 22px; border-radius: 7px; }
  .rt-seg { font-size: 10px; }
  .rt-seg::after { content: attr(data-tight); }
  .rt-total { grid-area: total; font-size: 11.5px; }
}