/* Commandes tactiles et paysage impose (src/game/tactile.js,
   src/ui/paysage.js). Rien de tout ceci ne s'applique avec une souris :
   la classe `tactile` n'est posee que sur un ecran tactile.

   L'arene garde toute sa taille. Les commandes partent du decor, de part et
   d'autre du terrain, et vont jusqu'au bord de l'ecran : `Tactile.placer`
   pose sur la racine la colonne gauche (--gx0, --gw, --gcx), la largeur de
   la colonne droite, collee au bord (--dw), la hauteur utile (--haut,
   --bas) et la taille du joystick (--joy) et du compteur (--cpt). */

html.tactile, html.tactile body {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#tactile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#tactile[hidden] { display: none; }

#tactile .colonne {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

/* Boutons et fleches : blocs rectangulaires, contour net sur le decor. */
#tactile .t-bouton,
#tactile .fleche,
#tactile .t-pause {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid #f2f0eaee;
  border-radius: 8px;
  outline: 1px solid #000c;
  box-shadow: 0 0 0 3px #0006, 0 6px 16px #000a;
  color: #fff;
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-shadow: 0 1px 3px #000;
  pointer-events: auto;
  touch-action: none;
}

/* ------------------------------------------------- droite : boutons --- */

#tactile .colonne.droite {
  right: var(--gx0);
  width: var(--dw);
  top: var(--haut);
  height: calc(var(--bas) - var(--haut));
}
#tactile .t-bouton { flex: 1 1 0; }
#tactile .gaz { background: #1f8f4c; }
#tactile .boost { background: #f07a25; }
#tactile .drift { background: #2f7ce0; }
#tactile .frein { background: #b3302f; }
#tactile .t-bouton.tenu { filter: brightness(1.45); border-color: #fff; transform: scale(.96); }

/* ------------------------------------------------- gauche ------------- */

/* Menu et fleches rangees comme sur un clavier, trois colonnes sur deux
   lignes :   menu  haut   .
              gauche bas  droite
   Le joystick et le compteur se placent en dessous, hors de la grille. */
#tactile .colonne.gauche {
  left: var(--gx0);
  width: var(--gw);
  top: var(--haut);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 40px 40px;
  grid-template-areas:
    "menu up ."
    "left down right";
  gap: 6px 4px;
}
#tactile .t-pause { grid-area: menu; background: #26303f; font-size: 16px; letter-spacing: 0; }
#tactile .fleche { background: #0b1018; letter-spacing: 0; }
#tactile .fleche.up { grid-area: up; }
#tactile .fleche.left { grid-area: left; }
#tactile .fleche.down { grid-area: down; }
#tactile .fleche.right { grid-area: right; }
#tactile .fleche:active { background: #f07a25; }

/* Joystick fixe, entre les fleches et le compteur. Sa zone deborde un peu
   sur le bord du terrain : le pouce n'a pas a viser le cercle. */
#tactile .zone-stick {
  position: absolute;
  left: 0;
  width: calc(var(--gx0) + var(--gw) + 50px);
  top: calc(var(--haut) + 92px);
  height: calc(var(--bas) - var(--cpt) - 4px - var(--haut) - 92px);
  pointer-events: auto;
  touch-action: none;
}
#tactile .stick {
  position: absolute;
  /* Centre dans sa zone, qui commence au bord de l'ecran : en face de la
     colonne, au milieu de la place entre les fleches et le compteur. */
  left: var(--gcx);
  top: 50%;
  width: var(--joy);
  height: var(--joy);
  margin: calc(var(--joy) / -2) 0 0 calc(var(--joy) / -2);
  border-radius: 50%;
  border: 2px solid #f2f0eaaa;
  background: #0b1018aa;
  box-shadow: 0 0 0 3px #0006;
}
#tactile .stick.actif { border-color: #fff; }
#tactile .bouton-stick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  background: #f2f0ea;
  box-shadow: 0 3px 10px #000a;
}

/* Le compteur de boost, tout en bas a gauche. */
html.tactile-jeu #gauge {
  left: calc(var(--gcx) - var(--cpt) / 2);
  right: auto;
  top: calc(var(--bas) - var(--cpt));
  bottom: auto;
  width: var(--cpt);
}
html.tactile-jeu #gauge .readout strong { font-size: 18px; }
html.tactile-jeu #gauge .readout small { font-size: 6px; margin-top: 3px; }
html.tactile-jeu #gauge .speed { display: none; }

/* Le groupe de messages ouvert s'affiche a cote des fleches, le temps de
   choisir. */
html.tactile-jeu #chat {
  left: calc(var(--gx0) + var(--gw) + 10px);
  top: var(--haut);
  bottom: auto;
}

/* ------------------------------------------------------ portrait ------ */

/* Voile du portrait : le jeu ne se joue pas debout. */
#tourner {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: 32px;
  background: #0d2a6e;
  color: #f2f0ea;
  text-align: center;
  font: 700 18px/1.4 var(--mono);
}
@media (orientation: portrait) {
  html.tactile #tourner { display: grid; }
}
#tourner .tel {
  width: 70px;
  height: 120px;
  border: 5px solid #f2f0ea;
  border-radius: 14px;
  animation: tourner 1.8s ease-in-out infinite;
}
@keyframes tourner {
  0%, 25% { transform: rotate(0); }
  60%, 100% { transform: rotate(-90deg); }
}