top.css

@media (orientation: portrait) {
  :root {
    font-size: 1.5vh;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}

img {
  min-height: 1em;
  max-height: 1em;
  min-width: 1em;
  max-width: 1em;
  vertical-align: middle;
  padding-inline: .15em;
}

table, tr, th, td {
  border: none;
}
th {
  position: sticky;
  top: calc(var(--nav-height) + 14rem + var(--padding-top) * 2);
  padding-bottom: .2rem;
  font-weight: 700;
  background-color: var(--highlight-color);
  box-shadow: inset 0 -.2rem var(--primary-color);
  z-index: 40;
}
th.sortable {
  cursor: pointer;
}
.table-auras::after {
  content: attr(data-short);
}
@media (orientation: landscape) {
  th {
    top: calc(var(--nav-height) + 6rem + var(--padding-top) * 2);
  }
  .table-auras {
    min-width: 2rem;
  }
  .table-auras::after {
    content: attr(data-full);
  }
}

td {
  padding-inline: .25rem;
  background-color: var(--background);
  background-clip: padding-box;
  text-align: center;
}
td.table-dps {
  min-width: 4rem;
  width: 5rem;
}
td.table-dmg {
  min-width: 5.1rem;
  width: 6rem;
}
td:is(.table-dmg, .table-dps) {
  text-align: right;
}
td.table-r {
	min-width: 4.75rem;
  text-align: right;
}
td.table-t {
	min-width: 2.6rem;
  width: 6ch;
}
td.table-n {
  width: 13rem;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  --min-width: 3rem;
}
#table-speedrun td.table-n {
  width: 17rem;
}
td.table-dummy-name {
  width: 1rem;
}
td.table-n a {
  text-shadow: 0 0 3em currentColor;
}
td.table-points {
  min-width: 4rem;
}
tbody tr {
  counter-increment: rowNumber;
}
td.table-n::before {
  display: inline-block;
  content: counter(rowNumber);
  min-width: var(--min-width);
  text-align: right;
}

tbody > tr:nth-child(odd) > td {
  background-color: hsl(0, 0%, 3%);
}

@media (orientation: portrait) {
  .table-cls {
    display: none;
  }
}


@media (orientation: portrait) {
  td.table-n {
    max-width: calc(100vw - 21rem);
  }
  td.table-n {
    --min-width: 2.5rem;
  }
  td {
    padding-inline: .1rem;
  }
}

#table-top {
  padding-bottom: 5rem;
}

select:disabled,
input:disabled + label {
  opacity: .15;
}

#select-server {grid-area: serv;}
#select-instance {grid-area: inst;}
#select-boss {grid-area: boss;}
#select-size {grid-area: size;}
#combine-label {grid-area: comb;}
#difficulty-label {grid-area: diff;}
#select-class {grid-area: clss;}
#select-spec {grid-area: spec;}

#select-instance,
#select-boss {
  min-width: 21ch;
}

#controls-wrap {
  display: grid;
  grid-auto-flow: row;
  place-items: center;
  position: sticky;
  top: var(--margin-top);
  width: 100%;
  max-width: 55rem;
  padding-bottom: var(--padding-top);
  background-color: var(--background);
  z-index: 5;
}
#controls {
  display: grid;
  width: 100%;
  grid-template-areas:
  'serv serv serv serv serv serv'
  'inst inst inst inst inst inst'
  'boss boss boss boss boss boss'
  'comb comb size size diff diff'
  'clss clss clss spec spec spec';
  gap: .5rem;
}
#controls :is(select, label) {
  text-align: center;
  font-size: 150%;
}
#controls-limits {
  font-size: 125%;
}

@media (orientation: landscape) {
  #controls {
    /* padding-inline: 5rem; */
    grid-template-areas:
    'inst inst boss boss boss boss size diff diff'
    'serv serv clss clss spec spec spec comb comb';
  }
  #controls-wrap {
    padding-inline: 5rem;
  }
}


#the-tooltip {
  position: fixed;
  width: fit-content;
  background-color: var(--background);
  padding: .25em;
  border-radius: 6px;
  box-shadow: inset 0 0 .25rem .1rem var(--primary-color), 0 0 .5rem .1rem var(--primary-color);
  z-index: 5;
}
#the-tooltip td {
  min-width: fit-content;
  text-align: right;
}
#the-tooltip td.count {
  min-width: 2rem;
}
#the-tooltip td.uptime {
  min-width: 3rem;
}
#the-tooltip tr.hidden {
  display: none;
}