/* Back Bataille, version publique (voir public-solo.js).
   Franne, le 03/10/2026 : « belle présentation, équilibre des espaces,
   proportions ». */

/* iPhone à l'horizontale : Safari grossit tout seul les textes (captures de
   Franne, 04/10/2026 : colonne trop haute, « Parties jouées » coupé). On garde
   les tailles prévues. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Le défilement ne déborde plus du jeu vers la page itch.io autour
   (05/10/2026). Aucun effet sur l'affichage. */
html, body { overscroll-behavior: none; }
/* Dans itch.io (le jeu est dans un cadre) : le navigateur ne peut pas lancer
   un défilement depuis le plateau et la zone des boutons, donc il n'annule
   plus les touchers. Les fenêtres (Menu…) défilent toujours. */
.pub-dans-cadre #board,
.pub-dans-cadre .dice-area,
.pub-dans-cadre .pub-fond { touch-action: none !important; }
/* Les fenêtres (Menu, messages) défilent elles-mêmes, sans entraîner la page. */
.pub-dans-cadre .pub-boite { touch-action: pan-y !important; overscroll-behavior: contain; }

/* Solo uniquement : rien du mode en ligne. */
#mode-enligne,
#online-box,
.mode-selector {
  display: none !important;
}

/* Botback : un seul drapeau (Franne, 03/10/2026). */
#flag-black-b {
  display: none !important;
}

/* Boutons de test du créateur : jamais pour les joueurs. */
#btn-test-bearoff,
#btn-test-victory,
.test-sfx-btn {
  display: none !important;
}

.pub-droits {
  margin: -.2rem 0 .4rem;
  font: 400 .65rem/1.2 system-ui, sans-serif;
  color: #a9ad9c;
  letter-spacing: .02em;
}

/* L'essentiel à l'écran (Franne, 04/10/2026 : « laisser visible seulement
   l'essentiel pour pouvoir jouer ») : plateau, dés, un seul bouton d'action,
   les deux sorties et ☰ Menu. Noms, couleur des chars, victoires et parties
   jouées passent dans le Menu (public-solo.js). */
#solo-nameplates,
.camp-color-pick,
.win-score-dock,
#turn-label,
#btn-roll,
#btn-end-turn,
#btn-reset {
  display: none !important;
}

/* Une seule taille de base : les dés et ☰ Menu la font, le bouton d'action
   au moins 56 px. Un peu plus grande en portrait (plus de place en largeur). */
:root { --pub-taille: 44px; }
@media (orientation: portrait) { :root { --pub-taille: 52px; } }
.panel-left #die1.die, .panel-left #die2.die {
  width: var(--pub-taille) !important; height: var(--pub-taille) !important;
  min-width: 0 !important; min-height: 0 !important; flex: 0 0 auto !important;
}

/* Le bouton d'action unique : Lancer, Passer, « Botback joue… »… */
.pub-action {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: max(56px, var(--pub-taille)); padding: 0 .8rem; margin: 0;
  border-radius: 12px; border: 2px solid rgba(255, 255, 255, .18);
  font: 800 1.15rem/1 system-ui, sans-serif; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.pub-action.etat-lancer, .pub-action.etat-nouvelle { background: #55702f; color: #f4f0dc; border-color: #8aa45a; }
.pub-action.etat-passer { background: #d29a2a; color: #241a06; border-color: #f0c766; }
.pub-action.etat-jouer { background: #2b3326; color: #e8c96a; border-color: #e8c96a; font-size: .95rem; }
.pub-action.etat-attente { background: #2a2d27; color: #9a9d90; border-color: #444a3d; font-size: .95rem; }
.pub-action:disabled { cursor: default; }

/* Numéros des cases (Franne, 04/10/2026) : les impairs restent gris clair ;
   les pairs, sur les triangles clairs, passent en vert foncé pour être lus. */
.point[data-point="2"] .point-label,
.point[data-point="4"] .point-label,
.point[data-point="6"] .point-label,
.point[data-point="8"] .point-label,
.point[data-point="10"] .point-label,
.point[data-point="12"] .point-label,
.point[data-point="14"] .point-label,
.point[data-point="16"] .point-label,
.point[data-point="18"] .point-label,
.point[data-point="20"] .point-label,
.point[data-point="22"] .point-label,
.point[data-point="24"] .point-label {
  color: #24311a !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Le canon de chaque char vise sa direction de route (Franne, 04/10/2026).
   Vos chars vont de 24 vers 1 : en haut ils roulent vers la gauche. Ceux de
   Back vont de 1 vers 24 : en bas ils roulent vers la gauche. Les autres
   gardent le canon à droite. Seul le sens du char change. */
.point.top .checker.white,
.point.bottom .checker.black { transform: scaleX(-1); }
.point.bottom .checker.black.ai-pickup { transform: scale(-1.18, 1.18); }

/* Les victoires, toujours visibles sous le bouton d'action. */
.pub-score-ecran {
  margin: 4px 0 0; text-align: center; white-space: nowrap;
  font: 800 1.05rem/1.2 system-ui, sans-serif; color: #e8c96a;
  font-variant-numeric: tabular-nums;
}

/* ☰ Menu : même famille que le bouton d'action, plus discret. */
.pub-bouton-menu {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--pub-taille); padding: 0 .9rem; margin: 0;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25);
  background: #1f2a1f; color: #f0ead8;
  font: 700 1rem/1 system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  order: 6; /* après les sorties (order 5 dans le jeu) */
}

/* Paysage (et ordinateur) : colonne à droite — dés, action, sorties, Menu. */
@media (orientation: landscape) {
  .panel-left .pub-action, .panel-left .pub-bouton-menu { width: 100%; }
  .panel-left .pub-action { margin: .5rem 0 0; }
  .panel-left .pub-score-ecran { margin: .35rem 0 .5rem; font-size: .85rem; }
  /* Téléphone couché : la police de l'iPhone est plus large, « Back » était
     coupé au bord de la colonne (04/10/2026). Seul ce texte rapetisse. */
  @media (max-height: 500px) {
    .panel-left .pub-score-ecran { font-size: .74rem; letter-spacing: -.01em; }
  }
  /* Les deux sorties tiennent dans la colonne (la droite était coupée). */
  .panel-left .sortie-dock, .panel-left .off-trays { width: 100% !important; }
  .panel-left .off-trays { gap: 6px !important; }
  .panel-left .sortie-dock .off-tray { flex: 1 1 0 !important; min-width: 0 !important; }
  .panel-left .pub-bouton-menu { margin-top: .6rem; }
}
/* Téléphone à l'horizontale : si la colonne déborde quand même, elle défile. */
@media (orientation: landscape) and (max-height: 500px) {
  .panel-left { overflow-y: auto !important; overflow-x: hidden !important; }
  /* Le plateau collait au bord du haut (Franne, 04/10/2026) : il est centré
     en hauteur, avec le même espace en haut et en bas. Sa taille ne change pas. */
  .board-stage { justify-content: center !important; }
  /* Plateau un peu plus grand, dans ses proportions (Franne, 05/10/2026 :
     « il y a de la place pour faire un peu plus grand le plateau ») : la
     réserve en hauteur passe de 2,35 rem à 1,25 rem. Une petite marge reste
     en haut et en bas ; la colonne ne bouge pas. */
  .board-with-trays {
    --ls-board-h: min(96%, calc(100dvh - 1.25rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* Portrait : une rangée sous le plateau — dés, action au centre, Menu à
   droite ; les sorties en bandeau fin en dessous. */
@media (orientation: portrait) {
  .panel-left .pub-action { flex: 1 1 auto; min-width: 0; }
  .panel-left .pub-bouton-menu { flex: 0 0 auto; order: 0 !important; }
  /* Sous le bouton d'action : une ligne à elle, entre la rangée et les sorties. */
  .panel-left .pub-score-ecran { flex: 1 0 100%; order: 5 !important; margin: 0; }
  .panel-left .sortie-dock { flex: 1 0 100% !important; order: 10 !important; }
  .panel-left .sortie-dock .off-trays { flex: 1 1 auto !important; width: 100% !important; gap: 8px !important; }
  /* Bandeau fin : le libellé à gauche, les chars sortis à droite (le libellé
     était coupé en haut quand tout s'empilait dans 40 px). */
  .panel-left .sortie-dock .off-tray {
    min-height: 0 !important; height: 40px !important; flex: 1 1 0 !important;
    flex-direction: row !important; justify-content: space-between !important;
    align-items: center !important; padding: 0 10px !important;
  }
  .panel-left .sortie-dock .off-label { font-size: 12px !important; white-space: nowrap; }
}

/* Ordinateur (souris, grand écran) — Franne, 04/10/2026 : « le mode PC peut
   laisser le menu affiché ; mettre le jeu en proportions correctes ». La
   colonne (dés, action, score, Menu affiché) et le plateau forment un seul
   bloc centré, de la hauteur de l'écran ; le plateau garde des proportions
   de vrai plateau (4:3). Téléphones et tablettes : rien ne change. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .app { max-height: none !important; height: 100vh !important; }
  .main {
    grid-template-columns: 300px auto !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 24px !important;
    padding: 24px !important;
    height: 100vh !important;
    box-sizing: border-box !important;
  }
  .panel-left {
    width: 300px !important;
    align-self: stretch !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  .board-wrap, .board-stage, .board-with-trays { width: auto !important; max-width: none !important; }
  .board-wrap { align-self: start !important; }
  .board-frame {
    aspect-ratio: 4 / 3 !important;
    height: min(calc(100vh - 48px), calc((100vw - 300px - 56px - 120px) * 3 / 4)) !important;
    width: auto !important;
    max-height: none !important;
  }
  .board-wrap, .board-stage { padding-top: 0 !important; margin-top: 0 !important; }
  .pub-bouton-menu[hidden] { display: none !important; }
  #pub-menu-fixe { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
  #pub-menu-fixe .pub-menu { gap: 6px; }
  #pub-menu-fixe .btn { padding: 7px 10px; font-size: 14px; }
}

/* Vertical, app de l'écran d'accueil (Franne, 05/10/2026) : le haut du
   plateau était caché sous la bande de la caméra et de l'heure. On laisse
   libre la hauteur de cette bande (0 dans Safari et sur ordinateur : rien
   n'y change). */
@media (orientation: portrait) {
  html body .app > .main { padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box !important; }
}

/* Le Menu : nom, couleur, victoires. */
.pub-champ { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.pub-champ input {
  padding: 9px 10px; border-radius: 8px; border: 1px solid #6b7f48;
  background: #12160f; color: #f0ead8; font: 16px system-ui, sans-serif;
}
.pub-couleurs { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pub-couleurs button {
  flex: 1; padding: 8px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; color: #f0ead8; font: 600 14px system-ui, sans-serif;
}
.pub-couleurs [data-couleur="vert"] { background: #3c4a29; }
.pub-couleurs [data-couleur="gris"] { background: #5f645b; }
.pub-couleurs button[aria-pressed="true"] { border-color: #e8c96a; }
.pub-volume button { background: #2b3326; padding: 8px 4px; }
.pub-couleurs button:disabled { opacity: .5; cursor: default; }
.pub-note { margin: -4px 0 0; font-size: 12px; opacity: .75; }
.pub-score {
  margin: 0; padding: 10px; border-radius: 10px; text-align: center;
  background: #12160f; border: 1px solid #3c4a29;
}
.pub-score strong { color: #e8c96a; font-size: 20px; }
.pub-score > span { display: block; }
.pub-score-titre { font-weight: 700; opacity: .85; }
.pub-score-duel {
  display: flex !important; justify-content: center; align-items: baseline; gap: 8px;
  margin: 2px 0; white-space: nowrap;
}
.pub-score-nom { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }

/* Dés (Franne, 04/10/2026, iPhone : « les points des dés débordent »). La
   taille des points était en %, que Safari ne calcule pas comme Chrome : ils
   dépassaient de leur case. Ici, elle se mesure sur le dé lui-même (cqw). */
/* Tous les dés, y compris ceux qui volent au lancer (.die-flyer, hors de la
   colonne : « les dés sont encore bizarres au jet », 04/10/2026). */
.die, .dice-faces .die, #die1.die, #die2.die, .die.die-flyer {
  container-type: size;
}
.die .pip, .die.die-flyer .pip, .dice-faces .die .pip, #die1 .pip, #die2 .pip {
  width: 18cqw !important;
  height: 18cqw !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  place-self: center !important;
}

/* Boutons sur écran tactile : pas de délai ni de zoom au double-toucher
   (« un peu de difficulté à utiliser les boutons », iPhone, 04/10/2026). */
button, .btn, .point, .checker, .off-tray, .bar {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Tablette en portrait : le plateau était plafonné à 420 px de haut et
   laissait un grand vide ; il prend maintenant toute la place disponible.
   Le contenu ne dépasse plus de l'écran. */
/* Depuis que les noms sont dans le Menu (04/10/2026), le téléphone en
   portrait a la même place libre : même règle pour lui. */
@media (orientation: portrait) and (max-width: 1100px) {
  .main { width: 100% !important; max-width: 100% !important; }
  .board-frame {
    max-height: none !important;
    aspect-ratio: auto !important;
    height: 100% !important;
  }
  #board { height: 100% !important; }
}

.pub-menu { display: flex; flex-direction: column; gap: 8px; }
.pub-menu .btn { width: 100%; text-align: left; padding: 10px 12px; }
.pub-menu small { display: block; font-weight: 400; opacity: .75; }

/* Au-dessus du plateau, jamais sur les boutons (04/10/2026). */
.pub-annonce {
  position: fixed; left: 50%; top: 30%; transform: translateX(-50%);
  max-width: calc(100vw - 32px); text-align: center;
  z-index: 99999; padding: 8px 14px; border-radius: 8px;
  background: #1f2a1f; color: #f0ead8; font: 600 14px system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.pub-fond {
  position: fixed; inset: 0; z-index: 99998; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 12, 20, .6);
}
.pub-boite {
  max-width: 400px; width: 100%; padding: 18px 20px; border-radius: 12px;
  background: #1f2a1f; color: #f0ead8; font: 15px/1.5 system-ui, sans-serif;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
/* Le Menu n'est jamais plus haut que l'écran : il défile au besoin. */
.pub-boite { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
/* Écran bas (téléphone à l'horizontale) : boutons du Menu sur deux colonnes. */
@media (orientation: landscape) and (max-height: 500px) {
  .pub-boite { max-width: 560px; padding: 12px 16px; }
  .pub-boite h2 { display: none; }
  .pub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pub-menu .pub-champ, .pub-menu .pub-couleurs, .pub-menu .pub-note, .pub-menu .pub-score { grid-column: 1 / -1; }
  .pub-menu .btn { padding: 7px 10px; font-size: 14px; }
  .pub-score { padding: 6px; }
}
.pub-boite h2 { margin: 0 0 12px; font-size: 19px; }
.pub-boite a { color: #ffe9a8; }
.pub-boite .pub-lien { display: inline-block; text-decoration: none; }
/* « Fermer » toujours visible, même quand le Menu défile (téléphone couché :
   il était sous le bord de l'écran, 04/10/2026). */
.pub-reprise { width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 4px; }
.pub-reprise small { display: block; font-weight: 400; opacity: .75; }
.pub-fermer { margin-top: 12px; position: sticky; bottom: 0; box-shadow: 0 -6px 12px rgba(31, 42, 31, .95); }

/* Compteur « 4 restants » des doubles (Franne, iPhone, 04/10/2026 : il
   couvrait un dé à l'horizontale et le bouton ▶ en vertical). public-solo.js
   le place dans les dés ; ici, une pastille ronde avec le seul chiffre, sur
   le coin du 2e dé, comme une notification. */
.dice-faces { position: relative !important; overflow: visible !important; }
.dice-faces > #dice-moves-left.dice-moves-left {
  right: -0.45rem !important;
  top: -0.45rem !important;
  min-width: 1.3rem !important;
  height: 1.3rem !important;
  padding: 0 0.2rem !important;
  border-radius: 999px !important;
  border-width: 1.5px !important;
  z-index: 5 !important;
}
.dice-faces > #dice-moves-left .dice-moves-left-num { font-size: 0.85rem !important; }
.dice-faces > #dice-moves-left .dice-moves-left-caption { display: none !important; }
/* À l'horizontale, la rangée des dés prend toute la largeur : on la resserre
   sur les dés pour que la pastille reste sur le coin du 2e dé. */
@media (orientation: landscape) and (max-height: 500px) {
  .panel-left .dice-faces {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dice-faces > #dice-moves-left.dice-moves-left { top: -0.15rem !important; }
}