/* Adaptation tactile et petits ecrans.
   Charge en dernier : ces regles corrigent la mise en page de bureau plutot
   que de la dupliquer. */

/* ---------------- Commandes tactiles ---------------- */

.touch-controls {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none; /* seuls les boutons captent le doigt */
}

/* Manche virtuel : il apparait LA OU le pouce se pose, plutot qu'a une
   position fixe. Sur mobile on ne regarde pas ses mains. */
.touch-stick {
  position: absolute;
  width: 0;
  height: 0;
}
.touch-stick-base {
  position: absolute;
  left: -62px;
  top: -62px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.touch-stick-knob {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(242, 177, 52, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.65);
}

/* Boutons d'action, groupes sous le pouce droit */
.touch-buttons {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 180px;
  height: 180px;
  pointer-events: none;
}

.tbtn {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 1px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(14, 18, 24, 0.82);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.05;
  text-align: center;
  pointer-events: auto;
  /* Sans ca, un appui declenche la loupe et la selection de texte */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.tbtn small {
  font-size: 0.56rem;
  font-weight: 500;
  color: var(--text-faint);
}
.tbtn.pressed {
  transform: scale(0.93);
  background: rgba(30, 38, 48, 0.95);
}

/* Le coup de base est le plus gros et le plus accessible */
.tbtn-attack {
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  font-size: 0.86rem;
  border-color: rgba(242, 177, 52, 0.75);
  background: rgba(60, 40, 10, 0.85);
}
.tbtn-ability {
  right: 96px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-color: rgba(63, 167, 255, 0.6);
}
.tbtn-dash {
  right: 14px;
  bottom: 100px;
  width: 42px;
  height: 42px;
  border-color: rgba(63, 211, 155, 0.6);
}
.tbtn-trick {
  right: 84px;
  bottom: 96px;
  width: 42px;
  height: 42px;
  border-color: rgba(249, 115, 22, 0.6);
}
.tbtn-pact {
  right: 150px;
  bottom: 82px;
  width: 42px;
  height: 42px;
  border-color: rgba(185, 128, 255, 0.6);
}

/* ---------------- Reglages du HUD en mode tactile ---------------- */

/* Le bas-droite est pris par les boutons d'action : la minimap remonte en
   haut a droite, et le classement descend juste en dessous. */
body.touch-mode .hud-bottomright {
  bottom: auto;
  right: max(8px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
}
body.touch-mode #minimap {
  width: 82px;
  height: 82px;
}
body.touch-mode #minimap.large {
  width: 150px;
  height: 150px;
}
body.touch-mode .hud-topright {
  width: 150px;
  top: calc(96px + env(safe-area-inset-top));
}

/* Fiche d'objet : en haut a gauche, compacte, sans la description longue.
   Au centre de l'ecran elle masquait le personnage plusieurs secondes. */
body.touch-mode .pickup-toast {
  left: max(8px, env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  top: calc(58px + env(safe-area-inset-top));
  transform: none;
  width: auto;
  max-width: 62vw;
  gap: 9px;
  padding: 7px 10px;
}
body.touch-mode .pickup-toast.pop { animation: pickupInTop 0.18s ease-out; }
@keyframes pickupInTop { from { opacity: 0; transform: translateY(-8px); } }
body.touch-mode .pickup-icon { width: 28px; height: 28px; }
body.touch-mode .pickup-body p { display: none; }
body.touch-mode .pickup-body strong { font-size: 0.84rem; margin: 0 0 2px; }
body.touch-mode .pickup-body small { font-size: 0.58rem; }
body.touch-mode .pickup-body em { font-size: 0.68rem; }

/* La barre d'emplacements double les boutons tactiles : on la reduit au rang
   d'indicateur, sans la supprimer — elle affiche encore charges et recharges. */
body.touch-mode .hud-bottomcenter {
  bottom: auto;
  top: 52px;
  transform: translateX(-50%) scale(0.72);
  transform-origin: top center;
  opacity: 0.85;
}
body.touch-mode .slot kbd {
  display: none;
}

body.touch-mode .hud-bottomleft {
  width: 190px;
  bottom: max(10px, env(safe-area-inset-bottom));
}
body.touch-mode .hud-topright {
  width: 168px;
}
body.touch-mode .leaderboard {
  font-size: 0.72rem;
  padding: 6px;
}
body.touch-mode .killfeed li {
  font-size: 0.68rem;
  padding: 3px 6px;
}
body.touch-mode .prompt {
  bottom: 230px;
  font-size: 0.82rem;
}
body.touch-mode .ally-badge {
  bottom: 206px;
  font-size: 0.72rem;
}

/* Le bandeau de verrouillage du pointeur n'a aucun sens sur tactile */
body.touch-mode #lockHint {
  display: none !important;
}

/* La roue de ping se pilote au doigt : on l'agrandit */
body.touch-mode .ping-wheel .opt {
  padding: 11px 0;
  font-size: 0.86rem;
}

/* Le canvas ne doit jamais faire defiler ni zoomer la page */
body.touch-mode #scene,
body.touch-mode #overlay {
  touch-action: none;
}

/* ---------------- Petits ecrans, quel que soit le pointeur ---------------- */

@media (max-width: 820px) {
  .menu-card {
    padding: 20px;
  }
  h1 {
    font-size: 2rem;
  }
  .tagline {
    font-size: 0.86rem;
  }
  .class-picker {
    grid-template-columns: repeat(2, 1fr);
  }
  .class-card .desc {
    display: none;
  }
  .entry-secondary {
    flex-direction: column;
  }
  .panel-card {
    padding: 18px;
  }
  .lobby-cols {
    grid-template-columns: 1fr;
  }
  .settings-form {
    grid-template-columns: 1fr;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
  .end-card {
    padding: 18px;
  }
  .podium {
    grid-template-columns: 1fr;
  }
  .room-code strong {
    font-size: 1.4rem;
  }
}

/* En paysage bas de plafond, on recupere de la hauteur partout */
@media (max-height: 480px) and (orientation: landscape) {
  body.touch-mode .hud-bottomcenter {
    display: none;
  }
  body.touch-mode #minimap {
    width: 84px;
    height: 84px;
  }
  .menu-card {
    padding: 14px;
  }
  .brand {
    margin-bottom: 12px;
  }
}