/* Rankings and comparison extend Ropeak's existing light and dark surfaces. */
/* Top Groups and News share the dashboard grid below Top Games and Trending. */
.home-second {
  margin-top:20px
}

/* Square group icons, as wide as the game thumbnails above at every size. */
.groups-home .game-thumbnail {
  height:auto;
  aspect-ratio:1;
  border-radius:10px
}

.game-button {
  text-decoration:none;
  color:inherit
}

.red {
  color:var(--red,#ff123b)
}

.ranking-switch {
  display:flex;
  background:var(--segment-track);
  padding:4px;
  border:1px solid var(--control-edge);
  border-radius:var(--radius-control)
}

.ranking-switch a {
  padding:10px 20px;
  text-decoration:none;
  color:var(--text-3);
  font-size:14px;
  font-weight:500;
  border-radius:var(--radius-control);
  transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)
}

.ranking-switch a:hover {
  color:var(--ink)
}

.ranking-switch a[aria-current=page] {
  background:var(--red);
  color:white;
  box-shadow:inset 0 1px 0 #ffffff2e
}

.rankings-panel {
  padding:24px
}

.rankings-toolbar {
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between
}

.rankings-toolbar .search-input {
  max-width:420px;
  width:100%
}

.rankings-toolbar input {
  width:100%;
  font-size:16px
}

.ranking-status {
  font-size:14px;
  line-height:1.6;
  color:var(--muted,#667894);
  margin:18px 0
}

/* A late list's "Delayed snapshot from <time>." or "Earning positions are delayed.": in the line under the table, at its
   right end, where the "Updated" time stood. Empty, it and its line take no room. */
.ranking-late {
  margin-left:auto
}

.rankings-table {
  min-width:720px
}

.rankings-table td {
  padding-block:15px
}

.rankings-table .game-button {
  max-width:none;
  gap:15px
}

.ranking-icon {
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0
}

.ranking-name {
  font-size:15px;
  white-space:normal;
  line-height:1.5;
  max-width:420px
}

.ranking-name small {
  display:block;
  color:var(--muted,#71819c);
  font-size:13px;
  font-weight:400
}

.rank-observed {
  font-size:14px;
  color:var(--muted,#71819c)
}

.compare-results {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px
}

.compare-option {
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:12px;
  border:1px solid var(--line,#e3eaf5);
  border-radius:12px;
  background:var(--surface,#fff);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  min-width:0
}

.compare-option:hover,.compare-option[aria-pressed=true] {
  border-color:#ff3159;
  background:#ff31590a
}

.compare-option img {
  border-radius:9px;
  object-fit:cover;
  flex-shrink:0
}

.compare-option>span:first-of-type {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:600
}

.compare-option small {
  display:block;
  font-size:12px;
  color:var(--muted,#71819c);
  margin-top:4px;
  font-weight:400
}

.comparison-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:28px
}

.comparison-controls .metric-tabs {
  margin:0
}

.comparison-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}

.comparison-pane {
  padding:26px;
  border-top:3px solid #1682ff;
  min-width:0
}

.comparison-secondary {
  border-top-color:#ff3159
}

.comparison-identity {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:var(--ink);
  min-height:94px
}

.comparison-identity img {
  border-radius:15px;
  object-fit:cover;
  flex-shrink:0
}

.comparison-identity span {
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  color:#368eeb
}

.comparison-secondary .comparison-identity span {
  color:#ff5175
}

.comparison-identity h2 {
  font-size:22px;
  line-height:1.3;
  letter-spacing:-.6px;
  margin:6px 0;
  overflow-wrap:anywhere
}

.comparison-identity p {
  margin:0;
  color:var(--muted,#71819c);
  font-size:14px
}

.compare-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:26px 0 18px;
  gap:22px 15px
}

.compare-stat-grid dt {
  font-size:13px;
  color:var(--muted,#71819c);
  line-height:1.5
}

.compare-stat-grid dd {
  margin:7px 0 0;
  font-size:24px;
  font-weight:750;
  letter-spacing:-.7px;
  font-variant-numeric:tabular-nums
}

.chart-footnote {
  font-size:13px;
  line-height:1.6;
  color:var(--muted,#71819c)
}

.compare-chart-title {
  font-size:17px;
  margin-top:28px
}

.comparison-pane .history-empty {
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.comparison-pane .history-svg {
  min-height:180px
}

.comparison-pane>.text-link {
  display:inline-block;
  margin-top:20px
}

.group-stat-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.groups-home .panel-heading {
  gap:20px
}

/* Full-width Top Groups (980px and below) keeps its columns readable by scrolling. */
@media(max-width:980px) {
  .groups-home .games-table {
    min-width:580px
  }
}

@media(max-width:1000px) {
  .compare-results {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .comparison-pane {
    padding:20px
  }
  .compare-stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .compare-stat-grid dd {
    font-size:22px
  }
  .comparison-identity h2 {
    font-size:19px
  }
}

@media(max-width:760px) {
  .comparison-grid {
    grid-template-columns:1fr
  }
  .comparison-controls {
    align-items:flex-start;
    flex-direction:column;
    gap:14px
  }
  .comparison-controls .metric-tabs {
    width:100%
  }
  .rankings-panel {
    padding:18px 14px
  }
  .rankings-toolbar {
    gap:10px
  }
  .rankings-toolbar .button {
    padding:10px
  }
  .compare-option {
    padding:10px;
    gap:7px
  }
  .compare-option img {
    width:30px;
    height:30px
  }
  .compare-stat-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .comparison-pane .history-svg {
    min-height:unset
  }
  .group-stat-grid {
    grid-template-columns:1fr
  }
  .groups-home .panel-heading h2 {
    font-size:18px
  }
  .groups-home .panel-heading {
    align-items:center
  }
  .groups-home .button {
    white-space:nowrap
  }
  .ranking-switch {
    align-self:flex-start
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
}
/* Homepage panels share an inset and use the full ranking area. */
.dashboard-grid {
  align-items:stretch
}

.dashboard-grid .games-panel {
  padding-bottom:16px
}

.dashboard-grid .sidebar {
  display:flex;
  flex-direction:column;
  max-height:500px;
  min-width:0
}

.dashboard-grid .movers-panel {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding-bottom:16px
}

.dashboard-grid .movers-list {
  display:flex;
  flex-direction:column;
  flex:1
}

.dashboard-grid .movers-list li {
  display:flex;
  flex:1;
  min-height:52px
}

.dashboard-grid .mover-button {
  height:auto;
  min-height:52px;
  font-size:14px;
  padding-block:8px
}

.groups-home {
  padding:0 20px 16px
}

.groups-home .table-scroll {
  overflow-x:auto
}

/* Top Games' column starts, so names and numbers line up with the panel above. */
.groups-home .games-table th:nth-child(1) {
  width:8%
}

.groups-home .games-table th:nth-child(2) {
  width:37%
}

.groups-home .games-table th:nth-child(3) {
  width:20%
}

.groups-home .games-table th:nth-child(4) {
  width:35%
}

/* News beside Top Groups: the latest articles as quiet rows. */
.news-home {
  padding:0 20px 16px;
  display:flex;
  flex-direction:column;
  flex:1
}

.news-home-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px
}

.news-row {
  display:grid;
  gap:4px;
  padding:11px 12px;
  border-radius:var(--radius-row);
  color:inherit;
  text-decoration:none;
  transition:background-color var(--t-fast) var(--ease-out)
}

.news-row:hover {
  background:var(--row-hover)
}

.news-row:focus-visible {
  background:var(--row-focus)
}

.news-row-meta {
  font-size:12px;
  color:var(--text-3)
}

.news-row strong {
  font-size:14px;
  font-weight:550;
  line-height:1.35;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.groups-home .games-table th:nth-child(4),.groups-home .games-table td:nth-child(4) {
  display:table-cell
}

@media(max-width:1220px) {
  .groups-home {
    padding-inline:14px
  }
}

@media(max-width:980px) {
  .groups-home {
    padding-inline:20px
  }
  .dashboard-grid .sidebar {
    max-height:none
  }
}

@media(max-width:680px) {
  .groups-home {
    padding:0 12px 12px
  }
  /* Phones: Top Groups fits the screen like Top Games above it (rank, group, members); it was 580px wide in a
     304px box and cut the members number in half. */
  .groups-home .games-table {
    min-width:0
  }
  .groups-home .games-table th:nth-child(4),.groups-home .games-table td:nth-child(4) {
    display:none
  }
  .groups-home .games-table th:nth-child(2) {
    width:62%
  }
  .groups-home .games-table th:nth-child(3) {
    width:30%
  }
  .dashboard-grid .games-panel {
    padding-bottom:12px
  }
  .dashboard-grid .mover-button .game-thumbnail {
    width:43px;
    height:34px
  }
}
/* Each rankings table owns its columns, independently of the five-column homepage. */
.page-heading.ranking-page-heading {
  align-items:center;
  margin-bottom:20px
}

.page-heading.ranking-page-heading h1 {
  margin-bottom:0
}

.rankings-panel {
  padding:18px 20px
}

.rankings-toolbar {
  margin-bottom:18px
}

.rankings-panel .table-scroll {
  overflow-x:auto;
  max-width:100%
}

.rankings-table {
  min-width:760px
}

.rankings-table th,.rankings-table td {
  padding-left:10px;
  padding-right:10px;
  font-size:14px
}

.rankings-table td {
  height:64px;
  padding-top:10px;
  padding-bottom:10px
}

.rankings-table td:nth-child(4) {
  display:table-cell
}

.rankings-table .game-button {
  gap:12px
}

.rankings-table .ranking-icon {
  width:44px;
  height:44px;
  border-radius:10px
}

.rankings-table .ranking-name {
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.rankings-table .ranking-name small {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.rankings-table.rankings-games th:nth-child(1) {
  width:6%
}

.rankings-table.rankings-games th:nth-child(2) {
  width:40%
}

.rankings-table.rankings-games th:nth-child(3) {
  width:16%
}

.rankings-table.rankings-games th:nth-child(4) {
  width:14%
}

.rankings-table.rankings-games th:nth-child(5) {
  width:10%
}

.rankings-table.rankings-games th:nth-child(6) {
  width:14%
}

.rankings-table.rankings-groups th:nth-child(1) {
  width:6%
}

.rankings-table.rankings-groups th:nth-child(2) {
  width:38%
}

.rankings-table.rankings-groups th:nth-child(3) {
  width:20%
}

.rankings-table.rankings-groups th:nth-child(4) {
  width:17%
}

.rankings-table.rankings-groups th:nth-child(5) {
  width:19%
}

@media(max-width:760px) {
  .page-heading.ranking-page-heading {
    align-items:flex-start;
    gap:16px
  }
  .rankings-panel {
    padding:14px 12px
  }
  .rankings-toolbar {
    margin-bottom:14px
  }
  .rankings-table th,.rankings-table td {
    padding-left:8px;
    padding-right:8px
  }
}
/* Summary cards. The linked card's edge brightens on interaction; it never lifts. */
@media(max-width:760px) {
  .stats-grid .stat-card {
    gap:14px;
    padding:20px;
    min-height:108px
  }
  .stats-grid .stat-number {
    font-size:34px
  }
}

@media(max-width:680px) {
  .stats-grid {
    grid-template-columns:1fr
  }
  .stats-grid .stat-number {
    font-size:36px
  }
}

.stat-link {
  color:inherit;
  text-decoration:none;
  transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)
}

.stat-link:hover {
  border-color:var(--glass-edge-strong)
}
/* One compact analysis view inside Charts, using the existing Ropeak surfaces. */

.efficiency-content {
  min-height:450px
}

.efficiency-content>.ropeak-loading {
  min-height:450px
}

.efficiency-table-wrap {
  max-height:640px;
  overflow:auto
}

.efficiency-table {
  table-layout:fixed;
  min-width:900px
}

.efficiency-table thead {
  position:sticky;
  top:0;
  background:var(--surface);
  z-index:1
}

.efficiency-table th:nth-child(1) {
  width:5%
}

.efficiency-table th:nth-child(2) {
  width:35%
}

.efficiency-table th:nth-child(3) {
  width:14%
}

.efficiency-table th:nth-child(4) {
  width:14%
}

.efficiency-table th:nth-child(5) {
  width:17%
}

.efficiency-table th:nth-child(6) {
  width:15%
}

.efficiency-table th button {
  white-space:normal;
  text-align:left;
  line-height:1.4
}

.efficiency-table td {
  font-variant-numeric:tabular-nums
}

.efficiency-table td:nth-child(5) {
  display:table-cell
}

.efficiency-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:380px;
  text-align:center;
  padding:30px 16px
}

.efficiency-empty h2 {
  font-size:24px;
  max-width:500px;
  line-height:1.3;
  margin:0
}

.efficiency-empty p {
  max-width:460px;
  color:var(--muted);
  line-height:1.6;
  margin:0
}

@media(max-width:480px) {

  .efficiency-empty h2 {
    font-size:21px
  }
  .efficiency-table-wrap {
    max-height:520px
  }
}

.stats-dialog {
  width:min(700px,calc(100% - 32px));
  max-height:85dvh;
  border:1px solid var(--glass-edge);
  border-radius:20px;
  padding:0;
  background:var(--dialog-fill);
  color:var(--ink)
}

.stats-dialog .dialog-inner {
  padding:32px
}

.stats-dialog h2 {
  padding-right:40px;
  margin:0 0 24px
}

.stats-dialog h3 {
  margin:0 0 12px;
  font-size:16px
}

.stats-dialog p {
  line-height:1.65
}

.game-meta button.text-link {
  border:0;
  background:none;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer
}

/* Keep the earnings control and six columns inside the rankings surface. */
.ranking-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}

.ranking-mode select {
  font:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  background:var(--control-fill);
  border:1px solid var(--control-edge);
  border-radius:var(--radius-control);
  min-height:42px;
  padding:9px 34px 9px 14px;
  cursor:pointer
}

.rankings-table.rankings-games {
  min-width:900px
}

.rankings-table.rankings-games th:nth-child(1) {
  width:5%
}

.rankings-table.rankings-games th:nth-child(2) {
  width:39%
}

.rankings-table.rankings-games th:nth-child(3) {
  width:16%
}

.rankings-table.rankings-games th:nth-child(4) {
  width:12%
}

.rankings-table.rankings-games th:nth-child(5) {
  width:10%
}

.rankings-table.rankings-games th:nth-child(6) {
  width:18%
}

.rankings-table.rankings-games th:nth-child(6) button {
  white-space:normal;
  line-height:1.45;
  text-align:left
}

/* Phones: a ranking fits the screen the way Home's Top Games table does, so no number hides in a sideways scroll.
   Beside the rank and the name stay the players column and the money column (games, efficiency) or the members
   column (groups); the other two columns are left out. */
@media(max-width:680px) {
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) {
    min-width:0
  }
  .rankings-games :is(th,td):is(:nth-child(4),:nth-child(5)),.rankings-groups :is(th,td):nth-child(n+4),.efficiency-table :is(th,td):is(:nth-child(4),:nth-child(6)) {
    display:none
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) :is(th,td) {
    padding-left:5px;
    padding-right:5px;
    font-size:13px
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) th {
    font-size:10px
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) th:nth-child(1) {
    width:11%
  }
  .rankings-table:is(.rankings-games,.efficiency-table) th:nth-child(2) {
    width:39%
  }
  .rankings-table:is(.rankings-games,.efficiency-table) th:nth-child(3) {
    width:22%
  }
  .rankings-table.rankings-games th:nth-child(6),.rankings-table.efficiency-table th:nth-child(5) {
    width:28%
  }
  .rankings-table.rankings-groups th:nth-child(2) {
    width:57%
  }
  .rankings-table.rankings-groups th:nth-child(3) {
    width:32%
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) .ranking-icon {
    width:32px;
    height:32px
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) .game-button {
    gap:8px
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) .ranking-name {
    font-size:12px
  }
  .rankings-table:is(.rankings-games,.rankings-groups,.efficiency-table) .ranking-name small {
    font-size:11px
  }
  .rankings-table td.revenue-cell,.rankings-table.efficiency-table td:nth-child(n+3),.rankings-table.efficiency-table .revenue-value {
    font-size:12px
  }
}

.revenue-cell {
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.revenue-value {
  font:inherit;
  font-weight:650;
  border:0;
  border-bottom:1px dotted currentColor;
  padding:3px 0;
  background:none;
  color:var(--green);
  cursor:pointer
}

.revenue-value:hover {
  border-bottom-style:solid
}

/* Ropeak badges: the total, then the rarest stickers the game shows, smaller than on its own page. */
.badge-cell {
  white-space:nowrap
}

.badge-total {
  display:inline-block;
  min-width:1.4em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  vertical-align:middle
}

.badge-cell .ranking-badges {
  display:inline-flex;
  flex-wrap:nowrap;
  gap:4px;
  margin-left:8px;
  vertical-align:middle
}

.ranking-badges .game-badge {
  --badge-size:30px;
  border-radius:9px
}

/* A tip opens leftwards from its sticker's right edge, so a long genre name never passes the table's edge. */
.ranking-badges .game-badge-tip {
  left:auto;
  right:0;
  transform:translateY(4px)
}

.ranking-badges .game-badge:hover .game-badge-tip,.ranking-badges .game-badge:focus-visible .game-badge-tip {
  transform:none
}

.revenue-dialog {
  width:min(640px,calc(100% - 32px));
  max-height:85vh;
  padding:0;
  color:var(--ink);
  background:var(--dialog-fill);
  border:1px solid var(--glass-edge);
  border-radius:20px;
  box-shadow:var(--glass-highlight),0 40px 100px -30px #0a142e66
}

.revenue-dialog-inner {
  padding:30px;
  position:relative;
  font-size:15px;
  line-height:1.7
}

.revenue-dialog h2 {
  font-size:26px;
  line-height:1.2;
  padding-right:32px;
  letter-spacing:-.7px;
  margin:0 0 24px
}

.revenue-dialog h3 {
  font-size:17px;
  margin:24px 0 8px;
  color:var(--ink)
}

.revenue-dialog p,.revenue-dialog li {
  color:var(--muted,#71819c)
}

.revenue-dialog a {
  color:var(--ink);
  text-underline-offset:3px
}

.revenue-dialog li+li {
  margin-top:8px
}

.revenue-dialog-close {
  position:absolute;
  right:20px;
  top:19px
}

.revenue-example {
  border:1px solid var(--line,#dfe7f3);
  border-radius:12px;
  padding:18px;
  margin-bottom:22px
}

.revenue-example h3 {
  margin:0 0 12px
}

.revenue-example strong {
  font-size:28px;
  line-height:1.3
}

.revenue-example p {
  margin:10px 0 0;
  font-size:14px
}

.revenue-formula summary {
  cursor:pointer;
  font-weight:650;
  color:var(--ink)
}

.revenue-value:focus-visible,.ranking-mode select:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:4px
}

@media(max-width:680px) {
  .rankings-toolbar {
    flex-wrap:wrap
  }
  /* 16px: iOS Safari zooms the page, and stays zoomed, when a select with smaller text is opened. */
  .ranking-mode select {
    font-size:16px
  }
  .rankings-toolbar .search-input {
    max-width:none
  }
  .ranking-actions {
    width:100%;
    justify-content:space-between
  }
  .revenue-dialog-inner {
    padding:24px 20px
  }
  .revenue-dialog h2 {
    font-size:23px
  }
  /* The badges column keeps its total and the two rarest stickers, a little apart from a seven-figure CCU. */
  .rankings-table.rankings-games td.badge-cell {
    padding-left:10px
  }
  .badge-cell .ranking-badges {
    gap:3px;
    margin-left:4px
  }
  .ranking-badges .game-badge {
    --badge-size:24px;
    border-radius:7px
  }
  .ranking-badges li:nth-child(n+3) {
    display:none
  }
}
.comparison-controls {
  justify-content:flex-end;
  margin:0 0 18px
}

.comparison-pane {
  display:flex;
  flex-direction:column
}

.comparison-pane .compare-results {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.pane-picker-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:24px
}

.pane-picker-heading h2 {
  font-size:23px;
  margin:0
}

.comparison-pane .picker-status {
  min-height:22px;
  margin:14px 0
}

.comparison-pane .swap-game {
  display:flex;
  align-self:center;
  margin-top:auto;
  min-width:160px;
  justify-content:center
}

.comparison-pane [data-chart] {
  margin-bottom:26px
}

.comparison-pane .comparison-identity {
  min-height:80px
}

.comparison-pane .input-row {
  flex-wrap:wrap
}

.comparison-pane .input-row input {
  flex:1;
  min-width:180px
}

#compare-status:empty {
  display:none
}

@media(max-width:480px) {
  .comparison-pane .compare-results {
    grid-template-columns:1fr
  }
  .comparison-controls {
    align-items:flex-end
  }
  .comparison-pane .input-row {
    flex-direction:column
  }
}

/* The compare page with up to four games (compare.js). Cards three and four have their own colours, the ones their
   lines are drawn in. A card that is offered and holds no game yet is one "+" button with a dashed edge. A third or
   fourth game's card has Remove beside Swap Game. */
.comparison-third {
  border-top-color:#169152
}

.comparison-fourth {
  border-top-color:#b45dc2
}

.comparison-pane[data-state=add] {
  padding:0;
  border:0;
  background:none;
  box-shadow:none
}

.comparison-add {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:190px;
  padding:26px;
  border:2px dashed var(--control-edge-hover);
  border-radius:var(--radius);
  background:transparent;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)
}

.comparison-add:hover {
  background:var(--control-fill);
  border-color:var(--muted-light);
  color:var(--ink)
}

.comparison-add span {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid var(--control-edge-hover);
  border-radius:50%;
  background:var(--control-fill);
  color:var(--ink);
  font-size:30px;
  font-weight:400;
  line-height:1
}

.comparison-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:auto
}

.comparison-actions .swap-game {
  margin-top:0
}

@media(max-width:760px) {
  .comparison-add {
    min-height:120px
  }
}

/* The CCU table's figure columns (1h, Trend 14d, Peak 7d, Avg 14d, Rank 24h after Live CCU; public/rankings.js FIGURES).
   It is wider than the other modes' table and scrolls sideways under its width as they do: 1,100px, so a 1280px window
   holds it whole, each column wide enough for an eight-digit count. */
.rankings-table.rankings-figures {
  min-width:1100px
}

.rankings-table.rankings-figures th:nth-child(1) {
  width:4.4%
}

.rankings-table.rankings-figures th:nth-child(2) {
  width:23.7%
}

.rankings-table.rankings-figures th:nth-child(3) {
  width:8.6%
}

.rankings-table.rankings-figures th:nth-child(4) {
  width:6.7%
}

.rankings-table.rankings-figures th:nth-child(5) {
  width:9%
}

.rankings-table.rankings-figures th:nth-child(6) {
  width:8.2%
}

.rankings-table.rankings-figures th:nth-child(7) {
  width:8.2%
}

.rankings-table.rankings-figures th:nth-child(8) {
  width:7.2%
}

.rankings-table.rankings-figures th:nth-child(9) {
  width:6%
}

.rankings-table.rankings-figures th:nth-child(10) {
  width:6%
}

.rankings-table.rankings-figures th:nth-child(11) {
  width:12%
}

.rankings-table.rankings-figures th:nth-child(11) button {
  white-space:normal;
  line-height:1.45;
  text-align:left
}

.rankings-figures .figure-cell {
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.rankings-figures .trend-line {
  display:block;
  width:86px;
  height:28px;
  overflow:visible
}

.rankings-figures .trend-line path {
  fill:none;
  stroke:var(--blue);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.rankings-figures .trend-line circle {
  fill:var(--blue)
}

/* Phones: the figure columns are left out with Visits and Rating, and the four columns the other modes keep share the
   width as theirs do (charts-table-phones.test.js). */
@media(max-width:680px) {
  .rankings-table.rankings-figures {
    min-width:0
  }
  .rankings-figures :is(th,td):is(:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)) {
    display:none
  }
  .rankings-table.rankings-figures th:nth-child(1) {
    width:11%
  }
  .rankings-table.rankings-figures th:nth-child(2) {
    width:39%
  }
  .rankings-table.rankings-figures th:nth-child(3) {
    width:22%
  }
  .rankings-table.rankings-figures th:nth-child(11) {
    width:28%
  }
  #rank-csv {
    display:none
  }
}