/* Carte de traque des proprietaires de fiefs.
   Page vitrine : theme sombre et jetons de main.css. Rien de commun avec le
   dashboard, qui vit sur un theme clair a part (--app-*). */

.trq-page { padding-bottom: 80px; }

/* ─── En-tete ──────────────────────────────────────────────────────────── */
.trq-hero { padding: 74px 0 26px; text-align: center; }
.trq-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--gold-lt);
  margin: 6px 0 10px;
  letter-spacing: .02em;
}
.trq-sub { color: var(--muted); max-width: 62ch; margin: 0 auto; line-height: 1.6; }
.trq-vide { color: var(--muted); text-align: center; padding: 60px 0; }

/* ─── Disposition ──────────────────────────────────────────────────────── */
.trq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .trq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─── La carte ─────────────────────────────────────────────────────────── */
.trq-mapwrap { min-width: 0; }
.trq-world {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2);
}
/* Le monde est ETEINT sur cette page, image de fond comme minimaps. C'est le
   filtre qui fait ressortir les points : a pleine luminosite, un point de
   quatre pixels se perd dans le detail d'une carte de champ. /territoires, qui
   n'a pas de point a montrer, laisse ses minimaps a 0.85/0.92.
   Valeurs remontees le 2026-08-28 : le premier reglage (0.45/0.55) rendait le
   monde illisible, on ne reconnaissait plus les regions. */
.trq-mapimg {
  display: block; width: 100%; height: auto; user-select: none;
  filter: saturate(0.62) brightness(0.74);
}

/* Le SVG recouvre exactement l'image : meme boite, aucun ajustement de ratio.
   C'est ce qui autorise la regle de trois du script pour placer l'infobulle. */
.trq-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.trq-svg .trq-mini {
  pointer-events: none;
  filter: saturate(0.6) brightness(0.8);
}

/* Le rectangle ne fait plus que border la zone : tout remplissage masquerait
   la minimap posee dessous. */
.trq-zone {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.trq-zone.is-city { stroke: rgba(201, 147, 58, 0.42); }

/* Les fiefs du joueur choisi dans la liste. Meme jaune que son point, pour que
   l'oeil relie les deux sans effort : le point dit ou il EST, les zones ou il
   REGNE. Le remplissage reste faible, sinon la minimap disparait sous la
   couleur et on perd le repere geographique qu'on vient d'allumer. */
.trq-zone.est-fief {
  fill: rgba(255, 216, 61, .22);
  stroke: #ffd83d;
  stroke-width: 2;
}

/* Les villes sont les seuls reperes nommes. Sans elles, une carte de minimaps
   eteintes ne permet pas de situer un point qui se deplace. */
.trq-label-city {
  fill: rgba(255, 255, 255, 0.80);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 2.5px;
  pointer-events: none;
}

/* ─── Les points ───────────────────────────────────────────────────────── */
/* Pas de transition tant que le point n'a pas ete pose une premiere fois :
   sinon chaque nouvelle arrivee traverserait la carte depuis l'origine du
   repere, ce qui donnerait un envol absurde a chaque connexion. */
.trq-point { cursor: pointer; }
.trq-point.est-place { transition: transform 4.8s linear; }

.trq-noyau {
  fill: var(--blue);
  stroke: rgba(0, 0, 0, .65);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.trq-halo {
  fill: var(--blue);
  opacity: .16;
  transition: opacity .25s ease;
}
.trq-point:hover .trq-halo { opacity: .34; }

/* La cible choisie dans la liste. Jaune franc, et le seul jaune de la page :
   il doit se detacher d'un coup d'oeil au milieu des autres points. */
.trq-point.est-cible .trq-noyau { fill: #ffd83d; stroke: #2a2007; }
.trq-point.est-cible .trq-halo {
  fill: #ffd83d;
  opacity: .42;
  animation: trq-pulse 1.5s ease-in-out infinite;
}
@keyframes trq-pulse {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .16; transform: scale(1.65); }
}
@media (prefers-reduced-motion: reduce) {
  .trq-point.est-place { transition: none; }
  .trq-point.est-cible .trq-halo { animation: none; }
}

/* ─── Infobulle ────────────────────────────────────────────────────────── */
.trq-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  background: rgba(8, 8, 10, .96);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 5;
  transition: opacity .14s ease;
}
.trq-tooltip.est-visible { opacity: 1; }
.trq-tt-nom { color: var(--gold-lt); font-weight: 600; margin-bottom: 2px; }
.trq-tt-l { color: var(--muted); }

/* ─── Etat du direct ───────────────────────────────────────────────────── */
.trq-etat {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 2px 0;
  font-size: .78rem;
  color: var(--muted);
}
.trq-pouls {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--online);
  opacity: .35;
}
.trq-pouls.bat { animation: trq-bat 1s ease-out 1; }
@keyframes trq-bat {
  0%   { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 213, 115, .55); }
  100% { opacity: .35; box-shadow: 0 0 0 7px rgba(46, 213, 115, 0); }
}
@media (prefers-reduced-motion: reduce) { .trq-pouls.bat { animation: none; } }

/* ─── La liste ─────────────────────────────────────────────────────────── */
.trq-liste {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 16px 14px;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) { .trq-liste { position: static; max-height: none; } }

.trq-liste-titre {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold-lt);
  margin: 0 0 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.trq-compte {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: var(--bg);
  background: var(--gold);
  border-radius: 10px;
  padding: 1px 8px;
}
.trq-liste-aide { color: var(--muted); font-size: .76rem; margin: 0 0 12px; line-height: 1.45; }

.trq-joueurs {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.trq-aucun { color: var(--muted); font-size: .8rem; padding: 10px 4px; }

.trq-joueur {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.trq-joueur:hover { background: rgba(255, 255, 255, .035); }
.trq-joueur:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.trq-joueur.est-cible {
  background: rgba(255, 216, 61, .09);
  border-color: rgba(255, 216, 61, .42);
}

.trq-avatar {
  width: 30px; height: 38px;
  object-fit: contain; object-position: bottom;
  flex: 0 0 30px;
  image-rendering: pixelated;   /* sprites RO : pas de lissage */
}
.trq-joueur-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.trq-joueur-nom {
  color: var(--text); font-size: .84rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trq-joueur-lieu {
  color: var(--muted); font-size: .72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trq-joueur.est-horsmap .trq-joueur-lieu { font-style: italic; opacity: .8; }

.trq-joueur-fiefs {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--gold-lt);
  background: rgba(201, 147, 58, .11);
  border-radius: 9px;
  padding: 1px 7px;
}