html, body {
  margin: 0; height: 100%; background: #0a1328; overflow: hidden; overscroll-behavior: none;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* Zones sûres (encoche iPhone) : le jeu reste dans la partie visible. */
#wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#game { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #13213f; box-shadow: 0 0 0 2px #1d2e55, 0 10px 40px rgba(0, 0, 0, .6); }
#topbar {
  position: fixed; z-index: 6; display: flex; gap: 6px;
  top: calc(6px + env(safe-area-inset-top, 0px)); right: calc(6px + env(safe-area-inset-right, 0px));
}
#topbar button {
  font: bold 12px/1 ui-monospace, Menlo, monospace; color: #fff; background: rgba(19, 33, 63, .9); border: 2px solid #e8662a;
  padding: 6px 8px; cursor: pointer; border-radius: 4px; opacity: .85; min-height: 30px; touch-action: manipulation;
}
#topbar button:hover { opacity: 1; }
#topbar button[hidden] { display: none; }
@media (pointer: coarse) {
  #topbar button { font-size: 11px; padding: 6px 7px; opacity: .75; }
}

/* ---- Commandes tactiles ---- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#touch[hidden] { display: none; }
/* Moitié gauche : le joystick apparaît là où le pouce se pose */
#stickZone {
  position: absolute; left: 0; top: 18%; bottom: 0; width: 48%; pointer-events: auto; touch-action: none;
  padding-left: env(safe-area-inset-left, 0px);
}
#stickBase {
  position: absolute; left: 90px; top: 70%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 2px dashed rgba(255, 255, 255, .3); transition: opacity .15s;
}
#stickBase.on { background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .55); }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(232, 102, 42, .85); box-shadow: 0 0 0 3px rgba(10, 16, 34, .5); }
#tbtns {
  position: absolute; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 10px; pointer-events: auto; align-items: end;
  right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
#tbtns button {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background: rgba(19, 33, 63, .7); color: #fff;
  font: bold 12px ui-monospace, monospace; touch-action: none; -webkit-user-select: none; user-select: none; transition: transform .06s;
}
#tbtns button[data-act="slice"] { grid-column: 1; grid-row: 2; }
#tbtns button[data-act="lob"] { grid-column: 2; grid-row: 1; justify-self: center; }
#tbtns button.big { grid-column: 2; grid-row: 2; width: 88px; height: 88px; font-size: 14px; background: rgba(232, 102, 42, .85); }
#tbtns button.on { transform: scale(.9); background: rgba(255, 230, 128, .9); color: #13213f; }

/* ---- « TOURNE TON GSM » ---- */
#rotate {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #13213f; color: #fff; font: bold 20px ui-monospace, Menlo, monospace; text-align: center;
}
#rotate[hidden] { display: none; }
#rotate canvas { width: 136px; height: 164px; image-rendering: pixelated; }
#rotate .phone { width: 44px; height: 76px; border: 4px solid #e8662a; border-radius: 8px; animation: turn 1.6s ease-in-out infinite; }
#rotate p { margin: 0; color: #e8662a; letter-spacing: 2px; }
#rotate small { color: #8a9cc4; font-size: 12px; }
@keyframes turn { 0%, 20% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }

/* ---- Saisie du pseudo (surcouche, ouvre le clavier du GSM) ---- */
#nameEntry {
  position: absolute; left: calc(var(--u) * 198); top: calc(var(--u) * 46); width: calc(var(--u) * 176); box-sizing: border-box;
  padding: calc(var(--u) * 4); background: #13213f; border: calc(var(--u) * 1) solid #e8662a; line-height: 1.2;
  font: bold calc(var(--u) * 6) ui-monospace, Menlo, monospace; color: #e4f53a; pointer-events: auto;
}
#nameEntry[hidden] { display: none; }
#nameEntry label { display: block; margin-bottom: calc(var(--u) * 3); letter-spacing: 1px; }
#nameEntry input {
  display: block; width: 100%; box-sizing: border-box; font: bold max(16px, calc(var(--u) * 9)) ui-monospace, Menlo, monospace;
  text-transform: uppercase; letter-spacing: 2px; color: #fff; background: #0a1022; border: 2px solid #8a9cc4; padding: 4px 6px;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; border-radius: 0; outline: none;
}
#nameEntry input:focus { border-color: #e8662a; }
#nameEntry .row { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); }
#nameEntry button {
  flex: 1; min-height: 40px; font: bold max(13px, calc(var(--u) * 6)) ui-monospace, Menlo, monospace; color: #fff; background: #24386a;
  border: 2px solid #8a9cc4; cursor: pointer; touch-action: manipulation;
}
#nameEntry button.send { background: #e8662a; border-color: #fff; }
#nameEntry button:disabled { opacity: .5; }

/* ---- Écran « Choisis ton joueur » : cartes en surcouche (1 unité --u = 1 pixel du jeu) ---- */
:root { --u: 2px; }
#stage { position: relative; line-height: 0; }
#heroSelect { position: absolute; inset: 0; pointer-events: none; }
#heroSelect[hidden] { display: none; }
.hcard {
  position: absolute; top: calc(var(--u) * 33); width: calc(var(--u) * 170); height: calc(var(--u) * 158);
  padding: 0; margin: 0; border: 0; background: #0a1022; cursor: pointer; pointer-events: auto; overflow: hidden;
  outline: calc(var(--u) * 1) solid #2a3d6a; opacity: .78; transform: scale(.96);
  transition: transform .18s steps(3), opacity .18s ease, outline-color .18s ease;
}
.hcard canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.hcard:nth-child(1) { left: calc(var(--u) * 17); }
.hcard:nth-child(2) { left: calc(var(--u) * 197); }
.hcard.sel {
  opacity: 1; outline: calc(var(--u) * 2) solid #e8662a;
  box-shadow: 0 0 0 calc(var(--u) * 3) #0a1022, 0 0 calc(var(--u) * 10) rgba(232, 102, 42, .6);
  animation: hfloat 1.2s steps(2) infinite;
}
.hcard.sel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%);
  background-size: 260% 100%; animation: hshine 2.4s steps(12) infinite;
}
@keyframes hfloat { 0%, 100% { transform: scale(1.03) translateY(0); } 50% { transform: scale(1.03) translateY(calc(var(--u) * -2)); } }
@keyframes hshine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
/* Grille 3 x 2 des vignettes de joueurs (à droite de la grande carte) */
.hgrid {
  position: absolute; left: calc(var(--u) * 197); top: calc(var(--u) * 35);
  display: grid; grid-template-columns: repeat(3, calc(var(--u) * 58)); grid-auto-rows: calc(var(--u) * 70);
  gap: calc(var(--u) * 6) calc(var(--u) * 5); pointer-events: auto;
}
.htile {
  position: relative; padding: 0; margin: 0; border: 0; background: #0a1022; cursor: pointer;
  transform: scale(.94); transition: transform .12s steps(2); touch-action: manipulation;
}
.htile canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.htile.sel { transform: scale(1.04); box-shadow: 0 0 0 calc(var(--u) * 1) #0a1022, 0 0 calc(var(--u) * 8) rgba(232, 102, 42, .7); }
.htile:active { transform: scale(.98); }

/* ---- Tutoriel : commande tactile à utiliser (clignote) ---- */
#tbtns button.tuto { animation: tutoBlink .5s steps(2) infinite; box-shadow: 0 0 0 4px #e4f53a; }
#stickBase.tuto { border: 3px solid #e4f53a; animation: tutoBlink .5s steps(2) infinite; }
@keyframes tutoBlink { 50% { background: rgba(228, 245, 58, .85); color: #13213f; } }