* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px;
  font-family: system-ui, sans-serif;
  background: #1d2433;
  color: #f2f2f2;
}

main { max-width: 640px; margin: 0 auto; }

.stage { position: relative; }

canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  image-rendering: pixelated;
}

/* Panneau de fin, posé par-dessus le jeu */
#end {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(20, 24, 36, 0.88);
  border-radius: 8px;
  text-align: center;
}
#end[hidden] { display: none; }
#end h2, #end p { margin: 0; }
#message { min-height: 1.2em; font-size: 0.9em; }

input, button {
  font: inherit;
  padding: 8px 12px;
  border-radius: 6px;
  border: 0;
}
button { background: #ffd23f; color: #1d1d1d; font-weight: bold; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }

.help { font-size: 0.9em; opacity: 0.8; }

/* Boutons tactiles : seulement sur les écrans tactiles */
.touch { display: none; gap: 12px; margin-top: 12px; }
.touch button {
  width: 72px;
  height: 72px;
  font-size: 28px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.touch .jump { margin-left: auto; }

@media (pointer: coarse) {
  .touch { display: flex; }
  .help { display: none; }
}

.board ol { padding-left: 1.6em; }
.board li { padding: 2px 0; }