* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #e9e2c6;
  font-family: 'Courier New', Consolas, monospace;
  color: #ffffff;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Kontener gry ---------- */

#game-container {
  position: relative;
  width: 90%;
  height: 50%;
  overflow: hidden;
  background: #fafafa;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

/* ---------- Nakładka z wynikiem i komunikatami ---------- */

#ui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#score,
#hi-score {
  position: absolute;
  top: clamp(8px, 3vh, 20px);
  font-size: clamp(13px, 2.1vh, 19px);
  font-weight: bold;
  letter-spacing: 2px;
}

#score { right: clamp(10px, 3vw, 24px); }

#hi-score {
  right: clamp(85px, 13vw, 130px);
  opacity: 0.7;
}

#start-message,
.go-title,
.go-sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
}

#start-message {
  top: 42%;
  font-size: clamp(12px, 2vh, 30px);
}

.go-title {
  top: 36%;
  font-size: clamp(20px, 4.2vh, 32px);
  font-weight: bold;
  letter-spacing: 4px;
}

.go-sub {
  top: calc(36% + 38px);
  font-size: clamp(11px, 1.8vh, 15px);
}

.hidden { display: none !important; }

/* ---------- Niebieska poświata z lewej strony (światła policyjne) ---------- */

.police-light-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 60vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 100% at 0% 50%,
    rgba(25, 90, 255, 0.8),
    rgba(25, 90, 255, 0) 70%
  );
  mix-blend-mode: screen;
  animation: policeFlash 1.1s infinite steps(1);
  z-index: 50;
}

@keyframes policeFlash {
  0%   { opacity: 0.10; }
  8%   { opacity: 0.90; }
  16%  { opacity: 0.15; }
  24%  { opacity: 0.80; }
  32%  { opacity: 0.10; }
  55%  { opacity: 0.10; }
  63%  { opacity: 0.60; }
  71%  { opacity: 0.10; }
  100% { opacity: 0.10; }
}

@media (prefers-reduced-motion: reduce) {
  .police-light-left {
    animation: none;
    opacity: 0.30;
  }
}