/* LE POSTE DE L'ORGANISATEUR — celui qui encadre sans jouer.
   Charge en DERNIER (cf. l'en-tete de base.css). */

/* ============================ l'organisateur ============================
   Le poste de celui qui encadre sans jouer : troupes, outils, repli. */

/* Qui est aux commandes. L'organisateur partage la coque du joueur — meme
   carte, meme chrono, meme fil — et rien a l'ecran ne disait qu'on encadre au
   lieu de jouer. Le bandeau tient sa propre rangee de la coque (`role`) plutot
   que de flotter : pose sur la carte, il recouvrirait le terrain, et
   l'auto-placement de la grille le rejetait sous les onglets. */
.role-banner {
  grid-area: role;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* 24 px sous le bandeau, pas 6 : `main` remonte de 18 px pour que son
     arrondi se decoupe sur l'entete, et sans cette marge il mordait la moitie
     basse du bandeau. La rangee ne coute rien quand le bandeau est cache. */
  margin: 0 10px 24px; padding: 7px 12px;
  border-radius: 11px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(178, 140, 62, 0.14);
  border: 1px solid rgba(226, 201, 141, 0.30);
}
.role-banner img { width: 20px; height: 20px; display: block; }
/* Le poste de veille observe, il ne commande pas : sa teinte est plus froide,
   pour qu'on ne confonde pas les deux d'un coup d'oeil. */
.role-banner.watch {
  color: var(--sky, #8cc8ff);
  background: rgba(108, 158, 214, 0.14);
  border-color: rgba(140, 200, 255, 0.30);
}

/* Ordre de repli : il coiffe le jeu, on ne peut pas ne pas le voir. */
/* Le bandeau occupe sa propre rangee de la coque : en flottant, il recouvrirait
   la carte, et l'auto-placement de la grille le rejetait sous les onglets. */
.rally-banner {
  grid-area: rally;
  display: flex; align-items: center; gap: 10px;
  margin: 0 10px 6px; padding: 10px 13px; border-radius: 13px;
  color: #1a1408; font-weight: 700;
  box-shadow: var(--shadow-2);
  animation: rally-in 0.32s var(--ease);
}
.rally-banner.important { background: linear-gradient(180deg, #f0d47a, #e8c34a); }
.rally-banner.urgent { background: linear-gradient(180deg, #f0776c, #e8564a); color: #2a0d0a; }
.rally-banner svg { flex: 0 0 auto; }
.rally-banner b { display: block; font-size: 0.8rem; }
.rally-banner i { display: block; font-style: normal; font-size: 0.62rem; opacity: 0.78; }
@keyframes rally-in { from { transform: translateY(-14px); opacity: 0; } }

/* Sceau de l'aventure et code des organisateurs, sur l'ecran du code. */
.code-qr {
  display: block; width: 168px; margin: 0 auto 8px;
  border-radius: 12px; box-shadow: var(--shadow-1);
}
.organizer-code {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
  background: rgba(226, 201, 141, 0.10);
  border: 1px solid rgba(226, 201, 141, 0.28);
}
.organizer-code .cc-ic svg { width: 20px; height: 20px; color: var(--gold); display: block; }
.organizer-code .cc-ic img { width: 32px; height: 32px; display: block; }
.organizer-code b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); }
.organizer-code i { display: block; font-style: normal; font-size: 0.56rem; color: var(--parch-faint); }

/* Fiches de troupe. */
.organizer-head { margin-bottom: 12px; }
.organizer-head p { margin: 2px 0 0; }
.crew {
  margin-bottom: 12px; padding: 12px; border-radius: 15px;
  background: var(--glass-2);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.crew-head { display: flex; align-items: center; gap: 10px; }
.crew-head b { display: block; font-size: 0.84rem; font-weight: 800; color: var(--parchment); }
.crew-head i { display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint); }
.crew-bar {
  height: 5px; border-radius: 999px; margin: 9px 0;
  background: rgba(0, 0, 0, 0.3); overflow: hidden;
}
.crew-bar span { display: block; height: 100%; border-radius: 999px; }
.crew-step {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 11px;
  background: rgba(238, 241, 230, 0.05);
}
.crew-step.waiting { background: rgba(217, 139, 70, 0.16); }
.crew-step .cs-ic svg { width: 17px; height: 17px; color: var(--parch-dim); display: block; }
.crew-step b { display: block; font-size: 0.74rem; color: var(--parchment); }
.crew-step i { display: block; font-style: normal; font-size: 0.58rem; color: var(--parch-faint); }
.crew-proof { display: block; width: 100%; border-radius: 11px; margin-top: 8px; }
/* Depuis la fiche d'une troupe, la preuve n'est qu'un renvoi : on arbitre dans
   la boite, ou le cliche est en grand a cote de la consigne qu'il doit
   satisfaire. */
.crew-proof-go {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 8px; padding: 6px 10px 6px 6px;
  border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(217, 139, 70, 0.16);
  border: 1px solid rgba(217, 139, 70, 0.34);
  color: var(--parchment);
}
.crew-proof-go img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.crew-proof-go b { display: block; font-size: 0.74rem; }
.crew-proof-go i { display: block; font-style: normal; font-size: 0.58rem; color: var(--parch-faint); }
.crew-acts { display: flex; gap: 7px; margin-top: 8px; }

/* ------------------------------------------------------------- arbitrage

   Une carte par preuve : la troupe, ce qu'on lui demandait, le cliche, et les
   trois gestes. Rien a aller chercher ailleurs — un chef arbitre debout, avec
   une main. */
.proof {
  border-radius: var(--radius); padding: 11px; margin-bottom: 11px;
  background: linear-gradient(165deg, rgba(38, 58, 42, 0.86), rgba(20, 34, 24, 0.92));
  border: 1px solid rgba(217, 139, 70, 0.30);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}
.pr-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pr-head b { display: block; font-size: 0.82rem; font-weight: 800; color: var(--parchment); }
.pr-head i { display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint); }
.pr-age { font-size: 0.58rem; font-weight: 700; color: var(--ember); white-space: nowrap; }
.pr-task {
  padding: 7px 10px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(238, 241, 230, 0.06);
  border-left: 3px solid var(--gold);
}
.pr-task b { display: block; font-size: 0.56rem; letter-spacing: 0.08em;
             text-transform: uppercase; color: var(--parch-faint); }
.pr-task i { display: block; font-style: normal; font-size: 0.82rem; font-weight: 700;
             color: var(--parchment); margin-top: 2px; }
.pr-shot {
  display: block; width: 100%; border-radius: 12px; cursor: zoom-in;
  max-height: 46vh; object-fit: cover;
}
.pr-note { font-size: 0.6rem; color: var(--parch-faint); margin-top: 7px; }
.crew-players { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.crew-player {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 5px; border-radius: 999px; cursor: pointer;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.10);
  color: var(--parch-dim);
}
.crew-player .avatar.sm { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.crew-player b { display: block; font-size: 0.66rem; color: var(--parchment); }
.crew-player i { display: block; font-style: normal; font-size: 0.52rem; color: var(--parch-faint); }
/* Plus de dix minutes sans nouvelle : c'est ce que l'organisateur doit reperer d'abord. */
.crew-player.lost { border-color: rgba(217, 105, 92, 0.45); }
.crew-player.lost i { color: #eda093; }

/* Outils. */
.tool { margin-bottom: 12px; }
/* Les quatre portes des outils : la meme brique que l'accueil, en pleine
   largeur. Le menu respire un peu plus qu'une liste de reglages — on le vise
   en marchant, souvent d'une seule main. */
#view-tools .brick.door { padding: 13px 12px; }
#view-tools .tool-head { margin-bottom: 12px; }
/* Pancarte de section, pour les blocs empiles des outils du organisateur. La largeur
   seule la reduit : le padding est en pourcentage et l'aspect-ratio fixe la
   hauteur — y toucher en pixels decalerait le texte hors du bois. */
.wood-sign.sm {
  width: 100%; max-width: 268px;
  margin: -2px auto 12px;
  font-size: 0.84rem;
  /* Le bois n'a qu'une ligne de haut : un titre qui passe a la ligne deborde
     par le bas. Il vaut mieux le serrer que le laisser sortir du cadre. */
  white-space: nowrap;
}
.rally-live {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 10px;
}
.rally-live.important { background: rgba(232, 195, 74, 0.18); border: 1px solid rgba(232, 195, 74, 0.4); }
.rally-live.urgent { background: rgba(232, 86, 74, 0.18); border: 1px solid rgba(232, 86, 74, 0.45); }
.rally-live .ry-ic svg { width: 20px; height: 20px; color: var(--parchment); display: block; }
.rally-live b { display: block; font-size: 0.78rem; color: var(--parchment); }
.rally-live i { display: block; font-style: normal; font-size: 0.58rem; color: var(--parch-dim); }
.btn.warn-y { border-color: rgba(232, 195, 74, 0.5); color: #f0d47a; }
.btn.warn-r { border-color: rgba(232, 86, 74, 0.5); color: #f0776c; }
.btn.danger { border-color: rgba(217, 105, 92, 0.5); color: #eda093; }

.notice-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-top: 1px solid rgba(238, 241, 230, 0.08);
}
.notice-row b { display: block; font-size: 0.74rem; color: var(--parchment); }
.notice-row i { display: block; font-style: normal; font-size: 0.58rem; color: var(--parch-faint); }
.poi-list { margin-top: 6px; }

.phrase-list { display: flex; flex-direction: column; gap: 7px; }
.phrase {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.10);
  color: var(--parch-dim);
}
.phrase b { display: block; font-size: 0.72rem; color: var(--parchment); }
.phrase i {
  display: block; font-style: normal; font-size: 0.58rem; color: var(--parch-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phrase .ph-mine svg { width: 13px; height: 13px; opacity: 0.6; }

.check { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--parch-dim); }
.check input { width: 17px; height: 17px; accent-color: var(--moss-deep); }

/* Chat de l'organisateur : un canal commun, puis un par troupe. */
.organizer-chat { display: flex; flex-direction: column; height: 100%; }
.chat-pick { padding: 10px 12px 4px; overflow-x: auto; flex-wrap: nowrap; }
.chat-pick .chip { cursor: pointer; }
.chat-pick .chip.sel {
  background: rgba(110, 200, 120, 0.18);
  border-color: rgba(110, 200, 120, 0.45);
  color: var(--moss);
}
.organizer-log { flex: 1; overflow-y: auto; padding: 10px 12px; }
.cmsg { margin-bottom: 9px; }
.cmsg b { display: block; font-size: 0.6rem; color: var(--parch-faint); }
.cmsg p {
  margin: 2px 0 0; padding: 8px 11px; border-radius: 12px;
  font-size: 0.76rem; color: var(--parchment);
  background: rgba(238, 241, 230, 0.06);
}
.cmsg.mine p { background: rgba(110, 200, 120, 0.16); }

/* Code de veille, sous celui des organisateurs : meme forme, autre teinte, pour qu'on
   ne les confonde pas d'un coup d'oeil. */
.organizer-code.watch {
  background: rgba(127, 182, 201, 0.10);
  border-color: rgba(127, 182, 201, 0.28);
}
.organizer-code.watch .cc-ic svg,
.organizer-code.watch b { color: var(--sky); }

/* Le sceau dans la planche, a cote du code : deux facons de dire la meme
   chose. Il reste petit — c'est le code qu'on dicte, le QR n'est qu'un raccourci. */
.code-plank { display: flex; align-items: center; justify-content: center; gap: 14px; }
.code-plank .code-qr {
  width: 78px; height: 78px; flex: none; margin: 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Ligne de troupe non cliquable : celles que l'organisateur vient de monter. */
.team-row.static { cursor: default; }
.team-row .round-btn.sm { width: 28px; height: 28px; flex: none; }
.team-row .round-btn.sm svg { width: 13px; height: 13px; }

/* Case a cocher avec sa ligne d'explication. */
.check i {
  display: block; font-style: normal; font-size: 0.72rem;
  color: var(--parch-faint); margin-top: 3px; line-height: 1.35;
}
.check span { display: block; }

/* Plusieurs cliches pour une meme balise : des pastilles sous l'image, pas un
   carrousel — on compare deux angles, on ne feuillette pas un album. */
.ph-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.ph-dot {
  width: 9px; height: 9px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(238, 241, 230, 0.22);
  border: 1px solid rgba(238, 241, 230, 0.28);
}
.ph-dot.on { background: var(--moss); border-color: var(--moss); }