/* Minimal dark theme. The near-black background reinforces the "you can't see
   the maze" fog-of-war theme from GAME_DESIGN.md before any game art exists. */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
  background: #0a0a0f;
  color: #d8d8e0;
  font-family: system-ui, sans-serif;
  /* Stop Android's grey tap-flash and accidental text selection while playing,
     which made touches feel laggy/janky. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#hud {
  display: flex;
  gap: 24px;
  font-size: 16px;
  letter-spacing: 0.5px;
}

/* A faint border so the canvas edge is visible against the dark page. The
   drawing buffer stays 480x480 (set in HTML); CSS scales the display size so it
   fits small screens. vmin keeps it square and inside both viewport axes.
   touch-action:none lets swipe gestures work without the page scrolling. */
#game {
  width: min(90vmin, 480px);
  height: min(90vmin, 480px);
  background: #111118;
  border: 1px solid #2a2a3a;
  touch-action: none;
}

#message {
  min-height: 1.4em;
  margin: 0;
  font-size: 18px;
}

/* Loss message stands out in red, win message in green. */
#message.lost {
  color: #ff6b6b;
}

#message.won {
  color: #5fd18c;
}

/* Simple button for advancing to the next level. */
#next-level {
  padding: 8px 18px;
  font-size: 15px;
  color: #d8d8e0;
  background: #1e1e2a;
  border: 1px solid #3a3a4e;
  border-radius: 6px;
  cursor: pointer;
}

#next-level:hover {
  background: #2a2a3a;
}

/* Title + instructions overlay, shown until the player presses Start. */
#title-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 15, 0.97);
  z-index: 10;
}

#title-screen[hidden] {
  display: none;
}

#title-screen .panel {
  max-width: 440px;
  padding: 28px 32px;
  text-align: center;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  background: #111118;
}

#title-screen h1 {
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: 2px;
}

#title-screen .tagline {
  margin: 0 0 18px;
  color: #a8a8bc;
}

#title-screen .rules {
  margin: 0 0 18px;
  padding-left: 20px;
  text-align: left;
  line-height: 1.6;
  color: #c8c8d6;
}

#title-screen .controls {
  margin: 0 0 22px;
  font-size: 14px;
  color: #8a8aa0;
}

#start-game {
  padding: 10px 28px;
  font-size: 16px;
  color: #0a0a0f;
  background: #5ab0ff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#start-game:hover {
  background: #78bfff;
}

/* Keep a tall title panel usable on short screens. */
#title-screen .panel {
  max-height: 92vh;
  overflow-y: auto;
}

/* --- landing-page QR code (desktop) --------------------------------------- */
#qr-block {
  margin: 0 0 20px;
}

#qr-block[hidden] {
  display: none;
}

.qr-label {
  margin: 0 0 10px;
  font-size: 14px;
  color: #a8a8bc;
}

/* White padding behind the QR so scanners get the required light quiet zone. */
#qr-code {
  display: inline-block;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  line-height: 0;
}

#qr-code svg {
  display: block;
  width: 168px;
  height: 168px;
}

.qr-url {
  margin: 10px 0 0;
  font-size: 12px;
  color: #6f6f86;
  word-break: break-all;
}

/* --- on-screen touch controls (mobile) ------------------------------------ */
#touch-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}

#touch-controls[hidden] {
  display: none;
}

/* D-pad laid out on a 3x3 grid; only the four arrows are placed. */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
}

.dpad-btn {
  font-size: 20px;
  color: #d8d8e0;
  background: #1e1e2a;
  border: 1px solid #3a3a4e;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation; /* no double-tap zoom delay */
}

.dpad-btn:active {
  background: #33334a;
}

.dpad-btn.up { grid-column: 2; grid-row: 1; }
.dpad-btn.left { grid-column: 1; grid-row: 2; }
.dpad-btn.right { grid-column: 3; grid-row: 2; }
.dpad-btn.down { grid-column: 2; grid-row: 3; }

#ping-btn {
  width: 92px;
  height: 92px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0a0a0f;
  background: #5ab0ff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}

#ping-btn:active {
  background: #78bfff;
}

/* On phones, tighten vertical spacing so the maze + controls both fit. */
@media (max-width: 560px) {
  body {
    justify-content: flex-start;
    gap: 10px;
  }

  #title-screen .panel {
    padding: 22px 20px;
  }

  #title-screen h1 {
    font-size: 28px;
  }
}