/* Arcade-highscore: CRT-scherm, letters die intikken en een score die het oude record passeert. */

.celebration[data-mode="highscore"] { --c1: #12002e; --c2: #ff2bd6; --c3: #00f0ff; --glow: rgb(255 43 214 / .8); }

.cel-hs-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cel-hs-screen {
  position: absolute; inset: 2.5vh 3vw; border-radius: 5vh / 7vh; overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; color: #fff; text-transform: uppercase;
  background: radial-gradient(ellipse at 50% 45%, #1b0b3a 0%, #0a0418 60%, #020008 100%);
  box-shadow: 0 0 0 1.4vh #18181b, 0 0 0 1.8vh #3f3f46, 0 0 8vh var(--glow), inset 0 0 10vh rgb(0 0 0 / .9);
  animation: cel-hs-flicker 3.2s steps(1) infinite;
}
@keyframes cel-hs-flicker { 0%, 100% { opacity: 1; } 41% { opacity: .93; } 42% { opacity: 1; } 77% { opacity: .96; } 78% { opacity: 1; } }
.cel-hs-grid {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 45%;
  background:
    repeating-linear-gradient(90deg, rgb(255 43 214 / .45) 0 .25vh, transparent .25vh 8vh),
    repeating-linear-gradient(0deg, rgb(255 43 214 / .45) 0 .25vh, transparent .25vh 6vh);
  transform: perspective(40vh) rotateX(60deg); transform-origin: 50% 0;
  -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%);
  animation: cel-hs-grid 1s linear infinite; opacity: .55;
}
@keyframes cel-hs-grid { to { background-position: 0 0, 0 6vh; } }
.cel-hs-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .35) 0 .18vh, transparent .18vh .45vh),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgb(0 0 0 / .55) 100%);
}
.cel-hs-scanlines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12vh; top: -12vh;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / .05), transparent);
  animation: cel-hs-roll 4s linear infinite;
}
@keyframes cel-hs-roll { to { top: 100%; } }

.cel-hs-hud { position: absolute; left: 5vh; right: 5vh; top: 3.5vh; display: flex; justify-content: space-between; font-size: 3vh; letter-spacing: .15em; }
.cel-hs-hud-item { color: #ff2b2b; text-shadow: 0 0 1vh rgb(255 43 43 / .8); }
.cel-hs-hud-item b { color: #fff; text-shadow: 0 0 1vh #fff; }
.cel-hs-hud-item.is-team { animation: cel-hs-blink .8s steps(1) infinite; }
.cel-hs-hud-item.is-credit { color: var(--c3); text-shadow: 0 0 1vh var(--c3); }
@keyframes cel-hs-blink { 50% { opacity: 0; } }

.cel-hs-headline {
  position: absolute; left: 0; right: 0; top: 10vh; display: flex; justify-content: center;
  font-size: 10vh; line-height: 1; letter-spacing: .04em;
}
.cel-hs-headline span { opacity: 0; color: #fff200; text-shadow: .35vh 0 0 #ff2bd6, -.35vh 0 0 #00f0ff, 0 0 3vh rgb(255 242 0 / .7); }
.cel-hs-headline span.is-in { opacity: 1; }
.cel-hs-headline.is-blinking span { animation: cel-hs-rainbow 1.2s linear infinite; }
.cel-hs-headline.is-blinking span:nth-child(3n+1) { animation-delay: -.4s; }
.cel-hs-headline.is-blinking span:nth-child(3n+2) { animation-delay: -.8s; }
@keyframes cel-hs-rainbow {
  0% { color: #fff200; } 25% { color: #39ff14; } 50% { color: #00f0ff; } 75% { color: #ff2bd6; } 100% { color: #fff200; }
}

.cel-hs-score {
  position: absolute; left: 0; right: 0; top: 22vh; text-align: center;
  font-size: 19vh; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: .6vh 0 0 #ff2bd6, -.6vh 0 0 #00f0ff, 0 0 4vh rgb(255 255 255 / .5);
}
.cel-hs-score.is-final { animation: cel-hs-pulse .5s ease-in-out infinite alternate; }
@keyframes cel-hs-pulse { to { text-shadow: .8vh 0 0 #ff2bd6, -.8vh 0 0 #00f0ff, 0 0 8vh rgb(255 242 0 / .9); color: #fff200; } }
.cel-hs-unit { position: absolute; left: 0; right: 0; top: 42vh; text-align: center; font-size: 3.4vh; letter-spacing: .3em; color: var(--c3); text-shadow: 0 0 1.5vh var(--c3); }

.cel-hs-meter { position: absolute; left: 50%; width: min(62vw, 110vh); translate: -50% 0; top: 51vh; height: 3.4vh; }
.cel-hs-track {
  position: absolute; inset: 0; overflow: hidden; border: .35vh solid #fff; background: #0a0418;
  box-shadow: 0 0 2vh rgb(255 255 255 / .3);
}
.cel-hs-fill {
  width: 0; height: 100%;
  background: repeating-linear-gradient(90deg, #39ff14 0 2vh, #0a0418 2vh 2.5vh);
  box-shadow: 0 0 2vh #39ff14;
}
.cel-hs-marker { position: absolute; top: -1.2vh; bottom: -1.2vh; width: .6vh; margin-left: -.3vh; background: #ff2b2b; box-shadow: 0 0 1.5vh #ff2b2b; }
.cel-hs-marker span {
  position: absolute; left: 50%; top: 100%; margin-top: .8vh; translate: -50% 0; white-space: nowrap;
  font-size: 2.2vh; letter-spacing: .12em; color: #ff6b6b;
}
.cel-hs-marker.is-broken { background: #fff200; box-shadow: 0 0 2vh #fff200; }
.cel-hs-marker.is-broken span { color: #fff200; }

.cel-hs-burst {
  position: absolute; left: 85%; top: 23vh; visibility: hidden; padding: .8vh 2vh; z-index: 2;
  font-size: 6vh; color: #0a0418; background: #fff200; box-shadow: .8vh .8vh 0 #ff2bd6, 0 0 4vh rgb(255 242 0 / .8);
}

.cel-hs-title {
  position: absolute; left: 3vw; right: 3vw; top: 60vh; text-align: center; visibility: hidden;
  font-family: var(--font-display); text-transform: none; font-size: 6.4vh; line-height: 1.1; color: #fff;
  text-shadow: 0 .5vh 0 #ff2bd6, 0 0 3vh var(--glow);
}
.cel-hs-sub { position: absolute; left: 3vw; right: 3vw; top: 69vh; opacity: 0; text-align: center; font-family: var(--font-display); text-transform: none; font-size: 3vh; font-weight: 700; color: var(--c3); }

.cel-hs-table { position: absolute; left: 50%; width: min(56vw, 96vh); translate: -50% 0; top: 75vh; display: flex; flex-direction: column; gap: .8vh; }
.cel-hs-row { display: flex; align-items: baseline; gap: 3vh; font-size: 3.6vh; letter-spacing: .1em; }
.cel-hs-row.is-new { display: none; color: #fff200; text-shadow: 0 0 1.5vh rgb(255 242 0 / .8); animation: cel-hs-blink .5s steps(1) 6; }
.cel-hs-table.has-new .cel-hs-row.is-new { display: flex; }
.cel-hs-row.is-old { color: #a1a1aa; }
.cel-hs-rank { width: 6vh; }
.cel-hs-label { flex: 1; overflow: hidden; white-space: nowrap; border-bottom: .3vh dotted currentColor; }
.cel-hs-points { font-variant-numeric: tabular-nums; }