* { 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. */
/* ⚠️ iOS Safari : `100vh` = la hauteur comme si la barre du navigateur etait repliee, donc le bas du canvas (et le
   bouton SPECIAL) passait sous la barre en paysage. `dvh` suit la hauteur reellement visible ; la
   ligne `vh` reste en repli pour les navigateurs qui ne connaissent pas `dvh`. */
#wrap {
  width: 100vw; height: 100vh; height: 100dvh;
  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));
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, 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: 'CONTROLS ▾'; 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; }

/* SON (25/10/2026) : couper / remettre (touche M), sous le bouton plein ecran. Efface pendant un round
   comme les autres (il recouvrirait le nom et la barre de vie de P1), SAUF pendant la demo : c'est la
   qu'on veut pouvoir couper le son sans la quitter (`in-demo` est posee par fight.js). Tant que le
   navigateur bloque l'audio (aucun geste encore), il pulse doucement et dit « TAP FOR SOUND ». */
#mf-sound-btn {
  position: fixed; top: 54px; 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: 8px 12px; font: 800 12px/1 system-ui, sans-serif; letter-spacing: .3px;
  cursor: pointer; touch-action: manipulation;
}
#mf-sound-btn:hover { background: rgba(28, 20, 48, 0.92); }
#mf-sound-btn[data-state="off"] { color: #9b93b8; }
#mf-sound-btn[data-state="locked"] { border-color: rgba(255, 210, 60, 0.6); animation: mf-snd-pulse 1.6s ease-in-out infinite; }
@keyframes mf-snd-pulse { 50% { box-shadow: 0 0 14px rgba(255, 210, 60, 0.55); } }
body.in-fight:not(.in-demo) #mf-sound-btn { opacity: 0 !important; pointer-events: none !important; }
/* (revue Fable 25/10) en paysage sur telephone il recouvrait la vignette FWOG du choix et la barre de P1 :
   il n'existe que sur le titre et pendant la demo. */
body:not(.on-title):not(.in-demo) #mf-sound-btn { opacity: 0 !important; pointer-events: none !important; }
:fullscreen #mf-sound-btn { opacity: .45; }
:fullscreen #mf-sound-btn:hover { opacity: 1; }


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

/* ── LOT DE LA SEMAINE 1 (27/10/2026) ───────────────────────────────────────────────────────────────── */
/* La promesse, en pied de page a gauche (le bas-centre est a l'aide, le bas-droit au bouton sponsor). */
#mf-footer {
  position: fixed; left: 12px; bottom: 14px; z-index: 9996;
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: .3px; color: #7dffb0; opacity: .75;
  pointer-events: none;
}
body.in-fight #mf-footer, :fullscreen #mf-footer { opacity: 0; }
/* Le lien du scanner, seulement sur les ecrans de fin (`on-end`), au-dessus de l'aide, discret. */
#mf-lesson-link {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 9997;   /* top/left poses par fight.js (placeLessonLink) */
  display: none; padding: 7px 12px; border-radius: 9px; background: rgba(8, 6, 18, 0.85);
  border: 1px solid rgba(125, 255, 176, 0.45); color: #7dffb0; text-decoration: none;
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: .3px;
}
body.on-end #mf-lesson-link { display: block; }
body.on-end #hint { opacity: 0; pointer-events: none; }   /* le lien prend sa place sur les ecrans de fin */
#mf-lesson-link:hover { background: rgba(28, 20, 48, 0.95); }
/* La porte mobile : plein ecran, au-dessus de tout (le salon de duel est a 9999). */
#mf-mobile-gate {
  position: fixed; inset: 0; z-index: 10001; overflow-y: auto; background: rgba(8, 2, 18, 0.97);
  display: flex; padding: 14px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#mf-mobile-gate[hidden] { display: none; }
#mf-mobile-gate .mf-gate-card { margin: auto; max-width: 520px; width: 100%; text-align: center; color: #e9e2ff; }
#mf-mobile-gate img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 40px -10px rgba(255, 46, 196, .6); }
#mf-mobile-gate h2 { font: 900 19px/1.25 system-ui, sans-serif; color: #fff; margin: 14px 0 8px; }
#mf-mobile-gate p { font-size: 14px; line-height: 1.45; margin: 0 0 14px; color: #c9bff0; }
#mf-gate-copy {
  display: block; width: 100%; padding: 13px; border: 0; border-radius: 11px; cursor: pointer;
  background: #ffd23c; color: #17131f; font: 900 15px/1 system-ui, sans-serif; margin-bottom: 12px;
}
#mf-gate-bot { display: block; color: #7dffb0; font-weight: 800; font-size: 13px; margin-bottom: 14px; }
#mf-gate-try { display: inline-block; color: #9b93b8; font-size: 13px; }
#mf-mobile-gate .mf-gate-free { margin-top: 14px; font-weight: 800; color: #7dffb0; font-size: 12px; }

/* ── QA VISUELLE DU 28/10/2026 ─────────────────────────────────────────────────────────────────────── */
/* L'aide (CONTROLS) se posait sur les pieds des combattants pendant le round : effacee en combat (la carte
   HOW TO FIGHT du 1er combat dit deja les touches) ; elle revient sur les menus. */
body.in-fight #hint { opacity: 0; pointer-events: none; }
/* En plein ecran 16:9 il n'y a plus de bande noire sous le canvas : l'aide recouvrait la pastille DIFFICULTY de
   l'ecran de choix (qui a ses propres consignes) et le bas de la carte. Elle ne vit plus que sur le titre. */
body:not(.on-title) #hint { opacity: 0; pointer-events: none; }
/* Pendant la DEMO, le bouton son recouvrait le nom et la barre de vie de P1 : en bas a droite (le bouton
   sponsor y est efface pendant un combat), loin du HUD et du petit logo de la demo (bas-gauche). */
body.in-demo #mf-sound-btn { top: auto; bottom: 14px; left: auto; right: 12px; }
/* TELEPHONE EN PAYSAGE (hauteur <= 500 px, « Try anyway » / ?play=1) : les boutons DOM a taille de bureau
   couvraient le titre, les vignettes et la citation de fin (planche mob_land de la QA). Plus petits ; le bouton
   sponsor et la promesse du pied de page (deja dite sur le titre, dans le canvas) disparaissent. */
@media (max-height: 500px) {
  #fsbtn, #mf-sound-btn { padding: 6px 9px; font-size: 10px; border-radius: 8px; }
  #fsbtn { top: 8px; left: 8px; }
  #mf-sound-btn { top: 38px; left: 8px; }
  #mf-duel-btn { top: 8px !important; right: 8px !important; padding: 7px 10px !important; font-size: 11px !important; }
  #mf-sponsor-btn, #mf-footer { display: none; }
}

/* ── VERSION MOBILE (28/10/2026) ───────────────────────────────────────────────────────────────────── */
/* Pas de zoom au double-tap, pas de defilement ni de pincement sur le jeu (le salon de duel et les fenetres
   gardent leur propre defilement : ce sont des conteneurs a part). */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
#wrap, #c { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch-ui { -webkit-user-select: none; user-select: none; }
/* LE CALQUE DES COMMANDES : du DOM par-dessus le canvas ET les bandes noires du letterbox (les pouces y vont).
   pointer-events: none — les doigts sont lus par les gestionnaires de window (fight.js, COMMANDES TACTILES). */
#mf-touch { position: fixed; inset: 0; z-index: 9990; pointer-events: none; display: none; touch-action: none; }
body.touch-ui.in-fight:not(.in-demo) #mf-touch { display: block; }
.mf-stick { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 70%); opacity: .55; }
.mf-stick.on { opacity: 1; border-color: rgba(255, 255, 255, 0.55); }
.mf-stick.guard { border-color: #5cc8ff; box-shadow: 0 0 22px rgba(92, 200, 255, .55), inset 0 0 18px rgba(92, 200, 255, .35); }
.mf-knob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.42); border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.mf-stick-lab { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font: 900 12px/1 system-ui, sans-serif;
  letter-spacing: .6px; color: #fff; text-shadow: 0 1px 3px #000; }
.mf-stick.guard .mf-stick-lab { color: #8fdcff; }
.mf-tbtn { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 30%, transparent); border: 2.5px solid color-mix(in srgb, var(--c) 85%, white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4); opacity: .78; transition: transform .05s, opacity .05s; }
@supports not (background: color-mix(in srgb, red 30%, transparent)) { .mf-tbtn { background: rgba(255, 255, 255, .16); border-color: var(--c); } }
.mf-tbtn span { font-weight: 900; letter-spacing: .5px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-family: system-ui, sans-serif; }
.mf-tbtn.on { transform: scale(.93); opacity: 1; background: color-mix(in srgb, var(--c) 70%, transparent); }
.mf-tbtn.cd { opacity: .38; }
.mf-seam { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .35); }
.mf-seam.on { background: rgba(255, 107, 208, .55); border-color: #ff6bd0; }
/* ❚❚ PAUSE : sous le chrono (jamais sur les barres de vie), solo seulement */
#mf-pause-btn { position: fixed; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; display: none;
  background: rgba(8, 6, 18, .55); color: #fff; border: 1.5px solid rgba(255, 255, 255, .35);
  font: 900 13px/1 system-ui, sans-serif; letter-spacing: -1px; padding: 0; cursor: pointer; touch-action: manipulation; }
body.touch-ui.in-fight:not(.in-demo):not(.net-on):not(.paused) #mf-pause-btn { display: block; }
#mf-pause, #mf-ttut, #mf-rotate { position: fixed; inset: 0; z-index: 10002; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#mf-pause[hidden], #mf-ttut[hidden], #mf-rotate[hidden] { display: none; }
#mf-pause { background: rgba(5, 0, 12, .72); display: flex; align-items: center; justify-content: center; padding: 12px; }
.mf-pause-card { text-align: center; color: #fff; max-width: 520px; width: 100%; }
.mf-pause-card h2 { font: 900 30px/1 'Arial Black', system-ui; color: #ffd23c; margin: 0 0 14px; letter-spacing: 2px; }
.mf-big { display: block; width: min(320px, 90%); margin: 0 auto 12px; padding: 14px; border: 0; border-radius: 14px;
  background: #ffd23c; color: #1a0f00; font: 900 20px/1 'Arial Black', system-ui; cursor: pointer; box-shadow: 0 0 22px rgba(255, 154, 30, .6); }
.mf-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.mf-row button, .mf-quit { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(28, 20, 48, .92); color: #fff; font: 800 13px/1 system-ui, sans-serif; cursor: pointer; min-height: 44px; }
.mf-row button[hidden] { display: none; }
.mf-quit { background: transparent; color: #ff9db8; border-color: rgba(255, 110, 150, .45); }
/* L'AIDE TACTILE DU 1er COMBAT : le combat attend dessous ; etiquettes posees sur les vraies commandes */
#mf-ttut { background: rgba(5, 0, 12, .62); }
.mf-tl { position: absolute; background: rgba(8, 4, 20, .92); color: #fff; border: 1.5px solid #ffd23c; max-width: 30vw;
  border-radius: 10px; padding: 6px 9px; font: 600 11.5px/1.35 system-ui, sans-serif; text-align: left; pointer-events: none; }
.mf-tl b { color: #ffd23c; font-weight: 900; }
.mf-tl b.p { color: #ff9be0; }
.mf-tl .y { color: #8fdcff; font-weight: 800; }
.mf-tring { position: absolute; border-radius: 50%; border: 2.5px dashed #ffd23c; }
.mf-tcard { position: absolute; left: 50%; top: calc(16% + env(safe-area-inset-top)); transform: translateX(-50%); text-align: center; color: #fff; width: min(330px, 38vw);
  background: rgba(8, 4, 20, .92); border: 2px solid #ffd23c; border-radius: 14px; padding: 12px 12px 4px; }
.mf-tcard h2 { margin: 0 0 6px; font: 900 18px/1 'Arial Black', system-ui; color: #ffd23c; }
.mf-tcard p { margin: 0 0 10px; font: 600 12.5px/1.4 system-ui, sans-serif; color: #e4dcff; }
.mf-tcard .mf-big { font-size: 17px; padding: 12px; }
/* TELEPHONE EN PORTRAIT */
#mf-rotate { z-index: 10003; background: #0b0216; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #fff; }
.mf-rot-ico { font-size: 54px; margin-bottom: 8px; animation: mf-rot 2.2s ease-in-out infinite; display: inline-block; }
@keyframes mf-rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
#mf-rotate h2 { font: 900 22px/1.2 'Arial Black', system-ui; color: #ffd23c; margin: 0 0 8px; }
#mf-rotate p { color: #c9bff0; margin: 0 0 16px; }
#mf-rotate button { padding: 13px 18px; border: 0; border-radius: 12px; background: #ffd23c; color: #1a0f00; font: 900 15px/1 system-ui, sans-serif; }
#mf-rotate button[hidden] { display: none; }
/* APPLICATION INSTALLABLE (pwa.js) : INSTALL (Android), l'aide iOS, la mise a jour. Menus seulement. */
#mf-install-btn, #mf-ios-hint, #mf-update { position: fixed; z-index: 9998; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .3px; }
#mf-install-btn { right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); padding: 10px 14px; border-radius: 11px; border: 0;
  background: linear-gradient(135deg, #7dffb0, #38d6ff); color: #071a12; cursor: pointer; box-shadow: 0 4px 16px #0007; }
#mf-ios-hint { right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 270px; padding: 9px 30px 9px 12px; border-radius: 11px;
  background: rgba(8, 6, 18, .92); color: #e9e2ff; border: 1px solid rgba(125, 255, 176, .5); }
#mf-ios-hint b { color: #7dffb0; }
#mf-ios-hint button { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
#mf-install-btn[hidden], #mf-ios-hint[hidden], #mf-update[hidden] { display: none; }
body:not(.on-title) #mf-install-btn, body:not(.on-title) #mf-ios-hint { display: none; }   /* titre seulement : sur le choix, il couvrait FIGHT (revue 28/10) */
#mf-update { left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); padding: 11px 16px; border-radius: 12px; border: 0;
  background: #ffd23c; color: #1a0f00; cursor: pointer; box-shadow: 0 4px 18px #000a; }
body.in-fight #mf-update { display: none; }
/* Plein ecran : l'iPhone n'a pas l'API (pwa.js pose `no-fs`), une application installee est deja plein ecran */
body.no-fs #fsbtn, body.pwa #fsbtn { display: none; }
/* La note « appareil trop lent » (ancienne porte mobile) : une carte, pas une page */
#mf-mobile-gate.mf-slow { background: rgba(8, 2, 18, 0.9); }
#mf-mobile-gate.mf-slow img { max-height: 34vh; width: auto; max-width: 100%; }
body:not(.touch-ui) #mf-install-btn { bottom: 58px; }   /* sur ordinateur, au-dessus du bouton sponsor */
/* l'aide CONTROLS decrit le CLAVIER : au doigt, l'aide tactile du 1er combat la remplace */
body.touch-ui #hint { display: none; }