/* The Buckle Game's leaderboard, one design wherever it appears: /buckle,
   /buckle/shows, /buckle/leaderboard and the portal's /my/buckle. The game is a
   monthly race, so each player gets a lane and an ASCII horse (the front page
   banner's) that has run as far as their count, with the finish at 10. The
   frame is the logo's rope.

   Nginx serves /static/css/ as immutable for 30 days and this file name has no
   hash, so bump ?v= on both <link>s to it when it changes:
   templates/buckle_race.html and frontend/src/routes/buckle/+page.svelte. */

.race, .race-picker {
  --race-horse: 3.4rem;
  --race-blue: #04A9F6;
  --race-cream: #F0EBE0;
  --race-gold: #e8c840;
  --race-orange: #E86830;
  --race-dirt: #2A2520;
  --race-rail: #5a5146;
  --race-ink: #0a0a0a;
}

.race {
  position: relative;
  container-type: inline-size;
  max-width: 44rem;
  margin: 2.5rem auto 1.75rem;
  padding: 0.25rem 0.5rem 0.5rem;
  background: var(--race-ink);
  border: 14px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2242%22 height=%2242%22 viewBox=%220 0 42 42%22 fill=%22%2304A9F6%22%3E%3Cellipse cx=%2221.00%22 cy=%227.00%22 rx=%224.3%22 ry=%221.75%22 transform=%22rotate%28-32.0 21.00 7.00%29%22/%3E%3Cellipse cx=%2221.00%22 cy=%2235.00%22 rx=%224.3%22 ry=%221.75%22 transform=%22rotate%28-32.0 21.00 35.00%29%22/%3E%3Cellipse cx=%227.00%22 cy=%2221.00%22 rx=%224.3%22 ry=%221.75%22 transform=%22rotate%2858.0 7.00 21.00%29%22/%3E%3Cellipse cx=%2235.00%22 cy=%2221.00%22 rx=%224.3%22 ry=%221.75%22 transform=%22rotate%2858.0 35.00 21.00%29%22/%3E%3Cellipse cx=%2211.60%22 cy=%227.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%2860.0 11.60 7.00%29%22/%3E%3Cellipse cx=%229.87%22 cy=%2210.60%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28111.4 9.87 10.60%29%22/%3E%3Cellipse cx=%225.98%22 cy=%2211.48%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28162.9 5.98 11.48%29%22/%3E%3Cellipse cx=%222.86%22 cy=%229.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28214.3 2.86 9.00%29%22/%3E%3Cellipse cx=%222.86%22 cy=%225.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28265.7 2.86 5.00%29%22/%3E%3Cellipse cx=%225.98%22 cy=%222.52%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28317.1 5.98 2.52%29%22/%3E%3Cellipse cx=%229.87%22 cy=%223.40%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28368.6 9.87 3.40%29%22/%3E%3Cellipse cx=%2239.60%22 cy=%227.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%2860.0 39.60 7.00%29%22/%3E%3Cellipse cx=%2237.87%22 cy=%2210.60%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28111.4 37.87 10.60%29%22/%3E%3Cellipse cx=%2233.98%22 cy=%2211.48%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28162.9 33.98 11.48%29%22/%3E%3Cellipse cx=%2230.86%22 cy=%229.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28214.3 30.86 9.00%29%22/%3E%3Cellipse cx=%2230.86%22 cy=%225.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28265.7 30.86 5.00%29%22/%3E%3Cellipse cx=%2233.98%22 cy=%222.52%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28317.1 33.98 2.52%29%22/%3E%3Cellipse cx=%2237.87%22 cy=%223.40%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28368.6 37.87 3.40%29%22/%3E%3Cellipse cx=%2211.60%22 cy=%2235.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%2860.0 11.60 35.00%29%22/%3E%3Cellipse cx=%229.87%22 cy=%2238.60%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28111.4 9.87 38.60%29%22/%3E%3Cellipse cx=%225.98%22 cy=%2239.48%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28162.9 5.98 39.48%29%22/%3E%3Cellipse cx=%222.86%22 cy=%2237.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28214.3 2.86 37.00%29%22/%3E%3Cellipse cx=%222.86%22 cy=%2233.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28265.7 2.86 33.00%29%22/%3E%3Cellipse cx=%225.98%22 cy=%2230.52%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28317.1 5.98 30.52%29%22/%3E%3Cellipse cx=%229.87%22 cy=%2231.40%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28368.6 9.87 31.40%29%22/%3E%3Cellipse cx=%2239.60%22 cy=%2235.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%2860.0 39.60 35.00%29%22/%3E%3Cellipse cx=%2237.87%22 cy=%2238.60%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28111.4 37.87 38.60%29%22/%3E%3Cellipse cx=%2233.98%22 cy=%2239.48%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28162.9 33.98 39.48%29%22/%3E%3Cellipse cx=%2230.86%22 cy=%2237.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28214.3 30.86 37.00%29%22/%3E%3Cellipse cx=%2230.86%22 cy=%2233.00%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28265.7 30.86 33.00%29%22/%3E%3Cellipse cx=%2233.98%22 cy=%2230.52%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28317.1 33.98 30.52%29%22/%3E%3Cellipse cx=%2237.87%22 cy=%2231.40%22 rx=%222.1%22 ry=%221.05%22 transform=%22rotate%28368.6 37.87 31.40%29%22/%3E%3C/svg%3E") 14 round;
  color: var(--race-cream);
  font-family: 'Space Mono', monospace;
  text-align: left;
}

/* The title sits on the rope, like the sign on a corral gate. */
.race .race-title {
  width: fit-content;
  max-width: 100%;
  margin: -1.65rem auto 0.9rem;
  padding: 0.15rem 0.75rem;
  background: var(--race-ink);
  color: var(--race-gold);
  font-family: 'Rye', serif;
  font-size: 1.1rem;
  font-size: clamp(1rem, 6cqi, 1.75rem);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.race .race-title a { color: inherit; text-decoration: none; }
.race .race-title a:hover { color: var(--race-cream); }

.race-lanes { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }

.race-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  grid-template-areas: "place name count" "track track track";
  column-gap: 0.5rem;
  align-items: baseline;
  margin: 0;
  padding: 0;
}

.race-place, .race-name, .race-count { font-family: 'Rye', serif; line-height: 1.2; }
.race-place { grid-area: place; color: var(--race-blue); font-size: 1.3rem; text-align: right; }
.race-name { grid-area: name; font-size: 1.2rem; overflow-wrap: anywhere; }
.race-count { grid-area: count; color: var(--race-blue); font-size: 1.5rem; }

.race-first .race-place, .race-first .race-name, .race-first .race-count { color: var(--race-gold); }
.race-me .race-place, .race-me .race-name, .race-me .race-count { color: var(--race-orange); }

/* A fan further down than the top 10 sees their own lane under a break. */
.race-below { margin-top: 0.4rem; padding-top: 0.9rem; border-top: 2px dashed var(--race-rail); }

/* The lane: dirt, a rail post every tenth of the way, a checkered finish at a
   count of 10. A leader past 10 stretches the track, so the finish moves back. */
.race-track {
  grid-area: track;
  position: relative;
  display: block;
  height: 2.6rem;
  margin-top: 0.15rem;
  background: var(--race-dirt);
  overflow: hidden;
}
.race-track::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: var(--race-horse);
  height: 0.35rem;
  background: repeating-linear-gradient(90deg, var(--race-rail) 0 2px, transparent 2px 10%);
}
.race-track::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--race-horse) + (100% - var(--race-horse)) * 10 / var(--race-scale) - 8px);
  width: 8px;
  background: repeating-conic-gradient(var(--race-cream) 0 25%, var(--race-ink) 0 50%) 0 0 / 8px 8px;
}

.race-horse {
  position: absolute;
  bottom: 0.1rem;
  left: calc((100% - var(--race-horse)) * var(--race-count) / var(--race-scale));
  z-index: 1;
  width: var(--race-horse);
  height: 2.3rem;
  color: var(--race-blue);
  animation: race-run 1.5s cubic-bezier(0.2, 0.65, 0.3, 1) both, race-trot 0.2s ease-in-out 7 alternate;
}
.race-first .race-horse { color: var(--race-gold); }
.race-me .race-horse { color: var(--race-orange); }

/* The banner's horse, facing the finish. */
.race-horse::before {
  content: "      ,>>\\.\A       /_   )`.\A      /     _)`^)`.   _.---. _\A     (_,' \\  `^-)\"\"      `.\\\A           |              | \\\A           \\              / |\A          / \\  /.___.'\\  (\\ (_\A         < ,\"||     \\ |`. \\`-'\A          \\\\ ()      )|  )/\A          |_>|>     /_] //\A           /_]        /_]";
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.185rem;
  font-weight: 700;
  line-height: 1.1;
  /* Its own, so a centered box (like a picker tile) can't center each line
     on its own and scramble the drawing. */
  text-align: left;
  white-space: pre;
  transform: scaleX(-1);
  -webkit-text-stroke: 1.35px currentColor;
}

/* The color a player painted their horse (--horse-color, any color that
   shows on the dirt). With none, the leader's is gold, yours is orange and
   the rest are blue. */
.race-horse[data-horse] { color: var(--horse-color); }

@keyframes race-run { from { left: 0; } }
@keyframes race-trot { to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .race-horse, .race-pick .race-pick-run { animation: none; } }

.race .race-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 0.35rem;
  color: var(--race-blue);
  font-size: 1rem;
  font-weight: 700;
}

/* The portal's picker: a stretch of lane for each quick pick, then the horse
   in whatever color they're trying, with the color picker, a hex code box
   and Surprise me. */
.race-picker { min-width: 0; margin: 0; padding: 0; border: 0; font-family: 'Space Mono', monospace; }
.race-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.race-pick {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.3rem 0.25rem 0.4rem;
  background: var(--race-ink);
  border: 2px solid var(--race-rail);
  border-radius: 6px;
  color: var(--race-cream);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms ease;
}
.race-pick:hover, .race-pick-on { border-color: var(--horse-color); }
.race-pick:focus-visible { outline: 2px solid var(--race-cream); outline-offset: 2px; }
.race-pick-lane { position: relative; display: block; height: 2.6rem; background: var(--race-dirt); overflow: hidden; }
.race-pick .race-horse { left: calc(50% - var(--race-horse) / 2); animation: none; }
.race-pick .race-pick-run { animation: race-trot 0.2s ease-in-out 7 alternate; }
.race-pick-name { display: block; margin-top: 0.25rem; color: var(--race-cream); font-size: 0.875rem; line-height: 1.2; }
.race-pick-on .race-pick-name { color: var(--horse-color); font-weight: 700; }

.race-pick-any { margin-top: 0.5rem; padding: 0.5rem; cursor: default; }
.race-pick-any:hover { border-color: var(--race-rail); }
.race-pick-any.race-pick-on { border-color: var(--horse-color); }
.race-pick-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.race-pick-swatch, .race-pick-hex, .race-pick-surprise {
  min-height: 2.75rem;
  border: 2px solid var(--race-rail);
  border-radius: 6px;
  color: var(--race-cream);
  font: inherit;
  font-size: 1rem;
}
.race-pick-swatch { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem 0 0.35rem; cursor: pointer; }
.race-pick-swatch input { width: 2rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.race-pick-swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.race-pick-swatch input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.race-pick-swatch input::-moz-color-swatch { border: 0; border-radius: 4px; }
.race-pick-swatch:hover { border-color: var(--horse-color); }
.race-pick-swatch:has(:focus-visible) { outline: 2px solid var(--race-cream); outline-offset: 2px; }
.race-pick-hex { width: 7.5rem; padding: 0 0.6rem; background: #1a1a1a; }
.race-pick-hex::placeholder { color: #8b8378; }
.race-pick-hex:focus { outline: none; border-color: var(--horse-color); }
.race-pick-surprise { padding: 0 0.9rem; background: var(--race-dirt); border-color: var(--horse-color); font-weight: 700; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.race-pick-surprise:hover { background: var(--horse-color); color: var(--race-ink); }
.race-pick-surprise:focus-visible { outline: 2px solid var(--race-cream); outline-offset: 2px; }

.race-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Room for one line a player: place, name, lane, count. */
@container (min-width: 36rem) {
  .race-row {
    grid-template-columns: 2rem minmax(0, 15rem) minmax(0, 1fr) 2.75rem;
    grid-template-areas: "place name track count";
    column-gap: 0.75rem;
    align-items: center;
  }
  .race-track { margin-top: 0; }
  .race-count { text-align: right; }
}