/* ============================================================
   POPOTE WAR — SOCLE
   ------------------------------------------------------------
   Remise à zéro courte, typographie, boutons partagés. Le jeu est
   seul sur son domaine : plus besoin d'enfermer quoi que ce soit
   sous un identifiant de conteneur, comme il le fallait dans le
   thème Shopify.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--nuit);
  color: var(--sable);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.45;
  /* `clip` et non `hidden` : avec `hidden`, html et body deviennent deux
     conteneurs de défilement imbriqués, et il faut alors deux doigts pour
     faire défiler la page. Défaut classique, symptôme incompréhensible. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

/* Rien de l'interface n'est sélectionnable : un appui long sur un bouton
   ouvrait le menu de sélection de texte, ce qui trahit le site en une
   seconde. Le texte des questions, lui, reste sélectionnable. */
button, .tab, .answer, .arm, .horloge, .combattre {
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* Supprime le délai de 300 ms hérité du double-tap-to-zoom. */
  touch-action: manipulation;
}

a { color: var(--laiton); }

:focus-visible {
  outline: 3px solid var(--laiton-c);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   BOUTONS PARTAGÉS
   Toute cible tactile fait au moins 48 px de haut. En dessous, on
   rate la cible — et une réponse ratée dans un duel chronométré
   est vécue comme une injustice, pas comme une erreur.
   ------------------------------------------------------------ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.2rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--fast) var(--ease), filter var(--fast);
}
.btn { box-shadow: var(--relief); }
/* Un bouton pressé DESCEND, il ne rétrécit pas.
   `scale(.97)` fait reculer le bouton dans la profondeur — le geste d'un
   objet qu'on éloigne. Un bouton physique, lui, s'enfonce : il glisse de
   deux pixels vers le bas et sa lèvre disparaît, parce qu'il n'y a plus
   d'épaisseur sous lui. C'est le même coût en code et ce n'est pas le même
   geste. */
.btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(217, 207, 168, .06), inset 0 2px 5px rgba(0, 0, 0, .45);
}
.btn[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }

/* Le laiton brossé par-dessus le dégradé : le grain horizontal du métal
   attrape la lumière autrement selon l'endroit, et c'est ce qui distingue
   une plaque de laiton d'un aplat orangé. Fondu en `overlay`, il ne change
   pas la couleur — il ne fait que la texturer. */
.btn--gold {
  background:
    url("/img/matiere/laiton-brosse.webp") 0 0 / 200px 60px repeat,
    linear-gradient(180deg, var(--laiton-c), var(--laiton));
  background-blend-mode: overlay, normal;
  color: var(--nuit);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(200,162,76,.25);
}
.btn--ghost { border-color: var(--kaki); color: var(--sable-b); }
.btn--olive { background: var(--kaki); color: var(--sable); }

/* L'ancien nom du bouton principal, encore utilisé par les écrans de
   victoire et hors connexion. Il prend le même dessin que `.combattre`
   pour qu'il n'existe qu'UNE apparence de bouton d'action dans le jeu. */
.btn--fight {
  width: 100%;
  min-height: 60px;
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: .06em;
  background: linear-gradient(180deg, var(--alerte-c), var(--alerte) 58%, #8E3009);
  color: #fff;
  /* Le bouton principal a une lèvre PLUS ÉPAISSE que les autres : quatre
     pixels au lieu de deux. C'est le seul endroit du jeu où l'épaisseur
     elle-même dit « celui-là, appuyez dessus ». */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -3px 0 rgba(0, 0, 0, .28),
    0 4px 0 #6E2507,
    0 8px 22px rgba(193, 68, 14, .3);
}
.btn--fight:active, .combattre:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 3px 7px rgba(0, 0, 0, .4),
    0 0 0 #6E2507,
    0 2px 10px rgba(193, 68, 14, .25);
}

.linkbtn {
  min-height: var(--tap);
  color: var(--sable-b);
  font-size: var(--fs-xs);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   UTILITAIRES
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

.noscript { padding: 3rem 1.5rem; text-align: center; }

/* Le jeu est verrouillé en portrait par le manifeste, mais un navigateur
   ordinaire ne l'honore pas. En paysage sur petit écran, on le dit —
   plutôt que de laisser une mise en page écrasée. */
@media (orientation: landscape) and (max-height: 480px) {
  body::after {
    content: "Tourne le téléphone — POPOTE WAR se joue à la verticale.";
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-content: center;
    padding: 2rem;
    text-align: center;
    background: var(--nuit);
    color: var(--laiton);
    font-family: var(--display);
    font-size: var(--fs-lg);
    letter-spacing: .04em;
  }
}

/* ============================================================
   LES GESTES QU'ON NE PEUT PAS DÉFAIRE
   ------------------------------------------------------------
   Radier, bannir, dissoudre. Trois boutons qui retirent quelque
   chose à quelqu'un d'autre, et qui doivent donc se distinguer de
   ceux qui donnent — sans crier : un bouton rouge vif dans un jeu
   kaki attire l'œil, et ce qu'on veut est l'inverse. On ne le
   rencontre qu'en le cherchant.
   ============================================================ */

/* Le geste immédiat, dans une feuille de confirmation : c'est le
   bouton qu'on vient chercher, il porte donc la couleur. */
.btn--danger {
  border-color: var(--sang);
  color: #E8B4A6;
  background: color-mix(in srgb, var(--sang) 22%, transparent);
}
.btn--danger:hover { background: color-mix(in srgb, var(--sang) 34%, transparent); }

/* LE GESTE QU'ON NE VIENT PAS CHERCHER : « dissoudre », en bas de
   l'écran du régiment. Il reste en retrait — texte barré-rature, pas de
   fond — parce qu'il est posé au milieu d'une liste de boutons ordinaires
   et qu'un aplat rouge y attirerait le pouce de qui visait le précédent. */
.btn--rature { color: var(--sang-clair, #B4705E); border-color: transparent; }
.btn--rature:hover { border-color: var(--sang); }

/* Le filet qui sépare ce qui donne de ce qui retire. */
.sep {
  border: 0;
  border-top: 1px solid var(--kaki);
  margin: 1rem 0 .6rem;
}