body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000;
  height: 100vh;
  height: 100dvh; /* Mobile browsers count the URL bar into 100vh, 100dvh excludes it */
  overflow-y: auto; /* Make body scrollable */
  overscroll-behavior: none; /* Prevent scrolling from affecting parent containers */
}

#gameContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 800px;
  padding: 10px;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  opacity: 1;
  filter: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

#gameContainer #canvasContainer {
  position: relative; /* Important: This positions the #info div correctly */
  container-type: inline-size; /* The heads-up display sizes itself against this */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 800 / 600;
  border: 5px solid white;
  padding: 5px;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  touch-action: none; /* Disable touch events */
  margin-bottom: 20px;
}

#gameContainer #canvasContainer canvas {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 800 / 600; /* Maintain a 4:3 aspect ratio */
  touch-action: none; /* Disable touch events */
}

#gameContainer #canvasContainer #info {
  position: absolute;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 10px;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  pointer-events: none; /* Never swallow a click meant for the canvas */
}

#gameContainer #canvasContainer #hud {
  position: absolute;
  top: clamp(4px, 1.4cqw, 10px);
  left: clamp(5px, 1.6cqw, 12px);
  right: clamp(5px, 1.6cqw, 12px);
  display: flex;
  flex-wrap: nowrap; /* One line only: wrapping grew the HUD down over the play area */
  gap: clamp(5px, 1.6cqw, 12px);
  align-items: center;
  box-sizing: border-box;
  max-width: calc(100% - clamp(10px, 3.2cqw, 24px));
  overflow: hidden; /* Nothing inside the HUD may escape the canvas */
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(8px, 2.1cqw, 13px);
  line-height: 1;
  text-shadow: 0 0 4px #000, 0 0 2px #000; /* Stay readable over a bright planet */
  z-index: 2;
  pointer-events: none;
}

#gameContainer #canvasContainer #hud .hud-stat {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.9cqw, 6px);
  min-width: 0; /* Let a flex item shrink below its content instead of overflowing */
  flex: 0 0 auto;
  overflow: hidden;
}

/* The experience bar is the one stat that takes up the slack in the row. */
#gameContainer #canvasContainer #hud .hud-stat-wide {
  flex: 1 1 10cqw;
  min-width: 8cqw;
  max-width: 19cqw;
}

/* The shield sizes to its pips, which the display already caps, so that the
   summary it falls back to at high capacity is not clipped away. */
#gameContainer #canvasContainer #hud .hud-stat-shield {
  flex: 0 0 auto;
}

#gameContainer #canvasContainer #hud .hud-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(6px, 1.6cqw, 10px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#gameContainer #canvasContainer #hud .hud-value {
  font-size: clamp(9px, 2.5cqw, 15px);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

#gameContainer #canvasContainer #hud .hud-bar {
  flex: 1;
  height: clamp(4px, 0.9cqw, 6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.4);
}

#gameContainer #canvasContainer #hud .hud-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: #7fff00;
  transition: width 0.2s linear;
}

#gameContainer #canvasContainer #hud .hud-pips {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.5cqw, 3px);
  min-width: 0;
  overflow: hidden;
}

#gameContainer #canvasContainer #hud .hud-pips > b {
  font-size: clamp(6px, 1.6cqw, 10px);
  font-weight: bold;
  white-space: nowrap;
}

#gameContainer #canvasContainer #hud .hud-pips > i {
  flex: 0 0 auto;
  width: clamp(5px, 1.3cqw, 8px);
  height: clamp(5px, 1.3cqw, 8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
}

#gameContainer #canvasContainer #hud .hud-pips > i.charged {
  background: #00bfff;
  border-color: #00bfff;
}

#gameContainer #header {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 5px solid white;
}

#gameContainer #header button {
  background-color: #fff;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 5px;
}

#gameContainer #header svg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

#gameContainer #header a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#gameContainer #header .animated-click {
  transform: rotate(360deg); /* Rotate the button 360 degrees on click */
}

#gameContainer #header .animated-click-end {
  transform: rotate(360deg); /* Keep the button rotated after the click */
}

#gameContainer #header #audioToggle,
#gameContainer #header #refreshButton {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  touch-action: manipulation; /* Allow touch interactions specifically for these buttons */
  flex-shrink: 0; /* Prevent the button from shrinking */
  transition: transform 0.6s; /* Add transition for the click animation */
}

#gameContainer #header #audioToggle:focus,
#gameContainer #header #refreshButton:focus {
  outline: none;
}

#gameContainer #header #title {
  color: white;
  font-family: "Arial", sans-serif;
  font-size: 24px;
  text-align: center;
  width: 100%;
  max-width: 800px;
  flex-grow: 1; /* Allow the title to take up all available space */
}

#gameContainer #messageContainer {
  width: 100%;
  height: 100%;
  max-width: 800px;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#gameContainer #messageContainer #message {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  border: 5px solid white;
  border-top: none;
  padding: 5px;
  box-sizing: border-box;
}

#gameContainer #messageContainer #message p {
  margin-top: 6px;
  margin-bottom: 6px;
}

#gameContainer #messageContainer #message .indented {
  padding-left: min(120px, 22%);
}

#gameContainer #messageContainer #message .indented-inline {
  flex-grow: 1; /* Allow the paragraph to take up the remaining space */
}

#gameContainer #messageContainer #message .timestamp {
  width: min(120px, 22%); /* Fixed width for the timestamp, capped against the column */
  color: rgb(163, 163, 163);
  flex-shrink: 0; /* Prevent the timestamp from shrinking */
}

#gameContainer #messageContainer #message .timestamp-paragraph {
  display: flex; /* Use flexbox to align the timestamp and paragraph in a row */
  align-items: flex-start; /* Align the timestamp to the top */
}

#gameContainer #messageContainer #tabs {
  display: flex;
}

#gameContainer #messageContainer .tab {
  flex: 1;
  background-color: transparent;
  color: white;
  font-family: Arial, sans-serif;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  border: none;
  outline: none;
  transition: background-color 0.3s;
}

#gameContainer #messageContainer .tab:first-child {
  border-top-left-radius: 5px;
}

#gameContainer #messageContainer .tab:last-child {
  border-top-right-radius: 5px;
}

#gameContainer #messageContainer .tab.active {
  border: 5px solid white;
  border-bottom: none;
}

#gameContainer #messageContainer .tab:not(.active) {
  border-bottom: 5px solid white;
}

#gameContainer #messageContainer .tab:not(.active).flashing {
  animation: tab-flash 1s ease-in-out; /* The animation will run once */
}

@keyframes tab-flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(255, 255, 255, 0.8); /* Flashing color */
  }
  100% {
    background-color: transparent;
  }
}

#gameContainer #messageContainer .tab:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#gameContainer #messageContainer .tab:not(.active):hover:first-child {
  border-top-left-radius: 5px;
}

#gameContainer #messageContainer .tab:not(.active):hover:last-child {
  border-top-right-radius: 5px;
}

#gameContainer #messageContainer .tab-content {
  display: none;
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 5px;
  box-sizing: border-box;
  color: white;
  font-family: Arial, sans-serif;
  white-space: pre-wrap; /* Enable word wrapping and preserve whitespace */
}

#gameContainer #messageContainer .tab-content.active {
  display: block;
  height: 100%;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent black */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it is above all other content */
  animation: fadeInOut 2s infinite; /* Animate over 2 seconds, repeat infinitely */
}

#loadingOverlay.active + #gameContainer {
  opacity: 0.3; /* Darkens the background */
  filter: blur(5px); /* Blurs the background */
}

#loadingOverlay.hidden {
  display: none;
}

#loadingOverlay #loadingMessage {
  font-size: 2em;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Small screens.

   The stylesheet above is written for a desktop window, where the 800px canvas,
   a 24px title and a 200px message box all fit at once. On a phone they do not:
   the title wrapped onto two lines and took a fifth of the screen, and in
   landscape the canvas was sized from the width alone, so it stood 553px tall in
   a 342px viewport and the game was simply off screen.
   --------------------------------------------------------------------------- */

@media (max-width: 700px), (max-height: 560px) {
  #gameContainer {
    padding: 6px;
  }

  #gameContainer #header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom-width: 3px;
  }

  #gameContainer #header #title {
    font-size: clamp(12px, 3.4vw, 20px);
    /* Two lines of title cost more than the title is worth on a phone. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #gameContainer #header svg {
    width: 20px;
    height: 20px;
  }

  #gameContainer #header button {
    margin: 0 2px;
  }

  /* Keep the two game controls at a comfortable size for a thumb even as the
     rest of the header shrinks. */
  #gameContainer #header #audioToggle,
  #gameContainer #header #refreshButton {
    font-size: 22px;
    min-width: 40px;
    min-height: 40px;
  }

  #gameContainer #canvasContainer {
    border-width: 2px;
    padding: 2px;
    margin-bottom: 8px;
  }

  #gameContainer #messageContainer {
    min-height: 0;
    font-size: 13px;
  }

  #gameContainer #messageContainer .tab {
    padding: 6px;
    font-size: 13px;
  }

  #gameContainer #messageContainer .tab.active {
    border-width: 3px;
  }

  #gameContainer #messageContainer .tab:not(.active) {
    border-bottom-width: 3px;
  }

  #gameContainer #messageContainer #message {
    border-width: 3px;
    border-top: none;
  }
}

/* Very narrow: the title is the first thing to go, so the controls keep their
   full tap area. */
@media (max-width: 380px) {
  #gameContainer #header #title {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Landscape on a phone.

   Here the height is the binding constraint and there is width to spare, so the
   canvas is sized from the height and the message box moves alongside it rather
   than below it.
   --------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {
  body {
    justify-content: flex-start;
  }

  #gameContainer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "canvas messages";
    gap: 8px;
    max-width: none;
    align-items: stretch;
  }

  #gameContainer #header {
    grid-area: header;
    margin-bottom: 0;
    max-width: none;
  }

  #gameContainer #canvasContainer {
    grid-area: canvas;
    height: 100%;
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
  }

  #gameContainer #messageContainer {
    grid-area: messages;
    height: 100%;
    max-width: none;
  }
}