* { 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; }


/* ⚠️ LES BOUTONS DOM RECOUVRAIENT LE HUD. « PLEIN ÉCRAN » (haut-gauche) et « ONLINE DUEL »
   (haut-droite, netplay.js) sont en `position: fixed; top: 12px` — exactement là où le canvas dessine
   le nom des combattants et la barre de vie de P2. Visible sur TOUS les écrans, et donc sur chaque
   capture partagée. Ils servent au menu, pas pendant un round : on les efface le temps du combat
   (`in-fight` est posée par fight.js), sans les supprimer — ils reviennent entre deux matchs. */
body.in-fight #fsbtn,
body.in-fight #mf-duel-btn { opacity: 0 !important; pointer-events: none !important; }


/* WANT YOUR MEME HERE? — en bas a droite : le haut est pris (plein ecran, duel), le bas-centre par
   l'aide. Efface pendant un round, comme les deux autres boutons. */
#mf-sponsor-btn {
  position: fixed; right: 12px; bottom: 12px; z-index: 9997;
  background: linear-gradient(135deg, #ff2ec4, #7b2cff); color: #fff; border: 0;
  border-radius: 11px; padding: 11px 15px; font: 800 12px/1 system-ui, sans-serif;
  letter-spacing: .3px; cursor: pointer; box-shadow: 0 4px 16px #0007;
}
#mf-sponsor-btn:hover { transform: translateY(-1px); }
body.in-fight #mf-sponsor-btn, :fullscreen #mf-sponsor-btn { opacity: 0; pointer-events: none; }
#mf-sponsor {
  position: fixed; inset: 0; z-index: 10000; background: rgba(5, 0, 12, .78);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#mf-sponsor[hidden] { display: none; }
#mf-sponsor .mf-card {
  position: relative; max-width: 460px; width: 100%; background: #140a26;
  border: 1px solid rgba(255, 46, 196, .45); border-radius: 16px; padding: 22px 22px 18px;
  font-family: system-ui, sans-serif; color: #e9e2ff; line-height: 1.5;
  box-shadow: 0 0 60px -10px rgba(255, 46, 196, .5);
}
#mf-sponsor h2 { margin: 0 0 8px; font: 900 20px/1.2 'Arial Black', system-ui; color: #ffd23c; }
#mf-sponsor ul { padding-left: 18px; margin: 8px 0; }
#mf-sponsor li { margin: 4px 0; }
#mf-sponsor .mf-founders { color: #ff7ae0; font-weight: 700; margin: 10px 0 4px; }
#mf-sponsor .mf-rules { font-size: 12px; opacity: .7; }
#mf-sponsor .mf-go {
  display: block; text-align: center; margin-top: 12px; background: #ffd23c; color: #17131f;
  text-decoration: none; font-weight: 800; border-radius: 10px; padding: 11px;
}
#mf-sponsor .mf-x {
  position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #fff;
  font-size: 24px; cursor: pointer; opacity: .7;
}