body {
  font-family: "Exo 2", sans-serif;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  zoom: 1.15;
}

table {
  margin: 0 auto;
}

ul {
  list-style: none;
  padding: 0;
}

.water {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.water::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  border-top: 2px dotted;
  animation-name: eat-drop;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--eat-shift, 0s);
}

.swimmer {
  position: absolute;
  top: 50%;
  width: 70px;
  transform: translateY(-50%);
  animation-name: swim;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--swim-shift, 0s);
}

html:not(.garry-on) .water {
  transform: none !important;
}
html:not(.garry-on) .water::before {
  animation: none !important;
  border-top-style: solid;
}
html:not(.garry-on) .swimmer {
  display: none;
}

.water.zipper::before  { animation-name: eat-zipper; }
.water.wobble::before  { animation-name: eat-wobble; }
.water.rise::before    { animation-name: eat-rise; }

.water.rainbow::before {
  border-top-color: red;
  animation-name: eat-drop, hue;
  animation-duration: 14s, 2s;
  animation-delay: var(--eat-shift, 0s), 0s;
}

.water.spin .swimmer   { animation-name: swim-spin; }

.water.giant .swimmer {
  transform-origin: left center;
  animation-name: swim-giant;
}

.water.boobawamba {
  transform: rotate(180deg);
}
.water.boobawamba::before {
  border-top-color: red;
  animation-name: eat-drop, hue;
  animation-duration: 14s, 2s;
  animation-delay: var(--eat-shift, 0s), 0s;
}
.water.boobawamba .swimmer {
  transform-origin: left center;
  animation-name: swim-giant, hue;
  animation-duration: 14s, 1s;
  animation-delay: var(--swim-shift, 0s), 0s;
}

@keyframes swim {
  0%   { left: 100%; }
  85%  { left: 0; }
  92%  { left: -80px; }
  100% { left: -80px; }
}

@keyframes swim-spin {
  0%   { left: 100%;  transform: translateY(-50%) rotate(0deg); }
  85%  { left: 0;     transform: translateY(-50%) rotate(1080deg); }
  92%  { left: -80px; transform: translateY(-50%) rotate(1080deg); }
  100% { left: -80px; transform: translateY(-50%) rotate(1080deg); }
}

@keyframes swim-giant {
  0%   { left: 100%;   transform: translateY(-50%) scale(2.5); }
  85%  { left: 0;      transform: translateY(-50%) scale(2.5); }
  92%  { left: -200px; transform: translateY(-50%) scale(2.5); }
  100% { left: -200px; transform: translateY(-50%) scale(2.5); }
}

@keyframes eat-drop {
  0%    { width: 100%; transform: translateY(0); }
  85%   { width: 0;    transform: translateY(0); }
  86%   { width: 0;    transform: translateY(-60px); }
  92%   { width: 100%; transform: translateY(-60px); animation-timing-function: ease-in; }
  95%   { width: 100%; transform: translateY(0);     animation-timing-function: ease-out; }
  96.5% { width: 100%; transform: translateY(-12px); animation-timing-function: ease-in; }
  98%   { width: 100%; transform: translateY(0);     animation-timing-function: ease-out; }
  99%   { width: 100%; transform: translateY(-4px);  animation-timing-function: ease-in; }
  100%  { width: 100%; transform: translateY(0); }
}

@keyframes eat-zipper {
  0%   { width: 100%; }
  85%  { width: 0; }
  92%  { width: 0; }
  100% { width: 100%; }
}

@keyframes eat-wobble {
  0%    { width: 100%; transform: rotate(0deg); }
  85%   { width: 0;    transform: rotate(0deg); }
  90%   { width: 0;    transform: rotate(0deg); }
  93%   { width: 100%; transform: rotate(0deg); }
  94.5% { width: 100%; transform: rotate(-6deg); }
  96%   { width: 100%; transform: rotate(5deg); }
  97.5% { width: 100%; transform: rotate(-3deg); }
  99%   { width: 100%; transform: rotate(2deg); }
  100%  { width: 100%; transform: rotate(0deg); }
}

@keyframes eat-rise {
  0%   { width: 100%; transform: translateY(0); }
  85%  { width: 0;    transform: translateY(0); }
  86%  { width: 0;    transform: translateY(60px); }
  92%  { width: 100%; transform: translateY(60px); animation-timing-function: ease-out; }
  96%  { width: 100%; transform: translateY(-8px); animation-timing-function: ease-in-out; }
  98%  { width: 100%; transform: translateY(3px);  animation-timing-function: ease-in-out; }
  100% { width: 100%; transform: translateY(0); }
}

@keyframes hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .water .swimmer {
    animation: none !important;
    left: 50%;
    transform: translateY(-50%) !important;
  }
  .water::before {
    animation: none !important;
  }
}

table {
  border-collapse: collapse;
  font-size: 14px;
  counter-reset: row;
}

th {
  background: black;
  color: white;
  font-style: italic;
  padding: 5px 12px;
}

td {
  padding: 4px 12px;
  color: black;
}

tr:nth-child(even) td { background: #efefef; }
tr:nth-child(odd) td  { background: white; }

td:nth-child(-n+2) { color: white; font-weight: bold; }
tr:nth-child(even) td:nth-child(-n+2) { background: #5f5f5f; }
tr:nth-child(odd) td:nth-child(-n+2)  { background: #4a4a4a; }
td:nth-child(2) { text-align: right; }

td:first-child::before {
  counter-increment: row;
  content: counter(row);
}

tr:nth-child(10n+1):not(:first-child) td { border-bottom: 1px dotted black; }

td a, td a:visited { color: #1155cc; }

tr td.beginner    { background: #9fc5e8; }
tr td.easy        { background: #a4e8e8; }
tr td.medium      { background: #b6e3a8; }
tr td.hard        { background: #f7e9a0; }
tr td.veryhard    { background: #f9cb9c; }
tr td.insane      { background: #ea9999; }
tr td.remorseless { background: #b4a7d6; }
tr td.extreme     { background: #c27ba0; }

h1, th {
  font-family: "Exo 2", sans-serif;
  font-weight: 700;
  font-style: italic;
}

tr td[style*="--heat"]:nth-child(4) { background: color-mix(in srgb, white, #e06666 var(--heat, 0%)); }
tr td[style*="--heat"]:nth-child(5) { background: color-mix(in srgb, white, #6aa84f var(--heat, 0%)); }
tr td[style*="--heat"]:nth-child(6) { background: color-mix(in srgb, white, #8e7cc3 var(--heat, 0%)); }

tr td.negative {
  background: color-mix(in srgb, #5b4a8a, #0b0813 calc(var(--depth, 0) * 100%));
  color: #e8e0ff;
  font-weight: bold;
}

td {
  font-family: "Exo 2", sans-serif;
}

.top-entry img {
  vertical-align: middle;
  margin-right: 8px;
}

.post {
  text-align: left;
  max-width: 640px;
  margin: 0 auto 28px;
  padding-bottom: 20px;
  border-bottom: 1px dotted;
}

.post-date {
  opacity: 0.6;
  font-size: 14px;
}

.post img {
  max-width: 100%;
}

a:visited {
  color: LinkText;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.stat {
  display: flex;
  flex-direction: column;
  border: 1px dotted;
  padding: 10px 20px;
  min-width: 120px;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
}

.stat-label {
  font-size: 13px;
  opacity: 0.7;
}

.records {
  list-style: none;
  padding: 0;
  line-height: 1.8;
}

.tier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 6px auto;
}

.tier-name {
  width: 100px;
  text-align: right;
}

.tier-track {
  flex: 1;
  text-align: left;
}

.tier-bar {
  display: inline-block;
  height: 16px;
  min-width: 4px;
}

.tier-count {
  width: 24px;
  text-align: left;
}

.tier-bar.beginner    { background: #9fc5e8; }
.tier-bar.easy        { background: #a4e8e8; }
.tier-bar.medium      { background: #b6e3a8; }
.tier-bar.hard        { background: #f7e9a0; }
.tier-bar.veryhard    { background: #f9cb9c; }
.tier-bar.insane      { background: #ea9999; }
.tier-bar.remorseless { background: #b4a7d6; }
.tier-bar.extreme     { background: #c27ba0; }

@view-transition {
  navigation: auto;
}

.water {
  view-transition-name: water;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

::view-transition-group(water) {
  animation-duration: 0s;
}
::view-transition-old(water) {
  display: none;
}
::view-transition-new(water) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.counter {
  font-size: 14px;
}

.digit {
  display: inline-block;
  width: 1.3em;
  margin: 0 1px;
  padding: 2px 0;
  background: black;
  color: #ff6a00;
  font-weight: 700;
  font-family: "Courier New", monospace;
  border: 1px solid #444;
}

@media (max-width: 700px) {
  body {
    zoom: 1;
    padding: 0 8px;
  }
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

.changelog {
  max-width: 500px;
  margin: 0 auto;
}

.changelog-date {
  opacity: 0.6;
  margin-right: 8px;
}