* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #0d1117;
}

body {
  background: radial-gradient(ellipse at top, #161b2e 0%, #0d1117 55%, #06080c 100%);
  color: #c9d1d9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

/* El canvas interno se escala con devicePixelRatio; aquí se fija su tamaño visible
   manteniendo la proporción 400x700 y ajustándolo a la pantalla. */
#gameCanvas {
  width: min(400px, calc(100vw - 32px), calc((100vh - 32px) * 400 / 700));
  aspect-ratio: 400 / 700;
  height: auto;
  background-color: #05070a;
  border: 1px solid #30363d;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(56, 139, 253, 0.08),
    0 0 40px rgba(56, 139, 253, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.7);
  display: block;
}

/* --- Top 10 --- */
.canvas-wrap {
  position: relative;
}

.top10-btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 7px 16px;
  border-radius: 8px;
  font: bold 12px monospace;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #7dd3fc;
  background: linear-gradient(#10283a, #0a1824);
  border: 1px solid #2b6a8f;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.top10-btn[hidden] {
  display: none;
}

.top10-btn:hover,
.top10-btn:focus-visible {
  border-color: #7dd3fc;
  box-shadow: 0 0 16px rgba(125, 211, 252, 0.3);
  outline: none;
}

/* --- Aviso de nueva versión --- */
.update-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 8px;
  font: bold 11px monospace;
  white-space: nowrap;
  color: #c9d1d9;
  background: rgba(13, 17, 23, 0.92);
  border: 1px solid #3fb950;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.update-banner[hidden] {
  display: none;
}

/* Sin el botón (mientras se actualiza), el texto queda centrado */
.update-banner:has(.update-btn[hidden]) {
  padding: 9px 12px;
}

.update-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font: bold 11px monospace;
  letter-spacing: 0.06em;
  color: #0d1117;
  background: #3fb950;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.update-btn[hidden] {
  display: none;
}

.update-btn:hover,
.update-btn:focus-visible {
  background: #56d364;
  outline: none;
}

.top10-dialog {
  margin: auto;
  width: min(340px, calc(100vw - 32px));
  padding: 0;
  color: #c9d1d9;
  background: #0d1117;
  border: 1.5px solid #7dd3fc;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.top10-dialog::backdrop {
  background: rgba(3, 5, 12, 0.7);
}

.top10-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  font-family: monospace;
}

.top10-content h2 {
  text-align: center;
  font-size: 18px;
  color: #7dd3fc;
  letter-spacing: 0.08em;
}

.top10-head,
.top10-list li {
  display: grid;
  grid-template-columns: 22px 1fr 44px 124px;
  gap: 9px;
  align-items: baseline;
}

.top10-head {
  padding: 0 8px;
  font-size: 9px;
  font-weight: bold;
  color: #7d8590;
}

.top10-head > span:nth-child(n + 2),
.top10-list li > span:nth-child(n + 2) {
  text-align: right;
}

.top10-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.top10-list li {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  background: #161b22;
}

.top10-list li.is-current {
  background: #10283a;
  outline: 1px solid #2b6a8f;
}

.top10-list li.top10-empty {
  display: block;
  text-align: center;
  color: #8b949e;
  background: none;
}

.top10-pos,
.top10-date {
  color: #8b949e;
}

/* Fecha y hora en subcolumnas fijas, para que FECHA y HORA queden sobre sus datos */
.top10-head > span.top10-date,
.top10-list li > span.top10-date {
  display: grid;
  grid-template-columns: 64px 54px;
  gap: 6px;
  text-align: left;
  white-space: nowrap;
}

.top10-time {
  font-size: 11px;
  color: #6e7681;
}

.top10-score {
  font-weight: bold;
  color: #7dd3fc;
}

.top10-wins {
  color: #3fb950;
}

.top10-close {
  align-self: center;
  margin-top: 4px;
  padding: 8px 22px;
  border-radius: 8px;
  font: bold 12px monospace;
  letter-spacing: 0.08em;
  color: #58a6ff;
  background: linear-gradient(#13233a, #0b1524);
  border: 1px solid #1f4f8f;
  cursor: pointer;
}

/* --- Controles táctiles (solo en pantallas táctiles) --- */
:root {
  --controls-h: 0px;
}

.touch-controls {
  display: none;
  gap: 10px;
  width: 100%;
}

.control-btn {
  height: 64px;
  border-radius: 12px;
  font: bold 16px monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 60ms ease, background-color 120ms ease, opacity 120ms ease;
}

.control-btn--thrust {
  flex: 2;
  color: #f2cc60;
  background: linear-gradient(#2a2213, #17130b);
  border: 1px solid #8a6d1f;
}

.control-btn--thrust.is-active {
  color: #1a1306;
  background: linear-gradient(#ffd27a, #f29a3d);
  border-color: #ffd27a;
  box-shadow: 0 0 24px rgba(255, 170, 80, 0.45);
  transform: scale(0.97);
}

.control-btn--reset {
  flex: 1;
  color: #58a6ff;
  background: linear-gradient(#13233a, #0b1524);
  border: 1px solid #1f4f8f;
}

.control-btn--reset:active:not(:disabled) {
  transform: scale(0.97);
}

.control-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (pointer: coarse) {
  :root {
    --controls-h: 74px;
  }

  body {
    min-height: 100dvh;
  }

  .game-container {
    gap: 10px;
    padding: 10px;
  }

  #gameCanvas {
    touch-action: none;
    width: min(400px, calc(100vw - 20px), calc((100dvh - 20px - var(--controls-h)) * 400 / 700));
  }

  .touch-controls {
    display: flex;
    width: min(400px, calc(100vw - 20px), calc((100dvh - 20px - var(--controls-h)) * 400 / 700));
  }
}