/**
 * La frise détaillée (vue « Détail ») : lignes, marqueurs, courbes de fond,
 * axe des temps, bande des pulls et légende des repères.
 */

/* ---------- Timeline ---------- */
/* Filtres et frise dans un même bloc : les deux en-têtes collants s'y arrêtent. */
.tl-wrap {
  position: relative;
}
.tl {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* `clip` et non `hidden` : `hidden` ferait de la carte un conteneur de
     défilement, et l'en-tête collant ne collerait plus à la page. */
  overflow: clip;
}
/* Rôles, axe des temps et bande des pulls : ils restent en vue pendant le défilement.
   `top` est posé en JS, sous la barre de filtres, dont la hauteur dépend de la largeur. */
.tl-head {
  display: grid;
  grid-template-columns: 186px 1fr;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
}
.tl-head .head-spacer {
  border-right: 1px solid var(--line);
}
.tl-head-scroll {
  overflow: hidden;
  /* Sans cela la colonne prend la largeur de l'axe et rien ne défile plus. */
  min-width: 0;
}
.tl-head-inner {
  position: relative;
}
.tl-body {
  display: grid;
  grid-template-columns: 186px 1fr;
}
.tl-names {
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
}
.tl-scroll.grabbing {
  cursor: grabbing;
}
.tl-inner {
  position: relative;
}

.head-spacer {
  height: 52px;
  border-bottom: 1px solid var(--line);
}

.axis {
  height: 30px;
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.tick {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--line-soft);
}
.tick span {
  position: absolute;
  left: 5px;
  top: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.bossband {
  height: 22px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.boss {
  position: absolute;
  top: 3px;
  height: 16px;
  border-radius: 4px;
  background: rgba(216, 166, 87, 0.14);
  border: 1px solid rgba(216, 166, 87, 0.35);
  font-size: 10.5px;
  line-height: 14px;
  color: #e4c48d;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
}
.boss.pack {
  background: rgba(255, 159, 67, 0.1);
  border-color: rgba(255, 159, 67, 0.28);
  color: #e8b483;
}
.boss:hover {
  filter: brightness(1.35);
}
.boss.wipe {
  background: rgba(255, 77, 94, 0.13);
  border-color: rgba(255, 77, 94, 0.4);
  color: #ff9ba3;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.name-row:last-child {
  border-bottom: 0;
}
.name-row .who {
  min-width: 0;
}
.name-row .n {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name-row .s {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cls-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  flex: none;
  background: var(--sunken);
  box-shadow: 0 0 0 1px var(--line);
}
.cls-icon.sm {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  vertical-align: -4px;
  margin-right: 5px;
}

/* Pseudo cliquable : mène à la ligne du joueur dans la frise. */
[data-player] {
  cursor: pointer;
}
b[data-player]:hover,
.name-row .who:hover .n {
  text-decoration: underline;
}
.role-out {
  display: none !important;
}
.tl .name-row.focus,
.tl .lane.focus {
  background: rgba(216, 166, 87, 0.13);
  box-shadow: inset 0 0 0 1px rgba(216, 166, 87, 0.55);
  animation: focus-flash 0.9s ease-out 2;
}
@keyframes focus-flash {
  50% {
    background: rgba(216, 166, 87, 0.3);
  }
}

.lane {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.lane:last-child {
  border-bottom: 0;
}
.lane:nth-child(even) {
  background: rgba(255, 255, 255, 0.012);
}
.lane-boss {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(216, 166, 87, 0.05);
  pointer-events: none;
}
svg.curve {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* ---------- Marqueurs ---------- */
.mk {
  position: absolute;
  cursor: pointer;
  z-index: 4;
}

.mk.pt {
  width: var(--s, 18px);
  height: var(--s, 18px);
  margin-left: calc(var(--s, 18px) / -2);
  border-radius: 4px;
  background-size: cover;
  background-color: var(--sunken);
  box-shadow: 0 0 0 1.5px var(--ring, #888);
}
.mk.pt.interrupt {
  --ring: var(--c-interrupt);
}
.mk.pt.kickMiss {
  --ring: var(--c-miss);
}
/* Voile sombre sur l'icône, barre rouge nette par-dessus. */
.mk.pt.kickMiss::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: rgba(8, 10, 15, 0.62);
}
.mk.pt.kickMiss::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, transparent 40%, var(--c-miss) 40%, var(--c-miss) 60%, transparent 60%);
}
.mk.pt.dispel {
  --ring: var(--c-dispel);
}
.mk.pt.taunt {
  --ring: var(--c-taunt);
}
.mk.pt.conso {
  --ring: var(--c-conso);
}
.mk.pt.conso.combat {
  --ring: var(--c-interrupt);
}
.mk.pt.rez {
  --ring: var(--c-rez);
}
.mk.pt.plain {
  background-color: var(--ring, #888);
}
.mk.pt.death {
  --ring: var(--c-death);
  background-color: var(--c-death) !important;
  background-image: none !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 94, 0.22);
}
.mk.pt.death::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #2a0308;
  font-weight: 700;
}

.mk.bar {
  height: 12px;
  border-radius: 3px;
  min-width: 4px;
  opacity: 0.92;
  display: flex;
  align-items: center;
}
.mk.bar .ico {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px 0 0 3px;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.mk.bar .cap {
  width: 2px;
  height: 100%;
  flex: none;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px 0 0 2px;
}
.mk.bar.cc {
  background: var(--c-cc);
}
.mk.bar.cc.broken {
  background: repeating-linear-gradient(45deg, var(--c-cc) 0 3px, #5b3a86 3px 6px);
}
.mk.bar.cast {
  background: var(--c-cast);
  opacity: 0.85;
}
.mk.bar.cast.none {
  background: var(--cast-none);
  opacity: 0.6;
}
.mk.bar.cast.low {
  background: var(--cast-low);
}
.mk.bar.cast.mid {
  background: var(--cast-mid);
}
.mk.bar.cast.high {
  background: var(--cast-high);
}
/* Cast qui a provoqué une mort : plein et cerclé de blanc. */
.mk.bar.cast.lethal {
  opacity: 1;
  box-shadow: 0 0 0 1.5px #fff;
}
.mk.bar .amt {
  padding: 0 3px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: #0b0d12;
  white-space: nowrap;
  overflow: hidden;
}
.mk.bar.def.immunity {
  background: var(--d-immunity);
}
.mk.bar.def.major {
  background: var(--d-major);
}
.mk.bar.def.external {
  background: var(--d-external);
}
.mk.bar.def.raid {
  background: var(--d-raid);
}
.mk.bar.def.minor {
  background: var(--d-minor);
}
/* CD offensifs : même grammaire que les défensifs, dans les tons chauds. */
.mk.bar.off.major {
  background: var(--o-major);
}
.mk.bar.off.minor {
  background: var(--o-minor);
}
.mk.bar.off.group {
  background: var(--o-group);
}
/* CD ou conso qui n'a rien servi : rayé de rouge, sans masquer sa couleur. */
.mk.idle {
  box-shadow:
    0 0 0 1.5px var(--c-miss),
    0 0 0 3px rgba(224, 87, 79, 0.18);
}
.mk.bar.idle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(10, 12, 18, 0.55) 3px 6px);
}
.mk:hover {
  outline: 1px solid #fff;
  outline-offset: 1px;
  z-index: 6;
}
/* Valeur du pic de DPS : sans elle la courbe ne se lit qu'en relatif. */
.peak {
  position: absolute;
  transform: translate(-50%, -115%);
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(11, 13, 18, 0.82);
  border: 1px solid var(--c-dmg);
  color: var(--c-dmg);
  font-family: var(--mono);
  font-size: 9.5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.peak small {
  opacity: 0.6;
}
.mk .n {
  position: absolute;
  left: 100%;
  top: -2px;
  margin-left: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.deathline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 77, 94, 0.3);
  z-index: 1;
}
.cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 8;
}
.cursor span {
  position: absolute;
  top: 2px;
  left: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg);
  background: var(--float);
  border: 1px solid var(--line-float);
  border-radius: 4px;
  padding: 0 4px;
}