/* Pixel-style mobile portrait. Canvas is 400x720 virtual; we letterbox
   into whatever portrait viewport we get. Backgrounds use the same
   palette as the game so the letterboxing reads as part of the world. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #050810;
  color: #e8ecf5;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
               "Roboto Mono", "Liberation Mono", Menlo, Consolas, monospace;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#root {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game {
  /* Crisp pixel scaling — every browser flavour. */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Letterbox: fit by height, keep 400:720 aspect ratio. */
  height: 100%;
  width: auto;
  max-width: 100vw;
  background: #0a0e1a;
  display: block;
}

@media (orientation: landscape) {
  #game { height: auto; max-height: 100vh; width: 100%; }
}

/* Overlays — all centered modals sharing a base. */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 14px;
  z-index: 10;
}

.overlay.hidden { display: none; }

.overlay h1 {
  font-size: 36px;
  margin: 0 0 4px;
  letter-spacing: 4px;
  color: #f5d76e;
  text-shadow:
    2px 2px 0 #6b4f00,
    -2px 0 0 #6b4f00;
}

.overlay p { margin: 0; line-height: 1.45; max-width: 320px; }
.tagline { color: #c0c8d8; font-size: 14px; }
.controls { color: #8a93a6; font-size: 12px; margin-top: 6px; }
.stats { color: #e8ecf5; font-size: 14px; white-space: pre-line; }

/* Small red subtitle under the crash-title — used only for the
   中国尊 tower hit ("我们不支持恐怖主义行为"). Empty for all other
   crash reasons. */
.crash-subtitle {
  margin: -6px 0 4px;
  font-size: 13px;
  color: #e07868;
  letter-spacing: 1px;
  min-height: 1.4em;
}
.crash-subtitle:empty { display: none; }

.name-label {
  font-size: 11px;
  color: #8a93a6;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
}

#finish-name {
  width: 86%;
  max-width: 320px;
  padding: 10px 12px;
  background: #0a0e1a;
  border: 2px solid #2a3450;
  color: #e8ecf5;
  font-family: inherit;
  font-size: 14px;
  border-radius: 0;
  text-align: center;
}

#finish-name:focus { outline: none; border-color: #f5d76e; }

button {
  padding: 12px 24px;
  background: #f5d76e;
  border: 2px solid #6b4f00;
  color: #1a1408;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
  min-width: 160px;
  transition: transform 80ms ease;
}

button:active { transform: translateY(2px); }

button.ghost {
  background: transparent;
  color: #e8ecf5;
  border-color: #2a3450;
}

/* Leaderboard list */
.board-list {
  margin: 0;
  padding: 0 12px;
  list-style: none;
  font-size: 12px;
  width: 86%;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  text-align: left;
  border: 2px solid #2a3450;
  background: #0a0e1a;
  padding: 8px 12px;
}

.board-list li {
  display: grid;
  grid-template-columns: 36px 1fr 64px;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #1f2a44;
  color: #c0c8d8;
}

.board-list li:last-child { border-bottom: none; }

.board-list li .rank { color: #f5d76e; font-weight: 700; }
.board-list li .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list li .time { text-align: right; color: #e8ecf5; }
.board-list .empty { color: #8a93a6; grid-column: 1 / -1; text-align: center; padding: 16px 0; }

.board-list li.you { background: rgba(245, 215, 110, 0.08); }
.board-list li.you .name { color: #f5d76e; }

/* Honor certificate — shown after a successful run is submitted.
   Cream-paper plaque with a doubled gold border, decorative stars,
   and a faux-stamp "seal" in the corner. */
.certificate {
  background: #fff7e0;
  color: #2a1a08;
  width: 88%;
  max-width: 320px;
  padding: 24px 22px 28px;
  border: 4px double #c89a3a;
  outline: 1px solid #7a5e2a;
  outline-offset: 6px;
  position: relative;
  text-align: center;
  box-shadow: 0 8px 28px rgba(5, 10, 24, 0.45);
}
.cert-stars {
  color: #c89a3a;
  letter-spacing: 6px;
  font-size: 16px;
  margin-bottom: 6px;
}
.cert-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #7a0c0a;
}
.cert-body {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
}
.cert-body #cert-name {
  font-weight: 800;
  color: #c41e1a;
  padding: 0 4px;
}
.cert-score {
  margin: 0 0 16px;
  font-size: 13px;
  color: #5e4221;
}
.cert-signer {
  margin: 14px 0 0;
  font-size: 13px;
  color: #2a1a08;
  letter-spacing: 2px;
  border-top: 1px dotted #c89a3a;
  padding-top: 12px;
}
.cert-seal {
  position: absolute;
  bottom: 18px;
  right: -8px;
  background: #c41e1a;
  color: #fff7e0;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #7a0c0a;
  transform: rotate(-12deg);
  box-shadow: 2px 2px 0 #7a0c0a;
}

/* Share-card modal — shows the printable QR poster and two
   actions: save the image to the user's album (via Web Share /
   download) or run the standard link-share flow. */
.share-title {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: 6px;
  color: #f5d76e;
}

#share-card-img {
  /* Shrink to whatever vertical space is left after the title and
     button rows so the ghost 关闭 button stays visible on short
     viewports (iPhone SE / landscape browsers). */
  width: auto;
  max-width: 82%;
  max-height: 54vh;
  height: auto;
  object-fit: contain;
  border: 2px solid #c89a3a;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(5, 10, 24, 0.5);
  image-rendering: pixelated;
  background: #fff8e8;
  display: block;
}

/* Safety net — if the modal still overflows on a very small
   viewport (e.g. landscape iPhone), let the whole overlay scroll
   so the buttons remain reachable. */
#share-overlay {
  overflow-y: auto;
  padding: 16px 24px 20px;
  gap: 10px;
}

.share-actions {
  display: flex;
  gap: 10px;
  width: 86%;
  max-width: 360px;
  margin-top: 6px;
}

.share-actions button {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 8px;
  font-size: 13px;
  letter-spacing: 1px;
}

/* "Add to home screen" bubble — anchored to the bottom of the game
   viewport, pointing down to where the browser's share button lives
   on iOS Safari and most mobile browsers. */
.install-bubble {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 30;
  background: #fff;
  color: #1b2538;
  padding: 12px 38px 14px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(5, 10, 24, 0.4);
  max-width: 86%;
  width: max-content;
  text-align: center;
  animation: install-bubble-pulse 1.6s ease-in-out infinite alternate;
}

.install-bubble.hidden { display: none; }

.install-bubble-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #c12625;
}

.install-bubble-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #4a5a72;
}

.install-bubble-arrow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 11px solid #fff;
  filter: drop-shadow(0 3px 2px rgba(5, 10, 24, 0.25));
}

#install-bubble-close {
  position: absolute;
  top: 2px;
  right: 4px;
  background: transparent;
  border: none;
  color: #8a93a6;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
#install-bubble-close:hover { color: #1b2538; }

@keyframes install-bubble-pulse {
  from { transform: translate(-50%, 0); }
  to   { transform: translate(-50%, -4px); }
}