/* Speedrun: neon, stopwatch en finishvlag. */

.celebration[data-mode="speedrun"] { --c1: #0b0420; --c2: #7c3aed; --c3: #67e8f9; --glow: rgb(34 211 238 / .7); }

.cel-speed-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #0b0420 0%, #2e0f5c 55%, #ff2a6d 100%); }
.cel-speed-grid {
  position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 60vh; transform: perspective(40vh) rotateX(62deg); transform-origin: 50% 0;
  background:
    repeating-linear-gradient(90deg, rgb(34 211 238 / .7) 0 .25vh, transparent .25vh 8vh),
    repeating-linear-gradient(0deg, rgb(232 121 249 / .7) 0 .25vh, transparent .25vh 8vh);
  animation: cel-grid-run .5s linear infinite;
  mask: linear-gradient(180deg, transparent, #000 30%);
}
@keyframes cel-grid-run { to { background-position: 0 0, 0 8vh; } }
.cel-speed-lines i {
  position: absolute; left: 100%; width: 22vw; height: .35vh; border-radius: 999px; opacity: .8;
  box-shadow: 0 0 1vh currentColor; animation: cel-streak .6s linear infinite;
}
@keyframes cel-streak { to { transform: translateX(-140vw); } }

.cel-speed-title {
  position: absolute; left: 5vw; top: 4vh; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 11vh;
  color: #fff; text-shadow: 0 0 1vh #22d3ee, 0 0 4vh #e879f9, .6vh .6vh 0 #e879f9; transform: skewX(-12deg);
}

.cel-watch { position: absolute; right: 6vw; top: 4vh; display: flex; align-items: center; gap: 2vh; }
.cel-watch-face {
  position: relative; width: 14vh; height: 14vh; border-radius: 50%;
  background: radial-gradient(circle, #111827 60%, #374151 62%); box-shadow: 0 0 0 .8vh #e5e7eb, 0 0 4vh #22d3ee;
}
.cel-watch-face::before { content: ""; position: absolute; left: 50%; top: -3vh; width: 3vh; height: 3vh; translate: -50% 0; border-radius: .6vh; background: #e5e7eb; }
.cel-watch-hand { position: absolute; left: 50%; top: 50%; width: .6vh; height: 5.6vh; margin-left: -.3vh; translate: 0 -100%; transform-origin: 50% 100%; background: #f43f5e; border-radius: 999px; }
.cel-watch-time {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 9vh; font-weight: 700; color: #67e8f9;
  text-shadow: 0 0 2vh #22d3ee; font-variant-numeric: tabular-nums;
}

.cel-finish {
  position: absolute; left: 62%; top: 26vh; width: 4vh; height: 50vh;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 2vh 2vh;
  box-shadow: 0 0 4vh rgb(255 255 255 / .5);
}
.cel-speed-card {
  position: absolute; left: 20vw; top: 34vh; width: min(40vw, 70vh); padding: 2.4vh 3vh; border-radius: 1.6vh;
  background: linear-gradient(135deg, rgb(17 24 39 / .9), rgb(46 16 101 / .9)); border: .3vh solid #22d3ee;
  box-shadow: 0 0 4vh rgb(34 211 238 / .6); transform: translate(-120vw, 0);
}
.cel-speed-card-ref { font-size: 2.2vh; font-weight: 700; color: #e879f9; }
.cel-speed-card-title { margin-top: .6vh; font-size: 3.4vh; font-weight: 700; line-height: 1.2; }
.cel-speed-card-by { margin-top: .8vh; font-size: 2.2vh; color: #67e8f9; }

.cel-speed-result {
  position: absolute; left: 0; right: 0; top: 64vh; text-align: center; opacity: 0;
  font-family: var(--font-brand); font-size: 8vh; color: #fff; text-shadow: 0 0 2vh #22d3ee, 0 0 5vh #e879f9;
}

.cel-speed-board {
  position: absolute; right: 4vw; top: 30vh; width: 36vh; padding: 2vh 2.4vh; border-radius: 1.6vh; visibility: hidden;
  background: rgb(0 0 0 / .55); border: .3vh solid #e879f9; box-shadow: 0 0 3vh rgb(232 121 249 / .5);
}
.cel-speed-board-title { font-size: 1.9vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #e879f9; }
.cel-speed-rows { margin-top: 1.2vh; display: flex; flex-direction: column; gap: .8vh; list-style: none; padding: 0; }
.cel-speed-rows li {
  display: flex; align-items: center; gap: 1.4vh; padding: .8vh 1.2vh; border-radius: .8vh; background: rgb(255 255 255 / .06);
  opacity: 0; translate: 3vh 0; transition: opacity .25s, translate .25s;
}
.cel-speed-rows li.is-in { opacity: 1; translate: 0 0; }
.cel-speed-rows li.is-current { background: rgb(34 211 238 / .2); box-shadow: inset 0 0 0 .25vh #22d3ee; }
.cel-speed-rank { width: 3.4vh; height: 3.4vh; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: #facc15; color: #111; }
.cel-speed-name { flex: 1; font-size: 2.1vh; font-weight: 700; }
.cel-speed-time { font-family: ui-monospace, Menlo, monospace; font-size: 2.1vh; color: #67e8f9; }

.cel-speed-record {
  position: absolute; left: 50%; top: 76vh; opacity: 0; white-space: nowrap;
  font-size: 6vh; font-weight: 700; font-style: italic; text-transform: uppercase; color: #facc15;
  text-shadow: 0 0 2vh #facc15, .5vh .5vh 0 #b45309;
}