/* Menu leaderboard (js/views/leaderboard.js): the frame, pills and fields of
   the in-game settings (#option_in_game), the close button of the menu boxes,
   and icons made of the mode art of the old leaderboard. The rows are the
   slots of the controls list, tight enough for 1000 players. */
.starve-leaderboard {
  --sl-columns:52px minmax(0,1fr) 52px 84px 72px 120px;
  /* A line and the gap under it (leaderboard.js places the lines with it) */
  --sl-pitch:31px;
  position:fixed;
  z-index:90;
  top:96px;
  left:50%;
  /* Clear of the ad box of the menu (#trevda, 320px from the right), down to
     the width of the old canvas leaderboard */
  width:min(720px,max(613px,calc(100vw - 680px)),calc(100vw - 36px));
  height:max(300px,min(680px,calc(100vh - 136px)));
  height:max(300px,min(680px,calc(100dvh - 136px)));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  background:#3A2A0D;
  border:6px solid #513810;
  border-radius:14px;
  box-shadow:-5px 6px 0 #302009;
  box-sizing:border-box;
  color:#fff;
  font:normal 20px/1.3 "Baloo Paaji","Baloo Paaji 2","Trebuchet MS",sans-serif;
  text-shadow:0 2px 0 #281806;
  text-align:left;
  color-scheme:dark;
  cursor:url(../img/cursor0.png),auto;
  -webkit-user-select:none;
  user-select:none;
}

.starve-leaderboard[hidden],.starve-leaderboard [hidden] {
  display:none!important;
}

.starve-leaderboard:focus {
  outline:none;
}

/* Resets without weight: the classes below always win */
:where(.starve-leaderboard) *,:where(.starve-leaderboard) *::before,:where(.starve-leaderboard) *::after {
  box-sizing:border-box;
}

:where(.starve-leaderboard) :where(h2,p) {
  margin:0;
  padding:0;
  font-weight:normal;
}

:where(.starve-leaderboard) :where(b,i,small) {
  font-weight:normal;
  font-style:normal;
}

:where(.starve-leaderboard) :where(button,select,input) {
  margin:0;
  font:inherit;
  color:inherit;
  text-shadow:inherit;
}

:where(.starve-leaderboard) :where(button,select),.sl-head [data-sort] {
  cursor:url(../img/cursor1.png),pointer;
}

:where(.starve-leaderboard) button {
  touch-action:manipulation;
}

.starve-leaderboard :focus-visible {
  outline:3px solid #E3B05A;
  outline-offset:3px;
}

/* The sprites of the close button: out, in when hovered, click when pressed */
.sl-sprite {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

.sl-sprite img {
  display:none;
  width:100%;
  height:100%;
}

.sl-sprite .sl-sprite-out {
  display:block;
}

.sl-close:is(:hover,:focus-visible) .sl-sprite-out {
  display:none;
}

.sl-close:is(:hover,:focus-visible) .sl-sprite-in {
  display:block;
}

.sl-close:active .sl-sprite-out,.sl-close:active .sl-sprite-in {
  display:none;
}

.sl-close:active .sl-sprite-click {
  display:block;
}

.sl-body {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:14px 20px 14px;
}

/* The title: the fighters of the LEADERBOARD button of the menu, and the close
   button of the menu boxes */
.sl-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding-right:36px;
}

.sl-emblem {
  position:relative;
  flex:none;
  width:74px;
  height:40px;
  overflow:hidden;
}

.sl-emblem img {
  position:absolute;
  top:-12px;
  left:-18px;
  width:116px;
  max-width:none;
  height:auto;
}

.sl-title {
  flex:1;
  min-width:0;
}

.sl-title h2 {
  font-size:27px;
  line-height:1.05;
  letter-spacing:1px;
  color:#EFE5B1;
  text-shadow:0 3px 0 #281806;
}

.sl-title p {
  margin-top:3px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  color:#B38A45;
  text-shadow:none;
}

/* In the top right corner of the frame, the title kept clear of it */
.sl-close {
  position:absolute;
  z-index:1;
  top:-6px;
  right:-6px;
  width:36px;
  height:40px;
  padding:0;
  border:0;
  background:transparent;
  /* Over the border, rounded like the outer corner of the frame */
  border-radius:0 14px 0 10px;
  overflow:hidden;
}

/* The game mode and the season: the fields of the settings */
.sl-pickers {
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-bottom:12px;
}

.sl-picker {
  position:relative;
  flex:0 1 232px;
  min-width:0;
}

.sl-mode,.sl-season {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  height:42px;
  padding:0 34px 0 5px;
  border:2px solid #755219;
  border-radius:7px;
  background:#50380F;
  box-shadow:0 4px #302009;
  text-align:left;
}

.sl-mode:hover,.sl-season:hover {
  background:#5C3F11;
}

.sl-mode[aria-expanded="true"] {
  border-color:#E3B05A;
}

/* The icon of a mode (img/leaderboard-mode-*.png, drawn at 2x): the art of
   the old leaderboard, lifted when pointed */
.sl-art {
  flex:none;
  width:52px;
  height:32px;
}

.sl-icon {
  display:block;
  width:100%;
  height:100%;
  transition:transform .12s ease-out;
}

:is(.sl-mode,.sl-option):hover .sl-icon {
  transform:translateY(-2px) scale(1.06);
}

.sl-picked {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.sl-picked small,.sl-season small {
  font-size:10px;
  line-height:1.2;
  letter-spacing:1.3px;
  color:#B38A45;
  text-shadow:none;
}

.sl-picked b {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:16px;
  line-height:1.25;
  color:#fff;
}

.sl-chevron {
  position:absolute;
  top:50%;
  right:12px;
  margin-top:-3px;
  border:6px solid transparent;
  border-bottom:0;
  border-top-color:#E3B05A;
  pointer-events:none;
}

.sl-mode[aria-expanded="true"] .sl-chevron {
  transform:rotate(180deg);
}

.sl-options {
  position:absolute;
  z-index:5;
  top:calc(100% + 9px);
  left:0;
  min-width:100%;
  padding:6px;
  border:3px solid #755219;
  border-radius:9px;
  background:#3A2A0D;
  box-shadow:0 6px 0 #221605,0 14px 28px rgba(20,12,3,.55);
}

.sl-option {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:44px;
  padding:4px 10px 4px 5px;
  border:0;
  border-radius:6px;
  background:transparent;
  text-align:left;
}

.sl-option + .sl-option {
  margin-top:3px;
}

.sl-option b {
  flex:1;
  white-space:nowrap;
  font-size:16px;
  color:#EADBBB;
}

.sl-option:hover {
  background:#4A340F;
}

.sl-option:focus-visible {
  outline:2px solid #E3B05A;
  outline-offset:0;
  background:#4A340F;
}

.sl-option[aria-selected="true"] {
  background:#513810;
}

.sl-option[aria-selected="true"] b {
  color:#fff;
}

.sl-check {
  width:19px;
  height:16px;
  visibility:hidden;
}

.sl-option[aria-selected="true"] .sl-check {
  visibility:visible;
}

.sl-season {
  flex:0 1 210px;
  min-width:0;
  padding:0;
}

.sl-season small {
  position:absolute;
  top:4px;
  left:12px;
  pointer-events:none;
}

.sl-season select {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:14px 34px 0 12px;
  border:0;
  border-radius:5px;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  font-size:16px;
  color:#fff;
}

.sl-season select option {
  background:#3A2A0D;
  color:#fff;
}

.sl-season select:focus-visible {
  outline:none;
}

.sl-season:has(select:focus-visible) {
  outline:3px solid #E3B05A;
  outline-offset:3px;
}

/* The period and the ranking: the pills of the settings (LOW / HIGH) */
.sl-filters {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 14px;
  margin-bottom:12px;
}

.sl-filter {
  display:flex;
  align-items:center;
  gap:6px;
}

.sl-label {
  margin-right:2px;
  font-size:11px;
  letter-spacing:1.3px;
  color:#B38A45;
  text-shadow:none;
  white-space:nowrap;
}

.sl-pill {
  min-width:0;
  height:30px;
  padding:3px 10px 0;
  border:2px solid #755219;
  border-radius:7px;
  background:transparent;
  box-shadow:0 5px #302009;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

.sl-pill:hover {
  background:#755219;
}

.sl-pill[aria-pressed="true"],.sl-pill[aria-pressed="true"]:hover {
  background:#B56D18;
}

.sl-pill:active {
  transform:translateY(3px);
  box-shadow:0 2px #302009;
}

.sl-pill[aria-disabled="true"] {
  opacity:.35;
  cursor:url(../img/cursor0.png),auto;
}

.sl-pill[aria-disabled="true"]:hover {
  background:transparent;
}

.sl-pill[aria-disabled="true"]:active {
  transform:none;
  box-shadow:0 5px #302009;
}

/* The board: the titles stay on top while the lines scroll */
.sl-board {
  position:relative;
  flex:1;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 4px 4px 0;
  scrollbar-width:thin;
  scrollbar-color:#805819 #513810;
}

.sl-board::-webkit-scrollbar {
  width:12px;
}

.sl-board::-webkit-scrollbar-track {
  background:#513810;
  border-radius:50px;
}

.sl-board::-webkit-scrollbar-thumb {
  background:#805819;
  border:3px solid #513810;
  border-radius:50px;
}

.sl-board:focus-visible {
  outline-offset:-3px;
}

.sl-row {
  display:grid;
  grid-template-columns:var(--sl-columns);
  align-items:center;
  min-height:28px;
  margin-bottom:3px;
  padding-top:2px;
  border-radius:5px;
  background:#4A340F;
  box-shadow:0 2px #302009;
}

/* Only the lines in view are in the page, each one at its place on the board */
.sl-rows {
  position:relative;
}

.sl-rows .sl-row {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:calc(var(--sl-pitch) - 3px);
  min-height:0;
  margin:0;
}

.sl-rows .sl-bones {
  position:static;
  margin-bottom:3px;
}

.sl-rows .sl-row:hover {
  background:#5C3F11;
}

.sl-cell {
  min-width:0;
  padding:0 8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:right;
  font-size:15px;
  color:#EADBBB;
}

.sl-col-rank {
  padding:0 4px;
  text-align:center;
  text-overflow:clip;
}

.sl-col-name {
  text-align:left;
}

.sl-col-level {
  text-align:center;
  font-size:13px;
  color:#C49650;
}

/* The titles of the columns stay on top: the sticky box is their group, the
   one parent they could not leave */
.sl-thead {
  position:sticky;
  top:0;
  z-index:1;
  padding-bottom:5px;
  background:#3A2A0D;
}

.sl-head {
  min-height:24px;
  margin:0;
  padding-top:3px;
  border-radius:0;
  background:#3A2A0D;
  box-shadow:0 2px #513810;
}

.sl-head .sl-cell {
  font-size:12px;
  letter-spacing:1.3px;
  color:#B38A45;
  text-shadow:none;
}

.sl-head [data-sort]:hover {
  color:#C49650;
}

.sl-head [aria-sort],.sl-head [aria-sort]:hover {
  color:#E3B05A;
}

.sl-head [aria-sort]::after {
  content:"";
  display:inline-block;
  margin-left:5px;
  vertical-align:2px;
  border:5px solid transparent;
  border-bottom:0;
  border-top-color:currentColor;
}

/* The stat of the ranking */
.starve-leaderboard[data-sort="kill"] .sl-rows .sl-col-kill,
.starve-leaderboard[data-sort="time"] .sl-rows .sl-col-time,
.starve-leaderboard[data-sort="score"] .sl-rows .sl-col-score {
  color:#FFE17A;
}

.sl-name {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.sl-name b {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
  color:#fff;
}

.sl-you {
  flex:none;
  padding:2px 5px 0;
  border-radius:4px;
  background:#E3B05A;
  color:#3A2A0D;
  font-size:10px;
  line-height:13px;
  letter-spacing:1px;
  text-shadow:none;
}

.sl-meta {
  display:none;
}

.sl-rank {
  display:inline-block;
  min-width:26px;
  padding:2px 5px 0;
  border-radius:5px;
  font-size:14px;
  line-height:18px;
  color:#EADBBB;
}

.is-top .sl-rank {
  color:#fff;
}

.is-top1 .sl-rank {
  background:#DBB400;
  box-shadow:0 2px #A78A31;
}

.is-top2 .sl-rank {
  background:#A3A79F;
  box-shadow:0 2px #6B6F68;
}

.is-top3 .sl-rank {
  background:#B9692C;
  box-shadow:0 2px #7A4317;
}

.sl-rows .sl-row.is-me,.sl-rows .sl-row.is-me:hover {
  background:#63461A;
  box-shadow:inset 0 0 0 2px #E3B05A,0 2px #302009;
}

.sl-rows .sl-row.is-flash {
  animation:sl-flash 1.4s ease-out;
}

@keyframes sl-flash {
  0%,35% { background:#B56D18; }
  100% { background:#63461A; }
}

/* While the account server answers */
.sl-bones .sl-cell i {
  display:block;
  height:9px;
  border-radius:5px;
  background:#5C4415;
  animation:sl-pulse 1s ease-in-out infinite alternate;
}

.sl-rows .sl-bones:hover {
  background:#4A340F;
}

.sl-bones .sl-col-rank i,.sl-bones .sl-col-level i {
  width:20px;
  margin:auto;
}

.sl-bones .sl-col-name i {
  width:55%;
}

.sl-bones:nth-child(3n+2) .sl-col-name i {
  width:40%;
}

.sl-bones:nth-child(3n) .sl-col-name i {
  width:68%;
}

.sl-bones .sl-col-kill i,.sl-bones .sl-col-time i,.sl-bones .sl-col-score i {
  width:60%;
  margin-left:auto;
}

@keyframes sl-pulse {
  from { opacity:.4; }
  to { opacity:.9; }
}

.sl-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:34px 20px;
  text-align:center;
}

.sl-state b {
  font-size:18px;
  color:#E3B05A;
}

.sl-state span {
  max-width:380px;
  font-size:14px;
  color:#B38A45;
  text-shadow:none;
}

.sl-state .sl-pill {
  margin-top:14px;
}

/* The search: the fields of the settings (TOKEN) */
.sl-footer {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding-top:12px;
  border-top:2px solid #513810;
}

.sl-search {
  position:relative;
  display:flex;
  align-items:center;
  flex:0 1 270px;
  min-width:0;
  height:34px;
  padding:3px 10px 0 33px;
  border:2px solid #513810;
  border-radius:7px;
  background:#2C2009;
  box-shadow:inset 0 3px 0 #1E1606;
  cursor:text;
}

.sl-search:focus-within {
  border-color:#755219;
}

.sl-search svg {
  position:absolute;
  top:8px;
  left:10px;
  width:15px;
  height:15px;
  fill:none;
  stroke:#B38A45;
  stroke-width:2;
  stroke-linecap:round;
}

.sl-search input {
  width:100%;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  font-size:16px;
  color:#fff;
  -webkit-appearance:none;
  appearance:none;
  -webkit-user-select:text;
  user-select:text;
}

.sl-search input::placeholder {
  color:#8E6A30;
  opacity:1;
  text-shadow:none;
}

.sl-search input::-webkit-search-cancel-button,.sl-search input::-webkit-search-decoration {
  -webkit-appearance:none;
  appearance:none;
}

/* The ring goes around the field, not the text */
.sl-search input:focus-visible {
  outline:none;
}

.sl-search:has(input:focus-visible) {
  outline:3px solid #E3B05A;
  outline-offset:2px;
}

.sl-count {
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:right;
  font-size:13px;
  color:#B38A45;
  text-shadow:none;
}

.sl-me {
  flex:none;
}

@media(prefers-reduced-motion:reduce) {
  .sl-bones .sl-cell i,.sl-rows .sl-row.is-flash {
    animation:none;
  }

  .sl-mode[aria-expanded="true"] .sl-chevron,:is(.sl-mode,.sl-option):hover .sl-icon {
    transform:none;
  }
}

@media(max-width:900px) and (min-width:641px) {
  .starve-leaderboard {
    --sl-columns:44px minmax(0,1fr) 44px 74px 62px 108px;
    left:calc(50% + 65px);
    width:min(700px,calc(100vw - 170px));
  }

  .sl-body {
    padding-left:16px;
    padding-right:16px;
  }

  .sl-cell {
    padding:0 6px;
    font-size:14px;
  }

  .sl-filters {
    gap:10px 12px;
  }

  .sl-pill {
    padding:3px 8px 0;
  }
}

@media(max-width:640px) {
  .starve-leaderboard {
    --sl-columns:36px minmax(0,1fr) 92px;
    --sl-pitch:41px;
    top:88px;
    width:calc(100vw - 24px);
    height:max(300px,calc(100vh - 104px));
    height:max(300px,calc(100dvh - 104px));
    border-width:5px;
  }

  .sl-body {
    padding:12px 12px 12px;
  }

  .sl-header {
    gap:9px;
    margin-bottom:10px;
  }

  .sl-emblem {
    width:56px;
    height:30px;
  }

  .sl-emblem img {
    top:-9px;
    left:-14px;
    width:87px;
  }

  .sl-title h2 {
    font-size:22px;
  }

  .sl-title p {
    font-size:11px;
  }

  .sl-close {
    top:-6px;
    right:-6px;
    width:32px;
    height:35px;
  }

  .sl-picker,.sl-season {
    flex:1 1 100%;
  }

  .sl-filters {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .sl-filter .sl-pill {
    flex:1;
    min-width:0;
    padding:3px 4px 0;
    font-size:13px;
  }

  .sl-label {
    width:56px;
    font-size:11px;
  }

  .sl-row {
    min-height:38px;
  }


  .sl-head {
    min-height:24px;
  }

  .sl-cell {
    padding:0 6px;
  }

  .sl-col-rank {
    padding:0 2px;
  }

  /* One stat a line: the one of the ranking, the others under the name */
  .sl-col-level,.sl-col-kill,.sl-col-time,.sl-col-score {
    display:none;
  }

  .starve-leaderboard[data-sort="kill"] .sl-col-kill,
  .starve-leaderboard[data-sort="time"] .sl-col-time,
  .starve-leaderboard[data-sort="score"] .sl-col-score {
    display:block;
  }

  .sl-meta {
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:10.5px;
    line-height:1.3;
    color:#B38A45;
    text-shadow:none;
  }

  .sl-name b {
    font-size:15px;
  }

  .sl-count {
    display:none;
  }

  .sl-search {
    flex:1;
  }
}

@media(max-height:560px) {
  .starve-leaderboard {
    top:34px;
    height:calc(100vh - 48px);
    height:calc(100dvh - 48px);
  }
}