/* styles/views/trace.css — extrait de styles.css L1980-L2341. Trace mode base. */

/* ========================== TRACE MODE ================================= */
#view-trace.active{
  display:block; padding:0;
  position:relative; overflow:hidden; min-height:100vh;min-height:100dvh;
}
.trace-map{
  position:absolute; inset:0; z-index:0;
  background:var(--bg-deep, #0a0a0a);
  cursor:crosshair;
}
.trace-map .leaflet-container{ background:transparent; cursor:crosshair; }

/* Mission panel top-left */
/* Bouton "QUITTER" : case séparée, en haut. Même DA que les boutons
 * RETOUR / QUITTER des autres vues (lobby, mode-config). */
.trace-nav{
  position:absolute; top:16px; left:16px;
  z-index:5;
}
.trace-nav .mc-back{
  /* Le style .mc-back est défini globalement (topbar des autres views).
   * Pas d'override ici pour garder la DA cohérente. */
}

/* Brief de mission : positionnement uniquement — le fond acier DIP
 * vient de .dip-panel (styles/theme/pinboard/dip.css).
 * top=90 : aligne l'espace sous le bouton SORTIE (bottom≈63) sur
 * l'espace au-dessus (27px) pour un visuel symétrique.
 * width = max-content + min-width : la carte grandit quand les noms
 * de stations sont longs (ex. MAIRIE DE MONTREUIL) au lieu de wrap. */
.trace-mission{
  position:absolute; top:90px; left:16px;
  z-index:4;
  width:max-content; min-width:380px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; gap:10px;
}
/* Empêcher display:flex d'écraser l'attribut hidden */
.trace-mission-ends[hidden]{ display:none !important; }
.trace-mission-line[hidden]{ display:none !important; }

/* Theme toggle overlay */
.trace-theme-toggle{ position:absolute; top:16px; right:16px; z-index:5; }

/* (Zoom leaflet trace : stylé dans le bloc CHROME UNIFIÉ en fin de fichier) */

/* Action bar (bottom-center) : positionnement uniquement — les
 * boutons portent .dip-btn qui gère le fond acier brossé. */
.trace-actions{
  position:absolute; left:50%; bottom:28px;
  transform:translateX(-50%);
  z-index:5;
  display:flex; gap:12px;
  padding:0; background:transparent; border:none; box-shadow:none;
}
/* Force : [hidden] bat le display:flex. */
.trace-actions[hidden]{ display:none !important; }

/* Hint bottom-left */
.trace-hint{
  position:absolute; left:16px; bottom:16px;
  z-index:4;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--fg-dim);
  transition:opacity .25s;
}
.trace-hint.hidden{ opacity:0; pointer-events:none; }
.trace-hint-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent, #00ffc8);
  box-shadow:0 0 8px var(--accent, #00ffc8);
  animation:trace-blink 1.4s ease-in-out infinite;
}
@keyframes trace-blink{ 0%,100%{opacity:1}; 50%{opacity:.35}; }

/* Score overlay — fiche de pointage (.punch-card). Positionnement
 * uniquement ici, le fond papier + perforations + marge rouge
 * viennent de styles/theme/pinboard/punch-card.css.
 * L'animation d'entrée est déclenchée par la classe .show qui active
 * @keyframes punch-drop (voir punch-card.css). */
.trace-score{
  position:absolute; top:210px; left:16px;
  z-index:6;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.trace-score.show{
  opacity:1; pointer-events:auto;
}
.trace-score[hidden]{ display:none !important; }
/* Variantes par tier (conservées pour d'éventuels tampons colorés). */
.trace-score[data-tier="s"]{ --tier-color:#00ffc8; }
.trace-score[data-tier="a"]{ --tier-color:#22c55e; }
.trace-score[data-tier="b"]{ --tier-color:#eab308; }
.trace-score[data-tier="c"]{ --tier-color:#f97316; }
.trace-score[data-tier="d"]{ --tier-color:#ef4444; }

/* Endpoints icons (divIcons) */
.trace-endpoint-icon{ background:transparent; border:none; }
.trace-endpoint{
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
}
.trace-endpoint-dot{
  width:20px; height:20px; border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.5), 0 0 14px currentColor;
  flex-shrink:0;
}
.trace-endpoint-lbl{
  display:flex; flex-direction:column; gap:1px;
  padding:4px 8px;
  background:rgba(20,20,20,.9);
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  color:#fff;
  white-space:nowrap;
}
.trace-endpoint-tag{
  font-family:var(--mono); font-size:8px; letter-spacing:.22em;
  color:#a8a8a8; text-transform:uppercase;
}
.trace-endpoint-name{
  font-size:11px; font-weight:600;
}

@media (max-width: 720px){
  .trace-nav{ top:10px; left:10px; padding:6px 10px; }
  /* brief + reveal : MÊME largeur et MÊME left pour alignement parfait */
  .trace-mission,
  .trace-score{
    left:10px;
    width:calc(100% - 70px);
    max-width:calc(100% - 70px);
  }
  .trace-mission{ top:78px; padding:8px 12px; }
  .trace-mission-line{ font-size:14px; }
  .trace-mission-line .chip{ width:26px; height:26px; font-size:12px; }
  .trace-actions{ bottom:12px; }
  .trace-hint{ left:10px; bottom:70px; }
  .trace-theme-toggle{ top:10px; right:10px; }
  .trace-score{ top:200px; padding:20px 28px; min-width:0; }
  .trace-score-val{ font-size:56px; }
}

/* ── traceMapArea fills the section ──────────────────────────────── */
#traceMapArea{
  position:absolute; inset:0;
}

/* ── Sub-mode choice screen ──────────────────────────────────────── */
.trace-submode-choice{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px;
  background:var(--bg-deep, #0a0a0a);
  padding:32px 16px;
}
.trace-back-btn{
  position:absolute; top:20px; left:20px;
  background:transparent; border:none; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:var(--muted); padding:0;
}
.trace-back-btn:hover{ color:var(--fg); }
.trace-submode-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.32em;
  color:var(--muted); text-transform:uppercase;
}
.trace-submode-cards{
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
}
.trace-submode-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:220px; padding:28px 20px 24px;
  background:var(--panel); border:1.5px solid var(--border);
  border-radius:16px; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s;
  text-align:center;
}
.trace-submode-card:hover{
  border-color:var(--accent, #00ffc8);
  box-shadow:0 0 0 1px var(--accent,#00ffc8), 0 8px 32px rgba(0,255,200,.12);
  transform:translateY(-2px);
}
.trace-submode-card .mode-btn-chip{
  position:absolute; top:12px; right:12px;
}
.trace-submode-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--accent,#00ffc8) 10%, transparent);
  color:var(--accent,#00ffc8);
}
.trace-submode-name{
  font-size:16px; font-weight:700; color:var(--fg);
}
.trace-submode-desc{
  font-size:12px; color:var(--fg-dim); line-height:1.5;
}

/* ── Free-mode: mission tag ──────────────────────────────────────── */
.trace-free-remaining{
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--accent,#00ffc8);
  letter-spacing:.04em;
}

/* ── Free-mode progress : footer intégré à la console-brief
 *    (bandeau inférieur avec compteur + barre + score moyen). */
.cb-progress{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px 8px;
}
.cb-progress[hidden]{ display:none !important; }
.cb-progress-text{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--fg-dim); text-transform:uppercase;
  flex-shrink:0;
}
.cb-progress-bar{
  flex:1; height:4px;
  background:var(--border);
  border-radius:2px; overflow:hidden;
  min-width:60px;
}
.cb-progress-fill{
  height:100%;
  background:var(--accent,#00ffc8);
  border-radius:2px;
  transition:width .4s ease;
}
.cb-progress-score{
  font-family:var(--mono); font-size:10px;
  color:var(--muted);
  flex-shrink:0;
}

/* ── Score overlay: line chip label ─────────────────────────────── */
.trace-score-line-lbl{
  min-height:28px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}

/* (Line picker : déplacé dans le CRT du brief — cf.
 * styles/theme/pinboard/console-brief.css et
 * src/ui/trace-mode.js::_showLinePicker.) */

@media (max-width: 720px){
  .trace-submode-cards{ flex-direction:column; }
  .trace-submode-card{ width:min(280px, 90vw); }
  .trace-progress{ top:56px; right:10px; min-width:130px; }
}