@font-face {
  font-display: swap;
  font-family: 'Jersey 10';
  font-weight: 400;
  src: url('/fonts/Jersey10-Regular.ttf') format('truetype');
}

html,
body {
  background: #000;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

body::after {
  bottom: 2rem;
  color: #fff;
  content: 'Loading...';
  font-family: 'Jersey 10', monospace;
  font-size: 2rem;
  left: 2rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  position: fixed;
  text-transform: uppercase;
}

body:has(#loading-overlay)::after {
  display: none;
}

#loading-overlay {
  background: #000;
  inset: 0;
  position: fixed;
  transition: opacity 200ms ease;
  z-index: 9999;
}

#loading-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

#game-start-button {
  background: rgb(20 24 40 / 0.92);
  border: 2px solid rgb(142 205 250 / 0.8);
  box-shadow:
    0 0 24px rgb(51 153 238 / 0.3),
    inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Jersey 10', monospace;
  font-size: clamp(2.25rem, 5vw, 4rem);
  left: 50%;
  letter-spacing: 0.08em;
  padding: 0.35em 1.25em 0.45em;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

#game-start-button:hover,
#game-start-button:focus-visible {
  background: rgb(51 153 238 / 0.3);
  border-color: #fff;
  box-shadow:
    0 0 32px rgb(51 153 238 / 0.55),
    inset 0 0 0 1px rgb(255 255 255 / 0.2);
  outline: none;
}

#game-start-button:active {
  transform: translate(-50%, -50%) scale(0.98);
}

#game-start-button[hidden] {
  display: none;
}

.loading-text {
  bottom: 2rem;
  color: #fff;
  font-family: 'Jersey 10', monospace;
  font-size: 2rem;
  left: 2rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  position: absolute;
  text-transform: uppercase;
}

.loading-bar-wrap {
  bottom: 5rem;
  left: 2rem;
  position: absolute;
  width: 240px;
}

.loading-bar {
  background: rgb(255 255 255 / 0.08);
  border: 2px solid rgb(255 255 255 / 0.28);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.4);
  height: 16px;
  overflow: hidden;
  padding: 2px;
}

.loading-bar-fill {
  background: #39e;
  box-shadow: 0 0 8px rgb(51 153 238 / 0.6);
  height: 100%;
  transition: width 160ms ease;
  width: 0%;
}

.loading-bar-fill.is-indeterminate {
  animation: loading-bar-shimmer 1.2s linear infinite;
  background-image: linear-gradient(90deg, #39e 0%, #8ecdfa 50%, #39e 100%);
  background-size: 200% 100%;
  width: 100%;
}

@keyframes loading-bar-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}