/* ── Player Grid ─────────────────────────────────────────────────────────── */
.player-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   8px;
}

.player-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       10px 12px;
  display:       flex;
  align-items:   center;
  gap:           10px;
}

.player-job-icon {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       10px;
  font-weight:     600;
  font-family:     var(--font-d);
  letter-spacing:  0.03em;
  flex-shrink:     0;
}
.player-job-icon.role-tank   { background: rgba(74,158,255,.15); color: var(--blue);  border: 1px solid rgba(74,158,255,.35); }
.player-job-icon.role-healer { background: rgba(76,175,125,.15); color: var(--green); border: 1px solid rgba(76,175,125,.35); }
.player-job-icon.role-dps    { background: rgba(224,92,92,.15);  color: var(--red);   border: 1px solid rgba(224,92,92,.35);  }

.player-name {
  font-size:     13px;
  color:         var(--t1);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.player-type {
  font-size:  11px;
  color:      var(--t2);
  margin-top: 1px;
}

/* ── AoE Timeline ────────────────────────────────────────────────────────── */
.aoe-event {
  display:               grid;
  grid-template-columns: 52px 1fr;
  gap:                   14px;
  padding:               11px 0;
  border-bottom:         1px solid var(--border);
  align-items:           start;
}
.aoe-event:last-child { border-bottom: none; }

.aoe-time {
  font-family:    var(--font-d);
  font-size:      13px;
  color:          var(--gold);
  padding-top:    2px;
  letter-spacing: 0.03em;
}

.aoe-ability {
  font-size:     13px;
  color:         var(--t1);
  margin-bottom: 7px;
}
.aoe-total {
  font-size:   12px;
  color:       var(--t2);
  margin-left: 6px;
}

.aoe-targets {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.aoe-target-wrap {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.aoe-target {
  display:       flex;
  align-items:   center;
  gap:           5px;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       2px 8px 2px 6px;
  font-size:     11px;
}

.aoe-target-job {
  font-family:    var(--font-d);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.02em;
}
.aoe-target-job.role-tank   { color: var(--blue); }
.aoe-target-job.role-healer { color: var(--green); }
.aoe-target-job.role-dps    { color: var(--red); }

.aoe-target-name { color: var(--t1); }
.aoe-target-dmg  { color: var(--t2); margin-left: 2px; }

.aoe-target-buffs {
  display:   flex;
  flex-wrap: wrap;
  gap:       2px;
  padding:   2px 4px;
}

.aoe-target-buff-icon {
  width:         16px;
  height:        16px;
  border-radius: 2px;
  object-fit:    cover;
  cursor:        default;
}