* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #000; overflow: hidden; }
#game-wrap {
  position: relative;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #000;
}
#game {
  image-rendering: pixelated;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
/* Portrait : rendu responsive. Le canvas remplit la zone au-dessus des
   commandes (sa résolution interne s'ajuste à la forme de la case en JS, donc
   pas de crop), et les commandes tactiles occupent une bande dédiée en bas. */
@media (orientation: portrait) {
  #game-wrap { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  #game { width: 100%; height: 70vh; flex: none; }
  #touch-controls {
    position: static; height: 30vh; flex: none; z-index: 9;
    justify-content: space-around; align-items: center;
    padding: 8px 20px; background: #14141c;
  }
}
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); z-index: 10;
}
.overlay.hidden { display: none; }
.overlay-box {
  background: #fff8ec; border: 4px solid #c84c0c; border-radius: 8px;
  padding: 20px 24px; max-width: 80%; text-align: center;
  font-family: monospace; color: #3a2410;
  box-shadow: 0 6px 0 rgba(0,0,0,0.3);
}
#overlay-text { font-size: clamp(14px, 3.5vw, 22px); line-height: 1.4; margin-bottom: 16px; }
#overlay-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#overlay-buttons button {
  font-family: monospace; font-weight: bold; font-size: 16px;
  padding: 10px 18px; border: none; border-radius: 6px; cursor: pointer;
  background: #e03060; color: #fff; box-shadow: 0 4px 0 #a01840;
}
#overlay-buttons button:active { transform: translateY(3px); box-shadow: none; }
#mute-btn {
  position: absolute; top: 8px; right: 8px; z-index: 11;
  background: rgba(0,0,0,0.4); color: #fff; border: none;
  font-size: 18px; padding: 4px 8px; border-radius: 4px; cursor: pointer;
}
#touch-controls {
  position: absolute; inset: auto 0 0 0; bottom: 0; z-index: 9;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 16px; pointer-events: none;
}
#touch-controls.hidden { display: none; }
#touch-controls .tc {
  pointer-events: auto; -webkit-user-select: none; user-select: none;
  touch-action: none;
  background: rgba(30,30,40,0.7); color: #fff; border: 2px solid rgba(255,255,255,0.5);
  font-size: 20px; border-radius: 8px;
}
.dpad { position: relative; width: 150px; height: 150px; }
.dpad .tc { position: absolute; width: 50px; height: 50px; }
.dpad .up    { left: 50px; top: 0; }
.dpad .left  { left: 0; top: 50px; }
.dpad .right { left: 100px; top: 50px; }
.dpad .down  { left: 50px; top: 100px; }
/* Flèches dessinées en CSS (triangles) — aucune dépendance à la police */
.dpad .tc::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border: 9px solid transparent;
}
.dpad .up::before    { transform: translate(-50%, -70%); border-bottom-color: #fff; }
.dpad .down::before  { transform: translate(-50%, -30%); border-top-color: #fff; }
.dpad .left::before  { transform: translate(-70%, -50%); border-right-color: #fff; }
.dpad .right::before { transform: translate(-30%, -50%); border-left-color: #fff; }
.ab { display: flex; gap: 18px; align-items: center; }
.ab .tc { width: 64px; height: 64px; border-radius: 50%; font-weight: bold; }
.ab .btn-a { background: rgba(224,48,96,0.8); }
.ab .btn-b { background: rgba(48,96,224,0.8); }