*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080c0d;
}

canvas {
  display: block;
  touch-action: none;
}

.flight-page canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
}

@font-face {
  font-family: 'ZX Spectrum';
  src: url('zxSpectrumStrict.woff2') format('woff2');
  font-display: block;
}

:root {
  --line-color: #2a5a5e;
}

#quote-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

#quote-overlay.visible {
  display: flex;
}

.quote-box {
  max-width: min(90vw, 40em);
  padding: 16px 24px;
  background: rgba(8, 12, 13, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(2px);
  color: var(--line-color);
  font-family: 'ZX Spectrum', monospace;
  font-size: 31.36px;
  line-height: 2;
  image-rendering: pixelated;
  transform: translateY(0);
  transition:
    background-color 2.2s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 2.2s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 2.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.quote-fade-part {
  opacity: 1;
}

#quote-overlay.fading .quote-fade-part {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fade-delay, 0ms);
}

#quote-overlay.fading .quote-box {
  background: rgba(8, 12, 13, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transform: translateY(6px);
}

#quote-overlay.glowing:not(.fading) .quote-box {
  color: #b8fcff;
  background: rgba(8, 12, 13, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-shadow: 0 0 10px rgba(184, 252, 255, 0.55);
  transition:
    color 0.6s ease,
    background-color 0.6s ease,
    text-shadow 0.6s ease,
    -webkit-backdrop-filter 0.6s ease,
    backdrop-filter 0.6s ease;
}

.quote-text {
  display: inline;
}

.quote-cursor {
  display: inline-block;
  width: 1ch;
  height: 1em;
  margin-left: 0;
  vertical-align: text-bottom;
  background: currentColor;
  animation: zx-cursor-blink 1s step-end infinite;
}

#quote-overlay.fading .quote-cursor {
  animation: none;
}

@keyframes zx-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.quote-author {
  display: block;
  margin-top: 16px;
}

#score-hud {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  padding: 8px 14px;
  border-radius: 4px;
  background: rgba(8, 12, 13, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: 'ZX Spectrum', monospace;
  color: #b8fcff;
  text-shadow: 0 0 10px rgba(184, 252, 255, 0.55);
}

#score-value {
  font-size: 28px;
  letter-spacing: 0.08em;
}

#score-delta {
  font-size: 18px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}

#score-delta.visible {
  opacity: 1;
  transform: translateY(0);
}

#score-delta.gain {
  color: #b8fcff;
}

#score-delta.loss {
  color: #c45a5a;
}