* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
  background: #0b1020;
  color: #f4f7ff;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #121a2f;
}
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(8, 12, 24, 0.72);
  text-align: center;
  padding: 24px;
}
.overlay.hidden { display: none; }
#game-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.04em;
}
#controls-hint {
  opacity: 0.8;
  font-size: 0.95rem;
}
#startButton,
#endingButton {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0b1020;
  background: linear-gradient(135deg, #7dd3fc, #a78bfa);
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 222, 128, 0.24);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
#startButton:hover,
#endingButton:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(255, 222, 128, 0.4);
}
#startButton:focus-visible,
#endingButton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
#endingScreen,
.ending-screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(24px, 7vw, 80px);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 252, 211, 0.98) 0 7%, rgba(255, 218, 126, 0.76) 16%, rgba(255, 191, 77, 0.18) 34%, transparent 54%),
    linear-gradient(108deg, rgba(255, 245, 188, 0.7) 0 2%, transparent 20%),
    linear-gradient(252deg, rgba(255, 245, 188, 0.55) 0 2%, transparent 20%),
    radial-gradient(ellipse at center, transparent 0 26%, rgba(24, 20, 18, 0.72) 58%, #07090c 86%),
    linear-gradient(#584632 0%, #17191b 58%, #080b0d 100%);
}
#endingScreen::before,
.ending-screen::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 38%, rgba(255, 247, 193, 0.3) 48%, transparent 58%),
    linear-gradient(76deg, transparent 38%, rgba(255, 247, 193, 0.22) 48%, transparent 58%);
  filter: blur(8px);
  animation: ending-light 5s ease-in-out infinite alternate;
}
#endingScreen::after,
.ending-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 16vw 7vw #050607;
}
#endingScreen.hidden,
.ending-screen.hidden { display: none; }
#endingScreen h1,
.ending-screen h1 {
  position: relative;
  z-index: 1;
  color: #ffe7a0;
  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(255, 211, 108, 0.72), 0 3px 8px #000;
}
#endingScreen p,
.ending-screen p,
.ending-message {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-top: 28px;
  color: #fff8df;
  font-size: clamp(1.05rem, 2.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.8;
  word-break: keep-all;
  text-shadow: 0 2px 8px #000, 0 0 16px rgba(255, 222, 143, 0.35);
}
@keyframes ending-light {
  from { opacity: 0.62; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.05); }
}