@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@700;800;900&display=swap');

:root {
  color-scheme: dark;
  --night: #07152f;
  --navy: #152856;
  --ink: #0b1938;
  --cream: #fff6d7;
  --yellow: #ffd447;
  --cyan: #31d9df;
  --coral: #ff6d72;
  --green: #7ce381;
  --fast: 150ms;
  --standard: 220ms;
  --slow: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body { min-height: 100dvh; }
button,
input { font: inherit; }
::selection { color: var(--ink); background: var(--yellow); }

.game-stage {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

body > #spinner,
body > #loader {
  display: none !important;
  z-index: 900 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#game,
#game canvas,
.game-stage canvas {
  max-width: 100vw !important;
  max-height: 100dvh !important;
  touch-action: none;
}

#game canvas,
.game-stage canvas { display: block; }

.nova-loader {
  --loader-progress: 0%;
  position: fixed;
  z-index: 1000;
  inset: 0;
  min-height: 100dvh;
  overflow: hidden;
  color: white;
  pointer-events: auto;
  background: var(--night);
  isolation: isolate;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 260ms ease-in,
    transform 420ms cubic-bezier(.55, .06, .68, .19),
    visibility 420ms linear;
}

.nova-loader::before,
.nova-loader::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.nova-loader::before {
  background:
    linear-gradient(180deg, rgba(5, 18, 48, .74) 0%, rgba(5, 18, 48, .14) 28%, transparent 53%),
    linear-gradient(0deg, rgba(5, 14, 38, .9) 0%, rgba(5, 14, 38, .18) 38%, transparent 61%);
}

.nova-loader::after {
  opacity: .2;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px);
  background-size: 53px 53px;
  mask-image: linear-gradient(to bottom, black, transparent 34%);
}

.nova-loader.is-ready {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-7%, 0, 0) scale(1.035);
}

.nova-loader.is-ready *,
.nova-loader.is-ready *::before,
.nova-loader.is-ready *::after {
  animation-play-state: paused !important;
}

.loader-world {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #14274f;
}

.loader-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: city-rush 5.6s cubic-bezier(.2, .74, .23, 1) both;
  will-change: transform;
}

.sun-flare {
  position: absolute;
  top: 7%;
  right: 5%;
  width: min(44vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .28;
  background: rgba(255, 230, 137, .24);
  mix-blend-mode: screen;
  animation: sunlight-breathe 2.5s ease-in-out infinite alternate;
}

.motion-streaks,
.track-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.motion-streaks i {
  --x: 20%;
  --delay: 0s;
  position: absolute;
  top: 30%;
  left: var(--x);
  width: 4px;
  height: 18vh;
  border-radius: 999px;
  opacity: 0;
  background: rgba(255, 248, 207, .78);
  transform: rotate(18deg) translate3d(0, -40vh, 0);
  animation: speed-streak 1.8s linear infinite;
  animation-delay: var(--delay);
}

.motion-streaks i:nth-child(2) { --x: 34%; --delay: -.8s; height: 10vh; }
.motion-streaks i:nth-child(3) { --x: 49%; --delay: -1.35s; height: 15vh; }
.motion-streaks i:nth-child(4) { --x: 64%; --delay: -.3s; height: 9vh; }
.motion-streaks i:nth-child(5) { --x: 78%; --delay: -1.1s; height: 13vh; }
.motion-streaks i:nth-child(6) { --x: 89%; --delay: -.55s; height: 8vh; }

.track-sparks i {
  --x: 50%;
  --delay: 0s;
  position: absolute;
  left: var(--x);
  bottom: 9%;
  width: 5px;
  height: 13px;
  border-radius: 1px;
  opacity: 0;
  background: var(--yellow);
  animation: rail-spark 1.45s ease-out infinite;
  animation-delay: var(--delay);
}

.track-sparks i:nth-child(2) { --x: 43%; --delay: -.3s; background: var(--cyan); }
.track-sparks i:nth-child(3) { --x: 58%; --delay: -.8s; }
.track-sparks i:nth-child(4) { --x: 30%; --delay: -1.1s; background: var(--coral); }
.track-sparks i:nth-child(5) { --x: 71%; --delay: -.55s; background: var(--green); }

.rush-ticket {
  --ticket-size: 42px;
  position: absolute;
  z-index: 2;
  top: 46%;
  left: 50%;
  display: grid;
  width: calc(var(--ticket-size) * 1.45);
  height: var(--ticket-size);
  place-items: center;
  color: var(--navy);
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 7px;
  opacity: 0;
  background: var(--yellow);
  transform: translate3d(-50%, -50%, 0) rotate(-8deg) scale(.2);
  animation: ticket-fly 3.4s cubic-bezier(.15, .72, .28, 1) infinite;
}

.rush-ticket::before,
.rush-ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--night);
  transform: translateY(-50%);
}

.rush-ticket::before { left: -6px; }
.rush-ticket::after { right: -6px; }
.rush-ticket b { font-family: 'Bungee', sans-serif; font-size: calc(var(--ticket-size) * .45); }
.rush-ticket--one { animation-delay: -.2s; }
.rush-ticket--two { --ticket-size: 34px; animation-delay: -1.5s; }
.rush-ticket--three { --ticket-size: 25px; animation-delay: -2.65s; }

.loader-header {
  position: absolute;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  width: min(920px, calc(100% - 28px));
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  animation: header-arrive 520ms var(--ease-out) both;
}

.nova-mark {
  display: grid;
  width: 46px;
  height: 46px;
  flex: none;
  place-items: center;
  color: var(--ink);
  border: 3px solid white;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 7px 18px rgba(4, 12, 32, .3);
}

.nova-mark svg { width: 25px; }

.loader-brand {
  display: grid;
  min-width: 0;
  line-height: 1;
}

.loader-brand strong {
  font-family: 'Bungee', 'Nunito', sans-serif;
  font-size: clamp(17px, 4vw, 22px);
}

.loader-brand span {
  margin-top: 4px;
  color: #dcecff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.loader-profile {
  display: flex;
  min-width: 0;
  max-width: 230px;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  color: var(--ink);
  background: var(--cream);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  filter: drop-shadow(0 7px 10px rgba(4, 12, 32, .28));
}

.loader-profile > img,
.loader-profile > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border: 2px solid var(--navy);
  border-radius: 50%;
  object-fit: cover;
  background: var(--yellow);
  font-weight: 900;
}

.loader-profile div {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.loader-profile small {
  color: #53607c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.loader-profile strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loader-title {
  position: absolute;
  z-index: 4;
  top: clamp(95px, 14vh, 150px);
  left: max(22px, calc((100vw - 920px) / 2));
  width: min(560px, calc(100% - 44px));
  transform: rotate(-2deg);
  animation: title-hit 650ms var(--ease-out) both;
}

.loader-title h1 {
  position: relative;
  z-index: 1;
  display: grid;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-family: 'Bungee', 'Nunito', sans-serif;
  font-size: clamp(42px, 10vw, 82px);
  line-height: .8;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 5px 0 var(--navy);
}

.loader-title h1 span { color: var(--yellow); }
.loader-title h1 strong { color: white; font-weight: inherit; }

.loader-title p {
  margin: 17px 0 0 4px;
  color: white;
  font-size: clamp(13px, 3vw, 17px);
  font-weight: 900;
}

.paint-stroke {
  position: absolute;
  z-index: 0;
  display: block;
  height: 17px;
  opacity: .92;
  clip-path: polygon(0 24%, 96% 0, 100% 70%, 4% 100%);
  transform: scaleX(0);
  transform-origin: left;
  animation: paint-swipe 460ms 220ms var(--ease-out) forwards;
}

.paint-stroke--cyan {
  top: 28%;
  left: -9px;
  width: 72%;
  background: var(--cyan);
  transform: rotate(-3deg) scaleX(0);
  animation-name: paint-swipe-cyan;
}

.paint-stroke--coral {
  top: 72%;
  left: 14%;
  width: 84%;
  background: var(--coral);
  animation-delay: 330ms;
}

.departure-board {
  position: absolute;
  z-index: 6;
  right: max(18px, calc((100vw - 920px) / 2));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(470px, calc(100% - 36px));
  padding: 16px 18px 13px;
  color: white;
  border: 3px solid var(--yellow);
  border-radius: 14px;
  background: var(--navy);
  box-shadow: 0 12px 28px rgba(4, 12, 32, .34);
  animation: board-arrive 620ms 170ms var(--ease-out) both;
}

.departure-board::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 18px;
  width: 86px;
  height: 7px;
  background: var(--cyan);
  transform: skewX(-22deg);
}

.departure-row {
  display: flex;
  align-items: end;
  gap: 14px;
}

.departure-row > div {
  display: grid;
  min-width: 0;
}

.departure-row small {
  color: #9eeef1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.departure-row strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.departure-row > span {
  margin-left: auto;
  color: var(--yellow);
  font-family: 'Bungee', 'Nunito', sans-serif;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.loader-progress {
  position: relative;
  height: 15px;
  margin-top: 13px;
  border: 2px solid white;
  border-radius: 999px;
  background: #07132d;
}

.loader-progress > div {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--standard) var(--ease-out);
}

.route-stop {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -50%);
}

.route-stop--one { left: 26%; }
.route-stop--two { left: 52%; }
.route-stop--three { left: 78%; }

.route-train {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(6%, var(--loader-progress), 94%);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--navy);
  border: 2px solid white;
  border-radius: 50%;
  background: var(--yellow);
  transform: translate(-50%, -50%);
  transition: left var(--standard) var(--ease-out);
}

.route-train svg { width: 17px; fill: currentColor; }

.loader-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: #b9c8e9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.loader-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.loader-meta svg {
  width: 14px;
  height: 14px;
  fill: var(--green);
}

.bridge-notice {
  position: fixed;
  z-index: 1100;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 28px));
  padding: 15px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #ffd9df;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
  transform: translateX(-50%);
  pointer-events: auto;
}

.bridge-notice strong,
.bridge-notice span { display: block; }
.bridge-notice span { margin-top: 3px; color: #5e2740; font-size: 13px; }

.bridge-notice button {
  min-height: 44px;
  margin-top: 10px;
  padding: 0 16px;
  color: white;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #c82835;
  font-weight: 900;
  cursor: pointer;
}

.bridge-notice button:focus-visible {
  outline: 4px solid white;
  outline-offset: 2px;
}

@keyframes city-rush {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.105) translate3d(0, 1.6%, 0); }
}

@keyframes sunlight-breathe {
  to { opacity: .48; transform: scale(1.12); }
}

@keyframes speed-streak {
  0% { opacity: 0; transform: rotate(18deg) translate3d(0, -38vh, 0) scaleY(.5); }
  18% { opacity: .72; }
  100% { opacity: 0; transform: rotate(18deg) translate3d(0, 76vh, 0) scaleY(1.35); }
}

@keyframes rail-spark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(38deg) scale(.4); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(22px, -74px, 0) rotate(38deg) scale(1.2); }
}

@keyframes ticket-fly {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(-8deg) scale(.18); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(23vw, 54vh, 0) rotate(34deg) scale(1.65); }
}

@keyframes header-arrive {
  from { opacity: 0; transform: translate(-50%, -18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes title-hit {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-30px, 0, 0) rotate(-5deg) scale(.9);
  }
  to {
    opacity: 1;
    clip-path: inset(-20% -20% -20% -20%);
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
}

@keyframes paint-swipe { to { transform: scaleX(1); } }
@keyframes paint-swipe-cyan { to { transform: rotate(-3deg) scaleX(1); } }

@keyframes board-arrive {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 560px) {
  .loader-art { object-position: center 60%; }
  .loader-header { width: calc(100% - 22px); }
  .nova-mark { width: 40px; height: 40px; border-width: 2px; }
  .nova-mark svg { width: 22px; }
  .loader-brand strong { font-size: 16px; }
  .loader-brand span { display: none; }
  .loader-profile { max-width: 145px; padding: 6px 11px 6px 6px; }
  .loader-profile > img,
  .loader-profile > span { width: 29px; height: 29px; }
  .loader-profile small { display: none; }
  .loader-profile strong { font-size: 11px; }
  .loader-title { top: clamp(84px, 12vh, 112px); left: 20px; width: calc(100% - 40px); }
  .loader-title h1 { font-size: clamp(43px, 15vw, 62px); }
  .loader-title p { width: 78%; margin-top: 14px; font-size: 12px; }
  .paint-stroke--cyan { width: 88%; }
  .departure-board {
    right: 12px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    padding: 14px 14px 11px;
  }
  .departure-row strong { font-size: 12px; }
  .departure-row > span { font-size: 19px; }
  .loader-meta { font-size: 11px; }
}

@media (max-width: 340px) {
  .loader-profile { max-width: 122px; }
  .loader-title h1 { font-size: 43px; }
  .departure-row strong { max-width: 205px; }
}

@media (min-width: 760px) {
  .loader-title { top: 20%; left: 7%; }
  .departure-board { right: 7%; bottom: 8%; }
}

@media (max-height: 590px) and (orientation: landscape) {
  .loader-art { object-position: center 66%; }
  .loader-header { top: max(8px, env(safe-area-inset-top)); }
  .loader-title { top: 19%; left: 5%; width: 46%; }
  .loader-title h1 { font-size: clamp(34px, 7vw, 58px); }
  .loader-title p { margin-top: 10px; }
  .departure-board {
    right: 4%;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(430px, 45%);
    padding-block: 11px 9px;
  }
  .departure-row small,
  .loader-meta { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-art { animation: none; transform: scale(1.045); }
  .sun-flare { animation: none; }
  .motion-streaks,
  .track-sparks,
  .rush-ticket { display: none; }
  .loader-header,
  .loader-title,
  .departure-board,
  .paint-stroke { animation: none; opacity: 1; }
  .paint-stroke--cyan { transform: rotate(-3deg) scaleX(1); }
  .paint-stroke--coral { transform: scaleX(1); }
  .loader-progress > div,
  .route-train { transition-duration: .01ms; }
  .nova-loader { transition: opacity var(--fast) linear, visibility var(--fast) linear; }
  .nova-loader.is-ready { transform: none; }
}