* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #030612;
  color: #ecf5ff;
  font-family: system-ui, sans-serif;
}

.frame {
  width: min(
    calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),
    calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
  );
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(ellipse at bottom, #18376b, #080e26 70%);
}

h1 { font-size: clamp(1.5rem, 6vmin, 4rem); }

button {
  padding: .65em 1.4em;
  font: inherit;
  color: inherit;
  background: #193b72;
  border: 1px solid #90c5ff;
  border-radius: .5em;
  cursor: pointer;
}

.rotate { display: none; }

@media (orientation: portrait) {
  .frame { display: none; }
  .rotate { display: block; text-align: center; }
}

.frame { position: relative; }
#play-screen { position: absolute; inset: 0; overflow: hidden; }
#arena { display: block; width: 100%; height: 100%; touch-action: manipulation; cursor: crosshair; }
#gun { cursor: default; }
#back { position: absolute; top: 3%; right: 3%; font-size: clamp(.65rem, 2.4vmin, 1rem); }
#score {
  position: absolute;
  bottom: 4%;
  right: 58%;
  width: 23%;
  display: flex;
  gap: 3%;
  padding: 1%;
  background: #060b12;
  border: 2px solid #4686d2;
  border-radius: .45em;
  cursor: default;
}
#score svg { width: 14%; fill: #c3ff58; filter: drop-shadow(0 0 2px #9cfc40); }
[hidden] { display: none !important; }

#play-screen { background: #091a39; transition: background-color 1.8s ease; }
#play-screen[data-area="1"] { background-color: #103831; }
#play-screen[data-area="2"] { background-color: #301431; }
#scenery path { opacity: 0; transition: opacity 1.8s ease; }
.scenery-base { fill: #5076a3; }
.scenery-planet { fill: #42775e; }
.scenery-fortress { fill: #864469; }
#play-screen[data-area="0"] .scenery-base,
#play-screen[data-area="1"] .scenery-planet,
#play-screen[data-area="2"] .scenery-fortress { opacity: .55; }

.announcement {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #edffb0;
  text-shadow: 0 0 .35em #61b840, 0 .06em .1em #000;
  font-size: clamp(2rem, 12vmin, 6rem);
  font-weight: 800;
}
#final-score { font-size: clamp(1.2rem, 6vmin, 3rem); font-weight: 700; }

[data-hit-glow] {
  filter: drop-shadow(0 0 4px #ff3b3b) drop-shadow(0 0 9px #ff2020);
}
[data-hit-glow] > :first-child { fill: #ff2929; }
[data-points="50000"][data-hit-glow] > :first-child { fill: transparent; }
[data-points="50000"][data-hit-glow] > :last-child { fill: #ff2929; }

#pause-menu {
  max-width: 95%;
  max-height: 95%;
  overflow: auto;
  background: #101c35;
  color: inherit;
  border: 1px solid #6b9bdd;
  border-radius: .7em;
}
#pause-menu::backdrop { background: rgb(0 0 0 / 65%); }
#pause-menu button { margin: .15em; }

dialog {
  max-width: min(36rem, 94vw);
  max-height: 90dvh;
  overflow: auto;
  background: #101c35;
  color: #ecf5ff;
  border: 1px solid #6b9bdd;
  border-radius: .7em;
}
dialog::backdrop { background: rgb(0 0 0 / 65%); }
dialog label { display: block; margin: .5em 0; }
dialog button, #title-screen button { margin: .15em; }
button:disabled { opacity: .5; cursor: default; }
#result-screen { max-height: 100%; overflow: auto; }

body {
  background:
    repeating-linear-gradient(90deg, transparent 0 94px, #7794aa22 95px 98px),
    repeating-linear-gradient(0deg, transparent 0 61px, #08122280 62px 65px),
    radial-gradient(ellipse at center, #4d6378 0%, #243b53 58%, #14273c 100%);
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #e7ad50 0 2px, transparent 2px) left 2vw center / 4vw 44% no-repeat,
    linear-gradient(270deg, #7ce9f3 0 2px, transparent 2px) right 2vw center / 4vw 44% no-repeat;
  box-shadow: inset 0 0 1.4rem #0b1726;
}
.frame {
  box-shadow: 0 0 0 3px #8ba6bd, 0 0 0 8px #263e55, 0 0 0 10px #182b3f;
}
#play-screen, #arena { touch-action: none; overscroll-behavior: none; }
#speed-control {
  position: absolute;
  top: 3%;
  left: 3%;
  padding: .35em .55em;
  border-radius: .35em;
  background: #10223c;
  font-size: clamp(.65rem, 2.4vmin, 1rem);
}
#speed { font: inherit; color: inherit; background: #193b72; }
#rank-name { font-size: 16px; }