/*
 * La Forge du Compagnon : pages de jeu (solo, défi du jour, en ligne).
 * Le socle (fond, carte #app, boutons, barre du haut) vient de jeu.css partagé,
 * chargé avant ; ici, la forge elle-même et ce qui l'entoure.
 * Charte du réseau : aplats et filets, pas d'ombre colorée ni d'animation
 * d'interface ; seul le matériel de jeu (scène dessinée, jauge) a ses dégradés.
 */

/* Les boutons du socle ont leur propre display : sans ceci, l'attribut hidden ne les cacherait pas. */
.page-forge [hidden] { display: none !important; }

/* Pendant la partie, la forge prend la largeur qu'il lui faut et les blocs
   latéraux du réseau s'effacent ; ils reviennent en fin de partie. */
body.fc-en-jeu #app { max-width: 1120px; }
body.fc-en-jeu .bandeau-infos-wrap,
body.fc-en-jeu .bloc-jeux-une-wrap { display: none !important; }

/* --- Choix du mode -------------------------------------------------------------- */
.choix-mode h1 { margin-bottom: 6px; }
.choix-intro { color: var(--texte-doux); margin-bottom: 18px; }
.choix-cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.choix-carte {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 16px; min-height: 44px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--texte); font: inherit; cursor: pointer; text-align: center;
}
.choix-carte:hover, .choix-carte:focus-visible { border-color: var(--color-light); }
.choix-icone { font-size: 1.8rem; }
.choix-titre { font-weight: 800; font-size: 1.1rem; color: #f0f3f6; }
.choix-texte { color: var(--texte-doux); font-size: 0.9rem; line-height: 1.5; }
.choix-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.choix-badge-classe { background: rgba(245, 166, 91, 0.18); color: #f9c48f; }
.choix-compte, .choix-liens { margin-top: 16px; font-size: 0.88rem; color: var(--texte-doux); }
.choix-compte a, .choix-liens a { color: var(--color-light); }
@media (max-width: 560px) { .choix-cartes { grid-template-columns: 1fr; } }

/* --- La forge ---------------------------------------------------------------------- */
.forge { text-align: left; }
.forge-tete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.forge-compteur { flex: 1 1 auto; min-width: 180px; }
.forge-ecus { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: #fde68a; line-height: 1.1; font-variant-numeric: tabular-nums; }
.forge-unite { font-size: 1rem; color: var(--texte-doux); font-weight: 600; }
.forge-prod { font-size: 0.85rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.forge-infos { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.forge-chrono { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #f0f3f6; font-variant-numeric: tabular-nums; }
.forge-ville, .forge-condition {
  font-size: 0.85rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--texte);
}
.forge-condition { color: #fdba74; }

.forge-corps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.forge-corps.avec-cote { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 220px; }
@media (max-width: 1000px) { .forge-corps.avec-cote { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .forge-corps, .forge-corps.avec-cote { grid-template-columns: 1fr; } }

.forge-commande {
  margin-bottom: 8px; padding: 8px 12px; border-radius: 8px;
  background: rgba(134, 239, 172, 0.1); border: 1px solid rgba(134, 239, 172, 0.35);
  color: #bbf7d0; font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.forge-scene { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0c0908; touch-action: manipulation; }
.forge-scene canvas { display: block; width: 100%; cursor: pointer; -webkit-user-select: none; user-select: none; }
.forge-etincelle {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #fff3c4; background: #f59e0b; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transform: translate(-50%, -50%);
}
.forge-etincelle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.forge-effets {
  position: absolute; left: 10px; bottom: 8px; right: 40px;
  font-size: 0.82rem; font-weight: 700; color: #fde68a; pointer-events: none;
}

.forge-gestes { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 10px; }
.geste {
  min-height: 64px; border-radius: 10px; font: inherit; font-size: 1.05rem; font-weight: 800;
  cursor: pointer; color: #fff; border: 1px solid transparent;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.geste-souffler { background: #5b3a1f; border-color: #7c5130; }
.geste-frapper { background: var(--color-btn1); border-color: #c9682c; }
.geste:active { transform: translateY(1px); }
.geste kbd {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.28); font: 600 0.72rem/1.4 Inter, sans-serif; vertical-align: middle;
}
/* Écran tactile : ni clavier, ni étiquettes de touches (fc-tactile : posé au premier toucher). */
@media (hover: none), (pointer: coarse) { .geste kbd { display: none; } }
body.fc-tactile .geste kbd { display: none; }
.forge-aide { margin-top: 8px; font-size: 0.82rem; color: var(--texte-faible); line-height: 1.5; }
.mot-jaune { color: #fde047; }

/* --- Boutique ------------------------------------------------------------------------ */
.forge-boutique { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.boutique-onglets { display: flex; border-bottom: 1px solid var(--line); }
.boutique-onglet {
  flex: 1; min-height: 44px; padding: 8px 6px; background: none; border: 0;
  border-bottom: 3px solid transparent; color: var(--texte-doux); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer;
}
.boutique-onglet.actif { color: #f0f3f6; border-bottom-color: var(--color-light); background: rgba(255, 255, 255, 0.03); }
.pastille { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--color-btn1); color: #fff; font-size: 0.72rem; line-height: 18px; }
.boutique-panneau { max-height: 480px; overflow-y: auto; padding: 8px; }
.boutique-vide { color: var(--texte-faible); font-size: 0.86rem; padding: 10px; }

.bat-ligne {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom nb" "desc nb" "cout prod";
  width: 100%; gap: 2px 10px; margin-bottom: 6px; padding: 8px 10px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px;
  color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.bat-ligne:hover:not(:disabled) { border-color: var(--color-light); }
.bat-ligne:disabled { cursor: default; opacity: 0.55; }
.bat-nom { grid-area: nom; font-weight: 800; color: #f0f3f6; }
.bat-desc { grid-area: desc; font-size: 0.76rem; color: var(--texte-faible); }
.bat-nb { grid-area: nb; align-self: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--texte-doux); }
.bat-cout { grid-area: cout; font-size: 0.82rem; font-weight: 700; color: #fde68a; }
.bat-prod { grid-area: prod; font-size: 0.78rem; color: var(--texte-doux); text-align: right; }

#fc-ameliorations { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
#fc-ameliorations[hidden] { display: none; }
.amel {
  display: flex; flex-direction: column; gap: 3px; padding: 8px; min-height: 44px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px;
  color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.amel:hover:not(:disabled) { border-color: var(--color-light); }
.amel:disabled { cursor: default; opacity: 0.55; }
.amel-nom { font-weight: 800; font-size: 0.86rem; color: #f0f3f6; }
.amel-desc { font-size: 0.74rem; color: var(--texte-faible); line-height: 1.35; }
.amel-cout { font-size: 0.8rem; font-weight: 700; color: #fde68a; }

#fc-voyage { font-size: 0.9rem; }
.voyage-ici { margin-bottom: 8px; }
.voyage-barre { height: 10px; border-radius: 5px; background: var(--surface-1); border: 1px solid var(--line); overflow: hidden; }
.voyage-barre span { display: block; height: 100%; background: var(--color-mid); }
.voyage-seuil { margin: 6px 0 10px; font-size: 0.82rem; color: var(--texte-doux); }
#fc-partir { width: 100%; }
.voyage-villes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.voyage-villes li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); }
.ville-nom { font-weight: 700; }
.ville-desc { font-size: 0.76rem; color: var(--texte-faible); }
.ville-faite { opacity: 0.65; }
.ville-faite .ville-nom::after { content: ' ✓'; color: #86efac; }
.ville-ici { border-color: var(--color-light) !important; background: rgba(245, 166, 91, 0.08); }
.voyage-chef { margin-top: 12px; padding: 10px; border-radius: 8px; border: 1px dashed var(--line-forte); }
.voyage-chef.chef-fait { border-style: solid; border-color: rgba(134, 239, 172, 0.45); }
.voyage-chef-titre { margin-bottom: 4px; }
.voyage-chef-texte { font-size: 0.8rem; color: var(--texte-doux); margin-bottom: 8px; line-height: 1.45; }
#fc-chef { width: 100%; }

/* Achat groupé, au-dessus de la liste des bâtiments. */
.boutique-qte { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 0.8rem; color: var(--texte-doux); }
.boutique-qte button {
  min-height: 34px; min-width: 48px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line); color: var(--texte); font: inherit; font-weight: 700;
}
.boutique-qte button.actif { border-color: var(--color-light); background: rgba(245, 166, 91, 0.14); color: #fff; }

/* Contrat du jour, prise en main. */
.forge-contrat {
  margin-bottom: 8px; padding: 7px 12px; border-radius: 8px;
  background: rgba(196, 181, 253, 0.08); border: 1px solid rgba(196, 181, 253, 0.35);
  color: #ddd6fe; font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.forge-contrat.contrat-fait { color: #bbf7d0; border-color: rgba(134, 239, 172, 0.35); background: rgba(134, 239, 172, 0.06); }
.forge-tuto {
  margin-bottom: 8px; padding: 10px 12px; border-radius: 8px;
  background: rgba(253, 224, 71, 0.08); border: 1px solid rgba(253, 224, 71, 0.45); color: #fef9c3; font-size: 0.9rem; line-height: 1.5;
}
.forge-tuto-etape { font-size: 0.72rem; font-weight: 700; color: #fde047; letter-spacing: 0.05em; }
.btn-lien { background: none; border: 0; padding: 4px 0 0; color: var(--texte-doux); font: inherit; font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
.forge-rang-mini { font-size: 0.85rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(245, 166, 91, 0.12); border: 1px solid var(--line); color: #fde68a; font-variant-numeric: tabular-nums; }
/* Sur grand écran, le classement en direct est à côté : la pastille ne sert qu'au téléphone. */
@media (min-width: 761px) and (min-height: 501px) { .forge-rang-mini { display: none; } }

/* Carnet du forgeron. */
#fc-carnet { font-size: 0.86rem; }
.carnet-titre { font-size: 0.92rem; margin: 6px 0 8px; color: #f0f3f6; }
.carnet-compte { font-size: 0.78rem; color: var(--texte-doux); font-weight: 600; }
.carnet-stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 12px; }
.carnet-stats dt { color: var(--texte-doux); }
.carnet-stats dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hauts-faits { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.hauts-faits li { display: flex; flex-direction: column; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); }
.hauts-faits .hf-nom { font-weight: 700; }
.hauts-faits .hf-desc { font-size: 0.76rem; color: var(--texte-faible); }
.hauts-faits .hf-ok { border-color: rgba(196, 181, 253, 0.5); background: rgba(196, 181, 253, 0.07); }
.hauts-faits .hf-ok .hf-nom::before { content: '✓ '; color: #c4b5fd; }
.hauts-faits .hf-non { opacity: 0.6; }
.carnet-option { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; cursor: pointer; line-height: 1.4; }
.carnet-option input { margin-top: 3px; accent-color: var(--color-mid); }

/* --- Décompte, fin de partie, fenêtre de dialogue ---------------------------------- */
.decompte {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 6rem; font-weight: 800; color: #fde68a;
  background: rgba(8, 6, 5, 0.55); pointer-events: none;
}
.decompte[hidden] { display: none; }

.fin-partie, .fc-modale {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8, 6, 5, 0.72);
}
.fin-partie[hidden], .fc-modale[hidden] { display: none; }
.fin-boite, .fc-modale-boite {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  padding: 26px 22px 20px; text-align: center;
  background: var(--surface-1); border: 1px solid var(--line-forte); border-radius: 12px;
}
.fin-fermer, .fc-modale-fermer {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  background: none; border: 0; color: var(--texte-doux); font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.fin-fermer:hover, .fc-modale-fermer:hover { color: #fff; }
.fc-modale-boite h2, .fin-boite h2 { margin-bottom: 10px; color: #f0f3f6; }
#fc-modale-texte p { margin-bottom: 8px; line-height: 1.55; color: var(--texte); }
.fc-modale-boutons, .fin-boutons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.fin-score { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: #fde68a; }
.fin-stats { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; color: var(--texte-doux); font-size: 0.9rem; }
.fin-statut { margin: 10px 0; color: var(--texte); font-weight: 600; line-height: 1.5; }
.btn-discret { background: none; border: 1px solid var(--line); color: var(--texte-doux); }

/* --- Défi du jour ---------------------------------------------------------------------- */
.page-defi .classement-section {
  margin-top: 22px; padding: 16px; text-align: left;
  background: rgba(148, 163, 184, 0.09); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.condition-du-jour {
  margin: 12px auto; max-width: 560px; padding: 10px 14px; border-radius: 10px;
  background: rgba(253, 186, 116, 0.08); border: 1px solid rgba(253, 186, 116, 0.35); color: #fed7aa;
}
.condition-du-jour strong { color: #fdba74; }
.etat-defi { margin: 12px 0; font-weight: 700; }
.btn-grand { min-height: 52px; padding: 12px 26px; font-size: 1.05rem; }
.defi-avertissement { margin-top: 8px; font-size: 0.82rem; color: var(--texte-faible); }
.defi-serie { margin-top: 12px; color: var(--texte-doux); font-size: 0.9rem; }
.defi-essai { margin-top: 8px; font-size: 0.82rem; color: var(--texte-doux); }
.lien-entrainement { margin-top: 14px; font-size: 0.88rem; }
.lien-entrainement a { color: var(--color-light); }

/* --- En ligne ---------------------------------------------------------------------------- */
.salon { text-align: left; }
.salon h1, .salon > p { text-align: center; }
.salon-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 640px) { .salon-grille { grid-template-columns: 1fr; } }
.salon-bloc { padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.salon-bloc h2 { font-size: 1.05rem; margin-bottom: 10px; color: #f0f3f6; }
.salon-bloc label { display: block; margin: 8px 0 4px; font-size: 0.85rem; color: var(--texte-doux); font-weight: 600; }
.salon-bloc input[type="text"] {
  width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-1); border: 1px solid var(--line-forte); color: var(--texte); font: inherit;
}
.salon-bloc input[type="text"]:focus { outline: 2px solid var(--color-light); outline-offset: 1px; }
.salon-types { display: grid; gap: 8px; }
.salon-type {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-1); cursor: pointer;
}
.salon-type:has(input:checked) { border-color: var(--color-light); background: rgba(245, 166, 91, 0.08); }
.salon-type input { margin-top: 4px; accent-color: var(--color-mid); }
.salon-type strong { display: block; color: #f0f3f6; }
.salon-type span { font-size: 0.82rem; color: var(--texte-doux); }
.salon-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.salon-ligne-centre { justify-content: center; }
.salon-erreur { color: #fca5a5; font-weight: 600; margin-top: 8px; }
.salon-publiques { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.salon-publiques li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-1); }
.salle-attente { text-align: center; }
.salle-code { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; letter-spacing: 0.18em; color: #fde68a; }
.salle-joueurs { list-style: none; padding: 0; margin: 14px auto; max-width: 420px; display: grid; gap: 6px; text-align: left; }
.salle-joueurs li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.salle-pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.salle-type-titre { color: var(--texte-doux); margin-bottom: 4px; }

.cote-direct { padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-size: 0.86rem; }
.cote-direct h2 { font-size: 0.95rem; margin-bottom: 8px; color: #f0f3f6; }
.direct-joueurs { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.direct-joueurs li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 6px; }
.direct-joueurs li.moi { background: rgba(245, 166, 91, 0.12); }
.direct-joueurs .score { font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums; }
.direct-joueurs .fini { color: var(--texte-faible); font-size: 0.75rem; }
.oeuvre-barre { height: 12px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--line); overflow: hidden; margin: 6px 0; position: relative; }
.oeuvre-barre span { display: block; height: 100%; background: var(--color-mid); }
.oeuvre-paliers { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; font-size: 0.8rem; }
.oeuvre-paliers li.atteint { color: #86efac; font-weight: 700; }
.oeuvre-paliers li.atteint::before { content: '✓ '; }
.oeuvre-cadence { margin-top: 8px; font-size: 0.8rem; color: var(--texte-doux); }
.resultats-multi { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; text-align: left; }
.resultats-multi li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); }
.resultats-multi li.moi { outline: 1px solid var(--color-light); }

.salon-aide { margin-top: 4px; font-size: 0.76rem; color: var(--texte-faible); line-height: 1.4; }
.salon-invitation { margin: 10px auto 0; max-width: 560px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-light); background: rgba(245, 166, 91, 0.08); }
.fin-revanche { margin-top: 6px; color: var(--texte-doux); font-size: 0.88rem; }
.fin-lien-compte { color: var(--color-light); font-weight: 700; }

/* « Créer mon compte » : un vrai bouton plein (texte blanc sur orange foncé, contraste 5:1).
   Le pulse partagé de .auth-inscription le faisait paraître éteint une seconde sur deux. */
.page-forge .defi-compte-btns .defi-btn-inscription { background: #c2410c; border-color: #ea580c; color: #fff; animation: none; }
.page-forge .defi-compte-btns .defi-btn-inscription:hover { background: #ea580c; }
.page-forge .defi-compte-btns .defi-btn-entrainement { background: transparent; border-color: var(--color-light); color: var(--color-light); }
footer .auth-inscription { color: var(--color-light); font-weight: 700; animation: none; }

/* Fenêtre « badge débloqué » du réseau : en bas de l'écran, pas sur le tableau de fin. */
.page-forge .recomp-toasts { top: auto; bottom: 18px; transform: translateX(-50%); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* --- Téléphone : la forge en plein écran ------------------------------------------------
   Debout, tout tient sans défiler : en-tête, scène, boutique (seule partie qui défile),
   puis Frapper et Soufflet sous le pouce. Couché, la scène et les gestes à gauche, la
   boutique à droite. La forge commence sous la barre du réseau (--fc-haut, mesurée par
   js/forge.js). Le classement en direct cède la place à la pastille de rang de l'en-tête. */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  body.fc-en-jeu #forge:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--fc-haut, 0px); z-index: 800;
    display: flex; flex-direction: column; overflow: hidden;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-0);
  }
  body.fc-en-jeu .forge-tete { flex: none; flex-wrap: nowrap; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; }
  body.fc-en-jeu .forge-compteur { min-width: 0; }
  body.fc-en-jeu .forge-ecus { font-size: 1.25rem; }
  body.fc-en-jeu .forge-prod { font-size: 0.72rem; }
  body.fc-en-jeu .forge-infos { gap: 6px; flex-wrap: nowrap; }
  body.fc-en-jeu .forge-chrono { font-size: 1.15rem; }
  body.fc-en-jeu .forge-ville, body.fc-en-jeu .forge-condition, body.fc-en-jeu .forge-rang-mini { font-size: 0.72rem; padding: 3px 8px; white-space: nowrap; }
  body.fc-en-jeu #fc-arreter { min-height: 36px; padding: 4px 10px; }
  body.fc-en-jeu .forge-corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  body.fc-en-jeu .forge-colonne-scene { display: contents; }
  body.fc-en-jeu .forge-tuto, body.fc-en-jeu .forge-commande, body.fc-en-jeu .forge-contrat { flex: none; margin: 0; padding: 5px 10px; font-size: 0.76rem; }
  body.fc-en-jeu .forge-scene { flex: none; height: 26vh; height: 26dvh; --fc-scene-fixe: 1; }
  body.fc-en-jeu .forge-boutique { flex: 1 1 auto; min-height: 96px; display: flex; flex-direction: column; order: 5; }
  body.fc-en-jeu .boutique-onglet { min-height: 38px; padding: 4px 2px; font-size: 0.74rem; }
  body.fc-en-jeu .boutique-panneau { max-height: none; flex: 1 1 auto; min-height: 0; padding: 6px; }
  body.fc-en-jeu .bat-ligne { padding: 6px 8px; margin-bottom: 4px; }
  body.fc-en-jeu .bat-desc { display: none; }
  body.fc-en-jeu .bat-ligne { grid-template-areas: "nom nb" "cout prod"; }
  body.fc-en-jeu .forge-gestes { flex: none; order: 7; margin-top: 0; }
  body.fc-en-jeu .geste { min-height: 58px; }
  body.fc-en-jeu .forge-aide { display: none; }
  body.fc-en-jeu .cote-direct { display: none; }
}

/* Couché (téléphone en paysage) : deux colonnes, rien ne sort de l'écran. */
@media (max-height: 500px) and (orientation: landscape) {
  body.fc-en-jeu .forge-corps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; align-items: stretch; }
  body.fc-en-jeu .forge-colonne-scene { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  /* La scène prend la hauteur qui reste dans la colonne (base 0 : le canvas ne la pousse pas). */
  body.fc-en-jeu .forge-scene { flex: 1 1 0; min-height: 110px; height: auto; }
  body.fc-en-jeu .forge-commande, body.fc-en-jeu .forge-contrat, body.fc-en-jeu .forge-tuto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.fc-en-jeu .forge-tuto { white-space: normal; }
  body.fc-en-jeu .forge-boutique { min-height: 0; height: 100%; }
  body.fc-en-jeu .geste { min-height: 48px; }
}