* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #1a0333, #05000c 70%);
  color: #fff;
  font-family: 'Arial Black', system-ui, sans-serif;
  overflow: hidden;
}

/* PLEIN ÉCRAN. L'ancienne règle était `#wrap { max-width: 960px }` : le jeu restait une petite boîte
   de 960 px au centre, quelle que soit la taille de l'écran. Ici le canvas prend TOUTE la place
   disponible en gardant son 16:9 — `min()` choisit la contrainte qui mord (largeur sur un écran
   large, hauteur sur un écran haut), ce qui donne un letterbox propre sans une ligne de JavaScript.
   Le canvas garde ses 960x540 INTERNES : `fight.js` dessine toujours dans le même repère, et
   `_canvasPt` convertit déjà les coordonnées tactiles via getBoundingClientRect(), donc l'échelle
   CSS n'affecte ni la simulation ni les commandes. */
#wrap {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
#c {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: block;
  background: #05000c;
  box-shadow: 0 0 90px -20px rgba(255, 46, 196, 0.45);
  image-rendering: auto;
}

/* L'aide passe en surimpression au lieu d'occuper de la hauteur sous le jeu : c'est cette hauteur
   qui empêchait le canvas de remplir l'écran. Repliée par défaut, elle s'ouvre au survol ou au clic. */
#hint {
  position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%);
  max-width: min(92vw, 760px);
  background: rgba(8, 6, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 500;
  color: #b9a9ff; line-height: 1.55;
  max-height: 22px; overflow: hidden;
  transition: max-height .18s ease, opacity .18s ease;
  opacity: .55; cursor: pointer;
}
#hint::before {
  content: 'TOUCHES ▾'; display: block; font-weight: 800; color: #fff; letter-spacing: .5px;
}
#hint:hover, #hint.open { max-height: 40vh; opacity: 1; }
#hint b { color: #fff; }

/* Bouton plein écran natif — en haut à gauche pour ne pas gêner le bouton de duel (en haut à droite). */
#fsbtn {
  position: fixed; top: 12px; left: 12px; z-index: 9997;
  background: rgba(8, 6, 18, 0.8); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  padding: 9px 13px; font: 800 12px/1 system-ui, sans-serif; letter-spacing: .3px;
  cursor: pointer;
}
#fsbtn:hover { background: rgba(28, 20, 48, 0.92); }

/* En plein écran natif, on efface tout le décor autour du jeu. */
:fullscreen #hint, :fullscreen #fsbtn { opacity: 0; pointer-events: none; }
:fullscreen #hint:hover { opacity: 1; pointer-events: auto; }