/* LES VUES DE LA PARTIE : carte, liste des missions, fiche de mission,
   scanner et code, indices, chat, classement, inventaire.
   Charge apres ecrans.css (cf. l'en-tete de base.css). */

/* ============================ CARTE ============================ */

.map-stage { position: absolute; inset: 0; overflow: hidden; background: #16211a; }
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.map-hud { position: absolute; inset: 0; pointer-events: none; }
.map-hud > * { pointer-events: auto; }

.map-tools { position: absolute; right: 12px; top: 14px; display: flex; flex-direction: column; gap: 9px; }
.map-tools .round-btn { background: linear-gradient(180deg, rgba(10, 26, 18, 0.90), rgba(6, 18, 12, 0.94)); }

/* Le nom du bois se range SOUS la colonne d'outils, et sa hauteur se calcule
   au lieu de se deviner : le jour ou un bouton s'y ajoute — le calque de
   couverture reseau, par exemple — un chiffre en dur laisse le nom passer
   dessous. Cinq ronds de 44 px et leurs quatre ecarts de 9, plus le retrait
   du haut. */
.map-place {
  position: absolute; right: 14px;
  top: calc(14px + 5 * 44px + 4 * 9px + 10px);
  text-align: right; font-family: var(--display);
  font-size: 0.92rem; color: #e8f0e2; line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* Fiche de mission en bas de carte. Le fond de <main> descend desormais sous
   la barre d'onglets : les elements cales en bas doivent la degager. */
.target-card {
  position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--nav-lap));
  display: flex; gap: 12px; align-items: stretch;
  padding: 11px;
  cursor: pointer;
}
.target-card .tc-photo {
  width: 92px; flex: none; border-radius: 12px;
  background: rgba(0,0,0,0.4) center/cover no-repeat;
  border: var(--line-soft);
}
.target-card .tc-body { flex: 1; min-width: 0; }
.target-card .tc-idx { font-family: var(--display); font-size: 1.02rem; color: var(--moss); }
.target-card .tc-title { font-family: var(--display); font-size: 1.18rem; font-weight: 700; margin: 1px 0 6px; }
.target-card .tc-brief { font-size: 0.78rem; color: var(--parch-dim); line-height: 1.5; }
.target-card .tc-dist {
  position: absolute; right: 11px; top: 11px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(60, 130, 80, 0.35);
  border: 1px solid rgba(127, 208, 127, 0.35);
  font-size: 0.76rem; font-weight: 750; color: #d9f2d5;
}
.target-card .tc-dist svg { width: 13px; height: 13px; }
.target-card .tc-arrow { align-self: center; color: var(--parch-faint); }
.target-card .tc-facts {
  display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap;
  padding-top: 9px; border-top: var(--line-soft);
}
.fact { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--parch-dim); font-weight: 650; }
.fact svg { width: 14px; height: 14px; color: var(--moss); }

/* boussole compacte */
.compass-rose {
  position: absolute; left: 12px; bottom: calc(196px + var(--nav-lap));
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(24,52,36,0.95), rgba(6,18,12,0.95));
  border: var(--line);
  box-shadow: var(--shadow-3), var(--bevel);
  display: grid; place-items: center;
}
/* Pas de transform-origin ici : le rotate() SVG porte deja son centre. */
.compass-rose .needle { transition: transform 0.16s linear; }
.compass-rose .dist {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  font-size: 0.66rem; font-weight: 800; color: var(--gold);
}

/* ============================ LISTE DES MISSIONS ============================ */

.page-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 4px 0 12px;
}
.page-title h1 { font-size: 1.6rem; color: #f2f6ec; text-shadow: 0 3px 10px rgba(0,0,0,0.7); }
.page-title .leaf { font-size: 1.1rem; }

.hs-val { font-size: 0.96rem; font-weight: 800; color: var(--gold); letter-spacing: 0.04em; white-space: nowrap; }
.hs-val.code { font-family: var(--display); font-size: 1.24rem; letter-spacing: 0.1em; }

.progress-panel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.progress-panel .pp-sigil {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: url("../assets/items/it-09.webp") center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(100, 200, 220, 0.5));
}
.progress-panel .pp-lines { flex: none; font-size: 0.82rem; font-weight: 650; }
.progress-panel .pp-lines span { display: block; color: var(--parch-dim); }
.progress-track {
  flex: 1; height: 7px; border-radius: 999px;
  background: rgba(0,0,0,0.45);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3f8f6a, #63d7c0 70%, #8ff0dd);
  box-shadow: 0 0 12px rgba(100, 220, 200, 0.55);
  transition: width 0.7s var(--ease);
}
.progress-panel .pp-pct { font-weight: 800; color: #86e6d2; font-size: 0.98rem; }

/* ------------------------------------------------- la roue libre

   Sans parcours, plus d'etapes a compter : une barre par famille de choses a
   trouver, chacune avec SON total. C'est ce qui remplace « 3 / 12 missions »
   quand personne ne vous donne d'etape suivante. */
.tally { padding: 12px 14px; margin-bottom: 12px; display: flex;
         flex-direction: column; gap: 11px; }
.tal-row { display: flex; align-items: center; gap: 11px; }
.tal-ic img {
  display: block; width: 32px; height: 32px;
  filter: grayscale(0.55) brightness(0.85);
  transition: filter 0.3s var(--ease);
}
.tal-row.full .tal-ic img { filter: none; }
.tal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.tal-head b { flex: 1; font-size: 0.76rem; font-weight: 750; color: var(--parch-dim); }
.tal-head i {
  font-style: normal; font-size: 0.8rem; font-weight: 800; color: var(--parchment);
  font-variant-numeric: tabular-nums;
}
.tal-row.full .tal-head b, .tal-row.full .tal-head i { color: var(--moss); }
.tal-track {
  display: block; height: 7px; border-radius: 999px;
  background: rgba(0,0,0,0.45);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
  overflow: hidden;
}
.tal-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3f8f6a, #63d7c0 70%, #8ff0dd);
  box-shadow: 0 0 12px rgba(100, 220, 200, 0.55);
  transition: width 0.7s var(--ease);
}
.tal-row.full .tal-fill {
  background: linear-gradient(90deg, #b3934f, #e2c98d 70%, #f5e6bd);
  box-shadow: 0 0 12px rgba(226, 201, 141, 0.6);
}

.filter-row { display: flex; gap: 7px; margin-bottom: 12px; align-items: center; }
.filter {
  flex: 1; padding: 9px 6px; border-radius: 999px;
  border: 1px solid rgba(214, 231, 210, 0.20);
  background: rgba(9, 26, 19, 0.72);
  color: var(--parch-dim); font: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.filter.on {
  background: linear-gradient(180deg, #4f9b5b, #2b6a3e);
  color: #f2fbef; border-color: rgba(160, 232, 168, 0.5);
  box-shadow: 0 4px 16px rgba(60, 150, 80, 0.35);
}
.filter-row .round-btn { width: 38px; height: 38px; }
.filter-row .round-btn svg { width: 17px; height: 17px; }

/* carte claire de mission */
.mcard {
  display: flex; align-items: stretch; gap: 12px;
  background: linear-gradient(160deg, var(--card-light), var(--card-light-2));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--shadow-2);
  padding: 9px;
  margin-bottom: 11px;
  color: var(--ink-card);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
/* Apparition en cascade seulement a l'ouverture de l'onglet : un re-rendu
   (position GPS, statut) ne doit pas rejouer l'animation, ca clignote. */
.mcard.enter { animation: viewIn 0.35s var(--ease) backwards; }
.mcard:active { transform: scale(0.985); }
.mcard.locked { opacity: 0.72; }
.mcard .m-photo {
  width: 78px; flex: none; border-radius: 12px;
  background: #cdd4c4 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}
.mcard .m-body { flex: 1; min-width: 0; padding: 3px 0; }
.mcard .m-head { display: flex; align-items: center; gap: 9px; }
.mcard .m-num {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.6px solid #6faa74; color: #34693c;
  font-weight: 800; font-size: 0.8rem;
  background: #fff;
}
.mcard.done .m-num { background: #6faa74; color: #fff; border-color: #6faa74; }
.mcard .m-title { font-family: var(--display); font-size: 0.92rem; font-weight: 700; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard .m-meta { display: flex; gap: 14px; margin: 7px 0 5px; font-size: 0.78rem; color: #4a5a4d; font-weight: 650; }
.mcard .m-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mcard .m-meta b { font-weight: inherit; }
.mcard .m-meta svg { width: 13px; height: 13px; color: #5d7361; }
.mcard .m-diff { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; }
.mcard .m-diff svg { width: 13px; height: 13px; }
.m-diff.easy { color: #2f8a45; }
.m-diff.medium { color: #b8862c; }
.m-diff.hard { color: #c4483a; }
.mcard .m-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  gap: 8px; padding: 3px 4px 3px 0; flex: none; }
.mcard .m-item { display: flex; align-items: center; gap: 3px; font-size: 0.74rem; font-weight: 800; color: #4a5a4d; }
.mcard .m-item img { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28)); }

/* ============================ FICHE MISSION ============================ */

.mission-band {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 12px;
}
.mission-band .mb-leaf {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(60, 130, 80, 0.28);
  border: 1px solid rgba(127, 208, 127, 0.3);
  color: var(--moss);
}
.mission-band .mb-idx { font-size: 0.94rem; color: var(--moss); font-weight: 750; }
.mission-band .mb-title { font-family: var(--display); font-size: 1.28rem; font-weight: 700; }
.mission-band .mb-diff {
  text-align: center; padding: 6px 12px; border-radius: 12px;
  background: rgba(0,0,0,0.28); border: var(--line-soft);
}
.mission-band .mb-diff .lab { font-size: 0.6rem; color: var(--parch-faint); font-weight: 700; }
.mission-band .mb-diff .dots { font-size: 0.9rem; letter-spacing: 2px; }

.mission-split { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 12px; }
.mission-photo {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: var(--line-soft); box-shadow: var(--shadow-2);
  background: rgba(0,0,0,0.35) center/cover no-repeat;
  aspect-ratio: 1;
}
/* Toute la vignette ouvre la loupe : le doigt vise l'image, pas un picto de
   32 px pose dans un coin. */
.mission-photo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mission-photo:active { transform: scale(0.985); }
/* Le picto reste, mais il ne recoit plus le doigt : il annonce ce que l'image
   fera, il n'est plus la seule cible. */
.mission-photo .zoom {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6, 18, 12, 0.72); border: var(--line-soft);
  color: var(--parchment);
  pointer-events: none;
}
.mission-photo .zoom svg { width: 16px; height: 16px; }

.mini-nav { display: flex; flex-direction: column; gap: 9px; }
.mini-dist { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; }
.mini-dist svg { width: 18px; height: 18px; color: var(--parch-dim); flex: none; }
.mini-dist .md-val { font-family: var(--display); font-size: 1.06rem; font-weight: 700; }
.mini-dist .md-sub { font-size: 0.74rem; color: var(--parch-faint); }
.mini-dist .md-arrow { margin-left: auto; color: var(--moss); }
.mini-map { flex: 1; min-height: 120px; border-radius: var(--radius); overflow: hidden; border: var(--line-soft); position: relative; }
.mini-map canvas { width: 100%; height: 100%; display: block; touch-action: none; }
/* Le croquis SVG passe DERRIERE la toile : il ne sert que lorsque la carte
   n'a rien a montrer (balise non revelee, manifeste pas encore arrive). Une
   toile vide laisse alors voir le plan au lieu d'un rectangle noir. */
.mini-map-fallback { position: absolute; inset: 0; z-index: -1; }
.mini-map-fallback svg { display: block; width: 100%; height: 100%; }

/* ---- deux etats qui changent la lecture d'une mission ----

   Un chef est passe par la, ou un indice a ete ouvert. Le premier se dit en
   toutes lettres, le second teinte la vue entiere : une equipe qui relit sa
   mission doit voir ce qu'elle a deja depense sans avoir a le chercher. */
.mission-help {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 13px;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, rgba(74, 150, 90, 0.26), rgba(74, 150, 90, 0.10));
  border: 1px solid rgba(127, 208, 127, 0.36);
}
.mission-help img { width: 24px; height: 24px; display: block; flex: none; }
.mission-help b { font-size: 0.76rem; color: var(--moss); }
.mission-help i {
  flex: 1 1 100%; font-style: normal; font-size: 0.62rem; color: var(--parch-dim);
}
/* ------------------------------------------------- la photo a la preuve

   L'epreuve elle-meme, dans la fiche de mission : ce qu'il faut rapporter en
   image. Elle porte l'or de la consigne quand il faut y aller, et la braise de
   l'attente quand un chef examine le cliche — l'equipe doit savoir d'un coup
   d'oeil si la balle est dans son camp. */
.proof-task {
  margin-bottom: 12px; padding: 11px 13px;
  border-left: 3px solid var(--gold);
}
.proof-task.waiting { border-left-color: var(--ember); }
.pt-head { display: flex; align-items: center; gap: 9px; }
.pt-ic svg { width: 20px; height: 20px; color: var(--gold); display: block; }
.proof-task.waiting .pt-ic svg { color: var(--ember); }
.pt-head b { display: block; font-size: 0.78rem; font-weight: 800; color: var(--parchment); }
.pt-head i { display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint); }
.pt-body {
  margin-top: 8px; font-size: 0.94rem; font-weight: 700; line-height: 1.35;
  color: var(--parchment);
}
.pt-wait {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; font-size: 0.64rem; color: var(--ember);
}
/* Trois points qui respirent : l'attente a une duree, une icone fixe non. */
.pt-dots { display: inline-flex; gap: 3px; }
.pt-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ember);
  animation: ptDot 1.1s ease-in-out infinite;
}
.pt-dots i:nth-child(2) { animation-delay: 0.16s; }
.pt-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ptDot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pt-dots i { animation: none; opacity: 0.85; }
}
.pt-back {
  margin-top: 9px; padding: 8px 11px; border-radius: 10px;
  background: rgba(217, 105, 92, 0.14);
  border: 1px solid rgba(217, 105, 92, 0.34);
}
.pt-back b { display: block; font-size: 0.68rem; color: #eda093; }
.pt-back i { display: block; font-style: normal; font-size: 0.74rem; color: var(--parch-dim); margin-top: 2px; }

/* La consigne pendant qu'on cadre : elle reste sous les yeux, sinon on
   rapporte ce qu'on avait en tete avant d'ouvrir la camera. */
.proof-order {
  margin-bottom: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(226, 201, 141, 0.12);
  border: 1px solid rgba(226, 201, 141, 0.30);
}
.proof-order b {
  display: block; font-size: 0.54rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--parch-faint);
}
.proof-order i {
  display: block; font-style: normal; font-size: 0.94rem; font-weight: 700;
  color: var(--gold); margin-top: 2px;
}

/* Le verdict, en grand. Vert ou rouge selon la reponse : c'est la premiere
   chose qu'on lit, avant meme le titre. */
.verdict-sheet .vs-ic { color: var(--moss); }
.verdict-sheet.bad .vs-ic { color: var(--rot); }
.vs-note {
  margin: 0 0 12px; padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-style: italic; color: var(--parch-dim);
  background: rgba(238, 241, 230, 0.06);
}
.vs-task {
  margin: 0 0 14px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(226, 201, 141, 0.12);
  border: 1px solid rgba(226, 201, 141, 0.30);
}
.vs-task b {
  display: block; font-size: 0.54rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--parch-faint);
}
.vs-task i {
  display: block; font-style: normal; font-size: 0.92rem; font-weight: 700;
  color: var(--gold); margin-top: 2px;
}

/* Une teinte, pas un bandeau de plus : la mission reste lisible, elle a
   seulement change de couleur. Le voile est en `::before` pour ne pas
   repeindre le fond de chaque panneau. */
#view-mission.used-hint { position: relative; }
#view-mission.used-hint::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(226, 201, 141, 0.10), rgba(226, 201, 141, 0.03));
}
#view-mission.used-hint > * { position: relative; z-index: 1; }
.mini-plan {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; width: 100%;
  color: var(--parchment); font: inherit; font-weight: 700; font-size: 0.86rem;
  cursor: pointer;
}
.mini-plan svg { width: 18px; height: 18px; color: var(--moss); }
.mini-plan .pill-arrow { margin-left: auto; }

.rewards { padding: 14px; margin-bottom: 12px; }
.rewards h3 { color: var(--moss); font-family: var(--display); font-size: 1.02rem; margin-bottom: 3px; }
.rewards .r-sub { font-size: 0.8rem; color: var(--parch-dim); margin-bottom: 12px; }
/* Deux colonnes plutot que trois : au-dela, les libelles se cassent en
   trois lignes et la ligne de recompenses devient illisible. */
.rewards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px 12px; align-items: center; }
.reward { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reward img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.reward .r-name { font-size: 0.78rem; font-weight: 750; line-height: 1.3; }
.reward .r-sub2 { font-size: 0.68rem; color: var(--parch-faint); line-height: 1.32; }
.reward .r-pts { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--moss-soft); flex: none; }

/* ============================ SCANNER / CODE ============================ */

.scan-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* Bandeau volontairement compact : il mange le viseur s'il s'etale. */
.scan-head { margin: 12px 12px 0; display: flex; gap: 12px; align-items: center; padding: 8px 14px; }
.scan-head .sh-ic {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(60, 130, 80, 0.22); border: 1px solid rgba(127, 208, 127, 0.3);
  color: var(--moss);
}
.scan-head b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.scan-head i { font-style: normal; font-size: 0.76rem; color: var(--parch-dim); line-height: 1.28; margin-top: 2px; display: block; }

.scan-stage { position: relative; flex: 1; min-height: 0; margin: 12px 0 0; overflow: hidden; background: #06120c; }
.scan-stage video, .scan-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-stage .cam-still { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0.55; }
/* Mire carree, centree sur l'ecran : un QR est carre, viser dans un
   rectangle fait mal cadrer. Taille bornee pour rester a portee du pouce. */
.cam-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(58vw, 230px); aspect-ratio: 1; pointer-events: none;
}
.cam-frame i {
  position: absolute; width: 38px; height: 38px;
  border: 6px solid #9ff09a; border-radius: 12px;
  filter: drop-shadow(0 0 8px rgba(140, 240, 140, 0.7));
}
.cam-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cam-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cam-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cam-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* La ligne balaie la mire, pas tout l'ecran : elle est dans son repere. */
.cam-scan {
  position: absolute; top: 50%; left: 50%;
  width: min(58vw, 230px); height: min(58vw, 230px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cam-scan::after {
  content: ''; position: absolute; left: 4px; right: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, #9ff09a, transparent);
  box-shadow: 0 0 16px #9ff09a;
  animation: scanline 2.6s ease-in-out infinite;
}
@keyframes scanline { 0%,100% { top: 8%; } 50% { top: 90%; } }

.scan-side { position: absolute; right: 12px; top: 32%; display: flex; flex-direction: column; gap: 16px; }
.scan-side button {
  border: 0; background: none; color: #eef1e6; font: inherit; font-size: 0.68rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
}
.scan-side .sb-ic {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6, 16, 11, 0.82);
  border: 1px solid rgba(168, 205, 172, 0.30);
  box-shadow: var(--shadow-2);
}
.scan-side svg { width: 21px; height: 21px; }

.scan-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(118px + var(--nav-lap));
  padding: 10px 20px; border-radius: 999px;
  background: rgba(6, 16, 11, 0.84);
  border: 1px solid rgba(168, 205, 172, 0.34);
  font-size: 0.84rem; white-space: nowrap;
  box-shadow: var(--shadow-2);
}

.detect-card {
  position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--nav-lap));
  display: flex; gap: 12px; align-items: center; padding: 11px;
  cursor: pointer;
}
.detect-card .d-photo {
  width: 64px; height: 64px; flex: none; border-radius: 10px; position: relative;
  background: rgba(0,0,0,0.4) center/cover no-repeat;
}
.detect-card .d-check {
  position: absolute; right: -6px; bottom: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #4f9b5b; color: #fff; border: 2px solid var(--ink-800);
}
.detect-card .d-check svg { width: 13px; height: 13px; }
.detect-card .d-lab { color: var(--moss); font-size: 0.82rem; font-weight: 700; }
.detect-card .d-title { font-family: var(--display); font-size: 1.12rem; font-weight: 700; }
.detect-card .d-sub { font-size: 0.76rem; color: var(--parch-faint); }

/* saisie du mot */
.code-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.code-strip {
  margin: 12px 12px 0; display: flex; align-items: center; gap: 12px; padding: 11px 14px;
}
.code-strip .cs-leaf { color: var(--moss); }
.code-strip .cs-idx { color: var(--moss); font-size: 0.92rem; font-weight: 750; }
.code-strip .cs-title { font-family: var(--display); font-size: 1.06rem; font-weight: 700; }
.code-strip .cs-place { text-align: right; font-size: 0.8rem; }
.code-strip .cs-place span { display: block; font-size: 0.66rem; color: var(--parch-faint); }
.code-photo { flex: 1; min-height: 130px; margin-top: 12px; background: center/cover no-repeat #10201a; }
.code-panel { margin: -22px 12px 12px; position: relative; padding: 18px 16px; }
.code-panel h2 { text-align: center; font-size: 1.16rem; }
.code-panel .cp-sub { text-align: center; font-size: 0.8rem; color: var(--parch-faint); margin: 4px 0 14px; }
.code-wrap { position: relative; }
.code-wrap input { text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.14rem; font-weight: 700; padding-right: 46px; }
.code-wrap .clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--parch-faint); cursor: pointer; padding: 4px;
}
.code-wrap .clear svg { width: 18px; height: 18px; }

.verdict {
  margin-top: 14px; padding: 16px; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid rgba(127, 208, 127, 0.45);
  background: linear-gradient(170deg, rgba(48, 106, 66, 0.42), rgba(16, 42, 28, 0.55));
  box-shadow: var(--glow-moss);
  position: relative; overflow: hidden;
}
.verdict.bad { border-color: rgba(217,105,92,0.45); background: linear-gradient(170deg, rgba(120,48,40,0.42), rgba(42,16,14,0.55)); box-shadow: none; }
.verdict .v-ic {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2.5px solid var(--moss); color: var(--moss);
}
.verdict.bad .v-ic { border-color: var(--rot); color: var(--rot); }
.verdict .v-ic svg { width: 22px; height: 22px; }
.verdict h3 { font-family: var(--display); font-size: 1.22rem; color: var(--moss); margin-top: 8px; }
.verdict.bad h3 { color: #f0968a; }
.verdict p { margin: 0; font-size: 0.84rem; color: var(--parch-dim); }
.verdict .v-leaf { position: absolute; font-size: 2rem; opacity: 0.35; top: 16px; }
.verdict .v-leaf.l { left: 14px; } .verdict .v-leaf.r { right: 14px; }

.loot-line { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 16px 0 4px; }
.loot-line img { width: 62px; height: 62px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.loot-line div { font-size: 0.86rem; color: var(--parch-dim); }

/* ============================ INDICES ============================ */

.purse-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.purse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line); box-shadow: var(--shadow-1), var(--bevel);
}
.purse .p-val { font-weight: 800; font-size: 1.05rem; }
.purse .p-lab { font-size: 0.72rem; color: var(--parch-dim); }
.purse .coin { width: 26px; height: 26px; }

.hint-head { display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 14px; }
.hint-head .hh-photo { width: 76px; height: 76px; flex: none; border-radius: 12px; background: rgba(0,0,0,0.35) center/cover no-repeat; }
.hint-head .hh-title { font-family: var(--display); font-size: 1.16rem; }
.hint-head .hh-title b { color: var(--moss); font-weight: 700; }
.hint-head p { margin: 8px 0 0; font-size: 0.84rem; color: var(--parch-dim); }

.hint-sep { text-align: center; font-family: var(--display); font-size: 1.02rem; color: #dbe7d3; margin: 4px 0 12px; }

.hint-card {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 10px; margin-bottom: 11px;
  position: relative;
}
.hint-card.best { border-color: rgba(100, 200, 224, 0.45); box-shadow: var(--shadow-2), 0 0 22px rgba(100,200,224,0.20); }
.hint-card .hc-ring {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(127, 208, 127, 0.45);
  background: rgba(20, 50, 34, 0.6);
  color: var(--moss);
}
.hint-card.best .hc-ring { border-color: rgba(100,200,224,0.6); color: var(--gem); }
.hint-card .hc-thumb { width: 60px; height: 60px; flex: none; border-radius: 9px; background: rgba(0,0,0,0.4) center/cover no-repeat; border: var(--line-soft); }
.hint-card .hc-txt { flex: 1; min-width: 0; }
.hint-card .hc-name { font-family: var(--display); font-size: 1.0rem; color: var(--moss); font-weight: 700; line-height: 1.15; }
.hint-card.best .hc-name { color: #9fdff0; }
.hint-card .hc-desc { font-size: 0.76rem; color: var(--parch-dim); margin-top: 4px; line-height: 1.5; }
.hint-card .hc-buy { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.hint-card .hc-price { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 0.92rem; }
.hint-card .hc-price small { font-size: 0.62rem; color: var(--parch-faint); font-weight: 700; display: block; }
.hint-card .flag {
  position: absolute; left: 12px; top: -8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em;
  background: linear-gradient(180deg, #2b7fa0, #1a5470); color: #dff2fb;
  border: 1px solid rgba(120, 210, 240, 0.4);
}

.note-strip {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; margin-bottom: 9px;
  font-size: 0.78rem; color: var(--parch-dim);
}
.note-strip svg { width: 19px; height: 19px; flex: none; color: var(--parch-faint); }
.note-strip img { width: 34px; height: 34px; margin-left: auto; }

/* ============================ CHAT ============================ */

.chat-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-title { padding: 10px 14px 2px; }
.chat-title h1 { font-size: 1.4rem; }

.chat-tabs { display: flex; gap: 7px; padding: 10px 12px 8px; }
.chat-tabs .seg {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(214, 231, 210, 0.18);
  background: rgba(9, 26, 19, 0.72);
  color: var(--parch-dim);
  font: inherit; font-weight: 700; font-size: 0.72rem;
  padding: 10px 4px; border-radius: 999px; cursor: pointer;
  position: relative; white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.chat-tabs .seg svg { width: 15px; height: 15px; flex: none; }
.chat-tabs .seg.on {
  background: linear-gradient(180deg, rgba(70, 150, 95, 0.45), rgba(28, 74, 46, 0.55));
  color: #eaf7e6; border-color: rgba(160, 232, 168, 0.42);
  box-shadow: var(--bevel);
}
.chat-tabs .seg .n {
  position: absolute; top: -4px; right: 6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--rot); color: #fff; font-size: 0.62rem; font-weight: 800;
  display: grid; place-items: center;
}

.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 12px 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg { display: flex; gap: 9px; align-items: flex-start; animation: bubbleIn 0.3s var(--ease); }
.msg .avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.msg .m-col { min-width: 0; max-width: 82%; }
.msg .m-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 0.72rem; }
.msg .m-who { font-weight: 800; color: #dbe7d3; }
.msg .m-when { color: var(--parch-faint); }
.msg .m-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px; font-size: 0.6rem; font-weight: 800;
  background: rgba(226,201,141,0.16); color: var(--gold); border: 1px solid rgba(226,201,141,0.3);
}
.bubble {
  padding: 10px 14px;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(170deg, rgba(28, 60, 43, 0.92), rgba(15, 36, 26, 0.94));
  border: var(--line-soft);
  box-shadow: var(--shadow-1);
  -webkit-user-select: text; user-select: text;
  word-break: break-word;
  font-size: 0.9rem;
}
@keyframes bubbleIn { from { opacity:0; transform: translateY(8px) scale(0.97); } to { opacity:1; transform:none; } }
.msg.mine { flex-direction: row-reverse; }
.msg.mine .m-col { align-items: flex-end; display: flex; flex-direction: column; }
.msg.mine .m-top { flex-direction: row-reverse; }
.msg.mine .bubble {
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(170deg, rgba(58, 104, 72, 0.95), rgba(32, 68, 46, 0.95));
  border-color: rgba(160, 232, 168, 0.24);
}
.msg.admin .bubble {
  background: linear-gradient(170deg, rgba(38, 82, 54, 0.92), rgba(20, 48, 32, 0.94));
  border-color: rgba(127, 208, 127, 0.35);
}
.msg .m-ticks { color: var(--moss); font-size: 0.72rem; margin-left: 6px; }
.reactions { display: flex; gap: 6px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(9, 26, 19, 0.85); border: var(--line-soft);
  font-size: 0.72rem; font-weight: 700; color: var(--parch-dim);
  cursor: pointer;
}
.msg-card {
  display: flex; gap: 10px; align-items: center;
  padding: 9px; border-radius: 14px;
  background: linear-gradient(170deg, rgba(28, 60, 43, 0.92), rgba(15, 36, 26, 0.94));
  border: var(--line-soft); box-shadow: var(--shadow-1);
}
.msg-card .mc-photo { width: 62px; height: 52px; flex: none; border-radius: 9px; background: rgba(0,0,0,0.4) center/cover no-repeat; }
.msg-card b { display: block; font-size: 0.88rem; }
.msg-card i { font-style: normal; font-size: 0.76rem; color: var(--parch-dim); }

/* En portrait le chat est une vue de main, donc au-dessus de la barre
   d'onglets : la marge de securite du bas n'est ajoutee qu'en paysage, ou le
   dock touche vraiment le bord de l'ecran (voir la media query plus bas). */
.chat-form {
  display: flex; gap: 8px; align-items: center;
  padding: 9px 12px 10px;
  border-top: var(--line-soft);
}
.chat-form input { flex: 1; padding: 12px 16px; border-radius: 999px; }
.chat-form .round-btn.send { background: linear-gradient(180deg, #4f9b5b, #2b6a3e); border-color: rgba(160,232,168,0.45); }

/* Panneau de chat : masque en portrait, dock lateral en paysage. */
.chat-dock {
  display: none;
  flex-direction: column;
  border-left: var(--line-soft);
  background: linear-gradient(180deg, rgba(12, 32, 22, 0.80), rgba(6, 18, 12, 0.90));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-right: calc(env(safe-area-inset-right, 0px));
  overflow: hidden;
}

/* ============================ CLASSEMENT ============================ */

.board-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.board-head h1 { font-size: 1.7rem; }
.board-head .bh-sub { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--parch-dim); }
.board-head .bh-sub svg { width: 15px; height: 15px; }
.board-live { margin-left: auto; text-align: right; }
.board-live .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 8px var(--moss); margin-right: 5px; }
.board-live small { font-size: 0.7rem; color: var(--parch-dim); }
.board-live .quip { font-family: var(--display); font-style: italic; font-size: 0.78rem; color: var(--moss-soft); margin-top: 4px; }

.board-cols {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 50px 58px 62px;
  gap: 6px; padding: 0 10px 7px;
  font-size: 0.68rem; font-weight: 800; color: var(--parch-faint);
  letter-spacing: 0.04em;
}
.board-cols span:nth-child(n+3) { text-align: center; }
.board-cols span:last-child { text-align: right; }

.rank-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 50px 58px 62px;
  gap: 6px; align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line-soft);
  box-shadow: var(--shadow-1), var(--bevel);
  margin-bottom: 8px;
  animation: viewIn 0.35s var(--ease) backwards;
}
.rank-row.p1 { background: linear-gradient(165deg, rgba(150, 118, 42, 0.55), rgba(58, 44, 14, 0.75)); border-color: rgba(226,201,141,0.42); }
.rank-row.p2 { background: linear-gradient(165deg, rgba(110, 122, 118, 0.45), rgba(36, 46, 42, 0.75)); border-color: rgba(210,220,215,0.3); }
.rank-row.p3 { background: linear-gradient(165deg, rgba(140, 92, 44, 0.45), rgba(52, 34, 16, 0.75)); border-color: rgba(200,140,90,0.32); }
.rank-row.me { box-shadow: var(--shadow-2), var(--glow-moss); border-color: rgba(127,208,127,0.5); }

.rank-num { display: grid; place-items: center; font-weight: 900; font-size: 1.0rem; color: var(--parch-dim); }
.rank-num .podium {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 900; color: #2a1e08;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rank-num .podium.p1 { background: linear-gradient(180deg, #f5dd9a, #c39a3e); }
.rank-num .podium.p2 { background: linear-gradient(180deg, #e4e9e5, #9aa39c); }
.rank-num .podium.p3 { background: linear-gradient(180deg, #e2ab74, #a56c36); }
.rank-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-team .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.rank-name { font-weight: 750; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-motto { font-family: var(--display); font-style: italic; font-size: 0.7rem; color: var(--parch-faint); }
.rank-miss { text-align: center; }
.rank-miss .rm-val { font-size: 0.72rem; font-weight: 750; white-space: nowrap; }
.rank-miss .progress-track { height: 5px; margin-top: 4px; }
.rank-frags { display: flex; align-items: center; justify-content: center; gap: 2px; }
.rank-frags img { width: 17px; height: 17px; opacity: 0.9; }
.rank-frags .more { font-size: 0.68rem; font-weight: 800; color: var(--parch-dim); }
.rank-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.rank-score { font-weight: 850; font-size: 0.92rem; }
.rank-delta { font-size: 0.64rem; font-weight: 800; }
.rank-delta.up { color: var(--moss); } .rank-delta.down { color: #ef8a7a; } .rank-delta.flat { color: var(--parch-faint); }

.board-foot {
  display: flex; align-items: flex-end; gap: 10px;
  margin-top: 14px; padding: 14px 16px;
}
.board-foot .quote { flex: 1; font-family: var(--display); font-style: italic; font-size: 0.84rem; color: #4a3620; }
.board-foot img { width: 74px; align-self: flex-end; }

/* ============================ INVENTAIRE ============================ */

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 11px; }
.inv-slot {
  aspect-ratio: 1;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px;
  background: linear-gradient(165deg, var(--glass-1), var(--glass-3));
  border: var(--line-soft);
  box-shadow: var(--shadow-1), var(--bevel), inset 0 -16px 28px rgba(0,0,0,0.30);
  text-align: center; position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.18s var(--ease);
}
.inv-slot.filled { border-color: rgba(226,201,141,0.28); }
.inv-slot.filled::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(226,201,141,0.18), transparent 62%);
}
.inv-slot:active { transform: scale(0.95); }
.inv-slot img { width: 52px; height: 52px; position: relative; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.inv-slot .nm { font-size: 0.66rem; font-weight: 700; line-height: 1.2; position: relative; }
.inv-slot.empty { opacity: 0.32; border-style: dashed; cursor: default; }
.inv-slot.empty svg { width: 26px; height: 26px; }
.inv-slot .sym {
  position: absolute; top: 6px; right: 8px;
  font-size: 0.8rem; font-weight: 900; color: var(--gold);
  text-shadow: 0 0 10px rgba(226,201,141,0.6);
}


/* ---- jauges de la carte : parcourus, temps sur l'etape ----
   Deux chiffres que le sentier reclame. Ils se posent sous la rose, du meme
   cote, pour ne pas encombrer le centre de la carte. */
.map-gauges {
  position: absolute; left: 12px; bottom: 92px;
  display: flex; gap: 7px; pointer-events: none;
}
.gauge {
  padding: 5px 9px; border-radius: 10px;
  background: rgba(9, 20, 14, 0.78);
  border: var(--line-soft);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.gauge i {
  display: block; font-style: normal; font-size: 0.5rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--parch-faint);
}
.gauge b { display: block; font-size: 0.76rem; color: var(--parchment); }
/* Le temps imparti depasse : la jauge vire, sans rien bloquer — c'est au
   serveur de trancher, pas a un compteur d'ecran. */
.gauge b.over { color: var(--rot); }

/* ---- la decouverte d'une zone ----
   L'equipe marchait, quelque chose s'est ouvert. Feuille collante : elle ne se
   ferme que par « J'ai compris », comme une consigne de chef. Sans accuse,
   l'information est une bouteille a la mer. */
.discovery .disc-ic { width: 72px; height: 72px; margin: 0 auto; }
.discovery .disc-ic img { width: 100%; height: 100%; display: block; }
.disc-photo {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: 10px;
}
.disc-name {
  font-family: var(--display); font-weight: 800; font-size: 0.92rem;
  color: var(--gold);
}


/* ============================ CARNET DE ROUTE ============================

   Une page libre, pas une liste : sur un sentier on griffonne un code ou un
   compte de pierres, on ne remplit pas un formulaire. Elle prend toute la
   hauteur qui reste — un carnet qui montre quatre lignes oblige a faire
   defiler pour relire ce qu'on vient d'ecrire. */
.notes-pad {
  display: block; width: 100%; min-height: 46vh;
  padding: 14px 15px; box-sizing: border-box;
  border-radius: var(--radius-sm); border: var(--line);
  background: rgba(238, 241, 230, 0.05);
  color: var(--parchment);
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.55;
  resize: vertical; -webkit-appearance: none; appearance: none;
}
.notes-pad:focus { outline: none; border-color: var(--gold); }
.notes-bar { display: flex; gap: 8px; margin-top: 10px; }
.notes-bar .btn { flex: 1 1 auto; }


/* ====================== ENIGME A CHOIX MULTIPLE ======================

   Des propositions a toucher plutot qu'un mot a taper : sous la pluie, a bout
   de bras, avec des gants, c'est la seule saisie qui marche. Elles s'empilent
   sur toute la largeur — une grille de deux colonnes coupe les reponses
   longues, et une reponse tronquee sur une epreuve a une seule chance est un
   piege. */
.qcm { display: flex; flex-direction: column; gap: 9px; }
.qcm-pick {
  width: 100%; padding: 15px 16px; text-align: left;
  border-radius: var(--radius-sm); border: 1.5px solid rgba(238, 241, 230, 0.16);
  background: rgba(238, 241, 230, 0.06);
  color: var(--parchment);
  font-family: inherit; font-size: 0.94rem; font-weight: 700; line-height: 1.35;
  cursor: pointer;
  transition: transform 0.12s var(--ease), border-color 0.16s, background 0.16s;
}
.qcm-pick:active { transform: scale(0.985); border-color: var(--gold); background: rgba(226, 201, 141, 0.14); }

/* La seule chance se dit AVANT, pas apres : c'est le seul avertissement de
   l'application qui a le droit d'etre voyant, parce qu'il n'y a pas de
   deuxieme essai pour rattraper le geste. */
.cp-sub.one-shot {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  color: var(--ember); font-weight: 800;
}
.cp-sub.one-shot svg { width: 16px; height: 16px; flex: none; }