/* Bandini — feuille de style. Aucune police externe, aucune image. */

:root {
  --nuit: #0b0a12;
  --brume: #1c1a2b;
  --parchemin: #efe6d0;
  --or: #e8b33c;
  --rouge: #c4362f;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--nuit);
  color: var(--parchemin);
  font-family: var(--mono);
  /* ⚠️ Trois couches contre le pincement : ce touch-action, user-scalable=no
     dans la meta viewport, et gesturestart bloque dans entree.js. */
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body { display: flex; flex-direction: column; min-height: 100dvh; }

.jeu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.ecran {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

canvas#toile {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- Voiles ------------------------------------------------------------ */

.voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(11, 10, 18, .82);
  text-align: center;
  line-height: 1.3;
}
.voile[hidden] { display: none; }
.voile--statique { position: static; min-height: 60dvh; }

.titre {
  margin: 0;
  font-size: clamp(34px, 8vw, 72px);
  line-height: 1;
  color: var(--or);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000, 0 0 24px rgba(232, 179, 60, .35);
}
.titre--petit { font-size: clamp(22px, 4.5vw, 36px); }

.sous-titre { margin: 0; max-width: 34em; font-size: clamp(13px, 2vw, 17px); opacity: .95; }

.boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.bouton {
  appearance: none;
  border: 1px solid rgba(232, 179, 60, .35);
  border-radius: 6px;
  padding: 10px 22px;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 17px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--parchemin);
  background: rgba(42, 36, 64, .7);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, background .15s ease;
}
.bouton:hover, .bouton:focus-visible { background: rgba(232, 179, 60, .28); outline: none; }
.bouton:active { transform: scale(.96); }
.bouton--principal { background: var(--or); color: var(--nuit); border-color: var(--or); }
.bouton--principal:hover, .bouton--principal:focus-visible { background: #f5c75a; }

.aide { margin: 0; font-size: clamp(11px, 1.5vw, 13px); opacity: .8; }
.aide--petit { opacity: .6; }
kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
  font-family: inherit;
  font-size: .95em;
}

.scores {
  margin: 0;
  padding: 0 0 0 1.6em;
  width: min(100%, 360px);
  text-align: left;
  font-size: clamp(13px, 2vw, 16px);
  max-height: 55%;
  overflow: auto;
}
.scores li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.scores li span:last-child { color: var(--or); white-space: nowrap; }
.scores__vide { list-style: none; opacity: .8; }

.score-form { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.score-form__ligne { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.score-form input {
  width: 12em;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(232, 179, 60, .35);
  border-radius: 6px;
  font: inherit;
  background: var(--parchemin);
  color: var(--nuit);
}
.score-form__etat { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--or); }

.pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 10px;
  font-size: 12px;
  opacity: .6;
}

/* --- Tactile ------------------------------------------------------------ */

#tactile { display: none; }
body.tactile #tactile { display: block; }
body.tactile .pied { display: none; }
body.tactile .jeu { padding: 0; }
body.tactile .ecran { border-radius: 0; box-shadow: none; }
body.tactile .aide { display: none; }

#tactile { position: fixed; inset: 0; z-index: 5; pointer-events: none; touch-action: none; }
#tactile > * { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }

#croix {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(42, 36, 64, .62), rgba(11, 10, 18, .5) 70%, transparent 72%);
  border: 1px solid rgba(232, 179, 60, .25);
}
#croix u {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(232, 179, 60, .22);
  border: 1px solid rgba(232, 179, 60, .45);
  transition: transform .04s linear;
}

#boutons {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 190px; height: 170px;
}
#boutons b, #haut b {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--parchemin);
  background: rgba(42, 36, 64, .66);
  border: 1px solid rgba(232, 179, 60, .3);
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, background .06s ease;
}
#boutons b.on, #haut b.on { background: rgba(232, 179, 60, .55); transform: translateY(1px) scale(.94); }
#boutons b[data-a="attaque"] { right: 6px; bottom: 8px; width: 76px; height: 76px; font-size: 12px; }
#boutons b[data-a="attaque"].on { background: rgba(196, 54, 47, .6); }
/* ⚠️ `bottom` d'ACTION doit rester >= hauteur de COURS + 8 px : a 56 px les
   deux pastilles se chevauchaient de 8 px, et le pouce declenchait l'une pour
   l'autre. Le test tactile mesure maintenant ce chevauchement. */
#boutons b[data-a="action"] { right: 88px; bottom: 72px; width: 66px; height: 66px; }
#boutons b[data-a="action"].on { background: rgba(60, 140, 200, .55); }
#boutons b[data-a="esquive"] { right: 96px; bottom: 0; width: 64px; height: 64px; }
#boutons b[data-a="arme"] { right: 14px; bottom: 96px; width: 64px; height: 64px; }

#haut {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 110px; height: 48px;
}
#haut b { width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
#haut b[data-a="pause"] { right: 56px; top: 0; }
#haut b[data-a="plein"] { right: 0; top: 0; }

@media (max-width: 600px) {
  .jeu { padding: 6px; }
}